:root{color-scheme:dark;--cream:#f4eddc;--gold:#e8c68a;--muted:#b7c4be;--ink:#112c32;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:#173a44;color:var(--cream)}body{overflow:auto}body.flying{overflow:hidden}html{scroll-behavior:smooth}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}[hidden]{display:none!important}#world{display:block;width:100vw;height:100dvh;touch-action:none;position:fixed;inset:0;z-index:0}header{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:30px 3.7vw;pointer-events:none}.brand,nav{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:2px}.brand-mark{font-size:36px;color:var(--gold)}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:7px;opacity:.6}nav{display:flex;gap:12px;align-items:center}nav button{background:#102f354d;backdrop-filter:blur(10px);border:1px solid #e8d7b333;padding:11px 13px;font-size:9px;letter-spacing:1.5px;border-radius:2px}nav button:hover{background:#e8c68a26}#fullscreen,#pause{font-size:20px;padding:5px 12px}.panel{position:fixed;z-index:3;left:7vw;top:24%;width:440px;max-width:80vw}.eyebrow{font-size:9px;letter-spacing:3px;color:var(--gold);display:flex;align-items:center;gap:12px}.eyebrow>span{width:22px;height:1px;background:var(--gold)}h1{font:500 clamp(52px,6.3vw,108px)/.86 Georgia,'Times New Roman',serif;letter-spacing:-3px;margin:28px 0 0;text-shadow:0 3px 35px #071d25aa}h1 em{font-weight:normal;font-style:normal;color:var(--gold)}.title-rule{display:block;width:54px;height:2px;background:var(--gold);margin-top:29px}.intro{font:17px/1.65 Georgia,serif;color:#e0e4d9;margin:20px 0 28px;text-shadow:0 2px 9px #062026}.primary{display:flex;align-items:center;justify-content:space-between;gap:36px;border:1px solid #efd5a4;padding:19px 23px;background:var(--gold);color:#183236;font-weight:700;font-size:11px;letter-spacing:1.5px;min-width:280px;box-shadow:0 5px 36px #091e2430;transition:background .2s,transform .2s}.primary:hover{background:#ffe6b2;transform:translateY(-2px)}.primary b{font-size:21px;font-weight:400}.mission-note{font-size:7px;letter-spacing:1.5px;margin:16px 0 34px;opacity:.75}.mission-note i{font-style:normal;padding:0 8px}.instructions{display:flex;gap:22px;font-size:9px}.instructions div{display:flex;flex-direction:column;gap:8px}.instructions span{color:#d1dad2;font-size:9px}kbd{font:8px Arial;letter-spacing:1.4px;color:var(--cream)}.touch-note{display:none;font-size:11px;line-height:1.7;max-width:240px;color:var(--muted)}#menu-caption{position:fixed;bottom:7vh;right:5vw;text-align:right;text-shadow:0 2px 12px #052734}#menu-caption>span{font:16px Georgia;letter-spacing:3px}#menu-caption p{font-size:8px;letter-spacing:2px;opacity:.65}.small-line{width:30px;height:1px;background:var(--gold);margin:20px 0 16px auto}#menu-caption small{font:12px Georgia;opacity:.7}.film-grain{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 18vw #061e2c55;background:linear-gradient(90deg,#071d2e9c,transparent 58%);transition:background 1s}body.flying #vignette{background:linear-gradient(0deg,#061c3155,transparent 23%,transparent 85%,#061c3133)}#flash{position:fixed;inset:0;background:#ffe6b9;opacity:0;pointer-events:none;z-index:8}.top-hud{position:fixed;top:110px;left:3.7vw;right:3.7vw;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.chapter small{font-size:8px;letter-spacing:2px;color:var(--gold)}.chapter h2{font:22px Georgia;margin:9px 0;text-shadow:0 2px 10px #00222c}.beacon-count{display:flex;align-items:center;gap:8px}.beacon-count>span{font:38px Georgia}.beacon-count small{font-size:8px;letter-spacing:2px;line-height:1.7;color:var(--gold)}.bottom-hud{position:fixed;bottom:45px;left:3.7vw;right:3.7vw;display:flex;justify-content:space-between;align-items:flex-end;gap:35px;pointer-events:none}.instrument{width:150px}.instrument small{font-size:7px;letter-spacing:2px;color:#c1d1ca}#hull{font-size:16px;letter-spacing:7px;color:var(--gold);margin:9px 0 18px}.wind-label{display:block;margin-bottom:9px}.bar{height:3px;background:#ecddba30}.bar span{height:100%;display:block;background:var(--gold);width:100%}.journey{width:30%;max-width:440px}.route{height:1px;background:#dbe9dd44;position:relative}.route>span{position:absolute;height:1px;left:0;top:0;background:#ffe0a2}.route>i{position:absolute;top:-3px;width:7px;height:7px;background:#789590;transform:rotate(45deg)}.route>i.lit{background:#ffe0a2;box-shadow:0 0 9px #ffe0a2}.journey small{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;margin-top:17px;opacity:.7}.speed{text-align:right}.speed strong{font:44px Georgia}.speed span{font-size:8px;letter-spacing:1.5px;margin-left:7px}.speed small{display:block;font-size:8px;letter-spacing:2px;color:var(--gold);margin-top:8px}#flight-hint{position:fixed;bottom:12px;text-align:center;width:100%;font-size:8px;letter-spacing:2px;color:#dbe7dcaa;pointer-events:none}#target{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:#ffe8ad;filter:drop-shadow(0 2px 5px #113432)}.target-bracket{font:40px Georgia;opacity:.7}#target span,#target small{display:block;font-size:8px;letter-spacing:2px;margin-top:5px}#target small{opacity:.7}#message{position:fixed;top:25%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s;max-width:80vw;width:600px;text-shadow:0 2px 14px #061d26}#message.visible{opacity:1}#message small{display:block;font-size:8px;letter-spacing:3px;color:var(--gold);margin-bottom:12px}#message span{font:clamp(18px,2.3vw,30px) Georgia}.overlay{position:fixed;inset:0;background:#07252bbf;backdrop-filter:blur(12px);z-index:20;display:grid;place-items:center;padding:25px;overflow:auto}.modal{width:420px;max-width:100%;padding:30px 20px}.modal h2{font:48px/1.1 Georgia;letter-spacing:-1px;margin:22px 0}.modal p{color:#bccbc3;font-size:13px;line-height:1.8}.modal .control-copy{font-size:11px;line-height:2.2}.modal .primary{width:100%;margin-top:23px}.text-button{display:block;padding:14px 0;background:none;border:0;font-size:10px;letter-spacing:1px;color:#d5d9ca;text-align:center;width:100%}.text-button:hover{color:var(--gold)}.setting{display:flex;gap:10px;font-size:11px;align-items:center;margin:22px 0;color:#d5d9ca}.setting input{accent-color:var(--gold)}#results{display:flex;gap:30px;padding:20px 0;border-top:1px solid #dcc8a133;border-bottom:1px solid #dcc8a133;margin-top:25px}#results strong{font:28px Georgia;color:var(--gold)}#results small{display:block;font:8px Arial;letter-spacing:1px;margin-top:8px}#touch-controls{display:none;position:fixed;bottom:125px;left:25px;right:25px;justify-content:space-between;align-items:center;pointer-events:none}#stick{width:112px;height:112px;border:1px solid #f0dab744;border-radius:100%;position:relative;background:#133d4938;touch-action:none;pointer-events:auto}#stick-knob{width:40px;height:40px;position:absolute;left:35px;top:35px;border:1px solid #f0dab788;background:#f0dab722;border-radius:100%;pointer-events:none}#stick small{position:absolute;bottom:-20px;font-size:7px;letter-spacing:2px;left:38px;color:#dbd9c0}#boost{width:75px;height:75px;border-radius:100%;border:1px solid #f0dab788;background:#173e48aa;font-size:9px;letter-spacing:1px;pointer-events:auto;touch-action:none}#boost span{display:block;font-size:22px;margin-top:3px}#boost.active{background:#d0aa6270}body.calm .film-grain{display:none}@media(pointer:coarse){#touch-controls{display:flex}.instructions{display:none}.touch-note{display:block}}@media(max-width:700px){header{padding:12px 12px;gap:8px;align-items:flex-start}.brand{font-size:8px;letter-spacing:1px;gap:7px;min-width:0}.brand span{display:block}.brand-mark{font-size:26px}nav{gap:4px;flex-wrap:nowrap;justify-content:flex-end;max-width:none}nav button,nav .nav-link{font-size:8px;padding:8px 8px;letter-spacing:.4px;min-height:36px}#fullscreen,#pause{font-size:16px;padding:6px 9px}.panel{left:6vw;top:18%;max-width:88vw}h1{font-size:52px;letter-spacing:-2px}.intro{font-size:16px}.primary{padding:16px 20px;min-width:0;width:100%;font-size:10px}.eyebrow{font-size:7px;letter-spacing:2px}.mission-note{font-size:11px;letter-spacing:.4px;margin:14px 0 18px;line-height:1.8;opacity:.9}.mission-note a,.mission-note button{display:inline-block;padding:8px 0}.instructions{gap:16px}.instructions span{font-size:8px}#menu-caption{display:none}.top-hud{top:85px;left:22px;right:22px}.chapter h2{font-size:17px}.chapter small{font-size:6px}.beacon-count>span{font-size:28px}.beacon-count small{font-size:6px}.bottom-hud{bottom:40px;left:22px;right:22px;gap:16px}.instrument{width:100px}.instrument small{font-size:6px;letter-spacing:1px}#hull{font-size:12px;letter-spacing:4px}.journey{width:26%;position:absolute;left:36%;bottom:0}.journey small{font-size:6px}.journey small span:last-child{display:none}.speed strong{font-size:32px}.speed small{font-size:6px}#flight-hint{font-size:6px;letter-spacing:1px}.modal h2{font-size:40px}.modal{padding:10px}#message{top:22%}.target-bracket{font-size:28px}#target span,#target small{font-size:6px}}
@media(max-height:600px){.panel{top:21%}h1{font-size:58px}.intro{font-size:13px;margin:14px 0}.title-rule{margin-top:15px}.instructions,.mission-note,.touch-note{display:none}.primary{padding:13px 20px}.top-hud{top:78px}.bottom-hud{bottom:30px}#touch-controls{bottom:85px}#stick{width:85px;height:85px}#stick-knob{left:22px;top:22px}#stick small{left:24px}.modal h2{font-size:32px}.modal p{font-size:11px}.modal .control-copy{line-height:1.6}.modal{padding:5px}.modal .primary{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.film-grain{display:none}}

@media(max-height:500px) and (orientation:landscape){#touch-controls{bottom:125px}.chapter h2{font-size:16px}.chapter small{font-size:7px}#message{top:82px;left:60%;width:40%;max-width:390px}#message span{font-size:15px}#message small{font-size:6px;margin-bottom:8px}.instrument{width:105px}#hull{font-size:12px;margin:6px 0 12px}.instrument small{font-size:6px}.brand{font-size:8px}header{padding-top:18px}.speed strong{font-size:30px}}

/* The chart is a separate, scrollable sheet so the original title screen keeps its silhouette. */
#choose-route{border:0;background:none;color:var(--gold);font:inherit;letter-spacing:inherit;padding:10px 0;text-decoration:underline;text-underline-offset:4px}.chart-modal{width:1000px;max-width:100%;margin:auto;padding:30px 0}.chart-modal h2{font:48px Georgia;margin:20px 0}.chart-modal>p{font-size:13px;line-height:1.7;color:var(--muted)}#route-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}.voyage-card{display:flex;flex-direction:column;text-align:left;padding:28px 23px;min-height:275px;border:1px solid #bad3c444;background:linear-gradient(155deg,#45656b77,#0d3039);color:var(--cream);border-radius:3px}.voyage-card.sky-1{background:radial-gradient(ellipse at 75% 0%,#48b98b44,transparent 65%),linear-gradient(145deg,#262c5744,#112537)}.voyage-card.sky-2{background:linear-gradient(145deg,#c39c6655,#3a454b55)}.voyage-card.selected{border-color:var(--gold)}.voyage-card:disabled{opacity:.6;cursor:default}.voyage-card:not(:disabled):hover{border-color:#ffe4ad;background-color:#536e6944}.voyage-card small{font-size:8px;letter-spacing:2px;color:var(--gold)}.voyage-card strong{font:28px/1.15 Georgia;margin:27px 0 15px}.voyage-card>span{font-size:12px;line-height:1.8;color:#d0d9d2;flex:1}.voyage-card em{font-size:8px;font-style:normal;letter-spacing:1px;margin:22px 0 12px;color:var(--gold)}.voyage-card b{font-size:9px;line-height:1.7;font-weight:normal;border-top:1px solid #d6c9a833;padding-top:14px}.chart-modal .medal-guide{font-size:10px}.chart-modal .text-button{width:auto;padding:16px 5px}#wind-indicator{position:fixed;right:3.7vw;top:180px;text-align:right;padding:10px 12px;background:#09273377;border-right:1px solid #e8c68a66;pointer-events:none}#wind-indicator small{display:block;font-size:7px;letter-spacing:2px;color:var(--muted)}#wind-direction{display:block;font-size:13px;letter-spacing:2px;margin-top:7px;color:var(--gold)}#record-summary{font-size:10px;color:var(--gold);line-height:1.7}#next-route{font-size:9px;letter-spacing:1px;margin-top:12px}#route-panel{z-index:30;background:#08232eed}#end-panel .modal{padding-top:10px;padding-bottom:10px}#end-panel .text-button{padding:10px 0}
@media(max-width:700px){#route-cards{grid-template-columns:1fr;gap:12px;margin:20px 0}.chart-modal h2{font-size:34px}.chart-modal{padding:20px 0}.voyage-card{min-height:0;padding:18px}.voyage-card strong{font-size:24px;margin:12px 0 8px}.voyage-card em{margin-top:12px}.voyage-card b{padding-top:10px}#wind-indicator{top:148px;right:22px;padding:7px 10px}#wind-direction{font-size:10px}.mission-note{margin-top:5px}.chart-modal>p{font-size:12px}#end-panel .modal h2{font-size:34px;margin:15px 0}#end-panel .modal .primary{margin-top:12px}#results{margin-top:15px;padding:15px 0}.overlay{place-items:safe center}}
@media(max-height:600px){.mission-note{display:block;margin:0 0 5px}.chart-modal{padding:10px 0}.chart-modal h2{font-size:30px}.voyage-card{min-height:0;padding:16px}.voyage-card strong{font-size:23px;margin:12px 0}.voyage-card em{margin-top:12px}.modal{margin:auto}#wind-indicator{top:125px}}
/* Bound the grid item itself: intrinsic card text must not widen a phone overlay. */
.chart-modal{min-width:0;max-width:min(100%,calc(100vw - 50px))}#route-cards{min-width:0;grid-template-columns:repeat(3,minmax(0,1fr))}.voyage-card{min-width:0;white-space:normal}.chart-modal p{white-space:normal;overflow-wrap:break-word}@media(max-width:700px){#route-cards{grid-template-columns:minmax(0,1fr)}}
#route-panel{grid-template-columns:minmax(0,1fr);align-items:safe center}

#danger{position:absolute;top:125px;left:50%;transform:translateX(-50%);padding:10px 16px;background:#54261ee8;color:#ffd5a6;border:1px solid #e59b6a;border-radius:4px;font-size:11px;letter-spacing:1px;text-align:center;max-width:85vw;width:max-content}#danger[hidden]{display:none}

/* Combat controls stay above the existing boost and steering pads. */
#combat-status{position:fixed;top:180px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:1px;color:#ffce9a;background:#392724d9;padding:9px 14px;border:1px solid #bb775a80;pointer-events:none;white-space:nowrap}
#combat-controls{position:fixed;right:4vw;bottom:265px;display:flex;gap:8px;pointer-events:auto}#combat-controls[hidden],#combat-status[hidden]{display:none}#combat-controls button{border:1px solid #ecd39988;background:#17343be8;color:#fff1cf;border-radius:6px;padding:16px 18px;font:600 11px sans-serif;min-height:48px;touch-action:none}#combat-controls button:first-child{background:#743d2fe8}#combat-controls button:disabled{opacity:.5}
@media(max-width:700px){#combat-controls{right:16px;bottom:285px;gap:6px}#combat-controls button{padding:13px 10px;font-size:10px}#combat-status{top:158px;font-size:8px;padding:8px;max-width:94vw;letter-spacing:.4px}}
@media(max-height:500px) and (orientation:landscape){#combat-controls{right:20px;bottom:200px}#combat-controls button{padding:9px 12px;min-height:40px}#combat-status{top:72px;font-size:8px}}

.guide{position:relative;z-index:4;margin-top:100dvh;background:linear-gradient(180deg,#102d34,#1b3f46);color:var(--cream);padding:72px 7vw 90px}
.guide-inner{max-width:820px}
.guide h2{font:36px/1.15 Georgia,serif;margin:36px 0 14px;color:var(--gold)}
.guide h2:first-child{margin-top:0}
.guide h3{font:22px Georgia,serif;margin:0 0 8px}
.guide p{font-size:15px;line-height:1.8;color:#d5e0da;margin:0 0 16px}
.guide table{width:100%;border-collapse:collapse;margin:18px 0 24px;background:#0d2a31aa}
.guide th,.guide td{text-align:left;padding:10px 12px;border-bottom:1px solid #dcc8a122}
.guide th{color:var(--gold);font-size:11px;letter-spacing:1px}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0 28px}
.guide-grid article{background:#0d2a3188;border:1px solid #dcc8a133;padding:18px}
.guide details{background:#0d2a3188;border:1px solid #dcc8a133;padding:12px 16px;margin-bottom:8px}
.guide summary{cursor:pointer;color:var(--gold)}
.guide-back{margin-top:28px}
.guide-back a{color:var(--gold);letter-spacing:1px;font-size:12px}
body.flying .guide{display:none}
@media(max-width:700px){.guide{padding:88px 6vw 48px}.guide h2{font-size:28px;line-height:1.2}.guide p{font-size:15px}.guide table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.guide th,.guide td{padding:10px 8px;font-size:13px;white-space:nowrap}.guide-grid{grid-template-columns:1fr}.guide-back{display:flex;flex-direction:column;gap:10px}.guide-back a{display:inline-block;padding:10px 0;font-size:14px}.site-links{padding-bottom:24px}.site-links a{display:inline-block;padding:8px 0;font-size:15px}}

nav .nav-link{background:#102f354d;backdrop-filter:blur(10px);border:1px solid #e8d7b333;padding:11px 13px;font-size:9px;letter-spacing:1.5px;border-radius:2px}
nav .nav-link:hover{background:#e8c68a26;color:var(--gold)}
.site-links{margin-top:48px;padding-top:28px;border-top:1px solid #dcc8a133}
.site-links-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.site-links h2{font:18px Georgia,serif;color:var(--gold);margin:0 0 12px}
.site-links ul{list-style:none;margin:0;padding:0}
.site-links li{margin:0 0 8px}
.site-links a{color:#d5e0da;font-size:14px}
.site-links a:hover{color:var(--gold)}
body.flying header .nav-link{display:none}
@media(max-width:700px){nav .nav-link{font-size:7px;padding:9px 7px;letter-spacing:.5px}}

@media(max-width:700px){#world{height:100svh}.guide{margin-top:100svh}nav .nav-link{min-height:36px}body.flying .panel,body.flying .guide{display:none}.touch-note{max-width:none;margin-top:8px}}
@media(max-width:700px){nav .nav-link[href="../"]{display:none}.guide{scroll-margin-top:72px}}