/* Viewport layout, loaded after the shared badge styles. */
html{height:100%;overflow:hidden}
.taxi-speed-control{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px}
.topbar>.taxi-speed-control{margin-left:auto}
.taxi-speed-control select{min-height:32px;border:1px solid #cdd7c8;border-radius:7px;padding:4px 6px;background:#fffdf6;color:#243c35;font:inherit;font-size:12px}
.taxi-menu-controls>.taxi-speed-control{padding:10px 0;font-size:13px}
body{height:100vh;height:100dvh;min-height:0;margin:0;overflow:hidden;grid-template-rows:56px minmax(0,1fr)}
body>.topbar{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
body>main{padding:0 max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-width:0}
.comic-game{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:16px;min-width:0}
.comic-game>.scene{container-type:size;min-width:0}
.comic-game>.scene .taxi{width:min(90%,calc((100cqh - 100px)*2.24));max-width:650px;left:50%;transform:translateX(-50%);bottom:72px}
.comic-game>.scene .ride-meter{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;padding:12px 16px;min-height:58px}
.comic-game>.scene .ride-meter #beat-count{text-align:right;line-height:1.4;min-width:0}
.comic-game>.scene .ride-meter .meter-display{white-space:nowrap;margin:0}
.comic-game>.conversation{padding:18px;min-width:0}
.conversation .chapter-line{margin-bottom:10px}
.conversation #content>.reveal{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.taxi-result-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.taxi-result-scroll:focus-visible{outline:2px solid #7d9789;outline-offset:-2px}
.taxi-result-actions{flex:none;padding-top:8px;background:#fffdf6}
.conversation .taxi-result-actions .choice-row{margin:0;gap:8px}
.conversation .taxi-result-actions .choice-row+.choice-row{margin-top:6px}
.conversation .taxi-result-actions .button{min-height:40px;padding:9px 6px}
.conversation .reveal-heading{gap:12px;padding:8px 0}
.conversation .reveal-heading .portrait{width:56px;height:64px;flex:none}
.conversation .reveal-heading .speaker-label{margin:0;font-size:10px}
.conversation .reveal-heading h2{font-size:24px;line-height:1.2;margin:4px 0}
.conversation .reveal-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px 0;font-size:11px}
.conversation .reveal-stats span{padding:5px 7px;line-height:1.4}
.taxi-result-sources{border-top:1px solid #d7d3c4;padding-top:6px;margin-top:4px}
.taxi-result-sources>summary{font-size:12px;cursor:pointer;padding:6px 0}
.taxi-result-sources .sources{margin-top:4px;border-top:0}
.conversation [data-taxi-achievement],.conversation .taxi-pending-achievement{flex:none;min-width:0;max-height:32%;overflow:auto;scrollbar-width:thin}
.conversation :is(.cg-achievement,.cg-collection-callout){display:flex;flex-wrap:nowrap;gap:10px;margin:8px 0 0;padding:8px 10px;border:1px solid #d8ddd0;border-radius:9px;background:#f0f3eb;color:#324c3d}
.conversation :is(.cg-achievement,.cg-collection-callout)>div{min-width:0}
.conversation :is(.cg-achievement,.cg-collection-callout) h2{font-weight:700;font-size:12px;line-height:1.4;margin:1px 0 3px}
.conversation :is(.cg-achievement,.cg-collection-callout) p{font-size:11px;line-height:1.4;margin:2px 0}
.conversation .cg-achievement span:not(.jcs-badge){font-size:10px;color:#52684f}
.conversation .cg-badge-row{gap:2px;flex-wrap:nowrap;flex:none}
.conversation .cg-badge-row .jcs-game-badge{width:36px;height:36px}
.conversation :is(.cg-primary,.cg-secondary,.cg-text-link){font-size:11px;line-height:1.4;min-height:28px;padding:5px 6px;margin:0 4px 0 0;border-radius:5px;color:#284d40}
.conversation .cg-primary{background:#284d40;color:#fff9e8;border-color:#284d40}
.conversation .cg-text-link{display:inline-flex;align-items:center}
.conversation .radio-comparison,.conversation .party-comparison{max-height:48%;overscroll-behavior:contain}
.comic-game dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.comic-game:fullscreen .taxi-fullscreen-menu,.comic-game:-webkit-full-screen .taxi-fullscreen-menu,.taxi-fullscreen .taxi-fullscreen-menu{display:block;position:absolute;top:max(5px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
@media(max-width:760px) and (orientation:portrait){
 body{grid-template-rows:calc(44px + env(safe-area-inset-top)) minmax(0,1fr)}
 body>.topbar{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}
 body>main{padding:0}
 .comic-game{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,38fr) minmax(0,62fr);gap:0}
 .comic-game:has(#content>.reveal){grid-template-rows:minmax(0,26fr) minmax(0,74fr)}
 .comic-game>.scene{border:0;border-radius:0}
 .comic-game>.scene .taxi{width:min(75%,calc((100cqh - 68px)*2.24));left:50%;bottom:18px}
 .comic-game>.scene .scene-caption{display:none}
 .comic-game>.scene .ride-meter{inset:8px 12px auto;min-height:0;padding:7px 10px;border:1px solid #ffffff90;border-radius:9px;background:#fffdf1ed;color:#264438}
 .comic-game>.scene .ride-meter :is(.meter-top,.meter-display,#beat-count){padding:0;border:0;border-radius:0;background:none;font-size:10px;color:#264438}
 .comic-game>.scene .ride-meter :is(#meter-state,.meter-display strong,.meter-display span){color:#264438}
 .comic-game>.scene .ride-meter .meter-display strong{font-size:14px}
 .comic-game>.conversation{padding:12px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;border-radius:0}
 .conversation .chapter-line{margin-bottom:7px}
 .conversation .speaker-label{margin-bottom:8px}
 .conversation .choice-row .button{min-height:44px;padding:10px 5px}
 .conversation .taxi-result-actions .button{min-height:38px;padding:8px 5px}
 .conversation .reveal-kicker{font-size:8px;letter-spacing:1px}
 .conversation .reveal-heading h2{font-size:23px}
}
@media(orientation:landscape) and (max-height:550px){
 body{grid-template-rows:36px minmax(0,1fr)}
 body>.topbar{padding-top:3px;padding-bottom:3px}
 body>main{padding-bottom:max(6px,env(safe-area-inset-bottom))}
 .comic-game{grid-template-columns:minmax(0,1fr) minmax(285px,1.1fr);gap:10px}
 .comic-game>.scene .taxi{width:min(88%,calc((100cqh - 80px)*2.24));bottom:58px}
 .comic-game>.scene .ride-meter{padding:8px 10px;min-height:45px;gap:8px}
 .comic-game>.scene .ride-meter .meter-display strong{font-size:20px}
 .comic-game>.conversation{padding:9px 12px}
 .conversation .chapter-line{margin-bottom:4px}
 .conversation .reveal-kicker{display:none}
 .conversation .reveal-heading{padding:2px 0 5px}
 .conversation .reveal-heading .portrait{width:40px;height:46px}
 .conversation .reveal-heading h2{font-size:20px}
 .conversation .reveal-stats{padding:4px 0;font-size:10px;gap:3px}
 .conversation .reveal-stats span{padding:3px 5px}
 .conversation .taxi-result-actions{padding-top:4px}
 .conversation .taxi-result-actions .button{min-height:32px;padding:6px 4px}
 .conversation .taxi-result-actions .choice-row+.choice-row{margin-top:4px}
 .conversation :is(.cg-achievement,.cg-collection-callout){margin-top:5px;padding:5px 8px}
 .conversation .cg-badge-row .jcs-game-badge{width:30px;height:30px}
 .conversation .cg-achievement h2{display:inline;margin-right:6px}
 .conversation .cg-achievement span:not(.jcs-badge){display:inline-block;margin-right:5px}
}

@media(max-width:420px){.topbar>.taxi-speed-control>span{display:none}}