/* Mobile game surfaces: loaded after each game's legacy layout rules. */
@media (max-width:900px) and (pointer:coarse), (max-width:720px) {
  :root { --game-fit-width:100%; --boardmax:100%; }
  body { overflow-x:hidden; }
  main.site-pad { padding-left:max(3px,env(safe-area-inset-left))!important; padding-right:max(3px,env(safe-area-inset-right))!important; padding-top:3px!important; }
  .page-shell,.layout,.stage,.game-play-row,.screen-shell,.cabinet,.cab-screen { min-width:0!important; max-width:100%!important; }
  .layout { display:flex!important; flex-direction:column!important; gap:12px!important; }
  .layout > .stage { order:0!important; width:100%!important; box-sizing:border-box; padding:3px 0 8px!important; border-radius:10px!important; }
  .legend-col,.score-col { width:100%!important; order:2!important; }
  header.site-head { position:relative!important; min-height:52px!important; height:auto!important; padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left))!important; gap:6px!important; }
  header.site-head .brand img { height:32px!important; }
  .stage-head { padding:2px 8px 5px!important; margin:0!important; }
  .stage-head .eyebrow,.stage-head p { display:none!important; }
  .stage-head h1 { font-size:20px!important; margin:2px 0!important; }
  .game-play-row { display:flex!important; flex-direction:column!important; gap:10px!important; width:100%!important; }
  .game-play-row > .screen-shell { order:0!important; width:100%!important; padding:2px!important; box-sizing:border-box; border-radius:10px!important; }
  .game-play-row > .game-legend,.game-play-row > .power-legend { order:1!important; width:100%!important; box-sizing:border-box; }
  .screen-shell::before { inset:3px!important; border-radius:8px!important; }
  .cabinet,.cab-screen { width:100%!important; margin:0!important; }
  .cab-screen .board-wrap,.game-play-row .board-wrap { width:100%!important; max-width:100%!important; padding:3px!important; margin:0!important; box-sizing:border-box!important; border-radius:8px!important; }
  .cab-screen canvas#board,canvas#board { display:block!important; width:100%!important; height:auto!important; max-width:100%!important; max-height:none!important; margin:0!important; }
  .screen-shell .hud,.crush-readouts { width:100%!important; max-width:none!important; }
  .game-play-row .crush-game-frame { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:0!important; }
  .crush-game-frame .crush-readouts { grid-column:1!important; grid-row:1!important; }
  .crush-game-frame .crush-objectives { grid-column:1!important; grid-row:2!important; border:0!important; border-radius:0!important; }
  .crush-objectives h2 { display:none!important; }
  .crush-objectives .goals { position:static!important; display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; padding:3px 4px!important; gap:4px!important; }
  .crush-objectives .goal { flex-direction:row!important; align-items:center!important; padding:2px 4px!important; gap:3px!important; font-size:9px!important; white-space:nowrap; }
  .crush-objectives .goal canvas { width:18px!important; height:18px!important; }
  .crush-game-frame > .cabinet { grid-column:1!important; grid-row:3!important; }
  .controls { margin:8px 4px 0!important; padding:8px!important; }
  .board-wrap .overlay { max-height:100%; overflow-y:auto; box-sizing:border-box; }
}
/* Landscape phones fit the tall games to the screen height without stretching. */
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse) {
  .game-play-row > .screen-shell { width:min(100%,var(--mobile-landscape-width,440px))!important; align-self:center; }
  header.site-head { position:static!important; }
}

/* Reserve mobile header columns so the wide wordmark never covers controls. */
@media (max-width:900px) and (pointer:coarse), (max-width:720px) {
  header.site-head { display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; }
  header.site-head .brand { grid-column:1; grid-row:1; min-width:0; width:100%; overflow:hidden; }
  header.site-head .brand img { width:100%!important; max-width:180px!important; height:auto!important; max-height:32px!important; object-fit:contain; object-position:left center; flex-shrink:1!important; }
  header.site-head .head-right { grid-column:2; grid-row:1; justify-self:end; min-width:0; gap:6px!important; }
  header.site-head .head-right .btn { min-width:0; max-width:140px; padding:8px!important; font-size:10px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  header.site-head .nav-toggle { display:block!important; flex:0 0 36px; width:36px!important; height:36px!important; padding:0!important; }
  header.site-head nav.main-nav { grid-column:1/-1!important; grid-row:2; width:100%; display:none!important; }
  header.site-head.menu-open nav.main-nav { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
}