/* The game controls always share the available screen with safe areas and ads. */
#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#scrHome .kosak-mark{top:16px}
#homeCenter{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;align-items:center;justify-items:center;gap:6px;padding:0 12px 10px;overflow:hidden;min-width:0;min-height:0}
.game-logo{font-size:clamp(22px,3.4vh,32px);line-height:1.1}
#homePreview{width:min(42vw,174px);height:100%;max-height:210px;min-height:0;min-width:0;flex:none;filter:drop-shadow(0 8px 12px #8c642844)}
#homePreview svg{height:100%;max-height:100%;width:auto;max-width:100%}
#homeCharName{font-size:13px;line-height:1.2;letter-spacing:1px}
#btnStart{width:min(75vw,300px);padding:11px 18px;min-height:44px;font-size:18px;line-height:1.2}
#miniRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;justify-content:center;gap:6px;width:100%;max-width:440px;margin:5px 0 0;padding:0;min-width:0}
#miniRow .mini-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:auto;min-width:0;height:auto;min-height:66px;padding:6px 3px;border-radius:17px;font:inherit;color:var(--txt);cursor:pointer}
#miniRow .mini-thumb{width:clamp(30px,8.6vw,42px);height:clamp(30px,8.6vw,42px);min-width:0;flex:none;margin:0}
#miniRow .mini-name{font-size:11px;line-height:1.2;letter-spacing:0;min-height:27px;width:100%;white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:normal;text-align:center}
#miniRow .newb{display:none}
#miniRow .mini-card:focus-visible{outline:3px solid #3f90bb;outline-offset:2px}
@media(orientation:landscape) and (min-width:540px){
 #scrHome>.topbar{padding:6px 14px 4px}
 #scrHome>.topbar .roundbtn{width:40px;height:40px;font-size:19px}
 #scrHome .kosak-mark{top:12px;font-size:10px;letter-spacing:3px}
 #homeCenter{grid-template-columns:minmax(140px,.8fr) minmax(260px,1.2fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:18px;row-gap:4px;padding:0 14px 7px}
 .game-logo{grid-column:1;grid-row:1;font-size:20px}
 #homePreview{grid-column:1;grid-row:2;width:120px;max-height:140px}
 #homeCharName{grid-column:1;grid-row:3;font-size:11px}
 #btnStart{grid-column:1;grid-row:4;width:min(100%,240px);min-height:38px;padding:8px 14px;font-size:16px}
 #miniRow{grid-column:2;grid-row:1 / span 4;align-self:center;width:100%;max-width:440px;margin:0;gap:5px}
 #miniRow .mini-card{min-height:58px;padding:5px 3px;border-radius:14px}
 #miniRow .mini-thumb{width:30px;height:30px}
 #miniRow .mini-name{font-size:9.5px;min-height:23px}
}
@media(max-width:345px){#homeCenter{gap:5px;padding-left:10px;padding-right:10px}#miniRow{gap:5px}#miniRow .mini-card{padding:5px 2px;border-radius:14px}#miniRow .mini-name{font-size:10.5px}}
@media(max-height:560px) and (orientation:portrait){#scrHome>.topbar{padding:8px 14px 4px}#scrHome>.topbar .roundbtn{width:42px;height:42px}.game-logo{font-size:22px}#homeCenter{gap:4px}#miniRow .mini-thumb{width:28px;height:28px}#miniRow .mini-card{min-height:60px;padding:4px 2px}}