html,body{height:100%;overflow:hidden}body{display:grid;grid-template-rows:64px minmax(0,1fr);background:#f4f2ec;color:#243c35}
body>.topbar{width:100%;max-width:1600px;margin:0 auto;padding:12px 28px;border:0;min-height:0;gap:12px}
.topbar .brand{font-size:24px}.topbar .brand span{border:0;letter-spacing:1px}
body>main{width:100%;height:100%;min-height:0;max-width:1600px;margin:0 auto;padding:0 28px 20px}
main>.title-row,main>.taxi-mode-description,main>footer{display:none}
.comic-game{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:20px;border:0;background:transparent;box-shadow:none;overflow:hidden;position:relative}
.comic-game>.scene{height:100%!important;min-height:0;border:1px solid #c9cbb9;border-radius:18px}
.comic-game>.scene .taxi{width:90%;max-width:650px;left:5%;bottom:98px}
.comic-game>.scene .scene-caption{top:16px;left:16px;border:1px solid #ffffff70;border-radius:20px;background:#fff9e7e8;box-shadow:none;transform:none;max-width:80%;font:600 10px Arial;padding:9px 12px}
.comic-game>.scene .street-caption{display:none}.scene-grain{opacity:.12}
.comic-game>.scene .ride-meter{position:absolute;inset:auto 0 0;min-width:0;border:0;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;background:#243c35;color:#f5e9bd;box-shadow:none;transform:none;z-index:8}
.ride-meter .meter-label,.ride-meter .meter-top>span:first-child{display:none}.ride-meter .meter-top{font-size:11px}.ride-meter .meter-display{padding:0;background:transparent;border:0;box-shadow:none;display:flex;gap:6px;align-items:baseline}.ride-meter .meter-display strong{font-size:29px}.ride-meter #beat-count{font-size:10px}
.comic-game>.conversation{display:flex;flex-direction:column;min-height:0;height:100%;max-width:none;width:auto;margin:0;padding:22px;background:#fffdf6;border:1px solid #ddded3;border-radius:18px;overflow:hidden}
.conversation .chapter-line{flex:none;font:10px Arial;line-height:1.5;margin:0 0 15px;color:#7c8974}.conversation .record-label{display:none}
.conversation #content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.conversation .speech-balloon{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;border:0;border-radius:0;padding:0;background:transparent;box-shadow:none;margin:0}
.speech-balloon:before,.speech-balloon:after{display:none}.conversation .speech-balloon h2{font-size:25px;line-height:1.5;margin:15px 0}.conversation .speech-balloon p{font-size:14px;line-height:1.9}.conversation .speech-balloon .beat-text{font-size:16px;line-height:1.9;margin:0}.conversation .speaker-label{font-size:12px;margin-bottom:15px;flex:none}
.conversation .dialogue-scroll{flex:1;min-height:0;max-height:none;height:auto;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.conversation .scroll-hint{flex:none;font-size:10px!important;margin:8px 0;color:#89917e}
.conversation .choice-row{display:flex;flex-wrap:nowrap;gap:8px;margin:12px 0 0;flex:none}
.conversation .choice-row .button{min-width:0;flex:1;padding:12px 5px;min-height:45px;white-space:normal;font:600 12px Arial;border-radius:9px;border:1px solid #bdcdb6;box-shadow:none;background:#eff3e9;color:#324f39;transform:none}
.conversation .choice-row .main-button{background:#284d40;border-color:#284d40;color:#fff9e8;order:2}.conversation .choice-row .like-button{order:1}.conversation .choice-row .drop-button{order:3;background:#f5e9dd;color:#84523e;border-color:#d9bfaa}
.conversation .paused-card{display:flex;flex-direction:column;flex:1;min-height:0}.conversation .reveal{overflow:auto;min-height:0;padding:0}.conversation .reveal .choice-row{flex-wrap:wrap}
.conversation .party-comparison,.conversation .radio-comparison{overflow:auto;min-height:0;max-height:55%;flex-shrink:0}.conversation #notice,.conversation #recovery{flex:none;max-height:25%;overflow:auto}
.taxi-menu-open{font:600 12px Arial;padding:8px 14px;border:1px solid #cdd7c8;border-radius:8px;background:#fffdf6}.taxi-fullscreen-menu{display:none}
#taxi-menu656{border:1px solid #d2d6c8;border-radius:16px;background:#fffdf4;max-height:85dvh;overflow:auto;z-index:100}.taxi-menu-controls .sound-bar{position:static;display:flex;flex-wrap:wrap;padding:12px 0;background:transparent}.taxi-menu-controls .sound-bar>span{flex-basis:100%}.taxi-menu-controls .top-actions{display:flex;gap:10px;padding:12px 0}.taxi-menu-controls .taxi-records{margin:0;padding:12px 0;max-height:45dvh;overflow:auto}.taxi-menu-controls .pause-button{margin:0;width:100%;padding:10px}.taxi-menu-controls button{min-height:36px}
.comic-game:fullscreen,.comic-game:-webkit-full-screen,.taxi-fullscreen .comic-game{padding:42px 14px 14px;overflow:hidden;max-width:none;gap:14px;background:#f4f2ec}.comic-game:fullscreen .taxi-fullscreen-menu,.taxi-fullscreen .taxi-fullscreen-menu{display:block;position:absolute;top:5px;right:14px}
@media(max-width:600px) and (orientation:portrait){body{grid-template-rows:42px minmax(0,1fr)}body>.topbar{padding:6px 12px}.topbar .brand{font-size:20px}body>main{padding:0;margin:0;max-width:none}.comic-game{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,42fr) minmax(0,58fr);gap:0}.comic-game>.scene{border:0;border-radius:0}.comic-game>.scene .taxi{width:75%;left:12.5%;bottom:26px}.comic-game>.scene .scene-caption{display:none}.comic-game>.scene .ride-meter{inset:10px 12px auto;padding:0;background:transparent;justify-content:flex-start;gap:6px;color:#264438}.ride-meter .meter-top,.ride-meter .meter-display,.ride-meter #beat-count{border-radius:20px;background:#fffdf1eb;padding:6px 9px;border:1px solid #fff7;font-size:10px}.ride-meter .meter-display{margin-left:auto}.ride-meter .meter-display strong{font-size:12px;color:#264438;text-shadow:none}.ride-meter .meter-display span{font-size:9px;color:#264438}.comic-game>.conversation{border:0;border-radius:0;padding:14px 16px max(12px,env(safe-area-inset-bottom))}.conversation .chapter-line{margin-bottom:10px}.conversation .speech-balloon h2{font-size:20px}.conversation .speech-balloon .beat-text{font-size:14px;line-height:1.85}.conversation .speech-balloon p{font-size:13px}.conversation .speaker-label{margin-bottom:10px}.conversation .choice-row .button{min-height:48px;font-size:12px}.comic-game:fullscreen,.taxi-fullscreen .comic-game{padding:38px 0 0;gap:0}}
@media(orientation:landscape) and (max-height:550px){body{grid-template-rows:36px minmax(0,1fr)}body>.topbar{padding:4px 12px}.topbar .brand{font-size:20px}body>main{padding:0 12px 8px}.comic-game{grid-template-columns:minmax(0,1.25fr) minmax(270px,1fr);gap:10px}.comic-game>.scene{border-radius:12px}.comic-game>.scene .taxi{width:85%;left:7.5%;bottom:53px}.comic-game>.scene .ride-meter{padding:9px 12px}.ride-meter .meter-display strong{font-size:19px}.ride-meter #beat-count{font-size:8px}.comic-game>.scene .scene-caption{font-size:8px;padding:5px 8px;top:9px;left:9px}.comic-game>.conversation{padding:12px;border-radius:12px}.conversation .chapter-line{font-size:8px;margin-bottom:8px}.conversation .speaker-label{font-size:10px;margin-bottom:8px}.conversation .speech-balloon h2{font-size:18px;margin:5px 0 8px}.conversation .speech-balloon .beat-text{font-size:12px;line-height:1.7}.conversation .speech-balloon p{font-size:11px}.conversation .choice-row{margin-top:8px;gap:6px}.conversation .choice-row .button{min-height:34px;font-size:10px;padding:7px 4px}.conversation .scroll-hint{font-size:8px!important;margin:5px 0}.comic-game:fullscreen,.taxi-fullscreen .comic-game{padding:36px 12px 8px;gap:10px}}
.scene.is-driving .taxi-bounce{animation:taxi-sway656 2.1s ease-in-out infinite}.scene.has-passenger:not(.is-stopped) .driver-head{transform-origin:340px 106px;animation:driver-watch656 8s ease-in-out infinite}.scene.is-driving .driver-arm{transform-origin:338px 113px;animation:steer656 4s ease-in-out infinite}.scene.is-driving .steering-wheel{transform-origin:387px 119px;animation:steer656 4s ease-in-out infinite}.scene.is-driving .driver-silhouette{transform-origin:337px 137px;animation:breathe656 4s ease-in-out infinite}
@keyframes taxi-sway656{0%,100%{transform:translateY(0) rotate(-.12deg)}50%{transform:translateY(1.7px) rotate(.13deg)}}@keyframes driver-watch656{0%,65%,100%{transform:rotate(0)}73%,80%{transform:rotate(-5deg)}}@keyframes steer656{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}@keyframes breathe656{50%{transform:translateY(-.5px) scaleY(1.01)}}
@media(prefers-reduced-motion:reduce){.scene *{animation:none!important;transition:none!important}}
/* Portrait: keep all journey information together instead of inheriting the vertical meter. */
@media(max-width:600px) and (orientation:portrait){
 .comic-game>.scene .ride-meter{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;inset:10px 12px auto;padding:8px 12px;border:1px solid #ffffff90;border-radius:9px;background:#fffdf1ed;color:#264438}
 .comic-game>.scene .ride-meter .meter-top,.comic-game>.scene .ride-meter .meter-display,.comic-game>.scene .ride-meter #beat-count{min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:#264438;font-size:11px;line-height:1.4;white-space:nowrap}
 .comic-game>.scene .ride-meter .meter-top{gap:0}
 .comic-game>.scene .ride-meter #meter-state{color:#264438}
 .comic-game>.scene .ride-meter .meter-display{justify-content:center;gap:3px}
 .comic-game>.scene .ride-meter #beat-count{text-align:right;white-space:normal;overflow-wrap:anywhere}
}