:root{
  --ground:#E4EBEE; --paper:#F8FAFB; --paper-2:#EEF3F6; --grid:#DCE7ED;
  --ink:#1B2437; --ink-soft:#4E5B71; --rule:#BCCAD4;
  --accent:#2F55D4; --accent-ink:#FFFFFF; --gold:#D99A1C; --gold-soft:#FBEFD2;
  --kraft:#B4712F; --foam:#138F80; --rival:#C23F37; --need:#5E6B82;
  --good:#23865A; --bad:#C23F37; --frame:#1B2437; --shadow:rgba(27,36,55,.9);
  --f-display:"Pixelify Sans","Courier New",ui-monospace,monospace;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0E1420; --paper:#151D2E; --paper-2:#1B253A; --grid:#1F2B42;
    --ink:#E7EDF6; --ink-soft:#9DAAC0; --rule:#2F3D58;
    --accent:#7F9CFF; --accent-ink:#0E1420; --gold:#F2BE4B; --gold-soft:#3A2F17;
    --kraft:#DB9A57; --foam:#3CC8B4; --rival:#FF7D71; --need:#98A5BD;
    --good:#4CC38A; --bad:#FF7D71; --frame:#05080F; --shadow:rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0E1420; --paper:#151D2E; --paper-2:#1B253A; --grid:#1F2B42;
  --ink:#E7EDF6; --ink-soft:#9DAAC0; --rule:#2F3D58;
  --accent:#7F9CFF; --accent-ink:#0E1420; --gold:#F2BE4B; --gold-soft:#3A2F17;
  --kraft:#DB9A57; --foam:#3CC8B4; --rival:#FF7D71; --need:#98A5BD;
  --good:#4CC38A; --bad:#FF7D71; --frame:#05080F; --shadow:rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
#app{height:100%;padding-inline:16px;padding-block:10px;display:flex;flex-direction:column;gap:10px;max-width:1120px;margin:0 auto}

/* HUD */
.hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.06em}
.brand svg{width:26px;height:26px}
.region{font-family:var(--f-display);font-size:14px;color:var(--ink-soft);border:2px solid var(--rule);padding:2px 10px;border-radius:999px;white-space:nowrap}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.slots{display:flex;gap:4px}
.slot{width:32px;height:32px;border:2px dashed var(--rule);border-radius:6px;display:grid;place-items:center;background:var(--paper)}
.slot.has{border-style:solid;border-color:var(--gold);background:var(--gold-soft)}
.slot svg{width:22px;height:22px}
.hbtn{font-family:var(--f-display);font-size:14px;padding:5px 10px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);box-shadow:2px 2px 0 var(--shadow);cursor:pointer;display:flex;gap:6px;align-items:center}
.hbtn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}
.hbtn b{font-family:var(--f-mono);font-weight:500;font-size:13px}

/* Stage */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.screen{position:relative;width:100%;aspect-ratio:3/2;max-width:100%;border:3px solid var(--frame);border-radius:8px;overflow:hidden;background:#101826;box-shadow:0 4px 0 var(--shadow)}
#world{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:pointer}
.hint{font-size:13px;color:var(--ink-soft);text-align:center;margin:0}
.hint kbd{font-family:var(--f-mono);font-size:12px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--paper)}

