:root{color-scheme:dark;--bg:#071423;--panel:#0c1d30;--panel2:#112840;--line:#24415c;--amber:#ff8a1a;--blue:#258bff;--cyan:#8bceff;--ink:#edf5fc;--dim:#9bb4ca;--hazard:#ff7664;--good:#8bceff;--r-uncommon:#8bceff;--r-rare:#429fff;--r-legendary:#ffaf55;--display:'Barlow Condensed',Impact,sans-serif;--mono:'JetBrains Mono',Consolas,monospace}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:18px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Barlow,Arial,sans-serif;-webkit-text-size-adjust:100%}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed}
a{color:var(--cyan)}
button:focus-visible,a:focus-visible,input:focus-visible,main:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
button,a{transition:background .18s,border-color .18s,color .18s}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display)}
.wrap{max-width:1440px;margin:auto;padding:0 34px 80px}
.skip{position:fixed;left:20px;top:-80px;z-index:100;padding:14px;background:var(--amber);color:var(--bg)}
.skip:focus{top:12px}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}

/* The arcade header. */
.topbar{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:800 19px var(--display);letter-spacing:1.5px}
.brand small{display:block;color:var(--dim);font:9px var(--mono);letter-spacing:1px;margin-top:4px}
.brand-mark{position:relative;background:var(--amber);color:var(--bg);width:37px;height:37px;display:grid;place-items:center;font:900 32px var(--display);transform:skew(-7deg)}
.brand-mark span{font-size:16px;position:absolute;right:-6px;bottom:-6px;color:var(--blue)}
.hud{display:flex;align-items:center;gap:22px}
.stat .k{display:block;color:var(--dim);font:9px var(--mono);letter-spacing:1px}
.stat .v{font:700 23px var(--display);color:var(--amber)}
.lvlbox{min-width:102px}
.lvlbox .v{color:var(--cyan);font-size:19px}
#xpTxt{font-size:8px;margin-left:6px}
.bar{height:4px;border-radius:2px;background:#1b344b;overflow:hidden}
.bar>i{display:block;width:0;height:100%;background:var(--blue);transition:width .2s}
.lvlbox .bar{margin-top:3px}
#who{padding:2px 0;border:0;background:none;font-weight:600;font-size:13px}
.wbtn,.mini{border:1px solid var(--line);background:var(--panel);border-radius:5px;min-height:36px;padding:8px 12px;font:600 10px var(--mono);letter-spacing:.5px;text-decoration:none}
.wbtn:hover,.mini:hover{border-color:var(--blue);color:var(--cyan)}
.tag,.small-tag{font:9px var(--mono);letter-spacing:.5px;color:var(--cyan);border:1px solid #315a7c;padding:6px 8px;border-radius:3px}
.tag{white-space:nowrap}

/* Key art frames the actual convoy game. */
.hero{position:relative;isolation:isolate;height:310px;overflow:hidden;border-radius:10px;border:1px solid #294563;background:#0a1e32}
.hero-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 54%}
.hero:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,18,31,.93),rgba(5,18,31,.66) 30%,transparent 62%)}
.hero-copy{padding:29px 34px}
.eyebrow{font:600 10px var(--mono);letter-spacing:2px;color:var(--cyan)}
.hero h1{font-size:clamp(40px,4.5vw,63px);font-weight:800;letter-spacing:.5px;line-height:.96;margin:11px 0 12px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.4;color:#c6d8e8}
.hero-actions{display:flex;gap:20px;align-items:center;margin-top:20px}
.hero-play{display:flex;align-items:center;gap:20px;background:var(--amber);color:#171609;padding:12px 16px;border-radius:4px;text-decoration:none;font:700 10px var(--mono)}
.hero-play:hover{background:#ffac54}
.text-btn{border:0;background:none;font-size:12px;padding:8px 0;color:#d0e1ef}
.text-btn span{display:inline-grid;place-items:center;margin-left:6px;border:1px solid #a1bad2;border-radius:50%;width:17px;height:17px;font:10px var(--mono)}
.hero-stamp{position:absolute;bottom:23px;right:26px;text-align:right;text-shadow:0 2px 14px #071423}
.hero-stamp strong{display:block;font:800 36px var(--display);letter-spacing:3px}
.hero-stamp span{font:8px var(--mono);letter-spacing:3px;color:var(--cyan)}

/* Map and mission briefing. */
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:29px 0 17px}
.section-heading h2{font-size:30px;letter-spacing:.4px;margin-top:4px}
.section-heading .eyebrow{font-size:8px;color:var(--dim)}
.connection{font:9px var(--mono);color:var(--dim);display:flex;align-items:center;gap:7px}
.connection:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber)}
.connection.ready:before{background:var(--blue)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:20px;align-items:start}
.map-column,.console{min-width:0}
.stage{position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#071423}
.map-top{display:flex;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:1;padding:17px 20px;font:9px var(--mono);letter-spacing:1.3px;pointer-events:none}
.map-top span:last-child{color:var(--cyan);font-size:8px}
#map{display:block;width:100%;height:470px;touch-action:manipulation}
.map-legend{position:absolute;bottom:16px;left:20px;right:20px;display:flex;gap:16px;font:8px var(--mono);color:var(--dim);pointer-events:none}
.map-legend span:last-child{margin-left:auto;font-size:7px}
.map-legend i{display:inline-block;width:6px;height:6px;background:var(--amber);margin-right:5px}
.map-legend span:nth-child(2) i{background:var(--blue)}
.route-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:17px 0 10px}
.route-heading h3{font:600 9px var(--mono);letter-spacing:1px}
.route-heading>span{font-size:11px;color:var(--dim)}
.sector-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.sector-btn{text-align:left;min-height:64px;padding:11px 12px;background:var(--panel);border:1px solid var(--line);border-radius:5px}
.sector-btn b{display:block;font:700 16px var(--display);letter-spacing:.6px}
.sector-btn span{display:block;font:8px var(--mono);color:var(--dim);margin-top:5px}
.sector-btn:hover{background:#17324d;border-color:var(--cyan)}
.sector-btn.on{background:#172c40;border-color:var(--amber);box-shadow:inset 3px 0 var(--amber)}
.sector-btn.on b{color:var(--amber)}
.sector-btn.locked b{color:var(--dim)}
.next-unlock{margin-top:12px;padding:12px 14px;border-left:2px solid var(--blue);background:#0c1e32;display:flex;gap:12px;align-items:center;color:var(--dim);font-size:12px}
.next-unlock b{color:var(--ink)}
.unlock-icon{font:700 23px var(--display);color:var(--blue)}
.launch,.side,.active-brief{border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}
.launch{padding:18px}
.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:8px}
.panel-heading .eyebrow{font-size:9px;letter-spacing:1px}
.small-tag{font-size:7px;padding:4px 5px}
.rig-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rig-heading h3{font-size:21px;font-weight:600}
.rig-heading span{font:7px var(--mono);color:var(--dim)}
.rigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:20px}
.rig{min-width:0;text-align:left;padding:10px 7px;background:#0a192a;border:1px solid var(--line);border-radius:5px}
.rig b{display:block;font:700 15px var(--display);letter-spacing:.5px}
.rig i,.rig u{display:block;font:8px var(--mono);font-style:normal;text-decoration:none;color:var(--dim);margin-top:5px}
.rig i{color:var(--amber)}
.rig.on{border-color:var(--amber);background:#2a2a2b}
.rig.locked{opacity:.55}
.rig svg{width:34px;height:22px;display:block;color:var(--cyan);margin-bottom:8px}
.rig.on svg{color:var(--amber)}
.target{border-top:1px solid var(--line);padding-top:17px}
.target-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tname{font:700 28px var(--display);letter-spacing:.6px;color:var(--ink)}
.risk-label{font:7px var(--mono);border:1px solid var(--line);padding:5px 6px;white-space:nowrap}
.tlore{font-size:12px;color:var(--dim);line-height:1.5;margin:6px 0 15px;min-height:36px}
.tstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:17px}
.tstats span{font:7px var(--mono);color:var(--dim);letter-spacing:.5px}
.tstats b{display:block;color:var(--ink);font:600 24px var(--display);margin-top:4px}
.tstats b.risk{color:var(--amber)}
button.go,#extractBtn{width:100%;min-height:46px;border:0;border-radius:5px;background:var(--amber);color:#1c180e;font:700 12px var(--mono);letter-spacing:.3px;padding:13px 8px;box-shadow:0 3px 0 #914600}
button.go:hover,#extractBtn:hover{background:#ffa84a}
button.go:active,#extractBtn:active{transform:translateY(1px)}
button.go:disabled,#extractBtn:disabled{background:#193249;color:var(--dim);box-shadow:none;border:1px solid var(--line)}
.hint{font-size:12px;color:var(--dim);line-height:1.6;margin-top:9px}
.hint.ok{color:var(--cyan)}
.hint.bad,.bad{color:var(--hazard)}
.launch .hint{text-align:center;font-size:11px}

/* Gear, marketplace and activity. */
.side{margin-top:16px}
#sideNav{display:flex;border-bottom:1px solid var(--line);padding:0 8px}
#sideNav button{min-width:0;flex:1;border:0;border-bottom:2px solid transparent;background:none;color:var(--dim);font:600 9px var(--mono);padding:15px 3px}
#sideNav button.on{border-color:var(--blue);color:var(--cyan)}
.pane{display:none;padding:15px;max-height:440px;overflow:auto}
.pane.on{display:block}
.sec{font:600 9px var(--mono);letter-spacing:1.1px;color:var(--dim);margin:0 0 9px}
.pane>.sec:not(:first-child){margin-top:19px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #203a51;padding:10px 0}
.row .meta{min-width:0;font-size:12px;line-height:1.6}
.sub{font-size:10px;color:var(--dim)}
.mini{font-size:8px;padding:8px;white-space:nowrap}
.mini.go{color:var(--cyan)}
.rar{font:7px var(--mono);margin-left:4px}
.rar.uncommon{color:var(--r-uncommon)}
.rar.rare{color:var(--r-rare)}
.rar.legendary{color:var(--r-legendary)}
.crate{display:grid;grid-template-columns:94px 1fr;gap:10px;align-items:center;margin-bottom:18px}
.crate img{width:94px;height:94px;object-fit:cover;border-radius:8px}
.crate h3{font-size:23px;font-weight:600}
.crate p{color:var(--dim);font-size:12px;line-height:1.5;margin-top:5px}
.crate button.go{grid-column:1/-1;background:#17314b;color:var(--cyan);border:1px solid #335b7e;box-shadow:none;font-size:10px;min-height:39px}
.crate button:hover{background:#204564}
.field-label{display:block;font-size:11px;color:var(--dim);margin-bottom:6px}
.inline{display:flex;gap:8px}
input{min-width:0;width:100%;padding:10px;background:#071423;border:1px solid var(--line);color:var(--ink);border-radius:5px}
.gold{font:700 20px var(--display);color:var(--amber)}
b.go,.go,.ok,.ward{color:var(--cyan)}
.warn{color:var(--amber)}
.logbox{margin-top:23px;padding:18px;border-top:1px solid var(--line)}
#log,#feed{max-height:170px;overflow:auto}
.lg{font-size:12px;line-height:1.75;color:var(--dim);padding:6px 0;border-bottom:1px solid #1c3349}
.lg b{color:var(--ink)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;color:var(--dim);font:8px var(--mono)}
footer b{color:var(--amber);margin:0 5px}
footer a{text-decoration:none}

/* Live expedition: the decisions stay next to the convoy. */
.runhud{display:none;position:absolute;bottom:0;left:0;right:0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(7,20,35,.98) 19%);gap:9px;flex-direction:column}
body.running .runhud{display:flex}
body.running .map-legend,body.running .launch{display:none}
body.running #map{height:530px}
body.running .sector-list{opacity:.6}
.active-brief{display:none;padding:22px}
body.running .active-brief{display:block}
.active-brief h3{font-size:34px;margin:10px 0}
.active-brief p{font-size:14px;line-height:1.6;color:var(--dim)}
.active-brief>span:last-child{font:9px var(--mono);display:block;margin-top:15px;color:var(--cyan)}
.runtop{display:flex;align-items:end;justify-content:space-between}
.haul{font:700 42px var(--display);color:var(--amber);line-height:1}
.haul small{display:block;font:8px var(--mono);letter-spacing:1.5px;color:var(--dim);margin-bottom:7px}
.haul .haul-unit{font:9px var(--mono);color:var(--dim)}
.run-modifiers{text-align:right}
.mult{font:700 25px var(--display);color:var(--cyan)}
.wards{font:8px var(--mono);margin-top:4px;color:var(--dim)}
.wards.has{color:var(--cyan)}
#hudWarn{font:10px var(--mono);min-height:16px}
#hudWarn.hot{color:var(--hazard)}
#hudWarn.calm{color:var(--cyan)}
.depth{display:flex;align-items:center;gap:10px}
.depth .bar{flex:1}
.depth .bar>i{background:var(--amber)}
.depth>span{font:8px var(--mono);color:var(--dim)}
.hazard-track{display:flex;gap:5px;min-height:21px}
.hazard-pip{flex:1;padding:5px 4px;background:#16334d;border:1px solid #2d526f;border-radius:3px;font:7px var(--mono);color:var(--dim);text-align:center}
.hazard-pip.passed{color:var(--cyan);border-color:var(--blue)}
.hazard-pip.hit{color:var(--hazard);border-color:var(--hazard)}
.hazard-pip.next{border-color:var(--amber);color:var(--amber)}

/* Dialogs and feedback. */
#resultCard{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,10,19,.88);backdrop-filter:blur(7px)}
#resultCard.on{display:flex}
.rc{width:min(430px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:26px;text-align:center}
.rc.won{border-color:var(--amber)}
.rc.lost{border-color:var(--hazard)}
.result-art{width:100%;height:110px;object-fit:cover;object-position:75% 62%;border-radius:6px;margin-bottom:20px}
.rc h3{font-size:35px;letter-spacing:1px;color:var(--amber);margin-bottom:12px}
.rc.lost h3,.rc.lost .big{color:var(--hazard)}
.rc .big{font:800 59px var(--display);color:var(--amber);line-height:1}
.rc .big small{display:block;font:9px var(--mono);letter-spacing:2px;color:var(--dim);margin-top:5px}
.evs{text-align:left;margin:18px 0}
.ev{display:flex;justify-content:space-between;padding:7px 0;font:10px var(--mono);border-bottom:1px solid var(--line);color:var(--dim)}
.rc .foot{font-size:12px;color:var(--dim);line-height:1.8;margin-bottom:18px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:100;pointer-events:none;opacity:0;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:13px 20px;max-width:90vw;font-size:13px;color:var(--ink);transition:opacity .2s}
.toast.show{opacity:1}
.toast.ok{border-color:var(--blue)}
.toast.bad{border-color:var(--hazard)}
dialog{width:min(480px,calc(100% - 32px));max-height:90vh;overflow:auto;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:30px}
dialog::backdrop{background:rgba(2,10,19,.85);backdrop-filter:blur(5px)}
dialog h2{font-size:42px;line-height:1.05;margin:16px 0 20px}
.dialog-close{position:absolute;top:10px;right:12px;border:0;background:none;width:36px;height:36px;font-size:24px;color:var(--dim)}
dialog ol{padding-left:25px;color:var(--amber)}
dialog li{padding:0 0 18px 6px}
dialog li b{display:block;color:var(--ink);font-size:16px;margin-bottom:5px}
dialog li span{display:block;color:var(--dim);font-size:14px;line-height:1.55}
.manual-note{font-size:12px;line-height:1.6;color:var(--dim);padding:14px;background:#071423;border-radius:5px;margin:0 0 20px}

@media(min-width:1440px){.hero{height:330px}
.hero-copy{padding:33px 40px}
.hero h1{font-size:66px}
#map{height:490px}
}

@media(max-width:1100px){.wrap{padding-inline:22px}
.cols{grid-template-columns:minmax(0,1fr) 324px;gap:16px}
.hud{gap:15px}
.tag{display:none!important}
.launch{padding:15px}
.sector-btn{padding:10px 9px}
.sector-btn b{font-size:14px}
.route-heading>span{font-size:10px}
.map-legend span:last-child{display:none}
}

@media(max-width:820px){.cols{grid-template-columns:1fr}
.console{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.side{margin-top:0}
.hero{height:295px}
.hero-stamp strong{font-size:27px}
.hero-stamp span{font-size:6px}
.callsign{display:none}
#map{height:440px}
.sector-btn b{font-size:17px}
.route-heading>span{font-size:11px}
.topbar{min-height:84px}
.wrap{padding-inline:18px}
.hero-copy{padding:27px}
.hero h1{font-size:53px}
}

@media(max-width:560px){.wrap{padding:0 13px 90px}
.topbar{min-height:82px;gap:12px;flex-wrap:wrap;padding:15px 2px}
.brand{font-size:16px;gap:9px}
.brand small{font-size:7px;letter-spacing:.5px}
.brand-mark{width:30px;height:31px;font-size:27px}
.hud{gap:12px}
.stat .v{font-size:20px}
.lvlbox{min-width:48px}
#xpTxt{display:none}
.stat .k{font-size:7px}
.wbtn{font-size:8px;min-height:32px;padding:8px}
.hero{height:302px}
.hero-art{object-position:62% 50%;opacity:.7}
.hero:after{background:linear-gradient(90deg,rgba(5,18,31,.85),rgba(5,18,31,.1))}
.hero-copy{padding:23px 22px}
.hero h1{font-size:51px}
.hero-copy>p:not(.eyebrow){font-size:13px}
.hero-stamp{bottom:13px;right:15px}
.hero-stamp strong{font-size:19px;letter-spacing:2px}
.hero-stamp span{display:none}
.hero-actions{gap:14px;margin-top:19px}
.hero-play{font-size:9px;padding:12px}
.text-btn{font-size:11px}
.section-heading{margin-top:23px;align-items:flex-end}
.section-heading h2{font-size:28px}
.connection{font-size:7px;max-width:110px;line-height:1.6}
.cols{gap:15px}
.map-top{padding:14px;font-size:8px;letter-spacing:.4px}
.map-top span:last-child{font-size:7px}
#map{height:365px}
.map-legend{left:14px;bottom:14px;font-size:7px}
.sector-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.sector-btn{min-height:65px;padding:11px}
.route-heading h3{font-size:8px}
.route-heading>span{font-size:10px}
.console{display:block}
.side{margin-top:15px}
.launch{padding:18px}
.rig b{font-size:17px}
.rig i,.rig u{font-size:9px}
.tname{font-size:30px}
.rig-heading span{font-size:8px}
.hero .eyebrow{font-size:8px}
.runhud{padding:30px 14px 15px}
body.running #map{height:490px}
.haul{font-size:35px}
.hazard-pip{font-size:6px;padding:6px 1px}
.pane{max-height:450px}
.logbox{padding:16px 3px}
.next-unlock{font-size:11px}
.toast{bottom:85px}
.rc{padding:20px}
.result-art{height:90px}
footer{font-size:7px;line-height:1.7}
}

@media(max-width:560px){.hero{height:282px}.hero-copy{padding-top:45px}.hero h1{font-size:clamp(34px,10.6vw,45px)}.hero-stamp{top:19px;bottom:auto;right:18px}.hero-stamp strong{font-size:15px;letter-spacing:1px}.hero .eyebrow{position:absolute;top:23px}.tstats span{font-size:8px}.rig-heading span{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;animation:none!important}
}