:root{--ink:#102c34;--cream:#f1eee2;--accent:#e5c989;color:var(--cream);background:#142c35}button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}
#menu{place-items:center start;padding:3vh 6vw;background:linear-gradient(90deg,rgba(9,29,38,.96),rgba(9,29,38,.8) 45%,rgba(11,36,47,.15));backdrop-filter:blur(2px)}
#menu .card{width:min(620px,90vw);text-align:left;background:none;border:0;box-shadow:none;padding:0;border-radius:0}#menu .eyebrow{font-size:10px;letter-spacing:.2em;color:#bad4d6}.edition{float:right;color:#9caeae}.chapter{color:var(--accent);letter-spacing:.3em;font-size:11px;margin-top:5vh}#menu .logo{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(66px,9vw,120px);line-height:.88;letter-spacing:-.065em;margin:16px 0 24px}#menu .logo em{color:var(--cream)}#menu .intro{font-size:17px;line-height:1.65;margin:0 0 24px;max-width:400px;color:#c6d4d1}.entry{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.primary{background:var(--cream);color:var(--ink);border-radius:3px;padding:16px 22px;font-size:13px}.primary span{margin-left:36px}.entry .small{border:0;background:none;border-bottom:1px solid #708888;border-radius:0;padding:10px 0;color:#d4e0dd}.menu-rule{height:1px;background:#66808666;margin:28px 0 22px}#menu .choices{margin-top:12px;gap:16px}#menu .choice{border-radius:4px;background:#94b9bf0b;padding:16px;border-color:#8db1b133}#menu .choice:hover{background:#94b9bf18;transform:translateY(-2px)}#menu .choice strong{font-family:Georgia,serif;font-size:24px;font-weight:400}.choice-number{float:right;color:var(--accent);font-size:10px}.menu-foot{margin-top:24px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;color:#99b0b0}
.glass{background:linear-gradient(135deg,#102d3be8,#123541cc);border-color:#c6e1df33;border-radius:7px;backdrop-filter:blur(10px);box-shadow:0 8px 24px #05172725}.eyebrow,#score .eyebrow{color:#bdcdbd}#score{width:250px}#score h1{font-family:Georgia,serif;font-size:22px;font-weight:400}.bridge.solid{background:var(--cream);color:var(--ink)}.bridge{border-radius:3px}#centerHud{max-width:320px;min-width:180px}#centerHud .eyebrow{font-size:8px;line-height:1.5}#centerHud strong{font-family:Georgia,serif;font-weight:400;font-size:29px;margin:3px 0}#radarPanel{width:175px}#radar{width:149px;height:108px}#encounter{position:absolute;bottom:115px;left:24px;width:310px;padding:18px 20px;border-left:2px solid var(--accent)}#encounter p{font-size:13px;line-height:1.6;margin:9px 0 0;color:#d4e0dd}#encounter small{display:block;font-size:8px;letter-spacing:.1em;margin-top:12px;color:var(--accent)}#help{border:0;background:#102d3ba8;font-size:10px;padding:10px 14px;max-width:550px}#actions{gap:5px;bottom:22px;right:20px}button.small{border-radius:4px;font-size:11px;padding:10px}#performance{position:absolute;right:23px;bottom:67px;font-size:9px;color:#d7e7e1;letter-spacing:.12em;text-shadow:0 1px 3px black}#toast{bottom:135px;max-width:430px;left:65%;font-size:14px;letter-spacing:.1em}#aim{width:5px;height:5px;opacity:.4}#aim:after{display:none}#loading .card,#outcome .card{background:#102d3bf2;border-radius:8px}#outcome h2{font-family:Georgia,serif;font-weight:400}#outcome .primary{color:var(--ink)}
@media(max-height:760px) and (min-width:851px){#menu .logo{font-size:80px}#menu .chapter{margin-top:20px}#menu .intro{font-size:14px;margin-bottom:16px}.menu-rule{margin:18px 0}.menu-foot{margin-top:14px}#menu .choice{padding:12px}}
@media(max-width:850px){#menu{padding:24px;overflow:auto}#menu .card{width:100%;max-width:600px;margin:auto}#menu .chapter{margin-top:28px}#menu .logo{font-size:72px}#menu .intro{font-size:14px}#encounter{left:12px;bottom:235px;width:235px;padding:12px}#encounter p{font-size:11px}#score{width:200px}#centerHud{min-width:120px}#performance{bottom:56px}#toast{left:50%;bottom:44px}.menu-foot{font-size:8px}#actions{right:10px}#touchBtns{bottom:115px}}
@media(max-width:550px){#menu .logo{font-size:60px}#menu .chapter{margin-top:20px}.menu-rule{margin:18px 0}#menu .choice strong{font-size:20px}.edition{float:none;display:block;margin-top:7px}#score{width:175px}#score h1{font-size:18px}#centerHud{min-width:100px;padding:8px}#actions{top:auto;bottom:10px;flex-direction:row;flex-wrap:wrap;max-width:100%;justify-content:flex-end}#performance{bottom:51px}#encounter{bottom:245px;width:200px}.primary span{margin-left:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}#loading .pulse{animation-duration:3s}}

#duelHUD{position:absolute;top:20px;left:22px;width:min(430px,calc(100vw - 44px));padding:16px 20px;pointer-events:none}#duelHUD[hidden]{display:none}#duelHUD h2{font-size:17px;margin:9px 0}.duel-track{height:9px;background:#132a3a;border-radius:5px;margin:12px 0;overflow:hidden}#duelMeter{height:100%;background:linear-gradient(90deg,#78dbe5,#ffd189,#ff684e);transition:width .08s}#duelTime{font-size:13px;letter-spacing:.08em}#duelHealth{font-size:12px;letter-spacing:.08em;color:#e3f5fc}#duelHint{font-size:12px;line-height:1.5;color:#c4dfed;margin-bottom:0}.duel-mode #score,.duel-mode #centerHud,.duel-mode #encounter,.duel-mode #help{display:none}.duel-mode #toast{bottom:100px}.duel-mode #radarPanel{margin-left:auto}.duel-mode #duelHUD{display:block}@media(max-width:850px){#duelHUD{top:8px;left:8px;width:310px;padding:12px}#duelHUD h2{font-size:14px}#duelHint{font-size:11px}}

.duel-mode #btnSwap{display:none} #duelHUD{max-width:350px} #duelPhase{font-size:14px}

/* Narrow desktop panels still use keyboard; do not obscure the scene with touch pads. */
@media (pointer:fine){#touch{display:none!important}}
/* iPhone: safe-area gutters, simultaneous thumb inputs, scrollable menus. */
html,body{overscroll-behavior:none}body.mobile-play{height:100dvh;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.mobile-play #touch{display:block!important}body.mobile-play #help,body.mobile-play #radarPanel,body.mobile-play #performance{display:none}
#stick span{position:absolute;bottom:-22px;width:100%;text-align:center;font-size:10px;color:white;text-shadow:0 1px 3px #000;pointer-events:none}
body.mobile-play #stick{left:max(18px,env(safe-area-inset-left));bottom:calc(35px + env(safe-area-inset-bottom));width:116px;height:116px}
body.mobile-play #touchBtns{right:max(16px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,64px);gap:9px}
body.mobile-play #touchBtns button{height:58px;border-radius:16px;background:#123b50dd;font-size:11px}body.mobile-play #touchBtns button.held{background:#d3e8dc;color:#153940}
.duel-mode .explore-touch{display:none}body.mobile-play #actions{top:max(8px,env(safe-area-inset-top));bottom:auto;right:max(8px,env(safe-area-inset-right));flex-direction:row;max-width:none}body.mobile-play #actions button{min-height:44px;min-width:44px}body.mobile-play #btnReset,body.mobile-play #btnSwap{display:none}
body.mobile-play #duelHUD{top:calc(58px + env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));width:calc(100vw - 16px);max-width:350px;padding:10px}body.mobile-play #duelHUD h2{font-size:12px;margin:5px 0}body.mobile-play .duel-track{margin:6px 0;height:6px}body.mobile-play #duelHealth{margin:6px 0;font-size:11px}body.mobile-play #duelHint{font-size:10px;margin:4px 0}
body.mobile-play #toast{bottom:calc(190px + env(safe-area-inset-bottom));left:50%;font-size:12px}body.mobile-play #menu,body.mobile-play #outcome{overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}body.mobile-play #menu .card{margin:auto}body.mobile-play .menu-foot{letter-spacing:0;gap:10px}
@media(orientation:landscape) and (max-height:550px){body.mobile-play #duelHUD{top:max(8px,env(safe-area-inset-top));width:310px}body.mobile-play #duelHint{display:none}body.mobile-play #menu .logo{font-size:44px;margin:10px 0}body.mobile-play #menu .chapter{margin-top:10px}body.mobile-play #menu .choices,body.mobile-play .menu-rule{display:none}body.mobile-play #menu .intro{margin-bottom:12px}body.mobile-play #toast{bottom:150px}}
/* Compact status: protect the view of the worksite, especially on phones. */
#duelHUD{width:300px;padding:10px 12px}#duelHUD>.eyebrow{display:none}#duelHUD h2{font-size:12px;margin:0 0 6px}.duel-track{height:5px;margin:6px 0}#duelHealth{font-size:10px;margin:5px 0 0;letter-spacing:0}#duelTime{font-size:10px}#duelHint{font-size:10px;margin:5px 0 0}
body.mobile-play #duelHUD{width:270px;max-width:calc(100vw - 16px);padding:8px 10px;background:#102d3bc9}body.mobile-play #duelHUD h2{font-size:11px;margin:0 0 4px}body.mobile-play .duel-track{height:4px;margin:4px 0}body.mobile-play #duelHealth{font-size:10px;margin:4px 0 0;letter-spacing:0}body.mobile-play #duelTime{font-size:10px}body.mobile-play #duelHint{display:none}
#menu{background:radial-gradient(ellipse at 90% 15%,#32606a70,transparent 55%),linear-gradient(125deg,#081e2af7,#102e3ef0);place-items:center;padding:28px 5vw;overflow:auto}#menu .card{width:min(920px,100%);max-width:920px}#menu .logo{font-size:clamp(46px,6.7vw,84px);line-height:1;margin:16px 0 20px}#menu .chapter{margin-top:22px;font-size:10px;letter-spacing:.15em}#menu .intro{max-width:620px;font-size:15px}.haul-brief{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0 28px}.haul-brief>div{border-top:1px solid #91b8bd55;padding-top:14px}.haul-brief b{font-size:10px;letter-spacing:.1em;color:#e5c989}.haul-brief p{font-size:13px!important;line-height:1.5!important;margin:9px 0 0!important;color:#bdd0d3!important}.start-note{font-size:12px;color:#abc5cb}#menu .menu-foot{line-height:1.5;flex-wrap:wrap;gap:12px}#menu .primary{min-height:52px;background:#e5c989;padding:16px 24px}body.mobile-play #actions{gap:4px}body.mobile-play #actions button{padding:8px;font-size:10px}
@media(max-width:550px){#menu .logo{font-size:48px}#menu .chapter{margin-top:18px}.haul-brief{grid-template-columns:1fr;gap:12px;margin:18px 0}.haul-brief>div{padding-top:10px}.haul-brief p{font-size:12px!important;margin-top:5px!important}#menu .intro{font-size:13px}#menu .menu-foot{font-size:8px}#menu .entry{gap:10px}}
@media(orientation:landscape) and (max-height:550px){body.mobile-play #menu .card{max-width:900px}body.mobile-play #menu .chapter{margin-top:8px}body.mobile-play #menu .logo{font-size:38px;margin:8px 0}body.mobile-play #menu .logo br{display:none}body.mobile-play #menu .intro{font-size:12px;max-width:100%}.haul-brief{gap:16px;margin:12px 0}.haul-brief p{font-size:11px!important}.haul-brief>div{padding-top:8px}body.mobile-play #menu .menu-foot{margin-top:12px}body.mobile-play #menu .primary{padding:10px 20px;min-height:44px}}