* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root{
  /* Dropfleet brand shell — gunmetal steel + metallic gold, cyan interactive accent (logo-matched). Faction accent layered in JS. */
  --bg:#0e1216; --surface:#161c22; --surface-2:#1e252e; --inset:#0e121600;
  --line:#2b343e; --ink:#ecf0f3; --mid:#9aa6b2; --faint:#69737e;
  /* Metallic accent ramp — brushed silver/steel on the dark shell (names kept '--gold-*' for stability; light parchment scopes override these locally). */
  --gold-hi:#eef3f7; --gold-lt:#aeb9c4; --gold:#8b96a1; --gold-dp:#48535f; --parchment:#e7e4dd;
  --fac:#2a9fd8; --fac-deep:#143240; --fac-accent:#6fc1e8; --fac-ink:#06222f;
  --steel-deep:#244861;  /* fixed steel-blue tile wash, faction-independent */
  --ok:#4cc38a; --ok-bg:rgba(76,195,138,.12);
  --warn:#f0b429; --warn-bg:rgba(240,180,41,.12);
  --bad:#e0564f; --bad-bg:rgba(224,86,79,.14);
  --radius:13px;
}
html,body{height:100%;background:var(--bg);color:var(--ink);
  font-family:'Roboto Slab',Georgia,serif;font-weight:300;-webkit-font-smoothing:antialiased;}
.display{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:.5px;}
.mono{font-family:'Roboto Mono',ui-monospace,monospace;}
#app{min-height:100dvh;display:flex;flex-direction:column;}
button{font-family:inherit;cursor:pointer;}
.hidden{display:none!important;}

/* ── Landing splash (front page) ── */
.landing{position:fixed;top:0;left:0;right:0;height:100dvh;z-index:200;background:#000;
  --cover:url('assets/dfc-cover.jpg');
  /* Dials: --logo-drop = hero position under the logo; --hhd-w / --tt-h = mark
     sizes; --art-zoom = extra zoom on the cover art; --title-* = the COMMAND DECK
     line (rise = clearance below the cover's logo, gap = space above the button).
     Desktop overrides below. */
  --logo-drop:66%; --hhd-w:150px; --tt-h:26px; --art-zoom:1;
  --title-size:21px; --title-track:4.5px; --title-rise:9px; --title-gap:13px;
  display:flex;justify-content:center;overflow:hidden;transition:opacity .5s ease;}
.landing.gone{opacity:0;pointer-events:none;}
/* Blurred cover fills the dead space either side of the 720 frame on desktop. */
.landing::before{content:'';position:absolute;inset:-8%;
  background:var(--cover) center/cover no-repeat;filter:blur(34px) brightness(.4);transform:scale(1.05);}

/* Frame = the app's 720px "screen area" on desktop; full width on phones.
   Stacks a black strip, the cover art, and a black strip. */
.landing-frame{position:relative;z-index:1;width:100%;max-width:720px;height:100%;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.6);}

/* Solid black strips, top and bottom, with a logo centred on each. */
.landing-topstrip{flex:0 0 auto;background:#000;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:calc(11px + env(safe-area-inset-top)) 16px 12px;}
.landing-botstrip{flex:0 0 auto;background:#000;display:flex;align-items:center;justify-content:center;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));}
.cred-tt{height:var(--tt-h);width:auto;flex-shrink:0;opacity:.96;}
.cred-fine{font-size:9px;line-height:1.4;color:rgba(255,255,255,.7);text-align:left;max-width:250px;}
.cred-hh{width:var(--hhd-w);height:auto;display:block;flex-shrink:0;
  filter:drop-shadow(0 2px 8px rgba(224,86,79,.4));}

/* Cover art fills the middle band between the strips (crops rather than letterbox).
   The band is short enough that the full logo (14-88% wide) isn't side-cropped. */
.landing-artarea{flex:1 1 auto;position:relative;min-height:0;overflow:hidden;}
.landing-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(var(--art-zoom));}
.landing-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 60%,rgba(0,0,0,.42) 100%);}

/* Overlay holds the hero; a pinned spacer drops the button to just under the logo. */
.landing-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;padding:0 22px;}
.ov-top{flex:0 0 var(--logo-drop);}
.landing-hero{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;}
/* App name, sitting between the cover's baked-in Dropfleet logo and the Enter
   button. It is IN FLOW at the top of the hero — deliberately, so it pushes the
   button down rather than floating over the art. The cover crop leaves no clear
   space above the button (on phones the button overlaps the logo by ~4px), but
   there is 100-190px of unused slack between the hint and the bottom strip, so
   down is the only direction with room. --title-rise buys clearance from the
   logo; --title-gap sets the space above the button. */
.landing-title{font-family:'Arkhip',sans-serif;text-transform:uppercase;white-space:nowrap;
  font-size:var(--title-size);letter-spacing:var(--title-track);line-height:1.1;color:#fff;
  margin:var(--title-rise) 0 var(--title-gap);
  text-shadow:0 2px 10px rgba(0,0,0,.8),0 0 26px rgba(42,159,216,.4);}
.landing-enter{font-family:'Arkhip',sans-serif;text-transform:uppercase;white-space:nowrap;
  font-size:23px;letter-spacing:3.5px;color:#fff;
  background:linear-gradient(100deg,var(--fac-deep),var(--fac));
  border:1.5px solid rgba(255,255,255,.6);border-radius:12px;padding:11px 50px;
  box-shadow:0 8px 26px rgba(0,0,0,.55);transition:transform .12s ease,box-shadow .2s ease;}
.landing-enter:hover{box-shadow:0 10px 34px rgba(70,179,201,.5);}
.landing-enter:active{transform:translateY(2px);}
.landing-hint{margin-top:12px;font-size:12.5px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 5px rgba(0,0,0,.7);}

/* Desktop: 720 column; logos read bigger; button drops a little more (the wider
   band crops the logo lower). Phone keeps the smaller base vars above. */
@media (min-width:721px){
  .landing{--logo-drop:74%;--hhd-w:180px;--tt-h:30px;
    --title-size:27px;--title-track:6px;--title-rise:12px;--title-gap:16px;}
  .landing .cred-fine{font-size:11px;max-width:460px;}
}

/* ── Header ── */
.header{flex-shrink:0;background:linear-gradient(100deg,var(--fac-deep),var(--fac));
  padding:11px 15px;display:flex;align-items:center;gap:8px;min-height:58px;
  position:sticky;top:0;z-index:30;box-shadow:0 2px 14px rgba(0,0,0,.35);}
.h-mark{flex-shrink:0;display:flex;align-items:center;}
.h-mark img{height:30px;width:auto;display:block;}
.h-title{flex:1;min-width:0;}
.h-kicker{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1;}
.h-kicker:empty{display:none;}
.h-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:clamp(15px,4.0vw,22px);letter-spacing:1px;
  color:#fff;line-height:1.08;overflow-wrap:break-word;}
.h-chip{flex-shrink:0;border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08);color:#fff;
  border-radius:9px;padding:6px 9px;font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:11px;letter-spacing:1.2px;}
.h-chip:active{background:rgba(255,255,255,.2);}

/* Roster / Stats chip. Back and Help say where you are going; this one changes what you
   are looking at, so it takes the app's cyan rather than reading as a third navigation
   control. Fixed logo cyan, not var(--fac) — in the hub the header sits outside the
   fleet's faction scope, so a faction accent here would be inconsistent (the same
   reasoning as the Call TO chip). #id beats the .rulebook .h-chip override below. */
#hstats{border-color:#2a9fd8;color:#8ed2ef;background:rgba(42,159,216,.16);}
#hstats:active{background:rgba(42,159,216,.30);}

.content{flex:1;width:100%;max-width:720px;margin:0 auto;padding:16px 15px 120px;}

/* ── Generic UI ── */
.eyebrow{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--faint);font-weight:700;margin:2px 0 9px;}
.muted{color:var(--mid);} .small{font-size:13px;}
.row{display:flex;align-items:center;gap:10px;}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* ── Faction-select chits ── */
.fac-chit{display:flex;align-items:stretch;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.4);}
.fac-chit:active{transform:translateY(1px);}
.fac-stripe{width:8px;flex-shrink:0;}
.fac-logo{flex-shrink:0;align-self:center;width:46px;height:46px;object-fit:contain;margin:0 4px 0 14px;}
.fac-body{flex:1;min-width:0;padding:16px 15px 16px 8px;}
.fac-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:30px;letter-spacing:1.5px;line-height:1;}
.fac-tag{font-size:12.5px;color:var(--mid);margin-top:5px;line-height:1.35;}
.fac-stat{margin-top:9px;font-size:11px;letter-spacing:.5px;color:var(--faint);font-family:'Roboto Mono',monospace;}
.fac-go{align-self:center;padding-right:15px;color:var(--faint);font-size:22px;}

/* Load Fleet screen cards */
.fleet-list{display:flex;flex-direction:column;gap:12px;margin-top:2px;}
.fleet-card{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:15px 16px;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.fleet-card:active{transform:translateY(1px);}
.fleet-main{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fleet-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:22px;letter-spacing:1px;line-height:1;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fleet-sub{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);}
.fleet-pts{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;}
.fleet-pts-now{font-family:'Roboto Mono',monospace;font-weight:700;font-size:20px;line-height:1;color:var(--fac-accent);}
.fleet-pts-now.over{color:var(--bad);}
.fleet-pts-lim{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--faint);margin-top:4px;}
.fleet-empty{color:var(--mid);font-size:14px;text-align:center;line-height:1.6;padding:38px 10px;}
.game-row{display:flex;align-items:stretch;gap:8px;}
.game-row .fleet-card{flex:1;min-width:0;}
.game-del{flex-shrink:0;width:46px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--faint);font-size:22px;line-height:1;}
.game-del:active{border-color:var(--bad);color:var(--bad);}

/* ── Cards / inputs ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-bottom:14px;}
label.fld{display:block;margin-bottom:14px;}
label.fld .lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);font-weight:700;margin-bottom:6px;display:block;}
input.tin,select.tin{width:100%;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);
  border-radius:10px;padding:12px 13px;font-size:16px;font-family:inherit;}
input.tin:focus,select.tin:focus{outline:none;border-color:var(--fac);}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.seg.four{grid-template-columns:repeat(2,1fr);}
.seg-btn{background:var(--surface-2);border:1.5px solid var(--line);color:var(--mid);border-radius:10px;
  padding:11px 8px;font-weight:700;font-size:13px;text-align:center;line-height:1.2;}
.seg-btn .sub{display:block;font-size:10px;font-weight:500;color:var(--faint);font-family:'Roboto Mono',monospace;margin-top:3px;}
.seg-btn.on{border-color:var(--fac);background:var(--fac-deep);color:var(--ink);}
.seg-btn.on .sub{color:var(--fac-accent);}
.seg-btn:disabled{opacity:.38;}
/* The event scenario-source option wears the silver event identity (see the
   Event-surfaces block below): a brushed-silver chip with dark ink so it reads as
   the event path among the four sources. Selection shows as an inset ring rather
   than repainting the chip (the normal faction-fill .on state is overridden). */
.seg-btn[data-scenmode="event"]{font-family:'Arkhip',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.6px;
  border:none;color:#0e1216;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-lt) 58%,var(--gold));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}
.seg-btn[data-scenmode="event"] .sub{color:#33404b;}
.seg-btn[data-scenmode="event"].on{color:#0e1216;
  box-shadow:inset 0 0 0 2px var(--fac),0 0 0 1px var(--fac),0 2px 10px rgba(0,0,0,.4);}
.seg-btn[data-scenmode="event"].on .sub{color:#33404b;}

.btn{display:block;width:100%;border:none;border-radius:11px;padding:15px;font-size:15px;font-weight:700;letter-spacing:.5px;}
.btn-primary{background:var(--fac);color:var(--fac-ink);}
.btn-primary:disabled{opacity:.4;}
.btn-ghost{background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.acctbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:16px;}
.acct-link{background:none;border:none;color:var(--fac-accent);font-weight:700;font-size:13px;padding:2px 0;}
.acct-link:active{opacity:.6;}
.auth-hero{text-align:center;padding:24px 8px 18px;}
.auth-kicker{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:8px;}
/* Dropfleet mark above the app name (replaced the text kicker). Width-capped and
   %-bounded so it can't outgrow a narrow phone; height follows the 480x163 art. */
.auth-logo{display:block;margin:0 auto 12px;width:min(240px,58%);height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));}
/* Clamped so "Command Deck" holds ONE line on a phone — at a flat 40px it wrapped
   at 393px wide, and with the strapline gone the wrap was the only thing making
   the hero look unbalanced. Desktop still reaches the original 40px. */
.auth-title{font-size:clamp(24px,7.8vw,40px);letter-spacing:2px;color:var(--ink);line-height:1;margin-bottom:10px;}
.cmd-badge{display:inline-block;margin:2px 0 0;padding:5px 11px;border:1px solid;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;background:rgba(255,255,255,.03);}
.adm-pip{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px;vertical-align:middle;}
.grp.flagship .grp-ctrl{justify-content:flex-end;}

/* ── Legality console (signature) ── */
.buildhead{position:sticky;top:58px;z-index:20;background:linear-gradient(180deg,var(--bg),rgba(10,12,15,.96));
  border-bottom:1px solid var(--line);padding:11px 15px 10px;backdrop-filter:blur(8px);}
.console{padding:0;}
.console-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.pts-big{font-family:'Roboto Mono',monospace;font-weight:700;font-size:23px;line-height:1;}
.pts-lim{font-family:'Roboto Mono',monospace;font-size:13px;color:var(--mid);}
.pts-state{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:6px;}
.bar{height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden;}
.bar > i{display:block;height:100%;background:var(--fac);transition:width .25s ease,background .2s;}
.bar.over > i{background:var(--bad);}
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px;}
.gauge{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 8px;}
.gauge .gl{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:700;}
.gauge .gv{font-family:'Roboto Mono',monospace;font-size:13px;font-weight:700;margin-top:2px;}
.gauge.ok{border-color:rgba(52,201,138,.4);} .gauge.ok .gv{color:var(--ok);}
.gauge.warn{border-color:var(--warn);background:var(--warn-bg);} .gauge.warn .gv{color:var(--warn);}
.gauge.bad{border-color:var(--bad);background:var(--bad-bg);} .gauge.bad .gv{color:var(--bad);}
.alerts{margin-top:9px;display:flex;flex-direction:column;gap:5px;}
.alert{font-size:12px;padding:7px 10px;border-radius:8px;display:flex;gap:7px;align-items:flex-start;line-height:1.3;}
.alert.bad{background:var(--bad-bg);color:var(--bad);border:1px solid rgba(242,115,122,.3);}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border,rgba(255,206,84,.3));}
.alert.ok{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(52,201,138,.3);}

