/* Typhoon Fleet light theme, the original music-machine look (2026-10-04, replaces the chunky option D style). Loaded LAST on every page.
   White page, warm panels, navy ink, Fraunces headings, Inter body, hairline borders, rounded corners, soft shadows.
   Icons and unit art keep a dark navy tile so the agent colours still glow. Revert: drop this file's <link>. */
:root,:root[data-theme="dark"],:root:not([data-theme="light"]){
  --page:#FFFFFF;--card:#FFFFFF;--navy:#0A2342;--tileb:#0B1E3A;
  --bg:#FFFFFF;--bg2:#F7F5F1;--panel:#FFFFFF;--panel2:#0B1E3A;
  --ink:#0A2342;--ink2:#3F4A5C;--ink3:#5E6878;--line:rgba(10,35,66,.85);--line2:rgba(10,35,66,.14);
  --lit:#B5620F;--amber:#E0892B;
}
html,body{background:var(--page) !important;background-image:none !important;color:var(--ink)}
body{font-family:Inter,system-ui,sans-serif}
h1,h2,h3,h4,.display{font-family:Fraunces,Georgia,serif !important;font-weight:500 !important;letter-spacing:-.4px !important}
h1 em{color:var(--lit) !important;font-style:italic;text-shadow:none !important}
h1,h2{text-shadow:none !important}
p a,li a,.txt a{color:var(--lit);border-bottom-color:rgba(181,98,15,.4)}

