/* Standalone play surface. The stage owns all remaining viewport space. */
html:has(body.fullscreen-game),body.fullscreen-game{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body.fullscreen-game{min-height:0;background:var(--stage);color:var(--ink)}
body.fullscreen-game #app{height:100%;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.fullscreen-game .play-header{width:100%;max-width:none;margin:0;padding:9px 20px;min-height:60px;display:flex;justify-content:initial;gap:13px;background:var(--paper);border-bottom:1px solid var(--line);z-index:4}
body.fullscreen-game .home-link{flex:0 0 38px;min-height:40px;display:grid;place-items:center}
body.fullscreen-game .brand{width:29px;height:29px;line-height:27px;font-size:27px}
body.fullscreen-game .game-title{flex:1;min-width:0}
body.fullscreen-game h1{font-size:20px;letter-spacing:-.6px;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.fullscreen-game .header-actions{gap:7px;flex:0 0 auto}
body.fullscreen-game .icon-button{width:40px;height:40px;min-height:40px;background:var(--card);border-radius:12px;font-size:13px}
body.fullscreen-game #help{font-size:18px}
body.fullscreen-game #fullscreen{font-size:21px}
body.fullscreen-game .play-main{width:100%;max-width:none;min-width:0;min-height:0;margin:0;display:flex;overflow:hidden}
body.fullscreen-game .game-card{width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:transparent}
body.fullscreen-game .hud{grid-column:1;grid-row:1;justify-content:center;gap:clamp(20px,7vw,90px);padding:9px 18px;min-height:52px;border:0;background:var(--paper)}
body.fullscreen-game .stat{display:flex;align-items:center;gap:9px;min-width:0}
body.fullscreen-game .stat span{display:block;margin:0;font-size:10px}
body.fullscreen-game .stat strong{font-size:20px;white-space:nowrap}
body.fullscreen-game .stage{grid-column:1;grid-row:2;position:relative;display:grid;place-items:center;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden;background:transparent;isolation:isolate}
body.fullscreen-game .stage canvas{display:block;width:var(--board-width,1px);height:var(--board-height,1px);min-width:0;min-height:0;max-width:none;max-height:none;margin:0;touch-action:none;outline-offset:-4px}
body.fullscreen-game .screw-board{position:relative;width:var(--board-width,1px);height:var(--board-height,1px);min-width:0;min-height:0;max-width:none;aspect-ratio:auto}
body.fullscreen-game .screw-hole{width:44px;height:44px}
body.fullscreen-game .message{grid-column:1;grid-row:3;min-height:0;max-height:50px;padding:7px 16px 3px;line-height:1.5;font-size:12px;background:var(--paper);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.fullscreen-game .toolbar{grid-column:1;grid-row:4;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;padding:8px 14px 12px;border:0;background:var(--paper)}
body.fullscreen-game .toolbar .action-button{min-height:44px;min-width:44px;width:auto;padding:10px 16px;font-size:12px;line-height:1.25;border-radius:12px;white-space:nowrap;background:var(--card)}
body.fullscreen-game .toolbar .action-button.primary{background:var(--accent)}
body.fullscreen-game .toolbar #move-left,body.fullscreen-game .toolbar #move-right{width:44px;min-height:44px;font-size:19px;padding:6px;grid-column:auto}
body.fullscreen-game .toolbar #pause,body.fullscreen-game .toolbar #restart,body.fullscreen-game .toolbar #levels,body.fullscreen-game .toolbar #defend{grid-column:auto}
body.fullscreen-game .toolbar .jump-button{min-width:145px;flex-basis:auto}
body.fullscreen-game .game-overlay{position:fixed;inset:0;z-index:10;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center;overflow:hidden}
body.fullscreen-game .modal{width:min(480px,100%);max-height:100%;padding:24px 28px;overflow:auto;overscroll-behavior:contain;border-radius:22px;touch-action:pan-y}
body.fullscreen-game .modal-mark{display:none}
body.fullscreen-game .modal h2{font-size:26px;line-height:1.3;margin-bottom:12px}
body.fullscreen-game .modal-body{font-size:13px;line-height:1.8}
body.fullscreen-game .modal-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
body.fullscreen-game .modal .action-button{min-height:44px;font-size:13px;padding:11px 15px}
body.fullscreen-game .level-grid{gap:7px}
body.fullscreen-game .level-button{height:44px;min-height:44px;font-size:13px}
body.fullscreen-game .level-button small{font-size:7px}
body.fullscreen-game .modal:has(.level-grid){padding:20px}
body.fullscreen-game .modal:has(.level-grid) .modal-actions{flex-direction:row}
body.fullscreen-game .modal:has(.level-grid) .level-button{height:44px}
body.color-lab.fullscreen-game{background:radial-gradient(ellipse at center,#faf7ff,#e7e2f2)}
body.merge-keep.fullscreen-game{background:#193d35}
body.doodle-delivery.fullscreen-game{background:#f7efdf}
body.neon-flight.fullscreen-game{background:radial-gradient(ellipse at center,#191235,#0c152d)}
body.pocket-parking.fullscreen-game{background:#dfeae5}
body.screw-studio.fullscreen-game{background:radial-gradient(ellipse at 50% 30%,#faf3e0,#e5ddca)}
body.slice-bounce.fullscreen-game{background:#fff0d9}
body.wobble-works.fullscreen-game{background:#f0ecdf}
body.fullscreen-game .doodle-camera{position:absolute;left:50%;bottom:calc((100% - var(--board-height))/2 + 12px);transform:translateX(-50%);display:flex;gap:8px;z-index:2}
body.fullscreen-game .doodle-camera .action-button{min-width:44px;min-height:44px;background:#fff9edee;padding:8px 12px;font-size:12px;white-space:nowrap;box-shadow:0 3px 14px #765c3610}
@media(max-width:640px){
  body.fullscreen-game .play-header{min-height:54px;padding:6px 10px;gap:7px}
  body.fullscreen-game .home-link{flex-basis:34px;min-height:40px}
  body.fullscreen-game h1{font-size:17px;letter-spacing:-.5px}
  body.fullscreen-game .header-actions{gap:5px}
  body.fullscreen-game .icon-button{width:36px;height:40px;font-size:11px}
  body.fullscreen-game #fullscreen{display:none}
  body.fullscreen-game .hud{padding:8px 12px;min-height:52px;gap:12px;justify-content:space-around}
  body.fullscreen-game .stat{display:block;text-align:center}
  body.fullscreen-game .stat span{font-size:9px;margin-bottom:3px;letter-spacing:0}
  body.fullscreen-game .stat strong{font-size:17px}
  body.fullscreen-game .message{font-size:11px;padding:6px 12px 2px;max-height:42px}
  body.fullscreen-game .toolbar{gap:6px;padding:7px 10px 10px}
  body.fullscreen-game .toolbar .action-button{font-size:11px;padding:10px 12px;flex:0 1 auto}
  body.merge-keep.fullscreen-game .toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  body.merge-keep.fullscreen-game .toolbar .action-button{padding-inline:4px;width:100%;min-width:0;font-size:10px}
  body.merge-keep.fullscreen-game #defend{grid-column:span 2}
  body.fullscreen-game .toolbar .jump-button{flex-basis:100%}
  body.wobble-works.fullscreen-game .toolbar{display:grid;grid-template-columns:44px 1fr 1.2fr 44px}
  body.wobble-works.fullscreen-game .toolbar .action-button{padding-inline:5px}
  body.wobble-works.fullscreen-game #pause{grid-column:1 / 3}
  body.wobble-works.fullscreen-game #restart{grid-column:3}
  body.wobble-works.fullscreen-game #levels{grid-column:4;font-size:10px;padding-inline:1px}
  body.fullscreen-game .modal{padding:20px;border-radius:18px}
  body.fullscreen-game .modal h2{font-size:23px}
  body.fullscreen-game .modal-body{font-size:12px}
  body.fullscreen-game .level-grid{gap:6px}
  body.screw-studio.fullscreen-game .level-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-height:520px) and (min-aspect-ratio:4/3){
  body.fullscreen-game .play-header{min-height:44px;padding:3px 12px}
  body.fullscreen-game .icon-button{height:36px;min-height:36px;width:36px}
  body.fullscreen-game .game-card{grid-template-columns:minmax(0,1fr) 156px;grid-template-rows:auto minmax(0,1fr) auto}
  body.fullscreen-game .hud{grid-column:1;grid-row:1;min-height:40px;padding:5px 12px;gap:24px}
  body.fullscreen-game .stat{display:flex;gap:7px;align-items:center}
  body.fullscreen-game .stat span{margin:0;font-size:9px}
  body.fullscreen-game .stat strong{font-size:16px}
  body.fullscreen-game .stage{grid-column:1;grid-row:2}
  body.fullscreen-game .message{grid-column:1;grid-row:3;max-height:25px;-webkit-line-clamp:1;padding:4px 10px;font-size:10px}
  body.fullscreen-game .toolbar{grid-column:2;grid-row:1 / 4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;align-items:stretch;gap:6px;padding:8px;border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
  body.fullscreen-game .toolbar .action-button{width:100%;min-width:0;min-height:44px;font-size:10px;padding:7px 4px;white-space:normal}
  body.fullscreen-game .toolbar .jump-button,body.fullscreen-game .toolbar #defend{min-width:0;grid-column:span 2}
  body.fullscreen-game .toolbar #move-left,body.fullscreen-game .toolbar #move-right{width:auto}
  body.fullscreen-game .toolbar #pause,body.fullscreen-game .toolbar #restart,body.fullscreen-game .toolbar #levels{grid-column:auto}
  body.fullscreen-game .game-overlay{padding:12px}
  body.fullscreen-game .modal{max-width:580px;padding:16px 22px}
  body.fullscreen-game .modal h2{font-size:22px}
  body.fullscreen-game .modal-body{font-size:12px;line-height:1.6}
  body.fullscreen-game .modal-actions{flex-direction:row;margin-top:12px}
}