/* Console issues line (A2): the single highest-severity legality check, inline and
   one line tall; taps through to the Fleet checks sheet. Fixed height however many
   warnings a fleet accrues, so the frozen header never grows and pushes ships down. */
.issues-line{width:100%;margin-top:9px;padding:7px 10px;border-radius:8px;display:flex;gap:7px;
  align-items:center;font-size:12px;line-height:1.3;text-align:left;cursor:pointer;
  font-family:inherit;border:1px solid transparent;}
.issues-line .issues-ico{flex-shrink:0;font-weight:700;}
.issues-line .issues-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.issues-line .issues-more{flex-shrink:0;font-weight:700;font-size:11px;opacity:.85;}
.issues-line.bad{background:var(--bad-bg);color:var(--bad);border-color:rgba(242,115,122,.3);}
.issues-line.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border,rgba(255,206,84,.3));}

/* ── Tabs ── */
.tabs{display:flex;gap:8px;margin:12px 0 0;}
.tab{flex:1;background:var(--surface-2);border:1.5px solid var(--line);color:var(--mid);border-radius:10px;
  padding:10px;font-weight:700;font-size:13.5px;letter-spacing:.5px;}
.tab.on{border-color:var(--fac);background:var(--fac-deep);color:var(--ink);}
.tab .badge{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--fac-accent);}

/* ── Tonnage filter ── */
/* The strip scrolls horizontally; the fades say so. Toggled by tfilterEdges()
   (builder.js) — .can-l / .can-r appear only when there is strip beyond that edge,
   so on a wide screen where everything fits neither is shown. The margin moved
   from .tfilter to the wrapper so the fades can span the strip's full height. */
.tfilter-wrap{position:relative;margin-bottom:12px;}
.tfilter-wrap::before,.tfilter-wrap::after{content:'';position:absolute;top:0;bottom:2px;width:36px;
  pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:2;
  display:flex;align-items:center;font-size:18px;line-height:1;color:var(--fac-accent);}
.tfilter-wrap::before{left:0;justify-content:flex-start;padding-left:2px;content:'\2039';
  background:linear-gradient(90deg,var(--bg) 40%,rgba(14,18,22,0));}
.tfilter-wrap::after{right:0;justify-content:flex-end;padding-right:2px;content:'\203a';
  background:linear-gradient(270deg,var(--bg) 40%,rgba(14,18,22,0));}
.tfilter-wrap.can-l::before{opacity:1;}
.tfilter-wrap.can-r::after{opacity:1;}
.tfilter{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;
  scrollbar-width:none;}
.tfilter::-webkit-scrollbar{display:none;}
.tf{flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);color:var(--mid);
  border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:600;white-space:nowrap;}
.tf.on{border-color:var(--fac);color:var(--ink);background:var(--fac-deep);}
.search{width:100%;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);
  border-radius:10px;padding:11px 13px;font-size:15px;margin-bottom:12px;font-family:inherit;}
.search:focus{outline:none;border-color:var(--fac);}

/* ── Catalogue row ── */
.cat-row{display:flex;align-items:center;gap:11px;background:linear-gradient(100deg,var(--steel-deep),var(--surface) 72%);border:1px solid var(--line);
  border-left:4px solid var(--ton,var(--fac));border-radius:11px;padding:11px 12px;margin-bottom:9px;}
.cat-main{flex:1;min-width:0;}
.cat-name{font-weight:700;font-size:15px;line-height:1.15;}
.cat-sub{font-size:11.5px;color:var(--mid);margin-top:2px;}
.cat-sub .tag{display:inline-block;font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:.5px;
  border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:5px;color:var(--faint);text-transform:uppercase;}
.cat-pts{font-family:'Roboto Mono',monospace;font-weight:700;font-size:15px;text-align:right;line-height:1;}
.cat-pts .ea{display:block;font-size:9px;color:var(--faint);font-weight:500;margin-top:2px;}
.cat-add{flex-shrink:0;width:38px;height:38px;border-radius:9px;border:1.5px solid var(--fac);
  background:var(--fac-deep);color:var(--fac-accent);font-size:22px;line-height:1;font-weight:700;}
.cat-add:active{background:var(--fac);color:var(--fac-ink);}

/* ── Fleet group card ── */
.ton-head{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:16px;letter-spacing:2px;color:var(--mid);
  margin:16px 0 9px;display:flex;align-items:center;gap:8px;}
.ton-head::after{content:"";flex:1;height:1px;background:var(--line);}
.ton-head .tp{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--faint);letter-spacing:0;}
.grp{background:linear-gradient(100deg,var(--steel-deep),var(--surface) 72%);border:1px solid var(--line);border-left:4px solid var(--ton,var(--fac));
  border-radius:11px;padding:12px;margin-bottom:9px;}
.grp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.grp-name{font-weight:700;font-size:15.5px;line-height:1.15;}
.grp-cls{font-size:11.5px;color:var(--mid);margin-top:2px;}
.grp-cost{font-family:'Roboto Mono',monospace;font-weight:700;font-size:15px;}
.grp-ctrl{display:flex;align-items:center;justify-content:space-between;margin-top:11px;gap:10px;}
.stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;}
.stepper button{width:40px;height:36px;background:var(--surface-2);border:none;color:var(--ink);font-size:20px;line-height:1;}
.stepper button:disabled{opacity:.3;}
.stepper .qty{min-width:48px;text-align:center;font-family:'Roboto Mono',monospace;font-weight:700;font-size:15px;}
.stepper .qty .gr{display:block;font-size:8.5px;color:var(--faint);font-weight:500;}
.del{background:none;border:none;color:var(--faint);font-size:12px;font-weight:600;text-decoration:underline;padding:6px;}
/* Duplicate sits beside Remove. Deliberately the same quiet underlined treatment —
   it is a convenience, not a primary action, and shouldn't compete with the stepper. */
.grp-acts{display:flex;align-items:center;gap:2px;}
.dup{background:none;border:none;color:var(--fac-accent);font-size:12px;font-weight:600;text-decoration:underline;padding:6px;}
.dup:active{opacity:.6;}
.del:active{color:var(--bad);}
.refits{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.refit{background:var(--surface-2);border:1.5px solid var(--line);color:var(--mid);border-radius:8px;
  padding:6px 10px;font-size:11.5px;font-weight:600;font-family:'Roboto Mono',monospace;}
.refit.on{border-color:var(--fac);background:var(--fac-deep);color:var(--fac-accent);}
.refit.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-bg);}
.refit.on.bad{background:var(--bad);border-color:var(--bad);color:#fff;}
.grp-illegal{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;color:#fff;background:var(--bad);border-radius:5px;padding:1px 6px;letter-spacing:.4px;vertical-align:middle;text-transform:uppercase;font-family:'Roboto Mono',monospace;}
.grp-illwarn{margin-top:10px;font-size:12px;font-weight:600;color:var(--bad);display:flex;align-items:flex-start;gap:6px;}
.tag.cfg{border-color:var(--fac);color:var(--fac-accent);background:var(--fac-deep);}
.catgroup{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:2px;color:var(--faint);
  margin:6px 0 9px;text-transform:uppercase;}
.configrow{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:11px;
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:13px;font-weight:600;color:var(--ink);text-align:left;}
.configrow.todo{border-color:var(--warn);color:var(--warn);}
.configrow .chev{font-size:18px;color:var(--faint);}
.cfg-top{font-size:15px;font-weight:700;margin-bottom:8px;}
.cfg-status{font-size:12.5px;padding:7px 10px;border-radius:8px;margin-bottom:14px;}
.cfg-status.ok{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(52,201,138,.3);}
.cfg-status.todo{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border,rgba(255,206,84,.3));}
.cfg-cat{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--faint);margin:16px 0 8px;display:flex;justify-content:space-between;align-items:center;}
.cfg-cap{font-weight:700;color:var(--fac-accent);}
.ministep{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;}
.ministep button{width:34px;height:32px;background:var(--surface-2);border:none;color:var(--ink);font-size:18px;line-height:1;}
.ministep button:disabled{opacity:.3;}
.ministep span{min-width:30px;text-align:center;font-family:'Roboto Mono',monospace;font-weight:700;font-size:14px;}

/* ── Admiral chips ── */
.adm{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:9px;}
.adm-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.adm-name{font-weight:700;font-size:15px;}
.adm-meta{font-size:11.5px;color:var(--mid);margin-top:2px;}
.lvl-pill{font-family:'Roboto Mono',monospace;font-size:10px;font-weight:700;color:var(--fac-accent);
  border:1px solid var(--fac);border-radius:5px;padding:1px 6px;}

/* ── Empty state ── */
.empty{text-align:center;padding:40px 20px;color:var(--faint);}
.empty .big{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:26px;color:var(--mid);letter-spacing:1px;margin-bottom:6px;}

/* ── Sheet (bottom modal) ── */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:40;display:flex;align-items:flex-end;}
.sheet{
  /* Light "parchment" pop-up theme. Every sheet's content is built from the design
     tokens, so re-scoping the tokens here flips the whole modal to dark-on-light —
     making an open window stand out clearly against the dark app behind it (and
     against another open window). No JS and no per-component edits. Faction accents
     are kept but deepened for contrast; the refit/hardpoint highlight bands become a
     light faction tint. The color-mix lines are progressive enhancement over the
     plain fallbacks above them (older browsers keep the fallback). A token cannot
     deepen itself, so the accent text and tint derive from the inherited --fac while
     --fac itself stays the bright per-faction colour for edges/borders.
     Never set --bg here — sheet content reads --surface. */
  --surface:#f4f0e7; --surface-2:#e8e1d2; --line:#d7cfbe;
  --ink:#1c1813; --mid:#5c5347; --faint:#877d6a;
  --gold-hi:#5e3d0a; --gold-lt:#7a5212; --gold:#8a5f2b; --gold-dp:#a98a52;
  --fac-accent:#7a5212;
  --fac-accent:color-mix(in srgb, var(--fac) 62%, #1a1206);
  --fac-deep:#efe6d2;
  --fac-deep:color-mix(in srgb, var(--fac) 16%, #fff);
  --ok:#2f7d52; --ok-bg:rgba(47,125,82,.14);
  --warn:#8f5e0a; --warn-bg:rgba(143,94,10,.14);
  --bad:#b3352e; --bad-bg:rgba(179,53,46,.14);
  width:100%;max-width:720px;margin:0 auto;background:var(--surface);color:var(--ink);
  border-radius:18px 18px 0 0;border-top:2px solid var(--fac);
  box-shadow:0 -10px 34px rgba(0,0,0,.5);
  max-height:86dvh;display:flex;flex-direction:column;
  animation:rise .32s cubic-bezier(.16,.84,.44,1);}
@keyframes rise{from{transform:translateY(34px);opacity:.4;}to{transform:translateY(0);opacity:1;}}
@media (prefers-reduced-motion: reduce){ .sheet{animation:none;} }
.sheet-head{padding:16px 16px 10px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.sheet-title{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:22px;letter-spacing:1.5px;}
.sheet-x{background:none;border:none;color:var(--mid);font-size:24px;line-height:1;padding:0 4px;}
.sheet-body{padding:14px 16px 22px;overflow-y:auto;}
/* tappable rule keywords inside ship-card special fields */
.rl{color:var(--gold-lt);border-bottom:1px dotted var(--gold-dp);cursor:pointer;
  text-decoration:none;border-radius:2px;transition:color .15s,background .15s;}
.rl:hover,.rl:focus{color:var(--gold-hi);background:var(--fac-deep);outline:none;}
/* rule definition pop-up, stacks above the ship card */
.rl-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.rl-pop{width:100%;max-width:440px;max-height:80dvh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--gold-dp);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);animation:rise .18s ease;overflow:hidden;}
.rl-head{padding:14px 15px 11px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,var(--fac-deep),transparent);}
.rl-term{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:18px;
  letter-spacing:1.2px;color:var(--gold-hi);flex:1;line-height:1.1;}
.rl-sec{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--faint);white-space:nowrap;}
.rl-x{background:none;border:none;color:var(--mid);font-size:23px;line-height:1;padding:0 2px;cursor:pointer;}
.rl-body{padding:13px 16px 18px;overflow-y:auto;font-size:14px;line-height:1.6;color:var(--ink);}
.rl-body p{margin:0 0 .8em 0;}
.rl-body p:last-child{margin-bottom:0;}
/* ── Home screen tiles ── */
.home-tiles{display:flex;flex-direction:column;gap:14px;}
.home-tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-top-color:var(--gold-dp);background:var(--surface);
  border-radius:var(--radius);padding:18px 16px;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.home-tile:active{transform:translateY(1px);}
.home-tile:hover{border-color:var(--gold-dp);}
.ht-icon{flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:var(--fac-deep);color:var(--gold-lt);border:1px solid var(--gold-dp);}
.ht-icon svg{width:24px;height:24px;}
.ht-text{flex:1;min-width:0;}
.ht-name{display:block;font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:24px;letter-spacing:1.3px;line-height:1;color:var(--ink);}
.ht-sub{display:block;margin-top:7px;font-size:12.5px;color:var(--mid);}
.ht-go{color:var(--faint);font-size:22px;flex-shrink:0;}
.home-tile:disabled{opacity:.5;cursor:default;}
.home-tile:disabled:hover{border-color:var(--line);}
.ht-soon{color:var(--faint);font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1.5px;flex-shrink:0;}
/* ── Play the Game: scenario generator ── */
.seg.seg-3{grid-template-columns:repeat(3,1fr);}
.scen-lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);
  margin:0 0 7px;font-family:'Roboto Mono',monospace;}
