/* Season pages. The same ink, orange and type as the game, on a page that scrolls. */
:root{color-scheme:dark;--ink:#f4f1e6;--muted:#9da9a8;--orange:#ff7045;--orange-light:#ff9c6c;--line:rgba(222,232,218,.18);--dark:#0e1a20;--panel:#13232a;--raised:#1a2e36;
  --good:#7fd6a4;--warn:#f0c463;--bad:#ff7a6b;--blue:#7fd6ff;--mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{background:var(--dark)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#132229 0,var(--dark) 420px);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--orange-light)}a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--orange-light);outline-offset:3px}
h1,h2,h3,h4,p,dl,dd{margin:0}
h1{font-size:30px;letter-spacing:-.8px;line-height:1.1;text-wrap:balance}
h2{font:700 11px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
h2 small,h3 small{font:400 11px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
h3{font-size:14px;margin:14px 0 6px}h4{font:700 10px var(--mono);letter-spacing:1.2px;color:var(--muted);margin-bottom:6px;text-transform:uppercase}
code{font:12px var(--mono);overflow-wrap:anywhere}
.hint{color:var(--muted);font-size:12px;line-height:1.45}.empty{color:var(--muted);padding:8px 0}

.top{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:rgba(14,26,32,.94);backdrop-filter:blur(6px)}
.wordmark{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:21px;font-weight:900;letter-spacing:-1.2px;text-decoration:none}
.wordmark small{font:400 9px var(--mono);letter-spacing:2px;color:var(--orange-light);align-self:flex-end;padding-bottom:4px}
.brand-mark{width:22px;display:flex;flex-direction:column;gap:3px;transform:skew(-26deg)}.brand-mark i{display:block;width:19px;height:4px;background:var(--orange)}.brand-mark i:nth-child(2){width:15px}.brand-mark i:nth-child(3){width:11px}
#nav{display:flex;gap:4px;flex-wrap:wrap}
#nav a{padding:7px 11px;font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent}
#nav a:hover{color:var(--ink)}#nav a[aria-current]{color:var(--ink);border-color:var(--orange)}
.season{font:10px var(--mono);letter-spacing:1px;color:var(--muted);text-transform:uppercase}.season b{color:var(--ink)}
.account{margin-left:auto;display:flex;align-items:center;gap:12px;position:relative}
.balance{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;color:var(--ink);line-height:1.15}.balance span{font:8px var(--mono);letter-spacing:1.4px;color:var(--muted)}.balance b{font:700 15px var(--mono);font-variant-numeric:tabular-nums}
.wallet{font:11px var(--mono);color:var(--muted)}
.sign-in{position:absolute;right:0;top:calc(100% + 12px);width:min(330px,calc(100vw - 32px));padding:16px;background:var(--raised);border:1px solid var(--line);border-top:3px solid var(--orange);display:flex;flex-direction:column;gap:8px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sign-in h2{margin:0}.sign-in h3{margin:8px 0 0}.sign-in .button{justify-content:space-between}

main{flex:1;width:min(1240px,100%);margin:0 auto;padding:26px 28px 40px;display:flex;flex-direction:column;gap:18px}
.crumbs{font:11px var(--mono);letter-spacing:.6px;color:var(--muted)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.page-head p{max-width:62ch;color:var(--muted);margin-top:8px}.page-head p b{color:var(--ink)}
.figures{display:flex;gap:10px 30px}.figures.wrap{flex-wrap:wrap;margin:10px 0}
.figures dt{font:8px var(--mono);letter-spacing:1.4px;color:var(--muted)}.figures dd{font:700 20px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.figures.wrap dd{font-size:15px}
.reasons{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:13px}.reasons b{color:var(--warn);font-family:var(--mono);font-size:11px}

.tag{display:inline-block;padding:2px 7px;font:700 9px var(--mono);letter-spacing:1px;border:1px solid currentColor;border-radius:2px;white-space:nowrap;vertical-align:middle}
.tag.good{color:var(--good)}.tag.warn{color:var(--warn)}.tag.bad{color:var(--bad)}.tag.quiet{color:var(--muted)}.tag.sale{color:var(--orange-light)}
.tag.grade{margin-right:4px}.tag.fortified{color:var(--blue)}.tag.stronghold{color:var(--warn);background:rgba(240,196,99,.1)}

.grid{display:grid;grid-template-columns:repeat(var(--columns,6),minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:6px;min-height:168px;padding:11px 12px;background:var(--panel);border:1px solid var(--line);border-top:3px solid #48606a;color:var(--ink);text-decoration:none;transition:transform .12s,border-color .12s,background .12s}
.tile:hover{transform:translateY(-2px);background:var(--raised);color:var(--ink);border-color:var(--muted)}
.tile.platform{border-top-color:var(--blue)}.tile.owned{border-top-color:var(--warn)}.tile.mine{border-top-color:var(--good)}.tile.sale{border-top-color:var(--orange);background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,112,69,.045) 9px 18px),var(--panel)}
.tile-top,.tile-foot{display:flex;justify-content:space-between;align-items:center;gap:6px}
.sector{font:10px var(--mono);color:var(--muted);letter-spacing:1px}
.tile strong{font-size:16px;line-height:1.15;letter-spacing:.2px}
.tile .owner{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}
.tile dl{display:flex;flex-direction:column;gap:2px;margin-top:auto}.tile dl div{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tile dt{font:8px var(--mono);letter-spacing:1.2px;color:var(--muted)}.tile dd{font:700 13px var(--mono);font-variant-numeric:tabular-nums}
.tile-foot{font:10px var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:6px}
.legend{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.key{display:inline-block;width:14px;height:4px;margin-left:8px;background:#48606a}.key.platform{background:var(--blue)}.key.owned{background:var(--warn)}.key.mine{background:var(--good)}.key.sale,.key.core{background:var(--orange)}.key.factory{background:#d8b24a}

.panel{background:var(--panel);border:1px solid var(--line);padding:18px 20px}
.panel.accent{border-left:3px solid var(--orange)}
.panel p+p,.panel p+.row,.panel p+.button,.panel .row+p,.panel .button+p,.panel form+p{margin-top:10px}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;align-items:start}.split.even{grid-template-columns:1fr 1fr}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:8px 14px;background:transparent;border:1px solid var(--line);color:var(--ink);font:700 11px var(--mono);letter-spacing:1.1px;text-decoration:none;cursor:pointer;text-align:left}
.button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.button.primary{background:var(--orange);border-color:var(--orange);color:#1a0d07}.button.primary:hover:not(:disabled){background:var(--orange-light);border-color:var(--orange-light);color:#1a0d07}
.button.danger{color:var(--bad);border-color:rgba(255,122,107,.5)}
.button.small{min-height:30px;padding:5px 10px;font-size:10px}
.button:disabled{opacity:.42;cursor:default}
.button[data-armed]{background:var(--warn);border-color:var(--warn);color:#1d1503}
.link{background:none;border:0;padding:0;color:var(--orange-light);font:inherit;text-decoration:underline;cursor:pointer}
input,select{min-height:38px;padding:7px 10px;background:#0b161b;border:1px solid var(--line);color:var(--ink);font:13px var(--mono);min-width:0;width:190px}
input.short{width:96px}input.long{width:260px}select{width:auto}
input[type=range]{width:100%;padding:0;min-height:28px;accent-color:var(--orange);border:0;background:none}
.slider{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.slider b{font:700 14px var(--mono)}
.unit{font:11px var(--mono);color:var(--muted);min-width:50px}

.pads{display:block;width:min(100%,430px);margin:0 auto}
.pads .ring{fill:rgba(255,255,255,.02);stroke:var(--line);stroke-dasharray:4 5}.pads .ring.inner{fill:none;stroke-dasharray:none}
.pads .core{fill:var(--orange)}.pads .core-label{font:7px var(--mono);letter-spacing:1px;fill:var(--muted);text-anchor:middle}
.pad circle{fill:#0b161b;stroke:#48606a;stroke-width:1.2}.pad text{font:9px var(--mono);fill:var(--muted);text-anchor:middle;pointer-events:none}
.pad[data-do]{cursor:pointer}.pad[data-do]:hover circle{stroke:var(--ink)}
.pad.held circle{stroke:var(--ink);fill:var(--raised)}.pad.selected circle{stroke:var(--orange);stroke-width:2.6}.pad.target circle{stroke:var(--good);stroke-dasharray:3 3}
.turret{fill:var(--ink)}.turret.tower{fill:var(--orange-light)}
.pad:focus-visible{outline:none}.pad:focus-visible circle{stroke:var(--orange-light);stroke-width:2.6}
.pad-panel{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);min-height:96px}.pad-panel h3{margin-top:0}
.buy{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.buy .button{width:100%;justify-content:space-between;margin-bottom:6px;font-weight:400;letter-spacing:.4px}.buy .button b{font-weight:700}

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font:700 9px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px 8px 0;border-bottom:1px solid rgba(222,232,218,.08);vertical-align:middle}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}th.num{text-align:right}
td.in{color:var(--good)}td.out{color:var(--muted)}
td.row{flex-wrap:nowrap}.dials td{vertical-align:top}.dials td:first-child{max-width:330px}
.copy{display:flex;flex-direction:column;gap:8px;margin:12px 0}.copy dt{font:8px var(--mono);letter-spacing:1.4px;color:var(--muted)}

.tracks{display:flex;flex-direction:column;padding:4px 20px}
.track{display:grid;grid-template-columns:minmax(150px,1.1fr) 190px minmax(0,1.6fr) 190px;gap:8px 20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.track:last-child{border-bottom:0}
.track h3{margin:0}.track .stat{font:12px var(--mono);color:var(--muted)}.track .stat b{color:var(--ink)}.track .button{justify-self:end;width:100%}
.pips{display:flex;align-items:center;gap:4px}.pips i{width:18px;height:8px;background:#0b161b;border:1px solid #48606a;transform:skew(-20deg)}.pips i.on{background:var(--orange);border-color:var(--orange)}.pips span{font:9px var(--mono);letter-spacing:1px;color:var(--muted);margin-left:8px}

.replay{display:grid;grid-template-columns:minmax(0,560px) minmax(220px,1fr);gap:20px;align-items:start}
.replay canvas{width:100%;height:auto;border:1px solid var(--line);display:block}
.replay-side{display:flex;flex-direction:column;gap:12px}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 28px;border-top:1px solid var(--line);font:10px var(--mono);letter-spacing:.8px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);max-width:min(560px,calc(100vw - 32px));padding:11px 16px;background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--blue);font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:9}
.toast.visible{opacity:1;transform:translate(-50%,0)}.toast[data-tone=good]{border-left-color:var(--good)}.toast[data-tone=bad]{border-left-color:var(--bad)}

/* Planned purchases: levels and turrets chosen but not yet paid, then the bar that pays for them together. */
.pips i.plan{background:rgba(255,112,69,.28);border-color:var(--orange-light);border-style:dashed}.pips span b{color:var(--orange-light)}
.track.planned h3::after{content:"PLANNED";margin-left:8px;font:700 8px var(--mono);letter-spacing:1px;color:var(--orange-light);vertical-align:middle}
.stepper{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px;justify-self:end;width:100%}.stepper .button{width:100%;padding-left:0;padding-right:0;justify-content:center}
.cart{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:18px;position:sticky;bottom:12px;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cart h2{margin-bottom:2px}.cart-total{font:700 16px var(--mono);margin-right:6px}
.plan-list{list-style:none;margin:8px 0 0;padding:0;counter-reset:step}
.plan-list li{counter-increment:step;display:grid;grid-template-columns:22px minmax(0,1fr) auto 22px;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.plan-list li::before{content:counter(step);font:10px var(--mono);color:var(--muted)}.plan-list b{font:12px var(--mono)}.plan-list .link{text-decoration:none;color:var(--muted)}.plan-list .link:hover{color:var(--bad)}
.plan-total{display:flex;justify-content:space-between;margin-top:10px;font:700 13px var(--mono)}
.pad.planned circle{stroke:var(--orange-light);stroke-dasharray:4 3;stroke-width:1.8}

@media (max-width:1050px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.split,.split.even,.replay{grid-template-columns:1fr}.track{grid-template-columns:1fr 190px}.track .stat{grid-column:1}.track .button,.track .stepper{grid-column:2;grid-row:1 / span 2}}
@media (max-width:700px){main{padding:18px 16px 32px}.top{padding:12px 16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.figures{flex-wrap:wrap}.buy{grid-template-columns:1fr}.track{grid-template-columns:1fr}.track .button,.track .stepper{grid-column:auto;grid-row:auto}.stepper{justify-self:stretch}.cart{bottom:8px}.cart .row{width:100%}.cart .row .button.primary{flex:1}h1{font-size:24px}.account{margin-left:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}