/* wars.css — DISTRO FIGHTER: WARS (Part 3) styles, P1 "The Gym".
   Layout approved from the batch-2 mockup: claim flow + gym Variant A
   "THE CORNER". Sits on base.css (cabinet) + system.css (tokens). */

.wars-wrap { max-width: var(--w-screen); margin: 0 auto; padding: 8px 12px 80px; }
/* the wars page leads with its own header panel, so it does not need the
   title screen's breathing room above the logo (owner, Aug 10: that band
   was dead space on every screen). Scoped here: #app keeps its 60px for
   the arcade. */
#app.wars { padding-top: 14px; }
/* the sound/gear/music rail sits INSIDE this bar now (owner, Aug 12), so the
   116px of empty padding that used to be reserved for it floating overhead is
   gone: it is a flex item like the rest of the line. */
@media (max-width: 600px) {
  /* a phone has no room for the name and the buttons on one line, so the bar
     wraps: HOME shares the top line with the rail, the title takes its own. */
  .wars-wrap .wars-hud { flex-wrap: wrap; row-gap: 2px; }
  .wars-wrap .wars-hud .home-corner { order: -1; }
  .wars-wrap .wars-hud .corner-rail.in-bar { order: 0; margin-left: auto; }
  .wars-wrap .wars-hud .gt { order: 1; flex: 1 0 100%; }
  .wars-wrap .wars-hud .st { order: 2; }
}

/* ── the ceremony band: center-stage celebrations (owner pick: OPTION B).
   Backdrop at 88% dark (owner: 80-90%, "20% or less transparency") — the
   mock's bare 15-20% wash let the gym bleed into the words. Gold for
   progression, magenta for epic deeds. ──────────────────────────────────── */
.cw-band { position: fixed; left: 0; right: 0; top: 40%; z-index: 95; text-align: center;
  padding: 26px 12px 22px; background: rgba(9, 9, 17, .88);
  border-top: 2px solid rgba(255, 210, 63, .65); border-bottom: 2px solid rgba(255, 210, 63, .65);
  box-shadow: 0 0 40px rgba(0, 0, 0, .8); opacity: 0; transform: translateX(-32px); }
.cw-band.in { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .3s ease-out; }
.cw-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 63, .10) 25%, rgba(255, 210, 63, .16) 50%, rgba(255, 210, 63, .10) 75%, transparent); }
.cw-band.epic { border-color: rgba(255, 77, 166, .65); }
.cw-band.epic::before { background: linear-gradient(90deg, transparent, rgba(255, 77, 166, .10) 25%, rgba(255, 77, 166, .16) 50%, rgba(255, 77, 166, .10) 75%, transparent); }
.cw-eye { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw); letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 210, 63, .6); }
.cw-band.epic .cw-eye { color: var(--mag); text-shadow: 0 0 10px rgba(255, 77, 166, .6); }
.cw-big { font-family: var(--pixel); font-size: var(--fs-page); color: var(--ink); margin: 12px 0 8px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .9), 0 0 16px rgba(255, 210, 63, .35); }
.cw-band.epic .cw-big { text-shadow: 0 2px 0 rgba(0, 0, 0, .9), 0 0 16px rgba(255, 77, 166, .35); }
.cw-line { font-family: var(--mono); font-size: var(--fs-body); color: #b9c6d2; }
.cw-hint { font-family: var(--mono); font-size: var(--fs-small); color: #8fa0af; margin-top: 12px; opacity: .8; }
.cw-x { position: absolute; top: 8px; right: 10px; min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #8fa0af; font-family: var(--mono); font-size: 16px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cw-band, .cw-band.in { transition: none; transform: none; } }

/* ── GETTING STARTED: the spotlight tour (owner, Aug 6). The highlight box
   carries the darkness — one element, a hole cut by box-shadow. ──────────── */
.tour-hl { position: fixed; z-index: 88; pointer-events: none; border-radius: 10px;
  border: 2px solid rgba(255, 210, 63, .8);
  box-shadow: 0 0 0 9999px rgba(6, 6, 14, .82), 0 0 24px rgba(255, 210, 63, .35);
  transition: all .25s ease-out; }
.tour-card { position: fixed; left: 50%; transform: translateX(-50%); z-index: 89;
  width: min(480px, calc(100vw - 24px)); background: var(--panel); border: 2px solid var(--cyan);
  border-radius: 8px; padding: 16px 18px; box-shadow: 0 0 30px rgba(0, 0, 0, .7); }
.tour-card .tc-eye { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--cyan); letter-spacing: 2px; }
.tour-card .tc-h { font-family: var(--pixel); font-size: var(--fs-head); color: var(--ylw); margin: 8px 0 6px; }
.tour-card .tc-l { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); margin: 6px 0; }
.tour-card .tc-btns { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* .ui-link is a two-column grid with an icon slot first, so a bare text child
   lands in the icon column and, held by nowrap, spills out past the card's
   padding. This link has no icon: it takes the colour and the hover and drops
   the grid, so its width is the width of its words. */
.tour-card .tc-skip { margin-left: auto; white-space: nowrap;
  display: inline-flex; align-items: center; padding: 5px 2px; }
@media (prefers-reduced-motion: reduce) { .tour-hl { transition: none; } }

/* the first-day welcome: a proper modal, recognizably the start of a tour */
.tour-veil { position: fixed; inset: 0; z-index: 88; background: rgba(6, 6, 14, .86);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.tour-wcard { width: min(520px, 100%); background: var(--panel); border: 2px solid var(--ylw);
  border-radius: 8px; padding: 20px 22px; box-shadow: 0 0 30px rgba(255, 210, 63, .25); }
.tour-wcard .tc-eye { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw); letter-spacing: 2px; }
.tour-wcard .tc-l { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); margin: 10px 0 0; }
.tour-wcard .tc-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* the skipper's gentle reminder: three visits, then silence */
.tour-nudge { text-align: center; margin: 10px 0 0; }
.tour-nudge .nudge-x { display: inline-flex; min-width: 30px; min-height: 30px;
  align-items: center; justify-content: center; }
.fineline { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* the sound corner: same control as the arcade's (base styles in system.css),
   but this page SCROLLS, so it pins to the viewport instead of the screen */
.wars-snd { position: fixed; top: 14px; right: 16px; }
@media (max-width: 600px) { .wars-snd { min-width: var(--tap); min-height: var(--tap); } }

.wars-head { text-align: center; padding: 8px 0 4px; }
.wars-head .eyebrow { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--cyan); letter-spacing: 2px; }
.wars-head .marque { font-family: var(--pixel); font-size: var(--fs-page); color: var(--ylw); margin-top: 8px; }

.w-panel { background: var(--panel); border: 2px solid #262638; border-radius: 8px; padding: 16px; }
/* THE WAR carries the namesake (owner, Aug 6): the front page's wars red,
   a faint burn on the border, and a scanline band behind the eyebrow — the
   one panel in the gym allowed to look dangerous */
.warnav { border-color: rgba(255, 77, 86, .5);
  box-shadow: 0 0 18px rgba(255, 77, 86, .12), inset 0 0 26px rgba(255, 77, 86, .05); }
.warnav .w-eyebrow { color: var(--red); text-shadow: 0 0 10px rgba(255, 77, 86, .55);
  padding: 4px 8px; margin: -4px -8px 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 77, 86, .07) 0 2px, transparent 2px 4px); }
