/* SkyForge — "blueprint grimoire": ink-navy drafting grid, brass inscriptions,
   material colours as the only saturated hues. Light theme = projector mode. */

:root {
  --bg: #0a0f1d; --bg2: #0d1426; --panel: #111a2e; --panel2: #172139; --panel3: #1d2944;
  --line: #24314f; --line2: #33446b; --grid: rgba(102, 140, 220, .055);
  --ink: #e8ecf6; --ink2: #c3cbe0; --muted: #8f9bbb;
  --brass: #e3b04b; --brass2: #f6d590; --brass-ink: #1a1306; --cyan: #6fd3ff;
  --good: #44d17f; --mid: #f1b23f; --bad: #ff5d6c;
  --sky0: #2a3a5e; --sky1: #141d37; --sky2: #04060d; --mtn: #0b1122; --star: #fff;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --r: 14px; --r2: 10px;
  --f-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-body: 'Barlow', 'Segoe UI', sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3efe4; --bg2: #ebe5d5; --panel: #fffdf8; --panel2: #f6f1e5; --panel3: #ece4d2;
  --line: #d8cfb9; --line2: #c3b796; --grid: rgba(80, 60, 20, .06);
  --ink: #18202f; --ink2: #2f3a50; --muted: #5d6680;
  --brass: #9a6a12; --brass2: #c08a26; --brass-ink: #fffaf0; --cyan: #0b6fa0;
  --good: #11804a; --mid: #a86b00; --bad: #c42a3a;
  --sky0: #d7e8f7; --sky1: #8db2da; --sky2: #1c2948; --mtn: #b9c6d8; --star: #fff;
  --shadow: 0 8px 22px rgba(60, 40, 0, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(227, 176, 75, .08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(111, 211, 255, .06), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
  color: var(--ink); font: 15px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
body.busy { cursor: progress; }
button { font: inherit; color: inherit; }
input, select { font: inherit; color: var(--ink); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; }
h3 { font-family: var(--f-cond); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass2); }
:root[data-theme="light"] h3 { color: var(--brass); }
h4 { font-family: var(--f-cond); font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); margin-top: 1.1em; }
p { margin: 0 0 .7em; }
small { color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.good { color: var(--good); } .bad { color: var(--bad); }
.err { color: var(--bad); font-weight: 600; }
.break { word-break: break-all; }
.eyebrow { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--brass); margin-bottom: .4em; }
.h-display { font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; }
.boot { padding: 40vh 20px; text-align: center; color: var(--muted); font-family: var(--f-display); letter-spacing: .1em; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--ink); cursor: pointer; font-weight: 600;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { border-color: var(--brass); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, var(--brass2), var(--brass)); color: var(--brass-ink); border-color: transparent; box-shadow: 0 4px 18px rgba(227, 176, 75, .25); }
:root[data-theme="light"] .btn.primary { background: linear-gradient(180deg, #c08a26, #8e5f0c); }
.btn.big { padding: 12px 22px; font-size: 1.02rem; }
.btn.huge { padding: 15px 26px; font-size: 1.12rem; width: 100%; margin-top: 10px; }
.btn.small { padding: 5px 11px; font-size: .88rem; border-radius: 8px; }
.btn.wide { width: 100%; }
.btn.ghost, .ghost { background: transparent; border: 1px solid transparent; color: var(--ink2); cursor: pointer; border-radius: 8px; padding: 6px 10px; }
.btn.ghost:hover, .ghost:hover { border-color: var(--line2); color: var(--ink); }
.ghost.small { font-size: .85rem; }
.ghost.icon { font-size: 1.05rem; width: 36px; }
.link { background: none; border: 0; color: var(--cyan); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.link.small { font-size: .82rem; }
.pill { display: inline-block; font: 600 .72rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 99px; background: var(--panel3); color: var(--ink2); border: 1px solid var(--line2); vertical-align: middle; }
.pill.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.pill.hot { background: var(--brass); color: var(--brass-ink); border-color: transparent; }
.tag { display: inline-flex; gap: 4px; align-items: center; font: 600 .84rem/1 var(--f-cond); letter-spacing: .02em; padding: 5px 8px; border-radius: 6px; background: var(--panel3); color: var(--ink2); margin: 0 4px 4px 0; }

/* ---------- hex material badge */
.hexb {
  --s: 36px; width: var(--s); height: calc(var(--s) * 1.1); display: inline-grid; place-items: center; flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 100%, white 25%), var(--mc));
  color: #10131c; font: 700 calc(var(--s) * .38)/1 var(--f-mono);
}
.hexb.sm { --s: 24px; } .hexb.lg { --s: 50px; } .hexb.xl { --s: 74px; }
.hexb.empty { --mc: var(--line2); color: var(--muted); }
.role-ic { font-size: 1rem; opacity: .9; }

/* ---------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: 700 1.05rem/1 var(--f-display); letter-spacing: .12em; color: var(--ink); white-space: nowrap; }
.brand em, h1 em { font-style: normal; color: var(--brass); }
.tb-mid { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.tb-nav { display: flex; gap: 4px; }
.roomcode { font: 600 1rem var(--f-cond); letter-spacing: .08em; }
.roomcode b { font-family: var(--f-mono); color: var(--brass); font-size: 1.1rem; letter-spacing: .15em; }
.legbar { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.legbar b { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .04em; }
.leg-n { font: 700 .8rem var(--f-mono); color: var(--brass-ink); background: var(--brass); padding: 3px 7px; border-radius: 6px; }
.net { font: 600 .8rem var(--f-mono); color: var(--muted); padding: 3px 8px; border: 1px solid var(--line2); border-radius: 6px; }
.net.ok::before { content: '● '; color: var(--good); }
.timer { position: relative; width: 44px; height: 44px; display: grid; place-items: center; margin-left: auto; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 4; }
.tr-bg { stroke: var(--line); }
.tr-fg { stroke: var(--brass); stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer span { font: 700 .95rem var(--f-mono); }
.timer.low .tr-fg { stroke: var(--bad); }
.timer.low span { color: var(--bad); animation: pulse 1s infinite; }
.timer.idle .tr-fg, .timer.paused .tr-fg { stroke: var(--line2); }

/* ---------- d20 */
.d20 { width: 40px; height: 40px; }
.d20.tiny { width: 22px; height: 22px; }
.d20-o { fill: var(--panel3); stroke: var(--brass); stroke-width: 3; stroke-linejoin: round; }
.d20-f { fill: color-mix(in srgb, var(--brass) 18%, var(--panel2)); stroke: var(--brass); stroke-width: 2.4; stroke-linejoin: round; }
.d20-l { stroke: var(--brass); stroke-width: 2; opacity: .7; }
.d20-n { font: 700 22px var(--f-mono); fill: var(--ink); text-anchor: middle; }
.btn.primary .d20-o { fill: transparent; stroke: var(--brass-ink); } .btn.primary .d20-f { fill: transparent; stroke: var(--brass-ink); } .btn.primary .d20-l { stroke: var(--brass-ink); }

/* ---------- title */
.title { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
.hero { position: relative; }
.hero h1 { font: 900 clamp(2.8rem, 7vw, 5.4rem)/0.95 var(--f-display); letter-spacing: .06em; margin: 6px 0 14px; text-shadow: 0 6px 30px rgba(227, 176, 75, .15); }
.hero .sub { font-size: 1.12rem; color: var(--ink2); max-width: 36em; }
.hero-dice { position: absolute; right: 0; top: -10px; opacity: .14; pointer-events: none; }
.hero-d { width: 240px; height: 240px; animation: slowspin 40s linear infinite; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.cta.small { gap: 18px; margin-top: 14px; }
.route-teaser .route { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line); }
.mat-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mat-mini { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--mc); border-radius: var(--r2); cursor: pointer; font: 600 .95rem var(--f-cond); letter-spacing: .03em; text-align: left; }
.mat-mini:hover { border-color: var(--mc); }
.foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 18px 16px 30px; }
.narrow { max-width: 560px; margin: 0 auto; padding: 40px 16px; }
.field { display: grid; gap: 6px; margin: 14px 0; }
.field span { font: 600 .85rem var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .crew-name-in, select { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 11px 13px; font-size: 1.05rem; }
.code-in { font: 700 1.6rem var(--f-mono) !important; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 14px; }
.callout { border-left: 3px solid var(--brass); padding: 8px 12px; background: var(--panel2); border-radius: 0 8px 8px 0; }

/* ---------- lobby */
.lobby { max-width: 1400px; margin: 0 auto; padding: 18px 16px 40px; display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.invite-grid { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.qr { width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 4px; display: grid; place-items: center; color: #333; font-size: .7rem; }
.qr svg { width: 100%; height: 100%; }
.big-code { font: 700 2rem var(--f-mono); letter-spacing: .2em; color: var(--brass); margin-bottom: 6px; }
.people { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line2); margin-right: 8px; }
.dot.on { background: var(--good); box-shadow: 0 0 8px var(--good); }
.tog { display: flex; gap: 9px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.tog input { margin-top: 4px; accent-color: var(--brass); width: 16px; height: 16px; flex: none; }
.sel { display: grid; gap: 6px; margin-top: 10px; font-size: .92rem; }
.sel select { padding: 8px 10px; font-size: .95rem; }
.crew-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.crew-tab { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); border-bottom: 3px solid var(--mc); border-radius: 10px; cursor: pointer; font-weight: 600; }
.crew-tab.on { background: var(--panel3); border-color: var(--mc); }
.crew-tab:not(.mine):not(.add) { opacity: .75; }
.crew-tab .ready { color: var(--good); font-style: normal; }
.crew-tab.add { border-style: dashed; border-bottom-width: 1px; color: var(--muted); }
.editor { border-top: 4px solid var(--mc); }
.ed-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.crew-name-in { font: 700 1.25rem var(--f-display); letter-spacing: .03em; max-width: 360px; width: 100%; }
.step { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.step > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--brass-ink); font: 700 .8rem var(--f-mono); }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; }
.mat-card { position: relative; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-top: 3px solid var(--mc); border-radius: 12px; padding: 12px; cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .15s; }
.mat-card:hover:not(:disabled):not(.static) { transform: translateY(-2px); border-color: var(--mc); }
.mat-card.on { box-shadow: 0 0 0 2px var(--mc), 0 8px 24px color-mix(in srgb, var(--mc) 25%, transparent); background: color-mix(in srgb, var(--mc) 9%, var(--panel2)); }
.mat-card:disabled { opacity: .4; cursor: not-allowed; }
.mat-card p { font-size: .86rem; color: var(--ink2); margin: 8px 0; min-height: 3.6em; }
.mc-head { display: flex; gap: 10px; align-items: center; }
.mc-head b { display: block; font: 700 1.05rem var(--f-cond); letter-spacing: .03em; }
.mc-head small { display: block; font-size: .74rem; line-height: 1.25; }
.taken { position: absolute; top: 10px; right: 10px; font: 700 .7rem var(--f-cond); text-transform: uppercase; letter-spacing: .1em; color: var(--bad); }
.bars { display: grid; gap: 2px; }
.bar-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; font: 500 .72rem var(--f-cond); letter-spacing: .03em; color: var(--muted); }
.bar-row i { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.bar-row b { height: 6px; border-radius: 2px; background: var(--mc); }
.bar-row b.off { background: var(--line); }
.proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.proc { text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.proc.on { box-shadow: 0 0 0 2px var(--mc); background: color-mix(in srgb, var(--mc) 8%, var(--panel2)); }
.proc b { display: block; font: 700 1.02rem var(--f-cond); }
.proc em { display: block; color: var(--brass); font-size: .85rem; margin: 2px 0 6px; }
.proc p { font-size: .85rem; color: var(--ink2); }
.proc.static { cursor: default; margin-bottom: 8px; }
.fx { display: flex; flex-wrap: wrap; gap: 4px; }
.fx span, .tut-proc span { font: 600 .75rem var(--f-cond); letter-spacing: .03em; padding: 3px 7px; border-radius: 6px; background: var(--panel3); }
.up { color: var(--good); } .down { color: var(--bad); } .neutral { color: var(--muted); }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.role { text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.role.on { box-shadow: 0 0 0 2px var(--brass); background: color-mix(in srgb, var(--brass) 8%, var(--panel2)); }
.role-grid.static .role { cursor: default; }
.role-big { font-size: 1.5rem; display: block; line-height: 1; margin-bottom: 4px; color: var(--brass); }
.role b { display: block; font: 700 1.02rem var(--f-cond); }
.role p { font-size: .84rem; color: var(--ink2); margin: 6px 0 0; }
.role .ab { color: var(--muted); }
.cargo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.crates { display: flex; gap: 5px; }
.crate { width: 24px; height: 24px; border-radius: 4px; border: 2px dashed var(--line2); }
.crate.full { border: 2px solid var(--brass); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--brass) 35%, transparent) 0 4px, transparent 4px 8px); }
.cargo-facts { font-size: .92rem; color: var(--ink2); }
.derived { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 16px; }
.derived div { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.derived small { display: block; font: 600 .72rem var(--f-cond); text-transform: uppercase; letter-spacing: .07em; }
.derived b { font: 700 1.1rem var(--f-mono); }
.ed-foot { margin-top: 18px; display: flex; justify-content: flex-end; }
.crew-summaries { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.crew-sum { display: flex; gap: 12px; align-items: center; margin: 0 !important; border-left: 3px solid var(--mc); padding: 12px; }
.empty-state { color: var(--muted); }

/* ---------- route map */
/* Drawn over img/route-bg.webp in 1536×1024 image pixels, so sizes here are large. */
.route { display: block; width: 100%; height: auto; border-radius: 10px; background: #050914; }
.rp-future { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 6; stroke-dasharray: 2 16; stroke-linecap: round; }
.rp-done { fill: none; stroke: #f6d590; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(246, 213, 144, .8)); }
.rp-active { fill: none; stroke: #f6d590; stroke-width: 9; stroke-dasharray: 26 18; stroke-linecap: round; animation: march 1s linear infinite; }
.node circle { fill: rgba(6, 10, 22, .78); stroke: #fff; stroke-width: 5; }
.node text { font: 700 28px var(--f-mono); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.node.past circle { fill: #e3b04b; stroke: #fff4d6; }
.node.past text { fill: #1a1306; }
.node.cur circle { stroke: #f6d590; stroke-width: 9; animation: glow 1.4s infinite; }
.rl { font: 700 34px var(--f-cond); fill: #fff; letter-spacing: .03em; paint-order: stroke; stroke: rgba(4, 7, 16, .88); stroke-width: 9px; stroke-linejoin: round; }
.tok polygon { stroke: #050914; stroke-width: 5; }
.tok text { font: 700 20px var(--f-mono); fill: #10131c; text-anchor: middle; dominant-baseline: central; }
.tok.pulse { animation: tokpulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tok.lost { opacity: .4; }
@keyframes march { to { stroke-dashoffset: -44; } }

/* ---------- game */
.game { max-width: 1500px; margin: 0 auto; padding: 14px 16px 40px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.g-left { position: sticky; top: 72px; max-height: calc(100vh - 86px); overflow: auto; scrollbar-width: thin; }
.map-panel { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: none; cursor: zoom-in; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.map-panel:hover { border-color: var(--brass); }
.map-hint { position: absolute; left: 8px; bottom: 8px; font: 600 .78rem var(--f-cond); letter-spacing: .04em; color: #fff; background: rgba(4, 7, 16, .7); padding: 3px 8px; border-radius: 6px; }
.route-modal { width: min(1200px, 100%); }
.route-modal .route { margin-top: 10px; }
.route-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-weight: 600; }
.route-legend span { display: inline-flex; align-items: center; gap: 6px; }
.route-legend em { font-style: normal; font-weight: 400; font-size: .85rem; }
.leg-map { margin: -10px -6px 16px; }
.leg-map .route { border-radius: 10px; }
.map-final { padding: 8px; }
.mlog summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; list-style: none; }
.mlog summary::-webkit-details-marker { display: none; }
.mlog summary h3 { margin: 0; }
.mlog summary::before { content: '▸'; color: var(--brass); }
.mlog[open] summary::before { content: '▾'; }
.mlog-body { columns: 2 380px; column-gap: 28px; margin-top: 10px; }
.mlog-body h4 { break-after: avoid; margin: 12px 0 6px; color: var(--brass2); }
.mlog-body ol { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.mlog-body li { break-inside: avoid; }
.roster { display: grid; gap: 8px; margin-top: 12px; }
.rc { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--mc); border-radius: 12px; padding: 10px 12px; }
.rc.active { box-shadow: 0 0 0 2px var(--mc), 0 6px 20px color-mix(in srgb, var(--mc) 25%, transparent); }
.rc.lost { opacity: .6; }
.rc-top { display: flex; align-items: center; gap: 8px; }
.rc-top b { flex: 1; font: 700 1rem var(--f-cond); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sub { font-size: .78rem; color: var(--muted); margin: 2px 0 6px; }
.hp { position: relative; height: 16px; background: var(--panel3); border-radius: 5px; overflow: hidden; }
.hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 60%, var(--mc))); transition: width .5s; }
.hp span { position: relative; font: 700 .72rem/16px var(--f-mono); padding-left: 6px; color: #08120c; }
.rc-stats { display: flex; gap: 10px; font: 600 .8rem var(--f-mono); color: var(--ink2); margin-top: 6px; flex-wrap: wrap; }
.conds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cond { font: 600 .72rem var(--f-cond); letter-spacing: .03em; padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb, var(--bad) 16%, var(--panel2)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); cursor: help; }
.cond.perm { background: color-mix(in srgb, var(--mid) 18%, var(--panel2)); border-color: color-mix(in srgb, var(--mid) 45%, transparent); }
.cond.hidden { background: transparent; border-style: dashed; color: var(--mid); }
.lost-tag { font-size: .8rem; color: var(--bad); }
.log ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lg { font-size: .82rem; line-height: 1.35; padding: 5px 0 5px 9px; border-left: 3px solid var(--line2); color: var(--ink2); }
.lg.success { border-color: var(--good); } .lg.fail, .lg.lost, .lg.fracture { border-color: var(--bad); }
.lg.leg { border-color: var(--brass); color: var(--brass2); font-weight: 600; }
.lg.lost, .lg.fracture { color: var(--bad); }

.turn { display: grid; gap: 14px; animation: rise .35s ease-out; }
.turn-head { display: flex; gap: 14px; align-items: center; }
.th-name { font: 700 1.5rem var(--f-display); letter-spacing: .03em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.start-notes { display: grid; gap: 6px; }
.sn { padding: 8px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); font-size: .9rem; }
.sn.fracture, .sn.dmg, .sn.lost { border-color: var(--bad); color: var(--bad); }
.event { position: relative; background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 10%, var(--panel)), var(--panel)); border: 1px solid var(--line); border-top: 4px solid var(--mc); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.event h2 { font: 700 clamp(1.5rem, 3vw, 2.1rem) var(--f-display); letter-spacing: .02em; margin: 6px 0 8px; }
.event p { font-size: 1.05rem; color: var(--ink2); max-width: 60em; margin: 0; }
.ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ev-leg { font: 700 .78rem var(--f-cond); text-transform: uppercase; letter-spacing: .12em; color: var(--brass); margin-right: 8px; }
.choose { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.apprs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.appr { text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: pointer; display: grid; gap: 6px; align-content: start; }
.appr:hover:not(:disabled) { border-color: var(--brass); }
.appr.on { box-shadow: 0 0 0 2px var(--brass); background: color-mix(in srgb, var(--brass) 8%, var(--panel2)); }
.appr.special { border-style: dashed; border-color: var(--line2); }
.appr.special.on { border-style: solid; }
.appr.locked { opacity: .62; cursor: not-allowed; }
.appr:disabled:not(.locked) { cursor: default; }
.ap-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ap-h b { font: 700 1rem var(--f-cond); letter-spacing: .02em; }
.meta { font: 600 .78rem var(--f-mono); color: var(--muted); white-space: nowrap; }
.appr p { font-size: .82rem; color: var(--ink2); margin: 0; }
.appr .lock { color: var(--mid); }
.fxline { font-family: var(--f-mono); font-size: .74rem !important; color: var(--muted) !important; }
.odds { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--line); }
.odds.compact { height: 7px; }
.ob { min-width: 0; transition: flex .3s; }
.ob.s { background: var(--good); } .ob.f { background: var(--bad); }
.odds-l { display: flex; gap: 12px; font: 600 .78rem var(--f-mono); margin-top: 3px; }
.odds-l .s { color: var(--good); } .odds-l .f { color: var(--bad); }
.toggles { margin: 10px 0 0; }
.checkbox { margin-top: 12px; padding: 12px 14px; background: var(--panel2); border-radius: 12px; border: 1px solid var(--line); }
.checkbox h4 { margin-top: 0; }
.mods { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 5px; }
.mods li { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: baseline; font-size: .92rem; }
.mods small { display: block; font-size: .8rem; }
.mv { font: 700 .95rem var(--f-mono); text-align: right; }
.need { font-size: .95rem; margin-bottom: 8px; }
.need b { font-family: var(--f-mono); color: var(--brass2); font-size: 1.1rem; }
:root[data-theme="light"] .need b { color: var(--brass); }
.roll-btn { font-family: var(--f-display); letter-spacing: .08em; }
.waiting { text-align: center; color: var(--muted); font-style: italic; margin: 14px 0 0; animation: pulse 2s infinite; }

.result { border-radius: var(--r); padding: 16px 18px; border: 1px solid var(--line); background: var(--panel); border-left: 6px solid var(--line2); animation: rise .3s ease-out; }
.result.tier-success { border-left-color: var(--good); } .result.tier-fail { border-left-color: var(--bad); } .result.tier-auto { border-left-color: var(--cyan); }
.res-top { display: flex; gap: 14px; align-items: center; }
.res-d { width: 64px; height: 64px; }
.res-d.crit .d20-o { fill: color-mix(in srgb, var(--good) 35%, var(--panel3)); }
.res-d.fumble .d20-o { fill: color-mix(in srgb, var(--bad) 35%, var(--panel3)); }
.res-tier { font: 900 1.6rem var(--f-display); letter-spacing: .05em; }
.tier-success .res-tier { color: var(--good); } .tier-fail .res-tier { color: var(--bad); } .tier-auto .res-tier { color: var(--cyan); }
.res-math { font: 600 .95rem var(--f-mono); }
.res-text { font-size: 1.05rem; margin: 12px 0 6px; }
.notes { margin: 0 0 8px; padding-left: 18px; }
.notes li { margin: 2px 0; }
.n-dmg, .n-lost, .n-crate, .n-fracture { color: var(--bad); } .n-save, .n-spare, .n-pts { color: var(--good); } .n-cond { color: var(--mid); }
.insight { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--cyan) 8%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.insight b { color: var(--cyan); font-family: var(--f-cond); letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.insight p { margin: 4px 0 0; font-size: .95rem; }
.hangar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.hangar.lost { border-color: var(--bad); }
.hopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.hopt { text-align: left; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; display: grid; gap: 3px; }
.hopt:hover:not(:disabled) { border-color: var(--brass); }
.hopt:disabled { cursor: default; opacity: .7; }

.handover { text-align: center; padding: 34px 20px; background: radial-gradient(600px 300px at 50% 0, color-mix(in srgb, var(--mc) 18%, transparent), transparent), var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--mc); border-radius: var(--r); box-shadow: var(--shadow); animation: rise .35s ease-out; }
.ho-crew { display: grid; justify-items: center; gap: 10px; margin: 10px 0; }
.ho-crew h2 { font: 900 clamp(2rem, 5vw, 3rem) var(--f-display); letter-spacing: .05em; margin: 0; }
.handover .btn.huge { max-width: 520px; margin: 18px auto; }
.ho-recent { max-width: 620px; margin: 10px auto 0; text-align: left; }
.ho-recent ol { list-style: none; padding: 0; display: grid; gap: 5px; }

/* ---------- overlay / modals */
#overlay { position: fixed; inset: 0; z-index: 50; display: none; }
#overlay.open { display: grid; place-items: center; padding: 16px; }
.scrim { position: absolute; inset: 0; background: rgba(4, 7, 15, .72); backdrop-filter: blur(3px); animation: fade .2s; }
.modal { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 20px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: pop .25s ease-out; }
.small-modal { width: min(460px, 100%); }
.leg-modal { width: min(780px, 100%); text-align: center; padding: 30px 26px; border-top: 5px solid var(--brass); }
.leg-modal h2 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 4px 0; }
.leg-topic { font: 700 1.05rem var(--f-cond); text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); }
.leg-modal p { font-size: 1.05rem; color: var(--ink2); }
.watch { margin: 6px 0 18px; }
.cx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cx-head h2 { margin: 0; font-size: 1.6rem; }
.x { background: none; border: 1px solid var(--line2); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; color: var(--ink2); }
.cx-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.cx-tabs button { background: none; border: 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; font: 600 .95rem var(--f-cond); letter-spacing: .04em; color: var(--muted); }
.cx-tabs button.on { background: var(--brass); color: var(--brass-ink); }
.cx-mat { display: grid; grid-template-columns: 190px 1fr; gap: 18px; }
.cx-mats { display: grid; gap: 6px; align-content: start; position: sticky; top: 0; }
.cx-mats button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; text-align: left; font: 600 .92rem var(--f-cond); }
.cx-mats button.on { border-color: var(--mc); box-shadow: inset 3px 0 0 var(--mc); }
.cxm-h { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.cxm-h h3 { font: 700 1.9rem var(--f-cond); letter-spacing: .01em; color: var(--ink); text-transform: none; margin: 0; }
.cx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
table.plain { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.plain th, table.plain td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plain th { color: var(--muted); font-weight: 600; }
table.props th { width: 46%; }
.tablewrap { overflow-x: auto; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ashby { margin: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.ashby figcaption { font: 700 .9rem var(--f-cond); text-transform: uppercase; letter-spacing: .08em; color: var(--brass2); }
.ashby svg { width: 100%; height: auto; }
.ashby .grid { stroke: var(--line); }
.ashby .ax { font: 500 10px var(--f-mono); fill: var(--muted); text-anchor: middle; }
.ashby .ax.end { text-anchor: end; }
.ashby .guide { stroke: var(--cyan); stroke-dasharray: 5 4; opacity: .6; }
.ashby .gl { font: 600 10px var(--f-mono); fill: var(--cyan); }
.ashby .pl { font: 700 11px var(--f-cond); fill: var(--ink); }
.route-leg { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sources li { margin-bottom: 6px; }
.rules ol, .rules ul { padding-left: 20px; }
.rules li { margin: 4px 0; }

/* tutorial */
.tutorial { width: min(820px, 100%); }
.tut-progress { display: flex; gap: 4px; margin: 12px 0; }
.tut-progress button { flex: 1; height: 5px; border-radius: 3px; border: 0; background: var(--line); cursor: pointer; padding: 0; }
.tut-progress button.done { background: color-mix(in srgb, var(--brass) 55%, var(--line)); }
.tut-progress button.on { background: var(--brass); }
.tut-body { min-height: 300px; }
.tut-body h3 { font: 700 1.5rem var(--f-display); text-transform: none; letter-spacing: .02em; color: var(--ink); }
.tut-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.tut-mats div { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px; background: var(--panel2); border-radius: 10px; border-left: 3px solid var(--mc); }
.tut-mats .hexb { grid-row: span 2; }
.tut-mats small { font-size: .8rem; line-height: 1.3; }
.tut-proc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.tut-proc div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 12px; background: var(--panel2); border-radius: 10px; }
.tut-proc b, .tut-proc small { flex-basis: 100%; }
.tut-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.tut-roles div { padding: 10px; background: var(--panel2); border-radius: 10px; }
.tut-roles b { display: block; }
.tut-roles small { font-size: .8rem; line-height: 1.3; display: block; }
.tut-widget { background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 14px; margin-top: 10px; display: grid; gap: 10px; }
.tut-widget label { display: grid; gap: 4px; font-size: .92rem; }
.tut-widget input[type=range] { accent-color: var(--brass); width: 100%; }
.tw-roll { font: 600 .95rem var(--f-mono); }
.tut-legs li, .tut-list li { margin: 6px 0; }

/* playtest / results */
.mini-bar { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: var(--line); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--brass); }
.results { max-width: 1200px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 16px; }
.podium { text-align: center; padding: 30px 20px 18px; background: radial-gradient(500px 220px at 50% 0, color-mix(in srgb, var(--mc) 25%, transparent), transparent); }
.podium h1 { font: 900 clamp(2rem, 6vw, 3.4rem) var(--f-display); letter-spacing: .05em; margin: 12px 0 4px; }
.podium .sub { color: var(--ink2); }
table.score { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.score th { font: 600 .78rem var(--f-cond); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line2); }
table.score th:nth-child(2) { text-align: left; }
table.score td { text-align: right; padding: 8px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); }
table.score td.sc-crew { text-align: left; font-family: var(--f-body); }
.sc-crew small { display: block; margin-left: 30px; }
table.score .tot { font-weight: 700; color: var(--brass2); font-size: 1.05rem; }
:root[data-theme="light"] table.score .tot { color: var(--brass); }
table.score tr.lost td { opacity: .6; }
table.lca { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.lca th { text-align: left; font: 600 .76rem var(--f-cond); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px; border-bottom: 1px solid var(--line2); }
table.lca td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
table.lca td:first-child { white-space: nowrap; }
.result, .turn, .handover { scroll-margin-top: 80px; }
.journeys { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.jr { background: var(--panel2); border-radius: 12px; border-left: 4px solid var(--mc); padding: 10px 12px; }
.jr-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jlegs { display: flex; gap: 5px; margin: 8px 0; }
.jl { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; font: 700 .9rem var(--f-mono); background: var(--panel3); }
.jl.t-success { background: color-mix(in srgb, var(--good) 30%, var(--panel3)); color: var(--good); }
.jl.t-fail, .jl.t-lost { background: color-mix(in srgb, var(--bad) 30%, var(--panel3)); color: var(--bad); }
.jl.t-auto { color: var(--cyan); }
.lessons { margin: 0; padding-left: 16px; font-size: .84rem; color: var(--ink2); }
.discuss li { margin: 6px 0; }

/* dice */
#dice { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; pointer-events: none; }
#dice.show { display: grid; pointer-events: auto; background: rgba(4, 7, 15, .45); }
.dice-card { text-align: center; background: var(--panel); border: 1px solid var(--line2); border-top: 5px solid var(--mc); border-radius: 22px; padding: 22px 34px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); min-width: 260px; animation: pop .2s ease-out; }
.dc-who { font: 700 1rem var(--f-cond); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.big-d { width: 150px; height: 150px; }
#dice.rolling .big-d { animation: tumble .5s linear infinite; }
#dice.landed .big-d { animation: land .45s cubic-bezier(.2, 1.6, .4, 1); }
.dc-tier { font: 900 1.8rem var(--f-display); letter-spacing: .08em; min-height: 1.2em; }
.dc-math { font: 600 1rem var(--f-mono); color: var(--muted); min-height: 1.3em; }
#dice.t-success .dc-tier { color: var(--good); } #dice.t-fail .dc-tier { color: var(--bad); }
#dice.t-success .d20-o { stroke: var(--good); } #dice.t-fail .d20-o { stroke: var(--bad); }
#dice.crit .dice-card { box-shadow: 0 0 0 3px var(--good), 0 0 60px color-mix(in srgb, var(--good) 50%, transparent); }
#dice.fumble .dice-card { box-shadow: 0 0 0 3px var(--bad), 0 0 60px color-mix(in srgb, var(--bad) 50%, transparent); }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(520px, calc(100% - 32px)); }
.toast { background: var(--panel3); border: 1px solid var(--line2); border-left: 4px solid var(--cyan); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); animation: rise .25s ease-out; transition: opacity .5s, transform .5s; }
.toast.bad { border-left-color: var(--bad); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- motion */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes glow { 50% { stroke-opacity: .3; } }
@keyframes tokpulse { 50% { transform: scale(1.35); } }
@keyframes slowspin { to { transform: rotate(360deg); } }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(90deg) scale(.92); } 50% { transform: rotate(180deg) scale(1.05); } 75% { transform: rotate(270deg) scale(.95); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes land { 0% { transform: scale(1.35) rotate(-12deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---------- responsive */
@media (max-width: 1250px) {
  .game { grid-template-columns: 300px minmax(0, 1fr); }
  .derived { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .title { grid-template-columns: 1fr; }
  .mat-strip { grid-template-columns: repeat(3, 1fr); }
  .lobby { grid-template-columns: 1fr; }
  .lobby-side { order: 2; }
  .game { grid-template-columns: 1fr; }
  .g-main { order: 1; } .g-left { order: 2; position: static; max-height: none; }
  .roster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .cx-mat { grid-template-columns: 1fr; }
  .cx-mats { position: static; grid-template-columns: repeat(3, 1fr); }
  .cx-cols, .charts, .proc-grid, .tut-proc { grid-template-columns: 1fr; }
  .tut-mats, .tut-roles { grid-template-columns: 1fr 1fr; }
  .tb-nav .ghost:not(.icon) { padding: 6px 6px; font-size: .85rem; }
}
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .topbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .brand span { display: none; }
  .tb-mid { order: 3; flex-basis: 100%; gap: 8px; }
  .legbar .muted { display: none; }
  .legbar b { font-size: .95rem; }
  .timer { width: 38px; height: 38px; }
  .mat-strip { grid-template-columns: repeat(2, 1fr); }
  .derived { grid-template-columns: repeat(2, 1fr); }
  .invite-grid { grid-template-columns: 96px 1fr; }
  .qr { width: 96px; height: 96px; }
  .tut-mats, .tut-roles { grid-template-columns: 1fr; }
  .modal { padding: 16px 14px; }
  .apprs, .hopts { grid-template-columns: 1fr; }
  .hero-d { width: 150px; height: 150px; }
  .event { padding: 14px; }
  .th-name { font-size: 1.2rem; }
}