/* SimGP — night race.
   The game is played from a pit wall at night: carbon and navy chrome, condensed italic capitals, slanted controls that lean forward.
   The venue (the map, the 3D model, the live track) is the floodlit, colourful thing everyone looks at, so the chrome stays dark and quiet.
   Colour carries meaning: blue is what you can do, gold is money, red is danger and race weekend, and each department and building
   category has its own livery colour, used only as small strips, tabs and icons. The gazette is the one old-fashioned paper moment. */
:root{
  color-scheme:dark;
  --page:#0B1220; --surface:#141D2E; --raised:#1B2639; --raised-2:#22304A; --hover:#1F2C44; --well:#0E1626;
  --line:rgba(150,175,215,.13); --line-2:rgba(150,175,215,.26);
  --ink:#EEF2F8; --ink-2:#AEB9CB; --ink-3:#8190A8;
  --blue:#2F8CFF; --blue-2:#6AADFF; --blue-fill:#1F6FEB; --blue-lip:#0C3A88; --blue-wash:rgba(47,140,255,.15); --on-blue:#FFFFFF;
  --go:#34D27B; --go-wash:rgba(52,210,123,.13); --amber:#FFB020; --amber-wash:rgba(255,176,32,.13); --stop:#FF5A52; --stop-wash:rgba(255,90,82,.13);
  --violet:#A98BFF; --sky:#2F8CFF; --gold:#FFC23D; --kerb-red:#E10600;
  --build:#F2B01E; --build-2:#E4A20F;
  /* department liveries: the dock tab and the panel tabs of the department you are in */
  --d-overview:#2F8CFF; --d-build:#FF8A3D; --d-box:#34D27B; --d-mkt:#FF5FA2; --d-ops:#FF5A52; --d-commercial:#22C7B8; --d-people:#A98BFF; --d-finance:#FFC23D; --d-relations:#7FD0FF;
  --acc:var(--blue);
  /* the venue map: a toy model in daylight */
  --map-grass:#CFE5B4; --map-grass-2:#BFDCA0; --map-sand:#EEDDB5; --map-sand-2:#E3CB98; --map-city:#E7EAEE;
  --map-water:#A9D2F0; --map-water-2:#8CC0E8; --map-tree:#6FAF5B; --map-tree-2:#4E9443; --map-asphalt:#4B5361;
  --map-gravel:#E8DCC0; --map-runoff:#D3D8DF; --map-kerb:#E0483E; --map-stand:#3F7FD9;
  --map-ink:#1B2431; --map-paper:#FFFFFF;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Saira','Barlow',system-ui,sans-serif;
  --font-serif:'DM Serif Display',Georgia,serif;
  --r-lg:8px; --r:6px; --r-sm:4px;
  --lift:0 12px 32px -14px rgba(0,0,0,.6);
  /* aliases the scripts and canvas still reference */
  --paper:var(--page); --sheet:var(--surface); --tint:var(--raised); --orange:var(--blue); --on-orange:var(--on-blue); --orange-wash:var(--blue-wash);
  --gulf:var(--blue); --gulf-l:var(--blue-wash); --tarmac:var(--map-asphalt); --wash:var(--blue-wash);
  --green:var(--go); --flag:var(--amber); --kerb:var(--stop); --fg:var(--ink); --muted:var(--ink-2); --dim:var(--ink-3);
  --panel:var(--surface); --panel-2:var(--raised); --purple:var(--violet);
  --font-mono:var(--font-display); --f-display:var(--font-display); --f-body:var(--font-body); --f-mono:var(--font-display);
}
*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;min-height:100dvh;color:var(--ink);font:15px/1.5 var(--font-body);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;
  background-color:var(--page);
  /* floodlight glow over carbon fibre */
  background-image:radial-gradient(ellipse 80% 460px at 50% -80px,rgba(47,140,255,.14),transparent 72%),
    linear-gradient(27deg,#0A101D 5px,transparent 5px),linear-gradient(207deg,#0A101D 5px,transparent 5px),
    linear-gradient(27deg,#0D1524 5px,transparent 5px),linear-gradient(207deg,#0D1524 5px,transparent 5px),
    linear-gradient(90deg,#0B1220 10px,transparent 10px),
    linear-gradient(#0C1322 25%,#0A111E 25%,#0A111E 50%,transparent 50%,transparent 75%,#0D1525 75%,#0D1525);
  background-size:100% 700px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px;
  background-position:0 0,0 5px,10px 0,0 10px,10px 5px,0 0,0 0;
  background-repeat:no-repeat,repeat,repeat,repeat,repeat,repeat,repeat}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
::selection{background:rgba(47,140,255,.4)}
.wrap{max-width:1440px;margin:0 auto;padding-inline:24px}
h1,h2,h3,h4{margin:0;font-family:var(--font-body);color:var(--ink);text-wrap:balance}
h2{font:italic 800 30px/1.05 var(--font-display);font-stretch:74%;text-transform:uppercase;letter-spacing:.01em}
h3{font:italic 800 16.5px/1.25 var(--font-display);font-stretch:78%;text-transform:uppercase;letter-spacing:.035em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h3 small{font:500 13px/1.3 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink-3);margin-left:auto}
p{margin:0}
b{font-weight:650}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.mono{font-family:var(--font-display);font-stretch:88%;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.eyebrow{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0}
.hint{font-size:13px;color:var(--ink-2)}
.good{color:var(--go)} .warn,.yel{color:var(--amber)} .bad{color:var(--stop)} .pur{color:var(--violet)}
.sub{font:italic 800 13.5px/1.3 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:22px 0 8px}
.scroll{overflow-x:auto;min-width:0}
.scroll::-webkit-scrollbar,.tscroll::-webkit-scrollbar,.dock::-webkit-scrollbar{height:8px}
.scroll::-webkit-scrollbar-thumb,.tscroll::-webkit-scrollbar-thumb,.dock::-webkit-scrollbar-thumb{background:rgba(150,175,215,.22);border-radius:4px}

/* ---------- the HUD ---------- */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,#101A2C 0%,#080E1A 100%);box-shadow:0 1px 0 rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;font:italic 800 25px/1 var(--font-display);font-stretch:80%;letter-spacing:.005em;color:#fff}
.logo::before{content:"";width:20px;height:20px;border-radius:3px;flex:none;transform:skewX(-10deg);background:repeating-conic-gradient(#fff 0 25%,#0B1220 0 50%) 0 0/10px 10px;box-shadow:0 0 0 1.5px #fff}
.logo:focus-visible{outline:2px solid var(--blue-2);outline-offset:4px;border-radius:4px}
.evname{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-left:14px;border-left:1px solid var(--line-2)}
.stats{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
/* each readout is a slanted capsule: icon, label, value */
.stat{position:relative;isolation:isolate;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;line-height:1.15;min-width:0;padding:5px 16px 5px 13px}
.stat::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;transform:skewX(-12deg);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.05)}
.stat .ico{display:block;grid-row:1/3;width:19px;height:19px;color:var(--hud,var(--ink-2))}
.stat .k{font-size:11.5px;color:var(--ink-3);font-weight:600}
.stat .v{font:700 18px/1.1 var(--font-display);font-stretch:86%;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.stat.s-cash{--hud:var(--gold)} .stat.s-cash .v{color:var(--gold)}
.stat.s-f1{--hud:#FF6A62} .stat.s-fans{--hud:var(--d-mkt)} .stat.s-contract{--hud:var(--ink-2)}
.stat .v.neg{color:var(--stop)}
.stat .v.up{animation:flashUp .9s ease}.stat .v.down{animation:flashDown .9s ease}
@keyframes flashUp{0%,40%{color:var(--go)}}
@keyframes flashDown{0%,40%{color:var(--stop)}}
.repbar{display:none}
.endbtn{display:flex;margin-left:10px}
.endbtn .btn{white-space:nowrap;font-size:17px;padding:12px 30px 12px 26px}
.endbtn .btn:not(:disabled)::before{animation:glow 2.6s ease-in-out infinite}
.endbtn .btn:not(:disabled)::after{content:"";width:16px;height:12px;flex:none;margin-left:2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 0h4l5 6-5 6H0l5-6zM7 0h4l5 6-5 6H7l5-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 0h4l5 6-5 6H0l5-6zM7 0h4l5 6-5 6H7l5-6z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes glow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--blue-lip),0 0 14px rgba(47,140,255,.35)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--blue-lip),0 0 26px rgba(47,140,255,.7)}}
main{padding-block:30px 124px;overflow-x:clip}

/* ---------- buttons: slanted, with a lip that drops when pressed ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:italic 800 15px/1.1 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.045em;padding:11px 22px;border:0;background:none;color:#fff;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;transform:skewX(-12deg);background:linear-gradient(180deg,#3E98FF 0%,#1F6FEB 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--blue-lip),0 8px 18px -6px rgba(0,0,0,.6);transition:filter .12s,box-shadow .12s}
.btn:hover:not(:disabled)::before{filter:brightness(1.13)}
.btn:active:not(:disabled){transform:translateY(2px)}
.btn:active:not(:disabled)::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 var(--blue-lip)}
.btn:disabled{color:var(--ink-3);cursor:not-allowed;text-shadow:none}
.btn:disabled::before{background:#1A2436;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn:focus-visible{outline:none}
.btn:focus-visible::before{outline:2px solid #fff;outline-offset:3px}
.btn .ico{width:16px;height:16px;stroke-width:2.4}
.btn.ghost{color:var(--ink);text-shadow:none}
.btn.ghost::before{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover:not(:disabled)::before{background:rgba(47,140,255,.12);box-shadow:inset 0 0 0 1.5px var(--blue);filter:none}
.btn.ghost:active:not(:disabled)::before{box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn.big{font-size:17px;padding:13px 28px}
.mini{all:unset;box-sizing:border-box;cursor:pointer;font-size:13px;font-weight:600;line-height:1.25;padding:5px 11px;border-radius:4px;background:var(--raised-2);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--line),0 2px 0 rgba(0,0,0,.4);white-space:nowrap;justify-self:start;transition:background .1s,box-shadow .1s}
.mini:hover{background:#2A3B5A;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(47,140,255,.6),0 2px 0 rgba(0,0,0,.4)}
.mini:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--line),0 1px 0 rgba(0,0,0,.4)}
.mini:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.mini.go{background:var(--blue-fill);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 var(--blue-lip)}
.mini.go:hover{background:#2D7CF6}
.mini.off,.mini:disabled{opacity:.45;cursor:not-allowed}

/* ---------- panels: dark plates with a title bar ---------- */
.panel{--pp-y:18px;--pp-x:20px;background:linear-gradient(180deg,#162036 0%,#131B2B 100%);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pp-y) var(--pp-x);min-width:0;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--lift)}
.panel > h3{margin-bottom:12px}
.panel > h3:first-child{margin:calc(-1 * var(--pp-y)) calc(-1 * var(--pp-x)) 16px;padding:12px var(--pp-x) 11px;border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 70%)}
/* the livery tab in front of every panel title */
.panel > h3::before,.board-h h3::before,.tree-h h3::before{content:"";flex:none;align-self:center;width:5px;height:15px;margin-right:-1px;border-radius:1px;background:var(--acc);transform:skewX(-14deg);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 55%,transparent)}
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable td{padding:7px 0;border-bottom:1px solid var(--line)}
.ptable td:last-child{text-align:right;font-family:var(--font-display);font-stretch:88%;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.ptable tr:last-child td{border-bottom:0}
.ptable .tot td{font-weight:700;border-top:1.5px solid var(--line-2);border-bottom:0;padding-top:9px}
.news{display:grid;gap:9px;padding:0;margin:0;list-style:none}
.news li{padding-left:18px;position:relative;font-size:14px;color:var(--ink-2)}
.news li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:1px;transform:skewX(-14deg);background:var(--line-2)}
.news li.good::before{background:var(--go)} .news li.warn::before{background:var(--amber)} .news li.bad::before{background:var(--stop)}
.news li.good,.news li.warn,.news li.bad{color:var(--ink)}
.chip{font-size:12px;font-weight:600;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.06);color:var(--ink-2);white-space:nowrap;display:inline-block;box-shadow:inset 0 0 0 1px var(--line)}
.chip.good{background:var(--go-wash);color:var(--go);box-shadow:inset 0 0 0 1px rgba(52,210,123,.3)}
.chip.bad{background:var(--stop-wash);color:#FF7A73;box-shadow:inset 0 0 0 1px rgba(255,90,82,.35)}
.chip.ok{background:var(--blue-wash);color:var(--blue-2);box-shadow:inset 0 0 0 1px rgba(47,140,255,.35)}
/* bars are segmented, like a dash display */
.meter{height:8px;background:rgba(255,255,255,.07);border-radius:2px;position:relative;margin-block:8px 4px;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1F6FEB,#55A6FF);border-radius:2px}
.meter i.over{background:linear-gradient(90deg,#D93A33,var(--stop))}
.meter u{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;z-index:1}
.meter::after,.ol-bar::after,.relrow .bt::after,.bar .bt::after,.awbar::after,.v3-meter::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(8,13,24,.55) 10px 12px)}
/* price faders: a dark slot, a lit fill, a chunky knob */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:none;cursor:pointer;--v:50%}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:2px;background:linear-gradient(90deg,#1F6FEB,#55A6FF) 0 0/var(--v) 100% no-repeat,rgba(255,255,255,.09);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:24px;margin-top:-8px;border:0;border-radius:3px;background:linear-gradient(180deg,#FFFFFF,#CBD6E6);box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 0 3px rgba(47,140,255,.35),0 0 12px rgba(47,140,255,.5)}
.rng::-moz-range-track{height:8px;border-radius:2px;background:rgba(255,255,255,.09)}
.rng::-moz-range-progress{height:8px;border-radius:2px;background:linear-gradient(90deg,#1F6FEB,#55A6FF)}
.rng::-moz-range-thumb{width:14px;height:24px;border:0;border-radius:3px;background:linear-gradient(180deg,#FFFFFF,#CBD6E6);box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 0 3px rgba(47,140,255,.35)}
.rng:focus-visible{outline:none}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 0 3px #fff}
.rng:focus-visible::-moz-range-thumb{box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 0 3px #fff}
.price{font:700 32px/1 var(--font-display);font-stretch:84%;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.price.sm{font-size:25px}
.tix-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.check{display:flex;gap:9px;align-items:center;font-size:14px;margin-top:12px;cursor:pointer}
.check input{accent-color:var(--blue);width:16px;height:16px}
.result{padding:11px 14px;border-radius:var(--r);background:var(--go-wash);box-shadow:inset 3px 0 0 var(--go);font-size:14px;animation:pop .25s ease}
.result .eyebrow{color:var(--go);margin-bottom:2px}
.g-empty{padding:14px 16px;color:var(--ink-2);font-size:14px;background:rgba(255,255,255,.025);border-radius:var(--r);border:1px dashed var(--line-2)}
@keyframes pop{from{transform:scale(.98);opacity:0}to{transform:none;opacity:1}}

/* choices: each option is a slab you can press */
.choices{display:grid;gap:6px}
.choice{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:11px 14px 11px 17px;cursor:pointer;background:linear-gradient(180deg,#1E2A40,#1A253A);border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line),0 2px 0 rgba(0,0,0,.35);transition:background .1s,box-shadow .1s}
.choice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:4px 0 0 4px;background:var(--line-2);transition:background .1s}
.choice:hover:not([aria-disabled="true"]){background:linear-gradient(180deg,#24334E,#1F2C44);box-shadow:inset 0 0 0 1px rgba(47,140,255,.55),0 2px 0 rgba(0,0,0,.35)}
.choice:hover:not([aria-disabled="true"])::before{background:var(--blue)}
.choice:hover:not([aria-disabled="true"]) b{color:#fff}
.choice:active:not([aria-disabled="true"]){transform:translateY(1px)}
.choice:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.choice b{font-weight:650}
.choice .cost{font-family:var(--font-display);font-stretch:88%;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.choice small{grid-column:1/-1;color:var(--ink-2);font-size:13px}
.choice[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.hires,.deals{display:grid}
.choice.slim{padding:9px 14px 9px 17px}
.choice.slim small{font-size:12px}
.hires .choice.slim,#offersP .choice.slim,#marketP .choice.slim{background:none;box-shadow:none;border-top:1px solid var(--line);border-radius:0;padding-inline:2px}
.hires .choice.slim::before,#offersP .choice.slim::before,#marketP .choice.slim::before{display:none}
.hires .choice.slim:hover:not([aria-disabled="true"]),#offersP .choice.slim:hover:not([aria-disabled="true"]),#marketP .choice.slim:hover:not([aria-disabled="true"]){background:rgba(47,140,255,.08);box-shadow:none}
.hires .choice.slim:first-child,.panel > h3 + .choice.slim{border-top:0}

/* the desk: this month's decision, an incoming event */
.desk{--pp-y:20px;--pp-x:22px}
.desk:has(.ev-state.bad){border-color:rgba(255,176,32,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(255,176,32,.18),0 0 28px -6px rgba(255,176,32,.28),var(--lift)}
.ev-top{display:flex;align-items:center;gap:13px}
.ev-ico{width:40px;height:40px;display:grid;place-items:center;background:linear-gradient(180deg,#3E98FF,#1F6FEB);color:#fff;border-radius:6px;flex:none;transform:skewX(-10deg);box-shadow:0 2px 0 var(--blue-lip)}
.desk:has(.ev-state.bad) .ev-ico{background:linear-gradient(180deg,#FFC23D,#F09A12);color:#1E1300;box-shadow:0 2px 0 #8A5300}
.ev-ico .ico{width:20px;height:20px;transform:skewX(10deg)}
.ev-top .eyebrow:first-child{font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.ev-top .eyebrow + .eyebrow,.ev-state{font-weight:500}
.ev-state.bad{color:var(--amber)}
.kick{display:flex;justify-content:space-between;gap:10px}
.kick .eyebrow.bad{font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.06em;color:var(--stop)}
.desk h4{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.005em;margin:14px 0 6px}
.desk .body{color:var(--ink-2);font-size:15px;margin-bottom:16px;max-width:64ch}
.desk .result{background:var(--blue-wash);box-shadow:inset 3px 0 0 var(--blue)}
.desk .result .eyebrow{color:var(--blue-2)}

/* ---------- start screen ---------- */
#scr-title{--acc:var(--blue)}
.start{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:36px;align-items:center}
.start-map{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--map-grass);box-shadow:0 0 0 6px rgba(255,255,255,.03),0 30px 60px -20px rgba(0,0,0,.7),0 0 80px -20px rgba(47,140,255,.35)}
.hero-cv{width:100%;aspect-ratio:16/10;display:block}
.start-side{display:grid;gap:18px;align-content:center}
.wordmark{font:italic 900 clamp(72px,9vw,128px)/.82 var(--font-display);font-stretch:72%;letter-spacing:-.005em;display:flex;align-items:flex-end;gap:.1em;color:#fff;text-shadow:0 6px 30px rgba(47,140,255,.35)}
.wordmark i{display:block;width:.4em;height:.4em;margin-bottom:.1em;border-radius:.05em;transform:skewX(-10deg);background:repeating-conic-gradient(#fff 0 25%,#0B1220 0 50%) 0 0/.2em .2em;box-shadow:0 0 0 .03em #fff}
.lede{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.start-side .btn{justify-self:start}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:48px 0 16px;flex-wrap:wrap}
.sec-h h2{font-size:26px;display:flex;align-items:center;gap:12px}
.sec-h h2::before{content:"";width:6px;height:22px;background:var(--acc);transform:skewX(-14deg);border-radius:1px;box-shadow:0 0 10px color-mix(in srgb,var(--acc) 60%,transparent)}
.venues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.venue{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#172238,#131B2B);padding:10px 10px 16px;cursor:pointer;min-width:0;border-radius:var(--r-lg);position:relative;box-shadow:inset 0 0 0 1px var(--line),var(--lift);transition:box-shadow .12s,transform .12s}
.venue:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--lift);transform:translateY(-2px)}
.venue:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.venue[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 1px rgba(47,140,255,.35),0 0 30px -6px rgba(47,140,255,.55),var(--lift)}
.venue[aria-pressed="true"]::after{content:"Selected";position:absolute;top:18px;left:18px;font:italic 800 12.5px/1 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;background:var(--blue-fill);color:#fff;padding:5px 11px;border-radius:2px;transform:skewX(-12deg);box-shadow:0 2px 0 var(--blue-lip)}
.venue canvas{width:100%;aspect-ratio:16/10;display:block;border-radius:5px}
.venue .vt{font:italic 800 21px/1.15 var(--font-display);font-stretch:78%;text-transform:uppercase;letter-spacing:.02em;padding-inline:6px}
.venue .vs{font-size:13px;color:var(--ink-3);padding-inline:6px;margin-top:-6px;order:3}
.venue .vt{order:2}.venue canvas{order:1}.venue .kv{order:4}.venue .vtraits{order:5}
.kv{display:grid;grid-template-columns:1fr auto;gap:0 12px;font-size:13.5px;margin:0;padding:8px 6px 0;border-top:1px solid var(--line)}
.kv dt{color:var(--ink-2);padding:3px 0} .kv dd{margin:0;text-align:right;font-weight:600;padding:3px 0}
.vtraits{display:flex;flex-wrap:wrap;gap:6px;padding-inline:6px}
/* the sign bar sticks to the bottom of the screen while you browse venues, so the next step is always in view */
.sign{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:16px 22px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;padding:18px 20px;background:linear-gradient(180deg,#1A2640,#141C2E);border:1px solid rgba(47,140,255,.45);border-radius:var(--r-lg);box-shadow:0 -14px 40px -10px rgba(0,0,0,.75),0 0 30px -10px rgba(47,140,255,.5),var(--lift)}
.sign .terms .sv{display:block;font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-2);margin-bottom:2px}
.sign .terms{flex:1 1 280px;font-size:14px;color:var(--ink-2)}
.sign .terms b{color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field input{background:var(--well);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink);padding:10px 12px;font:600 17px var(--font-body);width:100%;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.field input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.signbtns{display:flex;gap:12px;flex-wrap:wrap}
@keyframes rolled{from{opacity:.3}to{opacity:1}}
.venues.rolled .venue{animation:rolled .35s ease-out both}

/* ---------- planning: the month and the season strip ---------- */
.stage{min-width:0;display:grid;gap:14px}
.stage[data-tab="overview"]{--acc:var(--d-overview)} .stage[data-tab="build"]{--acc:var(--d-build)} .stage[data-tab="box"]{--acc:var(--d-box)}
.stage[data-tab="mkt"]{--acc:var(--d-mkt)} .stage[data-tab="ops"]{--acc:var(--d-ops)} .stage[data-tab="commercial"]{--acc:var(--d-commercial)}
.stage[data-tab="people"]{--acc:var(--d-people)} .stage[data-tab="finance"]{--acc:var(--d-finance)} .stage[data-tab="relations"]{--acc:var(--d-relations)}
.stage-h{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.mhead{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-width:0}
.month{font:italic 800 40px/1 var(--font-display);font-stretch:72%;text-transform:uppercase;letter-spacing:.005em;color:#fff}
.month span{color:var(--ink-3);font-weight:600}
.tchips{display:flex;gap:8px;flex-wrap:wrap}
.tchip{position:relative;isolation:isolate;font:italic 800 13px/1 var(--font-display);font-stretch:84%;text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;color:var(--ink-2);white-space:nowrap}
.tchip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:2px;transform:skewX(-12deg);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-2)}
.tchip.due{color:#FF8A84}
.tchip.due::before{background:rgba(225,6,0,.16);box-shadow:inset 0 0 0 1px rgba(255,90,82,.55)}
.tchip.now{color:#fff}
.tchip.now::before{background:linear-gradient(180deg,#F0241C,#B80500);box-shadow:0 2px 0 #6E0300,0 0 18px rgba(225,6,0,.45)}
.conds{display:flex;flex-wrap:wrap;gap:6px}
.cond-chip{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:3px;background:var(--amber-wash);color:#FFC768;box-shadow:inset 0 0 0 1px rgba(255,176,32,.35);cursor:help}
.cond-chip.trait{background:var(--blue-wash);color:#8DC0FF;box-shadow:inset 0 0 0 1px rgba(47,140,255,.35)}
.ribbon{background:linear-gradient(180deg,#121B2D,#0F1727);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 18px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.rib-row{display:grid;grid-template-columns:repeat(var(--n),minmax(64px,1fr));min-width:calc(var(--n) * 64px);position:relative;padding-top:10px}
.rib-row::before{content:"";position:absolute;left:0;right:0;top:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.08)}
.rib-row::after{content:"";position:absolute;left:0;top:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,#1F6FEB,#55A6FF);box-shadow:0 0 10px rgba(47,140,255,.7);width:var(--done)}
.rm{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-right:6px}
.rm .dot{width:11px;height:11px;border-radius:2px;transform:skewX(-12deg);background:#101A2C;border:2px solid rgba(150,175,215,.4);position:relative;z-index:1;margin-top:1px}
.rm.past .dot{background:var(--blue);border-color:var(--blue)}
.rm.now .dot{width:15px;height:15px;margin:-1px 0 0 -2px;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 3px rgba(47,140,255,.3),0 0 14px rgba(47,140,255,.9)}
.rm.race .dot{width:17px;height:17px;border-radius:2px;margin:-2px 0 0 -3px;border:1.5px solid #fff;background:repeating-conic-gradient(#fff 0 25%,#0B1220 0 50%) 0 0/7px 7px;box-shadow:0 0 12px rgba(255,255,255,.35)}
.rm .mn{font:italic 800 14px/1.2 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.05em;margin-top:7px;color:var(--ink)}
.rm.past .mn{color:var(--ink-3)}
.rm.now .mn{color:var(--blue-2)}
.rm .yr{font-size:11.5px;color:var(--ink-3);min-height:1em}
.tg{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink-2);line-height:1.3}
.tg.race{color:#FF7A73;font-weight:700}
.tg.done{color:var(--go)}
.tg.hire{color:var(--blue-2)}
.plan{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.col{display:grid;gap:18px;min-width:0}

/* ---------- home: the venue map is the game board ---------- */
.home{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
.board{--pp-y:14px;--pp-x:14px;position:sticky;top:84px}
.board-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-14px -14px 14px;padding:12px 16px 11px;border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 70%);flex-wrap:wrap}
.board-h h3{font-size:17px}
.board .mapwrap{border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.03)}
.board-cap{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin:12px 4px 2px}
.board-cap span{display:flex;align-items:center;gap:6px}
.board-cap i{width:10px;height:10px;border-radius:2px;transform:skewX(-12deg);display:inline-block}
.side{display:grid;gap:14px;min-width:0}
.goalcard{position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(47,140,255,.24),rgba(47,140,255,.07) 65%);border:1px solid rgba(47,140,255,.4);border-radius:var(--r-lg);padding:14px 18px 14px 22px;display:grid;gap:2px}
.goalcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blue);box-shadow:0 0 12px rgba(47,140,255,.8)}
.goalcard .eyebrow{color:var(--blue-2);font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.06em}
.goal{display:block;font-size:17px;font-weight:700;line-height:1.3;color:#fff}
.goal[data-tip]{text-decoration:none}
.goalcard .hint{color:var(--ink-2)}
.mapwrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--map-grass)}
.mapwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* pins on the map: little tokens on the model, in daylight */
.plot{all:unset;box-sizing:border-box;position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:transform .12s ease}
.plot .ico{width:17px;height:17px;stroke-width:2}
.plot:hover,.plot:focus-visible{transform:scale(1.12);z-index:3}
.plot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.plot.built{background:var(--cc);color:#fff;box-shadow:0 0 0 3px var(--map-paper),0 2px 6px rgba(8,14,26,.4);animation:plotIn .45s cubic-bezier(.3,1.6,.5,1) both}
.plot.wip{background:var(--map-paper);color:var(--map-ink);box-shadow:0 2px 6px rgba(8,14,26,.3)}
.plot.wip::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--build) 0 12.5%,var(--map-ink) 0 25%,var(--build) 0 37.5%,var(--map-ink) 0 50%,var(--build) 0 62.5%,var(--map-ink) 0 75%,var(--build) 0 87.5%,var(--map-ink) 0);
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 65%);mask:radial-gradient(circle,transparent 64%,#000 65%);animation:spin 6s linear infinite}
.plot.sel{transform:scale(1.15);z-index:4;box-shadow:0 0 0 3px var(--map-paper),0 0 0 6px var(--blue)}
.plot i{position:absolute;bottom:-6px;right:-7px;font-size:10.5px;font-weight:700;line-height:16px;font-style:normal;background:var(--map-paper);color:var(--map-ink);min-width:16px;height:16px;border-radius:8px;text-align:center;box-shadow:0 1px 2px rgba(8,14,26,.35)}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes plotIn{from{transform:scale(0)}}
.map-banner{display:flex;margin:0 0 10px;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 8px 8px 12px;background:var(--amber-wash);box-shadow:inset 0 0 0 1px rgba(255,176,32,.35);border-radius:var(--r);font-size:13.5px;font-weight:600}
.map-banner .ico{color:var(--amber)}
/* the facility drawer */
.drawer{background:linear-gradient(180deg,#162036,#131B2B);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;animation:pop .2s ease;box-shadow:var(--lift)}
.dr-h{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 26%,transparent),transparent 75%)}
.roundel{transform:skewX(-10deg)}
.roundel .ico{transform:skewX(10deg)}
.dr-h .roundel{width:42px;height:42px;border-radius:7px;background:var(--cc);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.dr-h .roundel .ico{width:20px;height:20px}
.dr-t{font:italic 800 21px/1.15 var(--font-display);font-stretch:78%;text-transform:uppercase;letter-spacing:.02em;color:#fff;display:block;margin:0}
.dr-h .x{all:unset;cursor:pointer;margin-left:auto;width:32px;height:32px;border-radius:6px;color:var(--ink-2);display:grid;place-items:center;font-size:20px;flex:none}
.dr-h .x:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.dr-h .x:focus-visible{outline:2px solid var(--blue-2)}
.dr-b{padding:16px 18px;display:grid;gap:16px}
.tiers{list-style:none;margin:0;padding:0;display:grid;counter-reset:t}
.tiers li{display:grid;grid-template-columns:26px 1fr;gap:1px 12px;padding:9px 0;border-top:1px solid var(--line)}
.tiers li:first-child{border-top:0}
.tiers li::before{counter-increment:t;content:counter(t);grid-row:1/3;width:24px;height:24px;border-radius:4px;transform:skewX(-10deg);border:1.5px solid var(--line-2);display:grid;place-items:center;font:700 12px/1 var(--font-display);color:var(--ink-3)}
.tiers li.done::before{content:"✓";background:var(--go);border-color:var(--go);color:#062513}
.tiers li.wip::before{border-color:var(--build);color:var(--build)}
.tiers li.next::before{border-color:var(--blue);color:var(--blue-2)}
.tiers li.locked{opacity:.55}
.tiers li.todo{opacity:.55}
.tiers li.wip small{color:var(--amber);font-weight:600}
.dr-sum{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:14px}
.dr-pips{grid-column:1/-1;display:flex;gap:4px}
.dr-pips i{flex:1;height:8px;border-radius:2px;transform:skewX(-14deg);background:rgba(255,255,255,.08)}
.dr-pips i.on{background:var(--cc);box-shadow:0 0 8px color-mix(in srgb,var(--cc) 50%,transparent)}
.dr-pips i.wip{background:repeating-linear-gradient(-45deg,var(--build) 0 4px,var(--build-2) 4px 8px)}
.lnk{all:unset;cursor:pointer;color:var(--blue-2);font-weight:650}
.lnk:hover{text-decoration:underline}
.lnk:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;border-radius:3px}
.tiers small{color:var(--ink-2);font-size:13px}
.nextcard{background:var(--raised);border-radius:var(--r);padding:14px;display:grid;gap:10px;box-shadow:inset 0 0 0 1px var(--line)}
.nc-t{font-size:17px;font-weight:700;line-height:1.25}
.fxs{display:flex;flex-wrap:wrap;gap:5px}
.fxs span{font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.costline{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.costline b{color:var(--ink)}
.nextcard .btn{justify-self:start}
.req-note{color:var(--blue-2);font-weight:650}
.prog{height:8px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.prog i{display:block;height:100%;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--build) 0 6px,var(--build-2) 6px 12px);background-size:17px 17px;animation:march 1s linear infinite}
@keyframes march{to{background-position:17px 0}}

/* ---------- the 3D venue ---------- */
.mapwrap.is3d{background:#DCE9F5}
.mapwrap.is3d #vmap{display:none}
.mapwrap canvas.v3{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;outline:none}
.mapwrap canvas.v3.grabbing{cursor:grabbing}
.mapwrap canvas.v3.pointing{cursor:pointer}
.mapwrap.is3d .plot{z-index:2}
.mapwrap.is3d .plot.built{width:22px;height:22px;margin:-11px 0 0 -11px;opacity:.9;box-shadow:0 0 0 2px var(--map-paper),0 2px 6px rgba(8,14,26,.4)}
.mapwrap.is3d .plot.built .ico{width:12px;height:12px}
.mapwrap.is3d .plot i{display:none}
.mapwrap.is3d .plot.built:hover,.mapwrap.is3d .plot.built:focus-visible,.mapwrap.is3d .plot.sel{opacity:1}
.mapwrap.is3d .plot.wip{width:28px;height:28px;margin:-14px 0 0 -14px}
.v3-ui{position:absolute;inset:0;pointer-events:none;z-index:3}
/* overlays on the model are dark glass, so they read over day and night skies alike */
.v3-level{position:absolute;left:12px;top:12px;pointer-events:auto;display:grid;gap:5px;min-width:200px;padding:9px 13px 10px;border-radius:6px;color:var(--ink);background:rgba(9,15,28,.84);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v3-level b{font:italic 800 16px/1.15 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.v3-meter{position:relative;display:block;height:7px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.v3-meter i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#1F6FEB,#55A6FF);box-shadow:0 0 8px rgba(47,140,255,.8)}
.v3-level small{font-size:12px;color:var(--ink-2)}
.v3-level.up{animation:levelUp 1.8s ease}
@keyframes levelUp{0%{transform:scale(1.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 4px var(--blue),0 0 30px rgba(47,140,255,.8)}100%{transform:none}}
.v3-ctl{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;align-items:center;pointer-events:auto}
.v3-btns,.v3-seg{display:flex;gap:2px;padding:3px;border-radius:6px;background:rgba(9,15,28,.84);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v3-btns button,.v3-seg button{all:unset;box-sizing:border-box;cursor:pointer;height:30px;min-width:30px;padding:0 9px;border-radius:4px;display:grid;place-items:center;font:italic 800 12.5px/1 var(--font-display);font-stretch:84%;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.v3-btns button:hover,.v3-seg button:hover{background:rgba(255,255,255,.1);color:#fff}
.v3-btns button:focus-visible,.v3-seg button:focus-visible{outline:2px solid var(--blue-2)}
.v3-btns .ico{width:16px;height:16px}
.v3-seg button[aria-pressed="true"]{background:var(--blue-fill);color:#fff;box-shadow:0 2px 0 var(--blue-lip)}
.v3-hint{position:absolute;left:12px;bottom:12px;margin:0;padding:5px 10px;border-radius:4px;background:rgba(9,15,28,.8);color:#fff;font-size:12.5px;font-weight:600}

/* ---------- the dock: a hotbar of departments ---------- */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:35;display:flex;gap:3px;padding:5px;background:linear-gradient(180deg,rgba(22,32,52,.95),rgba(9,14,26,.97));border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100% - 20px);overflow-x:auto}
.dock button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:3px;padding:8px 13px 7px;border-radius:6px;color:var(--ink-3);position:relative;font:italic 800 12.5px/1.1 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:background .1s,color .1s}
.dock button[data-v="overview"]{--dc:var(--d-overview)} .dock button[data-v="build"]{--dc:var(--d-build)} .dock button[data-v="box"]{--dc:var(--d-box)}
.dock button[data-v="mkt"]{--dc:var(--d-mkt)} .dock button[data-v="ops"]{--dc:var(--d-ops)} .dock button[data-v="commercial"]{--dc:var(--d-commercial)}
.dock button[data-v="people"]{--dc:var(--d-people)} .dock button[data-v="finance"]{--dc:var(--d-finance)} .dock button[data-v="relations"]{--dc:var(--d-relations)}
.dock button .ico{width:21px;height:21px}
.dock button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.dock button:hover .ico{color:var(--dc)}
.dock button:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px}
.dock button[aria-selected="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--dc) 26%,transparent),color-mix(in srgb,var(--dc) 10%,transparent));color:#fff;box-shadow:inset 0 -3px 0 var(--dc),inset 0 0 0 1px color-mix(in srgb,var(--dc) 35%,transparent)}
.dock button[aria-selected="true"] .ico{color:var(--dc);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--dc) 70%,transparent))}
.dock .ds{display:none}
.dock button i{position:absolute;top:3px;right:6px;font:700 10.5px/16px var(--font-display);font-style:normal;background:var(--kerb-red);color:#fff;min-width:16px;height:16px;padding:0 4px;border-radius:3px;text-align:center;box-shadow:0 1px 0 #6E0300}

/* ---------- construction ---------- */
.gantt{min-width:460px;display:grid;gap:6px}
.g-row{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:center;min-height:32px}
.g-l{display:flex;align-items:center;gap:8px;min-width:0}
.g-l b{font-size:14px}
.g-l .g-n{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-l .mini.ns{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:12.5px}
.g-l .mini.ns .ico{width:13px;height:13px}
.g-t{position:relative;height:24px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.g-head .g-t{display:flex;background:none;box-shadow:none;height:auto;overflow:visible}
.g-head .g-t span{flex:1;text-align:center;font:italic 800 12px/1.2 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.g-head .g-t span.rc{color:#FF7A73}
.g-race{position:absolute;top:0;bottom:0;background:repeating-conic-gradient(#fff 0 25%,transparent 0 50%) 0 0/8px 8px;opacity:.1}
.g-bar{font-style:normal;position:absolute;top:3px;bottom:3px;background:linear-gradient(180deg,#3E98FF,#1F6FEB);border-radius:2px;display:flex;align-items:center;padding-inline:8px;min-width:30px;overflow:hidden;box-shadow:0 0 10px -2px rgba(47,140,255,.6)}
.g-bar span{font-size:11.5px;color:#fff;white-space:nowrap;font-weight:650}
.g-bar.late{background:linear-gradient(180deg,#FF6A62,#D93A33);box-shadow:0 0 10px -2px rgba(255,90,82,.6)}
.g-bar.appr{background:#34445F;box-shadow:none}
.g-bar.appr span{color:var(--ink)}
.g-bar.bu{background:repeating-linear-gradient(-45deg,var(--build) 0 6px,var(--build-2) 6px 12px);box-shadow:none}
.g-bar.bu span{color:#1E1300}
.bu-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;background:var(--amber-wash);box-shadow:inset 0 0 0 1px rgba(255,176,32,.3);border-radius:var(--r);margin-bottom:14px}
.bu-row .ico{color:var(--amber)}
.lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.ln{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-content:start;padding:11px 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.ln > .lic{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.06);color:var(--ink-3)}
.ln > .lic .ico{width:17px;height:17px}
.ln.has > .lic{background:var(--cc);color:#fff}
.ln.wip > .lic{background:var(--amber-wash);color:var(--amber)}
.ln.req{border-color:var(--stop)}
.ln-h{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.ln-h b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-h .pips{gap:3px;display:flex}
.ln-h .pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.1)}
.ln-h .pips i.on{background:var(--cc)}
.ln-h .pips i.wip{background:var(--build)}
.ln-cur{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ln > .mini,.ln > .ln-st{grid-column:1/-1;margin-top:6px}
.ln .mini{justify-self:stretch;display:flex;justify-content:space-between;gap:8px;min-width:0}
.ln .mini .nm{overflow:hidden;text-overflow:ellipsis}.ln .mini .pr{font-weight:650;color:var(--blue-2)}
.ln .mini em{font-style:normal}
.ln-st{font-size:13px;font-weight:600;color:var(--amber);padding:5px 0}
.ln-st.lock{color:var(--ink-3);font-weight:500}
.ln-st.done{color:var(--go)}
.lines + .sub,.bu-row + .sub{margin-top:20px}
.buildtop{display:grid;grid-template-columns:1fr;gap:18px}
/* the tech tree: rows are facility lines, columns are tiers, links are what each building needs */
.tree-h{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:-18px -20px 12px;padding:12px 20px 11px;border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 70%)}
.tree-h h3{flex:1 1 auto}
.blue{color:var(--blue-2)}
.tlegend{display:flex;gap:12px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.tlegend .lg::before{content:"";display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px;transform:skewX(-12deg);border:1.5px solid var(--line-2);background:rgba(255,255,255,.04)}
.tlegend .lg.done::before{background:var(--go);border-color:var(--go)}
.tlegend .lg.wip::before{background:var(--build);border-color:var(--build)}
.tlegend .lg.open::before{border-color:var(--blue);background:var(--blue-wash);box-shadow:0 0 6px rgba(47,140,255,.6)}
.tlegend .lg.locked::before{background:none;border-style:dashed}
.tree-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start;margin-top:8px}
.tree{min-width:0}
.tblock{min-width:0}
.tblock h4.sub{display:flex;align-items:center;gap:9px;margin:20px 0 6px;color:var(--ink)}
.tblock h4.sub i{width:7px;height:16px;border-radius:1px;transform:skewX(-14deg);background:var(--cc);box-shadow:0 0 8px color-mix(in srgb,var(--cc) 60%,transparent)}
.tscroll{overflow-x:auto;padding:10px 4px 8px 0}
.tcanvas{position:relative}
.thead{position:relative;height:20px;margin-left:124px}
.thead span{position:absolute;top:0;font:italic 800 11.5px/1.2 var(--font-display);font-stretch:84%;color:var(--ink-3);text-transform:uppercase;letter-spacing:.09em}
.tbody{position:relative;display:grid;grid-template-columns:124px auto}
.tlines{position:relative}
.tl{position:absolute;left:0;width:114px;display:flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.2}
.tarea{position:relative}
.tedges{position:absolute;inset:0;overflow:visible;pointer-events:none}
.tedges path{fill:none;stroke:rgba(150,175,215,.28);stroke-width:2;stroke-dasharray:4 5}
.tedges path.ready{stroke:var(--blue);stroke-dasharray:none;opacity:.65}
.tedges path.on{stroke:var(--cc);stroke-dasharray:none;stroke-width:2.5;opacity:.85}
/* nodes are tiles with a livery strip down the left edge */
.tn{all:unset;box-sizing:border-box;position:absolute;width:176px;height:68px;padding:7px 10px 7px 49px;border-radius:6px;background:linear-gradient(180deg,#1E2A41,#182237);box-shadow:inset 0 0 0 1.5px rgba(150,175,215,.16),0 3px 0 rgba(0,0,0,.4);cursor:pointer;display:grid;align-content:center;gap:3px;transition:box-shadow .12s,transform .12s}
.tn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:6px 0 0 6px;background:var(--cc);opacity:.5}
.tn:hover{transform:translateY(-2px);z-index:2;box-shadow:inset 0 0 0 1.5px rgba(150,175,215,.32),0 5px 0 rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.45)}
.tn:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.tn-i{position:absolute;left:12px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:5px;transform:skewX(-10deg);display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--ink-3)}
.tn-i .ico{width:15px;height:15px;transform:skewX(10deg)}
.tn-n{font-size:13px;font-weight:650;line-height:1.2;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tn-s{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;min-width:0}
.tn-s .ico{width:12px;height:12px;stroke-width:2.2}
.tn.done{background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 26%,#1A2438),color-mix(in srgb,var(--cc) 14%,#151E30));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cc) 60%,transparent),0 3px 0 rgba(0,0,0,.4)}
.tn.done::before{opacity:1}
.tn.done .tn-i{background:var(--cc);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.tn-s.done{color:#5BE597;font-weight:650}
.tn.wip{background:linear-gradient(180deg,#2B2717,#211F18);box-shadow:inset 0 0 0 1.5px var(--build),0 3px 0 rgba(0,0,0,.4)}
.tn.wip .tn-i{background:var(--build);color:#2A1D00}
.tn-s.wip{color:var(--amber);font-weight:650}
.tn-bar{position:absolute;left:49px;right:10px;bottom:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.tn-bar i{display:block;height:100%;background:var(--build)}
.tn.open{background:linear-gradient(180deg,#1C2E4D,#18263F);box-shadow:inset 0 0 0 1.5px var(--blue),0 3px 0 rgba(0,0,0,.4),0 0 18px -2px rgba(47,140,255,.45)}
.tn.open:hover{box-shadow:inset 0 0 0 1.5px var(--blue-2),0 5px 0 rgba(0,0,0,.4),0 0 26px rgba(47,140,255,.55)}
.tn.open .tn-i{background:var(--blue-fill);color:#fff;box-shadow:0 2px 0 var(--blue-lip)}
.tn-s.open{color:var(--blue-2);font-weight:650}
.tn.locked{background:rgba(255,255,255,.025);box-shadow:none;outline:1.5px dashed rgba(150,175,215,.22);outline-offset:-1.5px}
.tn.locked::before{opacity:.2}
.tn.locked:hover{box-shadow:0 8px 20px rgba(0,0,0,.35);outline-color:rgba(150,175,215,.4)}
.tn.locked .tn-n{color:var(--ink-2)}
.tn.locked .tn-i{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(150,175,215,.22)}
.tn.sel{outline:2.5px solid #fff;outline-offset:2px;z-index:3}
.tn.locked.sel{outline:2.5px solid #fff;outline-offset:2px}
.tn.req::after{content:"F1 needs";position:absolute;top:-9px;left:12px;font:italic 800 10.5px/16px var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.05em;background:var(--kerb-red);color:#fff;border-radius:2px;padding:0 6px;transform:skewX(-12deg)}
.tn-new.grant{background:#1C9E55}
.tn-new{position:absolute;top:-9px;right:8px;font:italic 800 10.5px/17px var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.05em;background:var(--blue-fill);color:#fff;border-radius:2px;padding:0 7px;transform:skewX(-12deg);box-shadow:0 0 10px rgba(47,140,255,.6);animation:pop .3s ease}
.tn-x{position:absolute;right:7px;bottom:7px;display:flex;gap:3px}
.tn-x i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ink-3)}
.tn-x i.ok{background:var(--go);border-color:var(--go)}
.insp{position:sticky;top:84px;background:linear-gradient(180deg,#172238,#131B2B);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px;display:grid;gap:14px;max-height:calc(100dvh - 116px);overflow:auto;align-content:start;box-shadow:var(--lift)}
.insp-empty{display:grid;gap:8px;color:var(--ink-2);justify-items:start;padding:6px 2px}
.insp-empty .ico{width:28px;height:28px;color:var(--blue-2)}
.insp-h{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.insp-h .roundel{width:42px;height:42px;border-radius:7px;background:var(--cc);color:#fff;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.insp-h .roundel .ico{width:20px;height:20px}
.insp-h .x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:6px;color:var(--ink-2);display:grid;place-items:center;font-size:20px}
.insp-h .x:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.insp-d{font-size:14px;color:var(--ink-2)}
.insp-sec{display:grid;gap:6px}
.rq{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rq li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.rq li .ico{width:15px;height:15px;color:var(--ink-3)}
.rq li.ok{color:var(--ink)}.rq li.ok .ico{color:var(--go);stroke-width:2.4}
.insp-t td:last-child{text-align:right}
.insp .btn{justify-self:stretch}
.insp .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.unl{display:flex;flex-wrap:wrap;gap:6px}
.unl .mini{display:inline-flex;align-items:center;gap:5px}
.unl .mini .ico{width:13px;height:13px;color:var(--ink-3)}

/* ---------- ops, tickets, marketing ---------- */
.invs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inv{background:linear-gradient(180deg,#1C273C,#192336);border-radius:var(--r);padding:13px 14px;display:grid;gap:10px;min-width:0;box-shadow:inset 0 0 0 1px var(--line)}
.inv-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.inv-n{font-weight:650;font-size:14.5px}
.inv-c{font:650 13.5px/1.2 var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.inv p{font-size:13px;color:var(--ink-2)}
.inv-f{display:flex;align-items:center;justify-content:space-between;gap:8px}
.inv p.inv-e{color:var(--ink)}
.inv p.inv-now{font-size:13.5px;color:var(--go)}
.inv p.inv-now.warn{color:var(--amber)}
.inv p.inv-now.none{color:var(--ink-2)}
.inv p.inv-note{font-size:12.5px;color:var(--ink-3);margin-top:-4px}
.hire-on{display:grid;gap:2px;margin:10px 0}
.hire-on .mini{justify-self:start}
.pips{display:flex;gap:5px;align-items:center}
.pip{width:14px;height:14px;border-radius:2px;transform:skewX(-12deg);background:rgba(255,255,255,.05);border:1.5px solid var(--line-2);transition:background .2s}
.pip.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 8px rgba(47,140,255,.6)}
.pip.own{background:var(--ink-3);border-color:var(--ink-3)}
.pip.lock{border-style:dashed;opacity:.5}
.steps{display:flex;gap:5px;flex-wrap:wrap}
.sbtn{width:30px;height:30px;border:0;border-radius:4px;background:var(--raised-2);color:var(--ink);cursor:pointer;font:700 17px/1 var(--font-display);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--line),0 2px 0 rgba(0,0,0,.4);transition:background .1s}
.sbtn:hover:not(:disabled){background:#2A3B5A;color:#fff;box-shadow:inset 0 0 0 1px var(--blue),0 2px 0 rgba(0,0,0,.4)}
.sbtn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--blue),0 1px 0 rgba(0,0,0,.4)}
.sbtn:disabled{opacity:.35;cursor:not-allowed}
.tier{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.tier:first-of-type{border-top:0;padding-top:2px}
.tier-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tier-h b{font:italic 800 16px/1.2 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.03em}
.tier-row{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:var(--well);padding:3px;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px var(--line)}
.seg button{background:transparent;border:0;border-radius:4px;padding:7px 6px;cursor:pointer;display:grid;text-align:center;color:var(--ink-2)}
.seg button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.seg button b{font-size:13.5px}
.seg button small{font-size:12px;color:var(--ink-3)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,#2A3B5A,#22304A);color:#fff;box-shadow:inset 0 -2px 0 var(--blue),0 1px 0 rgba(0,0,0,.4)}
.seg button[aria-pressed="true"] b{color:#fff}
.seg button[aria-pressed="true"] small{color:var(--ink-2)}
.buzz,.cond{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-block:12px 4px}
.buzz .meter,.cond .meter{margin:0}
.spark{display:flex;gap:4px;align-items:flex-end;height:56px;margin-top:14px}
.spark span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px;max-width:30px}
.spark i{display:block;width:100%;background:rgba(47,140,255,.3);min-height:3px;border-radius:2px 2px 0 0}
.spark span:last-child i{background:var(--blue);box-shadow:0 0 10px rgba(47,140,255,.6)}
.spark em{font-style:normal;font-size:11px;color:var(--ink-3)}
/* marketing */
.mk-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 4px}
.mk-sum div{background:var(--raised);border-radius:var(--r);padding:9px 12px;display:grid;gap:1px;min-width:0;box-shadow:inset 0 0 0 1px var(--line)}
.mk-sum b{font:700 21px/1.2 var(--font-display);font-stretch:86%;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-mini{display:grid;gap:6px;margin-top:10px}
.aw-mini div{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;font-size:13px;color:var(--ink-2)}
.aw-mini i{height:7px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.aw-mini u{display:block;height:100%;background:linear-gradient(90deg,#1F6FEB,#55A6FF);border-radius:2px}
.chs{display:grid;margin-top:10px}
.chrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:6px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.chrow:first-child{border-top:0}
.ch-h{display:grid;gap:4px;min-width:0}
.ch-h b{font-size:14px}
.chrow.on .ch-h b{color:var(--blue-2)}
.sgs{display:flex;gap:4px;flex-wrap:wrap}
.sg{font-size:11px;font-weight:650;padding:1px 7px;border-radius:3px;background:rgba(255,255,255,.05);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.sg-local{background:rgba(52,210,123,.12);box-shadow:inset 0 0 0 1px rgba(52,210,123,.3);color:#6BE3A0}
.sg-national{background:var(--blue-wash);box-shadow:inset 0 0 0 1px rgba(47,140,255,.35);color:#8DC0FF}
.sg-intl{background:rgba(169,139,255,.14);box-shadow:inset 0 0 0 1px rgba(169,139,255,.35);color:#C4B0FF}
.sg-corp{background:var(--amber-wash);box-shadow:inset 0 0 0 1px rgba(255,176,32,.35);color:#FFC768}
.ch-seg{grid-template-columns:repeat(4,minmax(0,1fr))}
.ch-seg button{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 4px}
.ch-seg button[aria-pressed="true"]{color:#fff}
.camps{display:grid;gap:8px;margin-top:10px}
.camps .choice .fxs{grid-column:1/-1;margin-top:5px}
.camps .choice.done{background:rgba(255,255,255,.03)}
.auds{display:grid;gap:12px;margin-top:12px}
.aud-h{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;font-size:14px}
.awbar{position:relative;height:10px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:5px;overflow:hidden}
.awbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1F6FEB,#55A6FF);border-radius:2px}
.awbar u{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55);z-index:1}
.mk-hist{display:flex;gap:4px;align-items:flex-end;height:54px;margin-top:12px}
.mk-hist span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px;max-width:28px}
.mk-hist i{display:block;width:100%;background:rgba(47,140,255,.3);border-radius:2px 2px 0 0}
.mk-hist span:last-child i{background:var(--blue);box-shadow:0 0 10px rgba(47,140,255,.6)}
.mk-hist em{font-style:normal;font-size:11px;color:var(--ink-3)}
.msgs{display:grid;gap:8px;margin-top:10px}
.msgs .choice[aria-pressed="true"]{background:linear-gradient(180deg,#1C2E4D,#18263F);box-shadow:inset 0 0 0 1.5px var(--blue),0 0 18px -4px rgba(47,140,255,.5)}
.msgs .choice[aria-pressed="true"]::before{background:var(--blue)}
.msgs .choice[aria-pressed="true"] .cost{color:var(--blue-2)}

/* ---------- sponsors, staff, money: rows, not boxes ---------- */
.deal,.loan{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 2px;border-top:1px solid var(--line)}
.deals .deal:first-child{border-top:0}
.deals{margin-bottom:6px}
.loan{grid-template-columns:1fr auto}
#loanP .loan:first-of-type{border-top:0}
.deal small,.loan small{display:block;color:var(--ink-3);font-size:12.5px}
.staff{padding:11px 2px;border-top:1px solid var(--line);display:grid;gap:4px}
.staff:first-of-type{border-top:0}
.staff-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.staff-h b{font-size:14.5px}
.staff-f{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stars{color:var(--gold);letter-spacing:1px;font-size:13px;white-space:nowrap;text-shadow:0 0 8px rgba(255,194,61,.35)}
.stars .off{color:rgba(255,255,255,.14);text-shadow:none}
.bigcash{font:700 46px/1 var(--font-display);font-stretch:84%;font-variant-numeric:tabular-nums;letter-spacing:-.005em;margin-bottom:8px;color:var(--gold);text-shadow:0 0 24px rgba(255,194,61,.25)}
.haul{font:700 36px/1 var(--font-display);font-stretch:84%;font-variant-numeric:tabular-nums;letter-spacing:-.005em;margin-bottom:12px;color:var(--gold)}
.reqs{list-style:none;padding:0;margin:0;display:grid}
.reqs li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:9px 0;border-top:1px solid var(--line)}
.reqs li:first-child{border-top:0}
.relrow{display:grid;grid-template-columns:92px 1fr 34px 34px;gap:10px;align-items:center;font-size:14px;margin-block:6px}
.relrow > span{font-weight:600}
.relrow .bt{height:8px;background:rgba(255,255,255,.08);border-radius:2px;position:relative;overflow:hidden}
.relrow .bt i{position:absolute;inset:0 auto 0 0;border-radius:2px}
.relrow b{font:700 14px/1.2 var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums;text-align:right}
.relcard{padding:1px 0}
.standings{display:grid;font-size:14px}
.standings div{display:grid;grid-template-columns:20px 5px 44px 1fr 40px 40px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.standings div:first-child{border-top:0}
.standings .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc{width:5px;height:15px;border-radius:1px;background:var(--tc);flex:none;transform:skewX(-12deg)}
.bill{display:grid;font-size:14px}
.bill div{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2);padding:6px 0;border-top:1px solid var(--line)}
.bill div:first-child{border-top:0}
.bill div b{color:var(--ink);white-space:nowrap;font-family:var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums}
.bill div b.good{color:var(--go)} .bill div b.bad{color:var(--stop)}
.bill.tot{border-top:1.5px solid var(--line-2);margin-top:2px}
.bill.tot div{color:var(--ink);font-weight:700;border-top:0}
.bill.tot b{font-size:17px}
.adv-h{font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.sched{display:grid;gap:7px}
.sc-row{display:grid;grid-template-columns:36px 1fr 66px;gap:10px;align-items:center;font-size:13.5px}
.sc-row span{font-weight:600;color:var(--ink-2)}
.sc-row b{text-align:right;font-family:var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums}
.sc-bar{display:flex;height:8px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;gap:1px}
.sc-bar i,.legend i{display:block;height:100%}
.sc-bar .b,.legend .b{background:var(--build-2)} .sc-bar .f,.legend .f{background:var(--blue)} .sc-bar .r,.legend .r{background:#4A5B78}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:2px}
.opps{display:grid;gap:12px}
.opp{display:grid;gap:8px;padding:2px 0 0}
.opp + .opp{border-top:1px solid var(--line);padding-top:14px}
.opp.done{opacity:.7}
.opp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.opp-h b{font-size:15px}
.opp p{font-size:14px;color:var(--ink-2)}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.todo li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:14px}
.todo li::before{content:"";width:9px;height:9px;margin:6px 0 0 4px;border-radius:1px;transform:skewX(-14deg);background:var(--stop);box-shadow:0 0 6px rgba(255,90,82,.5)}
.todo li.ok::before{background:var(--go);box-shadow:0 0 6px rgba(52,210,123,.4)}
.outlook{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.outlook span{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650;padding:3px 10px 3px 8px;border-radius:4px;background:var(--raised)}
.outlook span .ico{width:15px;height:15px;color:var(--ink-3)}
.outlook span.bad{background:var(--stop-wash);color:var(--stop)}
/* the race-day checklist: what blocks the turn, what will hurt race day, and the three numbers that matter */
.ck-sec{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.ck-sec:first-of-type{border-top:0;padding-top:4px}
.ck-sec .eyebrow{font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.ck-sec .eyebrow .hint{font:500 12px var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink-3)}
.ck-sec.blocked{background:var(--stop-wash);box-shadow:inset 0 0 0 1px rgba(255,90,82,.4),inset 4px 0 0 var(--stop);margin:2px -12px;padding:12px 12px 12px 16px;border-radius:var(--r);border-top:0}
.ck-sec.blocked .eyebrow{color:#FF7A73}
.ck-sec.blocked + .ck-sec{border-top:0}
.todo li.blk{grid-template-columns:18px 1fr auto;align-items:center}
.todo li.blk .lnk{white-space:nowrap}
.outlook2{display:grid;gap:10px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.outlook2 > div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.ol-l{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}
.ol-l .ico{width:15px;height:15px;color:var(--ink-3)}
.outlook2 b{font:700 16px/1.2 var(--font-display);font-stretch:86%;font-variant-numeric:tabular-nums;white-space:nowrap}
.outlook2 b small{font:500 12.5px var(--font-body);color:var(--ink-3)}
.ol-bar{position:relative;grid-column:1/-1;height:8px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ol-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#1F6FEB,#55A6FF)}
.ol-bar.bad i{background:linear-gradient(90deg,#D93A33,var(--stop))}
.outlook2 > div.bad b,.outlook2 > div.bad .ol-l{color:var(--stop)}
.desk.flash{animation:flash 1.2s ease}
@keyframes flash{0%,100%{}25%{box-shadow:0 0 0 4px var(--stop-wash),0 0 0 6px var(--stop),0 0 30px rgba(255,90,82,.5)}}

/* ---------- race weekend ---------- */
#scr-weekend{--acc:var(--d-ops)}
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.day{position:relative;background:linear-gradient(180deg,#162036,#131B2B);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:0 10px;box-shadow:var(--lift)}
.day .eyebrow{grid-column:1/-1}
.day.now{border-color:var(--stop);box-shadow:0 0 0 1px var(--stop),0 0 26px -6px rgba(255,90,82,.55),var(--lift)}
.day.now::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:repeating-linear-gradient(90deg,var(--kerb-red) 0 16px,#EDEFF3 16px 32px)}
.day.now .eyebrow{color:#FF7A73}
.day .dn{font:italic 800 22px/1.15 var(--font-display);font-stretch:78%;text-transform:uppercase;letter-spacing:.02em;grid-column:1/-1}
.day .ds{font-size:13px;color:var(--ink-2)}
.day .da{font:700 14px/1.3 var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums;text-align:right}
.wk-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.grid-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;font-size:14px}
.grid-list div{display:flex;gap:9px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.grid-list div:nth-child(-n+2){border-top:0}
.grid-list b{font-family:var(--font-display);font-stretch:88%;font-weight:700;letter-spacing:.03em}
.race-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.race-main{display:grid;gap:14px;min-width:0}
.rbar{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;justify-content:space-between}
.flagchip{position:relative;isolation:isolate;font:italic 800 14px/1 var(--font-display);font-stretch:84%;text-transform:uppercase;letter-spacing:.06em;padding:7px 14px;color:#fff;background:none}
.flagchip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:2px;transform:skewX(-12deg);background:#1C9E55;box-shadow:0 2px 0 #0B5A2E,0 0 16px rgba(52,210,123,.35)}
.flagchip.VSC,.flagchip.SC{color:#2A1D00}
.flagchip.VSC::before,.flagchip.SC::before{background:#F2B01E;box-shadow:0 2px 0 #8A5A00,0 0 18px rgba(242,176,30,.5)}
.flagchip.RED::before{background:var(--kerb-red);box-shadow:0 2px 0 #6E0300,0 0 18px rgba(225,6,0,.55)}
.flagchip.CHQ{color:#0B1220;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.flagchip.CHQ::before{background:repeating-conic-gradient(#0B1220 0 25%,#fff 0 50%) 0 0/12px 12px;box-shadow:0 0 0 1.5px #fff}
.flagchip.PRE{color:var(--ink)}
.flagchip.PRE::before{background:var(--raised-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.lapc{font:italic 800 32px/1 var(--font-display);font-stretch:78%;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.01em}
.lapc small{font-size:17px;font-weight:600;color:var(--ink-3)}
.speed{display:flex;gap:2px;background:var(--well);padding:3px;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px var(--line)}
.speed button{background:transparent;border:0;padding:6px 12px;font:700 13.5px/1 var(--font-display);font-stretch:88%;cursor:pointer;border-radius:4px;color:var(--ink-2)}
.speed button:hover{color:#fff;background:rgba(255,255,255,.06)}
.speed button[aria-pressed="true"]{background:var(--blue-fill);color:#fff;box-shadow:0 2px 0 var(--blue-lip)}
.trk{position:relative;overflow:hidden;aspect-ratio:16/10;max-width:100%;background:var(--map-grass);border:1px solid rgba(0,0,0,.5);border-radius:var(--r-lg);box-shadow:0 0 0 4px rgba(255,255,255,.03),var(--lift)}
.trk canvas{width:100%;height:100%;display:block}
.lights{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.lights .row{display:flex;gap:12px;background:#05080F;padding:14px 18px;border-radius:8px;box-shadow:0 0 0 2px #1B2639,0 12px 30px rgba(0,0,0,.6)}
.lights .lt{width:clamp(22px,4vw,36px);aspect-ratio:1;border-radius:50%;background:#2A1414;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.lights .lt.on{background:#FF3B30;box-shadow:0 0 18px #FF3B30,0 0 40px rgba(255,59,48,.6)}
.rc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.call{background:linear-gradient(180deg,rgba(255,176,32,.18),rgba(255,176,32,.07)),var(--surface);color:var(--ink);padding:16px;display:grid;gap:10px;min-width:0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,176,32,.55),inset 4px 0 0 var(--amber),0 0 28px -8px rgba(255,176,32,.45);animation:pop .25s ease}
.call .eyebrow{font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.07em;color:var(--amber)}
.call.calm{background:linear-gradient(180deg,#162036,#131B2B);box-shadow:inset 0 0 0 1px var(--line);animation:none}
.call.calm .eyebrow{color:var(--ink-3)}
.call-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.timer{flex:0 0 120px;height:7px;background:rgba(255,255,255,.1);border-radius:2px;position:relative;overflow:hidden}
.timer i{position:absolute;inset:0 auto 0 0;background:var(--stop);border-radius:2px;box-shadow:0 0 8px rgba(255,90,82,.7)}
.call-t{font-size:19px;font-weight:700;line-height:1.25}
.call-hint{font-size:14px;color:var(--ink-2)}
.rd{font-size:13.5px;font-weight:650;color:var(--stop)}
.rbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.rbtn{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 12px;background:linear-gradient(180deg,#22304A,#1C283E);box-shadow:inset 0 0 0 1px var(--line-2),0 2px 0 rgba(0,0,0,.4);border-radius:var(--r-sm);display:grid;gap:2px;min-width:0;transition:box-shadow .1s,background .1s}
.rbtn b{font-size:14.5px}
.rbtn small{font-size:12.5px;color:var(--ink-2)}
.rbtn:hover{box-shadow:inset 0 0 0 1.5px var(--blue),0 2px 0 rgba(0,0,0,.4),0 0 16px -4px rgba(47,140,255,.6);background:linear-gradient(180deg,#26385A,#1F2C44)}
.rbtn:active{transform:translateY(1px)}
.rbtn:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.log{background:linear-gradient(180deg,#121A2A,#0F1726);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;font-size:13.5px;display:grid;gap:5px;align-content:start;min-height:140px;min-width:0}
.log div{display:grid;grid-template-columns:34px 1fr;gap:6px}
.log .l{color:var(--ink-3);font:700 12.5px/1.6 var(--font-display);font-stretch:86%;font-variant-numeric:tabular-nums}
.log .inc,.log .warn{color:var(--amber)} .log .bad{color:var(--stop)} .log .good{color:var(--go)}
.crowd{display:flex;gap:6px 20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.crowd b{color:var(--ink)}
/* the timing tower, as on the broadcast */
.tower{background:rgba(7,11,20,.94);border:1px solid var(--line-2);border-radius:var(--r-lg);font-size:13.5px;min-width:0;overflow:hidden;box-shadow:var(--lift)}
.tower .th{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(90deg,#B80500,#E10600 60%,#B80500);font:italic 800 13.5px/1 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.07em;color:#fff}
.tr{display:grid;grid-template-columns:20px 4px 36px 34px 1fr 34px;gap:7px;align-items:center;padding:0 12px;height:28px;border-top:1px solid rgba(255,255,255,.05)}
.tr:nth-child(odd){background:rgba(255,255,255,.022)}
.tyc{display:flex;align-items:center;gap:3px}
.ty{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--tc);color:var(--tf);font:800 10px/1 var(--font-display);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.15)}
.ta{font:600 11px/1 var(--font-display);color:var(--ink-3)}
.gapm{all:unset;cursor:pointer;font:italic 800 12px/1 var(--font-display);font-stretch:84%;text-transform:uppercase;letter-spacing:.05em;color:#fff;padding:4px 8px;border-radius:3px;background:rgba(0,0,0,.25)}
.gapm:hover{background:rgba(0,0,0,.4)}
.tr .s.pen{color:var(--stop)} .tr .s.drs{color:var(--go)}
.rbar-l{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rchip{font-size:12.5px;font-weight:650;padding:4px 10px;border-radius:3px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.rchip:empty{display:none}
.rchip.wet1{background:rgba(47,140,255,.14);color:#8DC0FF;box-shadow:inset 0 0 0 1px rgba(47,140,255,.35)}.rchip.wet2{background:rgba(47,140,255,.26);color:#B8D8FF;box-shadow:inset 0 0 0 1px rgba(47,140,255,.5)}.rchip.wet3{background:var(--blue-fill);color:#fff;box-shadow:0 0 14px rgba(47,140,255,.5)}
.rchip.drs-on{background:var(--go-wash);color:var(--go);box-shadow:inset 0 0 0 1px rgba(52,210,123,.35)}
.log .pur{color:var(--violet)}
.res{display:grid;gap:2px}
.res > div{display:grid;grid-template-columns:22px 4px 40px 1fr auto;gap:10px;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:14px}
.res > div:first-child{border-top:0}
.res b{font-family:var(--font-display);font-stretch:88%;font-weight:700;letter-spacing:.03em}
.res .tc{height:16px;border-radius:1px;background:var(--tc)}
.tyl{display:flex;align-items:center;gap:0}
.tyl i{width:8px;height:1.5px;background:var(--line-2)}
.tr .p{text-align:right;color:var(--ink-2);font:700 12.5px/1 var(--font-display);font-variant-numeric:tabular-nums}
.tr .b{height:15px;border-radius:1px;background:var(--tc);transform:skewX(-12deg)}
.tr .c{font:700 13.5px/1 var(--font-display);font-stretch:88%;letter-spacing:.04em;color:#fff}
.tr .g{text-align:right;color:var(--ink-2);font:600 12.5px/1 var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums}
.tr .s{text-align:right;font:700 11.5px/1 var(--font-display);font-stretch:88%;color:var(--ink-3)}
.tr.out{opacity:.4}
.tr .s.pit{color:var(--amber)} .tr .s.fl{color:var(--violet)}
.tr.lead{background:linear-gradient(90deg,rgba(47,140,255,.24),rgba(47,140,255,.06))}
.tr.lead .g{color:#fff;font-weight:700}

/* ---------- review ---------- */
#scr-report{--acc:var(--gold)}
#scr-report > h2,#scr-weekend > h2{font-size:34px}
.rep{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:20px}
.verdict{grid-column:span 4;display:grid;gap:12px;align-content:start;overflow:hidden}
.grade{font:italic 900 120px/.85 var(--font-display);font-stretch:72%;letter-spacing:-.01em;color:var(--gold);text-shadow:0 0 40px rgba(255,194,61,.35);animation:gradeIn .6s cubic-bezier(.3,1.5,.5,1) both}
.grade.bad{color:var(--stop);text-shadow:0 0 40px rgba(255,90,82,.35)}
.grade-l{font:italic 800 20px/1.2 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.02em}
@keyframes gradeIn{from{transform:scale(1.5);opacity:0}}
.scores,.pnl{grid-column:span 4}
.podium{grid-column:span 5}
.notes{grid-column:span 7}
.hist{grid-column:span 12}
.bar{display:grid;gap:3px;margin-bottom:12px}
.bar .bl{display:flex;justify-content:space-between;font-size:14px}
.bar .bl b{font-family:var(--font-display);font-stretch:88%;font-variant-numeric:tabular-nums}
.bar .bt{height:8px;background:rgba(255,255,255,.08);border-radius:2px;position:relative;overflow:hidden}
.bar .bt i{position:absolute;inset:0 auto 0 0;border-radius:2px;animation:grow .7s ease both}
@keyframes grow{from{width:0!important}}
.pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;margin-bottom:14px}
.pod div{background:linear-gradient(180deg,#22304A,#1A253A);border-radius:var(--r-sm);border-top:5px solid var(--tc);padding:12px 10px;display:grid;gap:1px;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.pod .pn{font:italic 900 28px/1 var(--font-display);font-stretch:78%}
.pod div:nth-child(1) .pn{color:var(--gold);text-shadow:0 0 18px rgba(255,194,61,.4)}
.pod .pc{font:700 16px/1.2 var(--font-display);font-stretch:88%;letter-spacing:.04em}
.pod .pt{font-size:12.5px;color:var(--ink-2)}
.pod div:nth-child(1){order:2;padding-block:24px}
.pod div:nth-child(2){order:1;padding-block:16px}
.pod div:nth-child(3){order:3}
.htable{width:100%;border-collapse:collapse;font-size:14px;min-width:660px}
.htable th{text-align:left;font:italic 800 12.5px/1.2 var(--font-display);font-stretch:84%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:6px 8px;border-bottom:1.5px solid var(--line-2)}
.htable td{padding:8px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-stretch:90%;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:14px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.status{padding:11px 14px;background:var(--raised);font-size:14px;border-radius:var(--r);box-shadow:inset 3px 0 0 var(--line-2)}
.status.good{background:var(--go-wash);box-shadow:inset 3px 0 0 var(--go)}
.status.bad{background:var(--stop-wash);box-shadow:inset 3px 0 0 var(--stop)}
.legacy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.legacy div{background:var(--raised);border-radius:var(--r);padding:12px;display:grid;gap:2px;box-shadow:inset 0 0 0 1px var(--line)}
.legacy b{font:700 26px/1.1 var(--font-display);font-stretch:84%;font-variant-numeric:tabular-nums}
.achs{display:flex;flex-wrap:wrap;gap:6px}
.ach{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:3px;background:rgba(255,255,255,.04);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.ach.on{background:rgba(255,194,61,.14);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,194,61,.45),0 0 12px -4px rgba(255,194,61,.5)}
.sec-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:linear-gradient(180deg,#22304A,#1B2639);color:var(--ink);padding:11px 18px 11px 20px;font-weight:600;font-size:14px;z-index:60;max-width:calc(100% - 32px);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2),inset 4px 0 0 var(--blue),0 12px 30px rgba(0,0,0,.55);animation:pop .2s ease}

/* ---------- floating money ---------- */
.fx{position:fixed;z-index:90;pointer-events:none;font:700 17px/1.2 var(--font-display);font-stretch:86%;font-variant-numeric:tabular-nums;color:var(--stop);background:#0E1626;border-radius:3px;padding:3px 10px;box-shadow:inset 0 0 0 1px var(--line-2),0 6px 16px rgba(0,0,0,.5);animation:fxUp 1.1s ease-out forwards;white-space:nowrap;transform:translate(-50%,-50%)}
.fx.plus{color:var(--go)}
@keyframes fxUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}15%{opacity:1;transform:translate(-50%,-80%)}100%{opacity:0;transform:translate(-50%,-220%)}}

/* ---------- the gazette: the one old-fashioned moment, printed on paper ---------- */
.turn-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(3,6,12,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.turn-card{width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#FAF7EF;color:#211D16;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.65);padding:22px 26px;animation:paperIn .45s cubic-bezier(.2,1.2,.4,1) both}
/* the paper keeps its own ink */
.turn-card:not(.crisis-card){color-scheme:light;--ink:#211D16;--ink-2:#4F483B;--ink-3:#6E6555;--line:#D6CDB8;--line-2:#BFB49C;--go:#1E7A45;--stop:#B42D2D;--amber:#8A5A00;--violet:#6B45A6;--raised:#F1EBDD}
@keyframes paperIn{from{transform:translateY(30px) rotate(-2deg);opacity:0}}
.gz-mast{text-align:center;border-bottom:3px double #211D16;padding-bottom:8px;margin-bottom:6px}
.gz-mast b{display:block;font-family:var(--font-serif);font-size:clamp(28px,5.4vw,44px);line-height:1;font-weight:400}
.gz-date{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;border-bottom:1px solid #211D16;padding:4px 0;margin-bottom:14px}
.gz-head{font-family:var(--font-serif)}
.gz-cols{columns:2 220px;column-gap:26px;column-rule:1px solid #D6CDB8;font-family:Georgia,serif;font-size:14px;line-height:1.5;font-variant-numeric:normal}
.gz-cols p{margin:0 0 10px;break-inside:avoid}
.gz-acc{margin:6px 0 4px;padding:12px 14px;border:1px solid #211D16;background:#FFFDF7;break-inside:avoid;font-family:var(--font-body)}
.gz-acc .eyebrow{color:#6E6555}
.gz-acc .tc-cash{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.gz-acc .from{color:#8E8574;font-size:13px;text-decoration:line-through}
.gz-acc .to{font-size:24px;font-weight:700;letter-spacing:-.01em}
.gz-acc .dl{margin-left:auto;font-weight:700}
.tc-rows{display:grid;gap:3px}
.tc-row{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.tc-row b{font-weight:650}
.turn-card .btn{width:100%;margin-top:18px}

/* ---------- the loader: the world thinking between turns, and the first build of a career ---------- */
.loader-ov{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(3,6,12,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .15s ease;transition:opacity .28s ease}
.loader-ov.out{opacity:0;pointer-events:none}
.loader-card{width:min(440px,100%);display:grid;gap:14px;padding:22px 24px 20px;border-radius:var(--r-lg);background:linear-gradient(180deg,#1A2438,#131B2B);box-shadow:inset 0 0 0 1px var(--line-2),0 0 60px -14px rgba(47,140,255,.45),0 30px 80px rgba(0,0,0,.65)}
.ld-top{display:flex;align-items:center;gap:14px}
.ld-flag{width:34px;height:34px;flex:none;border-radius:4px;transform:skewX(-10deg);background:repeating-conic-gradient(#fff 0 25%,#0B1220 0 50%) 0 0/11px 11px;box-shadow:0 0 0 1.5px #fff;animation:ldWave 1.1s ease-in-out infinite alternate}
@keyframes ldWave{from{transform:skewX(-10deg) rotate(-6deg)}to{transform:skewX(-16deg) rotate(6deg)}}
.ld-sub{font:italic 800 12.5px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.07em;color:var(--blue-2)}
.ld-title{font:italic 800 24px/1.05 var(--font-display);font-stretch:76%;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.ld-bar{position:relative;height:8px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ld-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:linear-gradient(90deg,#1F6FEB,#55A6FF);box-shadow:0 0 10px rgba(47,140,255,.8);transition:width .2s linear}
.ld-bar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(8,13,24,.55) 10px 12px)}
.ld-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ld-steps li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3);transition:color .15s}
.ld-steps li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid var(--line-2)}
.ld-steps li.on{color:var(--ink)}
.ld-steps li.on::before{border-color:var(--blue) transparent var(--blue) var(--blue);animation:spin .7s linear infinite}
.ld-steps li.done{color:var(--ink-2)}
.ld-steps li.done::before{border:0;background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23062513' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}

/* ---------- the guided tour ---------- */
.tour-block{position:fixed;inset:0;z-index:90}
.tour-spot{position:fixed;z-index:91;pointer-events:none;border-radius:10px;box-shadow:0 0 0 2px var(--blue-2),0 0 24px 2px rgba(47,140,255,.55),0 0 0 200vmax rgba(3,6,12,.74);transition:border-radius .2s}
.tour-spot.none{box-shadow:0 0 0 200vmax rgba(3,6,12,.74)}
.tour-card{position:fixed;z-index:92;left:0;top:0;width:min(390px,calc(100vw - 24px));max-height:calc(100dvh - 28px);overflow:auto;display:grid;gap:10px;padding:16px 20px 16px;border-radius:var(--r-lg);background:linear-gradient(180deg,#1C2840,#141C2E);box-shadow:inset 0 0 0 1px rgba(47,140,255,.5),0 0 40px -12px rgba(47,140,255,.55),0 24px 60px rgba(0,0,0,.65)}
.tour-card.in{animation:pop .22s ease}
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tc-step{font:italic 800 12.5px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.07em;color:var(--blue-2)}
.tc-t{font:italic 800 22px/1.1 var(--font-display);font-stretch:78%;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin:0;display:block}
.tc-b{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tc-b b{color:var(--ink)}
.tc-dots{display:flex;gap:4px;margin-top:2px}
.tc-dots i{flex:1;height:4px;border-radius:2px;transform:skewX(-14deg);background:rgba(255,255,255,.1)}
.tc-dots i.on{background:var(--blue);box-shadow:0 0 6px rgba(47,140,255,.6)}
.tc-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px}
.tc-f span{display:flex;gap:10px}
.tour-card .btn{padding:9px 18px;font-size:14px}
.tc-skip{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-3)}
.tc-skip:hover{color:var(--ink);text-decoration:underline}
.tc-skip:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:3px}
.tour-pill{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;border-radius:6px;background:linear-gradient(180deg,#1F2D48,#172238);box-shadow:inset 0 0 0 1px rgba(47,140,255,.55),0 0 22px -6px rgba(47,140,255,.6),0 10px 26px rgba(0,0,0,.5);animation:pop .25s ease}
.tour-pill button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--ink);padding:9px 12px}
.tour-pill .tp-go .ico{width:16px;height:16px;color:var(--blue-2)}
.tour-pill .tp-go:hover{color:#fff}
.tour-pill .tp-x{padding:9px 12px;border-left:1px solid var(--line-2);color:var(--ink-3);font-size:17px;line-height:1}
.tour-pill .tp-x:hover{color:#fff}
.tour-pill button:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px}
.hudhelp{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:4px;transform:skewX(-10deg);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-2);font:italic 800 16px/1 var(--font-display)}
.hudhelp span{transform:skewX(10deg)}
.hudhelp:hover{color:#fff;background:rgba(47,140,255,.14);box-shadow:inset 0 0 0 1.5px var(--blue)}
.hudhelp:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.hudhelp[hidden]{display:none}

/* ---------- share: the challenge panel on the season review and at game over ---------- */
.rep.has-share .share-p{grid-column:span 8}
.rep.has-share .scores,.rep.has-share .pnl,.rep.has-share .podium{grid-column:span 4}
.rep.has-share .notes{grid-column:span 12}
.share-p{--acc:var(--gold);display:grid;gap:14px;align-content:start;scroll-margin-top:96px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,194,61,.22),0 0 50px -24px rgba(255,194,61,.55),var(--lift)}
.share-p.loss{--acc:var(--stop);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,90,82,.25),0 0 50px -24px rgba(255,90,82,.55),var(--lift)}
.share-p > h3:first-child{margin-bottom:2px}
.sh-vs{position:relative;display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;padding:11px 14px;border-radius:var(--r);background:var(--go-wash);box-shadow:inset 3px 0 0 var(--go);font-size:14.5px}
.sh-vs b{font:italic 800 15px/1.1 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;color:var(--go);white-space:nowrap}
.sh-vs.lose{background:var(--stop-wash);box-shadow:inset 3px 0 0 var(--stop)}.sh-vs.lose b{color:#FF7A73}
.sh-vs.tie{background:var(--amber-wash);box-shadow:inset 3px 0 0 var(--amber)}.sh-vs.tie b{color:var(--amber)}
.sh-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:18px;align-items:start}
.sh-prev{display:grid;gap:10px;min-width:0}
.sh-imgw{position:relative;aspect-ratio:1200/630;border-radius:6px;overflow:hidden;background:linear-gradient(110deg,#131C2D 30%,#1D2943 50%,#131C2D 70%) 0 0/300% 100%;animation:shShimmer 1.3s linear infinite;box-shadow:inset 0 0 0 1px var(--line-2),0 12px 28px -14px rgba(0,0,0,.8)}
.sh-imgw.ready{animation:none;background:var(--page)}
.sh-img{display:block;width:100%;height:100%;opacity:0;transition:opacity .3s}
.sh-imgw.ready .sh-img{opacity:1}
@keyframes shShimmer{to{background-position:-300% 0}}
/* the message, as it will look in a chat */
.sh-msg{position:relative;font:14px/1.45 var(--font-body);color:var(--ink);background:#1E2C47;border-radius:14px 14px 14px 4px;padding:11px 14px 12px;overflow-wrap:anywhere;max-height:260px;overflow:auto;box-shadow:inset 0 0 0 1px rgba(47,140,255,.22)}
.sh-msg:empty{min-height:120px}
.sh-url{display:block;margin-top:2px;color:var(--blue-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-side{display:grid;gap:12px;align-content:start;min-width:0}
.sh-hook{font-size:15px;line-height:1.45;color:var(--ink-2)}
.sh-hook b{color:var(--ink)}
.sh-pb{justify-self:start;font:italic 800 12.5px/1 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;background:var(--gold);color:#1E1300;padding:6px 11px;border-radius:2px;transform:skewX(-12deg);box-shadow:0 0 18px -4px rgba(255,194,61,.6)}
.sh-name{display:grid;gap:5px}
.sh-name span{font-size:13px;font-weight:600;color:var(--ink-2)}
.sh-name input,.sh-link input{background:var(--well);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink);padding:9px 11px;font:600 15px var(--font-body);width:100%;min-width:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.sh-name input:focus,.sh-link input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.sh-go{width:100%;margin-top:2px}
.sh-chan{display:flex;flex-wrap:wrap;gap:6px}
.sh-link{display:flex;gap:6px;align-items:center}
.sh-link input{font:500 12.5px var(--font-body);color:var(--ink-2);padding:7px 9px;text-overflow:ellipsis}
.sh-link .mini{display:inline-flex;align-items:center;gap:5px}
.sh-link .mini .ico{width:14px;height:14px}
.sh-code{font-size:12.5px}
.sh-code b{font:700 13.5px/1 var(--font-display);font-stretch:88%;letter-spacing:.05em;color:var(--blue-2);white-space:nowrap}
.sh-board{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
/* under the grade, on narrow screens where the panel sits below the verdict */
.sh-jump{display:none;align-items:center;gap:7px;justify-self:start;font-size:14.5px}
.sh-jump .ico{width:16px;height:16px}
/* a leaderboard row: position, name, the grade of every race, and how the career stands */
.sb-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:8px 12px;border-radius:var(--r);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.sb-row.me{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 18px -8px rgba(47,140,255,.7)}
.sb-row.snd{box-shadow:inset 0 0 0 1.5px rgba(255,194,61,.6)}
.sb-pos{font:italic 800 19px/1 var(--font-display);font-stretch:80%;color:var(--ink-3)}
.sb-row:first-child .sb-pos{color:var(--gold)}
.sb-n{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-n em{font-style:normal;font-size:12px;font-weight:600;color:var(--blue-2);margin-left:6px}
.sb-row.snd .sb-n em{color:var(--gold)}
.sb-g{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.gch{display:inline-flex;align-items:baseline;gap:4px;font:italic 800 13px/1 var(--font-display);font-stretch:84%;padding:4px 7px;border-radius:3px;background:rgba(255,255,255,.06);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.gch b{font-style:normal;font-weight:600;font-size:11.5px;color:var(--ink-3)}
.gch.gAp,.gch.gA{color:var(--gold);background:rgba(255,194,61,.12);box-shadow:inset 0 0 0 1px rgba(255,194,61,.35)}
.gch.gB{color:var(--go);background:var(--go-wash);box-shadow:inset 0 0 0 1px rgba(52,210,123,.3)}
.gch.gC{color:var(--blue-2);background:var(--blue-wash);box-shadow:inset 0 0 0 1px rgba(47,140,255,.3)}
.gch.gD{color:var(--amber);background:var(--amber-wash);box-shadow:inset 0 0 0 1px rgba(255,176,32,.3)}
.gch.gE{color:#FF7A73;background:var(--stop-wash);box-shadow:inset 0 0 0 1px rgba(255,90,82,.3)}
.sb-st{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.sb-st.k-r{color:var(--go)}.sb-st.k-b,.sb-st.k-f{color:#FF7A73}.sb-st.k-x{color:var(--amber)}
/* chequered confetti when you beat your rival */
.cheer{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.cheer i{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px;border-radius:1px;opacity:0;animation:cheer 1.45s cubic-bezier(.15,.7,.3,1) forwards;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
@keyframes cheer{0%{opacity:1;transform:translate(0,0) rotate(0)}45%{opacity:1;transform:translate(var(--x),var(--y)) rotate(calc(var(--r) * .6))}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 70px)) rotate(var(--r))}}
/* inside a career: the rival, the weekly GP and the circuit code, next to the season's conditions */
.cond-chip.vs{background:rgba(255,194,61,.12);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,194,61,.45)}
.cond-chip.code{border:0;font:700 12.5px/1.3 var(--font-display);font-stretch:88%;letter-spacing:.06em;background:rgba(255,255,255,.05);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.cond-chip.code:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
/* the start screen: the weekly GP and the code box */
.weekly{display:grid;gap:7px;padding:14px 16px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(255,194,61,.1),rgba(47,140,255,.07));box-shadow:inset 0 0 0 1px rgba(255,194,61,.35);max-width:520px}
.wk-h{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap}
.wk-badge{font:italic 800 12.5px/1 var(--font-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;background:var(--gold);color:#1E1300;padding:6px 11px;border-radius:2px;transform:skewX(-12deg)}
.wk-t{font:italic 800 22px/1.1 var(--font-display);font-stretch:78%;text-transform:uppercase;letter-spacing:.02em}
.weekly .btn{justify-self:start;margin-top:4px}
.sec-r{display:flex;gap:10px;flex-wrap:wrap}
.codebar{display:flex;gap:10px 16px;align-items:flex-end;flex-wrap:wrap;margin:-4px 0 16px;padding:16px 18px;border-radius:var(--r-lg);background:linear-gradient(180deg,#162036,#131B2B);box-shadow:inset 0 0 0 1px rgba(47,140,255,.4)}
.codebar[hidden]{display:none}
.codebar .field{flex:1 1 280px}
.codebar .field input{font:700 18px var(--font-display);font-stretch:90%;letter-spacing:.06em}
.codebar .hint{flex-basis:100%}
/* the landing a friend sees when they open a challenge */
.ch-land .start-side{gap:16px}
.ch-kick{display:flex;align-items:center;gap:10px;font:italic 800 14px/1.2 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.ch-kick::before{content:"";width:22px;height:22px;flex:none;border-radius:2px;transform:skewX(-10deg);background:repeating-conic-gradient(#fff 0 25%,#0B1220 0 50%) 0 0/11px 11px;box-shadow:0 0 0 1.5px #fff}
.ch-head{font:italic 900 clamp(46px,5.6vw,80px)/.88 var(--font-display);font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;color:#fff;text-shadow:0 6px 30px rgba(47,140,255,.35);overflow-wrap:break-word}
.ch-head.sm{font-size:clamp(36px,4.2vw,60px);line-height:.92}
.ch-land .lede{font-size:16.5px;max-width:46ch}
.ch-land .lede b{color:var(--ink)}
.ch-target{justify-self:start;display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:start;gap:2px 14px;padding:14px 20px 15px;border-radius:var(--r-lg);background:linear-gradient(180deg,#1C2842,#141C2E);box-shadow:inset 0 0 0 1px rgba(255,194,61,.45),0 0 44px -14px rgba(255,194,61,.5)}
.ch-target .eyebrow,.ch-target .ch-tl{grid-column:1/-1}
.ch-grade{font:italic 900 78px/.9 var(--font-display);font-stretch:72%;color:var(--gold);text-shadow:0 0 30px rgba(255,194,61,.35)}
.ch-num{font:italic 800 46px/1 var(--font-display);font-stretch:80%;color:#fff;font-variant-numeric:tabular-nums}
.ch-num small{font-size:20px;color:var(--ink-3);margin-left:2px}
.ch-num.big{font-size:78px;line-height:.9;font-weight:900;font-stretch:72%}
.ch-unit{font:italic 800 26px/1 var(--font-display);font-stretch:78%;text-transform:uppercase;color:#FF7A73}
.ch-tl{font-size:14px;color:var(--ink-2);margin-top:4px}
.ch-target.loss{box-shadow:inset 0 0 0 1px rgba(255,90,82,.5),0 0 44px -14px rgba(255,90,82,.5)}
.ch-facts{display:flex;flex-wrap:wrap;gap:6px}
.ch-board{display:grid;gap:6px}
.ch-board .sb-row{background:var(--raised)}
.ch-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ch-how>div{display:grid;gap:6px;align-content:start;padding:16px 18px;border-radius:var(--r-lg);background:linear-gradient(180deg,#162036,#131B2B);box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
.ch-how b{font:italic 900 34px/1 var(--font-display);font-stretch:72%;color:var(--blue-2)}
.ch-how h4{font:italic 800 17px/1.2 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.03em}
.ch-how p{font-size:14px;color:var(--ink-2)}
.ch-sign{border-color:rgba(255,194,61,.5);box-shadow:0 -14px 40px -10px rgba(0,0,0,.7),0 0 40px -16px rgba(255,194,61,.55)}
.ch-sign .terms.warn{color:#FFC768}
.ch-sign .terms.warn b{color:#FFE2A8}
@media (max-width:980px){
  .rep.has-share .share-p,.rep.has-share .scores,.rep.has-share .pnl,.rep.has-share .podium{grid-column:span 12}
  .sh-jump{display:inline-flex}
}
@media (max-width:760px){
  /* on a phone: the card, the dare and the button first; the message preview and the details after */
  .sh-grid{grid-template-columns:1fr;gap:12px}
  .sh-prev,.sh-side{display:contents}
  .sh-imgw{order:1}.sh-hook{order:2}.sh-pb{order:3}.sh-name{order:4}.sh-go{order:5}.sh-chan{order:6}.sh-msg{order:7}.sh-link{order:8}.sh-code{order:9}
  .ch-head.sm{font-size:36px}
  .sb-row{grid-template-columns:20px minmax(0,1fr) auto;padding:8px 10px}
  .sb-g{grid-column:2/-1;justify-content:flex-start}
  .sb-st{grid-row:1;grid-column:3}
  .ch-head{font-size:46px}
  .ch-grade,.ch-num.big{font-size:64px}
  .ch-how{grid-template-columns:1fr}
  /* on a phone the landing's bar keeps to the essentials: your name and the two buttons (a warning still shows) */
  .ch-sign .terms:not(.warn){display:none}
  .ch-sign .signbtns .btn:last-child{flex:1.5}
  .weekly{max-width:none}
  .sec-r{width:100%}.sec-r .btn{flex:1;padding-inline:12px}
}

/* ---------- out of money ---------- */
.crisis-ov{z-index:85;background:rgba(3,6,12,.8)}
.crisis-card{background:linear-gradient(180deg,#1A2236,#141B2B);color:var(--ink);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,90,82,.4),0 0 60px -10px rgba(225,6,0,.45),0 30px 80px rgba(0,0,0,.65);position:relative;padding-top:30px}
.crisis-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:repeating-linear-gradient(-45deg,var(--kerb-red) 0 12px,#1A0000 12px 24px)}
.crisis-card .eyebrow{font:italic 800 13px/1.3 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.07em;color:#FF7A73}
.cr-head{font-size:36px;margin:6px 0 10px;color:#fff}
.cr-body{font-size:15px;color:var(--ink-2);margin-bottom:12px}
.cr-lenders{display:grid;gap:8px;margin:4px 0}
.cr-lender{display:grid;gap:8px;padding:12px 14px;background:var(--raised);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.cr-lender.off{opacity:.55}
.cr-h{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.cr-h .mono{font-size:13px;color:var(--ink-3);font-weight:500}
.cr-lender .steps{gap:8px}
/* the back-room lender: warm, smoky, not one of the bank's tiles */
.cr-lender.shady{background:linear-gradient(180deg,#2C2219,#211913);color:#F3EDE3;box-shadow:inset 0 0 0 1px rgba(214,160,90,.35)}
.cr-lender.shady .hint,.cr-lender.shady .mono{color:#C9B9A1}
.loan.shady{background:linear-gradient(180deg,#2C2219,#211913);color:#F3EDE3;border-radius:var(--r);padding-inline:12px;border-top:0;margin-top:6px;box-shadow:inset 0 0 0 1px rgba(214,160,90,.35)}
.loan.shady .hint,.loan.shady small{color:#C9B9A1}
.crisis-card .btn{margin-top:14px}

/* ---------- hover tips ---------- */
[data-tip]{cursor:help}
button[data-tip],.choice[data-tip],[role=button][data-tip],.plot[data-tip]{cursor:pointer}
b[data-tip],.inv-n[data-tip],.vt[data-tip]{text-decoration:underline dotted var(--line-2);text-underline-offset:4px;text-decoration-thickness:1.5px}
h3[data-tip]::after{content:"?";align-self:center;width:16px;height:16px;border-radius:3px;transform:skewX(-10deg);background:rgba(255,255,255,.08);color:var(--ink-3);font:800 11px/16px var(--font-display);font-style:normal;text-align:center}
#tip{position:fixed;left:0;top:0;z-index:100;max-width:300px;padding:11px 13px;background:linear-gradient(180deg,#22304A,#1B2639);color:var(--ink);font-size:13.5px;line-height:1.45;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 3px 0 var(--blue),0 14px 34px rgba(0,0,0,.6)}
#tip.on{opacity:1;transform:none}
#tip b{display:block;font:italic 800 15px/1.25 var(--font-display);font-stretch:82%;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;color:#fff}
#tip p{color:var(--ink-2)}
#tip dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line)}
#tip dt{color:var(--ink-3)}
#tip dd{margin:0;font-family:var(--font-display);font-stretch:88%;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
#tip small{display:block;margin-top:8px;color:var(--blue-2);font-weight:650}
#tip hr{border:0;border-top:1px solid var(--line);margin:7px 0}

/* ---------- responsive ---------- */
@media (max-width:1180px){.home{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:980px){
  .home,.plan,.wk-body,.race-wrap,.start{grid-template-columns:1fr}
  .board{position:static}
  .start-side{order:-1}
  .verdict,.scores,.pnl,.podium,.notes{grid-column:span 12}
  .venues{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding-inline:16px}
  main{padding-bottom:110px}
  .top-in{min-height:0;padding-block:8px 10px}
  .evname{display:none}
  .logo{font-size:22px}
  .stats{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px}
  .stat{grid-template-columns:auto;grid-template-rows:auto auto;padding:4px 8px 4px 9px}
  .stat .ico{display:none}
  .stat .k{font-size:11px}
  .stat .v{font-size:15px}
  .sign{gap:10px 14px;padding:12px 14px}.sign .field{flex-basis:100%}.sign .field label{display:none}.sign .field input{padding:8px 10px;font-size:15px}
  .sign .terms{font-size:12.5px;flex-basis:100%}.signbtns{width:100%}.signbtns .btn{flex:1;padding-inline:12px}
  .endbtn{grid-column:1/-1;margin:6px 0 0}.endbtn .btn{width:100%}
  .month{font-size:32px}
  .panel{--pp-y:16px;--pp-x:16px}
  .tree-h{margin:-16px -16px 12px;padding-inline:16px}
  .dock{left:8px;right:8px;transform:none;max-width:none;justify-content:space-between}
  .dock button{padding:7px 2px 6px;font-size:10.5px;letter-spacing:.03em;flex:1 1 0;min-width:0}
  .dock button .ico{width:20px;height:20px}
  .dock button i{right:2px}
  .plot{width:28px;height:28px;margin:-14px 0 0 -14px}.plot .ico{width:13px;height:13px}
  .invs,.rc,.days,.grid-list{grid-template-columns:1fr}
  .grid-list div:nth-child(2){border-top:1px solid var(--line)}
  .legacy{grid-template-columns:1fr 1fr}
  .tier-row{grid-template-columns:1fr}
  .g-row{grid-template-columns:150px 1fr}
  .loan{grid-template-columns:1fr}
  .bigcash{font-size:36px}
  .bu-row{grid-template-columns:auto 1fr auto}.bu-row .hint{grid-column:2;grid-row:2}
  .tree-wrap{grid-template-columns:1fr}
  .chrow{grid-template-columns:1fr}.mk-sum b{font-size:17px}
  .dock .dl{display:none}.dock .ds{display:block}
  .insp{position:fixed;left:8px;right:8px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));max-height:52vh;z-index:34;box-shadow:inset 0 0 0 1px var(--line-2),0 -10px 40px rgba(0,0,0,.6);display:none}
  .insp.on{display:grid}
  .tl{width:90px;font-size:11.5px}.tbody{grid-template-columns:96px auto}.thead{margin-left:96px}
  .ribbon .tg:not(.race){display:none}
  .v3-level{min-width:0;padding:7px 10px}.v3-level small{display:none}
  .mapwrap.is3d{aspect-ratio:5/4}
  .mapwrap.is3d .plot.built{width:12px;height:12px;margin:-6px 0 0 -6px}.mapwrap.is3d .plot.built .ico{display:none}
  .v3-btns button[data-v3="left"],.v3-btns button[data-v3="right"],.v3-hint{display:none}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .race-wrap{gap:14px}
  .lapc{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* financial projection: two lines, one axis, money in vs money out */
.fin-top{margin-bottom:18px}
.pj-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.pj-sum div{background:var(--raised);border-radius:var(--r);padding:9px 12px;display:grid;gap:1px;min-width:0;box-shadow:inset 0 0 0 1px var(--line)}
.pj-sum b{font:700 21px/1.2 var(--font-display);font-stretch:86%;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-legend{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.pj-legend span.rev::before,.pj-legend span.cost::before{content:"";display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:#3987E5}
.pj-legend span.cost::before{background:#D95926}
.pj-legend .hint{margin-left:auto;font-size:12.5px}
.pj{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
.pj-grid{stroke:rgba(150,175,215,.12);stroke-width:1}
.pj-ax{font-size:11.5px;fill:var(--ink-3);font-family:var(--font-body)}
.pj-ax.race{fill:#FF7A73;font-weight:700}
.pj-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pj-line.rev{stroke:#3987E5}.pj-line.cost{stroke:#D95926}
.pj-dot{stroke:var(--surface);stroke-width:2}
.pj-dot.rev{fill:#3987E5}.pj-dot.cost{fill:#D95926}
.pj-lab{font-size:12px;font-weight:650;fill:var(--ink-2);font-family:var(--font-body)}
.pj-hit{fill:transparent;cursor:crosshair}
.pj-hit:hover{fill:rgba(47,140,255,.08)}
@media (max-width:760px){.pj-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.pj-legend .hint{margin-left:0;width:100%}}