.w-panel + .w-panel, .w-sec { margin-top: 14px; }
.w-eyebrow { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--cyan); letter-spacing: 2px; }
.w-h { font-family: var(--pixel); font-size: var(--fs-head); color: var(--ink); letter-spacing: 1px; margin: 4px 0 10px; }
.w-sub { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); }
.w-chip { display: inline-block; font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  padding: 4px 7px 3px; border-radius: 4px; background: #1c2233; color: var(--ylw); border: 1px solid #2e3a55; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: var(--pixel); font-size: var(--fs-label); color: #0a0a12;
  background: var(--ylw); border: 0; border-radius: 6px; padding: 8px 18px; cursor: pointer;
  box-shadow: 0 4px 0 #9a7b14; box-sizing: border-box; }
.w-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a7b14; }
.w-btn.ghost { background: #1c2233; color: var(--ink); box-shadow: 0 4px 0 #11141f; }
.w-btn[disabled] { opacity: .45; cursor: default; }
.w-err { color: var(--red); font-family: var(--mono); font-size: var(--fs-small); margin-top: 8px; }
.w-err:empty { display: none; }   /* no reserved cushion under a box with nothing to say (owner) */

/* ── #thereach: the IRC dock (left column) + the expanded overlay ─────────
   Old-school relay chat wearing the game's terminal skin: mono type, green
   room tone, <names> in brackets, the news in dim italics. ─────────────── */
/* the dock fills the left column's LEFTOVER space and never a pixel more:
   absolutely filled inside a flexing slot, so the grid row's height is set by
   the fighter card and the right column — the room scrolls inside whatever
   space the page actually has (owner: the box must not outgrow the layout) */
.chatslot { margin-top: 14px; flex: 1; position: relative; min-height: 280px; }
.chatslot .chatui { position: absolute; inset: 0; }
/* one column on mobile: no leftover space to fill, so the dock takes a fixed
   window (flex: none — a zero-basis flex item collapses in a content-sized column) */
@media (max-width: 720px) { .chatslot { flex: none; min-height: 0; height: 420px; } }
/* THE DOCK ON A PHONE (owner, Aug 11: "looks bad on mobile"). Measured at
   390px the chip rows stood 102px tall inside a 300px panel, which together
   with the head and the box left the message list exactly ZERO height — the
   conversation was not squashed, it was gone. The chips are what the link
   replaces, so below this width the dock shows the line and the way through
   and nothing else, and the thread gets the room back. */
@media (max-width: 720px) {
  .chatui:not(.big) .ml-chips { display: none; }
  .chatui:not(.big) .ml-dockbar { flex-wrap: wrap; gap: 4px 10px; }
  /* the label gives way first and may drop out entirely; the way through never does */
  /* the label goes entirely. At 390 it forced the row onto two lines, which
     cost 36px of a 38px message list, and the box below already says who you
     are writing to. The way through never wraps and never shrinks. */
  .chatui:not(.big) .ml-here { display: none; }
  .chatui:not(.big) .ml-open { margin-left: 0; }
  /* the standing subtitle is decoration, and in the dock it takes a line of
     its own — 32px that the conversation needs more than the words do */
  .chatui:not(.big).mail-dock .ch-who { display: none; }
  .ch-body { min-height: 90px; }
  /* THE EXPANDED DESK ON A PHONE: one column at a time. A 343px window split
     into a 210px rail and a 97px thread is two columns neither of which can be
     read, so the rail takes the whole width until a conversation is chosen and
     hands it over when one is. */
  .chatui.big.mail-desk .ml-side { width: 100%; border-right: 0; padding-right: 0; margin-right: 0; }
  .chatui.big.mail-desk.has-sel .ml-side { display: none; }
  .chatui.big.mail-desk:not(.has-sel) .ch-scroll { display: none; }
  /* specificity, not source order: the base .ml-back rule below sets
     display:none and sits AFTER this block, so a bare .ml-back here would be
     overridden and the button would exist at zero size — clickable by script,
     invisible to a person. */
  .chatui.big.mail-desk .ml-back { display: block; }
}
/* the way back only exists where the two columns cannot both be shown */
.ml-back { display: none; font-family: var(--mono); font-size: var(--fs-small);
  background: none; border: 0; cursor: pointer; color: var(--cyan); padding: 6px 2px;
  min-height: 34px; text-align: left; }
.ml-back:hover { text-decoration: underline; }
.ch-scroll::-webkit-scrollbar { width: 8px; }
.ch-scroll::-webkit-scrollbar-thumb { background: #274733; border-radius: 4px; }
.ch-scroll::-webkit-scrollbar-track { background: transparent; }
.chatui { display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: #0a100b; border: 2px solid #1f3324; border-radius: 8px; padding: 10px 12px;
  font-family: var(--mono); }
.ch-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ch-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-head .w-eyebrow { color: var(--grn); }
/* two desks, one corner: the room and the wire */
/* the room's tabs sit on a shared baseline, same grammar as the navbar
   (owner, Aug 9): a line runs under both, the active tab plants itself on it */
.ch-tabs { display: flex; gap: 2px; align-items: flex-end;
  border-bottom: 1px solid #443c56; margin-right: 4px; }
.ch-tab { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #9a9996; background: linear-gradient(#28233a, #1f1b2e); border: 1px solid #443c56;
  border-bottom: 0; border-radius: 6px 6px 0 0; padding: 7px 10px; cursor: pointer; }
.ch-tab.on { color: var(--grn); background: #302b3d; margin-bottom: -1px;
  border-bottom: 1px solid #302b3d; box-shadow: inset 0 2px 0 var(--grn); }
.ch-tab:hover { color: var(--grn); }
.ch-dot { display: inline-block; min-width: 15px; margin-left: 4px; padding: 0 3px;
  border-radius: 8px; background: var(--red); color: #fff; font-size: 11px;
  line-height: 15px; text-align: center; vertical-align: top; }
/* ── THE INBOX, OPTION A (owner pick, Aug 11) ──────────────────────────────
   A conversation rail beside the thread, in the EXPANDED window only. The
   gym's dock is too narrow to carry it without crushing the messages, so it
   keeps one thread and a link through to here. ── */
.ch-body { display: flex; flex: 1; min-height: 0; }
.ch-body > .ch-scroll { flex: 1; min-width: 0; }
.ml-side { width: 210px; flex: none; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid #1f3324; padding-right: 8px; margin-right: 10px; }
.ml-side[hidden] { display: none; }
.ml-sh { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 2px;
  color: var(--dim); padding: 2px 4px 7px; }
.ml-rows { flex: 1; min-height: 0; overflow-y: auto; }
.ml-row { display: flex; gap: 7px; align-items: center; padding: 6px 5px; border-radius: 5px; cursor: pointer; }
.ml-row:hover { background: #101a12; }
.ml-row.on { background: #16261a; }
.ml-dot { width: 7px; height: 7px; border-radius: 50%; background: #46536a; flex: none; }
.ml-dot.fr { background: var(--grn); }
.ml-col { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ml-top { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ml-top b { font-family: var(--mono); font-size: var(--fs-small); font-weight: normal; color: #cfe3d2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-row.on .ml-top b { color: var(--grn); }
.ml-top i { font-style: normal; font-family: var(--mono); font-size: 11px; color: #4a5568; margin-left: auto; flex: none; }
.ml-prev { font-family: var(--mono); font-size: 11px; color: #6b7a90;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-shut { background: none; border: 0; cursor: pointer; color: #3f4a5c; font-family: var(--mono);
  font-size: 14px; line-height: 1; padding: 3px 5px; border-radius: 4px; flex: none; }
.ml-row:hover .ml-shut { color: #7b8798; }
.ml-shut:hover { color: var(--red); background: rgba(255,90,110,.12); }
.ml-none, .ml-new { font-family: var(--mono); font-size: 11px; color: #4a5568; padding: 8px 5px; line-height: 1.5; }
.ml-new { border-top: 1px solid #16261a; margin-top: 6px; }
.ml-new b { color: var(--cyan); font-weight: normal; }
/* the dock's line through to the desk */
.ml-here { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-here b { color: var(--grn); font-weight: normal; }
/* flex: none, because a flex item is allowed to shrink below its own text and
   this one did — it wanted 238px, got 68, and read "see all" (bug, Aug 11).
   If the row runs out of room the LABEL gives way, never the way out. */
/* NOT .ui-link. That component is a two-column grid, an icon slot and a
   label, so a button whose only child is text drops that text into the icon
   column and it is squeezed to icon width — this one wanted 238px and was
   given 68, reading "see all" (bug, Aug 11). A plain link needs no grid. */
.ml-open { font-family: var(--mono); font-size: var(--fs-small); margin-left: auto;
  white-space: nowrap; flex: none; background: none; border: 0; cursor: pointer;
  color: var(--cyan); padding: 4px 2px; min-height: 30px; }
.ml-open:hover { color: #8ce8f4; text-decoration: underline; }
/* @name completion, above the box it types into */
.ch-inrow { position: relative; }
.ch-ac { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 6;
  background: #10101c; border: 1px solid #2f2f45; border-radius: 6px; overflow: hidden;
  box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
.ch-ac b { display: block; font-family: var(--pixel); font-size: 10px; letter-spacing: 1px;
  color: #4a5568; padding: 7px 10px 5px; font-weight: normal; }
.ch-ac button { display: flex; width: 100%; gap: 8px; align-items: center; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 8px 10px;
  font-family: var(--mono); font-size: var(--fs-small); color: #b9c4d4; }
.ch-ac button:hover, .ch-ac button.on { background: #1e2a20; color: var(--grn); }
.ch-ac s { text-decoration: none; color: #4a5568; margin-left: auto; font-size: 11px; }

.ml-strip { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 8px; }
/* the dock's line through to the desk gets its own row; the chips get theirs.
   Sharing one wrapped flex row let the chips crowd the link off the line. */
.ml-dockbar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ml-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  background: #0d150e; border: 1px solid #274733; border-radius: 5px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-small); color: #cfe3d2; }
.ml-chip.on { border-color: var(--grn); color: var(--grn); }
.ml-chip.dim { color: #52685a; cursor: default; }
.ml-chip.ask { border-color: var(--gold); cursor: default; }
.ml-yes, .ml-no { background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-family: var(--mono); font-size: var(--fs-small); }
.ml-yes { color: var(--grn); }
.ml-no { color: var(--red); }
.ch-l.mine .ch-n { color: var(--gold); }
.ch-who { color: var(--dim); font-size: var(--fs-small); margin-left: auto; }
/* the narrow dock gives the presence count its own line under the channel name */
.chatui:not(.big) .ch-who { flex-basis: 100%; order: 3; margin-left: 0; }
.chatui:not(.big) .ch-pop { margin-left: auto; }
.ch-pop, .ch-x { min-width: 34px; min-height: 34px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 16px; }
.ch-scroll { flex: 1; min-height: 0; overflow-y: auto; font-size: var(--fs-small);
  line-height: 1.45; padding-right: 4px; }
.ch-l { margin: 2px 0; overflow-wrap: anywhere; }
.ch-t { color: #4e6252; }
.ch-n { color: var(--cyan); }
.ch-b { color: #cfe3d2; }
.ch-l.sys { color: #7d937f; font-style: italic; }
.ch-l.sys.err { color: var(--red); font-style: normal; }
.ch-inrow { display: flex; gap: 8px; margin-top: 8px; }
.ch-in { flex: 1; min-width: 0; background: #0d150e; color: #cfe3d2;
  border: 1px solid #274733; border-radius: 5px; font-family: var(--mono);
  font-size: var(--fs-small); padding: 8px 10px; }
.ch-in::placeholder { color: #587a5e; }
.ch-in:focus { outline: none; border-color: var(--grn); }
/* the send control stays neat: the global .ui-btn is a full-width grid with an
   icon column, which in a flex row starves the input to a sliver (the arcade
   .tt-in overlay hit the same trap). The typing gets the room, not the button. */
.ch-inrow .ui-btn { flex: 0 0 auto; width: auto; display: inline-flex;
  align-items: center; justify-content: center; padding: 8px 14px;
  min-height: 38px; min-width: 44px; }
.ch-lock { margin-top: 8px; }
/* the profile's own hands: ask for a corner, open the wire */
.pf-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* the record books pop-up: profiles open in place, not in a tab */
.pf-veil { position: fixed; inset: 0; z-index: 94; background: rgba(6, 6, 14, .85);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
/* 90% of the WARS page width (1280), never the browser (owner, Aug 9) */
.pf-box { position: relative; width: min(1152px, 100%); height: min(82vh, 700px);
  background: #0b0b14; border: 2px solid #2a2f45; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; }
.pf-x { position: absolute; top: 8px; right: 10px; z-index: 1; min-width: 34px;
  min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.pf-frame { width: 100%; flex: 1; min-height: 0; border: 0; }
/* inside the pop-up the cabinet stays outside: no neon rails, no glow, no
   masthead headroom — the frame itself is the chrome (owner, Aug 9) */
#app.wars.embed { border: 0; box-shadow: none; width: 100%;
  padding: 14px clamp(10px, 2vw, 18px) 20px; min-height: 100%; }
/* the action bar under the books — owned by the game page, never the frame */
.pf-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; border-top: 2px solid #2a2f45; background: #0b0b14; }
.pf-acts [hidden] { display: none; }   /* inline-flex would otherwise defeat the hidden attribute */
.pf-word { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); }
.pf-note { width: 100%; min-height: 1.2em; color: var(--dim); font-family: var(--mono);
  font-size: var(--fs-small); }
.pf-note:empty { display: none; }
@media (max-width: 600px) { .pf-box { height: 92vh; }
  .pf-x { min-width: var(--tap); min-height: var(--tap); } }
/* sealed divisions read locked until passage papers say otherwise */
.classtabs .ct.sealed { opacity: .8; }
/* an armed salvage tile waits for the second tap */
.svrun .st.arm { border-color: var(--grn); }
/* board names open the record books */
.mglink { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.mglink:hover, .mglink:focus-visible { color: var(--cyan); }
/* the expanded room */
.ch-veil { position: fixed; inset: 0; z-index: 92; background: rgba(6, 6, 14, .85);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.chatui.big { flex: 0 1 auto; width: min(760px, 100%); height: min(72vh, 640px); }
@media (max-width: 600px) { .chatui.big { height: 86vh; }
  .ch-pop, .ch-x, .ch-inrow .ui-btn { min-width: var(--tap); min-height: var(--tap); }
  .ch-tab, .ml-chip { min-height: var(--tap); } }

/* ── claim flow ── */
/* the way back for licensed managers: a readable question and the house
   button, not a whisper (owner, Aug 6: "doesn't even look like a button") */
.claim-resume { margin-top: 20px; text-align: center; }
.claim-resume p { font-family: var(--mono); font-size: var(--fs-body); color: #9fb1c0; margin: 0 0 10px; }
.claim-resume .ui-btn { display: inline-flex; width: auto; }

.campinput { width: 100%; box-sizing: border-box; background: #0d0d18; color: var(--ink);
  border: 2px solid #262638; border-radius: 6px; font-family: var(--mono); font-size: var(--fs-lead);
  padding: 10px 12px; margin: 8px 0 14px; }
.campinput:focus { outline: none; border-color: var(--ylw); }

/* ── the gym (Variant A: THE CORNER) ── */
/* TWO COLUMNS (owner, Aug 9): the chat column stretched to the desk's
   length, so the Reach moved into the desk — first, full width, SHORT.
   The room scrolls inside; the ⤢ overlay keeps the tall reading view. */
.gymA { display: grid; grid-template-columns: 300px 1fr; gap: 14px; }
.gymA .gymchat { margin-top: 0; margin-bottom: 14px; flex: none;
  min-height: 0; height: 300px; }
/* the left column stacks fighter card + chat; the dock absorbs the slack so
   both columns bottom-align (owner: the empty space becomes the room) */
.gymA > div:first-child { display: flex; flex-direction: column; }
@media (max-width: 720px) { .gymA { grid-template-columns: 1fr; } }
.fcard { text-align: center; }
.fcard canvas { width: 190px; height: 190px; image-rendering: pixelated; }
.fname { font-family: var(--pixel); font-size: var(--fs-head); color: var(--ink); margin-top: 2px; }
.fcamp { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); margin: 3px 0 8px; }

.statrow { display: grid; grid-template-columns: 92px 1fr 44px; gap: 8px; align-items: center;
  margin: 7px 0; text-align: left; }
.statrow .sl { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--dim); letter-spacing: 1px; }
.statrow .sv { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--ink); text-align: right; }
.bar { height: 14px; background: #0d0d18; border: 1px solid #262638; border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; transition: width .5s; }
.bar .power   { background: var(--red); }
.bar .stamina { background: var(--grn); }
.bar .speed   { background: var(--cyan); }
.bar .chin    { background: var(--blu); }

.condwrap { margin: 10px 0 2px; }
.cond { height: 20px; background: #0d0d18; border: 2px solid #262638; border-radius: 4px; overflow: hidden; }
.cond i { display: block; height: 100%; background: linear-gradient(90deg, #2c9a4b, #46d36a); transition: width 1s linear; }
.cond i.low { background: linear-gradient(90deg, #9a2c2c, #d34646); }
.condnote { display: flex; justify-content: space-between; color: var(--dim);
  font-family: var(--mono); font-size: var(--fs-small); margin-top: 4px; }

.sess, .svrun { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
/* three depths ride one row on a desk */
@media (min-width: 761px) { .svrun { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 480px) { .sess, .svrun { grid-template-columns: 1fr; } }
.svrun .st,
.sess .st { background: #141422; border: 2px solid #262638; border-radius: 8px; padding: 11px 12px;
  cursor: pointer; text-align: left; font-family: var(--mono); }
.sess .st:hover { border-color: #3a3a55; }
.svrun .st.run, .sess .st.run { border-color: var(--cyan); cursor: default; }
.svrun .st.done, .sess .st.done { border-color: var(--grn); }
.svrun .st.off, .sess .st.off { opacity: .45; cursor: default; }
.svrun .tn, .sess .tn { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--ink); letter-spacing: 1px; }
.svrun .td, .sess .td { color: var(--dim); font-size: var(--fs-small); margin-top: 4px; }
.svrun .tt, .sess .tt { color: var(--cyan); font-size: var(--fs-small); margin-top: 4px; }
.svrun .tg, .sess .tg { color: var(--grn); font-size: var(--fs-small); margin-top: 4px; }

/* a real terminal is a fixed window: output scrolls inside it, the page never
   grows or jumps (owner UX note, Aug 2026) */
.term { background: #0b0f0c; border: 2px solid #1d2a1f; border-radius: 8px; padding: 12px 14px;
  font-family: var(--mono); font-size: var(--fs-small); line-height: 1.45; color: #9fd8a8;
  height: 380px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: #245a34 #0b0f0c; }
.term .man-foot { color: var(--dim); margin-top: 10px; }
.term .backlist { color: var(--cyan); cursor: pointer; }
.term .backlist:hover { text-decoration: underline; }
.term .p { color: #5aa768; }
.term .hl { color: #e7f6e9; }
.term .rm { color: var(--red); cursor: pointer; }
.term .add { color: var(--cyan); cursor: pointer; }
.term .rm:hover, .term .add:hover { text-decoration: underline; }
.term .full { color: var(--dim); }
.term-out { min-height: 0; }
.term-out div { color: var(--red); margin-top: 8px; }
.term .man { color: var(--cyan); cursor: pointer; }
.term .man:hover { text-decoration: underline; }
/* man pages: green-on-black manual output, not an error */
.term-out .man-block { color: #9fd8a8; margin-top: 10px; border-top: 1px dashed #1d2a1f; padding-top: 8px; }
.term-out .man-block b { display: block; font-family: var(--pixel); font-size: var(--fs-nano);
  color: var(--cyan); letter-spacing: 1px; margin-top: 8px; }
.term-out .man-block b:first-child { margin-top: 0; }
.term-out .man-block p { margin: 3px 0 0; color: #cfe8d4; }
.term-in { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; }
.term-in .cmd { flex: 1; background: none; border: 0; outline: none; color: #e7f6e9;
  font-family: var(--mono); font-size: var(--fs-small); caret-color: #46d36a; padding: 0; }
.term-in .cmd::placeholder { color: #3f5a45; }
.bloatline { display: flex; justify-content: space-between; margin-top: 8px; color: var(--dim);
  font-family: var(--mono); font-size: var(--fs-small); flex-wrap: wrap; gap: 4px; }

/* the budget wears a corner badge: a dark plate with the number BIG (owner,
   Aug 2026 — the old one-liner was too easy to miss) */
.plan-panel { position: relative; }
/* floated, not absolute (owner, Aug 7: it was sitting on top of the text in
   the narrow rail) — the intro wraps around it at any width */
.pb-box { float: right; margin: 0 0 10px 14px; background: #1c1e2e; border: 1px solid #2c2e46;
  border-radius: 8px; padding: 8px 14px; text-align: center; min-width: 78px; }
.pb-box b { display: block; font-family: var(--pixel); font-size: var(--fs-num); font-weight: normal;
  color: var(--ylw); line-height: 1.1; }
.pb-box b.zero { color: var(--grn); }
.pb-box span { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: var(--dim); }
/* ── CUES (owner, Aug 13) ────────────────────────────────────────────────
   A row of marks that go out one at a time, because running low should look
   like running low. The save bar underneath states the price at the moment of
   paying it: autosave is gone, since a change now costs something. */
.cuerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 4px 0 12px; }
.cuepips { display: flex; gap: 5px; }
.cuepip { width: 13px; height: 13px; border-radius: 3px; background: var(--grn); }
.cuepip.spent { background: none; border: 1px solid #3a3448; }
.cuen { font-family: var(--mono); font-size: var(--fs-small); color: #8796ab; }
.cuen b { color: var(--grn); font-weight: normal; }
/* .ui-link is a two column grid with an icon slot first, so a link whose only
   child is words puts those words in the icon column and they break one per
   line. This one has no icon: it keeps the colour and drops the grid. */
.cue-help { display: inline-flex; align-items: center; width: auto;
  min-height: 0; padding: 4px 2px; white-space: nowrap; }
.savebar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid #2f2a42; }
/* the unspent counter (owner, Aug 13): it was a large square at the top of the
   narrowest column in the game, counting a number that only moves while you
   are mid-drag. It rides the save bar now, quiet at nought and amber when
   there are points sitting idle, which is the only time it matters. */
.saveleft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ptchip { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #56506a; border: 1px solid #38314d; border-radius: 5px; padding: 8px 9px; white-space: nowrap; }
.ptchip b { color: #56506a; font-weight: normal; }
.ptchip.spare { color: #8796ab; border-color: #7a5c00; }
.ptchip.spare b { color: var(--gold, #f6d32d); }
.saveacts { display: flex; align-items: center; gap: 12px; }
.saveacts .ui-link { min-height: 0; padding: 4px 0; display: block; width: auto; }
.plansaved { font-family: var(--mono); font-size: var(--fs-small); color: #e5a50a; }
.plansaved.warn { color: var(--red, #ff4d56); }
.plan-save[disabled] { opacity: .4; pointer-events: none; }
/* what a session pays, on the partner's own tile */
.rt .pays { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.rt .pay { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  font-style: normal; border: 1px solid #443c56; border-radius: 4px; padding: 4px 6px; color: #8796ab; }
.rt .pay.xp { color: var(--grn); border-color: #245a34; }
.rt .pay.cue { color: var(--gold, #f6d32d); border-color: #7a5c00; }
.rt .pay.none { color: #56506a; }
.rt .pay.fee { color: #b9b4c7; }
/* while a free spar is on the table the fee chip says FREE, in the same green
   the training tiles use for the word */
.rt .pay.fee.free { color: #57e389; border-color: #245a34; }
/* what the contract buys you in the ring: the reason to keep a partner */
.rt .cnperk { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-small);
  color: #b9b4c7; line-height: 1.4; }
.rt .cnperk b { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #dc8add; font-weight: normal; margin-right: 6px; }
/* one line per dial: the label and its meaning share the row, the slider sits under */
.planrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.planrow label { color: var(--ink); font-family: var(--mono); font-size: var(--fs-small); white-space: nowrap; }
.sliders input { width: 100%; accent-color: var(--ylw); }
.planhint { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); opacity: .8; }
@media (max-width: 720px) { .plan-h { display: none; }   /* mobile: FIGHT PLAN says enough */ }
.plansaved { color: var(--grn); font-family: var(--mono); font-size: var(--fs-small); min-height: 1.2em; margin-top: 6px; }

/* traits on the fighter card + profile: BUFFS, styled as such (owner, Aug
   2026: "positives noticeable while a genuine part of the gym UI") — each
   trait is a green-lit plate with a + tick, the visual family of the stat
   bars above it rather than an afterthought below them */
.traits { margin-top: 12px; text-align: left; border-top: 1px solid #262638; padding-top: 10px; }
.traits .tl { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--cyan); letter-spacing: 1px; }
.traits .chips { margin-top: 2px; }
.tchip { display: inline-block; background: rgba(70, 211, 106, .07); border: 1px solid #245a34;
  border-left: 3px solid var(--grn); border-radius: 4px; padding: 4px 9px 3px; margin: 6px 6px 0 0;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--ink); line-height: 1.2; }
.tchip::before { content: '+ '; color: var(--grn); font-family: var(--pixel); font-size: var(--fs-nano); }
.traits .tn2 { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); opacity: .8; margin-top: 8px; }
/* the trait strip lives with the loadout now: chips are tappable manuals,
   sized like the buttons they act as (44px targets) */
.loadtraits { border-top: none; margin-top: 10px; padding-top: 0; }
.loadtraits .tchip { cursor: pointer; display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 12px; box-sizing: border-box; }
.loadtraits .tchip:hover, .loadtraits .tchip:focus-visible { border-color: var(--grn); }

/* first-visit guide card */
.intro { border-color: #3a3a55; }
.introlines { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink); margin: 10px 0 14px; }
.introlines div { margin-top: 8px; }
.introlines b { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--ylw); margin-right: 6px; }

/* the ring: partner rows in the gym */
.spar-row { cursor: default; flex-wrap: wrap; }
.spar-row .sb { flex: 1; min-width: 180px; }
.spar-row .w-btn { font-size: var(--fs-nano); padding: 8px 13px; }

/* the ring: replay screen */
.ringhud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.ringhud .rn { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ink); margin-bottom: 6px; }
.ringhud .side.right .rn { text-align: right; }
.ringhud .vs { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw); }
.rhp i { transition: width .4s; }
.stage { display: flex; justify-content: center; gap: clamp(8px, 6vw, 60px); }
/* the arcade-arena visual (owner, Aug 10): same fight, different picture */
.stage.stage-arc { padding: 0; overflow: hidden; }
.stage.stage-arc .fight-stage { width: 100%; }
.stage canvas { width: clamp(120px, 34vw, 190px); height: auto; image-rendering: pixelated; }
.stage .cO { transform: scaleX(-1); }
.calls { min-height: 84px; }
.calls .line { font-family: var(--mono); font-size: var(--fs-lead); color: var(--ink); min-height: 2.2em; }
.calls .line b { color: var(--cyan); font-weight: normal; }
.calls .round { font-family: var(--pixel); font-size: var(--fs-head); color: var(--ylw); }
.calls .betw { color: var(--dim); }
.calls .verdictline { color: var(--ink); }
.calls .skiphint { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); opacity: .7; margin-top: 8px; }
.ringend { text-align: center; margin-top: 16px; }
.ringend .verdict { font-family: var(--pixel); font-size: var(--fs-head); color: var(--ylw); margin-bottom: 14px; }

/* ── P2 B4: the war screens ── */
.fstatus { color: var(--cyan); font-family: var(--mono); font-size: var(--fs-small); margin-top: 3px; }
/* Both gym columns are flex stacks. Left: the fighter card grows, CONDITION
   sits beneath it (his condition belongs with him — owner). Right: every box
   hugs its content — no slack-absorbing stretch (owner, Aug 2026: cushions
   under the boxes read as space for no reason). */
.gymA > div { display: flex; flex-direction: column; }
.gymA .fcard { flex: none; }
.warnav { flex: none; }
.warnav .navitem { display: grid; grid-template-columns: 152px 1fr; gap: 12px; align-items: center; margin-top: 12px; }
.warnav .navitem .w-btn { width: 100%; font-size: var(--fs-nano); }
.warnav .navdesc { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); line-height: 1.35; }
@media (max-width: 720px) { .warnav { flex: none; } }

/* the commission (license) */
.lic { max-width: 560px; margin-left: auto; margin-right: auto; }
.seal { text-align: center; margin: 6px 0 14px; }
.seal .ring1 { display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ylw); border-radius: 50%; width: 84px; height: 84px;
  font-family: var(--pixel); font-size: 15px; color: var(--ylw); letter-spacing: 1px; }
.lic-kicker { font-family: var(--pixel); font-size: var(--fs-label); color: var(--red); letter-spacing: 1px;
  text-align: center; margin-bottom: 8px; }
.lic-line { text-align: center; color: var(--ink); font-family: var(--mono); font-size: var(--fs-lead); }
.lic-line b { color: var(--cyan); font-weight: normal; }
.lic-form label { display: block; color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); margin-top: 14px; }
.lic-form .dim2 { opacity: .7; }
.lic-form input { width: 100%; box-sizing: border-box; background: #0d0d18; color: var(--ink);
  border: 2px solid #262638; border-radius: 6px; font-family: var(--mono); font-size: var(--fs-lead); padding: 10px 12px; }
.lic-form input:focus { outline: none; border-color: var(--ylw); }
.codein { display: block; width: 240px; margin: 14px auto; box-sizing: border-box; background: #0d0d18;
  color: var(--ylw); border: 2px solid #262638; border-radius: 6px; font-family: var(--pixel);
  font-size: 20px; letter-spacing: 12px; text-align: center; padding: 12px 0 12px 12px; }
.codein:focus { outline: none; border-color: var(--ylw); }
.lic .resend, .lic .redo { color: var(--cyan); cursor: pointer; }
.lic .resend:hover, .lic .redo:hover { text-decoration: underline; }
.profurl { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  background: #0d0d18; border: 2px solid #262638; border-radius: 6px; padding: 10px 12px; margin: 14px 0 10px; }
.profurl .u { font-family: var(--mono); font-size: var(--fs-small); color: var(--cyan); word-break: break-all; }
.profurl .w-btn { font-size: var(--fs-nano); padding: 6px 10px; }

/* the circuit board */
/* division tabs speak the shell's notebook grammar: raised on a shared
   baseline, the active tab connected to the page (owner do-over, Aug 9) */
.classtabs { display: flex; gap: 2px; align-items: flex-end; flex-wrap: wrap;
  border-bottom: 1px solid #443c56; margin: 10px 0 0; min-height: 45px; }
.classtabs .ct { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  padding: 0 14px; color: #b9b4c7; cursor: pointer; min-height: 44px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px; }
.classtabs .ct:hover { color: #deddda; }
.classtabs .ct .home { width: 7px; height: 7px; border-radius: 50%; background: var(--ylw); }
.classtabs .ct .lock { font-family: var(--mono); font-size: var(--fs-small); color: #756f87; }
/* flow-root: first-child margins stay inside, so the board's top edge sits
   at the same y in every division — full, empty, or sealed */
.board { display: flow-root; }
/* fixed tracks, not auto (owner, Aug 9): every row is its own grid, so auto
   columns sized per row and nothing lined up. Shared widths make the table. */
.board .row { display: grid; grid-template-columns: 34px 44px 1fr 48px 100px 104px; gap: 10px; align-items: center;
  background: #141422; border: 2px solid #262638; border-radius: 8px; padding: 7px 10px; margin-top: 8px; }
.board .row.me { border-color: var(--ylw); }
.board .rk { font-family: var(--pixel); font-size: var(--fs-label); color: var(--dim); }
.board canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.board .who .nm { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--ink); }
.board .who .mg { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); }
.board .pts { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw); text-align: right; white-space: nowrap; }
.board .pts small { display: inline; font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); }
/* the record stands in its own column so W-L lines up down the board;
   under 480px the column has no room and the record rides the manager line */
.board .rec { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  text-align: right; white-space: nowrap; }
.board .mrec { display: none; }
.board .w-btn { font-size: var(--fs-nano); padding: 6px 10px; }
.board .stat { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); text-align: right; }
@media (max-width: 520px) {
  .board .row { grid-template-columns: 24px 40px 1fr auto; }
  .board .pts { display: none; }
  .board .rec { display: none; }
  .board .mrec { display: inline; }
}

/* the ledger */
.headline { background: #141422; border: 2px solid #2e3a55; border-radius: 8px; padding: 12px 14px;
  font-family: var(--mono); font-size: var(--fs-lead); margin-top: 10px; }
.headline b { color: var(--cyan); font-weight: normal; }
.led .row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center;
  background: #141422; border: 2px solid #262638; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.led .row.loss { border-left: 4px solid var(--red); }
.led .row.winrow { border-left: 4px solid var(--grn); }
.led canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.led .what .l1 { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); }
.led .what .l2 { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); }
.led .pts { font-family: var(--pixel); font-size: var(--fs-label); text-align: right; }
.led .pts.up { color: var(--grn); } .led .pts.dn { color: var(--red); }
.led .acts { display: flex; gap: 6px; }
.led .w-btn { font-size: var(--fs-nano); padding: 6px 10px; }
@media (max-width: 520px) {
  .led .row { grid-template-columns: 40px 1fr auto; }
  .led .pts { display: none; }
}

/* the public manager profile (manager.php) */
.mstats { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.mstats b { display: block; font-family: var(--pixel); font-size: var(--fs-num); color: var(--ylw); }
.mstats span { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); }
.pbout { display: flex; gap: 10px; align-items: baseline; background: #141422; border: 2px solid #262638;
  border-radius: 8px; padding: 7px 10px; margin-top: 8px; font-family: var(--mono); font-size: var(--fs-small); }
.pbout .wl { font-family: var(--pixel); font-size: var(--fs-label); }
.pbout.w .wl { color: var(--grn); } .pbout.l .wl { color: var(--red); }
.pbout .det { color: var(--dim); }

/* the wars guide — THE one reference (owner, Aug 9): site guide-page
   anatomy. A header with the way back at the top, ON THIS PAGE down the
   left, the reading text on the right, a size up from before. */
.wguide .g-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.wguide .g-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px; align-items: start; margin-top: 14px; }
.wguide .g-nav { position: sticky; top: 14px; display: flex; flex-direction: column;
  gap: 2px; max-height: calc(100vh - 28px); overflow: auto; }
.wguide .g-nav .w-eyebrow { margin-bottom: 6px; }
.wguide .g-nav a { display: flex; align-items: center; min-height: 44px;
  font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: .5px;
  color: #b9b4c7; text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.wguide .g-nav a:hover, .wguide .g-nav a:focus-visible { background: #302b3d; color: #deddda;
  text-decoration: none; }
@media (max-width: 900px) {
  .wguide .g-cols { grid-template-columns: 1fr; }
  .wguide .g-nav { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .wguide .g-nav .w-eyebrow { flex-basis: 100%; }
}
.wguide .g-sec { margin-top: 26px; }
.wguide .g-sec:first-child { margin-top: 0; }
.wguide .g-sec h3 { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw);
  letter-spacing: 1px; margin: 0 0 10px; }
.wguide .g-sec p { font-family: var(--mono); font-size: var(--fs-lead); color: var(--ink);
  margin: 0 0 10px; line-height: 1.5; max-width: 760px; }
.wguide .g-sec b { color: var(--cyan); font-weight: normal; }
/* THE GUIDE'S LISTS (owner bug report, Aug 13). There was no rule for them at
   all, so a list fell back to the page face — Press Start 2P — and rendered
   in the pixel font at seventeen pixels next to prose in VT323 at twenty
   three. The pixel face is about twice as wide per character, so six bullets
   filled half the screen and read as a different document. A list is reading
   text: same face, same size, same measure as the paragraph above it. */
.wguide .g-sec ul { margin: 0 0 12px; padding-left: 22px; max-width: 760px; }
.wguide .g-sec li { font-family: var(--mono); font-size: var(--fs-lead); color: var(--ink);
  line-height: 1.5; margin: 0 0 4px; }
.wguide .g-trait { border-left: 3px solid #245a34; padding: 6px 0 6px 12px; margin-top: 10px; }
.wguide .g-trait-h { font-family: var(--mono); font-size: var(--fs-lead); color: var(--grn); }
.wguide .g-trait-h .dim { color: var(--dim); }
.wguide .g-trait p { margin: 4px 0 0; font-size: var(--fs-body); color: var(--ink); }
.wguide .gdim { color: var(--dim); }
/* the fighter card's stat block (owner pick, Aug 9: D's marquee over A's
   grid). Sized for eyes 40 to 70+: nothing below the body rung. The chip
   wears ink — gold belongs to the numbers that change when you play. */
.fmg { text-align: center; margin-top: 12px; }
.fmg .w-eyebrow { display: block; }
.fmg-n { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--ink);
  letter-spacing: 1px; margin-top: 4px; }
.fchip { display: block; width: fit-content; margin: 0 auto; }
.fcard .w-chip.fchip { color: #deddda; }
.fhero { text-align: center; margin-top: 14px; }
.fhero b { display: block; font-family: var(--pixel); font-size: var(--fs-num);
  color: var(--ylw); font-weight: normal; line-height: 1; }
.fhero span { display: block; font-family: var(--pixel); font-size: var(--fs-nano);
  letter-spacing: 3px; color: #756f87; margin-top: 6px; }
.fseason { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 2px;
  color: #756f87; text-align: center; margin-top: 14px;
  border-top: 1px solid #3a3453; padding-top: 12px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 6px;
  text-align: center; margin-top: 10px; }
.fgrid b { display: block; font-family: var(--pixel); font-size: var(--fs-label);
  color: var(--ylw); font-weight: normal; }
.fgrid span { display: block; font-family: var(--mono); font-size: var(--fs-body);
  color: #9a9996; margin-top: 2px; }
/* the fight plan's split bar: one bar = the whole budget, three colors =
   the split. The picture carries what the paragraph used to. */
.splitbar { display: flex; height: 14px; background: #171226; border: 1px solid #3a3453;
  border-radius: 7px; overflow: hidden; margin: 10px 0 2px; }
.splitbar i { display: block; height: 100%; }
.sb-aggression, .pdot-aggression { background: #ed333b; }
.sb-pace, .pdot-pace { background: #f6d32d; }
.sb-guard, .pdot-guard { background: #3584e4; }
.pdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 7px; vertical-align: baseline; }
/* the application desk + the key side door on the locked cold open */
.apwin { max-width: 560px; margin: 0 auto; text-align: left; }
.apf-l { display: block; font-family: var(--mono); font-size: var(--fs-body); color: #9a9996;
  margin-top: 12px; }
.apf-l .campinput { margin: 6px 0 0; }
.apf-chips { display: flex; gap: 8px; margin-top: 6px; }
.apg.on { border-color: var(--grn); color: var(--grn); }
.apf-btns { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.havekey, .returning { margin-top: 10px; }
.ivb-line .ui-link { display: inline-flex; align-items: center; min-height: 44px;
  width: auto; padding: 0; }
/* the quiet rule before the campaign road: fades out at both ends */
.ivb-hr { height: 1px; max-width: 520px; margin: 30px auto;
  background: linear-gradient(90deg, transparent, #443c56 22%, #443c56 78%, transparent); }
.retrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.retrow[hidden] { display: none; }   /* flex defeats hidden — the documented trap */
.keyrow { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.keyrow[hidden] { display: none; }
.keyin { background: #141422; border: 2px solid #262638; border-radius: 6px;
  font-family: var(--mono); font-size: var(--fs-body); color: var(--ink);
  padding: 8px 10px; width: min(240px, 60vw); }
.keyin:focus { outline: none; border-color: var(--ylw); }
/* the profile's season line (owner-approved mock, Aug 9): the panel's own
   grammar — labels gray, numbers gold, the timeframe faint */
.pseason { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #756f87; margin-top: 14px; }
.pseason .pw { color: #9a9996; }
.pseason .pv { color: var(--ylw); }
/* THE STABLE on the record books: one saved fighter per row */
.stb-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px;
  padding: 10px 14px; margin-top: 8px; }
.stb-row b { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: var(--ink); font-weight: normal; }
.stb-row span { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
/* the guidance lines: advice reads apart from the facts */
.wguide .g-tip { border-left: 3px solid var(--grn); background: rgba(38, 162, 105, .07);
  padding: 8px 12px; border-radius: 0 6px 6px 0; }
.wguide .g-tip b { color: var(--grn); }
.wguide .g-tip i { font-style: italic; }
/* the gym's footer link to it: one quiet line that stays one line */
.fineline { text-align: center; margin-top: 18px; }
.fineline a.ui-link { display: inline-block; white-space: nowrap; color: var(--dim);
  font-family: var(--mono); font-size: var(--fs-small); cursor: pointer; }
.fineline a.ui-link:hover { color: var(--cyan); }

/* closed / error screens */
.wars-closed { text-align: center; padding-top: 100px; font-family: var(--mono); font-size: var(--fs-body); color: var(--dim); }
.wars-closed .big { font-family: var(--pixel); font-size: var(--fs-page); color: var(--ylw); margin-bottom: 14px; }

/* ── gym V1 revision (owner pick): condition lives on the fighter card, the
   ring is three tiles in training's family, THE WAR sits two-up ─────────── */
.fcard .fgrp { margin-top: 14px; padding-top: 12px; border-top: 1px solid #20202f; }
.ringtiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.rt { background: #141422; border: 2px solid #262638; border-radius: 8px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
.rt .tn { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--ink); letter-spacing: 1px; }
.rt .td { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); line-height: 1.35; flex: 1; }
.rt .ts { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--grn); letter-spacing: 1px; }
.rt .tp { font-family: var(--mono); font-size: var(--fs-small); color: #756f87; }
.rt.lk { opacity: .6; cursor: default; }
.rt.lk .ts { color: #756f87; }
.rt-div { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  border-top: 1px solid #443c56; margin-top: 6px; padding-top: 10px; }
/* the corner's notes on the spar verdict */
.cnotes { margin: 10px auto 0; max-width: 460px; text-align: left;
  background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px; padding: 10px 14px; }
.cn-h { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #99c1f1; margin-bottom: 6px; }
.cn-l { font-family: var(--mono); font-size: var(--fs-small); color: #deddda;
  line-height: 1.5; }
/* ── THE PARTS DESK (owner pick, Aug 10: stock cards + the category filter).
   The card carries its name, then ONE row of rarity / price / stock, then the
   button. Keeping that row single is what keeps the cards short. ── */
.pd-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  justify-content: space-between; margin-bottom: 10px; }
.pd-next { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #8796ab; }
.pd-next b { color: var(--gold, #f6d32d); font-weight: normal; }
.pd-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* the same 44px tap floor the inventory chips carry: a chip is a control */
.pd-tools .chip { cursor: pointer; min-height: 44px; }
.pd-tools .chip.on { color: #0a0a12; background: #99c1f1; border-color: #99c1f1; }
/* THE DESK, TIGHTENED (owner, Aug 12). Six pieces used to take four lines and
   a button the size of a door each, 410px of screen for what is really six
   prices. The price is the loud thing now and BUY is a button beside it, which
   halves the height and puts the question the player came to answer on top. */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 7px; }
.pd-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 9px 10px; border-left: 3px solid #4a5568; }
.pd-card.rare { border-left-color: #99c1f1; background: linear-gradient(#232038, #1c1829); }
.pd-card.epic { border-left-color: #dc8add; }
.pd-card.out { opacity: .48; }
.pd-set { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #8796ab; }
.pd-set .rar { font-weight: normal; color: #9a9996; }
.pd-set .rar.rare { color: #99c1f1; }
.pd-set .rar.epic { color: #dc8add; }
.pd-nm { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-small);
  color: #deddda; line-height: 1.3; }
.pd-p { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--gold, #f6d32d); }
.pd-p .pd-left { font-style: normal; font-family: var(--mono); font-size: var(--fs-small);
  color: #8796ab; margin-left: 7px; }
.pd-p .pd-left.none { color: var(--red, #ff4d56); }
.pd-buy { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #0a0a12; background: #99c1f1; border: 0; border-radius: 4px; padding: 9px 14px;
  cursor: pointer; }
.pd-buy:hover { background: #b6d3f7; }
.pd-buy[disabled] { background: none; color: #8796ab; border: 1px solid #443c56; cursor: default; }
@media (max-width: 600px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-buy { min-height: var(--tap); }
}
.pd-lic { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); }

/* ── THE SPAR REPORT (owner pick B2, Aug 11) ─────────────────────────────
   A pop-up over the finished fight at 90% of the page width: the four figures
   across the top, then what worked / what did not / what to do as columns,
   then the signature. The house panel colours, not a set of its own. */
.repveil { position: fixed; inset: 0; z-index: 60; background: rgba(6, 6, 14, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.repbox { width: min(90%, 1116px); margin: auto; }
.srep { background: var(--panel); border: 2px solid #262638; border-radius: 8px;
  overflow: hidden; box-shadow: 0 20px 55px rgba(0, 0, 0, .6); text-align: left; }
.sr-band { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 13px 20px; background: rgba(255, 255, 255, .028);
  border-bottom: 1px solid #262638; }
.sr-t { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--gold, #f6d32d); letter-spacing: 2px; }
.sr-sub { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); margin-top: 4px; }
.sr-res { font-family: var(--pixel); font-size: var(--fs-micro); color: #0a0a12;
  background: var(--grn, #57e389); border-radius: 4px; padding: 6px 12px; letter-spacing: 1px; }
.sr-res.lost { background: var(--red, #ff4d56); color: #0a0a12; }
/* the four figures: the standouts, and the small print that gives each meaning */
.sr-figs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #262638; }
.sr-fig { padding: 16px 12px; text-align: center; border-right: 1px solid #1c1c2c; }
.sr-fig:last-child { border-right: 0; }
.sr-fig .v { font-family: var(--pixel); font-size: var(--fs-num); color: #ffffff; line-height: 1.15; }
.sr-fig .l { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }
.sr-fig .s { font-family: var(--mono); font-size: var(--fs-small); color: #5f5c6d; }
.sr-verdict { padding: 12px 20px; font-family: var(--mono); font-size: var(--fs-lead);
  color: var(--ink); border-bottom: 1px solid #262638; }
.sr-three { display: grid; grid-template-columns: repeat(3, 1fr); }
.sr-col { padding: 14px 18px; border-right: 1px solid #1c1c2c; }
.sr-col:last-child { border-right: 0; }
.sr-ch { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 2px;
  display: block; padding-bottom: 8px; border-bottom: 2px solid; margin-bottom: 10px; }
.sr-col.ok .sr-ch { color: var(--grn, #57e389); border-color: #26a269; }
.sr-col.no .sr-ch { color: var(--red, #ff4d56); border-color: #a51d2d; }
.sr-col.go .sr-ch { color: #62a0ea; border-color: #1a5fb4; }
/* the reading register: a report is read, so it is set to be read */
.sr-l { font-family: var(--mono); font-size: var(--fs-body); color: #cfcbd9; line-height: 1.45;
  margin-bottom: 12px; padding-left: 22px; position: relative; }
.sr-l:last-child { margin-bottom: 0; }
/* the marks are set in the reading face: the pixel face has no check or cross,
   and a fallback glyph at 9px reads as a speck */
.sr-l:before { position: absolute; left: 0; top: 0; line-height: 1.45;
  font-family: var(--mono); font-size: var(--fs-body); }
.sr-col.ok .sr-l:before { content: '\2713'; color: var(--grn, #57e389); }
.sr-col.no .sr-l:before { content: '\2717'; color: var(--red, #ff4d56); }
.sr-col.go .sr-l:before { content: '\2192'; color: #62a0ea; }
/* figures and package names carry the weight: this is a report, not prose */
.sr-nm { color: #ffffff; font-weight: normal; }
.sr-pk { color: #99c1f1; font-weight: normal; }
/* signed by whoever took the session */
.sr-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; padding: 14px 20px 16px; border-top: 1px solid #262638;
  background: rgba(0, 0, 0, .22); }
.sr-filed { font-family: var(--mono); font-size: var(--fs-small); color: #5f5c6d; line-height: 1.5; }
.sr-sig { text-align: right; min-width: 250px; }
.sr-scrawl { display: block; width: 220px; height: 58px; margin-left: auto; overflow: visible; }
.sr-scrawl path { fill: none; stroke: #e6e2f0; stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; opacity: .92; transform: skewX(-7deg); transform-origin: 120px 44px; }
.sr-rule { border-top: 1px solid #5c5670; margin: 2px 0 6px; }
.sr-name { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--ink); letter-spacing: 1px; }
.sr-role { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); margin-top: 4px; }
.sr-acts { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .repbox { width: 100%; }
  .sr-figs { grid-template-columns: repeat(2, 1fr); }
  .sr-fig { border-bottom: 1px solid #1c1c2c; }
  .sr-three { grid-template-columns: 1fr; }
  .sr-col { border-right: 0; border-bottom: 1px solid #1c1c2c; }
  .sr-foot { justify-content: flex-start; }
  .sr-sig { text-align: left; min-width: 0; }
  .sr-scrawl { margin-left: 0; }
}
.rt:hover, .rt:focus-visible { border-color: var(--grn); outline: none; }
@media (max-width: 600px) { .ringtiles { grid-template-columns: 1fr; } }
.war2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.war2 .cell { display: flex; flex-direction: column; gap: 8px; }
.war2 .w-btn { width: 100%; }
.war2 .navdesc { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); line-height: 1.35; }
@media (max-width: 600px) { .war2 { grid-template-columns: 1fr; } }
/* the manager's door to his own public page (owner, Aug 2026): the house
   .ui-link, centered under the nameplate */
.fprofile { display: flex; justify-content: center; margin-top: 4px; }

/* ── achievement toasts: the record of deeds announces itself ── */
.ach-toast { position: fixed; top: 72px; right: 18px; z-index: 100; max-width: 340px;   /* below the corner rail, above everything else (owner, Aug 8) */
  background: rgba(16, 18, 34, .96); border: 2px solid var(--cyan);
  border-radius: 10px; padding: 12px 16px; transform: translateX(120%); transition: transform .22s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.ach-toast.in { transform: translateX(0); }
.ach-toast .at-k { display: block; font-family: var(--pixel); font-size: var(--fs-nano);
  letter-spacing: 2px; color: var(--dim); }
.ach-toast .at-t { display: block; font-family: var(--pixel); font-size: var(--fs-label);
  color: var(--ink); margin-top: 6px; letter-spacing: 1px; }
.ach-toast .at-l { display: block; font-family: var(--mono); font-size: var(--fs-small);
  color: var(--dim); margin-top: 6px; line-height: 1.35; }
.ach-toast.rare { border-color: var(--ylw); }
.ach-toast.rare .at-t { color: var(--ylw); }
.ach-toast.epic { border-color: var(--mag); box-shadow: 0 0 22px rgba(224, 86, 200, .35), 0 6px 24px rgba(0, 0, 0, .5); }
.ach-toast.epic .at-t { color: var(--mag); }
@media (prefers-reduced-motion: reduce) { .ach-toast { transition: none; } }
@media (max-width: 480px) { .ach-toast { left: 12px; right: 12px; max-width: none; } }

/* ── achievements: the gym section (owner: A's wall + B's big count) ── */
.ach-b { position: relative; text-align: left; cursor: pointer; border: 1px solid #2c2e46; border-radius: 6px;
  padding: 8px 10px; background: #141625; min-height: 44px; }
.ach-b b { display: block; font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: var(--ink); line-height: 1.5; }
.ach-b span { display: block; font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  margin-top: 3px; line-height: 1.3; }
.ach-b.rare { border-color: var(--ylw); } .ach-b.rare b { color: var(--ylw); }
.ach-b.epic { border-color: var(--mag); box-shadow: 0 0 10px rgba(224, 86, 200, .25); } .ach-b.epic b { color: var(--mag); }
.ach-b .pin { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 14px; color: #2c2e46; }
.ach-b.pinned .pin { color: var(--ylw); }
.ach-b:hover { border-color: var(--cyan); }
/* the deeds card in the corner column (owner, Aug 9): the big count on
   top, one deed per row with its line — pins lead, then the rarest,
   then the newest */
.achcard { margin-top: 14px; }
.achcard .ach-big { font-family: var(--pixel); font-size: var(--fs-num); color: var(--ylw);
  text-align: center; margin-top: 8px; }
.achcard .ach-big small { display: block; font-family: var(--pixel); font-size: var(--fs-nano);
  color: var(--dim); margin-top: 4px; letter-spacing: 2px; }
.achcard .ach-rows { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 8px; }
.achcard .ach-r { width: 100%; padding-right: 28px; }
.achcard .ach-full { display: inline-flex; align-items: center; min-height: 44px;
  width: auto; padding: 0; }
.achcard .ach-note { margin-top: 2px; }
.ach-err { color: var(--red); }
/* the public profile: showcase strip + the record grouped by rarity */
.pshow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pshow .ach-b { cursor: default; max-width: 260px; }
.prar { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 2px; margin-top: 14px; }
.prar.epic { color: var(--mag); } .prar.rare { color: var(--ylw); } .prar.common { color: var(--cyan); }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
@media (max-width: 720px) { .pgrid { grid-template-columns: 1fr 1fr; } }
.pgrid .ach-b { cursor: default; }

.sv-shelf { margin-top: 10px; }

/* the week's bulletin: five lines on the war panel, checks fill in as the
   deeds land */
.blt { margin: 10px 0 12px; padding: 10px 12px; background: rgba(255,77,86,.05);
  border: 1px solid rgba(255,77,86,.25); border-radius: 6px; }
.blt-h { font-family: var(--pixel); font-size: 11px; letter-spacing: 1px;
  color: var(--red); margin-bottom: 8px; }
.blt-h span { color: var(--ylw); margin-left: 6px; }
/* challenge rows flow as sentences (owner, Aug 9: the flex columns left
   one-word lines) — the marker hangs, the text wraps the full width */
.blt-r { display: block; font-family: var(--mono); font-size: var(--fs-small);
  line-height: 1.5; color: #8796ab; padding-left: 22px; text-indent: -22px;
  margin-bottom: 4px; }
.blt-r.on { color: #cfe3d2; }
.blt-m { display: inline; color: inherit; margin-right: 6px; }
.blt-r.on .blt-m { color: var(--grn); }
.blt-n { display: inline; color: inherit; font-weight: bold; margin-right: 4px; }
.blt-l { display: inline; }
.blt-f { margin-top: 6px; }

/* the card race (owner pick C): tier strip, summary line, cutlines, weekly
   points riding each row */
/* the race gauge (owner pick C, do-over approved Aug 9): one rail, the
   division lines standing ABOVE the fill so they read full or empty, the
   YOU pin above the rail, tier names below it. The header slots around it
   are height-reserved so switching divisions never moves the board. */
.cb-head { display: flex; align-items: baseline; gap: 12px; min-height: 30px; }
.cb-head .w-h { margin: 0; }
.cb-status { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  min-height: 44px; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cb-status .ui-link { display: inline-flex; align-items: center; min-height: 44px;
  width: auto; padding: 0; color: var(--cyan); }
.gau { margin: 8px 0 4px; padding-top: 36px; }
.gau .railbox { position: relative; height: 16px; background: #171226;
  border: 1px solid #3a3453; border-radius: 8px; }
.gau .fill { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
  background: linear-gradient(90deg, #26a269, #f6d32d); border-radius: 8px 0 0 8px; }
.gau .tick { position: absolute; top: -5px; bottom: -5px; width: 2px; z-index: 3;
  background: #756f87; }
.gau .pin { position: absolute; top: -34px; z-index: 4; transform: translateX(-50%);
  font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #171226;
  background: var(--ylw); border-radius: 4px; padding: 5px 8px; white-space: nowrap; }
.gau .pin::after { content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ylw); }
.gau .lbls { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 9px; }
.gau .lbls span { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #756f87; }
.gau .lbls span.done { color: var(--grn); }
.gau .lbls span.now { color: var(--ylw); }
.gau .under { margin-top: 8px; font-family: var(--mono); font-size: var(--fs-small);
  color: #9a9996; min-height: 20px; }
.gau .under b { color: var(--grn); font-weight: normal; }
/* phones: the rail is too narrow for four names — endpoints + where you
   stand carry it; the full ladder reads on wide screens */
@media (max-width: 520px) {
  .gau .lbls { display: flex; justify-content: space-between; }
  .gau .lbls span { display: none; letter-spacing: 0; }
  .gau .lbls span.now, .gau .lbls span:first-child, .gau .lbls span:last-child { display: block; }
}
/* the manager level: the permanent bar under the masthead */
.lvlline { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.lv-n { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw); letter-spacing: 1px; white-space: nowrap; }
.lv-bar { flex: 1 1 auto; min-width: 0; height: 8px; border: 1px solid rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .08); }
.lv-bar i { display: block; height: 100%; background: var(--ylw); }
.lv-x { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); white-space: nowrap; }
.lv-c { font-family: var(--mono); font-size: var(--fs-small); color: var(--cyan); white-space: nowrap; }
.rt[disabled] { opacity: .45; cursor: not-allowed; }
/* the inventory overlay: the owner's chat-style window off the salvage desk */
.inv-veil { position: fixed; inset: 0; background: rgba(9, 9, 17, .88); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.inv-win { width: min(680px, 100%); max-height: 86vh; display: flex; flex-direction: column; }
.inv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.inv-head .w-eyebrow { flex: 1 1 auto; }
.inv-gauge { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ylw); white-space: nowrap; }
.inv-x { font-size: 16px; min-width: 44px; min-height: 44px; }
.inv-list { overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.inv-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px;
  border: 1px solid rgba(120, 130, 160, .25); }
.inv-row.rare { border-color: rgba(80, 200, 255, .35); }
.inv-row.epic { border-color: rgba(255, 80, 220, .4); }
.inv-n { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); grid-column: 1 / -1; }
.inv-meta { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); }
.inv-acts { display: flex; gap: 10px; align-items: center; justify-self: end; }
.inv-acts .ui-link { min-height: 44px; }
.inv-acts .ui-link[disabled] { opacity: .35; pointer-events: none; }
.inv-soon { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); opacity: .7; white-space: nowrap; }
/* the trading desk inside the inventory */
.inv-desk { border: 1px dashed rgba(120, 130, 160, .3); padding: 10px; margin-top: 10px; }
.inv-deskhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.inv-trade { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px dashed rgba(120, 130, 160, .18); flex-wrap: wrap; }
.inv-trade.settled { opacity: .6; }
.tr-to { width: 100%; margin: 4px 0 10px; background: rgba(9, 9, 17, .6); border: 1px solid rgba(120, 130, 160, .35);
  color: var(--ink); font-family: var(--mono); font-size: var(--fs-small); padding: 10px; min-height: 44px; }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-cols select { width: 100%; margin-top: 8px; background: rgba(9, 9, 17, .6); border: 1px solid rgba(120, 130, 160, .35);
  color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); padding: 8px; min-height: 44px; }
.tr-give, .tr-want { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tr-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid rgba(120, 130, 160, .3); padding: 6px 8px; font-family: var(--mono);
  font-size: var(--fs-small); color: var(--ink); }
.tr-chip .tr-rm { min-width: 32px; min-height: 32px; }
@media (max-width: 560px) { .tr-cols { grid-template-columns: 1fr; } }
/* the build sheet: the blurb above the timeline */
.bs-blurb { margin-bottom: 14px; line-height: 1.5; }
.led .l2.raid { color: var(--red); }
@media (max-width: 520px) { .inv-acts { justify-self: start; } }
.board .row.race { grid-template-columns: 34px 44px 1fr 48px 64px 100px 104px; }
/* the column headings — the board reads like the table it is */
.cb-cols { display: grid; grid-template-columns: 34px 44px 1fr 48px 100px 104px; gap: 10px;
  padding: 0 13px; margin: 8px 0 6px; font-family: var(--pixel); font-size: var(--fs-nano);
  letter-spacing: 1px; color: #756f87; }
.cb-cols.race { grid-template-columns: 34px 44px 1fr 48px 64px 100px 104px; }
.cb-cols span { text-align: right; }
.cb-cols .h-f { text-align: left; }
.cb-cols .h-sort { color: var(--ylw); }
.board .row .w-btn { width: 100%; text-align: center; }
.board .row .stat { width: 100%; }
@media (max-width: 520px) { .cb-cols { display: none; } }
.board .wkpts { font-family: var(--pixel); font-size: var(--fs-label); color: var(--dim); text-align: right; }
.board .wkpts.up { color: #4ade80; }
.board .wkpts.down { color: var(--red); }
.cutline { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.cutline i { flex: 1; border-top: 2px solid; }
.cutline span { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; }
.cut-up i { border-color: rgba(255, 210, 63, .7); } .cut-up span { color: var(--ylw); }
/* the jump between the leaders and your own neighbourhood: a quiet dashed
   line, not a milestone — it marks names left out, not a rule */
.cut-gap i { border-top: 1px dashed #443c56; } .cut-gap span { color: #7d7791; }
@media (max-width: 480px) { .board .row.race { grid-template-columns: 24px 40px 1fr auto auto; } }

/* ═════════════════════════════════════════════════════════════════════════
   THE DESKTOP (owner pick, Aug 7 2026): the WARS identity. A retro Linux
   desktop: panels are windows, GNOME blue does the work, reading text runs
   at a 20px floor, notification bars are borderless tints (the rounding
   law: when a bar holds a rounded button, the bar itself goes borderless).
   This layer re-dresses the classes above; structure stays put. It covers
   every wars surface: the gym, the boards, the profile, the guide, the
   overlays. Fine-tuning happens live with the owner after the pull.
   ══════════════════════════════════════════════════════════════════════ */
#app.wars { width: min(1354px, 100%); background: #241f31; }
.wars-wrap, .pf-box, .inv-veil .inv-win, .set-win {
  --fs-small: 20px;   /* the readability ruling: the reading floor */
}
.wars-wrap { max-width: 1280px; }

.w-panel { background: #302b3d; border: 1px solid #443c56; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.warnav { border-color: #5a3a44;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 0 26px rgba(237, 51, 59, .05); }
.warnav .w-eyebrow { color: #ed333b; text-shadow: none; background: none; padding: 0; margin: 0; }
.w-sub { color: #9a9996; }
.w-eyebrow { color: #99c1f1; text-shadow: none; }
.w-h { color: #deddda; }
.w-chip { background: #1f1b2e; color: #f6d32d; border: 1px solid #443c56; border-radius: 4px; }
.w-btn { background: #3584e4; color: #ffffff; border-radius: 6px; box-shadow: none; }
.w-btn:hover { background: #478fe6; filter: none; }
.w-btn.ghost { background: #443c56; color: #deddda; border: 0; }
.w-btn.ghost:hover { background: #524963; }
.w-btn.rev, .w-btn.red { background: #613583; color: #ffffff; border: 0; }
.ui-link { color: #99c1f1; }
.wars-head .eyebrow { color: #99c1f1; }
.wars-head .marque { color: #f6d32d; text-shadow: none; }
.lvlline .lv-n { color: #f6d32d; }
.lv-bar { border-color: rgba(246, 211, 45, .5); background: #1b1626; border-radius: 99px; overflow: hidden; }
.lv-bar i { background: #f6d32d; }
.lv-c { color: #99c1f1; }

/* tiles: training, salvage, ring — windows in miniature */
.sess .st, .svrun .st { background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px; }
.sess .st:hover, .svrun .st:hover { border-color: #62a0ea; }
.svrun .st.run, .sess .st.run { border-color: #f6d32d; }
.svrun .st.done, .sess .st.done { border-color: #57e389; }
.rt { background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px; }
.rt:hover { border-color: #62a0ea; }

/* the loadout terminal + the Reach: as dark as each other (owner merge) */
.term { background: #16121f; border: 1px solid #443c56; border-radius: 8px; }
.chatui { background: #16121f; }
.ch-scroll::-webkit-scrollbar-thumb { background: #443c56; }

/* boards, rows, overlays */
.board .row { background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px; }
.board .row.me { border-color: #f6d32d; }
.classtabs .ct { border: 1px solid #443c56; border-bottom: 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(#28233a, #1f1b2e); }
.classtabs .ct:hover { background: linear-gradient(#332d48, #262133); }
.classtabs .ct.on { background: #302b3d; color: #deddda; margin-bottom: -1px;
  border-bottom: 1px solid #302b3d; box-shadow: inset 0 3px 0 #3584e4; }
.inv-veil { background: rgba(20, 16, 33, .88); }
.inv-win { border-radius: 8px; }
.inv-row2, .inv-row { background: #1f1b2e; border-color: #443c56; border-radius: 8px; }
.pf-veil { background: rgba(20, 16, 33, .88); }
.cw-band { background: rgba(20, 16, 33, .92); }

/* ── the tab shell: GTK2 notebook tabs (structure lands with the shell) ── */

/* THE PHONE SHELL (owner #59): under 600px the tab strip folds into one bar —
   the tab you stand on, and a menu that drops the full list */
.dz-mob { display: none; }
@media (max-width: 600px) {
  nav.dz-tabs { display: none; }   /* outweighs the base rule below regardless of order */
  .dz-mob { display: block; position: relative; margin: 0 0 14px; }
  .dz-cur { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px;
    font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: .5px;
    background: #302b3d; color: #deddda; border: 1px solid #443c56; border-radius: 8px;
    padding: 0 12px; cursor: pointer; }
  .dz-ham { margin-left: auto; display: inline-flex; flex-direction: column; gap: 3px; }
  .dz-ham i { width: 16px; height: 2px; background: #9a9996; }
  .dz-ham-t { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
  .dz-sheet { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
    background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px; overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
  .dz-sheet .dz-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px;
    padding: 0 14px; font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: .5px;
    color: #b9b4c7; text-decoration: none; border: 0; border-bottom: 1px solid #2c273b;
    background: none; cursor: pointer; text-align: left; }
  .dz-sheet .dz-row.on { background: #302b3d; color: #deddda; }
  .dz-sheet .dz-row:last-child { border-bottom: 0; }
  /* the level line wraps instead of pushing the page wide */
  .lvlline { flex-wrap: wrap; row-gap: 6px; }
  .lvlline .lv-bar { flex: 1 1 100%; order: 10; }
}
.dz-tabs { display: flex; gap: 2px; align-items: flex-end; border-bottom: 1px solid #443c56;
  flex-wrap: wrap; margin: 4px 0 18px; }
/* compacted (owner, Aug 8 night): shorter names carry most of the trim;
   tighter padding and spacing do the rest, so seven tabs sit easy */
.dz-tabs .dz-tab { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: .5px;
  color: #9a9996; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 11px; white-space: nowrap; text-decoration: none;
  background: linear-gradient(#28233a, #1f1b2e); border: 1px solid #443c56; border-bottom: 0;
  border-radius: 6px 6px 0 0; }
.dz-tabs .dz-tab:hover { background: linear-gradient(#332d48, #262133); color: #deddda; }
.dz-tabs .dz-tab.on { background: #302b3d; color: #deddda; margin-bottom: -1px;
  border-bottom: 1px solid #302b3d; box-shadow: inset 0 3px 0 #3584e4; }
/* the one reference gets the one loud color (owner, Aug 9): green, so the
   people who need it actually see it */
.dz-tabs .tb-help { margin-left: auto; background: none; border: 0; color: var(--grn); cursor: pointer;
  font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 1px; min-height: 44px; }
.dz-tabs .tb-help:hover { color: #8ff0b4; }
.tabpane[hidden] { display: none; }

/* ── the persistent corner: [gear] [sound] ─────────────────────────────── */
.corner-rail { position: fixed; top: 14px; right: 16px; z-index: 90; display: flex; gap: 8px; }
.corner-rail .snd-corner, .corner-rail .wars-snd { position: static; }
.gear-corner { min-width: var(--tap); min-height: var(--tap); background: #302b3d;
  border: 1px solid #443c56; border-radius: 8px; color: #99c1f1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.gear-corner:hover { border-color: #62a0ea; }
/* the music note wears the gear's coat so the rail reads as one control strip */
.note-corner { min-width: var(--tap); min-height: var(--tap); background: #302b3d;
  border: 1px solid #443c56; border-radius: 8px; color: #99c1f1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.note-corner:hover { border-color: #62a0ea; }
.note-corner[aria-expanded="true"] { border-color: var(--cyan); color: var(--cyan); }

/* THE PLAYER: a small bar under the note. Fixed, right-anchored to the button
   so it can never run off a narrow screen. */
.mus-pop { position: fixed; z-index: 95; min-width: 232px; max-width: calc(100vw - 24px);
  background: #10101c; border: 2px solid #443c56; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.mus-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-family: var(--mono); font-size: var(--fs-small); padding: 2px 0; }
.mus-l { color: var(--dim); }
.mus-n { color: var(--cyan); font-weight: normal; overflow-wrap: anywhere; }
.mus-n.dim { color: var(--fg); }
.mus-btns { display: flex; gap: 8px; margin-top: 9px; }
.mus-b { flex: 1 1 auto; font: inherit; font-size: var(--fs-small); letter-spacing: .05em;
  padding: 6px 10px; cursor: pointer; color: var(--cyan); background: transparent;
  border: 1px solid var(--cyan); border-radius: 4px; min-height: var(--tap); }
.mus-b:hover { background: rgba(52, 214, 230, .1); }
.mus-b[disabled] { color: var(--dim); border-color: #443c56; cursor: default; }
.mus-b[disabled]:hover { background: transparent; }
/* the reason for silence reads as a note, not as a song title */
.mus-n.why { color: var(--ylw); font-size: var(--fs-small); }
.mus-take { margin-top: 8px; width: 100%; }

/* ── settings: THE CONTROLS window ─────────────────────────────────────── */
/* THE CONFIRM (owner bug, Aug 13): the are-you-sure box for training and
   sparring shipped with no stylesheet of its own, so it landed unstyled in
   the corner of the browser with its rows run together. It is a centered
   window like the settings panel, and it carries the same title bar as every
   other window in the gym. */
.gm-veil { position: fixed; inset: 0; background: rgba(20, 16, 33, .88); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
/* the briefing can run a paragraph, so the window scrolls inside itself
   rather than growing off the top and bottom of a phone */
.gm-win { width: min(440px, 100%); max-height: calc(100vh - 36px); overflow: auto; }
.gm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gm-title { font-family: var(--pixel); font-size: var(--fs-head); color: var(--ink);
  letter-spacing: 1px; margin-top: 6px; }
.gm-x { width: auto; min-width: 44px; padding: 8px 12px; }
.gm-rows { margin-top: 14px; }
.gm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  border-bottom: 1px dashed #443c56; padding: 8px 0; }
.gm-row:last-child { border-bottom: 0; }
.gm-row b { color: var(--ink); font-weight: normal; text-align: right; }
.gm-body { margin-top: 12px; font-family: var(--mono); font-size: var(--fs-small);
  color: var(--dim); line-height: 1.55; }
/* what this partner is, before the general briefing under it */
.gm-body .gm-what { color: var(--ink); margin: 0 0 10px; }
.gm-body .gm-what b { color: var(--ylw); font-weight: normal; }
.gm-acts { display: flex; gap: 10px; margin-top: 18px; }
.gm-acts .w-btn { flex: 1 1 0; }

.set-veil { position: fixed; inset: 0; background: rgba(20, 16, 33, .88); z-index: 110;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.set-win { width: min(560px, 100%); background: #302b3d; border: 1px solid #443c56;
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .55); padding: 52px 18px 18px;
  position: relative; }
.set-win::before { content: "settings"; position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: #1f1b2e; border-bottom: 1px solid #443c56; border-radius: 8px 8px 0 0;
  font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  display: flex; align-items: center; padding-left: 64px; }
.set-win::after { content: ""; position: absolute; top: 13px; left: 14px; width: 12px; height: 12px;
  border-radius: 50%; background: #ed333b; box-shadow: 18px 0 0 #f8e45c, 36px 0 0 #57e389; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px dashed #443c56; }
.set-row .sr-t { font-family: var(--mono); font-size: var(--fs-small); color: #deddda; }
.set-row .sr-d { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
/* the migration desk quotes its price inline; a purse that cannot meet it says so */
.set-row .sr-fee { color: #d5c27a; font-weight: normal; }
.set-row .sr-fee.short { color: var(--red); }
.set-row .sr-v, .set-row select { background: #1f1b2e; border: 1px solid #443c56; border-radius: 6px;
  color: #99c1f1; font-family: var(--pixel); font-size: var(--fs-micro); padding: 10px 12px;
  min-height: 44px; cursor: pointer; letter-spacing: 1px; }

/* ── BUILD 2 · THE GYM page (the approved mock, made real) ─────────────── */
/* one chip grammar for every state */
.chip { display: inline-flex; align-items: center; font-family: var(--pixel); font-size: var(--fs-micro);
  letter-spacing: 1px; padding: 6px 9px; border: 1px solid #443c56; border-radius: 4px;
  background: #1f1b2e; white-space: nowrap; }
.chip.free { color: #57e389; }
.chip.cost { color: #99c1f1; }
.chip.run  { color: #f6d32d; }
.chip.done { color: #0a0a12; background: #f6d32d; border-color: #f6d32d; }

/* the window chrome: titlebar printed from data-win, with the three lights */
/* scoped to the panel form: the arcade stage shares this page now, and its
   KO banner also says class=win — bare .win would hang a titlebar on it */
.w-panel.win { position: relative; padding-top: 52px; }
.w-panel.win::before { content: attr(data-win); position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: #1f1b2e; border-bottom: 1px solid #443c56; border-radius: 8px 8px 0 0;
  font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  display: flex; align-items: center; padding-left: 64px; }
.w-panel.win::after { content: ""; position: absolute; top: 13px; left: 14px; width: 12px; height: 12px;
  border-radius: 50%; background: #ed333b; box-shadow: 18px 0 0 #f8e45c, 36px 0 0 #57e389; }

/* the state of play: borderless tinted bar, the button carries the shape */
.state-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #37311f; border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; }
.state-strip .t { flex: 1 1 300px; min-width: 0; }
.state-strip .e { font-family: var(--pixel); font-size: var(--fs-micro); color: #f6d32d; letter-spacing: 2px; }
.state-strip .l { font-family: var(--mono); font-size: var(--fs-small); color: #deddda; margin-top: 6px; line-height: 1.5; }
.state-strip .l b { color: #f6d32d; font-weight: normal; }
.state-strip .w-btn { flex: 0 0 auto; }

/* training: rows, not tiles — chip right, facts under, progress while it runs */
/* two abreast where there is room (owner, Aug 13): four sessions in a single
   column left half the width of the page empty. Below 700px they stack. */
.sess { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .sess { grid-template-columns: 1fr; } }
/* start, not center: side by side the tiles are as tall as the tallest, and a
   description that happens to fit on one line floated to the middle of its box
   while its neighbour's sat at the top (owner, Aug 13) */
.sess .st { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px;
  align-items: start; align-content: start; padding: 12px 14px; }
.sess .st .tn { font-family: var(--pixel); font-size: var(--fs-micro); color: #deddda; letter-spacing: 1px; }
.sess .st .tact { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; }
/* a short action ($50, FREE TODAY) rides beside the name. A long one does not:
   at half width DONE AND TAP TO COLLECT squeezed the title onto two lines and
   the description onto three, so those states take a row of their own. */
.sess .st.done .tact, .sess .st.run .tact {
  grid-column: 1 / -1; grid-row: auto; margin-top: 4px; }
.sess .st.done .tact > *, .sess .st.run .tact > * { width: 100%; text-align: center; }
.sess .st .td { grid-column: 1; font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
.sess .st .prog { grid-column: 1 / -1; height: 7px; background: #141021; border-radius: 99px;
  overflow: hidden; margin-top: 6px; border: 1px solid #443c56; }
.sess .st .prog i { display: block; height: 100%; background: #f6d32d; }

/* the ring: rows with the book per partner */
.ringtiles { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* the three in your corner read as one decision, so they sit side by side.
   The hiring desk under them stays a column: a divider and a line of names
   further up have no business in a three-column grid (owner, Aug 13). */
.rt-mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* a third of the width cannot carry name, record and action on one line, so
   the tile stacks: the name owns its row, the record and the action share the
   next, and everything else runs full width underneath. */
/* text-align is stated here because a locked tile is a disabled <button> and
   was picking up the browser's centred default while its unlocked neighbour
   read left, so the three did not line up with each other */
.rt-mine .rt { grid-template-columns: minmax(0, 1fr) auto; align-content: start;
  row-gap: 6px; text-align: left; }
.rt-mine .rt .tn { grid-column: 1 / -1; }
/* the record and the status each get a full row: OPENS AT LEVEL 15 will not
   share a line with a record at a third of the width, and it overlapped it */
.rt-mine .rt .rr { grid-column: 1 / -1; }
.rt-mine .rt .ts { grid-column: 1 / -1; text-align: left; }
.rt-mine .rt .td, .rt-mine .rt .tp, .rt-mine .rt .pays { grid-column: 1 / -1; }
@media (max-width: 900px) { .rt-mine { grid-template-columns: 1fr; } }
.rt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center;
  padding: 12px 14px; text-align: left; cursor: pointer; }
.rt .tn { font-family: var(--pixel); font-size: var(--fs-micro); color: #deddda; letter-spacing: 1px; }
.rt .rr { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; white-space: nowrap; }
.rt .rr b { color: #deddda; font-weight: normal; }
.rt .ts { font-family: var(--pixel); font-size: var(--fs-micro); color: #99c1f1; letter-spacing: 1px; }
.rt .td { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
.rt[disabled] { opacity: .45; cursor: not-allowed; }
/* the advanced corner: the price line spans the row; a LOCKED tile stays
   readable — it is a signpost, not a dead control */
.rt .tp { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-small); color: #756f87; }
.rt.lk, .rt.lk[disabled] { opacity: .8; cursor: default; }
.rt.lk:hover { border-color: #443c56; }
.rt.lk .tn { color: #9a9996; }
/* the hiring desk rows */
.rt.hire { cursor: default; }
/* THE NEXT ONE UP (owner pick, Aug 10): the nearest locked specialist keeps a
   card and says what it teaches; the rest fold into one line below. The lesson
   spans the row like every other full-width part of this grid, and carries its
   own space above so it reads as a sentence, not a squeezed caption. */
.rt.rt-next { border-color: #7a5c00; opacity: 1; }
.rt.rt-next .ts { color: #f6d32d; }
.rt.rt-next .tn { color: #deddda; }
.rt .sp-lesson { grid-column: 1 / -1; margin: 6px 0 2px; font-family: var(--mono);
  font-size: var(--fs-body); color: #deddda; line-height: 1.45; }
.rt-more { font-family: var(--mono); font-size: var(--fs-small); color: #8796ab;
  line-height: 1.6; border: 1px dashed #3a3448; border-radius: 8px;
  padding: 11px 14px; margin-top: 8px; }
.rt-more b { color: #9a9996; font-weight: normal; }
.rt-more .mlist { color: #6b6580; }
.rt.hire:hover { border-color: #443c56; }
.rt .hire-go { font-size: var(--fs-nano); padding: 6px 12px; justify-self: end; }
.rt .swaprow { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
.rt .swaprow[hidden] { display: none; }   /* flex defeats hidden — the documented trap */
.rt .swaprow .w-btn { font-size: var(--fs-nano); padding: 6px 10px; }

/* the collect payoff: the gain lands green on the bar that moved */
.gainflash { font-family: var(--pixel); font-size: var(--fs-nano); color: #57e389; font-style: normal;
  animation: dfgain 3s ease-out forwards; }
@keyframes dfgain { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gainflash { animation: none; } }

/* the trophy strip; the wall opens on demand */

/* the room: chatbox header bar + the pinned circuit count */
.chatui { background: #16121f; border: 1px solid #443c56; }
.ch-head { background: #1f1b2e; border-bottom: 1px solid #443c56; margin: -10px -12px 8px;
  padding: 10px 12px; border-radius: 8px 8px 0 0; }
.ch-pin { color: #d7f3de; border-bottom: 1px dashed rgba(74, 222, 128, .35);
  padding-bottom: 8px; margin-bottom: 8px; }

/* ── BUILD 3 · THE WAR page: one workspace, everything in the fight ────── */
.war-grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.war-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.war-side .w-panel { margin-top: 0; }
.war-main { min-width: 0; }
.wsec-h { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.schal-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.seasonline .nowrap { white-space: nowrap; }
.schal-h .w-eyebrow { color: #ed333b; }
.schal-set { font-family: var(--pixel); font-size: var(--fs-micro); color: #f6d32d; letter-spacing: 1px; }
.wyo-holder:empty { display: none; }
.wyo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #3d2129; border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; }
.wyo .t { flex: 1 1 300px; min-width: 0; }
.wyo .e { font-family: var(--pixel); font-size: var(--fs-micro); color: #ed333b; letter-spacing: 2px; }
.wyo .l { font-family: var(--mono); font-size: var(--fs-small); color: #deddda; margin-top: 6px; line-height: 1.5; }
.wyo .l b { color: #f6d32d; font-weight: normal; }
.circ-holder .w-panel { margin-top: 0; }
/* an unlicensed manager gets two panels here, the commission's card and the
   board under it, and the rule above had them sharing an edge */
.circ-holder .w-panel + .w-panel { margin-top: 14px; }
/* the board/book switch: notebook tabs in miniature (owner, Aug 7) */
.war-tabs { display: flex; gap: 2px; align-items: flex-end; border-bottom: 1px solid #443c56;
  margin-bottom: 14px; }
.war-tabs .wt { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 1px;
  color: #9a9996; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; background: linear-gradient(#28233a, #1f1b2e); border: 1px solid #443c56;
  border-bottom: 0; border-radius: 6px 6px 0 0; }
.war-tabs .wt:hover { background: linear-gradient(#332d48, #262133); color: #deddda; }
.war-tabs .wt.on { background: #302b3d; color: #deddda; margin-bottom: -1px;
  border-bottom: 1px solid #302b3d; box-shadow: inset 0 3px 0 #3584e4; }
.circ-holder[hidden], .led-holder[hidden] { display: none; }
/* the unread dot: something on this tab has not been looked at */
.tabdot { width: 9px; height: 9px; border-radius: 50%; background: #ed333b;
  display: inline-block; margin-left: 8px; flex: none;
  box-shadow: 0 0 6px rgba(237, 51, 59, .6); }
.tabdot[hidden] { display: none; }
.led-holder .headline { font-family: var(--mono); font-size: var(--fs-small); color: #deddda;
  margin-bottom: 10px; line-height: 1.5; }
.led-holder .headline b { color: #f6d32d; font-weight: normal; }
@media (max-width: 1000px) { .war-grid { grid-template-columns: 1fr; } }

/* ── BUILD 4 · THE SALVAGE RUN page: jobs priced like jobs, the haul as a
   strip, the inventory inline with the locker worked in ────────────────── */
.salv-intro { margin-bottom: 14px; line-height: 1.5; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 0; }
.jobs .job { display: flex; padding: 52px 0 0; background: #302b3d; overflow: hidden; cursor: pointer; }
.jobs .job.off { cursor: default; }
.jobs .job.run { cursor: default; }
.jobs .job .depth { width: 14px; flex: none; position: relative; background: #1f1b2e;
  border-right: 1px solid #443c56; }
.jobs .job .depth i { position: absolute; left: 0; right: 0; top: 0; background: #3584e4; }
.jobs .job.d1 .depth i { height: 22%; }
.jobs .job.d2 .depth i { height: 55%; }
.jobs .job.d3 .depth i { height: 100%; background: #ed333b; }
.jobs .job .body { flex: 1; min-width: 0; padding: 14px 16px 16px; display: flex;
  flex-direction: column; gap: 10px; }
.jobs .job h3 { font-family: var(--pixel); font-size: var(--fs-label); letter-spacing: 1px;
  margin: 0; color: #deddda; }
.jobs .job .fact { display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; padding: 4px 0;
  border-bottom: 1px dashed #443c56; }
.jobs .job .fact b { font-weight: normal; color: #deddda; }
.jobs .job .fact.risk b { color: #ed333b; }
.jobs .job .fact.pay b { color: #f6d32d; }
.oddsbar { display: flex; height: 9px; overflow: hidden; background: #1f1b2e;
  border: 1px solid #443c56; border-radius: 99px; }
.oddsbar .c { background: #5e5c64; }
.oddsbar .r { background: #3584e4; }
.oddsbar .e { background: #dc8add; }
.jobs .job .note { font-family: var(--mono); font-size: var(--fs-small); line-height: 1.45;
  color: #9a9996; margin-top: 6px; }
.jobs .job.d3 .note b { color: #dc8add; font-weight: normal; }
.jobs .job .go { margin-top: auto; align-self: flex-start; }
.haul-slot:empty { display: none; }
.haul { background: #22301f; border-radius: 6px; padding: 12px 16px; margin-top: 14px;
  font-family: var(--mono); font-size: var(--fs-small); color: #deddda; line-height: 1.6; }
.haul b { font-weight: normal; color: #57e389; }
.haul .rar { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #9a9996; }
.haul .rar.rare { color: #99c1f1; }
.haul .rar.epic { color: #dc8add; }
.haul.hurt { background: #3d2129; }
.inv-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.inv-tools .chip { cursor: pointer; min-height: 44px; }
.inv-tools .chip.on { color: #0a0a12; background: #99c1f1; border-color: #99c1f1; }
.inv-tools .lk { margin-left: auto; font-family: var(--pixel); font-size: var(--fs-micro);
  letter-spacing: 1px; color: #f6d32d; }
/* ── THE RACK AND THE LOOSE SHELF (owner, Aug 12) ────────────────────────
   The shelf used to be one full-width row a relic, so ten relics filled a
   desktop screen and a half with two thirds of every row empty. It is two
   things now: the locker drawn as the ten slots it actually is, worth first,
   and the loose relics as cards in a grid. Measured on fourteen relics at
   1280: 1336px before, 415px of cards plus a 173px rack after. */
.lk-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.lk-head.loose { margin-top: 18px; }
.lk-c { font-family: var(--mono); font-size: var(--fs-small); color: #8796ab; }
.lk-c b { color: #57e389; font-weight: normal; }
.lk-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 6px; }
.lk-s { border-radius: 6px; padding: 7px 9px 7px 22px; position: relative; min-height: 58px;
  display: flex; flex-direction: column; gap: 4px; }
.lk-s .n { position: absolute; left: 6px; top: 7px; font-family: var(--pixel);
  font-size: var(--fs-nano); color: #56506a; }
.lk-s.full { background: #1f1b2e; border: 1px solid #443c56; border-left: 3px solid #4a5568; }
.lk-s.full.rare { border-left-color: #99c1f1; }
.lk-s.full.epic { border-left-color: #dc8add; }
.lk-s.empty { border: 1px dashed #38314d; background: #1b1729; }
.lk-s .nm { font-family: var(--mono); font-size: var(--fs-small); color: #deddda; line-height: 1.3; }
.lk-s .nm.dim { color: #453e5c; }
.lk-s .ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.lk-s .r { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #8796ab; }
.lk-s .ui-link { min-height: 0; padding: 2px 0; display: block; }
.inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 7px; }
.inv-c { background: #1f1b2e; border: 1px solid #443c56; border-left: 3px solid #4a5568;
  border-radius: 6px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto;
  gap: 3px 8px; align-items: center; }
.inv-c.rare { border-left-color: #99c1f1; }
.inv-c.epic { border-left-color: #dc8add; }
.inv-c .st { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #8796ab; }
.inv-c .st .r { font-weight: normal; color: #9a9996; }
.inv-c.rare .st .r { color: #99c1f1; }
.inv-c.epic .st .r { color: #dc8add; }
.inv-c .nm { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-small);
  color: #deddda; line-height: 1.3; }
.inv-c .mt { font-family: var(--mono); font-size: var(--fs-small); color: #e5a50a; white-space: nowrap; }
.inv-c .ac { display: flex; gap: 10px; justify-self: end; }
.inv-c .ui-link, .lk-s .ui-link { width: auto; }
.inv-c .ui-link { min-height: 0; padding: 3px 0; display: block; }
.inv-c .ui-link[disabled], .lk-s .ui-link[disabled] { opacity: .35; pointer-events: none; }
.inv-c.fresh, .lk-s.full.fresh { box-shadow: inset 0 0 0 1px #245a34; }
@media (max-width: 600px) {
  .lk-rack, .inv-cards { grid-template-columns: 1fr; }
  .inv-c .ui-link, .lk-s .ui-link { min-height: var(--tap); }
}
.inv-list2 { display: flex; flex-direction: column; gap: 8px; }
.inv-row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px;
  align-items: center; padding: 10px 14px; border: 1px solid #443c56; }
.inv-row2 .nm { font-family: var(--mono); font-size: var(--fs-small); color: #deddda; }
.inv-row2 .meta { grid-column: 1; font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
.inv-row2 .acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 12px; align-items: center; }
.inv-row2 .acts .ui-link { min-height: 44px; }
.inv-row2 .acts .ui-link[disabled] { opacity: .35; pointer-events: none; }
.inv-row2.common { border-left: 4px solid #5e5c64; }
.inv-row2.rare { border-left: 4px solid #99c1f1; }
.inv-row2.epic { border-left: 4px solid #dc8add; }
.salv-page .inv-desk { margin: 0 0 4px; }
.inv-deskhead .ui-link { display: inline; width: auto; white-space: nowrap; }
@media (max-width: 1000px) {
  .jobs { grid-template-columns: 1fr; }
  .inv-row2 { grid-template-columns: 1fr; }
  .inv-row2 .acts { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ── BUILD 5 · THE BUILD SHEET page: the gate timeline, then the four
   machines as windows ──────────────────────────────────────────────────── */
.gates { position: relative; height: 82px; margin: 6px 0 22px; }
.gates .rail { position: absolute; left: 0; right: 0; top: 32px; height: 6px;
  background: #1f1b2e; border: 1px solid #443c56; border-radius: 99px; }
.gates .fill { position: absolute; left: 0; top: 32px; height: 6px; background: #f6d32d;
  border-radius: 99px; }
.gates .you { position: absolute; top: 8px; transform: translateX(-50%); text-align: center; }
.gates .you .pin { width: 10px; height: 10px; margin: 0 auto; background: #f6d32d; border-radius: 50%; }
.gates .you .yl { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 1px;
  margin-top: 22px; color: #f6d32d; white-space: nowrap; }
.gates .g { position: absolute; top: 26px; transform: translateX(-50%); text-align: center; }
.gates .g .tick { width: 4px; height: 18px; margin: 0 auto; background: #3584e4; }
.gates .g .gl { font-family: var(--pixel); font-size: var(--fs-micro); margin-top: 6px;
  letter-spacing: 1px; color: #9a9996; white-space: nowrap; }
.gates .g.done .tick { background: #57e389; }
.gates .g.done .gl { color: #57e389; }
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bcard { background: #302b3d; border: 1px solid #443c56; border-radius: 8px;
  padding: 52px 16px 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.bcard.isdone { opacity: .75; }
.bcard .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bcard .at { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 1px; color: #99c1f1; }
.bcard h3 { font-family: var(--pixel); font-size: var(--fs-label); margin: 10px 0 4px;
  letter-spacing: 1px; color: #deddda; }
.bcard .story { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; margin: 0 0 10px; }
.bcard .part { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono);
  font-size: var(--fs-small); color: #9a9996; padding: 4px 0; border-bottom: 1px dashed #443c56; }
.bcard .part .hv { font-family: var(--pixel); font-size: var(--fs-micro); }
.bcard .part.full { color: #57e389; }
.bcard .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; }
.bcard .foot:empty { display: none; }
.bcard .xp { font-family: var(--mono); font-size: var(--fs-small); color: #f6d32d; }
@media (max-width: 1000px) { .build-grid { grid-template-columns: 1fr; } }

/* ── BUILD 6 · THE TERMINAL page: the shell keeps the left hand, the
   catalog stands beside it, the ladder holds the rest back ─────────────── */
/* the loadout's bottom is pinned to the slots panel's bottom (owner, Aug 9):
   the right column sets the row height, the terminal fills it and keeps its
   own scrollbar — the page never grows to fit the list */
.term-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: stretch; }
.term-left { position: relative; min-height: 480px; }
.term-left .w-panel { margin-top: 0; }
@media (min-width: 1001px) {
  .term-left .pkgpanel { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .term-left .pkgpanel .term { flex: 1 1 auto; height: auto; min-height: 0; }
}
.traitpanel { margin-top: 14px; }
.term-right { min-width: 0; }
.termfoot { margin-top: 10px; }
.slotsmon .slots { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; }
.slots .s { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pixel); font-size: var(--fs-micro); border: 1px solid #443c56; background: #1f1b2e;
  border-radius: 6px; color: #99c1f1; }
.slots .s.empty { border-style: dashed; color: #5e5c64; }
.slots .slotline { flex: 1 1 200px; min-width: 0; }
.slotsmon .bloatline { margin-top: 10px; }
/* OPTION A (owner pick, Aug 9): the shipped chips, two rows of eight, then
   instrument rows — actions pips, the weight bar with the ceiling tick, and
   the perk card with its source in the headline */
.slots.sixteen { max-width: calc(8 * 32px + 7 * 10px); }
.slots .s.lk { background: #0b0913; border: 1px solid #241f33; color: #38324a; }
.slotsmon .slotcap { margin-top: 8px; line-height: 1.55; }
.sm-g { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0 4px; margin-top: 8px; border-top: 1px solid #2c273b; }
.sm-gl { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  text-transform: uppercase; letter-spacing: 1px; }
.sm-gv { font-family: var(--pixel); font-size: var(--fs-micro); color: #deddda; }
.sm-gv b { color: #57e389; font-weight: normal; }
.sm-pips i { display: inline-block; width: 12px; height: 12px; margin-left: 4px;
  border: 1px solid #57e389; border-radius: 2px; background: #57e389; }
.sm-pips i.spent { background: transparent; opacity: .45; }
.sm-free { font-family: var(--pixel); font-size: var(--fs-nano); color: #57e389; letter-spacing: 1px; }
.sm-gsub { font-family: var(--mono); font-size: var(--fs-small); color: #756f87; margin-top: 3px; }
.sm-wb .bar { height: 10px; margin-top: 6px; border: 1px solid #443c56; background: #171226; position: relative; }
.sm-wb .bar i { display: block; height: 100%; background: linear-gradient(90deg, #26a269, #57e389); }
.sm-wb .bar em { position: absolute; right: 0; top: -4px; bottom: -4px; width: 2px; background: #e01b24; }
.sm-pk { border: 1px solid #7a5cff; border-radius: 6px; padding: 9px 11px;
  background: rgba(122, 92, 255, .08); margin-top: 12px; }
.sm-pk .pks { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  text-transform: uppercase; letter-spacing: 1px; }
.sm-pk .pks b { color: #b39aff; font-weight: normal; }
.sm-pk .pkn { font-family: var(--pixel); font-size: var(--fs-nano); color: #b39aff;
  letter-spacing: 1px; margin-top: 4px; }
.sm-pk .pkd { font-family: var(--mono); font-size: var(--fs-small); color: #b9b4c7;
  margin-top: 4px; line-height: 1.5; }
/* trait chips name their package (owner, Aug 9: the chip tells you what to action) */
.loadtraits .tchip b { color: #34d6e6; font-weight: normal; }
.cat-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.cat-tools input { flex: 1 1 260px; max-width: 420px; min-width: 0; font-family: var(--mono); font-size: var(--fs-small);
  padding: 10px 12px; min-height: 44px; background: #1f1b2e; border: 1px solid #443c56;
  border-radius: 8px; color: #deddda; }
.cat-tools input::placeholder { color: #5e5c64; }
/* the catalog rides full width under the shell (owner pick B): two columns
   of one-line rows, the description trimmed to fit its lane */
.pkg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pkg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 12px; background: #1f1b2e; border: 1px solid #443c56; border-radius: 10px; }
.pkg .nm { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 1px; color: #deddda;
  white-space: nowrap; }
.pkg .nm .mb { font-family: var(--mono); font-size: var(--fs-small); margin-left: 8px;
  letter-spacing: 0; color: #9a9996; }
.pkg .meta { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pkg .meta .man { cursor: pointer; display: inline-block; width: auto; min-height: 0;
  padding: 11px 4px; margin: -11px 0; }   /* a 44px touch box that adds no row height */
.pkg .acts { display: flex; gap: 12px; align-items: center; }
.pkg.locked { opacity: .55; border-style: dashed; }
.pkg.locked .nm { color: #9a9996; letter-spacing: 3px; }
.pkg.locked .meta { white-space: normal; overflow: visible; text-overflow: clip; }   /* never ellipsize the tease */
/* the matrix ghosts: real packages this distro refuses, reason beneath —
   the reason wraps, so ghost rows run two lines instead of clipping */
.pkg.ghosted { opacity: .55; border-style: dashed; grid-template-columns: minmax(0, 1fr) auto; }
.pkg.ghosted .nm { color: #9a9996; }
.pkg.ghosted .meta { grid-column: 1 / -1; white-space: normal; overflow: visible; text-overflow: clip; }
.term .ghostrow { color: #4a5568; }
.slotsmon .dispname { margin-top: 6px; }
.reveal-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.reveal-bar i { flex: 1; border-top: 1px dashed #443c56; }
.reveal-bar span { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 1px; color: #9a9996; }
.revealmore { grid-column: 1 / -1; text-align: center; }
@media (max-width: 1000px) {
  .term-grid { grid-template-columns: 1fr; }
  .pkg-list { grid-template-columns: 1fr; }
  .pkg { grid-template-columns: minmax(0, 1fr) auto; }
  .pkg .meta { grid-column: 1 / -1; white-space: normal; }
  .pkg .acts { justify-self: end; }
}

/* ── the claim wizard (owner 3D): class first, ghosts explain themselves ── */
.clsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.clscard { background: #1f1b2e; border: 1px solid #443c56; border-radius: 8px; padding: 18px;
  cursor: pointer; }
.clscard:hover { border-color: #62a0ea; }
.clscard.sel { border-color: #f6d32d; }
.clscard .ck { font-family: var(--pixel); font-size: var(--fs-label); color: #deddda; letter-spacing: 1px; }
.clscard .cd { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; margin-top: 10px; line-height: 1.5; }
@media (max-width: 700px) { .clsgrid { grid-template-columns: 1fr; } }
.claimsum { margin-bottom: 10px; }

/* ── THE OPENING BEAT (owner pick B, Aug 8 night): the cold open carries
   the REACH vista from the story art, and the words arrive in beats ── */
.iv-vista { position: relative; overflow: hidden; }
.iv-vista canvas { display: block; width: 100%; image-rendering: pixelated; }
.iv-plate { position: absolute; left: 10px; top: 10px; background: rgba(12,9,20,.72);
  border: 1px solid #443c56; border-radius: 6px; padding: 5px 9px; }
.iv-plate .rn { font-family: var(--pixel); font-size: var(--fs-nano); color: #deddda; letter-spacing: 2px; }
.iv-plate .rq { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; margin-top: 3px; }
@media (max-width: 600px) { .iv-plate .rq { display: none; } }
.ivb-stage { position: relative; margin-top: 10px; }
.ivb-stage .iv-vista { border-radius: 8px; border: 1px solid #443c56; }
.ivb-copy { max-width: 640px; margin: 0 auto; text-align: center; padding: 26px 16px 8px; }
.ivb-copy .lic-kicker { margin-top: 0; }
.ivb-line { font-family: var(--mono); font-size: var(--fs-lead); color: #cfc9dd; line-height: 1.7; margin-top: 18px; }
.ivb-line b { color: #deddda; font-weight: normal; }
.ivb-line .dim { color: #8a8499; }
/* the door sits right under the painting on every screen, above the fold */
.ivb-go { text-align: center; margin: 20px 0 6px; }
/* the door is the point: double-size button, proportions kept (owner) */
.ivb-go .w-btn { font-size: var(--fs-page); min-height: 88px; padding: 0 48px; }
.ivb-sub { font-family: var(--mono); font-size: var(--fs-small); color: #6f6a88; margin-top: 10px; }
@media (max-width: 600px) {
  .ivb-go { margin: 16px 0 4px; }
  .ivb-go .w-btn { width: 100%; min-height: 64px; }
}
.beat { opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease; }
.beat.in { opacity: 1; transform: none; }
/* reduce-motion keeps the FADE (opacity is not motion) and drops the slide */
@media (prefers-reduced-motion: reduce) { .beat { transform: none; transition: opacity .8s ease; } }

/* ── THE SCOUT DESK (owner pick, Aug 8 night): the wizard's steps 2 and 3.
   A roster list on the left — sprite, name, one tag — and one reading panel
   on the right: identity on top, typed fact cards, the debut spread on the
   gym's own bars, one blue button. Color law: blue = under your hand,
   gold names the perk, dim = cannot make this weight. ── */
.cw-desk { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; align-items: start; margin-top: 12px; }
.cw-list { border: 1px solid #443c56; border-radius: 8px; overflow: hidden; background: #191523; }
.cw-r { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer;
  border-bottom: 1px solid #2a2438; }
.cw-r:last-child { border-bottom: none; }
.cw-r canvas { width: 30px; height: 30px; image-rendering: pixelated; flex: none; }
.cw-rn { font-family: var(--pixel); font-size: var(--fs-nano); color: #deddda; letter-spacing: 0; white-space: nowrap; }
.cw-rp { margin-left: auto; font-family: var(--mono); font-size: var(--fs-small); color: #9a9996;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-r:hover, .cw-r:focus-visible { background: #241f31; outline: none; }
.cw-r.on { background: #1b2740; box-shadow: inset 3px 0 0 #3584e4; }
.cw-r.on .cw-rn { color: #99c1f1; }
.cw-r.lk { opacity: .5; }
.cw-lock { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; cursor: pointer;
  background: #1f1b2e; border: none; border-top: 1px solid #443c56; border-bottom: 1px solid #2a2438;
  font-family: var(--pixel); font-size: var(--fs-nano); color: #9a9996; letter-spacing: 1px; text-align: left; }
.cw-lock .ar { margin-left: auto; transition: transform .15s; }
.cw-lock.open .ar { transform: rotate(180deg); }
.cw-panel { background: #302b3d; border: 1px solid #443c56; border-radius: 8px; padding: 18px 20px;
  position: sticky; top: 12px; }
.cw-hero { text-align: center; }
.cw-hero canvas { width: 150px; height: 150px; image-rendering: pixelated; }
.cw-nm { font-family: var(--pixel); font-size: var(--fs-page); color: #deddda; letter-spacing: 2px; margin-top: 2px; }
.cw-pk { font-family: var(--pixel); font-size: var(--fs-micro); color: #f6d32d; letter-spacing: 2px; margin-top: 10px; }
.cw-tag { font-family: var(--mono); font-size: var(--fs-body); color: #9a9996; margin-top: 8px; line-height: 1.4; }
.cw-cards { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.cw-c { display: flex; gap: 12px; align-items: flex-start; background: #241f31; border: 1px solid #3a3448;
  border-radius: 6px; padding: 12px 14px; }
.cw-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid #443c56; background: #1f1b2e; font-family: var(--mono); font-size: var(--fs-small); color: #62a0ea; }
.cw-ck { font-family: var(--pixel); font-size: var(--fs-nano); color: #62a0ea; letter-spacing: 1px; }
.cw-cv { font-family: var(--mono); font-size: var(--fs-body); color: #deddda; margin-top: 5px; line-height: 1.4; }
.cw-bars { background: #241f31; border: 1px solid #3a3448; border-radius: 6px; padding: 12px 14px; margin-top: 10px; }
.cw-bh { font-family: var(--pixel); font-size: var(--fs-nano); color: #62a0ea; letter-spacing: 1px; margin-bottom: 8px; }
.cw-bn { font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; margin-top: 8px; line-height: 1.4; }
.cw-panel .w-btn { width: 100%; margin-top: 14px; }
.cw-why { font-family: var(--mono); font-size: var(--fs-body); color: #9a9996; text-align: center;
  border: 1px dashed #443c56; border-radius: 6px; padding: 12px; margin-top: 16px; }
.cw-hints { display: flex; gap: 18px; align-items: center; margin-top: 14px; }
.cw-hints .lead { flex: 1; font-family: var(--mono); font-size: var(--fs-small); color: #6f6a88; }
.cw-x { display: none; position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: #9a9996; font-family: var(--mono); font-size: var(--fs-body); cursor: pointer;
  padding: 10px 12px; z-index: 2; }
@media (max-width: 860px) {
  .cw-desk { grid-template-columns: 1fr; }
  .cw-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; border-radius: 12px 12px 0 0;
    max-height: 64vh; overflow: auto; transform: translateY(108%); transition: transform .22s; padding-bottom: 0; }
  .cw-panel.open { transform: none; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
  .cw-panel .w-btn { position: sticky; bottom: 0; box-shadow: 0 -10px 16px rgba(16,13,23,.9); }
  .cw-in { padding-bottom: 16px; }
  .cw-hero canvas { width: 88px; height: 88px; }
  .cw-x { display: block; }
}

/* ── LEDGER, its own tab (owner pick B, Aug 8 night): the book wide, your
   corner's numbers in a slim rail beside it ── */
.led-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .led-grid { grid-template-columns: 1fr; } }
.lb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid #3a3448; }
.lb-row:last-child { border-bottom: none; }
.lb-row .k { font-family: var(--pixel); font-size: var(--fs-nano); color: #9a9996; letter-spacing: 1px; }
.lb-row .v { font-family: var(--mono); font-size: var(--fs-body); color: #deddda; }
/* THE CORNER BOOK (owner pick, Aug 10): three headline numbers, then the
   categories down one card. The dividers do the sorting the eye needs. */
.lb-spot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.lb-sp { background: #14101f; border: 1px solid #3a3448; border-radius: 6px;
  padding: 10px 4px 9px; text-align: center;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.lb-sp b { display: block; font-family: var(--mono); font-size: var(--fs-lead); color: var(--gold, #f6d32d);
  line-height: 1.05; font-weight: normal; }
/* THE MIDDLE TILE ONLY (owner, Aug 10): the knockouts figure is the one that
   grows, so it fills the tile and pushes its label down into what was dead
   air. Its neighbours keep the reading ladder. VT323 sets about two steps
   smaller than its nominal size, which is why the number has to be this
   large to LOOK large beside a 9px pixel label. Sized to its own fixed tile,
   like the arcade's kpi values — the audit carries the same exception. */
.lb-spot .lb-sp:nth-child(2) b { font-size: 54px; line-height: .92; letter-spacing: -1px; }
.lb-sp span { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #8796ab; line-height: 1.5; margin-top: auto; }
.lb-div { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 2px;
  color: var(--gold, #f6d32d); margin: 14px 0 2px; padding-top: 10px; border-top: 1px solid #3a3448; }

/* ── STORY (owner pick A · THE VISTAS): panoramas and quiet text ── */
.sy-page { max-width: 1216px; margin: 0 auto; }
.sy-act { max-width: 760px; margin: 0 auto; padding: 26px 12px 34px; }
.sy-act .eb { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 2px; color: #99c1f1; }
.sy-act h2 { font-family: var(--pixel); font-size: var(--fs-page); color: #deddda; letter-spacing: 1px; margin: 12px 0 14px; }
.sy-act p { font-family: var(--mono); font-size: var(--fs-lead); line-height: 1.6; color: #b9b6c9; margin: 0 0 12px; }
.sy-act p b { color: #deddda; font-weight: normal; }
.sy-stamp { font-family: var(--pixel); font-size: var(--fs-label); color: #ed333b; letter-spacing: 1px;
  margin-top: 18px; line-height: 1.9; }
.sy-stamp small { display: block; font-size: var(--fs-nano); color: #9a9996; }
.sy-final { font-family: var(--pixel); font-size: var(--fs-label); color: #f6d32d; line-height: 2; margin-top: 10px; }
.sy-chip { display: inline-block; font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
  color: #99c1f1; border: 1px solid #443c56; background: #1f1b2e; border-radius: 4px; padding: 6px 9px; margin-left: 10px; }
.sy-vista { position: relative; overflow: hidden; height: 420px; border-radius: 8px;
  border: 1px solid #443c56; box-shadow: 0 8px 28px rgba(0,0,0,.45); margin: 8px 0 0; }
.sy-vista canvas { position: absolute; left: 0; top: -30px; width: 100%; height: calc(100% + 60px);
  image-rendering: pixelated; }
.sy-plate { position: absolute; left: 18px; bottom: 14px; background: rgba(16,13,23,.78);
  border-radius: 6px; padding: 10px 14px; }
.sy-plate .rn { font-family: var(--pixel); font-size: var(--fs-label); color: #deddda; letter-spacing: 2px; }
.sy-plate .rq { font-family: var(--mono); font-size: var(--fs-body); color: #9a9996; margin-top: 4px; }
@media (max-width: 700px) { .sy-vista { height: 240px; } }
.sy-veil { position: fixed; inset: 0; background: rgba(20,16,33,.92); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.sy-door { width: min(560px, 100%); background: #302b3d; border: 1px solid #443c56; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55); padding: 52px 22px 22px; position: relative; }
.sy-door::before { content: "story"; position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: #1f1b2e; border-bottom: 1px solid #443c56; border-radius: 8px 8px 0 0;
  font-family: var(--mono); font-size: var(--fs-small); color: #9a9996; display: flex; align-items: center; padding-left: 64px; }
.sy-door::after { content: ""; position: absolute; top: 13px; left: 14px; width: 12px; height: 12px;
  border-radius: 50%; background: #ed333b; box-shadow: 18px 0 0 #f8e45c, 36px 0 0 #57e389; }
.sy-door .eb { font-family: var(--pixel); font-size: var(--fs-micro); letter-spacing: 2px; color: #99c1f1; }
.sy-door p { font-family: var(--mono); font-size: var(--fs-lead); line-height: 1.55; color: #b9b6c9; margin: 12px 0 18px; }
.sy-door .row { display: flex; gap: 10px; }

/* the fight desk's floating note: visible from any surface */
.fight-note { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 240;
  background: #1f1b2e; border: 1px solid #ed333b; color: #deddda; border-radius: 8px;
  padding: 12px 18px; font-family: var(--mono); font-size: var(--fs-body); max-width: min(92vw, 640px); }

/* ── FRIENDS: the corner of five, the book of a hundred ── */
.fr-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #241f31; border: 1px solid #3a3448; border-radius: 6px; padding: 10px 14px; }
.fr-row .fn { flex: 1 1 160px; min-width: 0; font-family: var(--pixel); font-size: var(--fs-micro);
  letter-spacing: 1px; }
.fr-row .fn a { color: #99c1f1; text-decoration: none;
  display: inline-block; padding: 14px 6px; margin: -14px -6px; }   /* a finger-sized door on a small name */
.fr-row .fn a:hover { text-decoration: underline; }
/* every manager-name door on a phone gets the same finger-sized box —
   the ledger's small names measured 20px tall at 390 */
@media (max-width: 600px) {
  a.mglink { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
}

/* the beta desk: bugs and ideas, one small window */
.fb-kinds { display: flex; gap: 8px; margin: 12px 0; }
.fb-kinds .chip { cursor: pointer; min-height: 44px; }
.fb-kinds .chip.on { color: #0a0a12; background: #99c1f1; border-color: #99c1f1; }
.fb-body { width: 100%; box-sizing: border-box; background: #1f1b2e; border: 1px solid #443c56;
  border-radius: 8px; color: #deddda; font-family: var(--mono); font-size: var(--fs-small);
  padding: 10px 12px; resize: vertical; }
.fb-body::placeholder { color: #5e5c64; }

/* the commission's notice: a standing word above every tab */
.cnotice { background: #1d2740; border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; }
.cnotice .e { font-family: var(--pixel); font-size: var(--fs-micro); color: #99c1f1; letter-spacing: 2px; }
.cnotice .l { font-family: var(--mono); font-size: var(--fs-small); color: #cdd5e4; margin-top: 6px; line-height: 1.5; }

/* the pool counter beside the TRAINING title */
.train-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.train-head .train-frees { font-family: var(--mono); font-size: var(--fs-small); color: #57e389; }
/* spent is not good news: the count stops reading as available the moment it
   hits zero, and says when it comes back instead */
.train-head .train-frees.spent { color: var(--dim); }

/* ── the weekend banner: the gym says it loudly (owner, Aug 7) ──────────── */
.wkd { background: linear-gradient(#463a12, #3a3013); border-radius: 6px;
  padding: 16px 18px; margin-bottom: 14px; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(246, 211, 45, .35), 0 8px 28px rgba(0, 0, 0, .45); }
.wkd-h { font-family: var(--pixel); font-size: var(--fs-label); color: #f6d32d;
  letter-spacing: 3px; text-shadow: 0 0 12px rgba(246, 211, 45, .45); }
.wkd-l { font-family: var(--mono); font-size: var(--fs-small); color: #f4e9c3;
  margin-top: 8px; line-height: 1.5; }
.wkd.live { background: linear-gradient(#57470f, #463a12);
  box-shadow: inset 0 0 0 1px rgba(246, 211, 45, .6), 0 8px 28px rgba(0, 0, 0, .45); }

/* THE PAYDAY (owner, Aug 9): the win pays on screen, center stage, five
   seconds, then gone. The corner achievement toasts keep their own rules. */
.payday { position: fixed; top: 16%; left: 50%; transform: translateX(-50%); z-index: 96;
  display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.pay-note { font-family: var(--pixel); font-size: var(--fs-label); letter-spacing: 2px;
  padding: 12px 22px; border-radius: 8px; border: 2px solid; background: rgba(10, 10, 18, .92);
  animation: payin .25s ease-out; }
.pay-note.xp { color: #f6d32d; border-color: #f6d32d; box-shadow: 0 0 18px rgba(246, 211, 45, .35); }
.pay-note.cr { color: #34d6e6; border-color: #34d6e6; box-shadow: 0 0 18px rgba(52, 214, 230, .35); }
@keyframes payin { from { transform: translateY(-8px); opacity: 0; } }
body.fx-reduced .pay-note { animation: none; }


/* ── the promotion ceremony (mock round Aug 9: the owner's pick: THE LADDER,
   thrown by promo.js off the tier_up signal) ── */
.pv-veil { position: fixed; inset: 0; z-index: 90; background: rgba(6, 6, 14, .9);
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.pv-card { width: min(560px, 100%); background: #302b3d; border: 1px solid #443c56;
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .55); padding: 30px 22px 26px;
  text-align: center; animation: pvin .45s ease-out; }
@keyframes pvin { from { transform: translateY(26px); opacity: 0; } }
body.fx-reduced .pv-card { animation: none; }
.pv-eyebrow { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--cyan);
  letter-spacing: 2px; }
.pv-sub { font-family: var(--mono); font-size: var(--fs-body); color: var(--dim);
  margin-top: 6px; line-height: 1.35; }
.pv-tier { font-family: var(--pixel); font-size: var(--fs-num); color: var(--ylw);
  letter-spacing: 2px; line-height: 1.3; margin-top: 10px; overflow-wrap: break-word; }
.pv-sum { margin: 20px auto 0; max-width: 380px; border-top: 1px solid #443c56;
  padding-top: 14px; display: grid; gap: 8px; }
.pv-row { display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: var(--fs-body); }
.pv-row span { color: var(--dim); }
.pv-row b { color: var(--ink); font-weight: normal; }
/* the purse is the one figure on the card that is money, so it reads in the
   board's earned-green rather than the same ink as the seat number */
.pv-row.pv-paid b { color: var(--grn); }
.pv-veil .w-btn.pv-go { margin-top: 22px; }

/* the ladder: rungs in the war board's color language — passed
   tiers green, where-you-stand yellow, the future dim. The marker is an
   up-chevron: this ladder only goes one way. */
.pv-lad { margin: 18px auto 0; max-width: 380px; display: grid; gap: 6px; }
.pv-rung { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid #443c56; border-radius: 6px; background: #262133; }
.pv-rung i { width: 9px; height: 9px; flex: none; margin-top: 4px; background: none;
  border-left: 3px solid #443c56; border-top: 3px solid #443c56; transform: rotate(45deg);
  transition: border-color .3s; visibility: hidden; }
.pv-rung.dest i { visibility: visible; }
.pv-rung.dest.lit i { border-color: var(--ylw); }
.pv-rung span { font-family: var(--pixel); font-size: var(--fs-label); color: var(--dim);
  letter-spacing: 1px; transition: color .3s; }
.pv-rung.past span { color: var(--grn); }
.pv-rung.now span { color: var(--ylw); }
.pv-rung.lit { border-color: var(--ylw); background: rgba(255, 210, 63, .08);
  box-shadow: 0 0 16px rgba(255, 210, 63, .25); }
body.fx-reduced .pv-rung i, body.fx-reduced .pv-rung span { transition: none; }
.pv-ladder .pv-late { opacity: 0; transition: opacity .5s ease-out; }
.pv-reveal .pv-late { opacity: 1; }
body.fx-reduced .pv-ladder .pv-late { transition: none; }
.pv-tier.pv-small { font-size: var(--fs-head); margin-top: 16px; }

/* the main-event walk-in (owner perks, Aug 9): gold trim for life on a
   fighter debuted off a main-event migration, and a gold line for the
   first week. Prestige only — the card gains nothing else. */
.fcard.walkin { border-color: rgba(255, 210, 63, .55); }
.fwalk { font-family: var(--mono); font-size: var(--fs-body); color: var(--ylw); margin-top: 6px; }
.pstars { color: var(--ylw); letter-spacing: 2px; }
/* sealed traits (owner, Aug 10): the SHAPE of the chips shows, the contents
   don't — three fixed redacted chips (never the real count) over one line */
.tchip.tred { color: #756f87; letter-spacing: 1px; border-color: #3a3448; border-left-color: #756f87;
  background: rgba(117, 111, 135, .06); }
.tchip.tred::before { content: none; }
.traits .tlock { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  line-height: 1.35; margin-top: 7px; }
/* the paid road to those traits sits right under the seal */
.traits .tbuy { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.traits .tbuy-n { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); line-height: 1.35; }

/* ── THE RUN ROOM (owner build Aug 10: option A terminal + option C trail).
   Full-screen scene; the salvage tab keeps its own look. ── */
.cronroom { display: flex; flex-direction: column; background: #07070d;
  position: fixed; inset: 0; z-index: 60; }
/* THE ROOM GETS ITS CRT BACK (bug, Aug 11). The page-level scanlines and
   vignette live on body::after and body::before at z-index 50 and 49, and
   this room is a fixed full-screen scene at 60 — so it covered them and was
   the one screen in the game with no CRT on it at all. It carries its own,
   and answers the same switch: off means off, here as everywhere. */
.cronroom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 4px),
    radial-gradient(140% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55));
}
body.crt-off .cronroom::after, body.wars-crt-off .cronroom::after { display: none; }

/* the rail is adopted into this header while the room is open (cronroom.js),
   so nothing needs reserving on the right any more */
.cr-topic { display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: var(--fs-body); background: #10101c; color: var(--cyan);
  padding: 6px 14px; border-bottom: 1px solid #232338; flex: none; }
.cr-brand { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 2px;
  color: var(--ylw); white-space: nowrap; flex: none; }
.cr-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
/* inside the header the buttons stop being thumb-sized floating controls and
   become part of the strip: smaller, flatter, aligned to the text beside them */
.cr-rail { display: flex; }
.corner-rail.in-room { position: static; gap: 4px; }
/* the same treatment inside the masthead (owner, Aug 12): the rail is a flex
   item at the right hand end of the bar, past the era chip, rather than a
   fixed corner floating over the page with padding reserved beneath it. */
.corner-rail.in-bar { position: static; z-index: auto; gap: 4px;
  flex: 0 0 auto; align-self: center; margin-left: 4px; }
.corner-rail.in-room .gear-corner, .corner-rail.in-bar .gear-corner,
.corner-rail.in-room .note-corner, .corner-rail.in-bar .note-corner,
.corner-rail.in-room .snd-corner, .corner-rail.in-bar .snd-corner,
.corner-rail.in-room .wars-snd,   .corner-rail.in-bar .wars-snd {
  min-width: 30px; min-height: 30px; width: 30px; height: 30px;
  background: none; border-color: transparent; border-radius: 5px; }
.corner-rail.in-room .gear-corner:hover, .corner-rail.in-bar .gear-corner:hover,
.corner-rail.in-room .note-corner:hover, .corner-rail.in-bar .note-corner:hover,
.corner-rail.in-room .snd-corner:hover, .corner-rail.in-bar .snd-corner:hover {
  background: #1b1b2b; border-color: #2f2f45; }
.corner-rail.in-room svg, .corner-rail.in-bar svg { width: 14px; height: 14px; }
/* THE PHONE (owner, Aug 12). Must sit after the flat treatment above: the
   selectors carry the same weight, so whichever comes last wins. Beside a line
   of text 30px is right; under a thumb it is not, so on a phone these keep the
   tap size they had when they floated in the corner. */
@media (max-width: 600px) {
  .corner-rail.in-bar .gear-corner,
  .corner-rail.in-bar .note-corner,
  .corner-rail.in-bar .snd-corner,
  .corner-rail.in-bar .wars-snd {
    min-width: var(--tap); min-height: var(--tap); width: var(--tap); height: var(--tap); }
}
.cr-cd { font-family: var(--pixel); font-size: var(--fs-micro); color: var(--ylw); white-space: nowrap; }
.cr-topic .cr-back { min-height: 44px; white-space: nowrap; }
.cr-topic .cr-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-trail { display: flex; gap: 8px; align-items: center; padding: 8px 16px; flex-wrap: wrap;
  background: #0c0c16; border-bottom: 1px solid #232338; flex: none; }
.cr-tlbl { font-family: var(--mono); font-size: var(--fs-body); color: #4a5568; }
.cr-step { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: var(--grn);
  background: rgba(70, 211, 106, .08); border: 1px solid #245a34; border-radius: 4px;
  padding: 5px 8px; white-space: nowrap; }
.cr-step.next { color: #4a5568; border-color: #232338; background: none; }
.cr-arrow { color: #4a5568; font-family: var(--mono); font-size: var(--fs-body); }
.cr-room { display: grid; grid-template-columns: 1fr 240px; flex: 1; min-height: 0; }
/* on a wide monitor the log would otherwise run to 1,800px a line, which is
   unreadable; cap the measure and let the column breathe around it */
.cr-log { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.cr-log > * { max-width: 1100px; width: 100%; }
/* ── THE ROSTER (owner, Aug 11: "looks tacky … take inspiration from Discord")
   The spacing was not a taste problem, it was a tap target applied everywhere:
   every name AND every action link carried min-height 44px, so on a desktop a
   single rider stood 44px tall with another 44px of links under it and the
   column read as three floating words. A pointer that is not a finger gets a
   compact 28px row; a touch screen still gets its 44px, below. ── */
.cr-roster { border-left: 1px solid #232338; padding: 10px 8px; overflow-y: auto; background: #0c0c16; }
.cr-rh { display: flex; align-items: center; gap: 6px;
  font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 2px; color: var(--dim);
  margin: 16px 0 6px; padding: 0 6px; }
.cr-roster > .cr-rh:first-child, .cr-corner-box .cr-rh { margin-top: 0; }
.cr-rh .cr-n { font-weight: normal; color: #6b7a90; background: #16162400; margin-left: auto;
  font-size: var(--fs-nano); }
.cr-corner-box { background: rgba(70, 211, 106, .05); border: 1px solid #245a34; border-radius: 6px;
  padding: 8px 4px; margin-bottom: 6px; }
.cr-nickwrap { border-radius: 5px; }
.cr-nick { font-family: var(--mono); font-size: var(--fs-body); line-height: 1.2; display: flex;
  gap: 8px; align-items: center; cursor: pointer; min-height: 28px; padding: 0 6px;
  color: #b9c4d4; border-radius: 5px; }
.cr-nick:hover { background: #191926; color: var(--ink); }
.cr-nick.on { background: #1e1e2e; color: var(--ink); }
.cr-nick .cr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-nick em { font-style: normal; font-size: var(--fs-nano); color: #5b687d; margin-left: auto; flex: none; }
.cr-nick i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #5f6b7e; }
.cr-nick i.you { background: var(--ylw); }
.cr-nick i.friend { background: var(--grn); }
/* the actions read as a small menu under the name, not as loose links */
.cr-acts { display: flex; gap: 4px; padding: 2px 6px 6px 22px; flex-wrap: wrap; }
.cr-act { font: inherit; font-family: var(--mono); font-size: var(--fs-small); cursor: pointer;
  color: #8796ab; background: #16162a; border: 1px solid #262638; border-radius: 4px;
  padding: 3px 8px; min-height: 26px; }
.cr-act:hover { color: var(--cyan); border-color: var(--cyan); background: #1b2430; }
.cr-hint { font-family: var(--mono); font-size: var(--fs-small); color: #4a5568;
  padding: 10px 6px 0; border-top: 1px solid #1a1a28; margin-top: 14px; line-height: 1.45; }
/* the phone's roster button: hidden on a real screen */
.cr-who { display: none; }
.cr-line { font-family: var(--mono); font-size: var(--fs-body); line-height: 1.3; color: var(--ink); overflow-wrap: break-word; }
.cr-line .t { color: #4a5568; margin-right: 6px; }
.cr-line .n { font-weight: bold; color: var(--cyan); }
.cr-sys { color: var(--dim); }
/* the wait between votes: quieter than a system line, because it is not news,
   with the clock itself picked out so the eye finds it (owner, Aug 12) */
.cr-wait { font-family: var(--mono); font-size: var(--fs-body); line-height: 1.3;
  color: #4a5568; padding: 6px 0; }
.cr-wait b { color: var(--ylw); font-weight: normal; }
.cr-whis { color: #b48ce0; }
.cr-cornerline { color: #7fd89a; }
.cr-tag { color: #4a5568; }
.cr-vote { border: 1px dashed #3a3448; border-radius: 4px; padding: 10px 12px; margin: 4px 0; flex: none; }
.cr-vq { font-family: var(--mono); font-size: var(--fs-body); color: var(--ylw); margin-bottom: 4px; }
.cr-vrow { display: flex; gap: 10px; align-items: center; font-family: var(--mono);
  font-size: var(--fs-body); color: var(--ink); min-height: 32px; cursor: pointer; border-radius: 4px; padding: 0 4px; }
.cr-vrow:hover { background: rgba(135, 150, 171, .08); }
.cr-vrow.mine { background: rgba(255, 210, 63, .08); }
.cr-vrow.won { color: var(--ylw); cursor: default; }
.cr-key { font-family: var(--pixel); font-size: var(--fs-nano); color: #0a0a12; background: #8796ab;
  border-radius: 3px; padding: 3px 6px; flex: none; }
.cr-tally { color: var(--grn); margin-left: auto; white-space: nowrap; }
.cr-haul { border: 1px dashed #245a34; border-radius: 4px; padding: 9px 12px; color: #9fdcae; flex: none; }
.cr-reveal { border: 1px dashed #5a2430; border-radius: 4px; padding: 9px 12px; color: #d9a0a8; flex: none; }
.cr-inbar { display: flex; gap: 10px; align-items: center; border-top: 1px solid #232338;
  padding: 8px 16px; background: #0c0c16; flex: none; }
.cr-prompt { font-family: var(--mono); font-size: var(--fs-body); color: var(--dim); }
.cr-in { flex: 1; background: none; border: 0; outline: none; font-family: var(--mono);
  font-size: var(--fs-body); color: var(--ink); min-height: 34px; }
.cr-in::placeholder { color: #4a5568; }
/* a finger still gets a finger-sized target; only a mouse gets the compact
   rows. This is the rule that should have been there in the first place. */
@media (pointer: coarse) {
  .cr-nick { min-height: 44px; }
  .cr-act { min-height: 40px; padding: 8px 12px; }
  .corner-rail.in-room .gear-corner, .corner-rail.in-bar .gear-corner,
  .corner-rail.in-room .note-corner, .corner-rail.in-bar .note-corner,
  .corner-rail.in-room .snd-corner, .corner-rail.in-bar .snd-corner,
  .corner-rail.in-room .wars-snd,   .corner-rail.in-bar .wars-snd {
    min-width: 38px; min-height: 38px; width: 38px; height: 38px; }
}

/* THE PHONE (owner, Aug 11: "make sure this works on mobile"). A 150px sliver
   of roster left neither column usable, so below 760px the roster comes off
   the grid entirely and slides in over the log from a RIDERS button. */
@media (max-width: 760px) {
  .cr-room { grid-template-columns: 1fr; position: relative; }
  .cr-brand { display: none; }
  .cr-topic { gap: 8px; padding: 6px 10px; }
  .cr-right { gap: 8px; }
  .cr-who { display: block; position: absolute; top: 8px; right: 8px; z-index: 3;
    font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px;
    color: var(--cyan); background: #14141f; border: 1px solid #2f2f45;
    border-radius: 5px; padding: 8px 10px; min-height: 38px; cursor: pointer; }
  .cr-roster { position: absolute; inset: 0 0 0 auto; width: min(260px, 82%);
    transform: translateX(101%); transition: transform .18s ease;
    z-index: 4; box-shadow: -12px 0 28px rgba(0,0,0,.5); }
  .cronroom.roster-open .cr-roster { transform: none; }
  .cronroom.roster-open .cr-who { right: min(268px, calc(82% + 8px)); }
  .cr-log { padding: 12px 12px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cr-roster { transition: none; } }

/* the depot lines on the salvage cards (the tab keeps its look) */
.svrun .cronline { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim);
  letter-spacing: 0; margin-left: 8px; }
.svrun .cronq { color: var(--dim); }
/* the way back into a room whose run is already home and unpacked: a quiet
   second line under the card's own action, never competing with it */
.roomback { display: block; margin: 8px 0 0; background: none; border: 0; padding: 4px 0;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--cyan);
  cursor: pointer; text-align: left; }
.roomback:hover { color: #8ce8f4; text-decoration: underline; }

/* ── the CHANGELOG tab (owner, Aug 10): the title screen's book of changes,
   in this room's dress. Entries enter ONLY after the owner vets them. ── */
.clgwrap { max-width: 860px; }
.clg { border-top: 1px solid #20202f; padding: 14px 0 10px; }
.clg:first-of-type { border-top: 0; }
.clg-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clg-d { font-family: var(--pixel); font-size: var(--fs-nano); color: var(--dim); letter-spacing: 1px; flex: none; }
.clg-t { font-family: var(--pixel); font-size: var(--fs-label); color: var(--ink); letter-spacing: 1px; }
.clg-tag { margin-left: auto; }
.clg-tag.arcade { color: var(--cyan); }
.clg-tag.campaign { color: var(--grn); }
.clg-tag.site { color: var(--dim); }
.clg-tag.versus { color: var(--mag); }
.clg-tag.wars { color: var(--ylw); }
.clg-b { font-family: var(--mono); font-size: var(--fs-body); color: var(--dim); line-height: 1.4; margin: 6px 0 0; }
.clg-cols { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .clg-cols { grid-template-columns: 1fr; } }
.clgdesk .fb-body { width: 100%; box-sizing: border-box; margin-top: 10px; }
.clgdesk .fb-kinds { display: flex; gap: 8px; margin-top: 10px; }
.wguide .g-lede { font-family: var(--mono); font-size: var(--fs-body); color: var(--dim);
  line-height: 1.4; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #20202f; }

/* ── the manual in the shell: man / less / changelog output and the pager ── */
.term .doc { margin-top: 4px; }
.term .d-h { color: #e7f6e9; font-weight: bold; letter-spacing: 1px; margin: 14px 0 6px; }
.term .doc > .d-h:first-child { margin-top: 0; }
.term .d-p { margin-bottom: 8px; }
.term .d-tr { color: #cfeed6; margin: 8px 0 2px; }
.term .d-tip { color: #6fbf80; border-left: 2px solid #245a34; padding-left: 8px; margin: 8px 0 10px; }
.term.paging { overflow: hidden; display: flex; flex-direction: column; }
.term.paging > *:not(.term-out) { display: none; }
.term.paging > .term-out { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.term .pg { flex: 1; min-height: 0; overflow-y: auto; outline: none;
  scrollbar-width: thin; scrollbar-color: #245a34 #0b0f0c; }
.term .pg-doc > div { scroll-margin-top: 8px; }
.term .pg-hit { background: rgba(70, 211, 106, .14); }
.term .pg-bar { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid #1d2a1f; margin-top: 6px; padding-top: 6px; color: #6fbf80; }
.term .pg-nm { color: #e7f6e9; }
.term .pg-pct { color: var(--ylw); }
.term .pg-keys { color: #4d7a56; }
.term .pg-taps { display: flex; gap: 6px; margin-left: auto; }
.term .pg-t { min-height: 44px; min-width: 44px; padding: 0 10px; background: #122415;
  color: #9fd8a8; border: 1px solid #245a34; border-radius: 5px; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-small); }
.term .pg-t:hover { background: #1a3320; }
.term .pg-find { background: #0b0f0c; border: 1px solid #245a34; border-radius: 4px;
  color: #9fd8a8; font-family: var(--mono); font-size: var(--fs-small); padding: 4px 8px;
  min-height: 34px; width: 160px; }
@media (max-width: 700px) { .term .pg-keys { display: none; } }

/* ── SYSTEM PACKAGES (owner ruling, Aug 11) ─────────────────────────────────
   What the distro and stance ship. Set apart from the chosen loadout on
   purpose: the manager did not pick these and cannot drop them, so they read
   as part of the machine rather than part of the build. */
.tgrp { margin-top: .55em; }
.tgrp:first-of-type { margin-top: .2em; }
.tgh {
  color: var(--dim); opacity: .85;
  font-size: .78em; letter-spacing: .04em;
  margin-bottom: .3em;
}
.tgnone { color: var(--dim); opacity: .7; font-size: .85em; }
.tchip.sys {
  border-style: dashed;
  opacity: .92;
}
.tchip.sys.dp { cursor: default; }
.cw-sys {
  display: flex; gap: .6em; align-items: baseline;
  padding: .15em 0; line-height: 1.35;
}
.cw-sys b { color: var(--cyan); flex: 0 0 auto; }
.cw-sys span { color: var(--dim); }
.cw-sysn {
  margin-top: .45em; color: var(--dim); opacity: .8;
  font-size: .82em; line-height: 1.4;
}
.cw-inits {
  display: flex; flex-wrap: wrap; gap: .4em; align-items: center;
  margin-top: .6em;
}
.cw-init {
  font: inherit; font-size: .85em; cursor: pointer;
  padding: .25em .7em; color: var(--dim);
  background: transparent; border: 1px solid currentColor; border-radius: 2px;
}
.cw-init.on { color: var(--cyan); border-color: var(--cyan); }
.cw-initn {
  flex: 1 1 100%; color: var(--dim); opacity: .8;
  font-size: .8em; line-height: 1.4;
}

/* ── THE GYM NAME (owner ruling, Aug 11) ────────────────────────────────────
   It sits on the licence now rather than the fighter, so it survives a
   migration and can be renamed. Edited in place, on the card that shows it. */
.campline { display: flex; align-items: center; gap: .4em; justify-content: center; flex-wrap: wrap; }
.camp-edit {
  font: inherit; font-size: .9em; line-height: 1; cursor: pointer;
  padding: 1px 5px; color: var(--dim); background: transparent;
  border: 1px solid transparent; border-radius: 3px;
}
.camp-edit:hover { color: var(--cyan); border-color: var(--cyan); }
.camp-in {
  font: inherit; font-size: .95em; text-align: center; max-width: 15em;
  padding: 2px 6px; color: var(--fg); background: rgba(0,0,0,.35);
  border: 1px solid var(--cyan); border-radius: 3px;
}
.camp-ok {
  font: inherit; font-size: .8em; letter-spacing: .05em; cursor: pointer;
  padding: 2px 8px; color: var(--cyan); background: transparent;
  border: 1px solid var(--cyan); border-radius: 3px;
}
.camp-err { flex: 1 1 100%; color: var(--red); font-size: .78em; }

/* THE LAST CALL on the state strip (owner, Aug 12): a departure inside ten
   minutes, said on the page the manager is already looking at. Quiet enough
   to ignore, loud enough to catch. */
.sp-call { margin-top: 6px; font-family: var(--mono); font-size: var(--fs-small);
  color: var(--ink); line-height: 1.5; }
.sp-call[hidden] { display: none; }
.sp-call b { color: var(--ylw); font-weight: normal; }
.sp-cron { color: var(--cyan); }
.sp-why { color: var(--dim); display: block; }
.state-strip .st-ride[hidden] { display: none; }
/* switched off in THE CONTROLS: gone at once, not at the next repaint */
body.no-runcalls .sp-call, body.no-runcalls .st-ride,
body.no-runcalls .st-nomore { display: none !important; }
.state-strip .st-nomore[hidden] { display: none; }
.state-strip .st-nomore { background: none; border: 1px solid #3a3a55; color: var(--dim); }
.state-strip .st-nomore:hover { border-color: var(--red); color: var(--red); }

/* WHAT CAME HOME (owner, Aug 12): said where the manager is standing, since
   the haul line lives on the salvage tab and the state of play collects from
   anywhere. */
.haul-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 95;
  max-width: min(560px, calc(100vw - 24px)); background: #0d150e; border: 2px solid #274733;
  border-radius: 8px; padding: 12px 40px 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.55);
  font-family: var(--mono); font-size: var(--fs-small); color: #cfe3d2; line-height: 1.5; }
.haul-toast.hurt { border-color: #5a2430; color: #d9a0a8; background: #150d0f; }
.ht-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; cursor: pointer;
  color: #4a5568; font-family: var(--mono); font-size: 15px; line-height: 1; padding: 4px 6px; }
.ht-x:hover { color: var(--red); }
/* and the bits themselves carry a mark until the shelf has been looked at */
.inv-row2.fresh { border-left: 2px solid var(--ylw); }
.nu { font-family: var(--pixel); font-size: var(--fs-nano); letter-spacing: 1px; color: #0a0a12;
  background: var(--ylw); border-radius: 3px; padding: 2px 5px; margin-left: 8px; font-weight: normal; }