/* Panda Arcade 2.1 — gameplay and iPhone fit polish. Pure presentation: game rules and saves are untouched. */
:root { --p21-safe-top: env(safe-area-inset-top,0px); --p21-safe-bottom:env(safe-area-inset-bottom,0px); --p21-bg:#0b1618; }
html,body {max-width:100%;overflow-x:clip;-webkit-tap-highlight-color:transparent}
button,a,[role="button"] {touch-action:manipulation}
button:focus-visible,a:focus-visible {outline:3px solid #f6cb64!important;outline-offset:2px}
#backBtn {z-index:120!important;pointer-events:auto!important;min-height:44px!important;line-height:1.2;position:relative!important;white-space:nowrap!important}
#screenGame .arcade-premium-hero .arcade-hero-metrics{flex-wrap:wrap}
#screenGame .arcade-featured .arcade-card-title strong{line-height:1.18}
#screenGame .arcade-game-card{contain:layout style;overflow:hidden;min-width:0}
#screenGame .arcade-card-copy {overflow-wrap:anywhere;min-width:0}
#screenGame .arcade-card-copy .arcade-card-title{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
#screenGame .arcade-record{white-space:normal!important;overflow-wrap:anywhere}
#screenGame .arcade-game-card:focus-visible{outline:3px solid #f6cb64!important;outline-offset:-3px}
#screenHome>.p126-care-rail {padding:12px 12px 14px!important;border-radius:22px!important;margin-block:12px!important;min-height:0!important}
#screenHome>.p126-care-rail .p124-care-actions{padding-bottom:6px!important;scrollbar-width:none}
#screenHome>.p126-care-rail .p124-care-actions>*{flex-basis:clamp(75px,22vw,92px)!important;min-width:0!important;min-height:86px!important;gap:4px!important}
#screenHome>.p126-care-rail .p124-care-actions img{height:46px!important;max-height:46px!important;width:auto!important;margin-inline:auto}
#screenHome>.p126-care-rail h3,#screenHome>.p126-care-rail strong {line-height:1.18;overflow-wrap:anywhere}
#screenHome .pet-card{min-width:0;overflow:hidden}
#screenHome .panda-stage{max-width:100%;overflow:hidden}
#screenHome .panda-wrap{transform-origin:center 90%;will-change:transform}
#screenHome .panda-wrap.p21-responding{animation:p21-react .6s ease-out 1}
body.arcade-game-live {overscroll-behavior:contain!important}
/* One full-screen game shell for the engines which use ArcadeNow. */
body.arcade-game-live #screenGame>.arcade-engine-shell.game-fullscreen {box-sizing:border-box!important;min-width:0!important;width:100vw!important;max-width:100vw!important;padding-inline:clamp(7px,2.4vw,12px)!important;overflow:hidden!important}
body.arcade-game-live .arcade-now.game-fullscreen .arcade-now-top{min-width:0;gap:6px!important;align-items:center!important;padding-inline:0!important}
body.arcade-game-live .arcade-now.game-fullscreen .arcade-now-top h2{font-size:clamp(16px,5vw,23px)!important;max-width:calc(100vw - 86px);text-overflow:ellipsis}
body.arcade-game-live .arcade-now.game-fullscreen .arcade-game-close{position:relative!important;flex:0 0 43px!important;width:43px!important;min-height:43px!important;right:auto!important;left:auto!important;top:auto!important;transform:none!important;touch-action:manipulation!important}
body.arcade-game-live .arcade-now.game-fullscreen .game-area{min-width:0!important;max-width:100%!important;contain:layout style;overflow:hidden!important;touch-action:none}
body.arcade-game-live .game-area :is(button,[role="button"]){touch-action:manipulation}
/* Shared stage visual motion: never consumes pointer events or overlays the HUD. */
body.arcade-game-live .game-area::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.28;background:radial-gradient(3px 3px at 16% 21%,#ffeb9d 75%,transparent),radial-gradient(3px 3px at 74% 36%,#b2fee0 75%,transparent),radial-gradient(2px 2px at 53% 82%,#fff 75%,transparent);animation:p21-glimmer 4.4s ease-in-out infinite alternate}
/* Four custom game canvases: HUD, active stage, controls all visible on compact phones. */
body.arcade-game-live .arcade120 {height:100%!important;min-height:0;min-width:0;display:grid!important;grid-template-rows:minmax(50px,auto) minmax(0,1fr) minmax(66px,auto)!important;overflow:hidden;isolation:isolate}
body.arcade-game-live .a120-hud {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(3px,1vw,7px)!important;padding:5px!important;min-width:0!important}
body.arcade-game-live .a120-hud>div{min-width:0!important;padding:5px 3px!important;min-height:45px!important}
body.arcade-game-live .a120-hud strong{font-size:clamp(12px,4.3vw,20px)!important;line-height:1.08!important;overflow-wrap:anywhere!important}
body.arcade-game-live .a120-hud small{font-size:clamp(8px,2.5vw,10px)!important}
body.arcade-game-live .a120-world {position:relative!important;min-height:0!important;overflow:hidden}
body.arcade-game-live .a120-world canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;object-fit:contain;touch-action:none}
body.arcade-game-live .a120-controls {display:grid!important;grid-template-columns:clamp(34px,11vw,49px) minmax(0,1fr) auto;gap:clamp(5px,1.5vw,11px)!important;padding:7px 8px max(8px,var(--p21-safe-bottom))!important;min-height:62px!important;align-items:center}
body.arcade-game-live .a120-controls [data-panda]{width:clamp(34px,11vw,49px)!important;height:clamp(42px,13vw,54px)!important;object-fit:contain;filter:drop-shadow(0 4px 4px #0003)}
body.arcade-game-live .a120-controls [data-tip]{min-width:0!important;overflow-wrap:anywhere;font-size:clamp(10px,3vw,13px)!important;line-height:1.22!important}
body.arcade-game-live .a120-controls [data-main]{min-width:0!important;width:auto!important;max-width:min(34vw,125px)!important;min-height:44px!important;padding:8px 10px!important;font-size:clamp(12px,3.2vw,16px)!important;line-height:1.18!important;text-wrap:balance;word-break:normal}
body.arcade-game-live .a120-finish {z-index:50!important;inset:0!important;padding:12px!important;overflow-y:auto;align-items:safe center!important;justify-content:center!important}
body.arcade-game-live .a120-finish-card {width:min(100%,360px)!important;max-height:calc(100dvh - 90px)!important;min-width:0!important;overflow-y:auto!important;color:#183b2c!important;box-sizing:border-box!important}
body.arcade-game-live .a120-finish-card h2,body.arcade-game-live .a120-finish-card p,body.arcade-game-live .a120-finish-card strong{overflow-wrap:anywhere;line-height:1.2!important}
body.arcade-game-live .a120-finish-card button{min-height:44px!important;white-space:normal!important;overflow-wrap:anywhere}
/* Legacy full-screen games: active close buttons, overlays and HUD are not clipped. */
body.maze-fullscreen .maze-wrap,body.tetris-fullscreen .tetris-wrap {box-sizing:border-box;max-width:100vw!important;min-width:0!important;overflow:hidden}
body.maze-fullscreen .maze-toprow,body.tetris-fullscreen .tetris-side{max-width:100%!important;min-width:0!important}
body.maze-fullscreen .maze-exit,body.tetris-fullscreen .tetris-exit {margin-inline-end:3px!important;flex-shrink:0;touch-action:manipulation}
body.maze-fullscreen .maze-hud,body.tetris-fullscreen .tetris-hud{min-width:0!important;max-width:100vw!important}
body.maze-fullscreen .maze-hud>* {min-width:0!important;overflow-wrap:anywhere!important}
body.maze-fullscreen .maze-controls button,body.tetris-fullscreen .tetris-controls button{touch-action:manipulation;user-select:none}
body.tetris-fullscreen .tetris-side{overflow:hidden;flex-wrap:wrap!important;max-height:100px}
body.tetris-fullscreen .tetris-board-zone{min-height:0!important;overflow:hidden!important}
body.tetris-fullscreen .tetris-controls {bottom:max(10px,var(--p21-safe-bottom))!important;max-width:100vw!important;box-sizing:border-box!important}
body.tetris-fullscreen .tetris-controls button{width:auto!important;max-width:calc((100vw - 60px)/6)!important;min-width:0!important;white-space:normal!important}
/* Platformer and overlays: white-on-white failures corrected in every state. */
body.arcade-game-live .bros-card,body.arcade-game-live .bros-card *{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
body.arcade-game-live .bros-card :is(h1,h2,h3,p,small,strong,span){color:#173c2d!important;text-shadow:none!important}
body.arcade-game-live .bros-card button {color:#173c2d!important;font-size:clamp(14px,4.3vw,21px)!important;line-height:1.2!important;max-width:100%;min-height:48px;white-space:normal!important}
body.arcade-game-live .bros-card .bros-play {color:#fff!important}
body.arcade-game-live .bros-panel {padding:12px!important;overflow-y:auto!important;align-items:safe center!important}
body.arcade-game-live .bros-card{width:min(100%,360px)!important;max-height:min(72dvh,540px)!important;overflow-y:auto!important}
body.arcade-game-live .bros-controls {bottom:max(12px,var(--p21-safe-bottom))!important;gap:8px!important;max-width:100%!important}
body.arcade-game-live .bros-ctrl{touch-action:manipulation}
#modal .modal-card,#importModal .modal-card,.p120-dialog{width:min(calc(100vw - 28px),430px)!important;max-height:calc(100dvh - 42px)!important;overflow-y:auto!important;overflow-wrap:anywhere!important}
#toast.toast{left:12px!important;right:12px!important;max-width:calc(100vw - 24px)!important;bottom:calc(94px + var(--p21-safe-bottom))!important;overflow-wrap:anywhere!important;pointer-events:none}
body.arcade-game-live .p21-score-burst{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:24;pointer-events:none;font-size:clamp(19px,5vw,25px);font-weight:950;color:#ffec9a;text-shadow:0 3px 18px #0009;animation:p21-score-out .7s ease-out forwards}
@keyframes p21-score-out{0%{opacity:0;translate:0 13px;scale:.76}40%{opacity:1;translate:0 0;scale:1.08}100%{opacity:0;translate:0 -25px;scale:1}}
@keyframes p21-glimmer{to{opacity:.68;filter:brightness(1.4);transform:translateY(-8px)}}
@keyframes p21-react{0%{transform:scale(1)}45%{transform:translateY(-9px) rotate(-3deg) scale(1.035)}100%{transform:scale(1)}}
@media(max-width:360px){#screenHome>.p126-care-rail{padding:9px!important}body.arcade-game-live .a120-controls{grid-template-columns:34px minmax(0,1fr) auto!important;padding-inline:5px!important}body.arcade-game-live .a120-controls [data-main]{max-width:32vw!important;padding:5px 7px!important}}
@media(max-height:725px){body.arcade-game-live .a120-hud>div{min-height:39px!important}body.arcade-game-live .a120-controls{min-height:54px!important;padding-block:4px!important}body.arcade-game-live .bros-card{max-height:70dvh!important}body.maze-fullscreen .maze-controls{transform:scale(.9);transform-origin:center bottom}}
@media(prefers-reduced-motion:reduce){body.arcade-game-live .game-area::before,.p21-score-burst,#screenHome .panda-wrap.p21-responding{animation:none!important}}
/* Tetris uses five legacy blocks competing for the same 320px top row. Reserve grid tracks. */
body.tetris-fullscreen #gameArea .tetris-side{top:calc(var(--p21-safe-top) + 8px)!important;left:6px!important;right:6px!important;display:grid!important;grid-template-columns:38px minmax(76px,1fr) minmax(44px,54px) minmax(48px,58px) minmax(62px,78px)!important;grid-template-rows:88px!important;align-items:start!important;align-content:start!important;justify-content:stretch!important;gap:clamp(2px,1vw,6px)!important;height:94px!important;padding:0!important;max-height:94px!important;overflow:visible!important}
body.tetris-fullscreen #gameArea .tetris-side>*{min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
body.tetris-fullscreen #gameArea .tetris-side>.tetris-panel{height:88px!important;padding:5px 3px!important;border-radius:12px!important;overflow:hidden!important}
body.tetris-fullscreen #gameArea .tetris-side>.tetris-panel:first-child{grid-column:1}
body.tetris-fullscreen #gameArea .tetris-side>.tetris-stats{grid-column:2;font-size:clamp(9px,2.6vw,11px)!important;line-height:1.55!important;white-space:normal!important;letter-spacing:-.2px}
body.tetris-fullscreen #gameArea .tetris-side>#tetrisPause{grid-column:3}
body.tetris-fullscreen #gameArea .tetris-side>#tetrisRestart{grid-column:4}
body.tetris-fullscreen #gameArea .tetris-side>.t120-hold-panel{grid-column:5}
body.tetris-fullscreen #gameArea .tetris-side .tetris-panel-title{font-size:clamp(7px,2vw,9px)!important;line-height:1.2!important;letter-spacing:0!important;overflow-wrap:anywhere}
body.tetris-fullscreen #gameArea .tetris-side .tetris-mini{width:100%!important;height:auto!important;max-height:49px!important;object-fit:contain}
body.tetris-fullscreen #gameArea .tetris-side .tetris-btn{font-size:clamp(9px,2.8vw,12px)!important;line-height:1.1!important;padding:8px 1px!important;min-height:39px!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.tetris-fullscreen #gameArea .tetris-board-zone{padding-top:58px!important}
@media(min-width:410px){body.tetris-fullscreen #gameArea .tetris-side{grid-template-columns:55px minmax(92px,1fr) 60px 66px 82px!important}}
@media(max-height:700px){body.tetris-fullscreen #gameArea .tetris-side{grid-template-rows:72px!important;height:78px!important;max-height:78px!important}body.tetris-fullscreen #gameArea .tetris-side>.tetris-panel{height:72px!important}body.tetris-fullscreen #gameArea .tetris-side .tetris-mini{max-height:34px!important}}
/* Tetris action bar uses four real groups, not six flex items fighting for available width. */
body.tetris-fullscreen #gameArea .tetris-side{grid-template-columns:34px minmax(70px,1fr) 46px 55px 65px!important;gap:4px!important}
body.tetris-fullscreen #gameArea .tetris-side>.tetris-panel:first-child{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important}
body.tetris-fullscreen #gameArea .tetris-controls{display:grid!important;grid-template-columns:max-content minmax(43px,56px) minmax(43px,56px) max-content!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;padding-inline:4px!important}
body.tetris-fullscreen #gameArea .tetris-control-group{display:flex!important;flex:0 0 auto!important;gap:4px!important;min-width:0!important}
body.tetris-fullscreen #gameArea .tetris-controls button{width:clamp(33px,10.6vw,47px)!important;max-width:47px!important;min-width:33px!important;flex:0 0 auto!important;height:50px!important;font-size:clamp(14px,4vw,18px)!important;border-radius:13px!important}
body.tetris-fullscreen #gameArea .tetris-controls .rotate,body.tetris-fullscreen #gameArea .tetris-controls .t120-hold-btn{width:clamp(43px,13vw,56px)!important;max-width:56px!important;font-size:clamp(11px,3.4vw,16px)!important}
@media(max-width:350px){body.tetris-fullscreen #gameArea .tetris-controls button{min-width:31px!important;width:31px!important;height:44px!important}body.tetris-fullscreen #gameArea .tetris-controls .rotate,body.tetris-fullscreen #gameArea .tetris-controls .t120-hold-btn{width:44px!important}}
@media(min-width:410px){body.tetris-fullscreen #gameArea .tetris-side{grid-template-columns:52px minmax(95px,1fr) 59px 65px 77px!important}}