.app-return { display:flex; align-items:center; width:fit-content; min-height:44px; margin:0 0 8px; padding:0 14px; border:1px solid #a58c43; border-radius:12px; color:#ffe9a4; background:#12152b; text-decoration:none; font:700 14px Arial,sans-serif; }
.app-return:focus-visible { outline:3px solid #fff; outline-offset:2px; }
body { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }

/* Portrait boards only. Keep the complete playfield within the available viewport. */
.format-picker, #zoom { display:none !important; }
.app { max-width:600px; padding:0 6px; }
.topbar { height:44px !important; gap:4px; }
.topbar .app-return { margin:0; padding:0 8px; font-size:12px; white-space:nowrap; }
.topbar .brand { font-size:12px; gap:4px; letter-spacing:0; }
.topbar .brand-mark { width:24px; height:24px; }
.topbar .brand b { font-size:8px; letter-spacing:1px; }
.topbar nav { gap:2px; }
.topbar nav button { min-height:44px; padding:4px 6px; font-size:11px; }
body.playing { height:100dvh; min-height:0; overflow:hidden; }
.playing .app { height:100%; display:flex; flex-direction:column; }
.playing .topbar { flex:0 0 44px; position:static; }
.playing #play-screen { flex:1; min-height:0; display:flex; flex-direction:column; }
.playing .play-heading { flex:0 0 36px; padding:0 2px; gap:4px; }
.playing .play-heading h1 { margin:0; font-size:14px; letter-spacing:0; }
.playing .play-heading .eyebrow, .playing .personal-best, .playing .page-footer, .playing .play-tip, .playing .keyboard-note, .playing .table-caption { display:none; }
.playing .board-actions { gap:4px; }
.playing .board-actions button { min-height:32px; padding:3px 8px; font-size:11px; }
.playing .game-shell { flex:1; min-height:0; display:flex; flex-direction:column; border-radius:8px; }
.playing .hud { flex:0 0 40px; padding:3px 8px; gap:6px; grid-template-columns:repeat(4,1fr); }
.playing .hud span { font-size:8px; margin:0; letter-spacing:.5px; }
.playing .hud strong { font-size:18px; }
.playing .combo-track { height:2px; margin-top:1px; }
.playing .board-wrap { flex:1; min-height:0; display:flex; }
.playing .board-scroll { flex:1; min-height:0 !important; max-height:none !important; overflow:hidden; display:flex; }
.playing #game, .playing #game[data-format="portrait"] { width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; aspect-ratio:auto; touch-action:none; }
.playing #game canvas { touch-action:none; }
.playing .powerbar { flex:0 0 46px; padding:2px 4px; gap:4px; }
.playing .powerbar button { flex:1; min-width:0; min-height:42px; padding:4px; gap:4px; font-size:12px; }
.playing .powerbar button>span { font-size:15px; }
.playing .status-line { flex:0 0 22px; min-height:0; padding:2px 6px; font-size:10px; overflow:hidden; }
.playing #message { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playing .no-moves { position:absolute; bottom:70px; left:10px; right:10px; z-index:3; padding:6px; }
.playing .debug-panel { position:fixed; inset:auto 4px 0; z-index:10; max-height:35vh; overflow:auto; }
@media(max-width:350px) { .topbar .brand { display:none; } .topbar nav { margin-left:auto; } }