.scen-std-list{display:flex;flex-direction:column;gap:8px;}
.scen-std{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);}
.scen-std:hover{border-color:var(--gold-dp);}
.scen-std.on{border-color:var(--fac);background:var(--fac-deep);}
.scen-std-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:15px;color:var(--fac-accent);}
.scen-std-meta{font-size:12px;color:var(--mid);font-family:'Roboto Mono',monospace;}
.scen-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;}
.scen-chip{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:.5px;color:var(--gold-lt);
  background:var(--surface-2);border:1px solid var(--gold-dp);border-radius:999px;padding:4px 11px;text-transform:uppercase;}
.scen-card{padding:14px 15px;}
.scen-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;}
.scen-card-title{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.7px;font-size:16px;color:var(--ink);line-height:1.15;}
.scen-roll{flex-shrink:0;font-family:'Roboto Mono',monospace;font-size:11px;color:var(--fac-accent);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;}
.scen-card p{font-size:14px;line-height:1.6;color:var(--ink);margin:0 0 .7em;}
.scen-card p:last-child{margin-bottom:0;}
.scen-fig{margin:0 0 12px;}
/* Reserve a constant image box (sized to the tallest tile) so cycling never collapses or
   resizes the figure -> no blink, no layout jump. object-fit:contain keeps the whole map. */
figure.scen-fig img{width:100%;height:auto;aspect-ratio:420 / 476;object-fit:contain;display:block;background:var(--surface);}
.scen-teams{display:flex;gap:10px;margin:0 0 12px;flex-wrap:wrap;}
.scen-team{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);}
.scen-team-tag{font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  border-radius:5px;padding:3px 8px;color:#fff;}
.scen-team-tag.red{background:#9e3b34;border:1px solid #c0564f;}
.scen-team-tag.blue{background:#2f5e86;border:1px solid #3f7fb0;}
.scen-def{font-size:12.5px;line-height:1.5;color:var(--mid);border-left:2px solid var(--gold-dp);padding:2px 0 2px 11px;margin:0 0 7px;}
.scen-def:last-child{margin-bottom:0;}
.scen-subhead{font-family:'Roboto Mono',monospace;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--fac-accent);margin:12px 0 7px;}
.scen-note{color:var(--faint);text-transform:none;letter-spacing:0;}
.scen-tbl{width:100%;border-collapse:collapse;margin:4px 0 2px;font-size:13px;}
.scen-tbl th{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  text-align:left;color:var(--gold-lt);border-bottom:1px solid var(--gold-dp);padding:5px 8px;}
.scen-tbl td{border-bottom:1px solid var(--line);padding:6px 8px;color:var(--ink);}
.scen-tbl tr:last-child td{border-bottom:none;}
.scen-foot{border:1px dashed var(--gold-dp);border-radius:11px;padding:13px 15px;background:var(--surface);margin-top:4px;}
.scen-foot p{font-size:12.5px;line-height:1.55;color:var(--mid);margin:0 0 .5em;}
.scen-foot p:last-child{margin-bottom:0;}
/* ── Compatibility notice (flag-and-choose) ── */
.scen-clash{border:1.5px solid var(--warn,#c9892f);background:rgba(201,137,47,.08);border-radius:12px;padding:14px 15px;margin:0 0 14px;}
.scen-clash-h{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:15px;color:var(--warn,#e0a64a);margin:0 0 8px;}
.scen-clash p{font-size:13px;line-height:1.55;color:var(--ink);margin:0 0 12px;}
.scen-clash-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.scen-clash-btns .btn{margin:0;}
.scen-clash-keep{display:block;width:100%;margin-top:9px;background:transparent;border:none;
  font-family:'Roboto Mono',monospace;font-size:12px;color:var(--faint);text-decoration:underline;padding:6px;}
.gp-sec-warn{font-size:12px;line-height:1.45;color:var(--warn,#e0a64a);background:rgba(201,137,47,.08);
  border-radius:8px;padding:8px 10px;margin:6px 0 2px;}
/* ── Manual element selection (cycle through options) ── */
.scen-ec{touch-action:pan-y;}
.scen-cyc{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);}
.scen-cyc-btn{width:46px;flex-shrink:0;font-size:22px;line-height:1;border:1.5px solid var(--gold-dp);
  background:var(--surface-2);color:var(--gold-lt);border-radius:9px;padding:6px 0;}
.scen-cyc-btn:active{transform:translateY(1px);}
.scen-cyc-pos{flex:1;text-align:center;font-family:'Roboto Mono',monospace;font-size:14px;color:var(--ink);}
.scen-cyc-of{color:var(--faint);font-size:12px;}
/* ── Play the Game: setup + briefing ── */
.gp-card{padding:14px 15px;}
.gp-head{display:flex;align-items:center;gap:10px;}
.gp-name{flex:1;min-width:0;font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:16px;}
.gp-teams{display:flex;gap:6px;flex-shrink:0;}
.gp-team{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  border-radius:7px;padding:8px 11px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--mid);}
.gp-team.red.on{background:#9e3b34;border-color:#c0564f;color:#fff;}
.gp-team.blue.on{background:#2f5e86;border-color:#3f7fb0;color:#fff;}
.gp-timing{font-size:13px;color:var(--mid);margin-top:9px;display:flex;align-items:center;gap:7px;}
.gp-timing b{color:var(--ink);}
.gp-secs{display:flex;flex-direction:column;gap:7px;}
.gp-sec{text-align:left;width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);display:flex;flex-direction:column;gap:4px;}
.gp-sec:hover{border-color:var(--gold-dp);}
.gp-sec.on{border-color:var(--fac);background:var(--fac-deep);}
.gp-sec:disabled{opacity:.4;cursor:default;}
.gp-sec:disabled:hover{border-color:var(--line);}
.gp-sec-top{display:flex;align-items:center;gap:8px;}
.gp-sec-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:14px;color:var(--fac-accent);flex:1;min-width:0;}
.gp-sec-badge{flex-shrink:0;font-family:'Roboto Mono',monospace;font-size:9px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--gold-lt);border:1px solid var(--gold-dp);border-radius:5px;padding:2px 6px;}
.gp-sec-check{flex-shrink:0;color:var(--fac);font-size:15px;font-weight:700;}
.gp-sec-eff{font-size:12.5px;line-height:1.5;color:var(--mid);}
.gp-sec.on .gp-sec-eff{color:var(--ink);}
.gp-nom{margin:2px 0 2px;padding:0 2px;}
.gp-nom label{display:block;font-size:11px;color:var(--faint);margin:0 0 5px;}
.gp-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px;}
.gp-sheet-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.7px;font-size:18px;color:var(--ink);}
.gp-sheet-sec{border-top:1px solid var(--line);padding:10px 0 0;margin-top:10px;}
.gp-sheet-sec-name{font-family:'Roboto Mono',monospace;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--fac-accent);margin:0 0 4px;display:flex;align-items:center;gap:8px;}
.gp-sheet-sec-eff{font-size:13px;line-height:1.5;color:var(--mid);}
.gp-sheet-nom{font-size:13px;color:var(--ink);margin-top:5px;}
.gp-sheet-nom b{color:var(--gold-lt);}
/* ── Play the Game: game record (round tracker) ── */
.gr-board{display:flex;gap:10px;margin:0 0 14px;}
.gr-board-pl{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;
  min-height:150px;border:none;border-radius:13px;padding:14px 12px;color:#fff;}
.gr-board-pl.red{background:#9e3b34;}
.gr-board-pl.blue{background:#2f5e86;}
.gr-board-pl.clickable{cursor:pointer;}
.gr-board-pl.clickable:active{transform:translateY(1px);}
.gr-board-name{width:100%;font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.2px;font-size:13px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gr-board-mid{position:relative;display:flex;justify-content:center;align-items:center;width:100%;}
.gr-board-you{position:absolute;left:0;top:50%;transform:translateY(-50%);line-height:1;}
.gr-board-score{display:flex;flex-direction:column;align-items:center;line-height:1;}
.gr-board-vp{font-family:'Roboto Mono',monospace;font-size:52px;font-weight:700;color:#fff;line-height:.95;}
.gr-board-vp small{font-size:14px;color:rgba(255,255,255,.72);margin-left:3px;font-weight:400;}
.gr-board-kp{font-family:'Roboto Mono',monospace;font-size:19px;color:rgba(255,255,255,.9);margin-top:5px;}
.gr-board-kp small{font-size:11px;margin-left:2px;}
.gr-board-enter{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.72);}
.gr-rounds{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 10px;}
.gr-round{font-family:'Roboto Mono',monospace;font-size:16px;padding:10px 0;border-radius:9px;
  border:1.5px solid var(--line);background:var(--surface-2);color:var(--mid);position:relative;}
.gr-round.ss::after{content:'';position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--gold-lt);}
.gr-round.on{border-color:var(--fac);background:var(--fac-deep);color:var(--gold-hi);}
.gr-roundlabel{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:15px;color:var(--ink);margin:0 0 10px;}
.gr-ss{color:var(--gold-lt);}
.gr-note{font-size:13px;line-height:1.55;color:var(--mid);padding:8px 11px;border-left:2px solid var(--line);margin:0 0 8px;}
.gr-note:last-child{margin-bottom:0;}
.gr-note.hot{border-left-color:var(--gold-lt);color:var(--ink);background:var(--surface-2);border-radius:0 8px 8px 0;}
.gr-note b{color:var(--ink);}
.gr-pl{padding:14px 15px;}
.gr-pl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;}
.gr-pl-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:17px;color:var(--ink);}
.gr-field{margin:0 0 11px;}
.gr-field label{display:block;font-size:12px;color:var(--faint);margin:0 0 6px;}
.gr-sub{color:var(--faint);}
.gr-num{display:flex;align-items:stretch;gap:8px;}
.gr-step{width:46px;flex-shrink:0;font-size:22px;line-height:1;border:1.5px solid var(--line);background:var(--surface-2);color:var(--gold-lt);border-radius:9px;}
.gr-step:active{transform:translateY(1px);}
.gr-input{flex:1;text-align:center;font-family:'Roboto Mono',monospace;font-size:17px;}
.gr-input::-webkit-outer-spin-button,.gr-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.gr-pl-tot{font-size:13px;color:var(--mid);border-top:1px solid var(--line);padding-top:10px;margin-top:2px;}
.gr-pl-tot b{color:var(--gold-hi);font-family:'Roboto Mono',monospace;}
.gr-nav{display:flex;gap:10px;margin-top:6px;}
.gr-nav .btn{margin:0;flex:1;}
/* ── Scores → game-overview panel: warm parchment to match the How-to-Play
   reader. Scoped token overrides so the scoreboard, round chips, Prev/Next and
   guidance card inherit the paper theme; the dark shell elsewhere is untouched. */
.gr-overview{background:#f4f0e7;color:#1c1813;border:1px solid #ddd4c2;border-radius:var(--radius);padding:14px;margin:0 0 16px;
  --surface:#fff; --surface-2:#efe9dc; --line:#ddd4c2; --ink:#1c1813; --mid:#5c5347; --faint:#8a8170; --gold-hi:#7a5212; --gold-lt:#b07d24;}
.gr-overview .gr-round.on{background:#2b2419;border-color:#2b2419;color:#f8ecbf;}
.gr-overview .gr-round.reached{border-color:#5a9c63;color:#2f6d3a;background:rgba(90,156,99,.15);}
.gr-overview .gr-round.reached:active{transform:translateY(1px);}
.gr-overview .gr-nav{margin:8px 0 12px;}
.gr-overview .gr-guid{margin-bottom:0;}
/* Scores → adaptive round briefing (replaces the old note stack). A white card on
   the parchment panel; rows read as brushed-gold labels over muted body text. */
.gr-raillbl{font-size:11px;color:var(--mid);text-align:center;letter-spacing:.2px;margin:0 0 12px;}
.gr-brief{margin-bottom:0;}
.gr-brief-round{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.7px;font-size:13px;color:var(--gold-hi);margin:0 0 11px;}
.gr-brow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);}
.gr-brow:first-of-type{border-top:0;padding-top:0;}
.gr-brow-ic{flex-shrink:0;width:18px;height:18px;color:var(--gold-hi);margin-top:1px;}
.gr-brow-ic svg{width:18px;height:18px;display:block;}
.gr-brow-lab{font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 2px;letter-spacing:.2px;}
.gr-brow-txt{font-size:12.5px;line-height:1.5;color:var(--mid);}
.gr-brow.mut .gr-brow-ic{color:var(--faint);}
.gr-brow.hot{background:var(--surface-2);border-radius:9px;border-top:0;padding:9px 11px;margin:7px 0;}
.gr-brow.hot .gr-brow-ic{color:var(--gold-lt);}
.gr-brief-tbl{margin:2px 0 8px;}
/* ── Ability Points ──
   The Scores-screen readout is a row per seat, echoing the VP/KP tiles above it
   but quieter — it is a number you glance at, not a control. Everything that
   sets or spends AP lives behind it on the AP Management screen, which is styled
   as a full sub-screen (dark shell, team-tinted head) rather than a parchment
   card, because that is the idiom the score-entry sub-screen already uses. */
.gr-ap{margin-bottom:12px;}
.gr-ap-head{margin:0 0 10px;}
.gr-ap-title{display:block;font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.7px;
  font-size:13px;color:var(--gold-hi);}
.gr-ap-sub{display:block;font-size:11px;line-height:1.45;color:var(--faint);margin-top:3px;}
/* AP tiles. Same shape as the VP/KP scoreboard so the pairing with each player
   is obvious, but SMALLER and DESATURATED so the two rows are plainly different
   things — a saturated tile means score, a muted one means Ability Points. The
   fills are the scoreboard's #9e3b34 / #2f5e86 pulled well down in saturation. */
.gr-apbar{display:flex;gap:9px;}
.gr-aptile{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;text-align:center;border:0;border-radius:11px;
  padding:9px 8px;color:#fff;}
.gr-aptile.red{background:#7d4c47;}
.gr-aptile.blue{background:#41586d;}
.gr-aptile.clickable{cursor:pointer;}
.gr-aptile.clickable:active{transform:translateY(1px);}
.gr-aptile-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.4px;
  font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.9);}
.gr-aptile-val{font-family:'Roboto Mono',monospace;font-size:24px;font-weight:700;line-height:1;}
.gr-aptile-val small{font-size:10px;font-weight:700;letter-spacing:.5px;margin-left:4px;
  color:rgba(255,255,255,.75);}
.gr-aptile-val.spent{color:rgba(255,255,255,.55);}
.gr-aptile-go{font-size:10px;letter-spacing:.3px;color:rgba(255,255,255,.72);}

/* AP Management sub-screen. The head card holds ONLY the team band, so it drops
   the .gr-pl padding that would otherwise show as an empty strip beneath it —
   .gr-entry-head already carries its own, and negates the padding it expects. */
.gr-apm{margin-bottom:12px;padding:0;overflow:hidden;}
.gr-apm .gr-entry-head{margin:0;border-radius:var(--radius) var(--radius) 0 0;}
.gr-apsec{margin-bottom:12px;}
.gr-apsec-h{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;
  font-size:13px;color:var(--gold-hi);margin:0 0 6px;}
.gr-apsec-note{font-size:12px;line-height:1.5;color:var(--mid);margin:0 0 12px;}
.gr-aplbl{font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:14px 0 6px;}
.gr-aplbl:first-of-type{margin-top:0;}
.gr-apempty{font-size:12px;color:var(--faint);padding:8px 0;}
/* One row idiom for both toggles and counters, so the top half reads as a list. */
.gr-aprow{display:flex;width:100%;align-items:center;gap:11px;text-align:left;
  border:1px solid var(--line);background:var(--surface-2);border-radius:10px;
  padding:10px 11px;margin:0 0 7px;color:var(--ink);}
button.gr-aprow{cursor:pointer;}
button.gr-aprow:active{transform:translateY(1px);}
.gr-aprow.on{border-color:var(--gold-lt);background:var(--fac-deep,var(--surface-2));}
.gr-aprow.lock{opacity:.5;cursor:default;}
.gr-apchk{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--faint);}
.gr-apchk.on{border-color:var(--gold-lt);color:var(--gold-hi);}
.gr-aprow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.gr-aprow-name{font-size:13px;font-weight:600;}
.gr-aprow-sub{font-size:11px;line-height:1.4;color:var(--mid);}
.gr-apnum{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.gr-apnum .gr-step{width:34px;height:32px;font-size:18px;}
.gr-apnum-v{font-family:'Roboto Mono',monospace;font-size:14px;font-weight:700;min-width:26px;text-align:center;}
.gr-aptot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mid);text-align:right;}
.gr-aptot b{color:var(--gold-hi);font-family:'Roboto Mono',monospace;}
/* Ability rows: name, where it comes from, and its cost. Tapping opens detail. */
/* Ability rows: a four-column grid — name | what it is | trigger | cost. Each
   column wraps inside itself, so the row is as tall as its TALLEST column rather
   than as tall as four stacked lines. The trigger gets the widest column because
   it carries the most text and is the reason the row is worth reading. */
.gr-apab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.8fr) minmax(0,2fr) auto;
  gap:4px 8px;align-items:start;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);border-radius:10px;
  padding:9px 10px;margin:0 0 7px;color:var(--ink);}
