:root{color-scheme:dark;--night:#142328;--gold:#f0c47b;--cream:#faf0db;--muted:#bdcfc8;--aqua:#86c5c1;--line:#6e8b824f;font-family:Inter,system-ui,sans-serif;background:#0d191d;color:var(--cream)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ffdc99;outline-offset:4px}[hidden]{display:none!important}
.mast{display:flex;align-items:center;gap:1rem;height:56px;padding:0 clamp(.75rem,3vw,2.4rem);border-bottom:1px solid var(--line);background:#111e23}.brand{display:flex;gap:.55rem;align-items:center;font-size:1.27rem;font-weight:850;letter-spacing:-.06em}.back{margin-left:auto;color:var(--muted);font-size:.85rem}.mast-tag{color:var(--gold);letter-spacing:.14em;font:750 .62rem ui-monospace,monospace;border-left:1px solid var(--line);padding-left:.85rem}.main{max-width:1720px;margin:auto;padding:clamp(.6rem,1.45vw,1.4rem)}
.play-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,282px);gap:.85rem;align-items:stretch}.stage{min-width:0;position:relative;height:clamp(545px,calc(100svh - 84px),950px);overflow:hidden;isolation:isolate;border:1px solid #809d8a66;border-radius:15px;background:#384744}.scene,.scene canvas,.lens,.cover,.play-hud{position:absolute;inset:0;width:100%;height:100%}.scene canvas{display:block;touch-action:none;outline:none}.lens{pointer-events:none;background:linear-gradient(0deg,#0c171c9c,transparent 23%,transparent 88%,#1526252e);z-index:1}.cover{display:grid;align-items:center;z-index:5;pointer-events:none;background:linear-gradient(90deg,#101f23ef 0%,#142229c9 28%,#16242628 68%,#18272b25)}.title-lockup{max-width:520px;padding:clamp(1.1rem,4vw,4.8rem);padding-right:1.2rem;pointer-events:auto}.eyebrow{display:flex;gap:.55rem;align-items:center;letter-spacing:.15em;font:750 .7rem/1.25 ui-monospace,monospace;color:var(--gold);margin:0}.eyebrow span{width:7px;height:7px;transform:rotate(45deg);border-radius:1px;background:#f2bd68;box-shadow:0 0 14px #ffc77b99}.title-lockup h1{font:850 clamp(3.4rem,6.7vw,7.4rem)/.84 Georgia,serif;letter-spacing:-.064em;margin:1rem 0 1.25rem;text-shadow:0 3px 26px #070f14af}.title-lockup h1 em{color:var(--gold);font-weight:600}.title-lockup>p:not(.load-status){font-size:clamp(.92rem,1.6vw,1.13rem);line-height:1.55;color:#e0e9df;max-width:25rem;margin:0 0 1.35rem}.load-status{font-size:.74rem;color:#b9cec6;margin:.6rem 0 0}.load-status:empty,.notice:empty{display:none}.chapter-stamp{position:absolute;bottom:1.2rem;right:1.25rem;font:850 2.2rem Georgia,serif;color:#f0c47b;text-shadow:0 2px 15px #101e22}.chapter-stamp small{font:700 .67rem ui-monospace,monospace;letter-spacing:.11em;margin-left:.3rem;color:#f5e2c1}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;cursor:pointer;border:1px solid #c9d9c266;border-radius:8px;padding:.6rem .86rem;font-weight:760;line-height:1.1;color:var(--cream);background:#243638}.button:disabled{opacity:.55;cursor:default}.button:not(:disabled):hover{filter:brightness(1.14)}.main-button{background:#efc477;color:#231e14;border-color:#ffdf9d}.main-button kbd{background:#4f361922;color:#352518;border-color:#5039164c}.dark{background:#142a2eeb}.text-button{min-height:36px;background:transparent;color:#d2e5da;font-size:.77rem}.play-hud{pointer-events:none;z-index:3}.scene-chips{position:absolute;top:.8rem;left:.85rem;display:flex;gap:.42rem}.chip{display:block;background:#12272bea;border:1px solid #a0bdb65e;border-radius:7px;padding:.5rem .57rem;color:#e4f0df;font:730 .64rem/1 ui-monospace,monospace;letter-spacing:.06em}.notice{position:absolute;left:50%;bottom:4.8rem;transform:translateX(-50%);margin:0;padding:.48rem .68rem;border:1px solid #c6b3877e;background:#102327ef;border-radius:8px;color:#ffe3a6;text-align:center;font-size:.83rem;width:max-content;max-width:90%}.action-bar{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.5rem;pointer-events:auto}.waypoint{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-110%);display:grid;justify-items:center;gap:.27rem;width:max-content;max-width:185px}.waypoint i{order:2;width:8px;height:8px;transform:rotate(45deg);background:#ffd57e;box-shadow:0 0 14px #ffcc70}.waypoint span{padding:.34rem .55rem;background:#1b2827e8;border:1px solid #f2c478b3;border-radius:5px;font-size:.69rem;font-weight:750;color:#ffe6af;text-align:center}
.dispatch{min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:1rem;border:1px solid var(--line);background:radial-gradient(ellipse at 110% 0,#284144,#142428 64%);border-radius:15px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.3rem}.panel-head b{font:750 .68rem ui-monospace,monospace;color:#bfd3ca;white-space:nowrap}.dispatch h2{font:750 1.6rem/1.02 Georgia,serif;margin:.75rem 0 .5rem}.dispatch>p{font-size:.85rem;line-height:1.48;color:var(--muted);margin:0 0 .9rem;min-height:3.1rem}.chart-block{background:#152a2d;border:1px solid #76988e54;border-radius:10px;padding:.47rem;margin:.2rem 0 .8rem}.chart-label,.chart-key,.tide-block>div{display:flex;justify-content:space-between;gap:.5rem;font:750 .66rem ui-monospace,monospace;color:#c7d8ce}.chart-label{margin:.18rem .15rem .4rem}.chart-block canvas{display:block;width:100%;height:auto;border-radius:5px}.chart-key{justify-content:flex-start;gap:.9rem;margin:.48rem .12rem .1rem}.chart-key span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:.34rem}.player-dot::before{background:#aef5ed}.target-dot::before{background:#ffd984}.tide-block{margin:.3rem 0 .7rem}.tide-block output{color:#ffe3ae}meter{display:block;width:100%;height:10px;appearance:none;margin:.36rem 0 0}meter::-webkit-meter-bar{background:#122025;border-color:#9bb1a07a;border-radius:8px}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#54878a,#a2d7c7);border-radius:8px}.dispatch>.controls{font-size:.72rem;margin:.15rem 0 .4rem;min-height:0}.dispatch>.text-button{align-self:flex-start;margin-top:.3rem}kbd{display:inline-block;padding:.15rem .3rem;border:1px solid #c1d3c455;border-radius:4px;background:#213739;color:#e9f2e4;font:.68rem ui-monospace,monospace}.touch-pad{display:none}
dialog{width:min(92vw,540px);max-height:90svh;overflow:auto;color:var(--cream);background:#1c3438;border:1px solid #89aaa2;border-radius:14px;padding:1.1rem}dialog::backdrop{background:#0c151bd8}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}dialog h2{font:750 1.85rem Georgia,serif;margin:.7rem 0}dialog p{color:#c5d9ce}.route-choices{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.route-choice{cursor:pointer;text-align:left;color:#fff3db;background:#28494a;padding:.75rem;border:1px solid #91b8aa;border-radius:8px}.route-choice:hover{background:#396060}.route-choice span{display:block;color:#d7e3d9;font-size:.82rem;line-height:1.35;margin-top:.42rem}#chapter-list{padding-left:1.45rem;color:#afc3bb;line-height:1.85}#chapter-list [aria-current]{color:#ffdf9a;font-weight:760}#chapter-list .done{color:#ccecd5}
@media(pointer:coarse){.touch-pad{position:absolute;pointer-events:auto;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:3px;bottom:.7rem;left:.65rem;touch-action:none}.touch-pad button{border:1px solid #a1bdad95;border-radius:8px;color:#e9f6ec;background:#1b3539e8;font-size:1.15rem;touch-action:none}.touch-pad [data-move="forward"]{grid-column:2}.touch-pad [data-move="left"]{grid-row:2;grid-column:1}.touch-pad [data-move="back"]{grid-row:2;grid-column:2}.touch-pad [data-move="right"]{grid-row:2;grid-column:3}.controls,.action-bar kbd{display:none}}
@media(max-width:860px){.play-area{grid-template-columns:minmax(0,1fr) minmax(203px,225px)}.dispatch{padding:.75rem}.panel-head .eyebrow{font-size:.61rem}.dispatch h2{font-size:1.32rem}}
@media(max-width:690px){.main{padding:.45rem}.mast{height:46px}.mast-tag{display:none}.play-area{grid-template-columns:minmax(0,1fr);gap:.45rem}.stage{height:clamp(340px,62svh,620px);border-radius:10px}.title-lockup h1{font-size:clamp(3rem,11vw,4.7rem)}.dispatch{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,.64fr);column-gap:.65rem;align-items:start;border-radius:10px}.panel-head,.dispatch h2,.dispatch>p,.tide-block,.dispatch>.text-button{grid-column:1}.chart-block{grid-column:2;grid-row:1/span 5;margin:0}.dispatch h2{margin:.36rem 0}.dispatch>p{font-size:.74rem;margin:0;min-height:0}.tide-block{margin:.46rem 0}.dispatch>.text-button{justify-self:start;margin:0}.chart-key{gap:.45rem;font-size:.55rem}.chart-label{font-size:.54rem}.chapter-stamp{bottom:.52rem;right:.62rem;font-size:1.5rem}.chapter-stamp small{font-size:.54rem}.action-bar{right:.52rem;bottom:.65rem;flex-direction:column;align-items:flex-end;gap:.31rem}.action-bar .button{font-size:.76rem;min-height:37px;padding:.38rem .48rem}.notice{bottom:6.65rem;font-size:.72rem}.scene-chips{left:.55rem;top:.55rem}.route-choices{grid-template-columns:1fr}}

/* Keep the next task inside the play view on every screen size. */
.mission-guide{position:absolute;top:.8rem;left:.82rem;max-width:min(54%,350px);padding:.6rem .72rem .66rem;border:1px solid #ceaf6b90;border-radius:10px;background:#11282cf2;box-shadow:0 3px 20px #1421246e}
.guide-step{margin:0;color:#f6cf8a;font:780 .66rem/1.2 ui-monospace,monospace;letter-spacing:.1em}
.mission-guide h2{margin:.26rem 0 .22rem;color:#fff0cd;font:800 clamp(1.04rem,2vw,1.4rem)/1.04 Georgia,serif}
.guide-detail,.guide-direction{margin:0;color:#e0ebe1;font-size:.78rem;line-height:1.38}
.guide-direction{margin-top:.25rem;color:#ffda96;font-weight:750}
.guide-ready{border-color:#ffd78d;background:#213331f5}
.guide-complete{border-color:#9ad4a6;background:#1b3b34f5}
.scene-chips{left:auto;right:.8rem;top:.8rem}
.keyboard-help{position:absolute;left:.85rem;bottom:1rem;color:#eff1df;font-size:.72rem;background:#182c30d9;border:1px solid #9abbb053;border-radius:7px;padding:.45rem .55rem}
.waypoint span{white-space:nowrap;background:#182f30f2;border-color:#ffcc74;color:#ffe1a6}
.waypoint-edge span{border-style:dashed}
.action-bar .main-button{box-shadow:0 0 0 2px #f0c47b24,0 8px 26px #10151580;min-height:46px}
.title-lockup .start-help{font-size:.81rem!important;line-height:1.38;max-width:25rem;color:#f6d69c!important;margin-top:-.55rem!important}
.chart-button{margin-top:.28rem;min-height:34px;width:100%;text-align:center;line-height:1.12}
.chart-dialog canvas{display:block;width:100%;height:auto;border:1px solid #96b2a787;border-radius:8px}
@media(pointer:coarse){.keyboard-help{display:none}.touch-pad button{min-height:42px}}
@media(max-width:690px){
  .mission-guide{top:.5rem;left:.5rem;right:.5rem;max-width:none;padding:.49rem .58rem;background:#11282cf1}
  .guide-step{font-size:.56rem}.guide-detail,.guide-direction{font-size:.68rem}
  .scene-chips{top:auto;bottom:4.3rem;right:.5rem}
  .scene-chips .chip{font-size:.55rem;padding:.35rem .39rem}
  .scene-chips #mode-chip{display:none}
  .action-bar .main-button{min-height:44px;max-width:171px;text-align:center;padding:.42rem .6rem}
  .chart-button{font-size:.63rem;padding:.24rem .25rem;min-height:35px}
  .title-lockup .start-help{font-size:.76rem!important}
}
.world-one-link{padding:.38rem .55rem;border:1px solid #b58e54;border-radius:6px;color:#ffda92;font-size:.75rem;font-weight:750;white-space:nowrap}.world-one-link:hover{background:#363f35}@media(max-width:480px){.world-one-link span{display:none}.mast{gap:.55rem}.back{font-size:.73rem}}