/* Shared compact gameplay layout – StackDare and Numlark. Landing pages unchanged. */
@media(max-width:760px){
 /* StackDare: modes above the arena, no redundant intro copy. */
 body:has(> main > .arena) > main {
   display:flex;flex-direction:column;align-items:stretch;gap:6px;
   margin:4px auto 0;padding:0 max(6px,env(safe-area-inset-left)) 0 max(6px,env(safe-area-inset-right));
 }
 body:has(> main > .arena) .intro {width:100%;flex:0 0 auto}
 body:has(> main > .arena) .modes {padding:2px;gap:2px}
 body:has(> main > .arena) .modes button {padding:7px 8px;min-height:38px}
 body:has(> main > .arena) .mode-note {min-height:0;padding:2px 0;font-size:11px;line-height:1.25}
 body:has(> main > .arena) .arena {
   width:100%;min-height:0;height:auto;
   /* dvh follows the browser toolbar; 48px header + modes/status allowance */
   height:clamp(340px,calc(100dvh - 145px - env(safe-area-inset-bottom)),850px);
   border-radius:10px;
 }
 body:has(> main > .arena) .game-area {min-height:0;flex:1}
 body:has(> main > .arena) .hud {padding:7px 12px 0}
 body:has(> main > .arena) .hud strong {font-size:30px}
 body:has(> main > .arena) .best strong {font-size:26px}
 body:has(> main > .arena) .arena-foot {padding:5px 10px;min-height:32px}
 body:has(> main > .arena) .overlay {padding:12px 12px 6px}
 body:has(> main > .arena) .overlay h2 {font-size:clamp(27px,7vw,40px);margin:8px 0 4px}
 body:has(> main > .arena) .overlay p {margin:4px 0 10px}
 body:has(> main > .arena) .overlay .primary {min-height:44px;padding:10px 18px}
 /* Numlark: board and controls take precedence over decoration. */
 body:has(> main.numlark-play-page) .numlark-play-page {padding:6px max(7px,env(safe-area-inset-left)) 12px max(7px,env(safe-area-inset-right))}
 body:has(> main.numlark-play-page) .numlark-card {padding:10px}
 body:has(> main.numlark-play-page) .numlark-top {margin-bottom:5px}
 body:has(> main.numlark-play-page) .numlark-stats {margin:8px 0 3px;gap:4px}
 body:has(> main.numlark-play-page) .numlark-stats strong {font-size:22px}
 body:has(> main.numlark-play-page) .numlark-card>p {margin:5px 0;font-size:12px;line-height:1.3}
 body:has(> main.numlark-play-page) .numlark-card .actions {margin-top:8px;gap:6px}
 body:has(> main.numlark-play-page) .numlark-card .actions .button {min-height:44px;padding:7px 10px;font-size:13px}
}
@media (max-width:350px){
 body:has(> main > .arena) > header .game-nav-labeled span,
 body:has(> main.numlark-play-page) > header nav .game-nav-labeled span:not([aria-hidden]) {display:none}
}
@media (prefers-reduced-motion:reduce){
 body:has(> main.numlark-play-page) .numlark-tile {transition:none}
}