.gr-apab:active{transform:translateY(1px);}
.gr-apab.dis{opacity:.5;}
/* Used this round. Fixed cyan rather than the faction accent (--fac), because
   "I have used this" must mean the same thing in every fleet — a signal that
   changed colour per faction would be one more thing to learn. */
.gr-apab.used{border-color:#2a9fd8;background:#12303d;}
.gr-apab.used .gr-apab-name{color:#dff1fb;}
.gr-apab-x{display:inline-block;margin-left:5px;padding:0 5px;border-radius:5px;
  background:#2a9fd8;color:#06222f;font-family:'Roboto Mono',monospace;
  font-size:10px;font-weight:700;vertical-align:1px;}
.gr-apab-name{min-width:0;font-size:12px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.gr-apab-src{min-width:0;font-size:10px;line-height:1.35;color:var(--faint);overflow-wrap:anywhere;}
.gr-apab-trig{min-width:0;font-size:10.5px;line-height:1.35;color:var(--mid);overflow-wrap:anywhere;}
.gr-apab-cost{justify-self:end;font-family:'Roboto Mono',monospace;font-size:12px;
  font-weight:700;color:var(--gold-hi);white-space:nowrap;}
.gr-ap-undo{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:12px;
  font-size:11.5px;color:var(--mid);}
.gr-ap-undo span{flex:1 1 100%;}
.gr-ap-undo .btn{flex:1 1 0;width:auto;padding:8px 10px;font-size:11px;margin:0;}
/* Round-0 set-up actions (Scores tab): an intro line + two "tap to view" rows on
   the white briefing card. Mirrors the .toc-item row idiom in the panel tokens. */
.gr-setup-intro{font-size:12.5px;line-height:1.55;color:var(--mid);margin:0 0 13px;}
.gr-setup-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:12px 13px;margin:0 0 9px;color:var(--ink);}
.gr-setup-btn:last-child{margin-bottom:0;}
.gr-setup-btn:active{transform:translateY(1px);}
.gr-setup-btn:hover{border-color:var(--gold-lt);}
.gr-setup-ic{flex-shrink:0;width:22px;height:22px;color:var(--gold-hi);}
.gr-setup-ic svg{width:22px;height:22px;display:block;}
.gr-setup-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.gr-setup-lab{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:14px;color:var(--ink);}
.gr-setup-sub{font-size:12px;line-height:1.4;color:var(--mid);}
.gr-setup-go{flex-shrink:0;color:var(--faint);font-size:20px;line-height:1;}
/* Empty-slice fallback text inside the set-up sheets. */
.scen-empty{font-size:13.5px;line-height:1.55;color:var(--mid);}
/* Round 1-6 briefing: coloured per-side Deployment tiles (tap for the rule) and
   the "Scoring this round" lines. */
.gr-dep-lbl{font-size:12.5px;font-weight:600;color:var(--ink);margin:2px 0 8px;letter-spacing:.2px;}
.gr-dep-tiles{display:flex;gap:9px;margin:0 0 12px;}
.gr-dep-tile{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;cursor:pointer;
  border-radius:9px;padding:7px 10px;border:1px solid transparent;color:var(--ink);}
.gr-dep-tile:active{transform:translateY(1px);}
.gr-dep-tile.red{background:rgba(158,59,52,.13);border-color:rgba(158,59,52,.40);}
.gr-dep-tile.blue{background:rgba(47,94,134,.13);border-color:rgba(47,94,134,.44);}
.gr-dep-tile.neutral{flex:1 1 100%;background:var(--surface-2);border-color:var(--line);color:var(--ink);}
.gr-dep-team{font-family:'Roboto Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.7;}
.gr-dep-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.4px;font-size:12px;line-height:1.1;}
.gr-dep-more{font-size:9.5px;opacity:.68;}
.gr-dep-tile.neutral .gr-dep-more{color:var(--mid);opacity:1;}
.gr-score-line{margin:0 0 4px;}
.gr-score-line:last-child{margin-bottom:0;}
/* Round chips beyond the frontier are locked until you Proceed into them. */
.gr-round.locked{opacity:.34;cursor:default;}
/* Reviewing a past round: a way back to the frontier (replaces the advance btn). */
.gr-review{font-size:12.5px;color:var(--mid);text-align:center;line-height:1.55;margin:14px 0 0;}
.gr-return{background:none;border:none;color:var(--gold-lt);font-weight:600;cursor:pointer;text-decoration:underline;padding:0;font-size:12.5px;}
/* Scenario tab reuses the set-up rows outside the parchment panel. */
.gr-setup-standalone{margin-top:2px;}
.gr-phase-sec{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);}
.gr-phase-lbl{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:12.5px;color:var(--ink);margin:0 0 8px;}
.gr-phase-trail{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.gr-phase{font-size:12px;font-weight:600;text-align:center;padding:11px 4px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);color:var(--ink);cursor:pointer;line-height:1.15;}
.gr-phase:active{transform:translateY(1px);}
.gr-phase.hot{border-color:var(--gold-lt);color:var(--gold-hi);}
.gr-phase-note{font-size:11px;color:var(--mid);margin:9px 0 0;line-height:1.45;}
/* Scoring tile: label on the left, View Objective button on the right. */
.gr-brow-main{flex:1;min-width:0;}
.gr-brow-headrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 2px;}
.gr-obj-btn{flex-shrink:0;background:none;border:1px solid var(--line);border-radius:8px;padding:5px 11px;
  color:var(--gold-hi);font-weight:600;font-size:11.5px;cursor:pointer;white-space:nowrap;}
.gr-obj-btn:active{transform:translateY(1px);}
/* Player score tiles (dark shell): semi-transparent team colour; tap to open the
   editable score box (hidden until then). */
/* Score-entry sub-screen: team-tinted card (reuses .gr-pl theming), tappable
   header bar to close, then the VP/KP entry + secondaries. */