/* chrome: header, crew menu, sub-bar, footer */
.tf-top,.tf-sub,.tf-foot,.tf-panel{font-family:Inter,system-ui,sans-serif}
.tf-top{background:rgba(250,247,241,.92) !important;color:var(--ink) !important;border-bottom:1px solid rgba(10,35,66,.12) !important}
.tf-brand{font-family:Fraunces,Georgia,serif !important;font-weight:600 !important;letter-spacing:0 !important}
.tf-brand svg{color:var(--amber);filter:none}
.tf-nav,.tf-login{color:var(--ink2) !important}
.tf-nav a:hover,.tf-nav button:hover,.tf-nav .on,.tf-login:hover{color:var(--ink) !important}
.tf-nav .on{background:rgba(10,35,66,.06) !important}
.tf-start{background:var(--navy) !important;color:#fff !important;border-radius:999px !important;box-shadow:none !important;border:0}
.tf-menu{color:var(--ink) !important;border:1px solid rgba(10,35,66,.14) !important;border-radius:999px !important}
.tf-panel{background:var(--card) !important;color:var(--ink) !important;border-top:1px solid rgba(10,35,66,.12) !important}
.tf-ph,.tf-crew span,.tf-crew i{color:var(--ink3) !important}
.tf-crew i.live{color:var(--lit) !important}
.tf-crew b{font-family:Fraunces,Georgia,serif !important;font-weight:600 !important;letter-spacing:0 !important}
.tf-crew a:hover,.tf-crew a.on,.tf-more a:hover{background:rgba(10,35,66,.06) !important}
.tf-more a{color:var(--ink) !important}
.tf-ph2,.tf-more{border-top-color:var(--line2) !important}
.tf-sub{background:rgba(241,236,226,.95) !important;color:var(--ink2) !important;border-bottom:1px solid rgba(10,35,66,.12) !important}
.tf-back{color:var(--ink2) !important}
.tf-here{font-family:Fraunces,Georgia,serif !important;font-weight:600 !important;color:var(--ink) !important;letter-spacing:0 !important}
.tf-tabs{border-left-color:var(--line2) !important}
.tf-tabs a:hover,.tf-tabs a.on{color:var(--ink) !important}
.tf-tabs a.on{border-bottom-color:var(--amber) !important}
.tf-foot{background:var(--bg2) !important;color:var(--ink3) !important;border-top:1px solid rgba(10,35,66,.12) !important}
.tf-foot h4,.tf-fl a{color:var(--ink2) !important}
.tf-fl a:hover{color:var(--ink) !important}
.tf-legal{border-top-color:var(--line2) !important}

/* buttons become the chunky pixel buttons */
.btn{border-radius:999px !important;border:1px solid var(--navy) !important;box-shadow:none !important;font-family:Inter,system-ui,sans-serif;font-weight:600}
.btn.gold,.btn.primary{background:var(--navy) !important;color:#fff !important;box-shadow:0 10px 26px -12px rgba(10,35,66,.55) !important}
.btn.line,.btn.ghost{background:#fff !important;color:var(--navy) !important}
.btn:hover{transform:translateY(-1px)}

/* sections, hero, facts */
section{border-top:1px solid rgba(10,35,66,.1) !important}
.hero{background:var(--page)}
.hero::before,.hero::after,.final::before{display:none !important}
.lede,.slede,.sub{color:var(--ink2) !important}
.lede b{color:var(--ink) !important}
.facts{background:var(--bg2) !important;border-top:1px solid rgba(10,35,66,.12) !important;border-bottom:1px solid rgba(10,35,66,.12) !important;color:var(--ink2) !important}
.facts b{color:var(--ink) !important}
.facts + section{border-top:0 !important}
.tile{box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important}
.tile .bar b{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:0;text-shadow:none}
.more a,.limits a{color:var(--lit) !important;border-bottom-color:rgba(181,98,15,.4) !important}

/* cards: skill cards, flow boxes, rows, boxes */
.kc,.fs,.st,.box,.cat,.rows,.ph,.cn,.sv{background:var(--card) !important;border:1px solid rgba(10,35,66,.12) !important;border-radius:12px !important;box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important;color:var(--ink)}
.kc.off,.box.no{border-style:dashed !important;box-shadow:none !important}
.kc b,.fs b,.st h3,.box h3,.cat h3,.row b{color:var(--ink) !important}
.kc .d,.kc p,.fs>span:not(.fi),.st p,.box li,.cat p,.row span{color:var(--ink2) !important}
.row{border-top-color:var(--line2) !important}
.kc .item,.fi,.ri{background:var(--tileb) !important;border-radius:12px !important}
.fi.sym{background:var(--spot) !important;color:var(--navy) !important}
.fs.run{box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important}
.rn{color:var(--ink) !important}
.fa::before{background:var(--navy) !important}
.fa::after{border-color:var(--navy) !important}
.cat.me{background:#FFF3E2 !important;box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important}
.cat dd{color:var(--ink) !important}
.st::before{color:var(--lit) !important;text-shadow:none !important;font-family:Fraunces,Georgia,serif !important;font-weight:500 !important}
.ba .box.me{box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important}

/* skill tree pages */
.sk-score{background:var(--card) !important;border:1px solid rgba(10,35,66,.12) !important;border-radius:12px !important;box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35)}
.sk-score b{font-family:Fraunces,Georgia,serif !important;font-weight:500;text-shadow:none !important;color:var(--lit) !important}
.sk-bar{background:rgba(10,35,66,.1) !important}
.sk-bar i{box-shadow:none !important}
.sk-legend,.sk-tl{border-color:var(--line2) !important}
.sk-tl b{font-family:Fraunces,Georgia,serif !important;font-weight:500 !important;letter-spacing:0 !important}
.sk-pips i{border-color:var(--ink3) !important}
.sk-pips i.on{box-shadow:none !important}
.sk-lines path{stroke:rgba(10,35,66,.22) !important}
.sk-ic{background:var(--tileb) !important;border-radius:12px !important;border-color:rgba(160,190,220,.35)}
.sk-node .sk-n{color:var(--ink3) !important}
.sk-node.r1 .sk-n,.sk-node.r2 .sk-n,.sk-node.r3 .sk-n{color:var(--ink) !important}
.sk-node.sel .sk-ic{outline:2px solid var(--navy) !important}
.sk-detail{background:var(--card) !important;border:1px solid rgba(10,35,66,.12) !important;border-radius:12px !important;box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35);color:var(--ink)}
.sk-detail h3{font-family:Fraunces,Georgia,serif !important}
.sk-detail p{color:var(--ink) !important}
.sk-detail dt{color:var(--ink3) !important}
.sk-detail dd,.sk-rk{color:var(--ink2) !important}
.sk-rk b{color:var(--ink) !important}
.sk-links button,.sk-links a,.sk-x{background:var(--page) !important;color:var(--ink) !important;border:1px solid rgba(10,35,66,.14) !important;border-radius:12px !important}
.sk-card{background:var(--card) !important;border:1px solid rgba(10,35,66,.12) !important;border-radius:12px !important;box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important;color:var(--ink)}
.sk-card p,.sk-card small{color:var(--ink2) !important}
.sk-h2{font-family:Fraunces,Georgia,serif !important}
.sk-sub a{color:var(--lit) !important}

/* the testing map stays a solid dark panel so its labels read */
.tmap{background:#0B1E3A !important;border:1px solid rgba(10,35,66,.12) !important;border-radius:12px !important;box-shadow:0 1px 0 rgba(10,35,66,.04),0 18px 40px -28px rgba(10,35,66,.35) !important}
.tmap .ch,.tmap .rh{color:#E6ECF4 !important}
.tmap .ch small{color:#A9B7CB !important}
.tkey{color:#C9D4E3 !important}
/* agent overview hero: the canonical crew character on a soft stage (replaces the old painted tile) */
.crewfig{position:relative;max-width:420px;margin:0 auto;padding:24px 24px 0;text-align:center}
.crewfig img{height:440px;width:auto;margin:0 auto;object-fit:contain}
.crewfig .cfbar{border-top:1px solid var(--line2);margin-top:6px;padding:12px 0 0}
.crewfig .cfbar b{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:28px;color:var(--ink)}
.crewfig .cfbar span{font-size:14px;color:var(--ink3)}
@media (max-width:720px){.crewfig img{height:300px}}
/* crew art in the menu and on skill-tree cards: transparent figures, not painted tiles */
.tf-crew img{object-fit:contain !important;background:transparent !important;object-position:50% 100% !important}
.tf-crew a.dim img{filter:grayscale(1) brightness(.2);opacity:.25}
.sk-card img.crewimg{object-fit:contain;object-position:50% 100%;background:transparent}
.sk-card img.crewimg.off{filter:grayscale(1) brightness(.2);opacity:.2}
.crewfig img.off{filter:grayscale(1) brightness(.25);opacity:.3}