/* StackDare visual parity with Numlark: compact board card and quiet start overlay. */
@media(max-width:760px){
 body:has(> main > .arena) > main{gap:5px}
 body:has(> main > .arena) .modes{border-radius:9px;background:#191d23}
 body:has(> main > .arena) .modes button{min-height:36px;padding:5px 7px;font-size:14px}
 body:has(> main > .arena) .mode-note{font-size:10px;min-height:0;margin:0;padding:1px 0 2px}
 body:has(> main > .arena) .arena{
   border-radius:16px;
   height:clamp(320px,calc(100dvh - 164px - env(safe-area-inset-bottom)),700px);
   box-shadow:none;
 }
 body:has(> main > .arena) .hud{padding:9px 14px 0}
 body:has(> main > .arena) .hud span{font-size:10px;letter-spacing:1px}
 body:has(> main > .arena) .hud strong{font-size:29px;line-height:1}
 body:has(> main > .arena) .hud .best strong{font-size:27px}
 body:has(> main > .arena) #heightValue{font-size:11px;margin-top:2px}
 body:has(> main > .arena) .overlay{
   justify-content:flex-start;padding:clamp(12px,4vh,24px) 12px 8px;
   background:linear-gradient(#191c21c9,#191c2155 50%,transparent 80%);
 }
 body:has(> main > .arena) .overlay .pill{font-size:9px;letter-spacing:.6px;padding:5px 9px}
 body:has(> main > .arena) .overlay h2{
   font-size:clamp(23px,6vw,32px);line-height:1.05;margin:7px 0 2px;
 }
 body:has(> main > .arena) .overlay p{font-size:12px;margin:3px 0 8px}
 body:has(> main > .arena) .overlay #start{
   min-width:0;width:min(210px,80%);min-height:44px;
   padding:9px 12px;font-size:15px;box-shadow:0 3px 0 #86ad40;
 }
 body:has(> main > .arena) .overlay #start span{margin-left:8px}
 body:has(> main > .arena) .arena-foot{padding:5px 10px;font-size:9px;letter-spacing:.3px}
}

/* One authoritative header for StackDare, Numlark and future games.
   Gameplay pages use class="shared-game-header" without game-specific header classes. */
body>header.shared-game-header{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;
 box-sizing:border-box;width:100%;max-width:100%;margin:0;
 gap:8px;min-height:60px;padding:8px 12px;border-bottom:1px solid #343a43;
}
body>header.shared-game-header .game-identity{
 display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;
 gap:6px;border:0;padding:0;color:#f7f7f2;text-decoration:none;
 font:700 16px/1.2 'DM Sans',system-ui,sans-serif;white-space:nowrap;
}
body>header.shared-game-header .game-identity img{
 display:block;width:28px;height:28px;flex:0 0 28px;border-radius:6px;
}
body>header.shared-game-header nav.settings{
 display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;
 min-width:0;width:auto;margin:0;gap:5px;flex-wrap:nowrap;order:initial;
}
body>header.shared-game-header nav.settings a.game-nav-labeled{
 display:inline-flex;align-items:center;justify-content:center;
 min-width:0;min-height:44px;padding:4px 3px;gap:3px;
 color:#f7f7f2;text-decoration:none;white-space:nowrap;
 font:400 11px/1.2 'DM Sans',system-ui,sans-serif;
}
body>header.shared-game-header nav.settings a.game-nav-labeled:hover{color:#c5fa64}
body>header.shared-game-header nav.settings>:is(button,a)#gameLanguage{
 appearance:none;box-sizing:border-box;position:relative;
 display:inline-flex;align-items:center;justify-content:center;
 flex:0 0 30px;width:30px;min-width:30px;max-width:30px;
 height:30px;min-height:30px;max-height:30px;
 margin:0 0 0 3px;padding:0;order:99;
 border:1px solid #59616b;border-radius:6px;
 background:#272d34;color:#f7f2ea;text-decoration:none;
 font:700 10px/1 system-ui,sans-serif;
}
body>header.shared-game-header nav.settings>:is(button,a)#gameLanguage::after{
 content:"";position:absolute;inset:-7px;
}
@media(max-width:760px){
 body>header.shared-game-header{
  gap:5px;min-height:48px;
  padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left));
 }
 body>header.shared-game-header .publisher-lockup{display:none}
 body>header.shared-game-header .game-identity{
  font-size:clamp(12px,3.7vw,16px);gap:4px;
 }
 body>header.shared-game-header .game-identity img{
  width:26px;height:26px;flex-basis:26px;
 }
 body>header.shared-game-header nav.settings{gap:3px}
 body>header.shared-game-header nav.settings a.game-nav-labeled{
  font-size:10px;padding:3px 2px;gap:2px;
 }
 body>header.shared-game-header nav.settings>:is(button,a)#gameLanguage{
  flex-basis:28px;width:28px;min-width:28px;max-width:28px;
  height:28px;min-height:28px;max-height:28px;margin-left:2px;
 }
}
@media(max-width:350px){
 body>header.shared-game-header nav.settings a.game-nav-labeled span[data-game-en]{display:none}
 body>header.shared-game-header nav.settings a.game-nav-labeled{min-width:32px}
}

/* Explicit cross-game header geometry, independent of site.css vs style.css defaults. */
body>header.shared-game-header{
 height:60px;min-height:60px;max-height:60px;
 padding-block:0;overflow:visible;line-height:1.2;
}
body>header.shared-game-header nav.settings{height:100%;min-height:0;max-height:100%;align-self:center}
body>header.shared-game-header .game-identity{height:100%;min-height:0;align-self:center}
body>header.shared-game-header nav.settings a.game-nav-labeled{height:44px;min-height:44px;box-sizing:border-box}
@media(max-width:760px){
 body>header.shared-game-header{
  height:48px;min-height:48px;max-height:48px;
  padding-block:0;box-sizing:border-box;
 }
 body>header.shared-game-header nav.settings{height:100%;min-height:0;max-height:100%}
 body>header.shared-game-header nav.settings a.game-nav-labeled{height:44px;min-height:44px}
}