.gr-entry-head{display:flex;flex-direction:column;gap:5px;margin:-14px -15px 14px;padding:12px 15px;border-radius:9px 9px 0 0;color:#fff;}
.gr-pl.red .gr-entry-head{background:#9e3b34;}
.gr-pl.blue .gr-entry-head{background:#2f5e86;}
.gr-entry-top{display:flex;align-items:center;gap:9px;}
.gr-pl.red .gr-entry-head .scen-team-tag,.gr-pl.blue .gr-entry-head .scen-team-tag{display:inline-flex;background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.35);}
.gr-entry-name{flex:1;min-width:0;font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:17px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gr-entry-edit{flex-shrink:0;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:7px;color:#fff;
  font-size:11px;font-weight:600;padding:4px 9px;cursor:pointer;}
.gr-entry-edit:active{transform:translateY(1px);}
.gr-entry-x{flex-shrink:0;background:none;border:none;color:#fff;font-size:22px;line-height:1;padding:0 2px;cursor:pointer;}
.gr-entry-tot{font-family:'Roboto Mono',monospace;font-size:15px;color:#fff;}
.gr-entry-tot small{font-size:10px;opacity:.8;margin-left:2px;}
.gr-board-lead{font-family:'Roboto Mono',monospace;font-size:10px;font-weight:700;color:#3a7d44;margin-top:1px;}
.gr-advance{margin-top:14px;}
.gr-finishnow{margin-top:8px;}
.gr-cx{display:flex;gap:10px;}
.gr-cx .btn{flex:1;margin:0;}
.gr-rounds.r7{grid-template-columns:repeat(7,1fr);gap:5px;}
.gr-round.zero{border-style:dashed;}
.gr-round.zero.on{border-style:solid;}
/* ── Scores → player data-entry cards themed by team so each section reads at a
   glance: deep wash + 2px border + a solid colour header band. Inputs/steppers
   sit on a lighter scoped inset so they stay legible against the wash. */
.gr-pl.red{background:#241312;border:2px solid #c0564f;--surface-2:#3a201d;--line:#5a322d;}
.gr-pl.blue{background:#101d29;border:2px solid #3f7fb0;--surface-2:#1b3447;--line:#2d5170;}
.gr-pl.red .gr-pl-head,.gr-pl.blue .gr-pl-head{margin:-14px -15px 14px;padding:11px 15px;border-radius:11px 11px 0 0;}
.gr-pl.red .gr-pl-head{background:#9e3b34;}
.gr-pl.blue .gr-pl-head{background:#2f5e86;}
.gr-pl.red .gr-pl-name,.gr-pl.blue .gr-pl-name{color:#fff;}
.gr-pl.red .scen-team-tag,.gr-pl.blue .scen-team-tag{display:none;}
/* Secondary Objectives folded into each player's scores card. */
.gr-secs{border-top:1px solid var(--line);margin-top:12px;padding-top:4px;}
.gr-sec-lbl{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:12px;color:var(--mid);margin:8px 0 2px;}
.gr-pl .obj-name{color:var(--gold-hi);}
.gr-pl.red .obj-row.done .obj-check{background:#c0564f;border-color:#e08a84;color:#fff;}
.gr-pl.blue .obj-row.done .obj-check{background:#3f7fb0;border-color:#6fa8d4;color:#fff;}
.gr-suggest{display:block;width:100%;margin-top:8px;font-family:'Roboto Mono',monospace;font-size:12px;
  background:transparent;border:1px dashed var(--gold-dp);color:var(--gold-lt);border-radius:8px;padding:9px;}
.gr-result{border-color:var(--gold-dp);}
.gr-res-head{font-size:15px;color:var(--gold-hi);margin:0 0 12px;line-height:1.4;}
.gr-res-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line);}
.gr-res-row.win{}
.gr-res-rank{font-family:'Roboto Mono',monospace;font-size:13px;color:var(--faint);width:16px;flex-shrink:0;}
.gr-res-row.win .gr-res-rank{color:var(--gold-hi);}
.gr-res-name{flex:1;min-width:0;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gr-res-row.win .gr-res-name{font-weight:500;}
.gr-res-vp{font-family:'Roboto Mono',monospace;font-size:15px;color:var(--gold-hi);flex-shrink:0;}
.gr-res-kp{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--mid);flex-shrink:0;width:52px;text-align:right;}
/* ── In-game hub: bottom tab bar ── */
.gtabs{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0 auto;max-width:720px;
  display:flex;background:linear-gradient(180deg,#141a20,#0c0f13);border-top:1px solid var(--gold-dp);
  padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -4px 18px rgba(0,0,0,.5);}
.gtab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;
  background:transparent;border:none;color:#c7bda6;border-top:2px solid transparent;}
.gtab-ic{width:22px;height:22px;display:block;}
.gtab-ic svg{width:22px;height:22px;}
.gtab-lbl{font-family:'Roboto Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.gtab.on{background:var(--gold-lt);color:var(--bg);border-top-color:var(--gold-lt);}
.content.has-gtabs{padding-bottom:78px;}
.content.has-gtabs.rulebook{padding-bottom:78px;}
/* ── Objectives tab ── */
.obj-row{display:flex;gap:11px;align-items:flex-start;border-top:1px solid var(--line);padding:12px 0;}
.obj-row:first-of-type{border-top:none;}
.obj-check{flex-shrink:0;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface-2);
  color:var(--fac-ink);font-size:16px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;}
.obj-row.done .obj-check{background:var(--fac);border-color:var(--fac);}
.obj-body{flex:1;min-width:0;}
.obj-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:14px;color:var(--fac-accent);display:flex;align-items:center;gap:8px;}
.obj-eff{font-size:12.5px;line-height:1.5;color:var(--mid);margin-top:4px;}
.obj-nom{font-size:12.5px;color:var(--ink);margin-top:5px;}
.obj-nom b{color:var(--gold-lt);}
.obj-status{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-top:6px;}
.obj-status.on{color:var(--ok);}
/* ── Fleet tab + setup fleet row ── */
.gp-fleet{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);}
.gp-fleet-lbl{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);}
.gp-fleet-name{flex:1;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gp-fleet-btn{flex-shrink:0;font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--gold-lt);background:var(--surface-2);border:1.5px solid var(--gold-dp);border-radius:8px;padding:7px 12px;}
.gp-role{font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin:7px 0 2px;}
.gp-role.you{color:var(--fac-accent);}
.gp-role.opt{color:var(--faint);}
.gp-fleet-name.warn{color:var(--warn);}
.gp-cmd{display:flex;flex-direction:column;gap:8px;}
.gp-cmd-row{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;}
.gp-cmd-row.todo{border-color:var(--gold-dp);}
.gp-cmd-adm{flex:1;min-width:0;}
.gp-cmd-name{font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gp-cmd-meta{font-size:11px;color:var(--mid);margin-top:2px;}
.gp-cmd-fixed{flex-shrink:0;font-size:12px;color:var(--fac-accent);}
.gp-cmd-btn{flex-shrink:0;max-width:55%;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gold-lt);
  background:var(--surface);border:1.5px solid var(--gold-dp);border-radius:8px;padding:7px 11px;text-align:right;}
.gp-cmd-btn .chev{color:var(--faint);}
.gp-cmd-btn.todo{color:var(--warn);border-color:var(--warn);}
.gp-cmd-btn:disabled{opacity:.4;}
.fl-theme{}
.fl-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;margin:0 0 16px;
  border-radius:12px;background:linear-gradient(100deg,var(--fac-deep),transparent);border:1px solid var(--fac);border-left-width:4px;}
.fl-fleetname{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.6px;font-size:18px;color:var(--ink);line-height:1.1;}
.fl-faction{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fac-accent);margin-top:4px;}
.fl-total{flex-shrink:0;font-family:'Roboto Mono',monospace;font-weight:700;font-size:24px;line-height:1;color:var(--fac-accent);}
.fl-total span{display:block;font-size:10px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:var(--mid);margin-top:3px;text-align:right;}
.fl-grp-id{min-width:0;}
.fl-grp-right{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.fl-qty{font-family:'Roboto Mono',monospace;font-size:13px;color:var(--fac-accent);font-weight:400;}
.fl-info{flex-shrink:0;width:30px;height:30px;border-radius:8px;border:1.5px solid var(--fac);background:var(--fac-deep);
  color:var(--fac-accent);display:flex;align-items:center;justify-content:center;padding:0;}
.fl-info svg{width:17px;height:17px;}
.fl-info:active{background:var(--fac);color:var(--fac-ink);}
.fl-opts{font-size:12px;color:var(--mid);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
.fl-adm2{border-left:3px solid var(--fac);}
.fl-cmd{font-size:12px;color:var(--fac-accent);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
.fl-cmd.todo{color:var(--warn);}
.fl-cmd.dead{color:var(--bad);}
.fl-destroy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
.fl-destroy-lbl{font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);}
.fl-pips{display:flex;flex-wrap:wrap;gap:6px;}
.fl-pip{min-width:30px;height:30px;padding:0 8px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--mid);font-family:'Roboto Mono',monospace;font-size:13px;font-weight:700;}
.fl-pip.flag{border-color:var(--fac);color:var(--fac-accent);}
.fl-pip.dead{border-color:var(--bad);background:rgba(190,40,40,.14);color:var(--bad);text-decoration:line-through;}
.fl-pip.wide{min-width:0;text-decoration:none;letter-spacing:.5px;}
.fl-pip.wide.dead{text-decoration:none;}
.fl-destroy-n{font-size:11px;color:var(--bad);font-family:'Roboto Mono',monospace;}
.gr-kp-auto{font-family:'Roboto Mono',monospace;font-weight:700;font-size:18px;color:var(--ink);padding:6px 0;}
.gr-kp-auto small{font-size:11px;color:var(--faint);margin-left:4px;font-weight:400;}
/* ── How to Play: contents ── */
.rules-search{margin:0 0 14px;}
.toc{display:flex;flex-direction:column;gap:8px;}
.toc-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:13px 14px;}
.toc-item:active{transform:translateY(1px);}
.toc-item:hover{border-color:var(--gold-dp);}
.toc-item.sub{margin-left:22px;background:var(--surface-2);padding:11px 14px;}
.toc-num{flex-shrink:0;min-width:34px;font-family:'Roboto Mono',monospace;font-size:13px;color:var(--fac-accent);}
.toc-title{flex:1;min-width:0;font-size:15px;color:var(--ink);}
.toc-item.sub .toc-title{font-size:14px;color:var(--mid);}
.toc-go{color:var(--faint);font-size:18px;flex-shrink:0;}
/* ── In-game Game Rounds menu: phase buttons with a step sub-line ── */
.phase-intro{margin:0 0 12px;}
.phase-item{align-items:center;}
.phase-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.phase-col .toc-title{flex:none;font-family:'Arkhip',sans-serif;font-size:14px;letter-spacing:.4px;}
.phase-steps{font-size:12px;line-height:1.4;color:var(--mid);}
.phase-browse{margin-top:14px;width:100%;}
.rules-up{display:inline-flex;align-items:center;gap:4px;width:auto;margin:0 0 12px;padding:8px 14px;font-size:13px;}
/* ── How to Play: section reader ── */
.rd-fig{margin:0 0 16px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);}
.rd-fig img{display:block;width:100%;height:auto;}
.rd-fig figcaption{padding:8px 12px;font-size:12.5px;color:var(--mid);border-top:1px solid var(--line);}
.rd-body{font-size:14.5px;line-height:1.65;color:var(--ink);}
.rd-body p{margin:0 0 1em;}
.rd-pending{border:1px dashed var(--gold-dp);border-radius:10px;padding:16px;background:var(--surface);color:var(--mid);font-size:14px;line-height:1.55;}
.rd-pending p{margin:0 0 .5em;}
.rd-pending p:last-child{margin-bottom:0;}
.rd-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;}
.rd-step{flex:1;font-size:12.5px;text-align:center;}
/* ── Rulebook theme (How to Play): paper pages, dark headers, teal pop-outs ──
   Scoped to .rulebook so the dark app shell is untouched everywhere else. */
.content.rulebook{background:#f4f0e7;color:#1c1813;}
.rulebook .goldbar{box-shadow:0 2px 10px rgba(0,0,0,.25);}   /* dark header bar already matches the book */
/* contents on paper */
.rulebook .rules-search .tin{background:#fff;border-color:#d7cfbe;color:#1c1813;}
.rulebook .rules-search .tin::placeholder{color:#9a9082;}
.rulebook .rules-search .tin:focus{border-color:#2484aa;}
.rulebook .toc-item{background:#fff;border-color:#ddd4c2;border-top-color:#ddd4c2;box-shadow:0 1px 2px rgba(0,0,0,.07);}
.rulebook .toc-item.sub{background:#ece4d3;border-color:#d7cdb8;}
.rulebook .toc-item:hover{border-color:#2484aa;}
.rulebook .toc-num{color:#1f7fa6;}
.rulebook .toc-title{color:#1c1813;}
.rulebook .toc-item.sub .toc-title{color:#4a4236;}
.rulebook .toc-go{color:#b8a988;}
.rulebook .phase-steps{color:#5c5347;}
.rulebook .phase-browse{background:#fff;border-color:#d7cfbe;color:#1c1813;}
.rulebook .phase-browse:hover{border-color:#2484aa;}
.rulebook .rules-up{background:#fff;border-color:#d7cfbe;color:#1c1813;}
.rulebook .rules-up:hover{border-color:#2484aa;}
/* reader on paper */
.rulebook .rd-body{color:#1c1813;}
/* Deployable-feature blocks (featureBlockHTML reuse) rendered in the light rules tab */
.rulebook .ab-eff,.rulebook .sc-wt td.sp{color:#5c5347;}
.rulebook .sc-wt td{border-bottom-color:#e3dbc9;}
.rulebook .sc-wt th{color:#6f6655;border-bottom-color:#cdbf9f;}
.rulebook .rl{color:#7a5212;border-bottom-color:#a98a52;}
.rulebook .rl:hover,.rulebook .rl:focus{color:#5e3d0a;background:#efe6d2;}
.rulebook .rd-body b,.rulebook .rd-body strong{color:#000;}
.rulebook .rd-body a{color:#1f7fa6;}
/* sub-section heading inside body (used from Stage 2) — book uses teal caps */
.rulebook .rd-sub{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;
  font-size:15px;color:#1f7fa6;margin:20px 0 8px;line-height:1.15;}
/* coloured pop-out / example box (used from Stage 2) */
.rulebook .rd-callout{background:#eaf4f8;border:2px solid #2484aa;border-radius:12px;
  padding:13px 15px;margin:16px 0;color:#163b49;font-size:13.5px;line-height:1.55;}
.rulebook .rd-callout .rd-callout-lbl{display:block;font-family:'Arkhip',sans-serif;text-transform:uppercase;
  letter-spacing:1px;font-size:11px;color:#1f7fa6;margin-bottom:6px;}
.rulebook .rd-pending{background:#fff;border:1px dashed #c4ac74;color:#5c5347;}
.rulebook .rd-pending .muted{color:#8a8170;}
.rulebook .rd-fig{background:#fff;border-color:#ddd4c2;}
.rulebook .rd-fig figcaption{color:#5c5347;border-top-color:#e6ddcc;}
.rulebook .rd-nav .btn-ghost{background:#fff;border-color:#d7cfbe;color:#1c1813;}
/* glossary rule links sit on paper here, so flip them to teal-on-light */
.rulebook .rl{color:#1f7fa6;border-bottom-color:#9cc6d6;}
.rulebook .rl:hover,.rulebook .rl:focus{color:#11607f;background:#dcecf3;}
/* body lists, numbered sequences and tables (used from Stage 2 content) */
.rulebook .rd-body ul.rd-list,.rulebook .rd-body ol.rd-steps{margin:0 0 1em;padding-left:1.4em;}
.rulebook .rd-body ul.rd-list li,.rulebook .rd-body ol.rd-steps li{margin:0 0 .45em;line-height:1.55;}
.rulebook .rd-body ol.rd-steps{font-weight:600;}
.rulebook .rd-body ol.rd-steps li{font-weight:400;}
/* Sized to fit a phone screen: width:100% keeps the table inside the column,
   the first column wraps (no nowrap/width:1%) instead of forcing the table wide,
   and overflow-wrap is a safety valve so nothing can ever push past the edge. */
.rulebook .rd-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:12px;}
.rulebook .rd-table th{background:#1b1b1b;color:#f4ecd6;text-align:left;padding:6px 5px;
  font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:0;font-size:9.5px;overflow-wrap:break-word;}
.rulebook .rd-table td{border-bottom:1px solid #ddd4c2;padding:6px 5px;vertical-align:top;color:#2a241c;line-height:1.4;overflow-wrap:break-word;}
.rulebook .rd-table tbody tr:nth-child(even){background:#efe9dc;}
.rulebook .rd-table td:first-child{font-family:'Roboto Mono',monospace;color:#1f7fa6;white-space:normal;font-weight:700;}
/* Event Pack tables. The rulebook's .rd-table rules above are parchment-scoped to
   .rulebook; the events surface is dark, so it gets its own matching style here.
   Identical th/td padding is what locks the header and body columns into line. */
.events .rd-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0;}
.events .rd-table{width:100%;border-collapse:collapse;font-size:13px;}
.events .rd-table th{background:var(--fac-deep);color:#fff;text-align:left;padding:7px 9px;
  font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  white-space:nowrap;border-bottom:1px solid var(--fac);}
.events .rd-table td{padding:7px 9px;border-bottom:1px solid var(--line);color:var(--ink);
  vertical-align:top;line-height:1.4;overflow-wrap:break-word;}
.events .rd-table tbody tr:nth-child(even){background:rgba(255,255,255,.03);}
/* The global `* { margin:0 }` reset strips paragraph margins, so pack-body
   paragraphs need their gap restored here — otherwise a blank line between
   paragraphs in Module 14 produces a new <p> with no visible space. */
.events .card p{margin:0 0 .9em;line-height:1.55;}
.events .card p:last-child{margin-bottom:0;}
.events .card .rd-tw{margin:12px 0;}
.events .card figure.rd-fig{margin:12px 0 0;}
.rulebook section{margin-bottom:2px;}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:11px;padding:13px;margin-bottom:9px;}
.opt:active{border-color:var(--fac);}
.opt-main .opt-name{font-weight:700;font-size:15px;}
.opt-main .opt-sub{font-size:12px;color:var(--mid);margin-top:2px;}
.opt-pts{font-family:'Roboto Mono',monospace;font-weight:700;}
.opt:disabled,.opt.dis{opacity:.4;}
.opt .cat-buy{margin-left:auto;}   /* admiral rows: push the Buy pill + trailing controls to the right */
/* Admiral rows carry the same "+" as the ship rows — previously you could only add
   an admiral by tapping its name, which playtesters flagged as inconsistent. Slightly
   smaller than .cat-add because the .opt row is tighter than a .cat-row. */
.adm-add{width:34px;height:34px;font-size:20px;}

/* ── Print-options sheet (the "what goes in the PDF" chooser) ── */
.po-row{display:flex;align-items:flex-start;gap:11px;padding:9px 2px;cursor:pointer;
  border-bottom:1px solid var(--line);}
.po-row:last-of-type{border-bottom:none;}
.po-row input{flex:0 0 auto;width:19px;height:19px;margin-top:1px;accent-color:var(--fac);}
.po-t{font-size:14px;color:var(--ink);line-height:1.3;}
.po-h{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;}
.po-sub{padding-left:22px;}
.po-sub .po-t{font-size:13px;color:var(--mid);}
.po-off{opacity:.4;}

/* ── Full-stats reader (in-game Fleet tab, §9.10) ──
   Modelled on the NewRecruit "40k-style template" the playtester asked for: every
   tile the SAME height and layout, and the stat line boxed so it jumps out.
   --fs-h is sized so TWO whole tiles sit above the fold; it steps down on short
   screens. The tile is a flex column with ONE scrollable region (.fs-body), so a
   six-weapon hull scrolls inside its own tile instead of making the tile taller —
   that is what keeps every tile identical. Never give .fs-card an auto height. */
/* Stats mode drops the tab chrome (goldbar + fleet banner + Change list) so the
   tiles get the content area; the Roster/Stats switch is a header chip instead. */
.fl-theme.fs-mode{margin-top:2px;}
.fs-wrap{--fs-h:330px;}
@media (max-height:800px){ .fs-wrap{--fs-h:288px;} }
@media (max-height:700px){ .fs-wrap{--fs-h:246px;} }
.fs-bar{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;}
.fs-bar::-webkit-scrollbar{display:none;}
.fs-tab{flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);color:var(--mid);
  border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;white-space:nowrap;}
.fs-tab.on{border-color:var(--fac);color:var(--ink);background:var(--fac-deep);}

/* Horizontal pager. Swipe is pure CSS scroll-snap — no gesture JS — and the arrows
   simply scrollBy one page width for mouse users. Each .fs-page is exactly the
   pager's width, so a page is always a whole number of tiles. */
.fs-pagerwrap{position:relative;}
.fs-pager{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain;}
.fs-pager::-webkit-scrollbar{display:none;}
.fs-page{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;gap:8px;}
.fs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:30px;height:52px;border-radius:8px;border:1px solid var(--line);
  background:rgba(10,14,18,.72);color:var(--gold-hi);font-size:22px;line-height:1;
  backdrop-filter:blur(3px);opacity:.9;}
.fs-arrow.prev{left:0;} .fs-arrow.next{right:0;}
/* Where a pointer is the likely input, inset the pager so the arrows sit in a
   gutter instead of over the tiles — overlapping them hid the points value. */
@media (hover:hover) and (pointer:fine){ .fs-pagerwrap{padding:0 38px;} }
.fs-arrow:disabled{opacity:0;pointer-events:none;}
/* On a touch phone the arrows sit over the tiles; hide them and let the swipe do
   the work, then bring them back where a pointer is the likely input. */
@media (hover:none) and (pointer:coarse){ .fs-arrow{display:none;} }
.fs-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px 0;}
.fs-dots{display:flex;flex-wrap:wrap;gap:6px;}
.fs-dot{width:7px;height:7px;border-radius:50%;border:none;padding:0;
  background:var(--line);transition:background .15s,transform .15s;}
.fs-dot.on{background:var(--fac);transform:scale(1.35);}
.fs-count{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--faint);flex-shrink:0;}

.fs-card{height:var(--fs-h);display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(100deg,var(--steel-deep),var(--surface) 72%);
  border:1px solid var(--line);border-left:4px solid var(--fac);border-radius:10px;
  padding:8px 10px 8px;}

/* Casualties on a stats tile. A FIXED row like the head and stat line — it takes its
   height from the tile's scrollable body, never from the tile, so the measured
   two-tiles-above-the-fold holds. Tightened from the roster's spacing to suit. */
.fs-destroy{flex-shrink:0;border-top:1px solid var(--line);padding:5px 8px 3px;}
.fs-destroy .fl-destroy{margin:0;gap:6px;flex-wrap:wrap;}
.fs-destroy .fl-destroy-lbl{font-size:9px;}
.fs-destroy .fl-pip{min-width:24px;height:24px;font-size:11px;padding:0 6px;}
.fs-destroy .fl-pip.wide{height:24px;font-size:10px;}
.fs-destroy .fl-destroy-n{font-size:9px;}
.fs-card.flag{border-left-color:var(--gold);}
.fs-card.adm{border-left-color:var(--fac-accent);}
.fs-head{flex:0 0 auto;display:flex;align-items:center;gap:7px;}
.fs-head .fs-name{flex:1 1 auto;min-width:0;}
/* Tonnage badge in the tile bar — same colour language as the roster and catalogue
   (tonColor), so L/M/H/C reads identically wherever it appears. */
.fs-ton{flex:0 0 auto;font-family:'Roboto Mono',monospace;font-size:10px;font-weight:700;
  line-height:1;color:var(--tc,var(--fac));border:1px solid var(--tc,var(--fac));
  border-radius:4px;padding:3px 5px;background:rgba(0,0,0,.25);}
.fs-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:.5px;
  font-size:14px;color:var(--gold-hi);line-height:1.15;}
.fs-q{font-family:'Roboto Mono',monospace;font-size:12px;color:var(--fac-accent);}
.fs-pts{font-family:'Roboto Mono',monospace;font-size:12.5px;font-weight:700;color:var(--mid);flex-shrink:0;}
.fs-sub{flex:0 0 auto;font-size:10.5px;color:var(--faint);margin:1px 0 6px;
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.fs-sub .tag{margin:0;}
/* Per-load Drop / Launch marker inside the launch table — the same 7.4 split the
   header pills show, but per row, since one load can be both. */
.fs-kind{display:inline-block;margin-left:5px;font-size:8px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;border-radius:3px;padding:1px 4px;vertical-align:1px;}
.fs-kind.drop{color:#8fd0a8;border:1px solid rgba(143,208,168,.5);}
.fs-kind.launch{color:var(--fac-accent);border:1px solid var(--fac);}

/* The stat line — eight equal boxes, big value under a small label. Equal columns
   are the point: the eye lands in the same place on every tile. */
.fs-stats{flex:0 0 auto;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-bottom:6px;}
.fs-stat{background:var(--fac-deep);border:1px solid var(--fac);border-radius:6px;
  padding:3px 1px 4px;text-align:center;min-width:0;}
.fs-stat .k{display:block;font-size:7.5px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--fac-accent);font-weight:700;line-height:1.1;}
.fs-stat .v{display:block;font-family:'Roboto Mono',monospace;font-size:14px;font-weight:700;
  color:var(--ink);line-height:1.15;}

/* Admiral aboard this ship — a fixed row, because knowing which group carries the
   admiral is glance information; the abilities behind it are not. */
.fs-adm{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid var(--gold-dp);border-radius:6px;
  padding:3px 8px;margin:0 0 5px;color:var(--gold-hi);font-size:11.5px;font-weight:700;}
.fs-adm .fs-admmeta{font-family:'Roboto Mono',monospace;font-size:9.5px;font-weight:400;
  color:var(--mid);margin-left:auto;flex-shrink:0;}
.fs-adm.on{background:var(--fac-deep);border-color:var(--fac);}
.fs-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;}
.fs-body::-webkit-scrollbar{display:none;}
.fs-spec{font-size:10.5px;color:var(--mid);line-height:1.35;margin:0 0 5px;
  background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:6px;padding:4px 6px;}
.fs-wt{width:100%;border-collapse:collapse;margin:0 0 2px;}
.fs-wt th{font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);
  font-weight:600;text-align:left;padding:2px 3px;}
.fs-wt td{font-size:11px;color:var(--ink);padding:1.5px 3px;vertical-align:top;
  border-top:1px solid rgba(43,52,62,.6);}
.fs-wt td.n{line-height:1.2;}
.fs-wt td.sp{font-size:10px;color:var(--fac-accent);line-height:1.2;}
.fs-wt th:not(:first-child),.fs-wt td:not(:first-child):not(.sp){text-align:center;
  font-family:'Roboto Mono',monospace;}
.fs-chips{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;padding-top:6px;}
.fs-chip{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--fac-accent);
  border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:600;}
.fs-chip.on{background:var(--fac-deep);border-color:var(--fac);color:var(--ink);}
.fs-det{margin-top:5px;padding:6px 8px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:8px;}
.fs-det[hidden]{display:none;}
/* A nested detail (an asset profile inside the Launch block) is indented and
   quieter, so two levels of disclosure stay legible. */
.fs-det.sub{margin:4px 0 2px 8px;background:rgba(0,0,0,.3);}
/* Tappable load name inside the Launch table — underlined so it reads as a link
   rather than a label, since the row around it is not tappable. */
.fs-lnk{background:none;border:none;padding:0;font:inherit;font-size:11px;
  color:var(--fac-accent);text-decoration:underline;text-underline-offset:2px;text-align:left;}
.fs-lnk.on{color:var(--ink);}
.fs-rule{font-size:11px;color:var(--mid);line-height:1.4;margin:2px 0;}
.fs-rule b{color:var(--ink);}
.fs-ap{font-family:'Roboto Mono',monospace;font-size:10px;color:var(--fac-accent);}
/* the tile scrolls internally — say so, rather than clipping silently */
.fs-more{font-size:9.5px;color:var(--faint);text-align:center;padding:2px 0 0;}

/* ── Toast ── */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;
  background:var(--fac);color:var(--fac-ink);font-weight:700;font-size:14px;padding:12px 20px;border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Sticky action bar ── */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:linear-gradient(180deg,transparent,var(--bg) 22%);
  padding:16px 15px;max-width:720px;margin:0 auto;}
.actionbar .inner{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

textarea.io{width:100%;min-height:140px;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);
  border-radius:10px;padding:12px;font-family:'Roboto Mono',monospace;font-size:12px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
.cat-view{flex-shrink:0;width:34px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--mid);font-size:16px;line-height:1;cursor:pointer;}
.cat-view:active{border-color:var(--fac);color:var(--ink);}
.adm-view{flex-shrink:0;margin-left:auto;}
.adm-pts{font-family:'Roboto Mono',monospace;font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;}
.opt.on{border-color:var(--fac);background:var(--fac-deep);}
.ap-pill{font-family:'Roboto Mono',monospace;font-size:9.5px;font-weight:700;color:var(--fac-accent);border:1px solid var(--fac);border-radius:4px;padding:0 5px;vertical-align:middle;}
.adm-abil{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.abil-btn{display:flex;align-items:center;gap:6px;width:100%;justify-content:space-between;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.abil-btn:active{border-color:var(--fac);}
.abil-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.abil-chip{font-size:11.5px;background:var(--fac-deep);color:var(--fac-accent);border:1px solid var(--fac);border-radius:7px;padding:3px 9px;}
.adm-assign{margin-top:8px;}
.assign-btn{display:flex;align-items:center;gap:6px;width:100%;justify-content:space-between;background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.assign-btn:active{border-color:var(--fac);}
.assign-btn:disabled{opacity:.5;cursor:default;}
.assign-btn.todo,.abil-btn.todo{border-color:var(--warn);color:var(--warn);}
.assign-btn .chev,.abil-btn .chev{font-size:18px;color:var(--faint);}
.sec-block{margin-top:10px;}
.ab-row{padding:8px 0;border-bottom:1px solid var(--line);}
.ab-name{font-weight:700;font-size:13.5px;margin-bottom:2px;}
.ab-eff{font-size:12.5px;color:var(--mid);line-height:1.5;}
/* In-app help sheet blocks (help.js). Title-Case heading naming each on-screen
   button, then its explanation; tokens are the sheet's parchment scope. */
.help-block{padding:9px 0;border-bottom:1px solid var(--line);}
.help-block:last-child{border-bottom:none;}
.help-h{font-weight:700;font-size:14px;color:var(--fac-accent);margin-bottom:3px;letter-spacing:.2px;}
.help-p{font-size:13px;color:var(--ink);line-height:1.55;}
.help-p + .help-p{margin-top:8px;}
/* Two shapes the help copy asked for: a bulleted rundown, and a sub-heading
   inside a block. Both sit in the same rhythm as .help-p so a block mixing all
   three still reads as one passage. */
.help-ul{margin:8px 0 0;padding-left:18px;}
.help-ul li{font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:4px;}
.help-ul li::marker{color:var(--fac-accent);}
.help-p + .help-ul{margin-top:6px;}
.help-sh{font-weight:700;font-size:13px;color:var(--ink);margin-top:12px;letter-spacing:.2px;}
.help-sh + .help-p{margin-top:4px;}
/* Branching help sheet (e.g. Fleets & Command): landing buttons + in-sheet Back. */
.help-branches{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.help-branch{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  background:var(--surface-2);border:1.5px solid var(--fac);color:var(--ink);border-radius:11px;
  padding:13px 14px;font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:.5px;cursor:pointer;}
.help-branch:active{background:var(--fac-deep);}
.help-branch-go{color:var(--fac-accent);font-size:18px;line-height:1;}
.help-up{display:block;background:none;border:none;color:var(--fac-accent);font-family:'Arkhip',sans-serif;
  text-transform:uppercase;font-size:12px;letter-spacing:1px;padding:0 0 10px;cursor:pointer;}
.ab-note{margin-top:10px;font-size:12px;color:var(--mid);font-style:italic;}
.sc-photo{background:#cfd6d0;border-radius:11px;overflow:hidden;margin-bottom:12px;}
.sc-photo img{display:block;width:100%;height:auto;}
/* Deployable Feature photos are portrait crops — cap the height so the sheet
   stays in proportion with a standard (landscape) ship card. */
.sc-photo.feat img{width:auto;height:auto;max-height:230px;max-width:100%;margin:0 auto;}
/* Fleet Space Station renders are portrait too (and a couple are wide) — same
   cap idiom: portrait ones are bounded by max-height, wide ones by max-width.
   Slightly taller than features since stations are chunkier models. */
.sc-photo.stn img{width:auto;height:auto;max-height:260px;max-width:100%;margin:0 auto;}
.sc-meta{color:var(--mid);font-size:12.5px;margin-bottom:14px;}
.sc-lbl{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--fac-accent);font-size:14px;margin:16px 0 7px;}
table.sc-stats,table.sc-wt{width:100%;border-collapse:collapse;font-size:12.5px;}
.sc-stats th,.sc-wt th{font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);text-align:left;padding:5px 6px;border-bottom:1px solid var(--fac);}
.sc-stats td{font-family:'Roboto Mono',monospace;padding:7px 6px;border-bottom:1px solid var(--line);}
.sc-wt td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top;}
.sc-wt td.n{font-weight:600;}
.sc-wt td.sp{color:var(--mid);}
.sc-refit{font-family:'Roboto Mono',monospace;font-size:11px;color:var(--fac-accent);margin:2px 0 11px;letter-spacing:.3px;}
.sc-stats td.mod{color:var(--fac-accent);font-weight:700;background:var(--fac-deep);}
.sc-wt tr.mod td{color:var(--fac-accent);background:var(--fac-deep);}
.sc-wt tr.mod td.n{font-weight:700;}
.rf-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line);color:transparent;font-size:11px;font-weight:700;line-height:1;vertical-align:-3px;margin-right:7px;}
.rf-check.on{border-color:var(--fac-accent);color:var(--fac-accent);background:var(--fac-deep);}
.ab-row.on .ab-name{color:var(--fac-accent);}
.sc-special{color:var(--mid);font-size:13px;}
.sc-special.mod{color:var(--fac-accent);background:var(--fac-deep);border-radius:6px;padding:6px 9px;}
/* -- Shop sheet (boxes + assets that relate to a ship) -- */
.shop-intro{color:var(--mid);font-size:13px;line-height:1.5;margin:-2px 0 14px;}
.shop-sec{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--fac-accent);font-size:13px;margin:18px 0 9px;}
.shop-row{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  background:var(--surface-2);border-radius:13px;padding:11px;margin-bottom:11px;}
.shop-thumb{flex:0 0 72px;width:72px;height:72px;border-radius:9px;overflow:hidden;background:#cfd6d0;}
.shop-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.shop-main{flex:1;min-width:0;}
.shop-name{font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.25;}
.shop-sub{color:var(--faint);font-size:12px;margin-top:3px;line-height:1.4;}
.shop-price{display:flex;align-items:baseline;gap:8px;margin-top:7px;}
.shop-now{font-family:'Roboto Mono',monospace;font-weight:700;color:var(--fac-accent);font-size:16px;}
.shop-was{color:var(--faint);font-size:12.5px;text-decoration:line-through;}
.shop-ttc{font-size:11px;color:var(--warn);margin-top:6px;}
.shop-go{display:inline-flex;align-items:center;gap:5px;margin-top:10px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:700;text-decoration:none;}
/* -- Catalogue 'Buy this Ship' pill: unbranded; the retailer is chosen in a sheet -- */
.cat-buy{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.2px;line-height:1;cursor:pointer;
  border:1px solid var(--fac,#2a9fd8);background:transparent;color:var(--fac-accent,#6fc1e8);}
.cat-buy:active{background:color-mix(in srgb, var(--fac,#2a9fd8) 15%, transparent);}
.cat-buy-short{display:none;}
@media (max-width:430px){ .cat-buy-full{display:none;} .cat-buy-short{display:inline;} .cat-buy{padding:6px 9px;gap:5px;} }
/* -- Buy: retailer chooser sheet (Hobby House — UK & CI / TTCombat — everywhere else) -- */
.buy-choose-intro{color:var(--mid);font-size:13px;line-height:1.5;margin:-2px 0 14px;}
.buy-choose-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:14px;margin-bottom:11px;}
.buy-choose-btn:active{background:var(--surface);}
.buy-choose-logo{flex:0 0 auto;height:30px;width:auto;max-width:104px;object-fit:contain;display:block;}
.buy-choose-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.buy-choose-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--ink);}
.buy-choose-sub{font-size:12.5px;color:var(--faint);}
.buy-choose-go{flex:0 0 auto;color:var(--fac-accent);font-size:20px;line-height:1;}
.sc-lorebtn{display:inline-flex;align-items:center;gap:7px;margin-top:18px;background:var(--fac-deep);color:var(--ink);border:1px solid var(--fac);border-radius:9px;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer;}
.sc-lorebtn .chev{display:inline-block;transition:transform .18s;}
.sc-lorebtn.open .chev{transform:rotate(90deg);}
.sc-lorewrap{overflow:hidden;max-height:0;transition:max-height .3s ease;border-left:2px solid var(--fac);margin-top:10px;}
.sc-lorewrap.open{max-height:2200px;}
.sc-fships{font-style:italic;color:var(--fac-accent);font-size:12.5px;padding:2px 0 8px 14px;}
.sc-fships span{display:block;font-style:normal;color:var(--faint);text-transform:uppercase;letter-spacing:.8px;font-size:9.5px;margin-bottom:2px;}
.sc-loretext{font-size:13.5px;line-height:1.6;color:#cdd4dc;padding:0 2px 4px 14px;}
.sc-loretext p{margin:0 0 0.85em 0;}
.sc-loretext p:last-child{margin-bottom:0;}

/* ════════ TTCombat brand decoration (style-guide reskin) ════════ */
@font-face{font-family:'Arkhip';font-style:normal;font-weight:400;font-display:swap;
  src:local('Arkhip'),url('assets/fonts/Arkhip.woff') format('woff');}
/* warm up a few hardcoded cool leftovers */
.landing{background:#08090c;}
.buildhead{background:linear-gradient(180deg,var(--bg),rgba(16,20,24,.96));border-top:1px solid var(--gold-dp);}
.sc-loretext{color:var(--ink);}
.sc-photo{background:#1d242c;}
/* header — dark gold-trimmed bar + faction chevron edge-stripe */
.header{background:linear-gradient(180deg,#141a20,#0b0e12);border-bottom:1px solid var(--gold-dp);
  overflow:hidden;padding-left:18px;}
.header::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;
  background:repeating-linear-gradient(180deg,var(--fac) 0 12px,transparent 12px 16px);}
.h-mark{background:none;border:none;}
.h-name{color:var(--gold-hi);}
.h-kicker{color:var(--fac-accent);}
.h-chip{border-color:var(--gold-dp);color:var(--gold-lt);background:rgba(0,0,0,.25);}
.h-chip:active{background:rgba(238,243,247,.12);}
/* section eyebrow — gold label with double-chevron tick */
.eyebrow{font-family:'Arkhip',sans-serif;font-size:11px;letter-spacing:2px;color:var(--gold-lt);}
.eyebrow::before{content:'\00BB\00BB';margin-right:8px;color:var(--gold);letter-spacing:-1px;}
/* auth title in display face */
.auth-title{font-family:'Arkhip',sans-serif;text-transform:uppercase;color:var(--gold-hi);letter-spacing:2px;}
/* tonnage header — gold caps + tapering gold rule */
.ton-head{color:var(--gold-lt);}
.ton-head::after{background:linear-gradient(90deg,var(--gold-dp),transparent);}
/* gold hairline accents on faction-neutral surfaces */
.card,.fac-chit,.fleet-card{border-top-color:var(--gold-dp);}
/* hero gold bar (ring + chevron + twin-rail motif ends) */
.goldbar{background:linear-gradient(180deg,#141a20,#0b0e12);border:1px solid var(--gold-dp);
  border-radius:8px;display:flex;align-items:center;gap:8px;padding:11px 0;margin:4px 0 16px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(238,243,247,.05) inset,0 2px 10px rgba(0,0,0,.45);}
.goldbar h2{flex:1;min-width:0;font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1.5px;
  font-size:clamp(13px,3.9vw,19px);color:var(--gold-hi);text-align:center;margin:0;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.goldbar .gm{height:22px;width:auto;display:block;flex-shrink:0;}
/* The Home title "Dropfleet Commander" is the only goldbar title long enough to
   clip between the motifs on a phone. Tighten its tracking and scale so it fits
   on one line down to narrow widths, without affecting the short titles on other
   goldbars (Game Record, Saved Games, chapter headings). */
.goldbar-home h2{letter-spacing:.4px;font-size:clamp(11px,3.2vw,18px);}
.goldbar-logo{flex:1;min-width:0;height:58px;object-fit:contain;}
.goldbar-home .gm{height:40px;}
/* faction intro on the setup screen (blurb moved off the select buttons) */
.fac-intro{display:flex;flex-direction:row;align-items:center;gap:13px;margin:0 0 14px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--fac);border-radius:11px;}
.fac-intro-logo{flex-shrink:0;width:44px;height:44px;object-fit:contain;}
.fac-intro-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fac-intro-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:18px;color:var(--fac-accent);}
.fac-intro-tag{font-size:13.5px;color:var(--mid);line-height:1.45;}

/* ── Shopping Mode toggle (Home) ── */
.shop-toggle{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 15px;margin-top:14px;}
.shop-toggle-text{flex:1;min-width:0;}
.shop-toggle-name{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--ink);}
.shop-toggle-sub{font-size:12px;color:var(--mid);line-height:1.45;margin-top:5px;}
/* The "What's new" row reuses the Shopping Mode frame but IS the button, so it
   needs the usual button resets (a <button> otherwise inherits none of the page
   type and centres its text). */
button.shop-toggle{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;}
button.shop-toggle:hover{border-color:var(--mid);}
button.shop-toggle:active{transform:translateY(1px);}
/* Shopping Mode stacks its name over its description because both are <div>s.
   A <button> may only contain phrasing content, so this row uses <span>s — which
   are inline and would otherwise run the two together on one line. Blockify them
   here to get the identical two-line stack without invalid markup. */
.news-row .shop-toggle-name,
.news-row .shop-toggle-sub{display:block;}
.news-go{font-size:20px;line-height:1;color:var(--fac-accent);padding-left:4px;}
.switch{flex:0 0 auto;width:48px;height:28px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface-2);padding:0;position:relative;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;}
.switch .switch-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--faint);transition:transform .18s ease,background .18s ease;}
.switch.on{background:var(--fac);border-color:var(--fac);}
.switch.on .switch-knob{background:var(--fac-ink);transform:translateX(20px);}
.switch:focus-visible{outline:2px solid var(--fac-accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .switch,.switch .switch-knob{transition:none;} }

/* ── Hobby House Player Portal ───────────────────────────── */
@font-face{font-family:'FK Screamer';font-display:swap;
  src:local('FK Screamer Legacy Upright'),
      url('assets/fonts/FKScreamerLegacy-Upright.ttf') format('truetype');}
.portal-tile{border:1px solid #7d211d;border-top-color:#7d211d;border-left:4px solid #ed3833;
  background:linear-gradient(100deg,rgba(237,56,51,.18),var(--surface) 72%);}
.portal-tile:hover{border-color:#a3433e;border-left-color:#ed3833;}
.portal-tile:disabled:hover{border-color:#7d211d;}
.portal-tile .ht-name{color:#ff6f69;}
.pp-tile-name{font-family:'FK Screamer','Arkhip',sans-serif;font-size:30px;letter-spacing:.5px;line-height:.9;}
.portal-icon{flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;}
.portal-icon img{max-width:100%;max-height:100%;object-fit:contain;}
.portal-go{align-self:center;color:#ff6f69;font-size:22px;flex-shrink:0;padding-right:2px;}
/* Play page Hobby House header (sits above the TTCombat "Play the Game" goldbar) */
.pp-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 16px 15px;
  background:radial-gradient(120% 150% at 50% 0%,rgba(237,56,51,.16),transparent 72%);}
.pp-banner-logo{height:52px;width:auto;flex-shrink:0;filter:drop-shadow(0 3px 12px rgba(237,56,51,.3));}
.pp-banner-title{font-family:'FK Screamer','Arkhip',sans-serif;text-transform:uppercase;
  font-size:40px;line-height:.86;color:#ed3833;letter-spacing:1px;}
/* Player Portal welcome page (pure Hobby House, full screen, shown once per sign-in) */
.content.portal-view{display:flex;align-items:center;justify-content:center;padding:28px 20px;
  background:radial-gradient(130% 70% at 50% 0%,rgba(237,56,51,.16),transparent 62%);}
.portal-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:340px;}
.pw-logo{width:124px;height:auto;margin-bottom:22px;filter:drop-shadow(0 4px 18px rgba(237,56,51,.35));}
.pw-title{font-family:'FK Screamer','Arkhip',sans-serif;text-transform:uppercase;font-size:48px;line-height:.9;
  color:#ed3833;letter-spacing:1px;margin:0 0 12px;}
.pw-sub{font-family:'Roboto Slab',serif;font-weight:300;color:var(--ink);font-size:15px;
  margin:0;max-width:280px;line-height:1.5;}
.pw-dev{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mid);margin:18px 0 0;}
.pw-enter{font-family:'Arkhip',sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:14px;color:#fff;
  background:#ed3833;border:none;border-radius:11px;padding:13px 38px;margin-top:14px;
  box-shadow:0 6px 20px rgba(237,56,51,.4);cursor:pointer;}
.pw-enter:active{transform:translateY(1px);}
.pw-gamechanged{width:200px;height:auto;margin-top:34px;opacity:.9;
  filter:drop-shadow(0 3px 14px rgba(237,56,51,.28));}

/* ── Events: round list emphasis ──────────────────────────────────────────────
   The live round stands out; complete and not-yet rounds are dimmed so it's
   obvious at a glance which round is current. */
.rd-dim{color:var(--mid);}                       /* grey the round name when not live */
.ap-pill.rd-pill-complete{color:#c4c9d1;border-color:#8a929d;}  /* silver "Complete" pill */
.rd-live-name{color:var(--fac-accent);}          /* live round name in the bright accent */
/* Live round tile: accent border + deep-teal fill so it clearly outranks the rest. */
.home-tile.rd-live-tile{border-color:var(--fac);border-top-color:var(--fac);
  background:var(--fac-deep);box-shadow:0 2px 12px rgba(0,0,0,.5);}
.home-tile.rd-live-tile:hover{border-color:var(--fac-accent);}

/* ── Porter / Payload (rulebook 14.1.11–14.1.12; Bioficer Cells etc.) ── */
/* Catalogue pills: porters advertise their carry rating; payload ships show the
   fleet's live slot ceiling for their letter. Soft limit — over-cap goes red. */
.tag.porter{border-color:var(--fac);color:var(--fac-accent);background:var(--fac-deep);}
.tag.pl{border-color:var(--fac);color:var(--fac-accent);background:var(--fac-deep);}
.tag.pl.none{border-color:var(--line);color:var(--faint);background:transparent;}
.tag.pl.over{border-color:var(--bad);color:var(--bad);background:var(--bad-bg);}
/* Pills sit in .cat-name, which lacks .cat-sub's base .tag styling — restate it here. */
.cat-name .tag{display:inline-block;font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:.5px;
  border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:2px;
  font-weight:500;text-transform:uppercase;}
/* Console summary line: per-letter used/capacity, shown only when relevant. */
.porterline{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:8px;padding:6px 8px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;}
.porterline .pll{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:700;}
.porterline .plv{font-family:'Roboto Mono',monospace;font-size:13px;font-weight:700;color:var(--ok);}
.porterline .plv.over{color:var(--bad);}
/* The AP line is information, not a legality check — so it is NOT green. Green on
   this line means "within capacity"; AP has no capacity to be within. */
.porterline.apline .plv{color:var(--gold-lt);}

/* ── "Load or Import Fleet" tile on the fleet chooser ──
   A filled brushed-metal tile that sits above the faction cards. Deliberately
   distinct from the dark .fac-chit faction cards (and clashes with no faction
   accent, since none are metallic) — dark ink on the silver/steel ramp, with a
   Roboto Slab label to set it apart from the Arkhip faction names. */
.loadimport-chit{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;
  border-radius:var(--radius);overflow:hidden;margin:0 0 16px;padding:15px 15px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-lt) 58%,var(--gold));
  box-shadow:0 2px 12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.28);}
.loadimport-chit:active{transform:translateY(1px);}
.li-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#0e1216;}
.li-icon svg{width:26px;height:26px;}
.li-body{flex:1;min-width:0;}
.li-name{display:block;font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:22px;letter-spacing:.2px;line-height:1.05;color:#0e1216;}
.li-sub{display:block;margin-top:5px;font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:.4px;color:#33404b;}
.li-go{flex-shrink:0;font-size:24px;color:#33404b;padding-right:4px;}

/* ── Event surfaces: the silver "you're in the event" identity ───────────────
   The event is a distinct place, so its entry tile and its whole view wear the
   brushed-silver chip look of the Load-or-Import tile (the --gold-* ramp is the
   app's silver ramp), setting them apart from the dark, outlined standard tiles.
   Scope:
     .home-tile.ev-tile         — the Event tile on the Player Portal home
     .content.events .home-tile:not([data-ev-round])
                                — hub / pack / slot-picker tiles in the Event view
     .content.events .home-tile.rd-live-tile
                                — the LIVE round tile in the Rounds view
   Round-list tiles that are NOT live are deliberately excluded (they carry
   data-ev-round but not rd-live-tile), so they keep the standard dark tile look;
   only the live round wears the silver identity.
   Event-view cards take a lighter silver accent (not a full fill) so their longer
   text stays legible. The scenario 'event' source is handled above. */
.home-tile.ev-tile,
.content.events .home-tile:not([data-ev-round]),
.content.events .home-tile.rd-live-tile{
  border:none;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-lt) 58%,var(--gold));
  box-shadow:0 2px 12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.28);}
.home-tile.ev-tile:hover,
.content.events .home-tile:not([data-ev-round]):hover,
.content.events .home-tile.rd-live-tile:hover{
  box-shadow:0 3px 16px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.36);}
.home-tile.ev-tile .ht-name,
.content.events .home-tile:not([data-ev-round]) .ht-name,
.content.events .home-tile.rd-live-tile .ht-name{color:#0e1216;}
.home-tile.ev-tile .ht-sub,
.content.events .home-tile:not([data-ev-round]) .ht-sub,
.content.events .home-tile.rd-live-tile .ht-sub{color:#33404b;}
.home-tile.ev-tile .ht-go,
.content.events .home-tile:not([data-ev-round]) .ht-go,
.content.events .home-tile.rd-live-tile .ht-go,
.home-tile.ev-tile .ht-soon,
.content.events .home-tile:not([data-ev-round]) .ht-soon,
.content.events .home-tile.rd-live-tile .ht-soon{color:#33404b;}
.home-tile.ev-tile .ht-icon,
.content.events .home-tile:not([data-ev-round]) .ht-icon{
  background:rgba(14,18,22,.06);color:#0e1216;border-color:rgba(14,18,22,.20);}
/* On the silver live-round tile, render the Live pill in dark ink — its default
   faction-accent colour is low-contrast on the light fill. */
.content.events .home-tile.rd-live-tile .ap-pill{color:#0e1216;border-color:rgba(14,18,22,.42);}
/* Player Portal event tile WITH a cover image: mirror the Event-header — the cover
   (set inline) replaces the silver fill; light text on a silver-framed dark band.
   No cover set → the silver rules above still apply (graceful fallback). */
.home-tile.ev-tile.has-cover{
  border:1px solid var(--gold-lt);box-shadow:none;min-height:76px;overflow:hidden;}
.home-tile.ev-tile.has-cover:hover{
  border-color:var(--gold-hi);box-shadow:none;}
.home-tile.ev-tile.has-cover .ht-name{color:#fff;}
.home-tile.ev-tile.has-cover .ht-sub{color:rgba(255,255,255,.74);}
.home-tile.ev-tile.has-cover .ht-go{color:rgba(255,255,255,.70);}
.home-tile.ev-tile.has-cover .ht-icon{
  background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);}
/* Static (non-interactive) event tile — reused on the Game Briefing to identify the
   event + round. No pointer, no press feedback. .ht-round sits beside the name in
   place of the chevron, mirroring .ht-sub's cover/non-cover colours. */
.home-tile.ev-static{cursor:default;}
.home-tile.ev-static:active{transform:none;}
.ht-round{flex-shrink:0;font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:2px;color:var(--mid);}
.home-tile.ev-tile .ht-round{color:#33404b;}
.home-tile.ev-tile.has-cover .ht-round{color:rgba(255,255,255,.82);}
/* Round-advance handshake overlay (linked games): a state-driven modal shown while
   two players agree to advance the round together. */
.adv-scrim{position:fixed;inset:0;z-index:9000;background:rgba(4,8,16,.74);display:flex;align-items:center;justify-content:center;padding:22px;}
.adv-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:360px;width:100%;box-shadow:0 14px 44px rgba(0,0,0,.55);}
.adv-title{font-family:'Arkhip',sans-serif;text-transform:uppercase;font-size:18px;letter-spacing:1px;line-height:1.15;color:var(--ink);}
.adv-sub{font-size:13px;color:var(--mid);line-height:1.5;margin:9px 0 16px;}
.adv-btns{display:flex;gap:10px;}
.adv-btns .btn{flex:1;margin:0;}
/* Disabled/stub event tiles: dim the silver, but keep it clearly an event tile. */
.content.events .home-tile:disabled{opacity:.55;}
.content.events .home-tile:disabled:hover{
  box-shadow:0 2px 12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.28);}
/* Event-view cards: a silver accent only — dark surface kept for readable text. */
.content.events .card{
  border-color:var(--gold-lt);border-top:2px solid var(--gold-hi);}
/* Event-header card with a cover image: the scrim (set inline with the dynamic
   URL) keeps the title legible; a min-height guarantees the image reads as a band
   even when the header text is short. */
.content.events .card.ev-head.has-cover{
  min-height:118px;overflow:hidden;}
.content.events .card.ev-head.has-cover .display{color:#fff;}
.content.events .card.ev-head.has-cover .small{color:rgba(255,255,255,.78);}
.content.events .card.ev-head.has-cover .small.muted{color:rgba(255,255,255,.66);}
.content.events .card.ev-head.has-cover b{color:#fff;}

/* ── Import Fleet screen: intro copy laid out on readable, brighter lines ── */
.import-intro{margin:6px 0 16px;}
.import-intro .lead{font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:18px;line-height:1.3;color:var(--ink);margin:0 0 9px;letter-spacing:.2px;}
.import-intro p{font-size:15px;line-height:1.55;color:#c6ced5;margin:5px 0;}
.import-intro b{color:var(--ink);font-weight:700;}

/* ── TTCombat feedback: desktop alignment, floating sheet, game-size chip ── */

/* Align the header contents (fleet name + Back) to the centred builder column on
   screens wider than that column, instead of stranding them in the far corners.
   The bar itself stays full-width; only its padding grows to meet the column. */
@media (min-width:751px){
  .header{padding-left:calc((100% - 720px)/2 + 15px);padding-right:calc((100% - 720px)/2 + 15px);}
}

/* On wide screens the pop-out sheet becomes a centred floating card with all four
   corners rounded, rather than a bottom sheet anchored to the screen edge with a
   flat bottom (which read as "more content below"). Phones keep the bottom sheet. */
@media (min-width:720px){
  .scrim{align-items:center;}
  .sheet{border-radius:18px;}
}

/* Build-view game-size chip — change size / points limit without leaving the build
   view. Styled to sit with the console gauges (same --surface/--line tokens). */
.size-chip{display:flex;align-items:center;gap:9px;width:100%;margin:8px 0 0;
  padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:12.5px;cursor:pointer;text-align:left;}
.size-chip:active{background:var(--surface-2);}
.size-chip .size-chip-name{font-weight:700;letter-spacing:.02em;}
.size-chip .size-chip-sub{color:var(--mid);font-family:'Roboto Mono',monospace;}
.size-chip .size-chip-ed{margin-left:auto;color:var(--fac-accent);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;}

/* ── Roboto Slab / Roboto Mono, self-hosted ──────────────────────────────
   Previously pulled from fonts.googleapis.com, which disclosed every
   visitor's IP address to Google on page load. Self-hosted here so the
   deployed app makes no third-party requests at all. Same weights the
   Google link requested; woff2 only (universally supported since 2020).
   Sourced from the @fontsource packages (Apache-2.0, same files Google
   serves). Do not reinstate the <link> in index.html. ── */
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;
  src:url('assets/fonts/roboto-slab-100.woff2') format('woff2');}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/roboto-slab-300.woff2') format('woff2');}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/roboto-slab-400.woff2') format('woff2');}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/roboto-slab-500.woff2') format('woff2');}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/roboto-slab-700.woff2') format('woff2');}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/roboto-mono-400.woff2') format('woff2');}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/roboto-mono-500.woff2') format('woff2');}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/roboto-mono-700.woff2') format('woff2');}


/* ── My Profile (profile.js) ─────────────────────────────────────────────── */
.acct-links{display:flex;gap:14px;align-items:center;}
.pf-actions{display:flex;gap:10px;margin-top:12px;}
.pf-actions .btn{margin:0;flex:1;padding:12px;font-size:14px;}
.pf-entry{border-top:1px solid var(--line);padding-top:12px;margin-top:12px;}
.pf-entry:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.pf-consent{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.pf-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;color:var(--ink);cursor:pointer;}
.pf-check input{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:var(--fac);}
.pf-check a,.pf-foot a,.hh-gate a,.hh-support a,.pf-band a{color:var(--fac-accent);text-decoration:underline;}
.pf-check a:visited,.pf-foot a:visited,.hh-gate a:visited,.hh-support a:visited,.pf-band a:visited{color:var(--fac-accent);}
.pf-danger{border-color:rgba(224,86,79,.45);}
.btn-danger{background:var(--bad);color:#fff;}
.btn-danger:disabled{opacity:.4;}
/* Environment band. In flow at the top of #app rather than fixed, so it cannot
   overlap the header or fight the sticky console — it costs ~20px and no layout
   risk. Loud on purpose: it only ever appears where you are NOT on the live app. */
.env-band{padding:4px 10px;text-align:center;font-family:'Roboto Mono',monospace;
  font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:#1c1813;background:#e8b84b;}
.env-band.local{background:#6fc1e8;}
.pf-foot{text-align:center;padding:18px 8px 26px;line-height:1.6;}
/* Build stamp. Deliberately quiet — it is diagnostic furniture, not something a
   player needs to read. Monospace so two ids can be compared at a glance across
   two phones (staging vs production), which is the whole point of it. */
.pf-build{display:inline-block;margin-top:7px;padding:3px 9px;border:1px solid var(--line);
  border-radius:7px;background:none;color:var(--faint);cursor:pointer;
  font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.3px;}
.pf-build:active{transform:translateY(1px);}
.pf-build:hover{color:var(--mid);border-color:var(--mid);}
/* Unread marker on the "What's new" footer link. Purely decorative — the link
   text carries the meaning, so it is aria-hidden and never the only signal. */
.pf-dot{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;
  background:var(--fac-accent);vertical-align:middle;}
/* Changelog entries inside the sheet. */
.cl-entry{padding:12px 0;border-bottom:1px solid var(--line);}
.cl-entry:last-child{border-bottom:0;}
.cl-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.cl-kind{font-size:10px;letter-spacing:.8px;text-transform:uppercase;padding:2px 7px;
  border:1px solid var(--line);border-radius:999px;color:var(--mid);}
.cl-new{color:var(--fac-accent);border-color:var(--fac-accent);}
.cl-date{font-size:11px;color:var(--mid);}
.cl-title{font-weight:600;margin-bottom:4px;}
.cl-items{margin:6px 0 0 0;padding-left:18px;line-height:1.55;}
.cl-items li{margin-bottom:4px;}

.pf-entry-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:6px 0;text-align:left;color:var(--ink);cursor:pointer;}
.pf-entry-title{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);font-weight:700;flex:0 1 auto;}
.pf-entry-sub{font-size:12px;color:var(--faint);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-chev{color:var(--fac-accent);font-size:14px;flex:0 0 auto;}
.pf-entry.open .pf-entry-sub{display:none;}