/* PANDA ARCADE 3.0 — tactile/mobile UX after 2.2 */
:root{--p30-vh:100dvh}
body.arcade-game-live #gameArea{isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none}
body.arcade-game-live #gameArea button{ -webkit-tap-highlight-color:transparent }
body.arcade-game-live #gameArea button:focus-visible{outline:3px solid #ffe49c!important;outline-offset:2px}
/* Catch HUD fixed in four columns (previously wrapped over the time bar on 320px). */
#gameArea.c22-playing .c22-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(3px,1.1vw,7px);left:clamp(6px,2vw,14px);right:clamp(6px,2vw,14px);top:clamp(7px,1.5vw,12px);padding:0;align-items:stretch}
#gameArea.c22-playing .c22-hud>span{min-width:0;padding:9px 2px;text-align:center;border-radius:13px;font-weight:850;font-size:clamp(9px,2.7vw,13px);white-space:nowrap;line-height:1.1}
#gameArea.c22-playing .c22-hud>span b{font-size:clamp(11px,3vw,16px)}
#gameArea.c22-playing .c22-progress{top:60px;height:5px;left:10px;right:10px;z-index:10}
#gameArea.c22-playing .c22-help{bottom:clamp(162px,24%,226px);max-width:calc(100% - 25px);font-size:clamp(10px,2.9vw,13px)}
#gameArea.c22-playing .c22-drop{width:clamp(52px,16vw,68px);height:clamp(62px,19vw,78px)}
#gameArea.c22-playing .c22-actor{bottom:clamp(16px,4.3%,34px);height:clamp(112px,21vh,178px);width:clamp(104px,27vw,161px);object-fit:contain;object-position:center bottom}
#gameArea.c22-playing .c22-actor-shadow{bottom:clamp(10px,3.7%,29px)}
/* Visual space has a subtle actual foreground and is not a dead, flat gradient. */
#gameArea.c22-playing .c22-ground{opacity:.91;z-index:3;height:clamp(42px,8%,65px)}
#gameArea.c22-playing .c22-shrub{z-index:4;bottom:clamp(14px,2.6%,27px);max-width:35%;opacity:.98}
#gameArea.c22-playing .c22-glow{opacity:.63}
#gameArea.c22-playing .c22-world:after{content:'';position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle,#fcffcf 0 1.5px,transparent 2px),radial-gradient(circle,#e5ffff 0 1px,transparent 2px);background-size:131px 173px,209px 281px;background-position:17% 14%,61% 44%;animation:p30-motes 8s ease-in-out infinite alternate}
@keyframes p30-motes{to{background-position:22% 25%,57% 37%;opacity:.66}}
/* Return and restart always reachable, no white labels on white finish cards. */
body.arcade-game-live :is(.a120-finish-card,.bros-card,.maze-card,.tetris-card){max-width:calc(100vw - 30px)!important;box-sizing:border-box;overflow-wrap:anywhere}
body.arcade-game-live :is(.a120-finish-card,.bros-card,.maze-card,.tetris-card) button{min-height:44px!important;max-width:100%!important;white-space:normal!important;line-height:1.15!important}
body.arcade-game-live :is(.a120-finish,.bros-panel,.maze-panel,.tetris-panel){scrollbar-width:thin;overscroll-behavior:contain}
body.arcade-game-live .arcade-game-close{min-width:44px;min-height:44px;touch-action:manipulation}
/* Ensure game canvas never shifts off-screen on narrow devices. */
body.arcade-game-live :is(.maze-stage,.tetris-board-zone,.a120-world,.bros-stage){min-width:0;max-width:100%;overflow:hidden}
body.arcade-game-live .a120-controls [data-panda]{animation:p30-breathe 1.65s ease-in-out infinite alternate;transform-origin:50% 90%}
@keyframes p30-breathe{to{transform:translateY(-3px) rotate(2deg)}}
#screenHome .p124-care-actions>button{min-width:76px;min-height:76px}
#screenHome .p124-care-actions{scroll-snap-type:x proximity}
#screenHome .p124-care-actions>button{scroll-snap-align:start}
#screenGame .arcade-game-card{transition:transform .16s ease,box-shadow .16s ease}
#screenGame .arcade-game-card:active{transform:scale(.986)}
#toast.toast{max-width:calc(100vw - 30px)!important;overflow-wrap:anywhere;pointer-events:none;z-index:9999}
@media(max-width:350px){#gameArea.c22-playing .c22-hud>span{font-size:9px;padding:7px 1px}#gameArea.c22-playing .c22-progress{top:53px}#gameArea.c22-playing .c22-help{bottom:162px}}
@media(max-height:720px){#gameArea.c22-playing .c22-actor{height:clamp(100px,18vh,135px);bottom:12px}#gameArea.c22-playing .c22-help{bottom:148px}}
@media(prefers-reduced-motion:reduce){#gameArea.c22-playing .c22-world:after,body.arcade-game-live .a120-controls [data-panda]{animation:none!important}}

/* FINAL-QA: scene art supplies mountains; polygon placeholders should not show through. */
#gameArea.c22-playing .c22-hill-far,#gameArea.c22-playing .c22-hill-near{opacity:.035!important;animation:none!important}
#gameArea.c22-playing .c22-stage::before{opacity:.7;mask-image:linear-gradient(#000 0%,#000c 39%,transparent 96%)}
#gameArea.c22-playing .c22-actor{transform-origin:50% 90%;contain:layout style}
#gameArea.c22-playing .c22-drop{contain:layout style}
#gameArea.c22-playing .c22-hud>span{overflow:hidden;text-overflow:clip}
/* Game over and intro are usable in narrow and landscape viewports. */
body.arcade-game-live :is(.tetris-card,.bros-card,.a120-finish-card,.maze-card){width:min(100% - 12px,450px)!important;max-width:calc(100vw - 34px)!important;max-height:calc(100dvh - 90px)!important;overflow-y:auto!important;overflow-x:hidden!important;color:#14332d!important}
body.arcade-game-live :is(.tetris-card,.bros-card,.a120-finish-card,.maze-card) :is(h2,h3,p,strong){color:inherit!important;overflow-wrap:anywhere}
body.arcade-game-live :is(.tetris-card,.bros-card,.a120-finish-card,.maze-card) button{min-height:44px!important;white-space:normal!important;overflow-wrap:anywhere}
body.arcade-game-live #gameArea :is(.a120-controls,.tetris-controls,.maze-controls,.bros-controls){max-width:100%;min-width:0;box-sizing:border-box}
body.arcade-game-live #gameArea :is(.tetris-ctrl,.maze-ctrl,.bros-ctrl){touch-action:manipulation;flex-shrink:0}
@media(max-height:680px){body.arcade-game-live :is(.tetris-card,.bros-card,.a120-finish-card,.maze-card){max-height:calc(100dvh - 45px)!important}}
@media(prefers-reduced-motion:reduce){#gameArea.c22-playing .c22-shrub,#gameArea.c22-playing .c22-stage::before{animation:none!important}}