
/* One layout system for every REM Arcade screen. Art remains game-specific. */
:root{--arcade-content:760px;--arcade-gap:12px;--tap:56px}html,body{max-width:100%}.theme-toggle{top:10px;right:10px;width:44px;height:44px;z-index:50}.home,.play,.game-shell,.runner-shell{width:min(100%,var(--arcade-content));margin-inline:auto}.play,.runner-shell{padding-inline:12px}.play>header,.runner-shell>header,.game-card>header{padding-right:52px}.gamebox,.records,.mobile-controls,.runner-card,.controls{width:100%;max-width:none;margin-inline:auto}.gamebox #stage{width:100%;overflow:hidden}.gamebox #stage>canvas{display:block;max-width:100%;margin:auto}.hud button,.mobile-controls button,.controls button,.runner-hud button,.game-card button{min-height:44px;touch-action:manipulation}.mobile-controls,.controls{gap:8px}.hint{max-width:none}.records{max-width:none}
@media(max-width:600px){
 .home,.play{padding:16px 10px 38px}.runner-shell{padding:16px 10px 38px}.game-shell{display:block;min-height:0;padding:12px 8px 32px}
 .home>.brand-logo{width:92px}.home>h1{font-size:46px}.home .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.home .card{min-width:0;min-height:168px;padding:12px}.home .card h2{font-size:18px}.home .card span{font-size:8px;line-height:1.35}
 .back{margin-bottom:14px}.play>header{margin-bottom:12px}.play .brand-logo-small{width:78px;margin-bottom:7px}.play h1{font-size:42px;line-height:.9;margin:5px 0 8px}.play .intro{font-size:13px;line-height:1.4}
 .gamebox{border-width:3px;border-radius:18px;box-shadow:0 6px 0 #07140b}.hud{display:grid;grid-template-columns:auto 1fr auto;min-height:58px;padding:8px 9px;gap:6px}.hud strong{font-size:18px;min-width:48px}.hud span{font-size:9px;line-height:1.3}.hud button{padding:7px 9px;font-size:10px}
 .gamebox #stage{min-height:340px;padding:9px}.gamebox #stage>canvas{width:100%;height:auto;max-height:430px;object-fit:contain}.mobile-controls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:sticky;bottom:6px;padding:7px}.mobile-controls button{width:100%;max-width:none;height:var(--tap);min-width:0}.hint{margin-top:11px;font-size:9px}.records{margin-top:16px;padding:12px}
 /* Tetris: one column, no clipped desktop sidebar. */
 .game-card{width:100%;padding:12px;border-radius:18px}.game-card>header{padding-right:48px;padding-bottom:8px}.game-card .brand-logo{width:82px;margin:0 0 6px}.game-card h1{font-size:44px}.game-card .tagline{font-size:12px;margin:8px 0 12px}.game-layout{display:flex;flex-direction:column;align-items:stretch;gap:12px}.board-wrap{order:1;width:min(300px,100%);margin-inline:auto}.board-wrap #board{width:100%;height:auto;max-height:none}.panel{order:2;width:100%;min-width:0;display:grid;grid-template-columns:1fr auto;gap:9px;padding:9px}.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:0}.stat{display:block;padding:7px;text-align:center;border:1px solid #b9d9c1;border-radius:9px}.stat strong{display:block;margin-top:2px}.next-piece{display:flex;align-items:center;gap:8px;padding:6px}.next-piece #next{width:72px;height:72px}.secondary{align-self:center;min-width:104px}.instructions{display:none}.game-card>.mobile-controls{display:grid;grid-template-columns:repeat(5,1fr);position:sticky;bottom:6px;margin-top:12px;padding:7px}.game-card>.mobile-controls button{min-width:0;height:var(--tap);padding:6px;font-size:20px}.game-card footer{margin-top:14px}.game-card .records{width:100%}
 /* REM Runner: preserve canvas ratio and use a stable two-row controller. */
 .runner-shell>header{padding-right:48px}.runner-shell .brand-logo{width:86px;margin:16px 0 8px}.runner-shell h1{font-size:42px;margin:6px 0 14px}.runner-hud{display:grid;grid-template-columns:1fr auto auto;gap:6px;padding:8px;font-size:9px}.runner-hud strong{grid-column:1/3;order:3;width:auto;margin:0}.runner-hud span#score{justify-self:end}.runner-hud button{padding:7px;font-size:10px}.runner-card canvas{width:100%;height:auto!important;aspect-ratio:16/9;object-fit:contain}.message{min-height:42px;padding:8px 10px}.controls{display:grid!important;grid-template-columns:repeat(3,1fr);position:sticky;bottom:6px;padding:7px;margin-top:10px}.controls button{width:100%;min-width:0;height:var(--tap);padding:5px;font-size:12px}.runner-shell .hint{font-size:9px;line-height:1.45}.reward-panel{width:100%}
}
@media(max-width:350px){.home .grid{grid-template-columns:1fr}.home .card{min-height:145px}.connect-grid{transform:scale(.92)}.game-card>.mobile-controls button{font-size:17px}}