/* Dialog */
.dlg{position:absolute;left:3%;right:3%;bottom:4%;background:#101829;color:#F3F6FB;border:2px solid #E6ECF5;border-radius:6px;box-shadow:0 0 0 3px #101829,0 6px 0 3px rgba(0,0,0,.35);padding:14px 16px 12px;font-size:clamp(13px,2.1vw,17px);line-height:1.45;cursor:pointer}
.dlg .who{position:absolute;top:-13px;left:12px;background:#F2B632;color:#101829;font-family:var(--f-display);font-weight:700;font-size:14px;padding:1px 10px;border-radius:4px;border:2px solid #101829}
.dlg .txt{min-height:2.9em}
.dlg .more{position:absolute;right:12px;bottom:6px;font-size:12px;color:#F2B632;animation:blink 1s steps(2) infinite}
.dlg .choices{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dlg .choices button{text-align:left;background:#1B2742;border:2px solid #52618A;color:#F3F6FB;border-radius:5px;padding:7px 10px;cursor:pointer;font-size:inherit}
.dlg .choices button:hover,.dlg .choices button:focus{border-color:#F2B632;outline:none;background:#24345A}
.dlg .choices button::before{content:"\25B8  ";color:#F2B632}
@keyframes blink{50%{opacity:0}}
.banner{position:absolute;top:7%;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:700;color:#fff;font-size:clamp(16px,3.2vw,28px);letter-spacing:.08em;text-shadow:2px 2px 0 #101829,-1px -1px 0 #101829;white-space:nowrap;pointer-events:none;animation:banner 2.6s ease forwards}
.banner small{display:block;text-align:center;font-size:.5em;letter-spacing:.2em;opacity:.9}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-8px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.toast{position:absolute;top:10px;right:10px;max-width:70%;background:#101829;color:#F3F6FB;border:2px solid #F2B632;border-radius:5px;padding:5px 10px;font-family:var(--f-display);font-size:13px;pointer-events:none;animation:toast 2.8s ease forwards;z-index:3}
@keyframes toast{0%{opacity:0;transform:translateY(-6px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}

/* Item get */
.itemget{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,12,22,.62);cursor:pointer;z-index:4}
.ig{text-align:center;color:#fff;padding:16px;max-width:440px}
.ig-icon{width:92px;height:92px;margin:0 auto 16px;position:relative;animation:rise 1s cubic-bezier(.2,.9,.25,1.2)}
.ig-icon svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(242,182,50,.8))}
.ig-rays{position:absolute;inset:-46px;border-radius:50%;background:repeating-conic-gradient(rgba(242,182,50,.42) 0 9deg,transparent 9deg 30deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 7s linear infinite}
.ig h3{font-family:var(--f-display);color:#F2B632;font-size:clamp(18px,3vw,26px);margin:0 0 6px}
.ig p{margin:0 0 8px;font-size:clamp(13px,1.9vw,16px);color:#DCE4F2}
.ig small{color:#9DAAC0;font-size:12px}
@keyframes rise{from{transform:translateY(40px) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Title */
.title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:linear-gradient(180deg,#2A5D8F 0%,#3E7FB5 45%,#6DB35A 45.2%,#4E8F43 100%);color:#fff;padding:16px;overflow:auto;z-index:5}
.title h1{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,7vw,68px);letter-spacing:.08em;margin:0;line-height:1;text-shadow:3px 3px 0 #2F55D4,6px 6px 0 #101829}
.title .sub{font-family:var(--f-display);font-size:clamp(12px,2vw,17px);letter-spacing:.14em;color:#F2B632;text-shadow:1px 1px 0 #101829}
.title .tag{max-width:48ch;font-size:clamp(12px,1.8vw,15px);color:#F3F6FB;margin:0 auto;text-shadow:1px 1px 0 rgba(16,24,41,.8)}
.title .tag.small{font-size:12.5px;opacity:.95}
#titleBody{display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(16,24,41,.72);border:2px solid #101829;border-radius:8px;padding:12px 14px;max-width:min(520px,100%)}
#titleBody .row{justify-content:center}
.tform{display:flex;flex-direction:column;gap:8px;width:min(380px,100%);text-align:left}
.tform label{display:flex;flex-direction:column;gap:2px;font-family:var(--f-display);font-size:14px;color:#F2B632}
.tform input{font:inherit;font-family:var(--f-body);font-size:16px;padding:7px 9px;border-radius:5px;border:2px solid #101829;background:#F8FAFB;color:#1B2437}
.terr{color:#FFB4AB;font-size:14px;margin:0}
.bigcode{font-family:var(--f-mono);font-size:clamp(28px,6vw,44px);letter-spacing:.15em;margin:0;color:#F2B632;background:#101829;padding:4px 16px;border-radius:6px}
.linkbtn{background:none;border:0;color:#DCE4F2;text-decoration:underline;cursor:pointer;font-size:13px}
.tplane{width:clamp(40px,7vw,60px);animation:glide 3.4s ease-in-out infinite}
@keyframes glide{0%,100%{transform:translate(-10px,4px) rotate(-4deg)}50%{transform:translate(10px,-6px) rotate(3deg)}}

/* Pad */
.pad{display:none;width:100%;max-width:560px;justify-content:space-between;align-items:center;user-select:none;-webkit-user-select:none}
.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:3px}
.dpad button,.abtn{touch-action:none;border:2px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--shadow);border-radius:8px;font-family:var(--f-display);font-size:18px;cursor:pointer}
.dpad button:active,.abtn:active,.dpad button.on{background:var(--paper-2);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}
.abtn{width:74px;height:74px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:22px;font-weight:700;display:grid;place-items:center;line-height:1}
.abtn small{display:block;font-size:11px;font-weight:400}
@media (pointer:coarse),(max-width:720px){.pad{display:flex}.hint{display:none}.hbtn{padding:4px 8px;font-size:13px}.slots{display:none}}

/* Sheet */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(10,15,26,.58);overflow-y:auto;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.card{position:relative;max-width:980px;margin:0 auto;background:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:6px 6px 0 var(--shadow);padding:22px}
.card h2{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,4vw,34px);margin:2px 0 6px;line-height:1.1;text-wrap:balance}
.card h3{font-family:var(--f-display);font-weight:600;font-size:19px;margin:0 0 6px;text-wrap:balance}
.eyebrow{font-family:var(--f-display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.brief{max-width:66ch;margin:0}
.muted{color:var(--ink-soft);font-size:14px;margin:0}
.small{font-size:14px;margin:0}
.x{position:absolute;top:14px;right:14px;border:2px solid var(--ink);background:var(--paper);border-radius:6px;font-family:var(--f-display);padding:4px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--shadow)}
.fbk{display:block;margin:22px 0 0 auto;border:0;background:none;color:var(--ink-soft);font-size:13px;text-decoration:underline;cursor:pointer}
.qhead{padding-right:84px;margin-bottom:16px}
.qgrid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:860px){.qgrid{grid-template-columns:minmax(0,1fr) 290px}}
.chartbox{border:2px solid var(--rule);border-radius:8px;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;padding:6px;overflow-x:auto}
.chartbox svg{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-soft);margin:0 0 8px}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px;background:var(--ink-soft)}
.legend i.kraft{background:var(--kraft)} .legend i.foam{background:var(--foam)} .legend i.rival{background:var(--rival)}
.legend i.over{background:var(--kraft);opacity:.3;height:10px}
.legend i.dot{width:10px;height:10px;border-radius:50%}
.legend i.dot.hollow{background:var(--paper);border:2px solid var(--kraft)}
.legend .need{color:var(--need)}
.legend i.dash{height:0;border-top:2px dashed currentColor;background:none}
.legend i.dash.foamc{color:var(--foam)}
.side{display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sec{margin-top:20px}
.btn{font-family:var(--f-display);font-weight:600;font-size:16px;border:2px solid var(--ink);background:var(--accent);color:var(--accent-ink);border-radius:7px;padding:10px 16px;box-shadow:3px 3px 0 var(--shadow);cursor:pointer;text-align:center}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.gold{background:#F2B632;color:#101829}
.btn.tech{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--paper);color:var(--ink);border-left-width:8px}
.btn.tech small{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--ink-soft)}
.btn.tech.paper{border-left-color:var(--kraft)} .btn.tech.foam{border-left-color:var(--foam)}
.runs{display:flex;gap:12px;align-items:center}
.runs .big{font-family:var(--f-display);font-size:48px;font-weight:700;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.runs small{color:var(--ink-soft)}
.log{list-style:none;margin:0;padding:0;font-family:var(--f-mono);font-size:13px;display:flex;flex-direction:column;gap:3px;font-variant-numeric:tabular-nums}
.log li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--rule);padding:2px 0}
.log .p{color:var(--kraft)} .log .f{color:var(--foam)}
.mono{font-family:var(--f-mono);font-size:14px}
.panel{border:2px solid var(--ink);border-radius:8px;padding:14px 16px;background:var(--paper-2)}
.panel.call{border-color:var(--gold);background:var(--gold-soft)}
.panel p{margin:0 0 10px} .panel p:last-child{margin-bottom:0}
.panel + .panel{margin-top:12px}
.opts{display:grid;gap:8px}
.opt{display:block;width:100%;text-align:left;border:2px solid var(--rule);border-radius:7px;background:var(--paper);padding:10px 12px;cursor:pointer;font-size:15px}
.opt:hover:not(:disabled),.opt:focus-visible{border-color:var(--accent);outline:none}
.opt:disabled{cursor:default;color:var(--ink)}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--paper))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--paper))}
.fb{margin:10px 0 0;font-size:15px}
.fb.ok{color:var(--good)} .fb.no{color:var(--bad)}
.after{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.note{position:relative;border:2px solid var(--ink);background:var(--paper);border-radius:4px;padding:14px 16px 12px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.note::after{content:"";position:absolute;top:0;right:0;width:18px;height:18px;background:linear-gradient(225deg,var(--ground) 50%,var(--rule) 50%)}
.note h4{font-family:var(--f-display);font-size:16px;margin:0 0 4px;font-weight:600}
.note p{margin:0 0 6px;font-size:15px}
.note .src{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);margin:0}
.note.locked{opacity:.55}
.cust{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:16px}
.cc{border:2px solid var(--rule);border-radius:8px;padding:10px 12px;background:var(--paper)}
.cc b{font-family:var(--f-display);font-size:16px;font-weight:600}
.cc .role{font-size:13px;color:var(--ink-soft)} .cc .need{font-family:var(--f-mono);font-size:13px;margin-top:4px}
.cc.fog{border-style:dashed;color:var(--ink-soft)}
.slider{display:flex;flex-direction:column;gap:6px}
.slider label{font-family:var(--f-display);font-size:15px;display:flex;justify-content:space-between}
.slider output{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent)}
.caption{font-size:15px;margin:10px 0 12px;max-width:66ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{font-family:var(--f-display);font-size:13px;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:var(--paper);white-space:nowrap}
.chip.ok{border-color:var(--good);color:var(--good)} .chip.no{border-color:var(--bad);color:var(--bad)}
.chip.gold{border-color:var(--gold);background:var(--gold-soft);color:var(--ink)}
.mile{font-size:14px;border-left:4px solid var(--foam);padding:4px 10px;background:var(--paper-2);border-radius:0 6px 6px 0;animation:pop .4s ease}
@keyframes pop{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.split{display:flex;height:34px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;font-family:var(--f-display);font-size:13px}
.split span{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden}
.split .sp{background:var(--kraft);color:#fff} .split .sf{background:var(--foam);color:#fff}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:5px 8px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
th{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--ink-soft)}
td:first-child,th:first-child{text-align:left}
td.mono{font-family:var(--f-mono);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{border:2px solid var(--rule);border-radius:8px;padding:10px 12px;background:var(--paper)}
.stat .v{font-family:var(--f-display);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .k{font-size:13px;color:var(--ink-soft)}
.gradeRow{gap:16px;margin-bottom:14px}
.grade{font-family:var(--f-display);font-size:clamp(28px,5vw,44px);font-weight:700;color:var(--accent);line-height:1}
.debrief{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;max-width:72ch}
.fogtxt{font-size:13px;color:var(--ink-soft);font-style:italic;margin:6px 0 0}
.plain{margin:0;padding-left:18px}

/* Tabs, boards, journal */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tab{font-family:var(--f-display);font-size:14px;border:2px solid var(--rule);border-radius:999px;padding:3px 12px;background:var(--paper);cursor:pointer}
.tab.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.board{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:520px}
.board li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;border:2px solid var(--rule);border-radius:7px;padding:6px 12px;background:var(--paper)}
.board li.me{border-color:var(--gold);background:var(--gold-soft)}
.board .rk{font-family:var(--f-display);font-weight:700;color:var(--ink-soft)}
.board li:nth-child(-n+3) .rk{color:var(--gold)}
.board .cs{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .val{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mine{font-family:var(--f-display);font-size:15px;margin:6px 0}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.item{display:flex;gap:12px;align-items:center;border:2px solid var(--rule);border-radius:8px;padding:10px 12px}
.item.has{border-color:var(--gold);background:var(--gold-soft)}
.item svg{width:36px;height:36px;flex:none}
.item:not(.has) svg{opacity:.25}
.item b{font-family:var(--f-display)}
.item p{margin:0;font-size:14px;color:var(--ink-soft)}
.map-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.map-list li{display:flex;gap:12px;align-items:center;border:2px solid var(--rule);border-radius:8px;padding:10px 12px;background:var(--paper)}
.map-list li.cur{border-color:var(--gold);background:var(--gold-soft)}
.map-list .n{font-family:var(--f-display);font-size:13px;color:var(--ink-soft);min-width:38px}
.map-list b{font-family:var(--f-display);font-weight:600}
.map-list .sub{font-size:13px;color:var(--ink-soft)}
.map-list .s{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);white-space:nowrap}
.code{font-family:var(--f-mono);font-size:18px;letter-spacing:.1em;background:var(--paper);border:2px solid var(--rule);border-radius:5px;padding:1px 8px}

/* Feedback form */
.kinds{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.kinds legend{font-family:var(--f-display);margin-bottom:6px}
.radio{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--rule);border-radius:8px;padding:10px 12px;cursor:pointer;background:var(--paper)}
.radio:has(input:checked){border-color:var(--accent)}
.radio input{margin-top:4px;accent-color:var(--accent)}
.radio small{display:block;color:var(--ink-soft);font-size:13px}
.lbl{font-family:var(--f-display)}
textarea{width:100%;font:inherit;padding:10px;border:2px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);resize:vertical}
textarea:focus,input:focus{outline:3px solid var(--gold);outline-offset:1px}

/* Forecast */
.forecast .frow,.wq .frow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 10px}
.frow label{display:flex;flex-direction:column;font-family:var(--f-display);font-size:14px;gap:2px}
.frow input{width:110px;font:inherit;font-family:var(--f-mono);font-size:16px;padding:6px 8px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink)}
.fdash,.unit{font-family:var(--f-display);padding-bottom:8px;color:var(--ink-soft)}
.ftrack{position:relative;height:18px;border:2px solid var(--rule);border-radius:999px;background:var(--paper);margin:4px 0 22px}
.fbar{position:absolute;top:2px;bottom:2px;background:var(--accent);border-radius:999px;opacity:.75}
.fend{position:absolute;top:18px;font-family:var(--f-mono);font-size:11px;color:var(--ink-soft)}
.fend.l{left:0} .fend.r{right:0}
.wager{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.wq{border:2px solid var(--rule);border-radius:8px;padding:10px 14px;background:var(--paper)}
.wq legend{font-weight:700;padding:0 4px}
.reveal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-top:14px}
.rv{border:2px solid var(--rule);border-radius:8px;padding:10px 12px;background:var(--paper)}
.rv.hit{border-color:var(--good)} .rv.miss{border-color:var(--bad)}
.rq{font-weight:700;font-size:14px;margin-bottom:4px}
.rv svg{width:100%;height:auto;display:block}
.rmeta{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:12px;flex-wrap:wrap}
.rng-hit{fill:var(--good);opacity:.35} .rng-miss{fill:var(--bad);opacity:.3}
.truth{fill:var(--ink);stroke:var(--paper);stroke-width:2}

/* Sorter */
.sorter{display:flex;flex-direction:column;gap:12px}
.sq{font-family:var(--f-display);font-size:clamp(20px,3.4vw,28px);text-align:center}
.belt{position:relative;height:120px;border:3px solid var(--ink);border-radius:8px;background:repeating-linear-gradient(90deg,#3B4452 0 14px,#4A5563 14px 28px);overflow:hidden}
.belt .rollers{position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,#1B2437 0 6px,#6E7C8C 6px 12px);animation:roll .6s linear infinite}
@keyframes roll{to{background-position:12px 0}}
.belt .edge{position:absolute;right:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(0deg,#C23F37 0 8px,#F7F7F2 8px 16px)}
.crate{position:absolute;left:0;top:14px;width:min(260px,62%);min-height:84px;background:#C9955A;border:3px solid #7C5429;border-radius:4px;padding:8px 10px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;color:#2A1B14;font-size:15px;box-shadow:inset 0 0 0 3px #B5804A;will-change:transform}
.crate.good{background:#9FD9B8;border-color:var(--good)} .crate.bad{background:#F2B0A8;border-color:var(--bad)}
.crate.drop{transition:transform .35s ease-in,opacity .35s;opacity:.2}
.crate.fall{transition:opacity .4s;opacity:0}
.bins{display:grid;gap:8px}
.bin{font-family:var(--f-display);font-size:clamp(14px,2.2vw,18px);padding:14px 8px;border:3px solid var(--ink);border-radius:8px;background:var(--paper);cursor:pointer;box-shadow:3px 3px 0 var(--shadow);display:flex;flex-direction:column;align-items:center;gap:4px}
.bin kbd{font-family:var(--f-mono);font-size:12px;border:1px solid var(--rule);border-radius:4px;padding:0 5px;color:var(--ink-soft)}
.bin:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.bin.ok{background:color-mix(in srgb,var(--good) 25%,var(--paper));border-color:var(--good)}
.bin.no{background:color-mix(in srgb,var(--bad) 20%,var(--paper));border-color:var(--bad)}
.sstat{display:flex;justify-content:space-between;font-family:var(--f-display);color:var(--ink-soft)}
.sstat .hot{color:var(--gold)}
.misses{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.miss{border:2px solid var(--rule);border-left:6px solid var(--bad);border-radius:6px;padding:10px 12px;background:var(--paper)}
.miss span{display:block;font-size:13px;color:var(--ink-soft)}
.miss p{margin:6px 0 0;font-size:14px}

/* SVG chart text */
.gl{stroke:var(--grid);stroke-width:1}
.ax{stroke:var(--ink-soft);stroke-width:1.5}
.tk{font-family:var(--f-mono);font-size:11px;fill:var(--ink-soft)}
.al{font-family:var(--f-body);font-size:12px;fill:var(--ink-soft)}
.lb{font-family:var(--f-display);font-size:13px}
.ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ln.paper{stroke:var(--kraft)} .ln.foam{stroke:var(--foam)} .ln.rival{stroke:var(--rival)} .ln.need{stroke:var(--need);stroke-width:2;stroke-dasharray:6 5}
.ln.ghost{stroke:var(--foam);stroke-width:2;stroke-dasharray:2 5;opacity:.9}
.ln.ceil{stroke-width:1.5;stroke-dasharray:4 4}
.ln.ceil.kraft{stroke:var(--kraft)} .ln.ceil.foam{stroke:var(--foam)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pt{stroke-width:2}
.pt.paper{fill:var(--kraft);stroke:var(--paper)} .pt.foam{fill:var(--foam);stroke:var(--paper)} .pt.hist{fill:var(--paper);stroke:var(--kraft)} .pt.rival{fill:var(--rival);stroke:var(--paper)}
.fill-kraft{fill:var(--kraft)} .fill-foam{fill:var(--foam)} .fill-rival{fill:var(--rival)} .fill-need{fill:var(--need)} .fill-gold{fill:var(--gold)}
.over{fill:var(--kraft);opacity:.16}
.band{fill:var(--foam);opacity:.1}
.bar-ok{fill:var(--accent)} .bar-no{fill:var(--bad)}
.tline{stroke:var(--gold);stroke-width:2;stroke-dasharray:6 4}
.nowline{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .draw{stroke-dashoffset:0}
}

/* ---------- shared components for region screens ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cardx{display:flex;flex-direction:column;gap:4px;text-align:left;border:2px solid var(--ink);border-radius:8px;background:var(--paper);padding:10px 12px;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);font-size:15px}
.cardx:hover:not(:disabled),.cardx:focus-visible{border-color:var(--accent);outline:none}
.cardx:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.cardx b{font-family:var(--f-display);font-weight:600;font-size:16px}
.cardx small{color:var(--ink-soft);font-size:13px}
.cardx.on{border-color:var(--gold);background:var(--gold-soft)}
.cardx.used{opacity:.6;box-shadow:none}
.cardx.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--paper))}
.cardx.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--paper))}
.cardx:disabled{cursor:default}
.scene{border:2px solid var(--ink);border-radius:8px;background:var(--paper-2);overflow:hidden}
.scene svg{display:block;width:100%;height:auto}
.meter{height:14px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper)}
.meter>i{display:block;height:100%;background:var(--accent);transition:width .7s ease}
.meter.good>i{background:var(--good)} .meter.bad>i{background:var(--bad)} .meter.gold>i{background:var(--gold)}
.ev{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ev li{border:2px solid var(--rule);border-radius:6px;padding:7px 10px;background:var(--paper);font-size:15px}
.ev li .k{display:inline-block;font-family:var(--f-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-right:8px}
.ev li.sealed{border-style:dashed;color:var(--ink-soft);font-style:italic}
.tri{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tri .lbl{width:100%;font-family:var(--f-display);font-size:14px}
.tri button{font-family:var(--f-display);font-size:14px;border:2px solid var(--rule);border-radius:6px;background:var(--paper);padding:5px 12px;cursor:pointer}
.tri button.yes{border-color:var(--good);background:color-mix(in srgb,var(--good) 20%,var(--paper))}
.tri button.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,var(--paper))}
.stamp{display:inline-block;font-family:var(--f-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:3px solid currentColor;border-radius:6px;padding:2px 10px;transform:rotate(-6deg);animation:stamp .35s cubic-bezier(.2,1.6,.4,1)}
.stamp.ok{color:var(--good)} .stamp.no{color:var(--bad)} .stamp.gold{color:var(--gold)}
@keyframes stamp{from{transform:rotate(-6deg) scale(2.2);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}
.big{font-family:var(--f-display);font-size:clamp(28px,5vw,44px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:14px}
.kv dt{color:var(--ink-soft)} .kv dd{margin:0;font-family:var(--f-mono)}
table.t{border-collapse:collapse;width:100%;font-size:14px}
table.t th,table.t td{border-bottom:1px solid var(--rule);padding:5px 8px;text-align:left;vertical-align:top}
table.t th{font-family:var(--f-display);font-weight:600;color:var(--ink-soft)}
table.t td.n{font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.ok{color:var(--good)} .no{color:var(--bad)}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.grow{transform-origin:bottom;animation:grow .8s ease-out both}
@keyframes grow{from{transform:scaleY(0)}}
.slide-in{animation:slidein .4s ease-out both}
@keyframes slidein{from{transform:translateX(-24px);opacity:0}}
@media (min-width:760px){.qgrid.two{grid-template-columns:1.5fr 1fr}}

/* World map */
.wm svg{max-height:62vh}
.wm-road{stroke:var(--rule);stroke-width:6;stroke-dasharray:10 8;stroke-linecap:round}
.wm-road.open{stroke:var(--kraft);stroke-dasharray:none}
.wm-node circle{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.wm-node.open circle{fill:color-mix(in srgb,var(--foam) 30%,var(--paper))}
.wm-node.done circle{fill:color-mix(in srgb,var(--gold) 45%,var(--paper))}
.wm-node.locked circle{fill:var(--paper-2);stroke:var(--rule);stroke-dasharray:4 3}
.wm-node.here circle{stroke:var(--gold);stroke-width:6}
.wm-lbl{font-family:var(--f-display);font-size:17px;fill:var(--ink)}
.wm-sub{font-family:var(--f-mono);font-size:11px;fill:var(--ink-soft)}
.wm-node.locked .wm-lbl{fill:var(--ink-soft)}
.wm-ic{font-size:14px;fill:var(--ink)}
.wm-hq rect{fill:var(--kraft);stroke:var(--ink);stroke-width:2}
.wm-hq text{font-family:var(--f-display);font-size:12px;fill:#fff}
.wm-you path{fill:#fff;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.wm-you text{font-family:var(--f-display);font-size:13px;fill:var(--ink)}
.wm-you{animation:wmbob 1.4s ease-in-out infinite}
@keyframes wmbob{50%{transform:translateY(-3px)}}
.wm-local canvas{display:block;margin:0 auto;image-rendering:pixelated}