/* The playable worlds use the same restrained pixel palette as the arcade. */
#gameScreen{--scene:0%;--play-accent:#ffa28d;background:#11151e;overflow-y:auto;overflow-x:hidden;padding:16px clamp(10px,3vw,36px) max(12px,env(safe-area-inset-bottom));gap:10px}
#gameScreen.proverb{--scene:50%;--play-accent:#9ee3c7}
#gameScreen.idiom{--scene:100%;--play-accent:#9ecaff}
#gameScreen.active{display:flex;flex-direction:column}
#gameBackdrop{display:none}
#gameScreen .hud{flex:none;width:min(1120px,100%);margin:0 auto;padding:0;grid-template-columns:auto minmax(80px,1fr) auto;gap:20px}
#gameScreen .hud-button{background:#202835;border:1px solid #46546a;border-radius:4px;min-height:44px;font-size:14px;color:#edf1f6}
#gameScreen .hud-center{max-width:380px;width:100%;justify-self:center;font-family:ui-monospace,monospace;font-size:16px;color:#c4d0df}
#gameScreen .timer-track{height:6px;border-radius:0;background:#334052;margin-top:8px}
#gameScreen .timer-bar{background:var(--play-accent);transition:none}
#gameScreen .timer-bar.danger{background:#ff806f}
#gameScreen .score-box{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 10px;border-radius:0;background:none;padding:0;backdrop-filter:none}
#gameScreen .score-box small{color:#a8b6c9;font-size:13px}
#gameScreen .score-box strong{font-family:ui-monospace,monospace;font-size:30px;line-height:1;color:var(--play-accent)}
#comboLabel{grid-column:1/-1;text-align:right;color:#b9ef80;font-size:12px;min-height:16px;margin-top:4px}
#gameScreen .question-card{flex:none;background:#1a2230;border:1px solid #39485d;border-left:4px solid var(--play-accent);border-radius:4px;box-shadow:none;backdrop-filter:none;width:min(1120px,100%);margin:0 auto;padding:12px 16px}
#gameScreen .game-label{color:var(--play-accent);font-size:13px;letter-spacing:0}
#gameScreen .question-text{font-size:clamp(22px,3vw,40px);line-height:1.4;letter-spacing:-.035em}
#gameScreen .playfield{flex:1 0 320px;min-height:320px;height:auto;width:min(1120px,100%);margin:0 auto;border:2px solid #4c5c72;border-radius:3px;box-shadow:0 4px 0 #070c14;background:#102439;isolation:isolate}
.pixel-world{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#111824}
.pixel-world::before{content:"";position:absolute;inset:0;background:url('assets/pixel-worlds.webp') var(--scene) center / 300% 100% no-repeat;image-rendering:pixelated}
#gameScreen.idiom .pixel-world{background:#d1e9f4}
#gameScreen.idiom .pixel-world::before{top:-45%;bottom:45%}
#gameScreen .targets{z-index:4}
.stage-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:16;width:max-content;max-width:calc(100% - 24px);text-align:center;padding:6px 12px;color:#fff2bd;background:#111824e8;border:1px solid #69794b;font-size:14px;line-height:1.4;pointer-events:none}
#gameScreen .target{padding:12px 8px;border:4px solid #ffbca1;border-radius:1px;background:#f7e4bd;box-shadow:5px 5px 0 #522e30;color:#2b2732;text-shadow:none;font-size:clamp(21px,3vw,34px);line-height:1.2;min-width:0;min-height:0;word-break:keep-all;font-weight:900;transition:filter .1s}
#gameScreen.spelling .target{width:30%;max-width:265px;min-height:88px;top:34%}
#gameScreen.proverb .target{border-color:#83cfae;background:#edf0d1;box-shadow:5px 5px 0 #214e46;max-width:220px;border-radius:1px;animation:targetAppear .3s steps(4)}
#gameScreen .target::before{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:2px 9px;color:#f7f0d9;background:#232d3e;border:1px solid #7d8b9d;font-size:12px;font-family:ui-monospace,monospace}
#gameScreen .target.hit{animation:targetDown .32s steps(5) forwards;transform-origin:50% 100%}
#gameScreen .target.hit::after{content:"+";position:absolute;color:#fff;font:900 48px monospace;inset:0;display:grid;place-items:center;text-shadow:3px 3px #254647}
#gameScreen .crosshair{width:38px;height:38px;border:2px solid #fff;border-radius:0;filter:drop-shadow(2px 2px #111824);z-index:9}
#gameScreen .crosshair::before{left:16px;top:-9px;height:52px;width:2px}
#gameScreen .crosshair::after{top:16px;left:-9px;width:52px;height:2px}
#gameScreen .crosshair span{inset:14px;border:0;background:#ff745f;border-radius:0}
.pixel-equipment{position:absolute;left:50%;width:116px;height:116px;background-image:url('assets/pixel-equipment.webp');background-size:200% 100%;image-rendering:pixelated;pointer-events:none;z-index:7;filter:none}
#gameScreen.proverb #bow{width:116px;height:116px;line-height:1;font-size:0;background-position:100% center;filter:none}
#blaster{background-position:0 center;transform-origin:center}
#shotBeam{position:absolute;height:3px;background:#ffe7a3;transform-origin:left center;z-index:6;pointer-events:none;box-shadow:0 3px #ffaf55}
#shootControls,#gameScreen #archeryControls{position:absolute;bottom:12px;left:12px;right:12px;z-index:17;display:flex;align-items:center;gap:10px;padding:10px;background:#172233;border:2px solid #748295;border-radius:2px;touch-action:auto}
#shootControls label{display:flex;align-items:center;flex:1;min-width:0;gap:10px;color:#c9d2e0;font-size:14px}
#shootAim{flex:1;min-width:30px;height:38px;accent-color:#ffa28d}
#shootControls button,#gameScreen #bowFire{min-width:44px;min-height:44px;padding:8px 15px;background:#38475b;color:white;border:1px solid #8190a4;border-radius:2px;font-weight:850;cursor:pointer}
#shootControls button{touch-action:none}
#shootControls #shootFire{background:#ffac8c;color:#2c2630;border-color:#ffcfb3;min-width:78px}
#gameScreen #bowFire{background:#b9ef80;color:#20352a;border-color:#def3c4}
#gameScreen #bowAngle{accent-color:#b9ef80}
#gameScreen .angle-control{font-size:14px;gap:8px}
#gameScreen #angleValue{color:#d1f2a6}
#gameScreen .controls-hint{position:static;flex:none;transform:none;margin:0 auto;padding:0;width:min(1120px,100%);background:none;backdrop-filter:none;border-radius:0;color:#9cacc1;font-size:13px;white-space:normal;line-height:1.5;text-align:center}
#gameScreen .feedback{top:53%;border-radius:2px;background:#142034f5;box-shadow:6px 6px 0 #070e1a99;font-size:clamp(18px,2.3vw,28px);padding:14px 18px;pointer-events:none;width:min(88%,650px);min-width:0}
#gameScreen .feedback small{font-size:clamp(15px,1.7vw,20px);line-height:1.65;display:block;margin-top:6px}
#gameScreen.idiom .feedback{top:12%;transform:translate(-50%,0)}
#gameScreen.idiom .road{z-index:1}
#roadCanvas{image-rendering:pixelated}
#gameScreen.idiom .runner{width:clamp(104px,13vw,148px);height:auto;aspect-ratio:543/724;bottom:0;filter:none}
.run-sprite{background-image:url('assets/pixel-penguin.webp');image-rendering:pixelated;background-size:400% 100%}
#gameScreen .boost-badge{background:#ffe19a;box-shadow:3px 3px 0 #5b3827;border:2px solid #fff3c4;border-radius:0;top:0;transform:translate(-50%,-50%);font-family:ui-monospace,monospace;font-size:13px;color:#302b24}
#gameScreen .run-item{display:grid;place-items:center;padding:0;background:transparent url('assets/pixel-fish.webp') center / 100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#122f48;font-size:clamp(18px,2vw,27px);line-height:1.2;width:clamp(148px,25%,250px);aspect-ratio:2.4;text-shadow:none;word-break:keep-all;image-rendering:pixelated}
#gameScreen .run-item span{display:block;width:64%;margin-left:11%;text-align:center;white-space:nowrap;font-weight:900;transform:translateY(20%)}
#gameScreen .run-item::before{content:none}
#gameScreen .run-item.hit-obstacle{background-color:transparent;color:#943f3d;filter:sepia(.3)}
#gameScreen.idiom.boosting .playfield{box-shadow:0 0 0 2px #9be9f3,inset 0 0 38px #9be9f344}
#gameScreen.idiom.boosting .run-sprite{filter:drop-shadow(0 5px 0 #c8fbff66)}
#gameScreen .run-obstacle{position:absolute;width:clamp(64px,16%,132px);background:transparent center / 100% 100% no-repeat;pointer-events:none;image-rendering:pixelated;transform-origin:50% 100%;will-change:transform,top,left}
#gameScreen .ice-crack{aspect-ratio:448/213;background-image:url('assets/pixel-ice-crack.webp')}
#gameScreen .ice-rock{aspect-ratio:320/332;background-image:url('assets/pixel-ice-rock.webp')}
#gameScreen .obstacle-passed{opacity:0;transition:opacity .2s}
#gameScreen .obstacle-contact{animation:obstacleContact .22s forwards}
.dizzy-stars{position:absolute;left:50%;top:5%;width:90px;height:28px;transform:translate(-50%,-50%);pointer-events:none;color:#ffe58f;filter:drop-shadow(2px 2px #695237);font-size:22px;line-height:1}
.dizzy-stars span{position:absolute;left:32px;top:4px;animation:dizzyOrbit .85s linear infinite}
.dizzy-stars span:nth-child(2){animation-delay:-.283s}
.dizzy-stars span:nth-child(3){animation-delay:-.566s}
#gameScreen.idiom.stumbling .runner{filter:none;animation:dizzyWobble .36s ease-in-out infinite alternate}
@keyframes dizzyOrbit{0%{transform:translate(-31px,0) scale(.8)}25%{transform:translate(0,-7px) scale(.65)}50%{transform:translate(31px,0) scale(.8)}75%{transform:translate(0,7px) scale(1)}100%{transform:translate(-31px,0) scale(.8)}}
@keyframes dizzyWobble{from{rotate:-4deg}to{rotate:4deg}}
@keyframes obstacleContact{to{opacity:0;translate:0 18px}}
@keyframes targetAppear{from{opacity:.2;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes targetDown{0%{filter:brightness(1.4);transform:translate(-50%,-50%) rotateX(0)}100%{opacity:0;transform:translate(-50%,-50%) rotateX(85deg)}}
@media(max-width:640px){
 #gameScreen{padding:10px 8px max(8px,env(safe-area-inset-bottom));gap:8px}
 #gameScreen .hud{gap:10px}#gameScreen .score-box strong{font-size:25px}#gameScreen .hud-button{padding:8px;font-size:13px}
 #gameScreen .question-card{padding:10px 12px}#gameScreen .question-text{font-size:23px}
 #gameScreen .playfield{flex-basis:350px;min-height:350px}
 #gameScreen.spelling .target{width:36%;font-size:23px;min-height:85px}
 #gameScreen.proverb .target{font-size:22px;border-width:3px}
 .stage-status{font-size:12px;padding:5px 8px}
 #shootControls,#gameScreen #archeryControls{left:6px;right:6px;bottom:8px;padding:6px;gap:6px}
 #shootControls label{flex-direction:column;gap:0;font-size:11px}#shootAim{width:100%;height:30px}
 #shootControls button,#gameScreen #bowFire{padding:8px 10px}#shootControls #shootFire{min-width:64px}
 #gameScreen.proverb #bow,.pixel-equipment{width:90px;height:90px}
 #gameScreen .feedback{top:51%;padding:10px 12px}#gameScreen .controls-hint{font-size:12px}
}
@media(max-height:550px) and (min-width:641px){#gameScreen .playfield{flex-basis:320px;min-height:320px}#gameScreen .question-text{font-size:23px}#gameScreen .question-card{padding:8px}}
@media(prefers-reduced-motion:reduce){#gameScreen .target,#gameScreen .target.hit{animation:none}.run-sprite{animation:none!important}#gameScreen.idiom.stumbling .runner,.dizzy-stars span,#gameScreen .obstacle-contact{animation:none}.dizzy-stars span:nth-child(1){left:0}.dizzy-stars span:nth-child(2){top:-5px}.dizzy-stars span:nth-child(3){left:64px}}