/* Replay80: reserve space for every control, never stretch an actor. */
html,body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
body,button,canvas,button *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{height:100dvh;max-width:1800px;display:grid;grid-template-rows:48px minmax(0,1fr);padding:calc(env(safe-area-inset-top) + 4px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 10px)}
.topbar{height:auto;min-height:0;gap:10px}.brand{font-size:21px}.brand span{color:#adff16}.brand small{display:none}.game-name{font-size:18px;letter-spacing:1px}.game-name span{font-size:8px;letter-spacing:1px}.tools{align-items:center;gap:5px}.tool{width:42px;height:42px;min-width:42px}.language-picker select{height:38px;max-width:60px;background:#173d32;color:#fff2cc;border:1px solid #cfc5a266;border-radius:8px;font:600 12px system-ui}
.play-layout{width:100%;height:100%;margin:0;display:grid;grid-template-rows:minmax(0,1fr) 108px;gap:6px;min-height:0}
.game-column{height:100%;min-height:0;display:grid;grid-template-rows:30px minmax(0,1fr);justify-items:center;align-items:center;grid-area:auto}.session-hud{height:30px;width:var(--board-width,100%);max-width:100%;gap:12px;padding:0 7px;font-size:10px;letter-spacing:.8px}
.arena{width:var(--board-width,100%);height:var(--board-height,100%);max-width:100%;aspect-ratio:auto;align-self:center;border-radius:12px}.control-deck{min-height:0;height:100%;gap:28px}.dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,46px);gap:4px}.dpad-center{display:none}.dpad .down{grid-area:2/2}.croak{width:88px;max-width:88px;min-height:88px}.croak span{font-size:9px}.wide-only{display:block}
.overlay{padding:12px;align-items:center}.menu-card{padding:16px 18px;max-height:100%;overscroll-behavior:contain}.menu-card h1{font-size:34px;margin:8px 0 4px}.menu-card p#menu-copy{font-size:13px;line-height:1.4;margin:10px 0}.menu-subtitle{font-size:16px;margin-bottom:8px}.menu-hint{font-size:10px;line-height:1.5;margin-top:10px}.toast{top:8px;max-width:92%;padding:7px 12px;font-size:11px}.primary{min-height:44px}
.native-croa .brand,.native-croa .language-picker,.native-croa #fullscreen{display:none!important}.native-croa .topbar{padding-left:58px}.native-croa .game-name{font-size:16px}.native-croa #app{max-width:none}
@media(orientation:portrait){
 #app{grid-template-rows:48px minmax(0,1fr)}.play-layout{grid-template-rows:minmax(0,1fr) 152px}.dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,46px)}.dpad .down{grid-area:3/2}.dpad-center{display:grid}.control-deck{gap:32px}.croak{width:94px;max-width:94px;min-height:94px}
}
@media(orientation:portrait) and (max-width:480px){
 .brand{font-size:17px}.game-name{font-size:13px;letter-spacing:.2px}.game-name span{font-size:6px;letter-spacing:.4px}.tools{gap:3px}.tool{width:40px;min-width:40px;height:40px}.topbar{gap:5px}.wide-only{display:none}.brand{display:none}.language-picker select{max-width:45px}.native-croa .game-name{font-size:13px}
 .session-hud{font-size:8px;gap:8px}#hearts{font-size:16px;letter-spacing:2px}#score,.clock{font-size:14px}.session-hud b{font-size:9px}.menu-card h1{font-size:30px}
}
@media(orientation:portrait) and (max-height:640px){
 .play-layout{grid-template-rows:minmax(0,1fr) 108px}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}.dpad .down{grid-area:2/2}.dpad-center{display:none}.croak{width:82px;max-width:82px;min-height:82px}.menu-hint{display:none}.menu-card{padding:12px}.menu-card h1{font-size:25px}.menu-card p#menu-copy{font-size:11px}
}
/* Short landscape: controls beside the board, all lanes visible. */
@media(orientation:landscape) and (max-height:650px){
 #app{grid-template-rows:44px minmax(0,1fr);padding-bottom:calc(env(safe-area-inset-bottom) + 5px)}.topbar{padding:0 4px}.brand{font-size:18px}.game-name{font-size:15px}.play-layout{grid-template-columns:148px minmax(0,1fr) 102px;grid-template-rows:minmax(0,1fr);gap:9px}.game-column{grid-column:2;grid-row:1;grid-template-rows:26px minmax(0,1fr)}.session-hud{height:26px;font-size:8px;gap:7px}.session-hud b{font-size:9px}#score,.clock{font-size:13px}#hearts{font-size:15px;letter-spacing:1px}.control-deck{display:contents}.dpad{grid-column:1;grid-row:1;align-self:center;justify-self:center;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px}.dpad .down{grid-area:3/2}.dpad-center{display:grid}.croak{grid-column:3;grid-row:1;justify-self:center;align-self:center;width:90px;max-width:90px;min-height:90px}.menu-card{padding:11px 14px}.menu-card h1{font-size:26px;margin:5px 0}.menu-card p#menu-copy{font-size:11px;line-height:1.3;margin:7px 0}.menu-subtitle{font-size:13px;margin-bottom:6px}.menu-hint{display:none}.eyebrow{font-size:7px}.primary{font-size:13px;padding:9px}.toast{font-size:10px;padding:5px 9px;top:5px}.arena{border-radius:9px}
}
@media(orientation:landscape) and (max-height:360px){
 .brand{display:none}.game-name span{display:none}.play-layout{grid-template-columns:136px minmax(0,1fr) 90px;gap:5px}.dpad{gap:2px}.croak{width:80px;max-width:80px;min-height:80px}.overlay{padding:6px}.menu-card h1{font-size:22px}.menu-subtitle{font-size:12px}.menu-card p#menu-copy{font-size:10px}.menu-card{padding:9px 12px}
}

/* V87: four large arrows along the bottom; no round CROÂ button. */
#croak{display:none!important}
@media (pointer:coarse) and (max-width:600px) and (orientation:portrait), (pointer:coarse) and (max-height:500px) and (orientation:landscape){
 .play-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 72px;gap:6px}
 .game-column{grid-column:1;grid-row:1}
 .control-deck{display:flex;grid-column:1;grid-row:2;width:100%;height:100%;align-items:flex-end;justify-content:center;gap:0;padding:0}
 .dpad{width:min(100%,520px);grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:64px;gap:8px;filter:drop-shadow(0 3px 2px #0005)}
 .dpad .left{grid-area:1/1}.dpad .up{grid-area:1/2}.dpad .down{grid-area:1/3}.dpad .right{grid-area:1/4}.dpad-center{display:none}
 .dpad button{font-size:28px;border-radius:12px}
}
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
 .play-layout{grid-template-rows:minmax(0,1fr) 62px;gap:4px}
 .dpad{grid-template-rows:56px}
}