.coco-actor{width:120px;height:145px;animation:none!important;transform:none!important;overflow:visible;position:relative}
.coco-character-viewport{position:absolute;inset:0;overflow:visible;z-index:3;pointer-events:none}
.coco-actor .coco-idle{position:absolute;left:5px;top:0;width:110px;height:108px;object-fit:contain}
.coco-actor .coco-full-video{position:absolute;left:-42px;top:-5px;width:204px;height:115px;max-width:none;object-fit:contain;clip-path:inset(0 0 11% 0);border-radius:0;mix-blend-mode:normal}
.coco-habitat{bottom:35px}.coco-edge{bottom:35px;z-index:4;height:10px}.coco-effects{position:absolute;inset:0;pointer-events:none;z-index:5}
.coco-controls{position:absolute;left:-8px;right:-8px;bottom:0;display:flex;gap:3px;z-index:6}.coco-controls button{font-size:10px;padding:5px;border:1px solid #e8d4b8;border-radius:8px;background:#fff8e9;color:#435d70;cursor:pointer}
.companion{min-height:155px}
.coco-actor .coco-idle-video{position:absolute;left:-42px;top:-5px;width:204px;height:115px;max-width:none;object-fit:contain;clip-path:inset(0 0 11% 0);border-radius:0;mix-blend-mode:normal}.coco-full-video{transition:opacity .12s}.coco-idle-video{transition:opacity .12s}@media(prefers-reduced-motion:reduce){.coco-full-video,.coco-idle-video{transition:none}}
.coco-habitat,.coco-edge,.coco-controls{display:none!important}.coco-actor{height:120px;background:transparent;border:0;box-shadow:none}.companion{min-height:130px}
.coco-actor .coco-idle-video{left:-42px;top:0;width:204px;height:120px;clip-path:none}
.coco-actor .coco-full-video{left:-42px;top:0;width:204px;height:120px;clip-path:none}
.coco-actor .coco-full-video[data-action-id="correct02"]{height:136px;top:-18.7px}

.coco-media-error{position:absolute;inset:auto -40px -25px;text-align:center;font-size:12px;color:#715d50;background:#fff7e9;padding:6px;border-radius:8px}
/* Caption visibility must never shift answers or the Next hit target. */
.companion{position:relative}
.companion>p{align-self:flex-start;padding-top:12px}
.companion>.coco-subtitles{position:absolute;left:138px;right:0;top:66px;width:auto;margin:0;text-align:left;line-height:1.3;pointer-events:none}
@media(max-width:750px){.companion>.coco-subtitles{left:133px;top:64px}}
/* Narrow phones retain the same font sizes and fixed character/card geometry.
   Slightly tighter caption leading leaves room before answers without reflow. */
@media(max-width:360px){.companion>.coco-subtitles{line-height:1.2}.companion>.coco-subtitles .subtitle-zh{margin-top:2px}}

/* Decode sources never become visible, even when a decoder ignores WebM alpha. */
.coco-actor video.coco-source{width:1px!important;height:1px!important;left:0!important;top:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}
.coco-actor canvas.coco-idle-render,.coco-actor canvas.coco-full-render{position:absolute;left:-42px;top:0;width:204px;height:120px;max-width:none;object-fit:contain;pointer-events:none}
.coco-actor canvas.coco-full-render{visibility:hidden}
.coco-actor canvas.coco-full-render[data-action-id="correct02"]{height:136px;top:-18.7px}
.coco-idle-video[style*="visibility: hidden"]~.coco-idle-render{visibility:hidden}
.coco-subtitles .subtitle-ja{display:none}
.coco-full-video[style*="visibility: visible"]~.coco-full-render{visibility:visible}
.coco-full-video[style*="visibility: hidden"]~.coco-full-render{visibility:hidden}

/* Keep the entire widest source frame inside the phone companion's own slot.
   A fixed contain frame avoids per-frame resizing as the ears open and close. */
@media(max-width:750px){
 .coco-actor canvas.coco-idle-render,.coco-actor canvas.coco-full-render,
 .coco-actor canvas.coco-full-render[data-action-id="correct02"]{
  left:-10px;top:0;width:140px;height:120px;object-fit:contain
 }
}
/* Reserve translation space before playback so narrow-phone buttons stay put. */
@media(max-width:420px){
 .companion{min-height:220px}
 .companion>.coco-subtitles{top:100px}
}
/* Phone portrait interface: whole media frames, readable choices, compact controls. */
.map-entry-status{min-height:24px;margin:8px 0;color:#31576a;font-size:14px}
.destination-plaque[aria-busy="true"]{outline:3px solid #73a5df;outline-offset:2px}
@media(max-width:750px){
 #app>header,#learning>header{display:none}
 .play-screen{padding:6px 8px calc(10px + env(safe-area-inset-bottom,0px));max-width:100%;min-height:100svh}
 .play-screen .play-top{height:32px;margin:0 0 4px;justify-content:flex-start}
 .play-screen .play-top>span,.play-screen .play-top>strong{display:none}
 .play-screen .play-top .quiet{padding:6px 10px;min-height:32px;font-size:14px}
 .play-screen .game-tools{position:absolute;right:8px;top:6px;margin:0;gap:4px}
 .play-screen .game-tools .quiet{font-size:12px;padding:6px 8px;min-height:32px}
 .play-screen .journey-progress{height:3px;margin:0 0 5px}
 .play-screen .game-grid{gap:7px;align-items:start}
 .play-screen .road-stage{border-radius:16px;box-shadow:0 3px 0 #e2d2b9;scroll-margin-top:4px}
 .play-screen .road-stage canvas{width:100%;height:clamp(112px,25dvh,208px);aspect-ratio:auto;object-fit:contain}
 .play-screen .road-status,.play-screen .scene-reset,.play-screen .scene-skip{display:none}
 .play-screen .question-card{position:relative;padding:9px 10px;border-radius:18px;box-shadow:0 3px 0 #e5d6c3}
 .play-screen .question-meta{display:none}
 .play-screen .question-card h1{font-size:16px;line-height:1.25;margin:0 0 5px;min-height:72px;padding-right:80px}
 .play-screen .question-card .companion{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(30px,auto);min-height:0;max-width:none;position:static;padding:0;margin:0 0 5px}
 .play-screen #coco-slot{position:absolute;right:8px;top:6px;width:76px;height:72px;pointer-events:none}
 .play-screen .coco-actor{width:76px;height:72px}
 .play-screen .coco-actor canvas.coco-idle-render,.play-screen .coco-actor canvas.coco-full-render,.play-screen .coco-actor canvas.coco-full-render[data-action-id="correct02"]{left:0;top:0;width:76px;height:72px;object-fit:contain}
 .play-screen .companion>p,.play-screen .companion>.coco-subtitles{grid-area:1/1;position:static;left:auto;right:auto;top:auto;padding:0;margin:0;width:auto;align-self:center;font-size:12px;line-height:1.25;text-align:left}
 .play-screen .companion>.coco-subtitles .subtitle-zh{font-size:12px;line-height:1.2;margin-top:2px}
 .play-screen .companion>.coco-subtitles .subtitle-ja{display:block;font-size:12px;line-height:1.2;margin-top:2px}
 .play-screen .companion:has(>.coco-subtitles:not([hidden]))>p{visibility:hidden}
 .play-screen .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .play-screen .option{font-size:14px;line-height:1.25;min-height:52px;padding:7px;gap:5px;border-radius:13px;align-items:flex-start;overflow-wrap:break-word}
 .play-screen .option b{width:21px;height:21px;font-size:12px;border-width:0}
 .play-screen .option span{min-width:0;align-self:center}
 .play-screen .hint{font-size:13px;min-height:34px;padding:6px 10px;margin:6px 0 0;width:100%}
 .play-screen .mobile-companion-tools{display:none}
 .play-screen .mobile-answer-actions{padding:0;grid-row:4}
 .play-screen #answer-actions{display:flex;gap:7px;flex-wrap:wrap}
 .play-screen #answer-actions .replay,.play-screen #answer-actions .next{flex:1;min-width:110px;width:auto;margin:0;min-height:42px;font-size:14px;white-space:normal;padding:8px 10px;border-radius:13px}
 .play-screen #answer-actions .prototype-note,.play-screen #answer-actions .animation-progress{flex-basis:100%;font-size:12px;line-height:1.25;margin:0}
 .play-screen #feedback-slot{margin:0}
 .play-screen .feedback{padding:9px 11px;border-radius:14px;font-size:13px;line-height:1.3;margin:0}
 .play-screen .feedback p{font-size:13px;line-height:1.3;margin:5px 0}
 .play-screen .feedback small,.play-screen .feedback a{font-size:11px;line-height:1.25}
 .play-screen .scene-context{font-size:12px;line-height:1.2;padding:5px 8px}
 .play-screen .sign-detail,.play-screen .sign-attribution{font-size:11px;margin:0}
 .results{margin:0;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border-radius:0;min-height:100svh}
 .results>h1{font-size:22px;line-height:1.15;margin:5px 0 7px}
 .results>.eyebrow{font-size:11px;margin:0 0 4px}
 .results .result-coco{width:120px;height:96px;margin:0 auto}
 .results>.result-coco-line,.results>.result-coco-line+p{font-size:12px;line-height:1.25;margin:4px 0}
 .results>.stats{justify-content:center;gap:24px;margin:8px 0}
 .results>.stats strong{font-size:25px}
 .results>.stats div{font-size:12px}
 .results>h2{font-size:15px;margin:7px 0 4px}
 .results>p{font-size:13px;line-height:1.25;margin:5px 0}
 .results .weak{font-size:12px;padding:5px 8px;margin:3px 0}
 .results>button,.results>p>a.primary{font-size:14px;min-height:42px;white-space:normal;padding:9px 12px;border-radius:13px;margin:4px}
 .results .formal-completion{font-size:12px;margin:6px 0;padding:8px}
 .results .formal-completion h2{font-size:16px;margin:4px 0}
}
/* Editable wooden nameplate covers the old baked lettering without new media. */
.living-city .wood-home::after{content:'Coco Go';position:absolute;left:5%;top:8%;width:91%;height:73%;display:grid;place-items:center;box-sizing:border-box;transform:rotate(-7deg);border:2px solid #c3905e;border-radius:10px;background:repeating-linear-gradient(2deg,#edc090 0px,#edc090 17px,#e8b888 18px,#edc090 20px);box-shadow:inset 0 2px 3px #ffe0b8,0 2px 4px #86634540;color:#503b28;font-size:3.5cqw;font-weight:900;letter-spacing:-.03em;text-shadow:0 1px #ffdfb8;white-space:nowrap}@media(max-width:750px){
 .play-screen .option{display:block;text-align:left}
 .play-screen .option b{display:inline-grid;float:left;margin:0 5px 2px 0}
 .play-screen .option span{display:inline}
 .play-screen .mobile-answer-actions{grid-row:3}
 .play-screen #feedback-slot{grid-row:4}
}
@media(max-width:750px) and (max-height:620px){
 .play-screen .road-stage canvas{height:clamp(96px,20dvh,124px)}
 .play-screen .game-grid{gap:5px}
}@media(max-width:750px){
 .play-screen #answer-actions .replay{order:1}
 .play-screen #answer-actions .next{order:2}
 .play-screen #answer-actions .prototype-note,.play-screen #answer-actions .animation-progress{order:3}
}/* Narrow-screen text flows below Coco instead of keeping an empty right column. */
@media(max-width:750px){
 .play-screen .question-card h1{padding-right:0}
 .play-screen .question-card h1::before{content:'';float:right;width:80px;height:72px;margin-left:5px}
 .play-screen .question-card .companion{grid-template-rows:minmax(20px,auto)}
 .results>.stats>div{padding:8px 12px;border-radius:14px}
 .results>button{width:calc(50% - 10px);vertical-align:top;margin:4px;font-size:14px}
}
@media(max-width:750px) and (max-height:600px){
 .play-screen .road-stage canvas{height:96px}
}/* Immediate tap feedback stays on the selected sign, even below a scrolled header. */
/* Failed decoding retains the same complete-character phone slot as live frames. */
@media(max-width:750px){
 .play-screen .coco-actor img.coco-failure-poster{left:0;top:0;width:76px;height:72px;max-width:100%;object-fit:contain;clip-path:none}
}
/* Portrait viewport, landscape source art: overview retains every landmark. */
@media(max-width:750px){
 .map-screen{padding:0 0 env(safe-area-inset-bottom,0px)}
 .map-screen .map-heading{margin:0;padding:10px 12px}
 .map-screen .map-heading h1{font-size:18px;margin:2px 0}
 .map-screen .map-heading .eyebrow{font-size:10px;margin:0}
 .map-screen .map-window{position:relative;width:100%;height:min(177.7778vw,calc(100dvh - 100px));min-height:360px;margin:0;border-radius:18px;overflow:hidden;background:#faf4e8;touch-action:pan-y pinch-zoom}
 .map-window[data-camera] .living-city{position:absolute;left:0;top:0;width:1024px;height:576px;min-width:1024px;max-width:none;transform-origin:0 0;transition:transform .32s ease}
 .map-window[data-camera=overview] .living-city{overflow:visible}
 .map-window[data-camera=overview] .destination-plaque{width:calc(44px / var(--camera-scale))!important;height:calc(44px / var(--camera-scale));padding:0;border:0;background:transparent;box-shadow:none;justify-content:center}
 .map-window[data-camera=overview] .destination-number{width:calc(24px / var(--camera-scale));height:calc(24px / var(--camera-scale));font-size:calc(14px / var(--camera-scale));border-width:calc(2px / var(--camera-scale))}
 .map-window[data-camera=overview] .destination-plaque>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .map-window[data-camera=overview] .chapter-lock{font-size:calc(8px / var(--camera-scale))}
 .map-window[data-camera=focus] .destination-plaque{min-width:calc(44px / var(--camera-scale));min-height:calc(44px / var(--camera-scale))}
 .map-screen:has(.map-window[data-camera]) .map-navigation{display:none}
 .map-screen .map-entry-status{padding:0 12px;margin:6px 0;min-height:20px}
 .map-screen .map-bottom{padding:8px 12px}
 .map-screen .map-bottom h2{font-size:16px;margin:3px 0}
 .map-screen .map-bottom p{font-size:13px;margin:3px 0}
}
@media(prefers-reduced-motion:reduce){.map-window[data-camera] .living-city{transition:none}}

.answer-recap{display:none}.feedback-details>summary{font-size:13px;font-weight:700;cursor:pointer}
@media(max-width:750px){
 .play-screen[data-answer-state=feedback]{height:100dvh;min-height:0;overflow:hidden;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
 .play-screen[data-answer-state=feedback] .play-area{height:100%;display:grid;grid-template-rows:36px 3px minmax(0,1fr);gap:3px}
 .play-screen[data-answer-state=feedback] .game-grid{min-height:0;grid-template-rows:auto minmax(72px,112px) minmax(0,1fr) auto;gap:5px}
 .play-screen[data-answer-state=feedback] .road-stage{grid-row:1;max-height:none;overflow:visible}
 .play-screen[data-answer-state=feedback] .road-stage canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
 .play-screen[data-answer-state=feedback] .question-card{grid-row:2;max-height:112px;overflow:auto;overscroll-behavior:contain}
 .play-screen[data-answer-state=feedback] .options{display:none}
 .play-screen[data-answer-state=feedback] #feedback-slot{grid-row:3;min-height:0;height:100%;max-height:100%;align-self:stretch;overflow:auto;overscroll-behavior:contain;border:1px solid #e6d6bd;border-radius:14px;background:#fff7e8;padding:7px 9px;scrollbar-gutter:stable}
 .play-screen[data-answer-state=feedback] .mobile-answer-actions{grid-row:4;background:#faf4e8}
 .answer-recap{display:block;font-size:13px;line-height:1.3}
 .answer-recap p{margin:0 0 5px}.answer-recap .why-core{margin:7px 0}
 .feedback-details>summary{padding:8px 0;min-height:44px;display:list-item}
 .play-screen[data-answer-state=feedback] #feedback-slot::after{content:'Scroll here for all details';display:block;text-align:right;color:#655b49;font-size:11px;margin-top:4px}
 .play-screen #answer-actions .replay,.play-screen #answer-actions .next{min-height:44px}
 .play-screen .hint,.play-screen .play-top .quiet,.play-screen .game-tools .quiet{min-height:44px}
 .play-screen .play-top{height:44px}.play-screen[data-answer-state=feedback] .play-area{grid-template-rows:44px 3px minmax(0,1fr)}
 .play-screen #coco-slot,.play-screen .coco-actor{width:clamp(64px,20vw,78px)}
 .play-screen .coco-actor canvas.coco-idle-render,.play-screen .coco-actor canvas.coco-full-render,.play-screen .coco-actor canvas.coco-full-render[data-action-id=correct02],.play-screen .coco-actor img.coco-failure-poster{width:100%}
 .results .result-coco{height:72px;width:96px}
 .results>h1{font-size:18px;margin:3px 0;line-height:1.2}
 .results>.stats{margin:5px 0;gap:12px}
 .results>button,.results>p>a.primary{min-height:44px}
 .results .result-review{font-size:13px;text-align:left;margin:8px 0}
 .results .result-review>summary{min-height:44px;font-size:13px;padding:10px}
}

/* The phone page is a viewport frame. Exceptional long text scrolls in its named
   card, with the hint/actions reachable; no question or answer text is truncated. */
@media(max-width:750px){
 .play-screen{height:100dvh;min-height:0;overflow:hidden;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
 .play-screen .play-area{height:100%;display:grid;grid-template-rows:44px 3px minmax(0,1fr);gap:3px}
 .play-screen .game-grid{min-height:0;grid-template-rows:auto minmax(0,1fr) auto;gap:5px}
 .play-screen .question-card{grid-row:2;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:auto}
 .play-screen[data-answer-state=waiting] .road-stage{max-height:none;overflow:visible}
 .play-screen[data-answer-state=waiting] .road-stage canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
 .play-screen .mobile-answer-actions:not(:has(button)){display:none}
 .play-screen .hint{position:static;background:#fff9ed;box-shadow:none}
 .play-screen[data-answer-state=waiting] .question-card::after{content:none}
 .play-screen[data-answer-state=waiting] .companion.quiet-waiting:not(:has(>.coco-subtitles:not([hidden]))){grid-template-rows:auto;margin:0}
 .play-screen[data-answer-state=waiting] .companion.quiet-waiting>p{display:none}
}

/* iPhone feedback revision: viewport height excludes the browser chrome. */
@media(max-width:750px){
 .play-screen,.play-screen[data-answer-state=feedback]{height:var(--game-height,100dvh);min-height:0}
 .play-screen .play-area,.play-screen[data-answer-state=feedback] .play-area{grid-template-rows:36px 3px minmax(0,1fr)}
 .play-screen .play-top{height:36px}.play-screen .play-top .quiet,.play-screen .game-tools .quiet{min-height:36px;height:36px;padding:4px 8px;font-size:12px}
 .play-screen .game-tools{top:6px}
 .play-screen .road-stage,.play-screen[data-answer-state=waiting] .road-stage,.play-screen[data-answer-state=feedback] .road-stage{max-height:none;overflow:visible}
 .play-screen[data-answer-state=waiting] .road-stage canvas,.play-screen[data-answer-state=feedback] .road-stage canvas{width:100%;height:clamp(96px,calc(var(--game-height,100dvh)*.22),180px);aspect-ratio:auto;object-fit:contain}
 .play-screen[data-answer-state=feedback] .game-grid{grid-template-rows:auto minmax(144px,auto) minmax(100px,1fr) auto}
 .play-screen .question-card h1{min-height:144px;font-size:15px}
 .play-screen .question-card h1::before{width:144px;height:144px;margin-left:6px}
 .play-screen #coco-slot,.play-screen .coco-actor{width:144px;height:144px}
 .play-screen .coco-actor canvas.coco-idle-render,.play-screen .coco-actor canvas.coco-full-render,.play-screen .coco-actor canvas.coco-full-render[data-action-id=correct02],.play-screen .coco-actor img.coco-failure-poster{left:0;top:0;width:144px;height:144px;object-fit:contain;background:transparent;border:0;box-shadow:none;clip-path:none}
 .play-screen[data-answer-state=feedback] .question-card{max-height:none;overflow:visible;min-height:144px;padding-bottom:7px}
 .play-screen[data-answer-state=feedback] .question-card h1{margin-bottom:0;min-height:92px}
 .play-screen[data-answer-state=feedback] .question-card h1::before{height:92px}
 .play-screen[data-answer-state=feedback] .companion{padding-right:144px;min-height:42px;grid-template-rows:minmax(42px,auto)}
 .play-screen .companion>.coco-subtitles{overflow:visible;white-space:normal}
 .play-screen[data-answer-state=feedback] #feedback-slot::after{content:none}
 .play-screen[data-answer-state=feedback] #feedback-slot{padding:6px 8px;scrollbar-gutter:auto}
 .answer-recap p{margin:0 0 4px}.answer-recap .why-core{margin:0 0 5px}
 .feedback-details>summary{padding:5px 0;min-height:32px}
 .results{min-height:var(--game-height,100dvh);padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
 .results .result-coco{width:min(80vw,320px);height:clamp(144px,calc(var(--game-height,100dvh)*.30),300px);margin:auto;flex:1;min-height:144px}
 .results .result-character{width:100%;height:100%;object-fit:contain;background:transparent;border:0;box-shadow:none}
 .results>.stats{margin:12px 0}.results>.result-review{margin:10px 0}
 .results>.eyebrow{font-size:12px}.results>h1{font-size:20px}
}

@media(max-width:750px){
 .results{height:var(--game-height,100dvh);min-height:0;max-width:none;display:flex;flex-direction:column;gap:4px;box-sizing:border-box;overflow:hidden}
 .results>p,.results>h1,.results>.stats,.results>.result-review{flex:none;margin:3px 0}
 .results>.stats div{padding:9px}
 .results>.result-review{max-height:28%;overflow:auto}
 .results>button{margin:2px 0;min-height:44px;flex:none}
 .play-screen .question-card h1{padding-right:0}
 .play-screen .question-card h1::before{content:'';display:block;float:right;width:144px;height:144px}
 .play-screen .question-card{display:flow-root;overflow-x:hidden}
 .play-screen[data-answer-state=waiting] .question-card h1{min-height:80px}
 .play-screen[data-answer-state=waiting] .question-card h1::before{height:80px}
 .play-screen[data-answer-state=waiting] #coco-slot{top:-10px}
 .play-screen .question-card{padding:6px 8px}
 .play-screen .options{gap:5px}
 .play-screen .option{padding:5px}
 .play-screen .question-card h1::before{width:96px}
 .play-screen #coco-slot{right:-8px}
 .play-screen .option{display:block;position:relative}
 .play-screen .option b{position:absolute;left:5px;top:5px;width:18px;height:18px}
 .play-screen .option span{display:block;text-indent:23px}
 .play-screen[data-answer-state=feedback] .question-card h1::before{height:92px}
 .play-screen[data-answer-state=feedback] .question-card .companion{min-height:36px;grid-template-rows:minmax(36px,auto)}
 .play-screen[data-answer-state=feedback] .game-grid{grid-template-rows:auto auto minmax(70px,1fr) auto}
 .play-screen[data-answer-state=feedback] #answer-actions>.animation-progress,.play-screen[data-answer-state=feedback] #answer-actions>.prototype-note{display:none}
 .play-screen[data-answer-state=waiting] .road-stage canvas,.play-screen[data-answer-state=feedback] .road-stage canvas{width:100%;height:min(calc((100vw - 16px)*.75),calc(var(--game-height,100dvh) - 370px));min-height:150px;object-fit:contain}
 .map-screen{height:var(--game-height,100dvh);display:flex;flex-direction:column;overflow:hidden}
 .map-screen .map-heading{flex:none;padding:6px 10px}
 .map-screen .map-window{height:auto;min-height:0;flex:1;border-radius:0;touch-action:manipulation}
 .map-window[data-camera] .living-city[data-portrait=true]{width:1024px;height:1820px;min-width:1024px;aspect-ratio:9/16}
 .living-city[data-portrait=true] .wood-home,.living-city[data-portrait=true] .city-background{display:none}
 .map-window[data-camera=overview] .living-city[data-portrait=true] .destination-plaque{width:calc(112px / var(--camera-scale))!important;height:calc(44px / var(--camera-scale));display:flex;gap:4px;border:1px solid #d9b670;background:#fff6dfeF;border-radius:12px;padding:3px 5px}
 .map-window[data-camera=overview] .living-city[data-portrait=true] .destination-plaque>span{position:static;clip-path:none;overflow:visible;width:auto;height:auto;font-size:calc(13px / var(--camera-scale));line-height:1.15;flex:1}
 .map-window[data-camera=overview] .living-city[data-portrait=true] .destination-plaque strong{font-size:inherit}
 .map-window[data-camera=overview] .living-city[data-portrait=true] .destination-plaque small{display:none}
 .map-screen .map-bottom,.map-screen>.formal-completion{display:none}
 .map-screen .map-entry-status{margin:0;min-height:0;font-size:12px}
 .map-screen .map-entry-status:not(:empty){position:absolute;left:0;bottom:0;width:100%;padding:5px 10px;background:#fff8ed;z-index:10}
}

/* Keep the widest lying/flying pose and its caption inside a reserved header.
   Transparent source padding may overlap; character pixels never reach answers. */
@media(max-width:750px){
 .play-screen .question-card h1,.play-screen[data-answer-state=waiting] .question-card h1,.play-screen[data-answer-state=feedback] .question-card h1{min-height:148px;margin-bottom:4px}
 .play-screen .question-card h1::before,.play-screen[data-answer-state=waiting] .question-card h1::before,.play-screen[data-answer-state=feedback] .question-card h1::before{width:152px;height:148px}
 .play-screen #coco-slot,.play-screen[data-answer-state=waiting] #coco-slot{right:0;top:-14px;width:192px;height:144px}
 .play-screen .coco-actor{width:192px;height:144px}
 .play-screen .coco-actor canvas.coco-idle-render,.play-screen .coco-actor canvas.coco-full-render,.play-screen .coco-actor canvas.coco-full-render[data-action-id=correct02],.play-screen .coco-actor img.coco-failure-poster{width:192px;height:144px}
 .play-screen .question-card .companion,.play-screen[data-answer-state=feedback] .question-card .companion{min-height:0;grid-template-rows:0;padding:0;margin:0}
 .play-screen .companion>p,.play-screen .companion>.coco-subtitles{position:absolute;right:3px;left:auto;top:118px;width:152px;text-align:center;font-size:12px;line-height:1.2}
 .play-screen[data-answer-state=waiting] .companion:not(.quiet-waiting)>p{position:static;width:100%;text-align:left;margin:4px 0}
 .play-screen[data-answer-state=waiting] .road-stage canvas,.play-screen[data-answer-state=feedback] .road-stage canvas{height:min(calc((100vw - 16px)*.75),calc(var(--game-height,100dvh) - 365px));min-height:120px}
 .play-screen .play-top>.hint{width:auto;min-height:36px;height:36px;margin:0 0 0 5px;padding:4px 10px;font-size:12px}
 .play-screen[data-answer-state=waiting] .question-card h1{min-height:128px}
 .play-screen[data-answer-state=waiting] .question-card h1::before{height:128px}
 .play-screen[data-answer-state=waiting] .question-card{padding-top:4px;padding-bottom:4px}
}
@media(min-width:361px) and (max-width:750px){
 .play-screen[data-answer-state=waiting] .road-stage canvas,.play-screen[data-answer-state=feedback] .road-stage canvas{height:calc((100vw - 16px)*.75)}
}
@media(max-width:360px){
 .play-screen[data-answer-state=waiting] .road-stage canvas,.play-screen[data-answer-state=feedback] .road-stage canvas{height:min(calc((100vw - 16px)*.75),calc(var(--game-height,100dvh) - 385px))}
}
@media(max-width:750px){
 .results .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex:none;margin-top:4px}
 .results .result-actions>button,.results .result-actions>a{margin:0;min-height:44px;width:100%;padding:8px;font-size:14px;line-height:1.2;border-radius:13px;text-decoration:none;display:grid;place-items:center}
 .results .result-actions>a.primary,.results .result-actions>#next-chapter{grid-column:1/-1}
}
@media(max-width:750px){
 .play-screen{--phone-road-height:min(calc((100vw - 16px)*.75),calc(var(--game-height,100dvh) - 365px))}
 .play-screen[data-answer-state=feedback] .question-card h1,.play-screen[data-answer-state=feedback] .question-card h1::before{min-height:calc(118px + var(--coco-caption-height,30px));height:auto}
 .play-screen[data-answer-state=feedback] .road-stage canvas{height:calc(var(--phone-road-height) - max(0px,calc(var(--coco-caption-height,30px) - 30px)))}
}
@media(min-width:361px) and (max-width:750px){.play-screen{--phone-road-height:calc((100vw - 16px)*.75)}}
@media(max-width:360px){.play-screen{--phone-road-height:min(calc((100vw - 16px)*.75),calc(var(--game-height,100dvh) - 385px))}}
@media(max-width:750px){
 .results .result-hero{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:8px;align-items:center;flex:1;min-height:160px}
 .results .result-hero .result-coco{width:100%;height:100%;min-height:0;margin:0}
 .results .result-hero .stats{display:grid;grid-template-columns:1fr;gap:8px;margin:0}
 .results .result-hero .stats div{padding:9px 6px;font-size:12px}
 .results .result-hero .stats strong{font-size:25px}
 .results .result-hero{grid-template-rows:minmax(0,1fr) auto;min-height:220px}
 .results .result-hero .result-coco{grid-column:1;grid-row:1}
 .results .result-hero .stats{grid-column:2;grid-row:1/3}
 .results .result-dialogue{grid-column:1;grid-row:2;padding:4px 0;align-self:end}
 .results .result-dialogue h1{font-size:14px;line-height:1.25;margin:2px 0}
 .results .result-dialogue p{font-size:12px;line-height:1.25;margin:3px 0}
 .results.results>p,.results.results>h1,.results.results>.result-review{margin:0}
}
/* M6: subtitles never participate in the character or road geometry. */
@media(max-width:750px){
 .play-screen[data-answer-state=waiting] .road-stage canvas,.play-screen[data-answer-state=feedback] .road-stage canvas{height:var(--phone-road-height)}
 .play-screen .question-card h1,.play-screen[data-answer-state=waiting] .question-card h1,.play-screen[data-answer-state=feedback] .question-card h1{min-height:182px;height:auto}
 .play-screen .question-card h1::before,.play-screen[data-answer-state=waiting] .question-card h1::before,.play-screen[data-answer-state=feedback] .question-card h1::before{height:182px;min-height:182px}
 .play-screen #coco-slot,.play-screen[data-answer-state=waiting] #coco-slot{top:-30px;right:0;width:192px;height:144px}
 .play-screen .companion>p,.play-screen .companion>.coco-subtitles{top:102px;height:76px;max-height:76px;overflow:auto;margin:0}
 .play-screen[data-answer-state=waiting] .companion:not(.quiet-waiting)>p{position:absolute;right:3px;top:102px;width:152px;text-align:center;margin:0}
 .results .result-hero{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;min-height:0;gap:5px}
 .results .result-hero .result-coco{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0}
 .results .result-hero .stats{grid-column:1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));gap:20%;padding:0 8%}
 .results .result-hero .stats div{padding:7px 5px}
 .results .result-dialogue{grid-column:1;grid-row:2;padding:2px 0}
 .results .result-dialogue h1{font-size:14px}
 .results .result-review{font-size:13px}
 .results>p{font-size:13px;line-height:1.25}
}
@media(max-width:750px){
 .play-screen[data-answer-state=waiting] .question-card h1,.play-screen[data-answer-state=waiting] .question-card h1::before{min-height:128px;height:auto}
}
@media(max-width:360px){
 .play-screen .question-card h1{font-size:13px;line-height:1.25}
 .play-screen .option{font-size:12px;line-height:1.2;padding:5px;min-height:44px}
}
@media(max-width:750px){
 .living-city[data-portrait=true] img.homepage-coco.reduced-pose{left:36%;top:84%;width:28%;height:15%;z-index:6;object-fit:contain}
}
@media(max-width:750px){
 .living-city[data-portrait=true] img.homepage-coco.reduced-pose{left:30%;top:81%;width:60%;height:20%;z-index:6}
 .results .result-coco[data-result=perfect] canvas.result-character{transform:scale(1.3);transform-origin:center}
 .results .result-hero .result-coco{overflow:hidden}
}
/* Keep the complete return pose above the viewport edge and feedback clear of the card shadow. */
@media(max-width:750px){
 .living-city[data-portrait=true] img.homepage-coco.reduced-pose{top:73%;left:37%;width:48%;height:20%}
 .play-screen[data-answer-state=feedback] #feedback-slot{margin-top:10px;padding-top:8px}
}
@media(max-width:750px){.living-city[data-portrait=true] img.homepage-coco.reduced-pose{left:30%;width:40%}}
@media(max-width:750px){.map-window[data-camera=overview] .living-city[data-portrait=true]{transition:none}}
.mobile-road-references{display:none}
.mobile-hint-panel{display:none}
@media(max-width:750px){
 .play-screen[data-answer-state=waiting][data-hint-open=true] .road-stage canvas{height:min(var(--phone-road-height),var(--hint-road-limit,var(--phone-road-height)));min-height:48px}
 .play-screen[data-answer-state=waiting][data-hint-open=true] .mobile-hint-panel:not([hidden]){display:block;position:static;margin:4px 0;padding:7px 9px;border:1px solid #dfccb0;border-radius:10px;background:#fff7e8;font-size:12px;line-height:1.3}
 .play-screen[data-answer-state=waiting][data-hint-open=true] .companion>p{visibility:hidden}
}
/* Bus conditions stay visible without displacing the four answer buttons. */
@media(max-width:750px){
 .play-screen:has(.road-example-details){--phone-road-height:min(calc((100vw - 16px)*.75),230px)}
 .play-screen .road-example-details{margin:4px 8px;padding:4px 6px;font-size:11px;line-height:1.25}
 .play-screen .road-example-details strong,.play-screen .road-example-details p{font-size:11px;line-height:1.25;margin:2px 0}
}
@media(max-width:360px){
 .play-screen:has(.road-example-details){--phone-road-height:130px}
}
@media(max-width:750px){
 .play-screen .mobile-road-references:not([hidden]){display:block;position:absolute;right:8px;bottom:8px;z-index:9;margin:0;border-radius:14px;background:#fff8ec;box-shadow:0 1px 4px #66513b33}
 .play-screen .mobile-road-references>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;font-size:20px;color:#365b70}
 .play-screen .mobile-road-references>summary::-webkit-details-marker{display:none}
 .play-screen .mobile-road-references[open]{top:8px;bottom:auto;left:8px;right:8px;max-height:calc(var(--phone-road-height) - 16px);overflow:auto;border:1px solid #dfccb0}
 .play-screen .mobile-road-references[open]>summary{display:block;width:auto;padding:6px 10px;height:32px;font-size:15px}
 .play-screen .mobile-road-references[open]>summary::after{content:' Road details & sources';font-size:12px}
 .play-screen .road-reference-body{padding:0 10px 10px;font-size:12px;line-height:1.3}
 .play-screen .road-reference-body .sign-attribution{display:block;padding-bottom:7px}
 .play-screen .road-reference-body .scene-context{margin:0;padding:5px 0}
 .play-screen .road-reference-body .parking-rule-details,.play-screen .road-reference-body .road-example-details{position:static;width:auto;height:auto;margin:0;padding:5px 0}
}
/* Keep the wrong-choice consequence visible before the optional source details. */
@media(max-width:750px){
 .mobile-consequence{padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid #dfccb0}
 .mobile-consequence .penalty-summary{font-size:14px;line-height:1.25;color:#8c3f2e}
 .mobile-consequence .penalty-context{font-size:11px;line-height:1.25}
}
@media(max-width:750px){
 .play-screen[data-answer-state=feedback] .question-card h1{min-height:164px}
 .play-screen[data-answer-state=feedback] .question-card h1::before{height:164px;min-height:164px}
 .play-screen[data-answer-state=feedback] #feedback-slot{margin-top:0}
}
@media(max-width:750px){.answer-recap p{line-height:1.25}}
/* Penalty text uses its own space; it never controls the road illustration size. */
@media(max-width:750px){
 .play-screen[data-answer-state=feedback] #feedback-slot{padding:4px 8px}
 .mobile-consequence{padding-bottom:2px;margin-bottom:2px}
 .mobile-consequence>p:not(.penalty-summary){font-size:12px;line-height:1.25}
}
@media(max-width:750px) and (max-height:600px){
 .play-screen[data-answer-state=feedback]{overflow-y:auto;overscroll-behavior:contain}
 .play-screen[data-answer-state=feedback] .play-area{height:auto;min-height:100%;grid-template-rows:44px 3px auto}
 .play-screen[data-answer-state=feedback] .game-grid{height:auto;grid-template-rows:auto auto 140px auto}
 .play-screen[data-answer-state=feedback] #feedback-slot{height:140px;max-height:140px}
 .play-screen[data-answer-state=feedback] .mobile-answer-actions{position:sticky;bottom:0;z-index:10}
}
@media(max-width:750px) and (max-height:600px){
 .play-screen[data-answer-state=feedback]{scrollbar-width:none}
 .play-screen[data-answer-state=feedback]::-webkit-scrollbar{display:none}
}
@media(min-width:751px){
 .results.global-ending-result .global-ending-host{width:min(100%,1000px);height:auto;min-height:0;margin:16px auto;aspect-ratio:auto}
 .results.global-ending-result .global-ending-video{display:block;width:100%;height:auto;aspect-ratio:794/530;object-fit:contain;border-radius:14px}
 .global-ending-host>button{margin:10px auto}
 .results.global-ending-result>.result-coco-line,.results.global-ending-result>.result-coco-line+p{display:none}
}
.global-ending-dialog{padding:18px;border:0;border-radius:16px;background:#faf4e8;color:#23445d;width:min(1100px,94vw);max-height:94dvh}
.global-ending-dialog::backdrop{background:#162b3ee6}
.global-ending-panel{display:grid;justify-items:center;gap:10px}
.global-ending-panel>.quiet{justify-self:end}
.global-ending-dialog .global-ending-video{display:block;width:100%;max-height:calc(94dvh - 100px);object-fit:contain;background:#111;border-radius:10px}
@media(min-width:751px){
 .results.grand-finale-result .result-coco{width:min(360px,100%);height:440px;margin:14px auto;position:relative}
 .results.grand-finale-result canvas.result-character{width:100%;height:100%;object-fit:contain}
}
.finale-fireworks{z-index:3}
.finale-trophy{position:absolute;left:calc(50% - 45px);top:62%;width:90px;height:105px;pointer-events:none;z-index:4;filter:drop-shadow(0 4px 9px #d39a3866);opacity:0;animation:finale-award 1.2s ease-out 6s forwards}
.finale-trophy svg{display:block;width:100%;height:100%}
@keyframes finale-award{from{opacity:0;transform:translateY(-150px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.finale-trophy{opacity:1;animation:none}}
@media(max-width:750px){
 .map-window[data-camera=overview] .living-city[data-portrait=true] .destination-plaque{height:calc(52px / var(--camera-scale))}
 .map-window[data-camera=overview] .living-city[data-portrait=true] .destination-plaque small.chapter-result{display:block;font-size:calc(11px / var(--camera-scale));line-height:1.05;font-weight:650;color:#3b6572;white-space:nowrap}
 .global-ending-dialog.portrait-ending{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom));border-radius:0;overflow:hidden}
 .portrait-ending .global-ending-panel{height:100%;grid-template-rows:38px minmax(0,1fr) auto;gap:4px}
 .portrait-ending .global-ending-video{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:9/16;object-fit:contain;border-radius:0}
 .portrait-ending .primary[hidden]{display:none}
}