/* Five Gangs: modern luxury noir with a light Art Deco accent (gold double rules, stepped corners). Dark by design. */
/* Fonts ship with the game (SIL OFL, lib/fonts), so every phone gets the same letters */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../lib/fonts/oswald.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../lib/fonts/inter.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../lib/fonts/bodoni-moda.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url(../lib/fonts/bodoni-moda-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: dark;
  --ink: #0b0a09; --soot: #13110f; --soot-2: #1a1714; --soot-3: #25201b; --soot-4: #2f2922;
  --gold: #c9a14a; --gold-hi: #ecd08a; --gold-lo: #8a6a2c;
  --line: rgba(201, 161, 74, 0.34); --line-soft: rgba(201, 161, 74, 0.15);
  --cream: #f1e8d4; --paper: #efe6d0; --paper-ink: #2b2622; --muted: #b0a58f; --faint: #8f8574;
  --blood: #b3392f; --blood-hi: #e0685a; --good: #8cc276; --info: #9ad8ff;
  --r-cash: #8fbf6a; --r-food: #e0a64a; --r-steel: #a9bccf; --r-cement: #cfc3ad;
  --gang: #c9a14a;
  --display: "Bodoni Moda", "Bodoni 72", "Didot", "Playfair Display", "Liberation Serif", Georgia, serif;
  --ui: "Oswald", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans", sans-serif;
  --text: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nav: 64px; --top: 92px; --rail: 96px; --drawer: 468px;
  --r: 8px; --r-sm: 5px; /* corner rounding: borders follow it, where cut corners sliced them off */
  --ease: cubic-bezier(.2, .9, .3, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--ink); color: var(--cream); font: 400 15px/1.4 var(--text); user-select: none; -webkit-user-select: none; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.btn:focus-visible, .qt:focus-visible { outline: none; filter: brightness(1.15); box-shadow: inset 0 0 0 2px var(--gold-hi); }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { font: 500 9px/1 var(--ui); }
.num, .rc b, .kv dd, .table { font-variant-numeric: tabular-nums; }
.kicker, .label { margin: 0; font: 500 11px/1.1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
body.intro #labels { display: none; }
.badge { position: absolute; left: 0; top: 0; pointer-events: auto; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  background: linear-gradient(#f0d58e, #b88d3a); color: #22190e; font: 600 12px/1 var(--ui); border: 1px solid #5a431a; border-radius: 2px;
  box-shadow: 0 2px 6px #0009, inset 0 1px 0 #fff6; transform-origin: center; }
.mlabel { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; padding: 2px 7px 3px; font: 500 11px/1.2 var(--ui); letter-spacing: 0.04em;
  color: var(--cream); background: rgba(11, 10, 9, 0.84); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--gold)); }
.mlabel.me { color: var(--gold-hi); border-color: var(--gold); }
.dlabel { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font: 600 13px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 246, 228, 0.82); text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.7); }
/* on the district map: its type, name and who runs it */
.dlabel.dm { display: grid; justify-items: center; gap: 3px; max-width: 150px; white-space: normal; text-align: center; font-size: 11px; letter-spacing: 0.12em; }
.dlabel.dm svg { width: 17px; height: 17px; stroke: rgba(255, 246, 228, 0.75); stroke-width: 1.5; filter: drop-shadow(0 1px 2px #000); }
.dlabel.dm small { font: 500 10px/1 var(--ui); letter-spacing: 0.06em; text-transform: none; color: var(--c, var(--muted)); filter: brightness(1.5); }
.dlabel.dm.on b { color: var(--gold-hi); }
.drun { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line-soft); }
.drun b { display: block; font: 600 16px/1.2 var(--ui); letter-spacing: 0.04em; color: var(--cream); }
.drun small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.drk { display: grid; gap: 7px; }
.drk > div { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: 8px; row-gap: 3px; font: 500 14px/1.2 var(--ui); }
.drk b { font-variant-numeric: tabular-nums; }
.drk .bar { grid-column: 2 / -1; height: 4px; }
.drk .bar i { transition: none; }
.dfree { width: 10px; height: 10px; margin: 0 auto; border: 1px solid var(--faint); border-radius: 50%; }
.dico { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }

/* ---------- Deco accents ---------- */
.deco { position: relative; background: linear-gradient(180deg, var(--soot-2), var(--soot)); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 4px var(--soot), inset 0 0 0 5px var(--line-soft); }
.rule { display: flex; align-items: center; gap: 10px; color: var(--gold); }
.rule i { flex: 1; height: 3px; border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.rule b { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.wordmark { margin: 10px 0 14px; font: 500 68px/0.92 var(--display); letter-spacing: -0.01em; color: var(--cream); text-shadow: 0 2px 0 #000, 0 0 40px rgba(201, 161, 74, 0.25); }
.wordmark span { display: block; margin: 0 0 10px 0.55em; font: 500 17px/1 var(--ui); letter-spacing: 0.55em; color: var(--gold-hi); text-shadow: none; }
.wordmark::after { content: none; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 16px; border-radius: var(--r-sm);
  font: 500 13px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; transition: transform 0.08s, filter 0.15s, box-shadow 0.15s; white-space: nowrap; }
.btn.brass { background: linear-gradient(180deg, #f3dc9c 0%, #d4ae5c 45%, #a7803a 100%); color: #1f170c; box-shadow: inset 0 1px 0 #fff8, inset 0 -2px 0 #0003; text-shadow: 0 1px 0 #fff4; }
.btn.brass:hover { filter: brightness(1.06); }
.btn.blood { background: linear-gradient(180deg, #df6456, #a3322a); color: #fff5ec; box-shadow: inset 0 1px 0 #fff4, inset 0 -2px 0 #0003; }
.btn.ghost { background: rgba(0, 0, 0, 0.25); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.btn.big { min-height: 52px; font-size: 15px; letter-spacing: 0.18em; }
.btn.sm { min-height: 40px; padding: 6px 12px; font-size: 12px; }
.btn.xs { min-height: 40px; padding: 4px 10px; font-size: 11px; }
.btn.wide { width: 100%; }
.btn:disabled, .btn.off { filter: grayscale(0.75) brightness(0.55); cursor: not-allowed; }
.btn:not(.off):not(:disabled):active { transform: translateY(1px) scale(0.97); filter: brightness(0.92); box-shadow: inset 0 2px 6px #0007; }
.btn small { font: 500 10px/1 var(--ui); letter-spacing: 0.1em; opacity: 0.8; }
.btn.stack { flex-direction: column; gap: 5px; padding: 10px 14px; white-space: normal; text-align: center; }
.btn.stack small { line-height: 1.35; text-transform: none; letter-spacing: 0.02em; font-size: 11px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; font-size: 19px; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-sm); }
.icon-btn[aria-pressed="false"] { color: var(--faint); }
a.btn { text-decoration: none; }
.link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; vertical-align: middle; color: var(--gold-hi); font: 500 12px/1 var(--ui); letter-spacing: 0.08em; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* ---------- Boot + Start ---------- */
#boot, #start { position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: calc(34px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
#boot { justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 38%, #211a12, var(--ink) 65%); transition: opacity 0.45s; }
#boot.done { opacity: 0; pointer-events: none; }
#boot .mark { width: 100%; max-width: 380px; animation: fade-up 0.8s var(--ease) both; }
#boot .wordmark { font-size: 76px; }
.loadbar { position: relative; height: 2px; margin: 26px auto 12px; width: 180px; background: var(--line-soft); overflow: hidden; }
.loadbar i { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); animation: sweep 1.3s ease-in-out infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.boot-err { margin-top: 18px; display: grid; gap: 12px; }
.boot-err p { margin: 0; color: var(--cream); }
.boot-err .row { justify-content: center; flex-wrap: wrap; }
#start { z-index: 10; background: radial-gradient(ellipse 36em 75% at 50% 45%, rgba(11, 10, 9, 0.72), rgba(11, 10, 9, 0.3)),
  linear-gradient(180deg, rgba(11, 10, 9, 0.65), rgba(11, 10, 9, 0) 40%, rgba(11, 10, 9, 0) 65%, rgba(11, 10, 9, 0.6)); }
.poster { width: 100%; max-width: 420px; text-align: center; animation: fade-up 0.6s var(--ease) both; }
.poster .lede { margin: 16px auto 0; max-width: 32ch; color: var(--muted); font: 400 15px/1.55 var(--text); }
#auth { width: 100%; max-width: 420px; padding: 22px 20px; display: grid; gap: 16px; animation: fade-up 0.6s 0.1s var(--ease) both; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { min-height: 40px; padding: 9px 6px; font: 500 12px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.seg button.on { background: var(--soot-3); color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); }
.field { display: grid; gap: 7px; }
.field span { font: 500 11px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.field textarea { width: 100%; padding: 11px 12px; background: var(--ink); color: var(--cream); border: 1px solid var(--line); border-radius: 0; font: 400 16px var(--text); resize: vertical; }
.field textarea:focus { border-color: var(--gold); outline: none; }
.field input, .qty input[type=number] { width: 100%; min-height: 44px; padding: 11px 12px; background: var(--ink); color: var(--cream); border: 1px solid var(--line); border-radius: 0; font: 400 16px var(--text); }
.field input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.18); }
.field input::placeholder { color: var(--faint); }
/* browser autofill keeps the dark input (its own background can't be overridden, so an inset shadow covers it) */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover { -webkit-text-fill-color: var(--cream); caret-color: var(--cream); box-shadow: inset 0 0 0 100px var(--ink); transition: background-color 0s 99999s; }
.field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--cream); box-shadow: inset 0 0 0 100px var(--ink), 0 0 0 3px rgba(201, 161, 74, 0.18); transition: background-color 0s 99999s; }
#gang-pick { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 500 15px var(--ui); color: var(--cream); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--gold); flex: none; }
#gangs { display: grid; gap: 6px; }
.gang { --c: var(--gold); display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; text-align: left;
  background: var(--soot-2); box-shadow: inset 0 0 0 1px var(--line-soft); transition: background 0.2s, box-shadow 0.2s; }
.gang .flag { width: 12px; height: 20px; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.gang b { font: 500 16px/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.gang svg { color: var(--gold-hi); opacity: 0; }
.gang.on { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, var(--soot-2)), var(--soot-2) 70%); box-shadow: inset 0 0 0 1px var(--gold); }
.gang.on svg { opacity: 1; }
.err { margin: 0; padding: 10px 12px; color: #ffd6cf; background: #3b1612; border: 1px solid #7a2b22; font-size: 14px; }
.note { margin: 0; color: var(--faint); font: 400 13px/1.45 var(--text); text-align: center; }
#g-signin { display: flex; justify-content: center; min-height: 44px; }
.alpha { margin: 0; padding: 9px 12px; text-align: center; color: var(--gold-hi); font: 500 11px/1.5 var(--ui); letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(201, 161, 74, 0.07); border: solid var(--line); border-width: 1px 0; }
#forgot { justify-self: center; min-height: 32px; }
/* TPOT account card head: the teapot mark and the step */
.auth-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 500 14px/1.2 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.auth-head img { width: 36px; height: auto; flex: none; }
#auth-alt { display: flex; justify-content: center; gap: 22px; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Top bar ---------- */
#top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: grid; gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 10px 8px;
  background: linear-gradient(180deg, rgba(11, 10, 9, 0.97), rgba(19, 17, 15, 0.92)); border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line-soft), 0 10px 24px rgba(0, 0, 0, 0.45); }
#res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
body.restip #top { z-index: 13; }
.rc { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 6px 7px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px var(--line-soft); cursor: pointer; }
.rc svg { font-size: 17px; }
.rc div { display: grid; min-width: 0; line-height: 1.05; }
.rc b { font: 500 14px/1.1 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.02em; }
.rc small { font: 400 10px/1.15 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.03em; }
.rc .cap { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; background: rgba(255, 255, 255, 0.06); }
.rc .cap i { display: block; height: 100%; background: currentColor; opacity: 0.7; }
.rc .promo { position: absolute; top: -6px; right: -3px; z-index: 1; padding: 0 4px; font: 600 10px/14px var(--ui); font-style: normal; letter-spacing: 0.03em; color: #1a1408; background: var(--gold-hi); border-radius: 3px; }
.rc.full b { color: var(--blood-hi); } .rc.full .cap { color: var(--blood-hi); }
.rc.cash { color: var(--r-cash); } .rc.food { color: var(--r-food); } .rc.steel { color: var(--r-steel); } .rc.cement { color: var(--r-cement); }
.rc b { color: var(--cream); }
.rc.pulse { animation: pulse-res 0.6s ease-out; }
.rc .rl { display: flex; gap: 5px; align-items: baseline; }
.rc .rn { display: none; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.res-tip { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; display: grid; gap: 2px; padding: 7px 10px; min-width: 108px;
  background: #0d0b09; border: 1px solid var(--gold); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); }
.rc:nth-child(n+3) .res-tip { left: auto; right: 0; }
.res-tip b { font: 500 12px/1.2 var(--ui); color: var(--gold-hi); text-transform: uppercase; letter-spacing: 0.06em; }
.res-tip span { font: 400 11px/1.2 var(--ui); color: var(--muted); }
.res-tip em { margin-top: 5px; font: 500 10px/1.2 var(--ui); font-style: normal; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; }
.res-tip .ln { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; }
.res-tip .ln span:last-child { color: var(--cream); }
.res-tip .net { margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(201, 161, 74, 0.3); }
@keyframes pulse-res { 30% { background: rgba(201, 161, 74, 0.28); } }
#plate { display: flex; align-items: center; gap: 9px; min-height: 40px; }
#lvl { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; }
#lvl .ring { position: absolute; inset: 2px; width: 36px; height: 36px; transform: rotate(-90deg); stroke-width: 2.5; }
#lvl .ring circle:first-child { stroke: rgba(201, 161, 74, 0.18); }
#xpring { stroke: var(--gold); stroke-dasharray: 106.8; stroke-dashoffset: 106.8; transition: stroke-dashoffset 0.6s var(--ease); }
#lvl b { font: 500 15px/1 var(--ui); color: var(--gold-hi); }
.who { flex: 1; min-width: 0; display: grid; gap: 2px; }
#pname { font: 500 18px/1.05 var(--display); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#psub { font: 400 11px/1.2 var(--ui); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#psub i { font-style: normal; color: var(--gang); }
.gems { display: flex; gap: 10px; align-items: center; font: 500 13px/1 var(--ui); font-variant-numeric: tabular-nums; }
.gems span { display: inline-flex; gap: 4px; align-items: center; }
#gems { display: inline-flex; gap: 4px; align-items: center; color: var(--cream); background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px var(--line-soft); padding: 6px 9px; }
#gems:hover { box-shadow: inset 0 0 0 1px var(--gold); }
#gems svg { color: var(--info); }
#shield { color: var(--good); }
.topbtn { width: 34px; height: 34px; font-size: 16px; flex: none; }

/* ---------- Connection banner ---------- */
#netbar { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); top: calc(var(--top) + 8px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; width: max-content; max-width: calc(100% - 20px); background: #2a1512; color: #ffd6cf; box-shadow: inset 0 0 0 1px #8e3b2a, 0 10px 24px #000a; font: 500 13px/1.3 var(--ui); letter-spacing: 0.04em; animation: drop 0.25s var(--ease); }
#netbar svg { font-size: 18px; color: var(--blood-hi); }
#netbar .btn { color: #ffe3dc; }
/* staff announcements and boosts */
#newsbar { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); top: calc(var(--top) + 8px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; width: max-content; max-width: calc(100% - 20px); background: #211b0e; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold), 0 10px 24px #000a; font: 500 13px/1.3 var(--ui); letter-spacing: 0.04em; animation: drop 0.25s var(--ease); }
#newsbar svg { font-size: 16px; flex: none; }
#newsbar span { white-space: pre-line; }

/* ---------- Timers column (right side, like the original March Timer) ---------- */
#queues { position: fixed; right: 8px; top: calc(var(--top) + 6px + env(safe-area-inset-top)); z-index: 4; display: grid; gap: 5px; width: 164px; pointer-events: none; }
.qt { pointer-events: auto; display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px; align-items: center; min-height: 44px; padding: 7px 9px 8px; text-align: left;
  background: rgba(11, 10, 9, 0.88); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-sm); backdrop-filter: blur(4px); animation: slide-in 0.3s var(--ease); }
.qt svg { grid-row: span 2; font-size: 17px; color: var(--gold); }
.qt b { font: 500 12px/1.15 var(--ui); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt span { font: 500 12px/1.1 var(--ui); color: var(--gold-hi); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; gap: 6px; }
.qt span em { font-style: normal; color: var(--good); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.qt .bar { grid-column: 1 / -1; margin-top: 4px; }
.qt.alert { box-shadow: inset 0 0 0 1px var(--blood-hi); animation: alarm 1.2s infinite; }
.qt.alert svg, .qt.alert span { color: var(--blood-hi); }
.qt.idle { opacity: 0.8; } .qt.idle svg { color: var(--faint); } .qt.idle span { color: var(--muted); }
@keyframes alarm { 50% { background: rgba(90, 20, 16, 0.92); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(12px); } }
.bar { height: 3px; background: rgba(201, 161, 74, 0.14); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width 0.9s linear; }
.bar.big { height: 6px; }
.bar.good i { background: linear-gradient(90deg, #4f7d44, var(--good)); }

/* ---------- Toasts, floaters, splash ---------- */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--top) + 8px + env(safe-area-inset-top)); z-index: 11; display: grid; gap: 6px; width: min(420px, calc(100% - 196px)); min-width: 180px; pointer-events: none; }
.toast { display: flex; gap: 9px; align-items: center; padding: 10px 12px; background: rgba(11, 10, 9, 0.96); box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px #000a; border-radius: var(--r-sm);
  font: 400 13px/1.35 var(--text); animation: drop 0.25s var(--ease); transition: opacity 0.35s, transform 0.35s; }
.toast svg { font-size: 17px; color: var(--gold); }
.toast.bad { box-shadow: inset 0 0 0 1px rgba(224, 104, 90, 0.6), 0 10px 22px #000a; }
.toast.bad svg { color: var(--blood-hi); } .toast.good svg { color: var(--good); }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
#splash .rws { display: grid; gap: 8px; justify-items: center; margin-top: 4px; }
#splash .rw { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: var(--cream); }
#splash .rw svg { width: 20px; height: 20px; color: var(--gold-hi); }
.floater { position: fixed; z-index: 13; pointer-events: none; font: 600 19px/1 var(--ui); letter-spacing: 0.04em; color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 12px #000;
  transform: translate(-50%, -50%); animation: rise 2.6s ease-out forwards; white-space: nowrap; }
.floater.bad { color: var(--blood-hi); } .floater.good { color: var(--r-cash); }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.05); } 70% { opacity: 1; transform: translate(-50%, -120%); } 100% { opacity: 0; transform: translate(-50%, -200%); } }
.coin { position: fixed; z-index: 13; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c8, #e2bb62 45%, #8a6a2c); box-shadow: 0 0 6px rgba(236, 208, 138, 0.8); }
#splash { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px; text-align: center; cursor: pointer;
  background: radial-gradient(circle, rgba(40, 30, 14, 0.97), rgba(11, 10, 9, 0.99) 65%); animation: fade 0.3s; }
#splash .big { position: relative; display: inline-block; font: 500 min(26vw, 150px)/0.95 var(--display); color: var(--gold-hi); animation: slam 0.45s cubic-bezier(.2, 1.6, .4, 1);
  background: linear-gradient(100deg, #b88d3a 20%, #fff3cf 40%, #ecd08a 50%, #b88d3a 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(201, 161, 74, 0.45)); }
#splash.shine .big { animation: slam 0.45s cubic-bezier(.2, 1.6, .4, 1), shimmer 2.2s 0.4s ease-in-out infinite; }
#splash p { margin: 12px 0 0; color: var(--muted); font: 400 15px/1.5 var(--text); }
#splash .rule { width: 220px; margin: 16px auto 0; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes slam { from { transform: scale(2); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Panel: bottom sheet on phones, right drawer on desktop ---------- */
#panel { position: fixed; left: 0; right: 0; bottom: calc(var(--nav) + env(safe-area-inset-bottom)); height: 64vh; height: 64dvh; z-index: 6; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgb(26, 23, 20), rgb(15, 13, 11)); border-top: 1px solid var(--gold);
  box-shadow: 0 -4px 0 -2px var(--line-soft), 0 -24px 40px #000b; transform: translateY(110%); visibility: hidden; transition: transform 0.32s var(--ease), visibility 0s 0.32s; }
#panel.open { transform: none; visibility: visible; transition: transform 0.32s var(--ease), visibility 0s; }
.phead { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.phead::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -4px; height: 1px; background: linear-gradient(90deg, var(--line-soft), transparent 80%); }
.phead h2 { margin: 6px 0 0; font: 500 27px/1.05 var(--display); color: var(--cream); text-wrap: balance; }
#p-close { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gold-hi); font-size: 17px; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-sm); flex: none; }
#p-close:hover { box-shadow: inset 0 0 0 1px var(--gold); }
#p-body > * { flex-shrink: 0; }
#p-body { flex: 1; overflow-y: auto; padding: 14px 16px 26px; display: flex; flex-direction: column; gap: 11px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
#p-body.fresh > * { animation: fade-up 0.34s var(--ease) both; }
#p-body.fresh > :nth-child(2) { animation-delay: 0.03s; } #p-body.fresh > :nth-child(3) { animation-delay: 0.06s; } #p-body.fresh > :nth-child(4) { animation-delay: 0.09s; }
#p-body.fresh > :nth-child(5) { animation-delay: 0.12s; } #p-body.fresh > :nth-child(n+6) { animation-delay: 0.15s; }
#p-body h3 { margin: 10px 0 0; font: 500 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; }
#p-body h3::after { content: ""; flex: 1; height: 3px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); }
#p-body h3 small { font: 400 11px var(--ui); letter-spacing: 0.08em; color: var(--muted); text-transform: none; order: 2; }
.desc { margin: 0; color: var(--muted); font: 400 14px/1.55 var(--text); }
.hint { margin: 0; color: var(--faint); font: 400 12.5px/1.45 var(--text); }
.hint b { color: var(--muted); font-weight: 500; }
.hint.bad { color: var(--blood-hi); }

/* Cards and rows */
.card { position: relative; display: grid; gap: 9px; padding: 13px 14px; background: linear-gradient(180deg, rgba(37, 32, 27, 0.7), rgba(26, 23, 20, 0.7)); box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: var(--r-sm); }
.card.hi { box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 var(--gold-lo); }
.card.danger { box-shadow: inset 0 0 0 1px var(--blood-hi); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.row:has(> .btn + .btn) { flex-wrap: wrap; } /* button rows wrap on narrow phones instead of running off the card */
.row:has(> .btn + .btn) > .btn.grow { min-width: max-content; }
.card h4 { margin: 0; font: 500 17px/1.15 var(--ui); letter-spacing: 0.04em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card h4 small { font: 400 11px var(--ui); color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; }
.card h4 .own { margin-left: auto; color: var(--muted); letter-spacing: 0.06em; }
.card.dim > :not(.req):not(h4):not(.unlocks) { opacity: 0.6; }
.card.dim h4 { color: var(--muted); }
/* painted art in a brass frame; the icon underneath shows while it loads or if it fails */
.art { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-sm); background: var(--soot-3); }
.art > svg, .art > img { grid-area: 1 / 1; }
.art > svg { width: 45%; height: 45%; color: var(--gold-lo); }
.art > img { width: 100%; height: 100%; object-fit: cover; }
.art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 2px rgba(0, 0, 0, 0.35); pointer-events: none; }
.art.sm { width: 40px; height: 40px; }
.art.xs { width: 28px; height: 28px; border-radius: 4px; }
.card h4.pic { align-items: center; }
.card.dim h4 .art img { filter: grayscale(0.6) brightness(0.7); }
.qt.pic { grid-template-columns: 28px 1fr; }
.qt .art { grid-row: span 2; display: grid; }
.pick button:has(> .art) { grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.pick button > .art { grid-row: span 2; }
.card .done-tag { color: var(--good); display: inline-flex; gap: 4px; align-items: center; }
#psub svg { vertical-align: -0.15em; margin-right: 2px; }
.stats { display: flex; flex-wrap: wrap; gap: 5px 14px; font: 400 13px/1.2 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.stats span { display: inline-flex; gap: 5px; align-items: center; }
.stats svg { color: var(--gold); }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; }
.chip { display: grid; gap: 3px; padding: 6px 7px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line-soft); }
.chip { min-width: 0; }
.chip small { display: flex; gap: 4px; align-items: center; overflow: hidden; font: 400 9.5px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.chip small svg { color: var(--gold); font-size: 11px; }
.chip b { font: 500 15px/1 var(--ui); font-variant-numeric: tabular-nums; }

/* Cost with have / need */
.cost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cost span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 5px; padding: 7px 7px 6px; min-width: 0; font: 500 13px/1.05 var(--ui); font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px var(--line-soft); }
.cost span svg { font-size: 14px; }
.cost span b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cost span small { grid-column: 1 / -1; font: 400 10.5px/1.1 var(--ui); color: var(--faint); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cost span.no { box-shadow: inset 0 0 0 1px rgba(224, 104, 90, 0.55); }
.cost span.no b { color: var(--blood-hi); } .cost span.no small { color: #d9a097; }
.cost .cash svg { color: var(--r-cash); } .cost .food svg { color: var(--r-food); } .cost .steel svg { color: var(--r-steel); } .cost .cement svg { color: var(--r-cement); }
.req { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.req > small { font: 500 10px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--blood-hi); margin-right: 2px; }
.req .rq { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 5px 10px; font: 500 12px/1 var(--ui); letter-spacing: 0.05em; color: #ffd8d0; background: #34130f; box-shadow: inset 0 0 0 1px #7a2b22; }
.req button.rq:hover { background: #4a1a14; }
.req button.rq svg:last-child { font-size: 12px; opacity: 0.8; }
.req .rq.ok { color: var(--good); background: rgba(95, 158, 90, 0.12); box-shadow: inset 0 0 0 1px rgba(140, 194, 118, 0.4); }
.lvlbar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.lvlbar i { height: 5px; background: rgba(201, 161, 74, 0.13); }
.lvlbar i.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.lvlbar i.next { background: repeating-linear-gradient(135deg, rgba(236, 208, 138, 0.6) 0 2px, transparent 2px 4px); }

/* Current vs next level compare */
.compare { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: stretch; gap: 0; }
.compare > div { display: grid; align-content: start; gap: 4px; padding: 10px 11px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line-soft); }
.compare > div.next { box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(180deg, rgba(201, 161, 74, 0.1), rgba(0, 0, 0, 0.2)); }
.compare small { font: 500 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.compare .next small { color: var(--gold); }
.compare b { font: 400 13px/1.35 var(--text); color: var(--cream); }
.compare b + b { padding-top: 3px; border-top: 1px solid var(--line-soft); }
.compare > svg { align-self: center; justify-self: center; color: var(--gold); font-size: 16px; }
.compare.one { grid-template-columns: 1fr; }

.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 7px; }
.pick button { position: relative; display: grid; gap: 5px; min-height: 64px; padding: 11px 12px; text-align: left; background: var(--soot-2); box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: var(--r-sm); transition: box-shadow 0.15s, background 0.15s; }
.pick button b { font: 500 15px/1.1 var(--ui); letter-spacing: 0.05em; }
.pick button small { font: 400 12px/1.4 var(--text); color: var(--muted); }
.pick button.on { box-shadow: inset 0 0 0 1px var(--gold); background: var(--soot-3); }
.pick button.on::before { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.pick.look { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pick.look button { min-height: 44px; padding: 9px 11px; align-content: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font: 400 14px/1.3 var(--ui); letter-spacing: 0.02em; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; color: var(--cream); }
.kv dd.no { color: var(--blood-hi); }
.kv.box { padding: 11px 12px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--line-soft); }
.qty { display: grid; grid-template-columns: 1fr 82px; gap: 8px; align-items: center; }
.qty input[type=range] { width: 100%; height: 32px; accent-color: var(--gold); padding: 0; border: 0; background: none; }
.qty input[type=number] { min-height: 40px; padding: 8px; font: 500 15px var(--ui); text-align: right; }
.presets { display: flex; gap: 5px; flex-wrap: wrap; }
.presets .btn { flex: 1; min-width: 56px; }
.presets.names .btn { flex: 1 1 auto; } /* estate names wrap instead of overlapping */
.presets .btn.on { box-shadow: inset 0 0 0 1px var(--gold); color: var(--cream); background: rgba(201, 161, 74, 0.14); }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); position: sticky; top: -14px; z-index: 2; }
.tabs button { flex: 1; min-height: 40px; padding: 9px 2px; font: 500 12px/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 0.15s; }
.tabs button:hover { color: var(--cream); }
.tabs button.on { background: var(--soot-3); color: var(--gold-hi); box-shadow: inset 0 -2px 0 var(--gold); }
.table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.3 var(--ui); letter-spacing: 0.02em; }
.table th { text-align: left; font: 500 10px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); padding: 7px 5px; border-bottom: 1px solid var(--line); }
.table td { padding: 8px 5px; border-bottom: 1px solid rgba(201, 161, 74, 0.09); }
.table td.r, .table th.r { text-align: right; }
.table tr.me td { color: var(--gold-hi); background: rgba(201, 161, 74, 0.1); }
.table tr.me td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.table tr.gap td { text-align: center; color: var(--faint); padding: 2px; border: 0; }
.swatch { display: inline-block; width: 8px; height: 12px; margin-right: 7px; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); vertical-align: -1px; }

/* Empty states */
.empty { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; text-align: center; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: var(--r-sm); }
.empty > svg { font-size: 30px; color: var(--gold); opacity: 0.8; }
.empty b { font: 500 20px/1.15 var(--display); color: var(--cream); }
.empty p { margin: 0; max-width: 34ch; color: var(--muted); font: 400 13.5px/1.5 var(--text); }

/* Fight odds */
.odds { display: grid; gap: 8px; }
.odds .verdict { display: flex; align-items: center; gap: 8px; font: 500 15px/1.2 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; }
.odds .verdict i { width: 9px; height: 9px; transform: rotate(45deg); background: currentColor; flex: none; }
.odds .verdict.win { color: var(--good); } .odds .verdict.close { color: var(--r-food); } .odds .verdict.loss { color: var(--blood-hi); } .odds .verdict.unknown { color: var(--muted); }
.meter { position: relative; height: 8px; background: linear-gradient(90deg, #7a2b22, #8a6a2c 50%, #4f7d44); box-shadow: inset 0 0 0 1px #0006; }
.meter b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--cream); box-shadow: 0 0 0 1px #000, 0 0 8px #fff8; transition: left 0.4s var(--ease); }
.meter::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #0008; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font: 400 12px/1.3 var(--ui); color: var(--muted); letter-spacing: 0.03em; }
.vs > :last-child { text-align: right; }
.vs em { font: italic 400 14px var(--display); color: var(--gold); }

/* Research unlocks */
.unlocks { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.unlocks small { font: 500 10px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.unlocks button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 8px; font: 500 11.5px/1.2 var(--ui); letter-spacing: 0.04em; color: var(--gold-hi); background: rgba(201, 161, 74, 0.08); box-shadow: inset 0 0 0 1px var(--line-soft); cursor: pointer; }
.unlocks button:hover { background: rgba(201, 161, 74, 0.18); }
.unlocks button em { font-style: normal; color: var(--faint); }
.unlocks span { padding: 3px 7px; font: 500 11.5px/1.2 var(--ui); letter-spacing: 0.04em; color: var(--gold-hi); background: rgba(201, 161, 74, 0.08); box-shadow: inset 0 0 0 1px var(--line-soft); }
.card.focus { animation: focus-card 1.6s ease-out; }
@keyframes focus-card { 0%, 40% { box-shadow: inset 0 0 0 2px var(--gold-hi); } }

/* Reports: clean paper dossier */
.rep-list { display: grid; gap: 4px; }
.rep-list button { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 54px; padding: 8px 10px; text-align: left; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px var(--line-soft); border-radius: var(--r-sm); }
.rep-list button:hover { background: rgba(201, 161, 74, 0.06); }
.rep-list .ic { width: 34px; height: 34px; display: grid; place-items: center; font-size: 17px; color: var(--gold); background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px var(--line-soft); }
.rep-list button.win .ic { color: var(--good); } .rep-list button.loss .ic { color: var(--blood-hi); }
.rep-list div { display: grid; gap: 3px; min-width: 0; }
.rep-list b { font: 500 14px/1.2 var(--ui); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-list div small { font: 400 12px/1.2 var(--text); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-list time { font: 400 11px var(--ui); color: var(--faint); letter-spacing: 0.04em; }
.rep-list button.new b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--gold-hi); transform: rotate(45deg); vertical-align: 2px; }
.paper { position: relative; padding: 22px 20px 20px; background: linear-gradient(180deg, #f3ebd8, #e6dabd); color: var(--paper-ink); box-shadow: 0 12px 26px #000b, inset 0 0 0 1px #fff6, inset 0 0 0 6px #f3ebd8, inset 0 0 0 7px #cbb584;
  font: 400 14px/1.6 var(--text); border-radius: var(--r-sm); overflow: hidden; }
.paper .dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 3px double #b79f6b; font: 500 10px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: #7b6440; }
.paper h4 { margin: 0 0 6px; font: 500 23px/1.15 var(--display); color: #231b12; padding-right: 34%; }
.paper .summary { margin: 4px 0 14px; font: 400 14.5px/1.55 var(--text); color: #3a3026; }
.paper .summary b { color: #1d1610; }
.paper h5 { margin: 16px 0 6px; font: 500 11px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: #7b6440; }
.paper .stamp { position: absolute; top: 56px; right: 14px; padding: 6px 10px 5px; border: 3px double currentColor; font: 600 14px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; transform: rotate(-8deg); opacity: 0.85; mix-blend-mode: multiply; }
.paper .stamp.go { animation: stamp 0.42s cubic-bezier(.3, 1.6, .5, 1) 0.15s both; }
@keyframes stamp { from { transform: rotate(-8deg) scale(2.6); opacity: 0; } 70% { opacity: 0.95; } }
.paper .stamp.win { color: #2f6b2a; } .paper .stamp.loss { color: #9a2a22; } .paper .stamp.intel { color: #2f4f7a; }
.paper .table { font: 400 13px/1.3 var(--text); } .paper .table th { color: #7b6440; border-color: #b9a47c; } .paper .table td { border-color: #d8c8a2; }
.paper .table td.lost { color: #9a2a22; }
.paper p { margin: 6px 0; }
.paper .loot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.paper .loot span { display: grid; gap: 2px; padding: 6px 7px; background: rgba(123, 100, 64, 0.1); box-shadow: inset 0 0 0 1px rgba(123, 100, 64, 0.3); font: 500 14px/1 var(--ui); font-variant-numeric: tabular-nums; }
.paper .loot small { font: 400 9.5px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: #7b6440; }
.paper .foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid #cbb584; font: 400 11px/1.4 var(--ui); letter-spacing: 0.08em; color: #7b6440; }

/* Racket slot machine */
.slots { display: flex; justify-content: center; gap: 8px; padding: 16px; background: #080706; box-shadow: inset 0 0 0 1px var(--gold-lo), inset 0 0 0 4px #080706, inset 0 0 0 5px var(--line-soft), inset 0 0 24px #000; }
.slots i { width: 64px; height: 78px; display: grid; place-items: center; font: 500 36px/1 var(--display); background: linear-gradient(#f6eeda, #dccb9f); color: #2a1f12; box-shadow: inset 0 8px 10px #0005, inset 0 -8px 10px #0005; font-style: normal; }
.slots.spin i { animation: reel 0.12s linear infinite; }
@keyframes reel { 50% { transform: translateY(-4px); filter: blur(1px); } }
.slots i { position: relative; overflow: hidden; }
.slots i svg { width: 38px; height: 38px; }
.slots i b { position: absolute; inset: 0 0 auto; animation: roll var(--d) cubic-bezier(0.25, 0.7, 0.35, 1.06) both; }
.slots i b span { height: 78px; display: grid; place-items: center; }
@keyframes roll { from { transform: translateY(calc(var(--n) * -78px)); filter: blur(1.5px); } 80% { filter: blur(0.5px); } to { transform: none; filter: none; } }
.won { text-align: center; font: 500 18px var(--display); color: var(--gold); margin: 8px 0 0; }

/* Jobs progress */
.progress { display: grid; gap: 7px; }
.progress .row b { font: 500 22px/1 var(--display); }
.progress .row small { font: 400 12px var(--ui); color: var(--muted); letter-spacing: 0.06em; }
.job.done { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--good); }
.job .rw { display: flex; flex-wrap: wrap; gap: 4px; }
.job .rw span { display: inline-flex; gap: 4px; align-items: center; padding: 3px 7px; font: 500 11.5px/1.2 var(--ui); background: rgba(0, 0, 0, 0.3); color: var(--muted); letter-spacing: 0.03em; }
.job .rw svg { color: var(--gold); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px var(--line-soft); width: 100%; text-align: left; }
.switch b { font: 500 14px/1.2 var(--ui); letter-spacing: 0.04em; }
.switch small { display: block; font: 400 12px/1.35 var(--text); color: var(--faint); margin-top: 2px; }
.switch i { position: relative; width: 44px; height: 24px; flex: none; background: var(--soot-4); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--muted); transition: transform 0.2s var(--ease), background 0.2s; }
.switch[aria-checked="true"] i { background: rgba(201, 161, 74, 0.3); }
.switch[aria-checked="true"] i::after { transform: translateX(20px); background: var(--gold-hi); }

/* ---------- Consigliere advisor ---------- */
#advisor { position: fixed; z-index: 7; left: 10px; right: 10px; bottom: calc(var(--nav) + 10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start;
  padding: 12px 12px 12px 12px; max-width: 460px; background: linear-gradient(180deg, rgba(26, 23, 20, 0.97), rgba(13, 11, 10, 0.97)); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 4px rgba(13, 11, 10, 0.9), inset 0 0 0 5px var(--line-soft), 0 12px 30px #000c; animation: fade-up 0.4s var(--ease); }
#advisor .face { width: 58px; height: 58px; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--gold); position: relative; }
#advisor .face svg { width: 100%; height: 100%; display: block; }
#advisor .face::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--gold); border-radius: var(--r-sm); pointer-events: none; }
#advisor .say { display: grid; gap: 6px; min-width: 0; }
#advisor .say .kicker { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-right: 30px; }
#advisor .say .kicker span { color: var(--faint); letter-spacing: 0.14em; }
#advisor .say p { margin: 0; font: 400 13.5px/1.45 var(--text); color: var(--cream); }
#advisor .say p.sub { font-size: 12.5px; color: var(--muted); }
#advisor .acts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
#advisor .acts .btn { min-height: 40px; }
#advisor .x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
#advisor .x:hover { color: var(--gold-hi); }
#advisor .steps { display: flex; gap: 3px; }
#advisor .steps i { width: 12px; height: 3px; background: var(--line-soft); }
#advisor .steps i.on { background: var(--gold); }
#advisor.mini { left: auto; right: auto; left: 10px; width: 58px; padding: 0; grid-template-columns: 58px; background: none; box-shadow: 0 8px 20px #000c; cursor: pointer; border-radius: var(--r-sm); }
#advisor.mini .say, #advisor.mini .x { display: none; }
#advisor.mini .dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; background: var(--gold-hi); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ink); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
body.panel-open #advisor:not(.mini) { display: none; }
body.panel-open #advisor.mini { bottom: auto; top: calc(var(--top) + 10px + env(safe-area-inset-top)); }
body.adv-open #coords { bottom: calc(var(--nav) + var(--adv-h, 120px) + 20px + env(safe-area-inset-bottom)); }

/* Inline tip inside a panel (phones, where the card hides) */
.advtip { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(201, 161, 74, 0.08); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--gold); }
.advtip .face { width: 34px; height: 34px; border-radius: var(--r-sm); overflow: hidden; }
.advtip .face svg { width: 100%; height: 100%; display: block; }
.advtip p { margin: 0; font: 400 13px/1.4 var(--text); color: var(--cream); }
.advtip b { font: 500 11px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }

/* Coach highlight: pulsing gold ring inside the target (targets may be clipped) */
.coach { position: relative; }
.coach::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px var(--gold-hi), inset 0 0 18px rgba(236, 208, 138, 0.45); animation: coach 1.3s ease-in-out infinite; z-index: 1; }
@keyframes coach { 50% { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 4px rgba(236, 208, 138, 0.1); } }
.btn.brass.coach::after, .btn.blood.coach::after { box-shadow: inset 0 0 0 2px #1f170c, inset 0 0 0 4px #fff3cf, inset 0 0 22px rgba(255, 250, 230, 0.7); animation-name: coach-lit; }
@keyframes coach-lit { 50% { box-shadow: inset 0 0 0 2px #1f170c, inset 0 0 0 3px rgba(255, 243, 207, 0.2), inset 0 0 6px rgba(255, 250, 230, 0.1); } }

/* ---------- Nav ---------- */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; height: calc(var(--nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr); background: linear-gradient(180deg, #16130f, #0b0a09); border-top: 1px solid var(--gold);
  box-shadow: 0 -4px 0 -2px var(--line-soft); }
#nav .brand, #nav .rail-foot, #nav kbd { display: none; }
#nav button[data-tab] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--faint); font-size: 22px; transition: color 0.2s; }
#nav button[data-tab]:hover { color: var(--muted); }
#nav button small { font: 500 9.5px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; }
#nav button.on { color: var(--gold-hi); background: radial-gradient(ellipse at 50% 100%, rgba(201, 161, 74, 0.18), transparent 70%); }
#nav button.on::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ink); }
#unread { position: absolute; top: 7px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--blood); color: #fff; font: 600 10px/17px var(--ui); font-style: normal; box-shadow: 0 0 0 2px var(--ink); }
#coords { position: fixed; left: 76px; bottom: calc(var(--nav) + 12px + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 4px; padding: 5px; background: rgba(11, 10, 9, 0.9); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-sm); }
#coords input { width: 54px; min-height: 40px; padding: 6px; background: var(--ink); color: var(--cream); border: 1px solid var(--line); font: 500 15px var(--ui); text-align: center; }
@media (max-width: 380px) { #coords input { width: 46px; } } /* room for the district map button */
body.panel-open #coords { display: none; }
#estnav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav) + 12px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 6px; padding: 5px; background: rgba(11, 10, 9, 0.9); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-sm); }
#estnav[hidden], body.panel-open #estnav { display: none; }
#estnav span { cursor: pointer; min-width: 140px; text-align: center; font: 600 14px var(--ui); color: var(--cream); letter-spacing: 0.04em; }
#estnav .btn { min-width: 44px; font-size: 22px; }
body.adv-open #estnav { bottom: calc(var(--nav) + var(--adv-h, 120px) + 20px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) { /* on the City Map it sits above the coordinates bar */
  body.on-map #estnav { bottom: calc(var(--nav) + 66px + env(safe-area-inset-bottom)); }
  body.on-map.adv-open #estnav { bottom: calc(var(--nav) + var(--adv-h, 120px) + 74px + env(safe-area-inset-bottom)); }
}
#estnav { touch-action: pan-y; }
@media (min-width: 1340px) { /* wide screens: the Advisor sits to the left, so the switcher stays at the bottom */
  #estnav, body.adv-open #estnav { bottom: 14px; }
}

/* ---------- Phone tweaks ---------- */
@media (max-width: 899px) {
  #toasts, #netbar, #newsbar { left: 10px; right: 10px; width: auto; min-width: 0; max-width: none; transform: none; }
  #netbar span, #newsbar span { flex: 1; }
  #start { padding-top: calc(22px + env(safe-area-inset-top)); gap: 16px; }
  #start .wordmark { font-size: 58px; margin: 8px 0 10px; }
  .poster .lede { font-size: 14px; margin-top: 12px; }
  #auth { padding: 18px 16px; gap: 14px; }
  .gang { min-height: 44px; padding: 8px 14px; }
  .phead { padding: 12px 16px 10px; } .phead h2 { font-size: 24px; margin-top: 4px; }
  #p-close { width: 40px; height: 40px; }
  #advisor { grid-template-columns: 48px 1fr; gap: 10px; padding: 10px; }
  #advisor .face { width: 48px; height: 48px; }
  #advisor.mini { width: 52px; grid-template-columns: 52px; padding: 0; }
  #advisor.mini .face { width: 52px; height: 52px; }
  #advisor .say p { font-size: 13px; }
  .chip small svg { display: none; }
}

/* ---------- Desktop: left rail, top bar, right drawer ---------- */
@media (min-width: 900px) {
  :root { --nav: 0px; --top: 64px; }
  #top { left: var(--rail); grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 10px 20px; height: var(--top); }
  #res { grid-template-columns: repeat(4, minmax(120px, 168px)); gap: 8px; }
  .rc { padding: 6px 10px 8px; } .rc svg { font-size: 19px; } .rc b { font-size: 16px; }
  .rc .cap { left: 10px; right: 10px; }
  .rc .rn { display: inline; }
  .rc .rl { gap: 6px; }
  .rc .rn::after { content: '\00b7'; margin-left: 6px; color: var(--faint); }
  #plate { min-width: 300px; justify-content: flex-end; padding-left: 20px; border-left: 1px solid var(--line-soft); }
  .who { flex: 0 1 auto; text-align: left; }
  #nav { top: 0; bottom: 0; right: auto; width: var(--rail); height: auto; display: flex; flex-direction: column; padding: 0 0 12px; border-top: 0; border-right: 1px solid var(--gold);
    box-shadow: 4px 0 0 -2px var(--line-soft); background: linear-gradient(90deg, #0b0a09, #15120f); }
  #nav .brand { display: grid; place-items: center; align-content: center; gap: 2px; height: var(--top); border-bottom: 1px solid var(--line); margin-bottom: 10px; }
  #nav .brand b { font: 500 30px/1 var(--display); color: var(--gold-hi); }
  #nav .brand small { font: 500 9px/1 var(--ui); letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-left: 0.4em; }
  #nav button[data-tab] { height: 76px; flex: none; font-size: 23px; margin: 0 8px 2px; border-radius: var(--r-sm); }
  #nav button[data-tab]:hover { background: rgba(201, 161, 74, 0.06); }
  #nav button.on { background: linear-gradient(90deg, rgba(201, 161, 74, 0.16), rgba(201, 161, 74, 0.04)); }
  #nav button.on::before { top: 50%; left: 0; margin: -3.5px 0 0 -3.5px; }
  #nav kbd { display: block; position: absolute; top: 7px; right: 8px; color: var(--faint); opacity: 0.7; }
  #nav .rail-foot { display: grid; place-items: center; margin-top: auto; padding-top: 12px; }
  #unread { top: 10px; left: calc(50% + 8px); }
  #panel { left: auto; top: var(--top); bottom: 0; width: var(--drawer); height: auto; border-top: 0; border-left: 1px solid var(--gold);
    box-shadow: -4px 0 0 -2px var(--line-soft), -24px 0 44px #000b; transform: translateX(105%); }
  #panel.open { transform: none; }
  .phead { padding: 20px 22px 14px; } .phead::after { left: 22px; right: 22px; }
  .phead h2 { font-size: 30px; }
  #p-body { padding: 16px 22px 30px; gap: 12px; }
  .tabs { top: -16px; }
  #queues { top: calc(var(--top) + 14px); right: 18px; width: 214px; transition: right 0.32s var(--ease); }
  body.panel-open #queues { right: calc(var(--drawer) + 18px); }
  #toasts { top: calc(var(--top) + 14px); left: calc(50% + var(--rail) / 2); width: 400px; }
  body.panel-open #toasts { left: calc((100% + var(--rail) - var(--drawer)) / 2); }
  #netbar, #newsbar { top: calc(var(--top) + 14px); left: calc(50% + var(--rail) / 2); }
  #coords { left: auto; right: 18px; bottom: 18px; }
  body.panel-open #coords { display: flex; right: calc(var(--drawer) + 18px); }
  #advisor { left: calc(var(--rail) + 18px); right: auto; bottom: 18px; width: 420px; }
  #advisor.mini { left: calc(var(--rail) + 18px); width: 58px; }
  body.panel-open #advisor:not(.mini) { display: grid; }
  body.panel-open #advisor.mini { top: auto; bottom: 18px; }
  body.adv-open #coords { bottom: 18px; }
  .qt { min-height: 48px; }
  .qt b, .qt span { font-size: 13px; }
}
@media (min-width: 1700px) { :root { --drawer: 520px; } #queues { width: 236px; } }
@media (max-width: 380px) { .rc small { display: none; } .wordmark { font-size: 58px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
/* While you were away card */
.away { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; }
.away li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.away svg { width: 16px; height: 16px; flex: none; }
blockquote.quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--blood-hi); background: rgba(0, 0, 0, 0.3); font: 400 14px/1.4 var(--text); color: var(--cream); white-space: pre-wrap; }