:root{font-family:system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;background:#0c1624;color:#ecf5fb;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#1d3348 0,#0c1624 68%)}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;transition:background .15s,transform .1s}button:disabled{opacity:.4;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible{outline:3px solid #ffca76;outline-offset:3px}
.app{max-width:1200px;margin:auto;padding:20px clamp(12px,3vw,28px) 44px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.eyebrow{letter-spacing:.1em;color:#91adbf;font-size:11px;font-weight:700;margin:0 0 7px}h1{font-size:clamp(28px,5vw,42px);line-height:1.1;margin:0}.plane-word{color:#6bd2db}.subhead{color:#b7c8d6;font-size:13px;margin:8px 0 0}
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.stat{background:#172c3d;border:1px solid #345368;border-radius:12px;padding:12px 14px;min-height:69px}.stat span{display:block;color:#b0c7d2;font-size:11px;margin-bottom:6px}.stat strong{font-size:clamp(15px,2.1vw,22px);font-variant-numeric:tabular-nums}
.boards{display:grid;grid-template-columns:1fr;gap:10px}.boards.dual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.game-pane{background:#0a2132;border:1px solid #416479;border-radius:15px;overflow:hidden;min-width:0;box-shadow:0 12px 40px #020e1b88}.pane-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;background:#162f41;padding:11px 15px;font-size:13px}.pane-heading span{font-size:11px;color:#c6d5df}.game-pane canvas{display:block;width:100%;aspect-ratio:620/400;height:auto;touch-action:none;cursor:crosshair}.scene-help{font-size:12px;color:#b4d7e4;margin:9px 4px 0}.canvas-bottom{background:#102c3c;border:1px solid #355c6e;border-radius:10px;padding:9px 13px;margin-top:9px;color:#dceaf1;font-size:13px;min-height:38px}
.bottom-panel{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;background:#152939;border:1px solid #315065;border-radius:13px;margin-top:12px;padding:17px}.meter{height:10px;background:#33495a;border-radius:20px;overflow:hidden}.meter-fill{height:100%;width:0%;transition:width .2s}.teal{background:linear-gradient(90deg,#4bbaab,#91e9cf)}.coral{background:linear-gradient(90deg,#dfa15d,#f36c64)}.meter-line{display:flex;justify-content:space-between;gap:10px;margin-top:6px;align-items:baseline}.meter-line strong{font-size:15px}.meter-line small{font-size:11px;color:#9bb5c4;text-align:right}.crowd-label{margin-top:16px}.action-panel{display:flex;gap:10px;align-items:center}.action-copy{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.action-copy strong{font-size:15px}.action-copy span{font-size:12px;color:#b0c7d3;line-height:1.45}.action-copy .credit{font-weight:800;color:#f4ce8a}.actions{display:flex;flex-direction:column;gap:9px;min-width:124px}.primary{background:#62bed0;color:#10222d;font-weight:800;padding:12px 15px}.minor{background:#223a4e;color:#e9f7ff;border:1px solid #46667c;padding:11px 13px}.big{width:100%;margin-top:10px;padding:15px}.hidden{display:none!important}
.instructions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.instructions>div{padding:14px;background:#152638ad;border:1px solid #345267;border-radius:10px}.instructions strong{color:#92d9dc;font-size:13px}.instructions p{font-size:12px;line-height:1.75;color:#b8c9d3;margin:5px 0 0}.disclaimer{font-size:11px;line-height:1.8;color:#91abba;margin-top:15px}
.overlay{position:fixed;inset:0;z-index:12;background:#07121fdf;backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;padding:14px}.dialog{width:min(100%,510px);max-height:94vh;overflow:auto;padding:clamp(21px,4vw,32px);border:1px solid #52849d;border-radius:19px;background:linear-gradient(145deg,#213e52,#112133);box-shadow:0 20px 85px #010a17d8}.dialog-icon{font-size:39px;color:#8ce0da;margin-bottom:12px}.dialog h2{font-size:clamp(22px,4vw,29px);margin:0 0 13px}.modal-body{font-size:14px;line-height:1.75;color:#d5e3e9}.modal-body p{margin:7px 0 12px}.modal-body strong{color:#95ecdc}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.result-grid div{padding:11px;border:1px solid #426073;background:#153047;border-radius:10px}.result-grid small{display:block;color:#b3c7d3;font-size:11px}.result-grid strong{display:block;font-size:20px}.modal-hint{font-size:11px;color:#a6b8c3;text-align:center;margin:13px 0 0}
@media(max-width:740px){.app{padding-top:13px}.dashboard{grid-template-columns:repeat(2,1fr)}.stat{padding:10px;min-height:59px}.stat strong{font-size:17px}.boards.dual{grid-template-columns:1fr}.bottom-panel{grid-template-columns:1fr;gap:14px}.action-panel{flex-wrap:wrap}.actions{flex-direction:row;flex-wrap:wrap}.instructions{grid-template-columns:1fr}.pane-heading{padding:8px 12px}.canvas-bottom{font-size:12px}.masthead{margin-bottom:12px}.subhead{font-size:12px}}
@media(max-width:740px){.action-panel{flex-direction:column;align-items:stretch;gap:13px}.action-copy{width:100%;flex:0 0 auto}.actions{width:100%;justify-content:flex-end}.actions button{flex:1;min-width:135px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* v0.2.3：手機正文字級與按鈕的可讀性 */
@media(max-width:740px){
 .eyebrow{font-size:13px;letter-spacing:.04em}
 .stat span{font-size:14px}.stat strong{font-size:20px}
 .pane-heading{font-size:16px}.pane-heading span{font-size:14px}
 .scene-help,.canvas-bottom{font-size:15px;line-height:1.5}
 .action-copy strong{font-size:17px}.action-copy span,.action-copy .credit{font-size:15px}
 .meter-line small{font-size:13px}.meter-line strong{font-size:17px}
 .instructions strong{font-size:15px}.instructions p{font-size:15px;line-height:1.7}
 .disclaimer{font-size:13px}.modal-body{font-size:16px}.dialog h2{font-size:24px}
 .primary,.minor{font-size:16px;min-height:48px}
}

/* 地面多路線派車：手機可直接觸控，寬度不擠成直欄 */
.actions{flex-wrap:wrap;align-items:stretch;justify-content:flex-end}
.actions button{min-width:120px;flex:1 1 120px}
@media(max-width:740px){.actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.actions button{min-width:0;padding:12px 7px;min-height:50px;font-size:15px}.game-pane canvas{min-height:250px}.pane-heading strong{font-size:16px}}
/* 控制面板改兩欄方格，避免 flex-basis 把桌面整片撐高 */
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;width:min(100%,296px);align-content:start;flex:none}
.actions button{min-width:0;min-height:47px;flex:none;padding:10px 7px;font-size:14px}
@media(max-width:740px){.bottom-panel{display:flex;flex-direction:column}.bottom-panel .action-panel{order:-1}.actions{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.actions button{min-height:52px;font-size:16px}.game-pane canvas{min-height:250px}}

/* v0.2.5：道路壅塞以高對比警告表示，按鈕仍可點選並得到原因提示。 */
.actions button.jammed:not(:disabled){background:#6b2530;color:#fff3f0;border:2px solid #ff7776;box-shadow:0 0 0 1px #ff777640,inset 0 0 18px #ff484833;animation:jam-pulse 1.45s ease-in-out infinite}
@keyframes jam-pulse{50%{box-shadow:0 0 0 4px #ff777633,inset 0 0 20px #ff484855}}
.share-tools{margin:16px 0 12px;display:grid;gap:10px;border-top:1px solid #436073;padding-top:15px}
.share-tools label{font-size:14px;color:#e2edf3}
.share-tools input[type=text]{width:100%;min-height:42px;margin-top:6px;border:1px solid #56839c;border-radius:9px;background:#0e293b;color:#fff;padding:9px 12px;font:inherit;font-size:16px}
.share-tools .share-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.share-tools .share-actions button{min-height:48px;font-size:14px}
.share-note{font-size:12px;color:#bad2db}
@media(max-width:740px){.share-tools .share-actions button{font-size:15px}.share-tools label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.actions button.jammed{animation:none!important}}

.actions button.headway-wait:not(:disabled){background:#5d4528;color:#fff1d5;border:1px solid #e9b26a;box-shadow:inset 0 0 12px #ffcd8a22}

/* v0.2.7 — stage gameplay is one viewport; narrative stays available outside active play. */
body.is-playing{overflow:hidden}
body.is-playing .app{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;padding:5px max(6px,env(safe-area-inset-right)) 5px max(6px,env(safe-area-inset-left));overflow:hidden}
body.is-playing .masthead{margin:0 0 4px;min-height:34px;gap:8px;flex:none}
body.is-playing .masthead .eyebrow,body.is-playing .subhead,body.is-playing .plane-word{display:none}
body.is-playing h1{font-size:18px;white-space:nowrap}
body.is-playing #pauseBtn{min-height:36px;padding:5px 16px;font-size:15px;flex:none}
body.is-playing main{display:flex;flex:1;min-height:0;flex-direction:column;position:relative}
body.is-playing .dashboard{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:5px}
body.is-playing .stat{min-height:39px;padding:3px 7px;border-radius:6px}
body.is-playing .stat span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
body.is-playing .stat strong{font-size:16px;line-height:1.2}
body.is-playing .boards{flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;gap:6px}
body.is-playing .boards.dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
body.is-playing .game-pane{min-width:0;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;border-radius:9px}
body.is-playing .pane-heading{width:100%;flex:none;min-height:25px;padding:4px 10px}
body.is-playing .game-pane canvas{display:block;align-self:center;flex:none;width:auto;height:auto;max-width:100%;max-height:calc(100% - 26px);aspect-ratio:620 / 400;min-height:0;object-fit:contain}
body.is-playing .scene-help,body.is-playing .instructions,body.is-playing .disclaimer,body.is-playing .system-status,body.is-playing .action-copy{display:none!important}
body.is-playing .canvas-bottom{position:absolute;z-index:3;top:49px;left:50%;transform:translateX(-50%);max-width:min(90%,640px);padding:4px 10px;margin:0;min-height:0;font-size:11px;border-color:#416b7a99;pointer-events:none;opacity:.89;text-align:center}
body.is-playing .bottom-panel{flex:none;display:block;padding:5px 7px;margin-top:5px;min-height:0;gap:0;border-radius:8px}
body.is-playing .action-panel{display:block;width:100%}
body.is-playing .actions{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body.is-playing .actions button{min-width:0;min-height:43px;padding:6px 4px;font-size:14px}
body.is-playing:not(.is-dual) .actions{grid-template-columns:minmax(0,240px);justify-content:center}
body.is-playing .actions button.hidden{display:none!important}
@media(max-width:740px){
 body.is-playing .app{padding:3px 4px calc(4px + env(safe-area-inset-bottom))}
 body.is-playing .masthead{min-height:30px;margin-bottom:2px}
 body.is-playing h1{font-size:16px}
 body.is-playing .dashboard{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:4px;gap:3px}
 body.is-playing .stat{min-height:35px;padding:2px 3px}
 body.is-playing .stat span{font-size:9px}
 body.is-playing .stat strong{font-size:14px}
 body.is-playing .boards.dual{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:3px}
 body.is-playing .game-pane{width:100%}
 body.is-playing .game-pane canvas{max-height:calc(100% - 25px);width:auto;max-width:100%;height:auto;min-height:0;}
 body.is-playing .canvas-bottom{top:42px;font-size:10px;max-width:94%}
 body.is-playing .bottom-panel{padding:4px;margin-top:3px}
 body.is-playing .actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 body.is-playing .actions button{min-height:43px;padding:5px 2px;font-size:13px}
 body.is-playing:not(.is-dual) .actions{grid-template-columns:minmax(0,180px)}
}

/* Compact controls: the cancel command lives beside pause; routes use a full row on desktop. */
.header-controls{display:flex;align-items:center;gap:7px}
body.is-playing .header-controls .minor{font-size:13px;min-height:34px;padding:5px 11px}
body.is-playing .actions{grid-template-columns:repeat(4,minmax(0,1fr))}
body.is-playing .canvas-bottom{top:94px;white-space:normal;box-shadow:0 3px 8px #0007}
body.is-playing .canvas-bottom.quiet{visibility:hidden}
@media(max-width:740px){
 body.is-playing .header-controls .minor{font-size:13px;min-height:30px;padding:3px 9px}
 body.is-playing .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.is-playing .canvas-bottom{top:81px}
 body.is-playing .stat strong{font-size:13px;white-space:nowrap}
 body.is-playing .stat span{font-size:9px;white-space:nowrap}
}

/* v0.2.8: ground map replaces route shortcut buttons; first-time story remains hidden. */
body:not(.story-revealed) .post-reveal{display:none!important}
.ground-shortcut{display:none!important}
body.is-playing.is-dual .bottom-panel{display:none}
.game-pane{position:relative}
.ai-nudge{position:absolute;pointer-events:none;z-index:2;left:10px;bottom:11px;max-width:80%;background:#183D49EE;border:1px solid #D0D588;color:#FDF4C5;border-radius:10px;padding:8px 13px;box-shadow:0 0 15px #FFC36A44;font-size:14px;font-weight:650;line-height:1.45;animation:nudge-glow 1.3s ease-in-out infinite alternate}
@keyframes nudge-glow{from{box-shadow:0 0 5px #FFC36A22}to{box-shadow:0 0 16px #FFC36A66}}
@media(max-width:740px){.ai-nudge{left:5px;bottom:6px;padding:5px 8px;font-size:11px;max-width:92%}}
@media(prefers-reduced-motion:reduce){.ai-nudge{animation:none}}

/* v0.2.9: unobstructed feedback, explicit transit color, visible share controls */
body.is-playing .canvas-bottom{position:relative!important;top:auto!important;left:auto!important;transform:none!important;margin:3px auto 0;padding:3px 9px;width:100%;max-width:100%;font-size:12px;line-height:1.3;pointer-events:none;box-shadow:none;border-radius:6px}
body.is-playing .canvas-bottom.notice-danger{background:#662733;color:#ffe7dc;border-color:#e69a87;font-weight:700}
@media(max-width:740px){body.is-playing .canvas-bottom{font-size:11px;line-height:1.2;max-height:37px;overflow:hidden}}
.dialog{display:flex;flex-direction:column;overflow:hidden}
.dialog .modal-body{flex:1 1 auto;min-height:0;overflow:auto}
#resultShare:not(.hidden){flex:none;display:block;max-height:42vh;overflow:auto;border-top:1px solid #4e7489;margin-top:7px}
#resultShare .share-tools{margin:0;padding:9px 0 0;border-top:0;gap:7px}
#resultShare .share-tools label{font-size:12px}
#resultShare .share-tools input[type=text]{min-height:35px;margin-top:3px}
#resultShare .share-actions button{min-height:42px}
#resultShare .share-note{font-size:11px;margin:0}
.dialog #modalBtn{margin-top:8px;flex:none}