/* =====================================================================
   SIGNAL COMBAT 1.0 · the screens around the sport
   ---------------------------------------------------------------------
   On top of app.css and combat.css (SAN Status: tokens, the avatar layers, the world), avatar.css and map.css.
   Three layers: the world (#v-world), the fight (#duel), the screens over them (#sg), and a top layer for questions and
   toasts (#sgm). One look: dark glass over the volcano, solid type (Jost for names, Red Hat Display for what you press,
   Red Hat Text for what you read, JetBrains Mono for numbers), one orange for "go", a land's colour (--c) for what's yours.
   Every screen: a bar (where you are), a body with its own scroll (what you can do), a dock (what's next, always on screen).
   ===================================================================== */
:root { --v-panel: rgba(14, 13, 18, .94); --v-panel-2: #16151C; --v-panel-3: #1D1C24; --v-line: rgba(249, 244, 238, .12); --v-line-2: rgba(249, 244, 238, .26);
  --v-go: #FC4C01; --v-go-2: #FF6A26; --v-ok: #7FD08A; --v-bad: #FF8A7D; --v-gold: #D8B574; --v-ease: cubic-bezier(.2, .8, .2, 1);
  --v-tile: radial-gradient(120% 100% at 50% 32%, #3B3746 0%, #24212C 55%, #16141B 100%); --v-max: 1120px; }
#signal { position: relative; min-height: 100%; }
html.v-arena, html.v-arena body { overflow: hidden; }
.v-world { position: fixed; inset: 0; z-index: 1; background: #070A14; }
.v-world[hidden], .sg-duel[hidden] { display: none !important; }

/* ---------- the layers ---------- */
.sg.v { position: fixed; inset: 0; z-index: 40; pointer-events: none; color: var(--ink); font: 400 15px/1.5 var(--f-text); color-scheme: dark; }
.sg.v[hidden] { display: none; }
.sg.v > * { pointer-events: auto; }
.sg.v.full, .sg.v.result { background: linear-gradient(180deg, rgba(9, 9, 12, .9), rgba(7, 7, 10, .96)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sg.v.title { background: radial-gradient(80% 70% at 50% 46%, rgba(6, 6, 9, .18), rgba(6, 6, 9, .8)); }
.sg.v.pick { background: linear-gradient(180deg, rgba(6, 6, 9, .55) 0, rgba(6, 6, 9, .1) 26%, rgba(6, 6, 9, .35) 60%, rgba(6, 6, 9, .92) 100%); }
.sg.v.world { background: none; }
.sgm { position: fixed; inset: 0; z-index: 60; pointer-events: none; color: var(--ink); font: 400 15px/1.5 var(--f-text); }
:where(.sg.v, .sgm) *, :where(.sg.v, .sgm) *::before, :where(.sg.v, .sgm) *::after { box-sizing: border-box; }
:where(.sg.v, .sgm) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: inherit; }
:where(.sg.v, .sgm) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.sg.v, .sgm) :focus-visible { outline: 2px solid var(--v-go); outline-offset: 3px; }
.sg.v .v-btn.go:focus-visible, .sgm .v-btn.go:focus-visible { outline-color: var(--ink); }
.sg.v img { max-width: none; }

/* ---------- type ---------- */
.v-k { font: 600 12px/1.35 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.v-k b { color: var(--ink); font-weight: 600; }
.v-sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 13px/1.2 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.v-sec em { font: 600 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--dim); font-style: normal; }
.v-sec .v-ic { width: 18px; height: 18px; color: var(--ink-2); }
.v-line { font: 400 15px/1.5 var(--f-text); color: var(--ink-2); }
.v-line.sm { font-size: 13.5px; }
.v-line.dim { color: var(--dim); display: flex; align-items: center; gap: 8px; }
.v-fine { font: 400 12.5px/1.5 var(--f-text); color: var(--dim); }
.v-intro { font: 400 15px/1.5 var(--f-text); color: var(--ink-2); max-width: 64ch; margin-bottom: 18px !important; }
.v-why { display: flex; align-items: flex-start; gap: 8px; font: 400 13.5px/1.45 var(--f-text); color: var(--dim); }
.v-why .v-ui { width: 15px; height: 15px; margin-top: 2px; }
.v-stat { font: 600 12px/1.5 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.v-stat b { font: 600 13px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink); }
.v-name { font: italic 700 clamp(36px, 4.6vw, 56px)/.95 var(--f-head); text-transform: uppercase; color: var(--c); letter-spacing: -.005em; overflow-wrap: anywhere; }
.v-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- icons ---------- */
.v-ic, .v-ui { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--c, var(--ink)); }
.v-ui { width: 18px; height: 18px; color: currentColor; }
.v-ic svg, .v-ui svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }

/* ---------- buttons: go (orange), line, quiet, chip ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font: 700 14px/1.1 var(--f-disp); letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; text-align: center; transition: background-color .15s, box-shadow .15s, color .15s, opacity .15s; }
.v-btn.go { background: var(--v-go); color: #0A0A0A; box-shadow: 0 10px 30px -14px var(--v-go); }
.v-btn.go:hover { background: var(--v-go-2); }
.v-btn.line { box-shadow: inset 0 0 0 1.5px var(--v-line-2); color: var(--ink); }
.v-btn.line:hover { box-shadow: inset 0 0 0 1.5px rgba(249, 244, 238, .62); }
.v-btn.warn { box-shadow: inset 0 0 0 1.5px rgba(255, 110, 95, .6); color: var(--v-bad); }
.v-btn.quiet { min-height: 40px; padding: 0 6px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(249, 244, 238, .35); }
.v-btn.quiet:hover { color: var(--ink); text-decoration-color: currentColor; }
.v-btn.chip { min-height: 36px; padding: 0 12px; font-size: 12px; letter-spacing: .06em; box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink-2); }
.v-btn.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .6); }
.v-btn.chip.on, .v-btn.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); color: var(--ink); }
.v-btn.sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.v-btn.xl { min-height: 62px; padding: 0 64px; font-size: 18px; letter-spacing: .16em; }
.v-btn:disabled { opacity: .38; cursor: default; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-btn.go:disabled { background: #3A3A3A; color: #9A9690; box-shadow: none; }
.v-link { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* ---------- a screen: bar, body, dock ---------- */
.v-scr { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.v-bar, .v-dock, .v-body { padding-inline: max(16px, calc((100% - var(--v-max)) / 2)); }
.v-bar { display: flex; align-items: center; gap: 16px; min-height: 68px; padding-block: 12px; border-bottom: 1px solid var(--v-line); }
.v-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 46vw; padding: 0 14px 0 8px; font: 700 13px/1 var(--f-disp); letter-spacing: .08em; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--v-line); white-space: nowrap; }
.v-back span { overflow: hidden; text-overflow: ellipsis; }
.v-back:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-bar-t { flex: 1; min-width: 0; font: italic 700 24px/1 var(--f-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: 2px 3px; }   /* 3.5 · padding: the italic J's descender was cut */
.v-bar-r { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.v-count { font: 600 12px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.v-count b { font: 600 13px/1 var(--f-mono); color: var(--ink); letter-spacing: 0; }
.v-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-block: 26px 36px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.v-dock { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 14px; border-top: 1px solid var(--v-line); background: rgba(10, 10, 13, .97); }
.v-dock .v-btn { min-width: 150px; }
.v-dock-l { flex: 1 1 100%; font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
/* 3.8.2 · the Locker's dock is one row whatever it says: the line beside the buttons, one line tall (cut short with … rather than
   wrapping), there even when empty. It used to take a row of its own when a piece went on, and the avatar shrank to make room */
.v-scr-locker .v-dock { flex-wrap: nowrap; }
.v-scr-locker .v-dock-l { flex: 1 1 auto; min-width: 0; min-height: 1.45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-scr-locker .v-dock-b { flex: 0 0 auto; flex-wrap: nowrap; }
.v-dock-l b { color: var(--ink); font-weight: 600; }
.v-dock-l .v-ui { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.v-dock-b { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }

/* ---------- the avatar on a stage (no box: a floor of light in your land's colour, the cut edge softened) ---------- */
.v-stage { position: relative; display: block; aspect-ratio: 1; width: 100%; max-width: 100%; }
.v-stage::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 1%; height: 20%; z-index: 0;
  /* soft by its own gradient, no blur filter: WebKit painted a blurred box's buffer at the page's top-left corner in a scrolled screen */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #F9F4EE) 44%, transparent), color-mix(in srgb, var(--c, #F9F4EE) 14%, transparent) 62%, transparent); }
.v-stage > .sav, .v-stage > .v-flat { position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 7%, #000 17%), linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 7%, #000 17%), linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%); mask-composite: intersect;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)); }
.v-stage > .v-flat { object-fit: contain; }
.v-stage.big > .sav { animation: v-wear 520ms var(--v-ease) both; }
.v-stage.big > .sav.kept { animation: none; }   /* 3.8.2 · re-drawn in place (a piece put on): it doesn't step in again */
.v-stage.pv::before { background: radial-gradient(closest-side, rgba(252, 76, 1, .5), transparent); }
/* entrances move, never fade from nothing: if a browser holds an animation at its first frame, nothing is left invisible */
@keyframes v-wear { from { transform: translateY(8px) scale(.99); } to { transform: none; } }

/* a piece on its own (acc-frames.js framing), on a lit tile so a black piece still reads */
/* its own layer (translateZ): without one, WebKit painted the piece's drop-shadow buffer at the page's top-left corner (a black
   square) when an overflow-clipped box held a filtered image inside a scrolling screen. overflow stays the clip, so the zoomed
   art never widens the screen */
.v-pa { position: relative; display: block; overflow: hidden; transform: translateZ(0); aspect-ratio: 1; width: 100%; background: var(--v-tile); }
.v-pa img { position: absolute; height: auto !important; max-width: none !important; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); pointer-events: none; }
.v-pa.xl { width: min(100%, 340px); }

/* ---------- TITLE ---------- */
.v-title { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 48px 16px; text-align: center; }
.v-logo { display: grid; justify-items: center; font: italic 700 clamp(58px, 13vw, 140px)/.86 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
  text-shadow: 0 10px 50px rgba(0, 0, 0, .5); padding: 0 .08em; }
/* the outlined word: a fill the colour of the night over a stroke twice as wide (paint-order), so the letters' own overlapping
   contours (B, A, R, F, E, H) never show. Never -webkit-text-stroke alone (v13's defect) */
.v-logo .o { color: #07070A; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: none; }
.v-title-tag { font: 600 13px/1 var(--f-text); letter-spacing: .34em; color: var(--ink-2); }
.v-title-who { font: 600 13px/1 var(--f-text); letter-spacing: .12em; color: var(--ink-2); }
.v-title-who b { font: italic 700 18px/1 var(--f-head); color: var(--c); letter-spacing: 0; }
.v-title-old { display: grid; justify-items: center; gap: 10px; padding: 16px 20px; max-width: 420px; background: rgba(10, 10, 14, .8); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-title-old p { font-size: 14px; color: var(--ink-2); }
.v-title-old b { color: var(--ink); }
.v-title-f { position: absolute; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* ---------- CHOOSE YOUR FIGHTER ---------- */
.v-pick { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) max(16px, calc((100% - 1180px) / 2)) calc(18px + env(safe-area-inset-bottom, 0px)); }
.v-pick-h { display: grid; gap: 6px; }
.v-pick-h .v-k { font: italic 700 26px/1 var(--f-head); letter-spacing: 0; color: var(--ink); }
.v-pick-sub { font-size: 14px; color: var(--ink-2); max-width: 60ch; }
.v-fs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; align-self: end; }
.v-f { display: grid; justify-items: center; gap: 10px; padding: 0 4px 12px; transition: transform .25s var(--v-ease), opacity .2s; opacity: .78; }
.v-f:hover { opacity: 1; }
.sg.v .v-f:focus-visible { outline: none; }
.v-f:focus-visible .v-f-id b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.v-f:focus-visible .v-stage::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 80%, transparent), transparent); }
.v-f.on { opacity: 1; transform: translateY(-6px); }
.v-f .v-stage { width: min(100%, 280px); }
.v-f.on .v-stage::before { height: 26%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 72%, transparent), transparent); }
.v-f-id { display: grid; justify-items: center; gap: 6px; }
.v-f-id b { font: italic 700 24px/1 var(--f-head); color: var(--c); }
.v-f-id i { font: 600 12px/1 var(--f-text); letter-spacing: .16em; color: var(--ink-2); font-style: normal; }
.v-f-id em { font: 600 10.5px/1 var(--f-text); letter-spacing: .14em; color: var(--dim); font-style: normal; padding: 5px 8px; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-f.on .v-f-id em { color: var(--ink); box-shadow: inset 0 0 0 1px var(--c); }
.v-pick-info { min-height: 112px; display: grid; gap: 8px; align-content: start; padding: 14px 16px; background: rgba(12, 11, 16, .86); box-shadow: inset 3px 0 0 var(--c, var(--v-line)), inset 0 0 0 1px var(--v-line); }
.v-pick-info.in { animation: v-up .35s var(--v-ease) both; }
.v-pick-hint { color: var(--dim); align-self: center; }
.v-pick-line b { font: italic 700 20px/1 var(--f-head); color: var(--c); margin-right: 10px; }
.v-pick-line span { font: italic 400 15px/1.4 var(--f-text); color: var(--ink); }
.v-pick-kit { display: flex; flex-wrap: wrap; gap: 8px; }
.v-mini { display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px 12px 4px 4px; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-mini .v-pa { width: 40px; grid-row: 1 / 3; }
.v-mini b { font: 700 12.5px/1.1 var(--f-disp); letter-spacing: .04em; }
.v-mini i { font: 600 10.5px/1.2 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; }
.v-pick-go { display: flex; justify-content: flex-end; }
.v-pick-go .v-btn { min-width: 280px; }

/* ---------- THE WORLD: the HUD and the place card ---------- */
.v-hud { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px)); pointer-events: none; }
.v-hud > * { pointer-events: auto; }
.v-me { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; background: rgba(12, 11, 16, .84); box-shadow: inset 0 0 0 1px var(--v-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: box-shadow .15s; }
.v-me:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-face { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: #0B0B10; box-shadow: 0 0 0 2px var(--c); }
.v-face > .sav, .v-face > .v-flat { width: 150%; height: auto; margin: -8% 0 0 -25%; }
.v-me-id { display: grid; gap: 5px; min-width: 120px; text-align: left; }
.v-me-id b { font: italic 700 20px/1 var(--f-head); }
.v-me-id i { font: 600 11.5px/1 var(--f-text); letter-spacing: .12em; color: var(--ink-2); font-style: normal; white-space: nowrap; }
.v-xp { display: block; height: 4px; background: rgba(249, 244, 238, .13); overflow: hidden; }
.v-xp[hidden] { display: none; }                      /* 4.0.1 · the HUD's PLAYER LEVEL bar, until SAN's server answers */
.v-xp > i { display: block; height: 100%; background: var(--c, var(--v-go)); }
/* 3.5 · the card makes room for its NEW tag (it sat over the end of your name) */
.v-hud .v-me.has-new { padding-right: 34px; }
.v-new { position: absolute; top: -7px; right: -7px; font: 700 10px/1 var(--f-disp); letter-spacing: .12em; font-style: normal; color: #0A0A0A; background: var(--v-go); padding: 4px 6px; }
.v-hud-r { display: flex; gap: 8px; }
.v-hb { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; background: rgba(12, 11, 16, .84); box-shadow: inset 0 0 0 1px var(--v-line);
  font: 700 12.5px/1 var(--f-disp); letter-spacing: .1em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v-hb:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); }
/* 3.5.1 · the music button (the title and the map): a speaker, struck through when the music is off */
.v-hb-mus { width: 46px; padding: 0; justify-content: center; }
.v-hb-mus.off .v-ui { color: var(--mute, #85827F); }
/* SUNCORE SLAM · the same switch at the top of MY FIGHTER and the Locker, beside the sheet's name: as tall as BACK, a square */
.v-bar-r > .v-bar-mus { width: 44px; min-height: 44px; flex: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* (the narrowest phones, 320 wide: the Locker's title, BACK, the switch and the name don't fit on one line. The title keeps its
   word whole and the switch and the name go under it, as OVERPRINT's bar does there) */
@media (max-width: 340px) {
  .v-bar:has(> .v-bar-r > .v-bar-mus) { flex-wrap: wrap; row-gap: 6px; }
  .v-bar:has(> .v-bar-r > .v-bar-mus) .v-bar-t { min-width: min-content; }
}
.v-title-snd { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 14px); z-index: 2; }
.v-title .v-title-snd { width: 46px; min-height: 46px; }
.v-land-say { position: absolute; top: calc(88px + env(safe-area-inset-top, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); max-width: min(420px, calc(100% - 32px)); margin: 0;
  padding: 9px 14px; background: rgba(12, 11, 16, .82); box-shadow: inset 3px 0 0 var(--c); font: 500 14px/1.35 var(--f-text); opacity: 0; pointer-events: none; }
.v-land-say b { font: 700 11px/1 var(--f-disp); letter-spacing: .12em; color: var(--c); margin-right: 8px; }
.v-land-say.in { animation: v-say 4.2s ease both; }
@keyframes v-say { 0% { opacity: 0; transform: translateY(-4px); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.v-place { position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(450px, calc(100% - 32px)); max-height: calc(100% - 130px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(12, 11, 16, .94); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--v-line), 0 24px 60px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: v-up .35s var(--v-ease) both; }
.v-place-h { display: grid; gap: 6px; padding: 14px 16px 4px 22px; }
/* 3.1 · the head: NEXT, where it is and the arrows on one line; the name on its own line, whole words only */
.v-place-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-place-top > .v-k { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; text-wrap: balance; line-height: 1.3; }   /* 3.5 · wraps: it was cut (WARDEN OF THE OPEN G…) */
.v-place-t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v-place-h h2 { font: italic 700 clamp(30px, 3.4vw, 40px)/.95 var(--f-head); text-transform: uppercase; color: var(--c); overflow-wrap: normal; word-break: normal; text-wrap: balance; }
@media (min-width: 761px) { .v-place.at-r { left: auto; right: calc(16px + env(safe-area-inset-right, 0px)); } }
.v-place-t .v-rec { padding: 4px 7px; box-shadow: inset 0 0 0 1px var(--v-line-2); font: 600 12px/1 var(--f-mono); }
.v-place.locked h2 { color: color-mix(in srgb, var(--c) 55%, #555); }
.v-next { display: inline-block; margin-right: 8px; padding: 3px 6px; font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: #0A0A0A; background: var(--v-go); vertical-align: 1px; }
.v-rec { font: 600 12px/1 var(--f-mono); color: var(--ink); letter-spacing: .02em; }
.v-place-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.v-pn { display: grid; place-items: center; width: 40px; height: 40px; box-shadow: inset 0 0 0 1px var(--v-line); color: var(--ink-2); }
.v-pn:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-pn-n { font: 600 11px/1 var(--f-mono); color: var(--dim); padding: 0 6px; }
.v-place-b { overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 14px 22px; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; }
.v-place-go { display: flex; gap: 10px; padding: 12px 18px 18px 22px; border-top: 1px solid var(--v-line); }
.v-place-go .v-btn.go { flex: 1; min-height: 54px; font-size: 16px; letter-spacing: .14em; }
.v-creed { font: italic 500 15px/1.4 var(--f-text); color: var(--c); }
.v-goal { font: 600 14px/1.4 var(--f-text); color: var(--ink); }
.v-goal i { display: inline-block; margin-right: 8px; padding: 3px 6px; font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: #0A0A0A; background: var(--c); vertical-align: 1px; }
.v-rw { display: flex; flex-wrap: wrap; gap: 6px; }
.v-rw-c { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; box-shadow: inset 0 0 0 1px var(--v-line); background: rgba(255, 255, 255, .02); }
.v-rw-c > .v-pa, .v-rw-c > .v-ic { width: 34px; height: 34px; }
.v-rw-c > .v-ic { padding: 7px; background: var(--v-tile); color: var(--ink); }
.v-rw-c > span { display: grid; gap: 3px; }
.v-rw-c i { font: 600 11px/1 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; }   /* 2.1: 11 px (was 9.5) */
.v-rw-c b { font: 700 12.5px/1.15 var(--f-disp); letter-spacing: .04em; }
.v-rw-c.done { opacity: .7; }
.v-rw-c.done b::after { content: ' ✓'; color: var(--v-ok); }
.v-rw-c.had { opacity: .62; }                                                 /* 2.1: a starter's own piece: nothing to win */
.v-rw-c em { font: 700 11px/1 var(--f-mono, monospace); letter-spacing: .06em; color: var(--ink-2); font-style: normal; }
.v-lo-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 12px 12px 12px 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lo-now { display: grid; gap: 4px; min-width: 0; }
.v-lo-parts { font: 700 13px/1.35 var(--f-disp); letter-spacing: .04em; }
.v-lo-quick { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.v-lo-quick .v-k { margin-right: 4px; }
.v-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; text-align: left; }
.v-toggle > i { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .16); transition: background .2s; }
.v-toggle > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); transition: transform .2s var(--v-ease), background .2s; }
.v-toggle.on > i { background: var(--v-go); }
.v-toggle.on > i::after { transform: translateX(16px); background: #0A0A0A; }
.v-toggle span { font: 700 12.5px/1.35 var(--f-disp); letter-spacing: .06em; }
.v-toggle em { display: block; font: 400 13px/1.35 var(--f-text); letter-spacing: 0; color: var(--ink-2); font-style: normal; }
.v-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 42px; font: 700 12.5px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink-2); }
.v-more > summary::-webkit-details-marker { display: none; }
.v-more > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; flex: none; }
.v-more[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.v-more > summary:hover { color: var(--ink); }
.v-more summary b { font: 600 12px/1 var(--f-mono); color: var(--ink); letter-spacing: 0; }
.v-file { list-style: none; padding: 0; display: grid; gap: 7px; }
.v-file li { position: relative; padding-left: 24px; font: 500 13.5px/1.4 var(--f-text); color: var(--dim); }
.v-file li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 7px; height: 1.5px; background: var(--dim); }
.v-file li.known { color: var(--ink); }
.v-file li.known::before { display: none; }
.v-file li .v-ui { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; color: var(--v-ok); }

/* ---------- MY FIGHTER ---------- */
.v-hub { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.v-hub-me { display: grid; gap: 14px; }
.v-hub-me .v-stage.big { width: min(100%, 400px, 46vh); justify-self: center; }
.v-hub-id { display: grid; gap: 12px; }
.v-hub-x { display: grid; gap: 14px; }
.v-lvl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.v-lvl b { font: 700 13px/1 var(--f-disp); letter-spacing: .12em; }
.v-lvl em { font: 600 12px/1 var(--f-mono); color: var(--ink-2); font-style: normal; }
.v-lvl .v-xp { height: 6px; }
/* 4.0.1 · MY FIGHTER: the PLAYER LEVEL above the fighter's own, one tap to its screen */
.v-lvl-pl { width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.v-lvl-pl em { display: inline-flex; align-items: center; gap: 4px; }
.v-lvl-pl em .v-ui { width: 14px; height: 14px; display: inline-grid; }
.v-lvl-pl em .v-ui svg { width: 100%; height: 100%; }
.v-lvl-pl:focus-visible { outline: 2px solid var(--v-go); outline-offset: 4px; }
.v-unseen { display: grid; gap: 4px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--v-line); font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.v-unseen b { color: var(--ink); font-weight: 600; }
.v-hub-kit { display: grid; gap: 12px; align-content: start; }
.v-lo-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--v-line); }
.v-lo-name { margin-top: 4px; font: italic 700 28px/1 var(--f-head); text-transform: uppercase; }
.v-hub-kit .v-sec { margin-top: 8px; }
.v-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v-slots.one { grid-template-columns: minmax(0, 1fr); }
.v-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 88px; padding: 12px; text-align: left; background: var(--v-panel-2);
  box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .15s, background-color .15s; }
.v-slot:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); background: var(--v-panel-3); }
.v-slot > .v-pa { width: 64px; }
.v-slot > .v-ui { width: 64px; height: 64px; padding: 21px; background: rgba(255, 255, 255, .03); }
.v-slot-ic { display: grid; place-items: center; width: 64px; height: 64px; background: var(--v-tile); }
.v-slot-ic .v-ic { width: 30px; height: 30px; }
.v-slot > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.v-slot i { font: 600 11px/1.2 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-slot b { display: flex; align-items: center; gap: 8px; font: 700 16px/1.1 var(--f-disp); letter-spacing: .04em; }
.v-slot b .v-ic { width: 18px; height: 18px; }
.v-slot em { font: 400 13.5px/1.35 var(--f-text); color: var(--ink-2); font-style: normal; }
.v-slot.empty { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-go) 45%, transparent); }
.v-slot.empty b { color: var(--v-go); }
.v-slot.empty > .v-ui { color: var(--v-go); }
.v-slot.locked { opacity: .55; }
.v-slot.look { grid-template-columns: auto minmax(0, 1fr) auto; }
.v-slot-pcs { display: flex; gap: 4px; }
.v-slot-pcs .v-pa { width: 44px; }
.v-slot-pcs .v-pa.hid { opacity: .5; }
.v-slot-pcs > .v-ui { width: 44px; height: 44px; padding: 13px; }
.v-slot-go { font: 700 12px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--v-line-2); padding: 11px 12px; }
.v-ab { display: grid; gap: 8px; }
.v-ab-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v-ab-b { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font: 700 12.5px/1 var(--f-disp); letter-spacing: .08em; box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-ab-b.mine { box-shadow: inset 0 0 0 1.5px var(--c); }
.v-ab-b:hover { background: rgba(255, 255, 255, .04); }
.v-ab-b .v-ui { width: 14px; height: 14px; }
.v-ab-b .v-ui svg { fill: currentColor; stroke: none; }
.v-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; }
.v-eq i { width: 3px; height: 4px; background: currentColor; opacity: .35; }
.v-ab-b.on { background: color-mix(in srgb, var(--c) 14%, transparent); }
.v-ab-b.on .v-eq i { opacity: 1; animation: v-eq .42s ease-in-out infinite alternate; }
.v-ab-b.on .v-eq i:nth-child(2) { animation-delay: -.12s; } .v-ab-b.on .v-eq i:nth-child(3) { animation-delay: -.3s; } .v-ab-b.on .v-eq i:nth-child(4) { animation-delay: -.2s; } .v-ab-b.on .v-eq i:nth-child(5) { animation-delay: -.36s; }
@keyframes v-eq { from { height: 3px; } to { height: 16px; } }
.v-ab-say { font: 400 13.5px/1.4 var(--f-text); color: var(--ink-2); min-height: 1.4em; }

/* ---------- ABILITIES, PERKS: one card each ---------- */
.v-ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.v-ab-card, .v-pk-card { display: grid; gap: 14px; align-content: start; padding: 18px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-ab-card.on, .v-pk-card.on { box-shadow: inset 0 0 0 1.5px var(--c); background: color-mix(in srgb, var(--c) 7%, var(--v-panel-2)); }
.v-ab-card.shut, .v-pk-card.shut { background: rgba(22, 21, 28, .55); }
.v-ab-card.shut header b, .v-pk-card.shut header b { color: var(--ink-2); }
.v-ab-card.flat { padding: 16px; background: rgba(255, 255, 255, .025); }
.v-ab-card header, .v-pk-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.v-ab-card header .v-ic, .v-pk-card header .v-ic { width: 26px; height: 26px; margin-top: 1px; }
.v-ab-card header b, .v-pk-card header b { display: block; font: 700 18px/1.1 var(--f-disp); letter-spacing: .04em; }
.v-ab-card header span, .v-pk-card header span { display: block; margin-top: 4px; font: 400 14px/1.35 var(--f-text); color: var(--ink-2); }
.v-pk-card.hot, .v-ab-card.hot { animation: v-hot 1s ease 2; }
button.v-slot.empty { cursor: pointer; }
button.v-slot.empty:hover, button.v-slot.empty:focus-visible { box-shadow: inset 0 0 0 2px var(--v-go); }
@keyframes v-hot { 50% { box-shadow: inset 0 0 0 2px var(--v-go); } }
.v-state { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; font-style: normal; padding: 5px 7px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink-2); }
.v-state.s-equipped { background: var(--c); color: #0A0A0A; box-shadow: none; }
.v-state.s-ready { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .5); }
.v-state.s-locked, .v-state.s-no, .v-state.s-level { color: var(--dim); }
.v-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.v-tiles.wide { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.v-tile { position: relative; display: grid; gap: 6px; align-content: start; padding: 6px 6px 10px; text-align: left; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .15s, background-color .15s; }
.v-tile:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-tile b { font: 700 12.5px/1.15 var(--f-disp); letter-spacing: .03em; overflow-wrap: anywhere; }
.v-tile i { font: 600 10px/1.25 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; text-transform: uppercase; }
.v-tile.on { box-shadow: inset 0 0 0 1.5px var(--c); }
.v-tile.on i { color: var(--c); }
.v-tile.pv { box-shadow: inset 0 0 0 2px var(--v-go); }
.v-tile.pv i { color: var(--v-go); }
.v-tile.ghost .v-pa img { filter: grayscale(1) brightness(.55); opacity: .55; }
.v-tile.ghost b { color: var(--ink-2); }
.v-tile.gold { box-shadow: inset 0 0 0 1.5px var(--v-gold); }
.v-tile.nofit .v-pa img { opacity: .6; }
.v-tile > .v-ui { position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; color: var(--ink-2); }
.v-ab-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v-how { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin-top: 6px !important; }
.v-how.short { margin-top: 0 !important; }
.v-how dt { font: 700 10.5px/1.6 var(--f-disp); letter-spacing: .12em; color: var(--dim); }
.v-how dd { font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.v-tried { display: inline-flex; gap: 4px; align-items: center; font: 600 11px/1 var(--f-text); letter-spacing: .1em; color: var(--v-ok); }
.v-tried .v-ui { width: 14px; height: 14px; }

/* ---------- FIGHTING STYLE ---------- */
.v-st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.v-st-card { display: grid; gap: 12px; align-content: start; padding: 22px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-st-card.on { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 8%, var(--v-panel-2)); }
.v-st-card.shut { background: rgba(22, 21, 28, .55); }
.v-st-card header { display: flex; align-items: center; gap: 12px; }
.v-st-card header b { flex: 1; font: italic 700 34px/1 var(--f-head); }
.v-st-card header .v-ic { width: 30px; height: 30px; }
.v-st-short { font: 700 15px/1.35 var(--f-disp); letter-spacing: .02em; }
.v-st { display: grid; gap: 4px; }
.v-st dt { margin-top: 8px; font: 700 10.5px/1.4 var(--f-disp); letter-spacing: .12em; color: var(--dim); }
.v-st dt.plus { color: var(--v-ok); }
.v-st dt.minus { color: #FFA184; }
.v-st dd { font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.v-st-card .v-btn.go { width: 100%; margin-top: 4px; }
.v-st-on { display: flex; gap: 8px; align-items: center; min-height: 48px; font: 700 13px/1 var(--f-disp); letter-spacing: .1em; color: var(--c); }
.v-st-on .v-ui { width: 18px; height: 18px; }
.v-unlock { display: grid; gap: 7px; }
.v-unlock p { display: flex; gap: 8px; align-items: center; font: 600 13px/1.35 var(--f-text); color: var(--ink-2); }
.v-unlock .v-ui { width: 15px; height: 15px; }
.v-unlock .v-xp > i { background: var(--ink-2); }
.v-unlock em { font: 600 12px/1 var(--f-mono); color: var(--ink); font-style: normal; }
.v-unlock .v-or { color: var(--dim); font-weight: 400; }

/* ---------- THE LOCKER (2.1): WARDROBE · ARMED · FITS, your fighter large in the middle, its slots around it ---------- */
.v-scr-locker { --v-max: 1480px; }
.v-scr-locker .v-body { padding-top: 0; }                 /* what sticks (the tabs, a phone's fighter) sticks flush to the top */
.v-scr-locker .v-lk { padding-top: 22px; }
.v-lk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.v-lk > * { min-width: 0; }
.v-lk-look { display: grid; gap: 10px; align-content: start; }
.v-lk-k { display: flex; gap: 12px; align-items: baseline; justify-content: center; }
.v-lk-k b { font: 700 13px/1 var(--f-disp); letter-spacing: .22em; }
.v-lk-k span { font: 400 13.5px/1.3 var(--f-text); color: var(--dim); }
.v-lk-who { justify-self: start; font: 600 12px/1.3 var(--f-text); letter-spacing: .1em; color: var(--dim); }
.v-lk-who b { font: italic 700 20px/1 var(--f-head); text-transform: uppercase; letter-spacing: 0; color: var(--c); margin-right: 6px; }
.v-lk-who em { font-style: normal; color: var(--ink); white-space: nowrap; }
.v-doll { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(150px, 210px); gap: 14px; align-items: center; }
.v-col { display: grid; gap: 6px; align-content: center; min-width: 0; }
.v-ds { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 4px 10px 4px 4px; text-align: left; background: rgba(22, 20, 28, .92); box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .12s, background-color .12s, opacity .12s; }
.v-col.r .v-ds { grid-template-columns: minmax(0, 1fr) 50px; padding: 4px 4px 4px 10px; text-align: right; }
.v-col.r .v-ds-art { order: 2; }
.v-ds:hover { background: #201E28; box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-ds-art { width: 50px; height: 50px; }
.v-ds-art .v-pa { width: 50px; }
.v-ds-in { display: grid; gap: 3px; min-width: 0; }
.v-ds-in i { font: 600 10px/1 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ds-in b { font: 700 13.5px/1.1 var(--f-disp); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ds-in em { font: 700 10.5px/1 var(--f-disp); letter-spacing: .08em; color: var(--v-go); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ds-in em.hid { color: var(--dim); }
.v-ds.on { background: #26232F; box-shadow: inset 0 0 0 1.5px var(--ink); }
.v-ds.on .v-ds-in i { color: var(--ink-2); }   /* 3.5 · the dim label on the chosen slot's lighter ground was 4.3:1 (axe); now above 4.5:1 */
.v-ds.pv { background: rgba(252, 76, 1, .1); box-shadow: inset 0 0 0 1.5px var(--v-go); }
.v-ds.pv .v-ds-in i { color: var(--v-go); }
.v-ds.hid { opacity: .62; }
.v-ds.none .v-ds-art { outline: 1px dashed rgba(255, 255, 255, .16); outline-offset: -6px; }
.v-ds.none .v-ds-in b { color: rgba(255, 255, 255, .3); }
.v-dot { display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: 2px; border-radius: 50%; background: var(--v-go); text-decoration: none; }
.v-lk-mid { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.v-lk-mid .v-stage { width: min(100%, 58vh, 600px); }
.v-pv-tag { position: absolute; bottom: 3%; left: 50%; z-index: 5; transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; background: rgba(0, 0, 0, .82); box-shadow: inset 0 0 0 1px var(--v-go);
  font: 700 11px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink); }
.v-lk-off { font: 400 13px/1.3 var(--f-text); color: var(--dim); text-align: center; min-height: 1.3em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-lk-acts { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 40px; }
/* the panel: three tabs over what each mode does */
.v-lk-panel { display: grid; align-content: start; min-width: 0; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lk-tabs { display: flex; position: sticky; top: 0; z-index: 4; background: var(--v-panel-2); box-shadow: inset 0 -1px 0 var(--v-line); }
.v-lk-tab { flex: 1 1 0; min-height: 52px; padding: 0 10px; text-align: center; font: 700 13px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink-2); box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
.v-lk-tab em { font: 600 11.5px/1 var(--f-mono); letter-spacing: 0; font-style: normal; color: var(--dim); margin-left: 4px; }
.v-lk-tab:hover { color: var(--ink); }
.v-lk-tab.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--v-go); }
.v-lk-pane { display: grid; gap: 14px; align-content: start; padding: 16px; min-width: 0; }
.v-lk-pane > .v-intro { margin: 0; }
/* WARDROBE: slot chips, what to show, yours and the preview catalog */
.v-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.v-cat { position: relative; min-height: 38px; padding: 0 12px; font: 700 11.5px/1 var(--f-disp); letter-spacing: .08em; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--v-line); transition: background-color .12s, color .12s, box-shadow .12s; }
.v-cat .v-dot { position: absolute; top: 5px; right: 5px; margin: 0; }
.v-cat:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-cat.has { color: var(--ink); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-cat.on { background: var(--ink); color: #0A0A0A; box-shadow: none; }
.v-strip { display: none; }
.v-src { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-src-b { min-height: 38px; padding: 0 14px; font: 700 11.5px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink-2); }
.v-src-b:hover { color: var(--ink); }
.v-src-b.on { color: var(--ink); background: rgba(249, 244, 238, .08); box-shadow: inset 0 -2px 0 var(--v-go); }
.v-wsec { display: grid; gap: 10px; }
.v-wsec > .v-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v-wsec > .v-sec span { font: 400 12.5px/1.3 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--dim); }
.v-wsec > .v-sec .v-btn.quiet { margin-left: auto; }
.v-wsec.pv > .v-sec { color: var(--v-go-2); }
.v-wtiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.v-wt { padding: 4px 4px 8px; gap: 5px; }
.v-wt b { font-size: 11px; letter-spacing: .02em; }
.v-wt i { font-size: 9.5px; letter-spacing: .08em; }
.v-wt .v-on { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 6px; background: var(--ink); color: #0A0A0A; font: 700 9.5px/1 var(--f-disp); letter-spacing: .1em; font-style: normal; }
.v-wt .v-on.pv { background: var(--v-go); color: #0A0A0A; }
/* 3.8.1 · INSPECT: DETAILS holds what isn't needed at a glance */
.v-insp-more { margin-top: 14px; }
.v-insp-more > summary { font: 700 12px/1 var(--f-disp); letter-spacing: .12em; }
.v-insp-more > * + * { margin-top: 10px; }
.v-own-l { font: 500 13px/1.45 var(--f-text); color: var(--ink-2); }
/* 3.8.1 · NEW: a piece you got and haven't looked at (the dot on its slot means the same, and only that) */
.v-wt .v-new-t { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 6px; background: var(--v-go); color: #0A0A0A; font: 700 9.5px/1 var(--f-disp); letter-spacing: .1em; font-style: normal; }
.v-wt.new { box-shadow: inset 0 0 0 1.5px var(--v-go); }
.v-wt.new.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.v-hb.v-hb-lk { position: relative; }
.v-hb.v-hb-lk .v-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; margin: 0; }
.v-wt.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.v-wt.on i { color: var(--ink-2); }
.v-wt.focus:not(.on):not(.pv) { box-shadow: inset 0 0 0 1px var(--v-line-2); }
/* art SAN's CDN doesn't have: an empty frame, said so */
.v-pa.noart { display: grid; place-items: center; }
.v-pa.noart > i { font: 700 9px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--dim); }
/* ARMED */
.v-arm-more { grid-template-columns: minmax(0, 1fr); }
.v-arm-slots .v-slot .v-btn { margin-left: auto; align-self: center; }
.v-arm-slots .v-slot > span { min-width: 0; }
@media (min-width: 1100px) {
  .v-lk { grid-template-columns: minmax(0, 1fr) minmax(370px, 440px); gap: 24px; align-items: start; }
  .v-doll { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(150px, 190px); gap: 12px; }
  .v-lk-look { position: sticky; top: 0; }
  /* 3.3 · IN FIGHT in the side column: one piece per row (two side by side left STOP USING on top of the name) */
  .v-lk .v-arm-slots { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- LOADOUTS ---------- */
.v-lo-save, .v-lo-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px 14px 10px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lo-save { box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-lo-card.on { box-shadow: inset 0 0 0 1.5px var(--c); }
.v-lo-save .v-stage, .v-lo-card .v-stage { width: 112px; }
.v-lo-in { display: grid; gap: 8px; min-width: 0; }
.v-lo-in > b { font: italic 700 26px/1 var(--f-head); text-transform: uppercase; overflow-wrap: anywhere; }
.v-lo-in > p { font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }
.v-lo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; margin-top: 16px; }
.v-in { flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: #0D0C11; color: var(--ink); box-shadow: inset 0 0 0 1px var(--v-line-2);
  font: 700 14px/1 var(--f-disp); letter-spacing: .06em; text-transform: uppercase; }
.v-in::placeholder { color: var(--dim); }
.v-in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--v-go); }
.v-ask { font: 600 13px/1 var(--f-text); color: var(--v-bad); }

/* ---------- INSPECT ---------- */
.v-insp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.v-insp-art { display: grid; gap: 16px; justify-items: center; }
.v-insp-art .v-stage.sm { width: min(100%, 230px); }
.v-insp-art .v-stage > .v-k { position: absolute; top: 2px; left: 0; z-index: 400; padding: 3px 6px; background: color-mix(in srgb, var(--v-bg, #0A0A0E) 82%, transparent); }
/* 3.1 · on a phone the piece on the dummy and the piece on you sit side by side, so the name and the ability come up sooner */
@media (max-width: 640px) { .v-insp-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; } .v-insp-art .v-dum.xl, .v-insp-art .v-pa.xl, .v-insp-art .v-stage.sm { width: 100%; } .v-insp-art .v-stage > .v-k { font-size: 9.5px; } }
.v-insp-id { display: grid; gap: 14px; }
.v-own { padding: 11px 12px; box-shadow: inset 0 0 0 1px var(--v-line); font: 400 14px/1.5 var(--f-text); color: var(--ink-2); }
.v-own b { display: inline-block; margin-right: 8px; padding: 4px 7px; font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; color: #0A0A0A; background: var(--ink-2); vertical-align: 1px; }
.v-own.t-sanbound b { background: var(--v-gold); }
.v-own.t-lab b { background: #BCD7EC; }
.v-own.t-starter b { background: var(--c); }
.v-own.t-not-yet b { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-mast { display: grid; gap: 10px; }
.v-mast .v-k em { font: 600 11.5px/1 var(--f-mono); color: var(--ink-2); font-style: normal; letter-spacing: .02em; }
.v-pips { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 6px; }
.v-pips i { width: 16px; height: 6px; background: rgba(255, 255, 255, .14); }
.v-pips i.on { background: var(--c, var(--ink)); }
.v-pips i.new { background: var(--v-go); }
.v-hist { list-style: none; padding: 0; display: grid; gap: 5px; margin-top: 4px; }
.v-hist li { font: 600 12px/1.4 var(--f-text); letter-spacing: .08em; color: var(--ink-2); }

/* ---------- COLLECTION ---------- */
.v-tabs { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--v-line); overflow-x: auto; scrollbar-width: none; }
.v-tabs button { position: relative; min-height: 48px; padding: 0 14px; font: 700 13px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink-2); white-space: nowrap; }
.v-tabs button:hover { color: var(--ink); }
.v-tabs button.on { color: var(--ink); }
.v-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--v-go); }
.v-cg { display: grid; gap: 12px; margin-bottom: 26px; }
.v-cg.other { opacity: .72; }
.v-cgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.v-cg.box { margin: 0; padding: 14px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); align-content: start; }
.v-cg.box .v-tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.v-list { list-style: none; padding: 0; display: grid; gap: 2px; }
.v-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 200px) auto; gap: 14px; align-items: center; padding: 13px 14px; background: var(--v-panel-2); }
.v-list li b { display: flex; gap: 8px; align-items: center; font: 600 14px/1.3 var(--f-disp); letter-spacing: .02em; }
.v-list li b i { font: 600 11px/1 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; }
.v-list li em { font: 600 12px/1 var(--f-mono); color: var(--ink-2); font-style: normal; white-space: nowrap; }
.v-list li.done b { color: var(--v-ok); }
.v-list li .v-ui { width: 16px; height: 16px; }
.v-list li .v-xp > i { background: var(--v-go); }
.v-list.rec li { grid-template-columns: minmax(0, 1fr) auto; }
/* 3.1 · a definition list (the ODDS rules): the label, then words that wrap */
.v-list.v-defs li { grid-template-columns: minmax(120px, 15em) minmax(0, 1fr); align-items: start; }
.v-list.v-defs li em { white-space: normal; font: 500 13.5px/1.45 var(--f-text); }
@media (max-width: 640px) { .v-list.v-defs li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.v-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.v-ach-c { display: grid; gap: 6px; align-content: start; padding: 16px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); opacity: .58; }
.v-ach-c.done { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--v-gold); }
.v-ach-c .v-ui { color: var(--v-gold); }
.v-ach-c b { font: 700 14px/1.2 var(--f-disp); letter-spacing: .06em; }
.v-ach-c span { font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.v-story { padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 14.5px; }

/* ---------- MENU, CONTROLS, SAVE / LOAD ---------- */
.v-menu { display: grid; gap: 2px; max-width: 720px; margin-bottom: 18px; }
.v-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 17px 18px; text-align: left; background: var(--v-panel-2); transition: background-color .15s; }
.v-mrow:hover { background: var(--v-panel-3); }
.v-mrow b { font: 700 15px/1.1 var(--f-disp); letter-spacing: .06em; }
.v-mrow span { grid-column: 1; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }
.v-mrow .v-ui { grid-row: 1 / span 2; grid-column: 2; color: var(--dim); }
.v-mrow.warn b { color: var(--v-bad); }
.v-ask-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 18px; background: rgba(255, 90, 74, .08); box-shadow: inset 0 0 0 1px rgba(255, 110, 95, .4); }
.v-ask-row p { flex: 1 1 100%; color: var(--ink); }
.v-ctl { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr); gap: 10px 18px; align-items: baseline; }
.v-ctl dt { font: 700 13px/1.3 var(--f-mono); color: var(--ink); }
.v-ctl dd { font: 400 14.5px/1.45 var(--f-text); color: var(--ink-2); }
.v-txt { width: 100%; min-height: 96px; padding: 10px; border: 0; border-radius: 0; background: #0D0C11; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--v-line-2); font: 12px/1.4 var(--f-mono); resize: vertical; }
.v-msg { padding: 11px 13px; box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink); margin-bottom: 14px !important; }
.v-msg.bad { color: var(--v-bad); box-shadow: inset 0 0 0 1px rgba(255, 110, 95, .5); }

/* ---------- CHOOSE A PIECE ---------- */
.v-sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 330px)); justify-content: start; gap: 14px; margin-bottom: 16px; }   /* 3.2 · one option stays a card, never the whole screen */
.v-sig { display: grid; gap: 14px; align-content: start; padding: 16px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-sig.on { box-shadow: inset 0 0 0 2px var(--c); }
.v-sig > .v-pa.xl { width: 100%; }
.v-sig-in { display: grid; gap: 8px; }
.v-sig h3 { font: italic 700 32px/1 var(--f-head); }
.v-sig-ab { display: flex; gap: 8px; align-items: center; }
.v-sig-ab b { font: 700 16px/1 var(--f-disp); letter-spacing: .05em; }
.v-sig-l { font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }

/* ---------- AFTER A FIGHT ---------- */
.v-res { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* 3.5 · a short result (a loss: your fighter, the score, one tip) sits in the middle of the space above the dock, not at its top
   with half a phone of nothing under it. `safe`: a long one still starts at the top and scrolls (older engines: start) */
.v-res-in { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 16px; align-content: start; align-content: safe center; justify-items: center; text-align: center;
  padding: clamp(24px, 5vh, 60px) max(16px, calc((100% - 780px) / 2)) 30px; scrollbar-width: thin; }
.v-res-in.anchored { align-content: start; }   /* 3.6 · centred once, then held (BUG3: what opens grows down, nothing jumps) */
.v-res-h { font: italic 700 clamp(56px, 11vw, 104px)/.9 var(--f-head); text-transform: uppercase; color: var(--c); text-shadow: 0 0 70px color-mix(in srgb, var(--c) 45%, transparent);
  animation: v-win .7s var(--v-ease) both; overflow-wrap: anywhere; }
.v-res.lost .v-res-h { font-size: clamp(40px, 8vw, 66px); color: var(--ink-2); text-shadow: none; animation-duration: .4s; }
@keyframes v-win { from { transform: scale(1.06); letter-spacing: .05em; } to { transform: none; } }
.v-score { font: 600 30px/1 var(--f-mono); letter-spacing: .02em; }
.v-score i { font-style: normal; color: var(--dim); margin: 0 6px; }
.v-res-sub { max-width: 52ch; color: var(--ink-2); }
.v-hint { display: flex; gap: 12px; align-items: baseline; max-width: 60ch; padding: 12px 16px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 3px 0 0 var(--ink-2); color: var(--ink); }
.v-hint i { flex: none; font: 700 11px/1 var(--f-disp); letter-spacing: .14em; color: var(--dim); font-style: normal; }
.v-xpwin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 10px; align-items: baseline; width: min(100%, 540px); }
.v-xpn { font: 700 46px/1 var(--f-mono); color: var(--v-go); text-align: left; }
.v-xpwin > span:not(.v-xp) { justify-self: start; font: 700 14px/1 var(--f-disp); letter-spacing: .16em; color: var(--ink-2); }
.v-xp.big { grid-column: 1 / -1; height: 8px; }
.v-xp.big > i { width: var(--a); background: var(--v-go); transition: width 1.3s var(--v-ease) .2s; }
.v-xpwin.go .v-xp.big > i { width: var(--b); }
.v-xpwin em { grid-column: 1 / -1; font: 700 12px/1.3 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); font-style: normal; text-align: left; }
.v-xpwin.lvl em { color: var(--v-go); animation: v-pop .5s var(--v-ease); }
@keyframes v-pop { 50% { transform: scale(1.06); } }
.v-unl-k { margin-top: 6px; }
.v-unl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 8px; width: 100%; text-align: left; }
.v-unl-c { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line-2); animation: v-up .5s var(--v-ease) both; }
.v-unl-c:nth-child(2) { animation-delay: .08s; } .v-unl-c:nth-child(3) { animation-delay: .16s; } .v-unl-c:nth-child(4) { animation-delay: .24s; } .v-unl-c:nth-child(n+5) { animation-delay: .32s; }
.v-unl-c > .v-pa, .v-unl-ic { width: 60px; height: 60px; }
.v-unl-ic { display: grid; place-items: center; background: var(--v-tile); }
.v-unl-ic .v-ic { width: 28px; height: 28px; color: var(--v-go); }
.v-unl-c b { display: block; margin: 4px 0 2px; font: 700 15.5px/1.15 var(--f-disp); letter-spacing: .04em; }
.v-unl-c > div > span { display: block; margin-bottom: 8px; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.v-unl-c .v-btn.sm { min-height: 36px; padding: 0 12px; font-size: 12px; }
@keyframes v-up { from { transform: translateY(10px); } to { transform: none; } }
.v-res-next { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: center; }
.v-res-next i { font: 700 11px/1 var(--f-disp); letter-spacing: .16em; color: var(--dim); font-style: normal; }
.v-res-next b { font: italic 700 28px/1 var(--f-head); text-transform: uppercase; }
.v-res-next em { flex-basis: 100%; font: 700 11.5px/1 var(--f-disp); letter-spacing: .12em; color: var(--v-go); font-style: normal; }
.v-details { width: 100%; text-align: left; border-top: 1px solid var(--v-line); padding-top: 6px; }
.v-details > summary { justify-content: center; }
.v-details > div { display: grid; gap: 12px; padding: 10px 0 6px; }
.v-why2 { list-style: none; padding: 0; display: grid; gap: 4px; }
.v-why2 li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; background: var(--v-panel-2); }
.v-why2 i { font: 600 11px/1.3 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; }
.v-why2 b { font: 700 13px/1.3 var(--f-disp); letter-spacing: .05em; text-align: right; }
.v-fired { display: flex; flex-wrap: wrap; gap: 8px; }
.v-fired span { display: inline-flex; gap: 6px; align-items: center; padding: 7px 10px; box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-fired b { font: 700 12px/1 var(--f-disp); letter-spacing: .06em; }
.v-fired em { font: 600 12px/1 var(--f-mono); color: var(--ink-2); font-style: normal; }
.v-fired .v-ic, .v-fired .v-ui { width: 16px; height: 16px; }
.v-voices { display: grid; gap: 6px; }
.v-voices p { font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.v-voices b { margin-right: 8px; font: 700 12px/1 var(--f-disp); letter-spacing: .08em; color: var(--ink); }
.v-deeds, .v-masts { list-style: none; padding: 0; display: grid; gap: 5px; }
.v-deeds li, .v-masts li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 13px/1.3 var(--f-text); color: var(--ink-2); }
.v-deeds li i { font-style: normal; color: var(--dim); }
.v-deeds b { font: 600 13px/1 var(--f-mono); color: var(--v-go); }
.v-masts em { font: 600 11px/1 var(--f-text); letter-spacing: .1em; color: var(--ink-2); font-style: normal; }
.v-res .v-dock { justify-content: center; }
.v-res .v-dock .v-btn { min-width: 210px; }

/* ---------- questions and toasts (over everything) ---------- */
.sgm-m { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 8, .72); pointer-events: auto; }
.sgm-m[hidden] { display: none; }
.v-modal { display: grid; gap: 12px; width: min(540px, 100%); padding: 26px; background: #121117; box-shadow: inset 0 0 0 1px var(--v-line-2), 0 30px 80px rgba(0, 0, 0, .6); animation: v-up .3s var(--v-ease) both; }
.v-modal h2 { font: italic 700 28px/1.05 var(--f-head); text-transform: uppercase; overflow-wrap: anywhere; }
.v-modal-l { font: 400 15px/1.5 var(--f-text); color: var(--ink-2); }
.v-modal-l b { color: var(--ink); font-weight: 600; }
.v-modal-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.v-toast { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(660px, calc(100% - 32px));
  padding: 10px 10px 10px 18px; background: #1B1922; box-shadow: inset 0 0 0 1px var(--v-line-2), 0 18px 50px rgba(0, 0, 0, .55); pointer-events: none;
  font: 500 14px/1.4 var(--f-text); color: var(--ink-2); transform: translate(-50%, 0); }
.v-toast[hidden] { display: none; }
/* 3.1 · on the map the card owns the bottom: notes come in at the top, under the HUD (never over the card or its button) */
html.v-onworld .v-toast { bottom: auto; top: calc(84px + env(safe-area-inset-top, 0px)); }
.v-toast.in { animation: v-toast .3s var(--v-ease); }
@keyframes v-toast { from { transform: translate(-50%, 10px); } }
.v-toast p { flex: 1; min-width: 0; }
.v-toast b { color: var(--ink); font-weight: 600; }
.v-toast button { pointer-events: auto; flex: none; min-height: 40px; padding: 0 12px; font: 700 12px/1 var(--f-disp); letter-spacing: .12em; color: var(--v-go); }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .v-hub, .v-insp { grid-template-columns: minmax(0, 1fr); }
  .v-hub-me { grid-template-columns: minmax(0, 1fr); }
  .v-hub-me .v-stage.big { width: min(76vw, 40vh, 380px); }
  .v-st-grid { grid-template-columns: minmax(0, 1fr); }
  .v-doll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .v-lk-mid { grid-column: 1 / -1; order: -1; }
  .v-lk-mid .v-stage { width: min(80vw, 44vh, 440px); }
  .v-col.r .v-ds { grid-template-columns: 50px minmax(0, 1fr); padding: 4px 10px 4px 4px; text-align: left; }
  .v-col.r .v-ds-art { order: 0; }
}
@media (max-width: 760px) {
  html.v-onworld .v-world { transform: translateY(calc(-1 * var(--v-lift, 17vh))); transition: transform .45s var(--v-ease); }
  html .v-world { transition: transform .45s var(--v-ease); }
  /* the Locker on a phone: your fighter stays in view while you browse (sticky), the slots become one strip of cards above
     the pieces (what's on, at a glance; tap one to show its pieces), the side columns go */
  .v-doll { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
  .v-doll .v-col { display: none; }
  .v-lk-k { justify-content: flex-start; }
  .v-lk-k span { font-size: 12.5px; }
  .v-lk-mid { order: -1; }
  .v-lk-mid .v-stage { width: min(70vw, 36vh, 340px); }
  .v-scr-locker .v-lk { padding-top: 0; }
  .v-lk.t-wardrobe .v-lk-look { position: sticky; top: 0; z-index: 6; margin-inline: -16px; padding: 8px 16px 4px; background: #0C0B10; box-shadow: 0 10px 18px rgba(0, 0, 0, .45); isolation: isolate; }
  .v-lk.t-wardrobe .v-lk-mid .v-stage { width: min(58vw, 27vh, 250px); }
  .v-lk.t-wardrobe .v-lk-who, .v-lk.t-wardrobe .v-lk-k { display: none; }
  .v-lk-acts { min-height: 40px; gap: 14px; }   /* 3.8.2 · its height kept with or without its buttons, so the avatar doesn't move */
  .v-lk-panel { margin-inline: -16px; box-shadow: none; background: none; }
  .v-lk-tabs { top: 0; }
  .v-lk.t-wardrobe .v-lk-tabs { position: static; }
  .v-lk-pane { padding: 12px 16px 16px; gap: 12px; }
  .v-lk-pane > .v-intro { display: none; }
  .v-cats { display: none; }
  .v-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .v-strip::-webkit-scrollbar { display: none; }
  .v-strip .v-ds { flex: 0 0 auto; width: 168px; grid-template-columns: 40px minmax(0, 1fr); padding: 4px 10px 4px 4px; text-align: left; }
  .v-strip .v-ds-in b { white-space: normal; text-wrap: balance; }   /* 3.5 · a piece's name whole: SMALLHOOPS lost its end in 150 px */
  .v-strip .v-ds-art, .v-strip .v-ds-art .v-pa { width: 40px; height: 40px; }
  .v-wtiles { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
  .v-wt b { font-size: 10.5px; }
  .v-scr-locker .v-dock-l { display: none; }                             /* a phone's dock: just the buttons (3.8.2: a preview too: its tag is on the avatar, and the line made the dock taller) */
  .v-scr-locker .v-dock-b { flex: 1 1 100%; }
  .v-fs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(150px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .v-f { scroll-snap-align: center; }
  .v-pick-go .v-btn { width: 100%; min-width: 0; }
  .v-place { left: 0; right: 0; bottom: 0; width: 100%; max-height: min(62%, 560px); box-shadow: inset 0 3px 0 var(--c), 0 -20px 50px rgba(0, 0, 0, .45); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .v-place-h { padding: 16px 12px 2px 16px; }
  .v-place-b { padding: 4px 16px 12px; }
  .v-place-go { padding: 10px 16px 14px; }
  .v-land-say { top: calc(80px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 600px) {
  .v-hub-me { grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 4px 14px; }
  .v-hub-me .v-stage.big { width: 124px; }
  .v-hub-x { grid-column: 1 / -1; margin-top: 6px; }
  .v-hub-id { gap: 8px; }
  .v-hub-id .v-name { font-size: 32px; }
  /* 4.0.1 · the level's name on its own line, the bar and its XP under it (PLAYER LEVEL and FIGHTER LEVEL left the bar no room) */
  .v-lvl { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .v-lvl b { grid-column: 1 / -1; }
  .v-count { font-size: 0; letter-spacing: 0; }
  .v-count b { font-size: 13px; }
  .v-bar { min-height: 58px; gap: 10px; padding-block: 8px; }
  .v-bar-t { font-size: 19px; }
  .v-back { padding: 0 10px 0 6px; font-size: 12px; max-width: 38vw; }
  .v-bar-r .v-btn.sm { padding: 0 10px; font-size: 12px; }
  .v-body { padding-block: 18px 26px; }
  .v-dock { padding-block: 10px; gap: 8px; }
  .v-dock .v-btn, .v-dock-b .v-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .v-dock-b { flex: 1 1 100%; }
  .v-slots { grid-template-columns: minmax(0, 1fr); }
  /* the HUD on a phone (2.1): the buttons keep their size and always fit; your badge gives way (a long title is cut short) */
  .v-hud { gap: 8px; }
  .v-hud-r { flex: none; gap: 6px; }
  .v-hb { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .v-hb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v-me { flex: 0 1 auto; min-width: 0; gap: 10px; padding-right: 12px; }
  .v-face { width: 44px; height: 44px; }
  .v-me-id { min-width: 0; }
  .v-me-id b { font-size: 18px; }
  .v-me-id b, .v-me-id i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v-ab-grid { grid-template-columns: minmax(0, 1fr); }
  .v-tiles { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .v-tiles.wide { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .v-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .v-list li .v-xp { grid-column: 1 / -1; grid-row: 2; }
  .v-lo-save, .v-lo-card { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .v-lo-save .v-stage, .v-lo-card .v-stage { width: 84px; }
  .v-ctl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .v-ctl dd { margin-bottom: 10px; }
  .v-res .v-dock .v-btn { min-width: 0; }
  .v-unl-c { grid-template-columns: 60px minmax(0, 1fr); }
  .v-unl-c > .v-pa, .v-unl-ic { width: 60px; height: 60px; }
  .v-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .v-stage.big > .sav, .v-res-h, .v-unl-c, .v-place, .v-pick-info.in, .v-modal, .sgm-m, .v-land-say.in, .v-pk-card.hot, .v-ab-card.hot, .v-xpwin.lvl em { animation: none !important; }
  .v-land-say.in { opacity: 1; }
  .v-xp.big > i { transition: none; }
  .v-ab-b.on .v-eq i { animation: none; height: 12px; }
}
/* the piece pick on a phone: the piece beside its words, so all three choices fit on about one screen */
@media (max-width: 760px) {
  .v-sig { grid-template-columns: 108px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px; }
  .v-sig > .v-pa.xl { width: 108px; }
  .v-sig h3 { font-size: 26px; }
  .v-sig .v-row { flex-wrap: wrap; }
}
/* the collection's tabs on a phone: all four in one row (they scroll only on a screen narrower than 375px) */
@media (max-width: 520px) {
  .v-tabs { justify-content: space-between; gap: 0; }
  .v-tabs button { padding: 0 6px; font-size: 12px; letter-spacing: .05em; }
}

/* =====================================================================
   1.0 · the public title (who made it, the three free fighters, headphones first), SETTINGS, CREDITS, SAVE / LOAD files
   ===================================================================== */
.v-title-by { font: 700 12px/1 var(--f-disp); letter-spacing: .34em; color: var(--ink-2); }
.v-title-cast { display: flex; justify-content: center; align-items: flex-end; margin: -6px 0 -10px; }
.v-title-cast .v-stage { width: clamp(86px, 21vw, 128px); margin: 0 -4px; }
.v-title-cast .v-stage:nth-child(2) { width: clamp(100px, 25vw, 150px); z-index: 1; }
.v-title-hp { display: flex; align-items: center; gap: 10px; max-width: 34ch; text-align: left; font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.v-title-hp b { font: 700 13px/1.2 var(--f-disp); letter-spacing: .08em; color: var(--ink); }
.v-title-hp .v-ui { width: 26px; height: 26px; color: var(--ink); flex: none; }
.v-title-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v-title-nav .v-btn.chip { min-height: 40px; padding: 0 16px; background: rgba(10, 10, 14, .55); }
.v-title-old .v-btn.quiet { min-height: 0; padding: 0; display: inline; color: var(--ink); }
.v-title-old p + p { margin-top: 6px; }
@media (max-height: 820px) {
  .v-title { gap: 14px; padding-block: 28px 56px; }
  .v-logo { font-size: clamp(50px, min(13vw, 11.5vh), 124px); }
  .v-title-cast .v-stage { width: clamp(76px, 12vh, 112px); }
  .v-title-cast .v-stage:nth-child(2) { width: clamp(88px, 14vh, 130px); }
}
@media (max-height: 640px) { .v-title-cast { display: none; } .v-title-hp { font-size: 13px; } }
/* SETTINGS: one row per choice, the choice's line under its name, the options as chips (the chosen one in your colour) */
.v-sets { display: grid; gap: 2px; max-width: 760px; margin-bottom: 18px; }
.v-set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 18px; background: var(--v-panel-2); }
.v-set-h { display: grid; gap: 6px; min-width: 0; }
.v-set-l { font: 400 14px/1.45 var(--f-text); color: var(--ink-2); max-width: 60ch; }
.v-seg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.v-seg .v-btn.chip { min-width: 64px; min-height: 40px; }
.v-seg .v-btn.chip.on { background: color-mix(in srgb, var(--c, #F9F4EE) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--c, #F9F4EE); color: var(--ink); }
@media (max-width: 640px) { .v-set { grid-template-columns: minmax(0, 1fr); } .v-seg { justify-content: flex-start; } }
/* CREDITS */
.v-cred { max-width: 760px; }
.v-cred-h { font: italic 700 clamp(30px, 6vw, 44px)/.95 var(--f-head); text-transform: uppercase; color: var(--ink); }
.v-cred a.v-btn { text-decoration: none; }
/* SAVE / LOAD: a file in, as a button (the input itself is invisible, the label is the button) */
.v-file-in { position: relative; overflow: hidden; cursor: pointer; }
.v-file-in input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.v-file-in:focus-within { outline: 2px solid var(--v-go); outline-offset: 3px; }
/* a full screen over the world (a menu, a result): the world behind it holds still. Nobody sees it move under the glass, and on a
   phone that's battery; in software-rendered browsers it was every frame of the blur redrawn */
html.v-covered .v-world *, html.v-covered .v-world *::before, html.v-covered .v-world *::after { animation-play-state: paused !important; }
/* a phone on its side (the same query the fight pauses on): one line over everything, until it's upright again */
.sc-turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .sc-turn { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
    background: radial-gradient(90% 80% at 50% 45%, #15131B, #08070B 70%); color: var(--ink, #F9F4EE); }
  .sc-turn b { font: italic 700 34px/.95 var(--f-head, sans-serif); }
  .sc-turn span { font: 500 15px/1.45 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); max-width: 36ch; }
}

/* =====================================================================
   2.0 · THE SOURCE (FOLDBACK): its card, lives, the phase strip, the ending, titles
   ===================================================================== */
.v-phases { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: ph; }
.v-phases li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-phases li > i { display: grid; place-items: center; width: 30px; height: 30px; font: 700 14px/1 var(--f-mono); font-style: normal; color: var(--dim); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-phases li > span { min-width: 0; display: grid; gap: 2px; }
.v-phases li b { font: 700 14px/1.1 var(--f-disp); letter-spacing: .08em; color: var(--ink); }
.v-phases li em { font: 400 13px/1.35 var(--f-text); font-style: normal; color: var(--ink-2); }
.v-phases li u { text-decoration: none; font: 700 10px/1 var(--f-disp); letter-spacing: .14em; color: #0A0A0A; background: var(--c); padding: 4px 6px; white-space: nowrap; }
.v-phases li .v-ui { width: 18px; height: 18px; color: var(--v-ok); }
.v-phases li.done > i { color: var(--v-ok); box-shadow: inset 0 0 0 1px var(--v-ok); }
.v-phases li.now { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--v-line-2); }
.v-phases li.now > i { color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.v-lives { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.v-lives i { width: 14px; height: 14px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px var(--v-line-2); }
.v-lives i.on { background: var(--c); box-shadow: none; }
.v-lives em { margin-left: 8px; font: 600 12px/1 var(--f-mono); letter-spacing: .08em; font-style: normal; color: var(--ink-2); }
.v-phstrip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(520px, 100%); }
.v-phstrip li { display: grid; gap: 4px; justify-items: center; padding: 10px 6px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); min-width: 0; }
.v-phstrip li i { font: 700 12px/1 var(--f-mono); font-style: normal; color: var(--dim); }
.v-phstrip li b { font: 700 11.5px/1.15 var(--f-disp); letter-spacing: .08em; color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.v-phstrip li em { font: 600 18px/1 var(--f-mono); font-style: normal; color: var(--ink); }
.v-phstrip li.won { box-shadow: inset 0 0 0 1px var(--v-ok); } .v-phstrip li.won em { color: var(--v-ok); }
.v-phstrip li.lost { box-shadow: inset 0 0 0 1px #FF4D3D; } .v-phstrip li.lost em { color: #FF4D3D; }
.v-phstrip li.skip { opacity: .5; }
.v-title-tag-me { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; }
.v-title-tag-me i { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--dim); }
.v-title-tag-me b { font: italic 700 18px/1 var(--f-head); color: var(--c); }
/* the ending: three quiet pages, the theme playing under them */
.v-end { pointer-events: auto; position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: radial-gradient(80% 60% at 50% 35%, rgba(252, 76, 1, .10), rgba(8, 8, 11, .97) 70%), #08080B; }   /* 2.1: opaque: the fight's controls don't show through the ending */
.v-end-in { overflow-y: auto; display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; padding: 28px 16px; }
.v-end-in .v-line { max-width: 46ch; }
.v-end-h { font: italic 700 clamp(40px, 7vw, 72px)/.92 var(--f-head); text-transform: uppercase; color: var(--ink); margin: 0; }
.v-end-art { width: min(320px, 62vw); aspect-ratio: 1; filter: saturate(.6) brightness(.8); animation: v-end-still 4s ease-out both; }
.v-end-art img { width: 100%; height: 100%; object-fit: contain; }
@keyframes v-end-still { from { filter: saturate(1.2) brightness(1.2); transform: translateY(-6px); } to { filter: saturate(.55) brightness(.75); transform: none; } }
.v-end-cast { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: min(560px, 100%); text-align: left; }
.v-end-cast li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px; background: var(--v-panel-2); box-shadow: inset 3px 0 0 var(--c); animation: v-up .5s var(--v-ease) both; }
.v-end-cast li:nth-child(2) { animation-delay: .12s; } .v-end-cast li:nth-child(3) { animation-delay: .24s; } .v-end-cast li:nth-child(4) { animation-delay: .36s; } .v-end-cast li:nth-child(5) { animation-delay: .48s; }
.v-end-cast .v-stage { width: 64px; }
.v-end-cast .v-stage img { width: 100%; height: 100%; object-fit: contain; }
.v-end-cast b { display: block; font: italic 700 20px/1 var(--f-head); color: var(--c); }
.v-end-cast i { display: block; font: 600 10.5px/1.3 var(--f-text); letter-spacing: .12em; font-style: normal; color: var(--dim); }
.v-end-cast em { display: block; margin-top: 3px; font: italic 400 14.5px/1.35 var(--f-text); color: var(--ink); }
.v-end-me { width: min(300px, 60vw); }
.v-end .v-dock { padding-inline: 16px; }
@media (prefers-reduced-motion: reduce) { .v-end-art, .v-end-cast li { animation: none; } }

/* =====================================================================
   2.0 · ONLINE: the hub, the queue, the room, the board
   ===================================================================== */
.v-hb-ol { box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .55); }
.v-hb-ol .v-ui { color: var(--v-go); }
.v-ol-me { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.v-ol-me .v-stage { width: 112px; }
.v-ol-me .v-name { font-size: clamp(28px, 4vw, 40px); }
.v-ol-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.v-ol-card { display: grid; gap: 10px; align-content: start; padding: 16px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line-2); min-width: 0; }
.v-ol-card h3 { margin: 0; font: italic 700 26px/1 var(--f-head); text-transform: uppercase; color: var(--ink); }
.v-ol-card.off h3 { color: var(--dim); }
.v-ol-card .v-btn { width: 100%; }
.v-ol-join { flex-wrap: nowrap; }
.v-ol-card { grid-template-columns: minmax(0, 1fr); }                       /* 2.1: the JOIN row can't widen its card */
.v-ol-join .v-btn { width: auto; flex: 0 0 auto; min-width: 96px; }
.v-in.code { font: 700 18px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; flex: 1 1 120px; }
.v-ol-wait { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 36px 8px; }
.v-ol-pulse { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 2px var(--v-go); animation: v-ol-pulse 1.6s ease-out infinite; }
@keyframes v-ol-pulse { 0% { box-shadow: 0 0 0 2px var(--v-go), 0 0 0 0 rgba(252, 76, 1, .5); } 100% { box-shadow: 0 0 0 2px var(--v-go), 0 0 0 26px rgba(252, 76, 1, 0); } }
.v-ol-share { display: grid; gap: 10px; justify-items: start; }
.v-ol-code { margin: 0; font: 700 clamp(36px, 8vw, 56px)/1 var(--f-mono); letter-spacing: .22em; color: var(--ink); }
.v-ol-link { width: 100%; font: 500 13px/1 var(--f-mono); color: var(--ink-2); }
.v-ol-seats { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin: 6px 0 12px; }
.v-ol-vs { align-self: center; font: italic 700 22px/1 var(--f-head); color: var(--dim); }
.v-ol-seat { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; background: var(--v-panel-2); box-shadow: inset 3px 0 0 var(--c, var(--v-line-2)), inset 0 0 0 1px var(--v-line); min-width: 0; }
.v-ol-seat .v-stage { width: 84px; }
.v-ol-seat h3 { margin: 2px 0 4px; font: italic 700 22px/1 var(--f-head); color: var(--c, var(--ink)); overflow-wrap: anywhere; }
.v-ol-seat.ready { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1.5px var(--v-ok); }
.v-ol-seat.away { opacity: .55; }
.v-ol-seat.empty { box-shadow: inset 0 0 0 1px var(--v-line); }
.v-ol-kit { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 6px; }
.v-ol-kit b, .v-ol-kit i { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .08em; font-style: normal; padding: 3px 6px; box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink-2); }
.v-ol-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font: 500 14px/1.4 var(--f-text); color: var(--ink-2); }
.v-ol-line i { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--dim); }
.v-ol-line.bad { color: var(--v-bad); }
.v-ol-rate { display: flex; gap: 10px; align-items: baseline; justify-content: center; margin: 0; }
.v-ol-rate i { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--dim); }
.v-ol-rate b { font: 600 22px/1 var(--f-mono); color: var(--ink); }
.v-ol-rate em { font: 600 12px/1 var(--f-text); letter-spacing: .12em; font-style: normal; color: var(--c); }
.v-board { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; gap: 4px; }
.v-board li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'n name r' 'n meta meta'; gap: 2px 10px; padding: 9px 12px; background: var(--v-panel-2); }
.v-board li i { grid-area: n; align-self: center; font: 700 14px/1 var(--f-mono); font-style: normal; color: var(--dim); }
.v-board li b { grid-area: name; font: 700 15px/1.2 var(--f-disp); letter-spacing: .04em; overflow-wrap: anywhere; }
.v-board li em { grid-area: r; font: 600 16px/1 var(--f-mono); font-style: normal; color: var(--ink); }
.v-board li span { grid-area: meta; font: 600 11px/1.3 var(--f-text); letter-spacing: .1em; color: var(--dim); }
@media (max-width: 640px) {
  .v-ol-seats { grid-template-columns: minmax(0, 1fr); }
  .v-ol-vs { justify-self: center; }
  .v-ol-me { grid-template-columns: 84px minmax(0, 1fr); }
  .v-ol-me .v-stage { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .v-ol-pulse { animation: none; } }

/* 2.0 · YOUR SAN ACCOUNT (optional): sign-in, your progress, verified play, your SAN avatars */
.v-acc-in .v-name { font-size: clamp(26px, 4vw, 36px); }
.v-list.acc { margin: 4px 0 14px; }
.v-list.acc li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 14px; }
.v-list.acc li em { white-space: normal; font: 500 12.5px/1.4 var(--f-text); color: var(--ink-2); }
.v-check { display: flex; gap: 10px; align-items: center; font: 500 13px/1.4 var(--f-text); color: var(--ink-2); margin-top: 10px; cursor: pointer; }
.v-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--v-go); }
.v-acc-list { display: grid; gap: 10px; }
.v-acc-av { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-acc-av.on { box-shadow: inset 0 0 0 1.5px var(--c); }
.v-acc-av .v-stage { width: 112px; }
.v-acc-av > div { display: grid; gap: 6px; justify-items: start; min-width: 0; }
@media (min-width: 761px) { .v-fs.with-own { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.v-pick-own { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) { .v-acc-av { grid-template-columns: 84px minmax(0, 1fr); } .v-acc-av .v-stage { width: 84px; } }
.v-f.v-f-all { align-self: stretch; align-content: center; min-height: 160px; padding: 18px 10px; opacity: .9; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 10%, transparent)); }
.v-f.v-f-all .v-f-id b { font-size: 18px; text-align: center; }
.v-f.v-f-all .v-f-id em { color: var(--c); }
.v-in[type="email"] { text-transform: none; letter-spacing: .01em; }
.v-in.v-ol-link { text-transform: none; letter-spacing: .01em; font-family: var(--f-mono); font-weight: 500; }

/* ---------- 2.1 · the HUD on the narrowest phones: four buttons and your badge in 375 px ---------- */
@media (max-width: 430px) {
  .v-me-t { display: none; }
}
@media (max-width: 380px) {
  .v-hud-r { gap: 4px; }
  .v-hb { width: 42px; }
  .v-face { width: 40px; height: 40px; }
  .v-me { gap: 8px; padding-right: 10px; }
}

/* ---------- 2.1 · the result screens draw you (the same renderer as everywhere else) ---------- */
.v-res-me { width: min(160px, 40vw); margin-bottom: -6px; }
.v-res-me .v-stage { display: block; width: 100%; aspect-ratio: 1; }
.v-res.lost .v-res-me { filter: saturate(.55) brightness(.85); }
@media (max-width: 760px) { .v-res-me { width: min(120px, 34vw); } }

/* =====================================================================
   3.2 · CHOOSE YOUR FIGHTER: the one you're on, big; everyone you can play, as pictures; one button
   ===================================================================== */
.v-pk2 { position: absolute; inset: 0; display: grid; gap: 14px 26px; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .85fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "h h" "hero list"; padding: calc(22px + env(safe-area-inset-top, 0px)) max(16px, calc((100% - 1260px) / 2)) calc(18px + env(safe-area-inset-bottom, 0px)); }
.v-pk2-h { grid-area: h; display: grid; gap: 4px; }
.v-pk2-h .v-k { font: italic 700 28px/1 var(--f-head); letter-spacing: 0; color: var(--ink); }
.v-pk2-sub { font-size: 14px; color: var(--ink-2); }
.v-pk2-hero { grid-area: hero; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); align-items: end; gap: 18px; }
.v-pk2-hero.in .v-pk2-id { animation: v-up .32s var(--v-ease) both; }
.v-pk2-art { min-height: 0; height: 100%; display: grid; align-items: end; justify-items: center; }
.v-pk2-art .v-stage.big { width: min(100%, 560px); height: auto; max-height: 100%; aspect-ratio: 1; }
.v-pk2-art .v-stage::before { height: 18%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent); }
.v-pk2-id { display: grid; gap: 9px; align-content: end; padding: 18px 18px 16px; background: rgba(12, 11, 16, .9); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--v-line); }
.v-pk2-id .v-k { color: var(--ink-2); }
.v-pk2-id .v-name { margin: 0; font: italic 700 clamp(40px, 4.6vw, 62px)/.9 var(--f-head); color: var(--c); overflow-wrap: anywhere; }
.v-pk2-tag { font: 700 11.5px/1.3 var(--f-disp); letter-spacing: .14em; color: var(--ink); }
.v-pk2-line { font: italic 400 16px/1.4 var(--f-text); color: var(--ink-2); }
.v-pk2-id > .v-btn.go { width: 100%; margin-top: 4px; }
.v-pk2-more .v-pick-kit { padding: 4px 0 2px; max-height: 196px; overflow-y: auto; }
.v-pk2-list { grid-area: list; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; background: rgba(12, 11, 16, .82); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-pk2:not(.many) .v-pk2-list { grid-template-rows: minmax(0, 1fr) auto; }
.v-pk2-q { display: flex; align-items: center; gap: 10px; }
.v-pk2-q input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--v-line); color: var(--ink); font: 500 14px/1 var(--f-text); }
.v-pk2-q input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--orange); }
.v-pk2-grid { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; align-content: start; padding: 2px; scrollbar-width: thin; }
.v-pk2-t { display: grid; justify-items: center; gap: 4px; padding: 6px 4px 9px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--v-line); color: inherit; transition: box-shadow .15s, background-color .15s; }
.v-pk2-t[hidden] { display: none; }
.v-pk2-t:hover { background: rgba(255, 255, 255, .05); }
.v-pk2-t.on { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.v-pk2-t:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.v-pk2-t .v-stage.sm { width: min(100%, 92px); }
.v-pk2-t b { font: italic 700 15px/1 var(--f-head); color: var(--c); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-pk2-t i { font: 700 9.5px/1.1 var(--f-disp); letter-spacing: .1em; color: var(--dim); font-style: normal; text-align: center; }
.v-pk2-list .v-pick-own { margin: 0; }
/* a few fighters: no scroll box, pictures a little bigger */
.v-pk2:not(.many) .v-pk2-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.v-pk2:not(.many) .v-pk2-t .v-stage.sm { width: min(100%, 120px); }
/* stacked (the picture, its card, your fighters below) on a phone or a tablet held upright. 3.5 · not on a short, wide window (a laptop
   at 150 %: 853 × 480): there the card ran over FIND; side by side fits */
@media (max-width: 900px) and (max-aspect-ratio: 5/4) {
  .v-pk2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "h" "hero" "list"; gap: 10px; }
  .v-pk2-h .v-k { font-size: 24px; } .v-pk2-sub { font-size: 13px; }
  .v-pk2-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; align-items: end; }
  .v-pk2-art .v-stage.big { width: min(72vw, 30vh, 360px); }
  .v-pk2-id { padding: 12px 14px 12px 16px; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .v-pk2-id > .v-k, .v-pk2-id > .v-pk2-tag, .v-pk2-id > .v-pk2-line, .v-pk2-id > .v-pk2-more, .v-pk2-id > .v-btn.go { grid-column: 1 / -1; }
  .v-pk2-id > .v-name { grid-column: 1; }
  .v-pk2-id .v-name { font-size: clamp(30px, 9vw, 42px); }
  .v-pk2-line { font-size: 14px; }
  .v-pk2-list { padding: 8px; grid-template-rows: auto auto auto; }
  .v-pk2:not(.many) .v-pk2-list { grid-template-rows: auto auto; }
  .v-pk2-grid, .v-pk2:not(.many) .v-pk2-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
  .v-pk2-t { scroll-snap-align: start; padding: 4px 2px 7px; }
  .v-pk2-t .v-stage.sm, .v-pk2:not(.many) .v-pk2-t .v-stage.sm { width: 72px; }
  .v-pk2-t b { font-size: 13px; }
  .v-pk2-q input { height: 34px; }
}
@media (max-width: 420px) { .v-pk2-id .v-k { font-size: 10px; } .v-pk2-tag { font-size: 10.5px; } }   /* 3.2 · a small phone keeps the stack: the picture over its name, never side by side (it overlapped) */
@media (prefers-reduced-motion: reduce) { .v-pk2-hero.in .v-pk2-id { animation: none; } }
.sg.v.pick { background: linear-gradient(90deg, rgba(8, 7, 11, .62), rgba(8, 7, 11, .18) 55%, rgba(8, 7, 11, .6)); }
@media (max-width: 900px) { .sg.v.pick { background: linear-gradient(180deg, rgba(8, 7, 11, .4), rgba(8, 7, 11, .15) 40%, rgba(8, 7, 11, .7)); } }

/* =====================================================================
   3.2 · WINNING: YOU WIN · XP · the pack · next. New abilities in one line (already yours); the rest behind MATCH DETAILS
   ===================================================================== */
.v-won-pks { display: grid; gap: 10px; width: min(100%, 560px); }
.v-won-pk { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px 14px 12px; text-align: left;
  background: linear-gradient(100deg, color-mix(in srgb, var(--v-go) 16%, rgba(14, 13, 18, .96)), rgba(14, 13, 18, .96) 62%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-go) 70%, transparent), 0 18px 50px -18px color-mix(in srgb, var(--v-go) 60%, transparent);
  animation: v-up .55s var(--v-ease) .35s both; }
.v-won-pk.plus { background: linear-gradient(100deg, rgba(255, 194, 61, .18), rgba(14, 13, 18, .96) 62%); box-shadow: inset 0 0 0 1.5px rgba(255, 194, 61, .8), 0 18px 50px -18px rgba(255, 194, 61, .55); }
.v-won-cube { position: relative; width: 112px; aspect-ratio: 1; display: grid; place-items: center; }
.v-won-cube img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); animation: v-cube 3.2s ease-in-out infinite; }
@keyframes v-cube { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.v-won-pk .v-k { margin: 0 0 2px; color: var(--ink-2); }
.v-won-pk b { display: block; font: italic 700 30px/1 var(--f-head); color: var(--ink); }
.v-won-pk.plus b { color: #FFC23D; }
.v-won-pk > div > span { display: block; margin: 6px 0 10px; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }
.v-won-pk .v-row { gap: 8px; align-items: center; margin-top: 10px; }   /* 3.5 · room for the button's focus ring: it cut SIGNAL PACK+ */
.v-won-pk .v-btn.go { min-width: 150px; }
.v-won-pk.wait .v-won-cube img { filter: grayscale(.5) brightness(.8) drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.v-won-wait { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink-2); font-style: normal; }
.v-won-wait::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--v-go); animation: v-blink 1s ease-in-out infinite alternate; }
@keyframes v-blink { from { opacity: .25; } to { opacity: 1; } }
.v-won-pc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; width: min(100%, 560px); padding: 12px; text-align: left; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-won-pc .v-dum, .v-won-pc .v-pa { width: 96px; }
.v-won-pc b { display: block; font: italic 700 22px/1 var(--f-head); }
.v-won-pc > div > span { display: block; margin: 4px 0 8px; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.v-won-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font: 700 12px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink-2); }
.v-won-title b { font: italic 700 20px/1 var(--f-head); color: var(--ink); letter-spacing: 0; }
.v-won-title em { font-style: normal; color: var(--v-go); }
.v-won-title .v-ic { width: 16px; height: 16px; color: var(--v-go); }
.v-won-ab { width: min(100%, 560px); text-align: left; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-won-ab > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; }
.v-won-ab > summary::-webkit-details-marker { display: none; }
.v-won-ab > summary .v-k { margin: 0; color: var(--v-go); white-space: nowrap; }
.v-won-abs { display: flex; gap: 6px 14px; flex-wrap: wrap; min-width: 0; }
.v-won-a { display: inline-flex; align-items: center; gap: 6px; }
.v-won-a .v-ic { width: 18px; height: 18px; color: var(--ink); }
.v-won-a b { font: 700 13.5px/1 var(--f-disp); letter-spacing: .06em; }
.v-won-ab > summary > i { font: 700 11px/1 var(--f-disp); letter-spacing: .14em; color: var(--dim); font-style: normal; }
.v-won-ab[open] > summary > i { visibility: hidden; }
.v-won-abl { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 8px; }
.v-won-abl li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid var(--v-line); }
.v-won-abl li > .v-ic { width: 26px; height: 26px; color: var(--v-go); }
.v-won-abl b { display: block; font: 700 14px/1.2 var(--f-disp); }
.v-won-abl b em { font: 700 10px/1 var(--f-disp); letter-spacing: .12em; color: var(--dim); font-style: normal; margin-left: 6px; }
.v-won-abl span { display: block; margin: 3px 0; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.v-won-abl i { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; color: var(--dim); font-style: normal; }
.v-won-abl i.on { color: var(--v-go); }
@media (max-width: 640px) {
  .v-won-pk { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .v-won-cube { width: 84px; }
  .v-won-pk b { font-size: 24px; }
  .v-won-pk .v-btn.go { min-width: 0; flex: 1; }
  .v-won-ab > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .v-won-ab > summary .v-k { grid-column: 1 / -1; }
  .v-won-pc { grid-template-columns: 80px minmax(0, 1fr); } .v-won-pc .v-dum, .v-won-pc .v-pa { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .v-won-cube img, .v-won-pk, .v-won-wait::before { animation: none !important; } }
html.sc-calm .v-won-cube img, html.sc-calm .v-won-pk, html.sc-calm .v-won-wait::before { animation: none !important; }

/* 3.2 · YOUR FIGHTERS across the top of the Locker: tap one to dress it */
.v-lk-ws { display: grid; gap: 8px; margin: 14px 0 6px; }
.v-lk-ws > .v-k { margin: 0; display: flex; gap: 8px; align-items: baseline; color: var(--ink-2); }
.v-lk-ws > .v-k em { font: 600 11px/1 var(--f-mono); color: var(--dim); font-style: normal; }
.v-lk-wl { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.v-lk-w { flex: none; width: 82px; display: grid; justify-items: center; gap: 3px; padding: 5px 3px 7px; border: 0; cursor: pointer; color: inherit; scroll-snap-align: start;
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .15s, background-color .15s; }
.v-lk-w:hover { background: rgba(255, 255, 255, .05); }
.v-lk-w.on { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.v-lk-w .v-stage.sm { width: 66px; }
.v-lk-w b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 700 13px/1 var(--f-head); color: var(--c); }
.v-lk-w i { font: 700 9px/1 var(--f-disp); letter-spacing: .1em; color: var(--dim); font-style: normal; }
.v-lk-w.run i { color: var(--c); }                     /* 3.8.1 · the run you play (js/game.js lockerStrip) */
@media (max-width: 640px) { .v-lk-ws { margin-top: 8px; } .v-lk-w { width: 70px; } .v-lk-w .v-stage.sm { width: 56px; } }

/* =====================================================================
   3.2 · FOLDBACK, AS ONE THING (js/game.js foldArt)
   ===================================================================== */
.fb { position: relative; display: block; width: 100%; aspect-ratio: 1; container-type: size; pointer-events: none; isolation: isolate;
  --fb: #E8E2D8; --fb2: #FFD9A0; --hot: #FFFFFF; --r: 36cqmin; --u: 25cqmin; --spin: 60s; --core: 30cqmin; }
.fb > * { position: absolute; }
.fb-glow { inset: 6%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fb) 26%, transparent) 0, color-mix(in srgb, var(--fb) 9%, transparent) 38%, transparent 66%); animation: fb-breathe 5.2s ease-in-out infinite; }
.fb-wave { inset: 0; } .fb-ring, .fb-wave, .fb-ember { display: block; }
.fb-wave i { position: absolute; left: 50%; top: 50%; width: 44cqmin; aspect-ratio: 1; margin: -22cqmin 0 0 -22cqmin; border-radius: 50%;
  border: max(1px, .45cqmin) solid color-mix(in srgb, var(--fb) 70%, transparent); opacity: 0; animation: fb-in 4.2s cubic-bezier(.3, 0, .6, 1) infinite; }
.fb-wave i:nth-child(2) { animation-delay: -1.4s; } .fb-wave i:nth-child(3) { animation-delay: -2.8s; }
.fb-ring { inset: 0; animation: fb-spin var(--spin) linear infinite; }
.fb-u { position: absolute; display: block; left: 50%; top: 50%; width: var(--u); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))); }
.fb-u::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(1px, .35cqmin); height: calc(var(--r) - var(--core) * .42); transform: translateX(-50%);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fb) 55%, transparent), transparent); opacity: .55; }
.fb-u img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--t, 0deg)); filter: drop-shadow(0 0 1.6cqmin color-mix(in srgb, var(--fb) 45%, transparent)); }
.fb-u.lead { width: calc(var(--u) * 1.32); }
.fb-u.lead::after { content: ''; position: absolute; left: 50%; top: 52%; width: 5cqmin; aspect-ratio: 1; margin: -2.5cqmin 0 0 -2.5cqmin; border-radius: 50%;
  background: radial-gradient(circle, var(--hot) 0 18%, var(--fb2) 34%, transparent 70%); animation: fb-blink 2.2s ease-in-out infinite; }
.fb-core { left: 50%; top: 50%; width: var(--core); aspect-ratio: 1; margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2); border-radius: 50%;
  background: radial-gradient(circle, var(--hot) 0 9%, var(--fb2) 17%, color-mix(in srgb, var(--fb) 70%, transparent) 26%, color-mix(in srgb, var(--fb) 22%, transparent) 44%, transparent 70%);
  animation: fb-core 3.1s ease-in-out infinite; }
.fb-core::before, .fb-core::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: max(1px, .5cqmin) solid color-mix(in srgb, var(--hot) 70%, transparent); opacity: .7; }
.fb-core::after { inset: 34%; border-style: dashed; animation: fb-spin 9s linear infinite reverse; }
.fb-ghost { left: 50%; top: 50%; width: 46cqmin; aspect-ratio: 1; margin: -23cqmin 0 0 -23cqmin; opacity: .34; mix-blend-mode: screen; transform: scaleX(-1);
  filter: grayscale(1) brightness(1.5) contrast(1.15); -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 68%); mask-image: radial-gradient(circle, #000 34%, transparent 68%); animation: fb-ghost 3.6s ease-in-out infinite; }
.fb-ghost > * { width: 100%; height: 100%; }
.fb-ghost img, .fb-ghost svg { width: 100%; height: 100%; object-fit: contain; }

/* THE LISTENER: wide, slow, pale. The rings come in: it is taking everything in */
.fb.p1 { --fb: #E8E2D8; --fb2: #FFD9A0; --hot: #FFFFFF; --r: 37cqmin; --u: 24cqmin; --spin: 70s; --core: 26cqmin; }
/* THE MIMIC: folded in two, one half the mirror of the other, your fighter's ghost at its heart. The rings go out and come back */
.fb.p2 { --fb: #9EE7FF; --fb2: #C7B2FF; --hot: #F2FDFF; --r: 35cqmin; --u: 23cqmin; --spin: 0s; --core: 24cqmin; }
.fb.p2 .fb-ring { animation: fb-fold 3.6s ease-in-out infinite; }
.fb.p2 .fb-ring.r { transform: scaleX(-1); animation-name: fb-fold-r; }
.fb.p2 .fb-wave i { animation-name: fb-back; animation-duration: 3.6s; }
/* THE DUELIST: a tight crown, burning, fast. The rings go out: it sends */
.fb.p3 { --fb: #FC4C01; --fb2: #FF2E63; --hot: #FFE2B8; --r: 30cqmin; --u: 22cqmin; --spin: 16s; --core: 36cqmin; }
.fb.p3 .fb-wave i { animation-name: fb-out; animation-duration: 1.9s; } .fb.p3 .fb-wave i:nth-child(2) { animation-delay: -.63s; } .fb.p3 .fb-wave i:nth-child(3) { animation-delay: -1.26s; }
.fb.p3 .fb-core { animation-duration: 1.2s; }
.fb.p3 .fb-u img { filter: drop-shadow(0 0 2.4cqmin color-mix(in srgb, var(--fb) 70%, transparent)); }
.fb-ember { inset: 0; }
.fb-ember i { position: absolute; left: var(--x); bottom: 30%; width: 1.1cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--fb2); box-shadow: 0 0 1.4cqmin var(--fb);
  opacity: 0; animation: fb-rise var(--d, 2.4s) ease-out infinite; animation-delay: var(--w, 0s); }
/* quiet: still, dark, settled. The light is an ember */
.fb.p4 { --fb: #8A847C; --fb2: #FC4C01; --hot: #FFB27A; --r: 37cqmin; --u: 24cqmin; --spin: 0s; --core: 14cqmin; }
.fb.p4 .fb-ring { animation: none; transform: translateY(5cqmin) scale(.94); }
.fb.p4 .fb-u img { filter: grayscale(.8) brightness(.55); }
.fb.p4 .fb-u::before, .fb.p4 .fb-wave, .fb.p4 .fb-u.lead::after { display: none; }
.fb.p4 .fb-glow { opacity: .4; animation: none; }
.fb.p4 .fb-core { animation: fb-ember 4s ease-in-out infinite; }
.fb.p4 .fb-core::before, .fb.p4 .fb-core::after { display: none; }

/* between phases: the old form scatters, the new one gathers (js/game.js bossBetween) */
.fb.gather .fb-u { animation: fb-gather 1.5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + .5s); }
.fb.gather .fb-core { animation: fb-light 1.6s ease-out both .9s, fb-core 3s ease-in-out infinite 2.5s; }
.fb.scatter { animation: fb-go 1.1s ease-in both; }
.fb.scatter .fb-u { animation: fb-scatter 1.1s cubic-bezier(.5, 0, .8, .4) both; animation-delay: calc(var(--i) * 40ms); }

@keyframes fb-spin { to { rotate: 360deg; } }
@keyframes fb-breathe { 50% { opacity: .55; transform: scale(.96); } }
@keyframes fb-in { 0% { transform: scale(2.1); opacity: 0; } 30% { opacity: .65; } 100% { transform: scale(.25); opacity: 0; } }
@keyframes fb-out { 0% { transform: scale(.3); opacity: 0; } 20% { opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes fb-back { 0%, 100% { transform: scale(.35); opacity: 0; } 15%, 85% { opacity: .55; } 50% { transform: scale(1.9); opacity: .35; } }
@keyframes fb-fold { 0%, 100% { translate: 0 0; } 50% { translate: -3.5cqmin 0; } }
@keyframes fb-fold-r { 0%, 100% { translate: 0 0; } 50% { translate: 3.5cqmin 0; } }
@keyframes fb-core { 50% { transform: scale(1.08); filter: brightness(1.15); } }
@keyframes fb-ember { 50% { opacity: .55; } }
@keyframes fb-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fb-ghost { 50% { opacity: .22; } }
@keyframes fb-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-34cqmin); opacity: 0; } }
@keyframes fb-gather { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-2.4 * var(--r))); opacity: 0; } }
@keyframes fb-scatter { to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-2.2 * var(--r))); opacity: 0; } }
@keyframes fb-light { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } }
@keyframes fb-go { 70% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fb *, .fb *::before, .fb *::after { animation: none !important; } .fb.p1 .fb-wave i:nth-child(1), .fb.p3 .fb-wave i:nth-child(1) { opacity: .4; transform: scale(1.2); } }
html.sc-calm .fb *, html.sc-calm .fb *::before, html.sc-calm .fb *::after { animation: none !important; }
/* where it stands: the court, its entrance, between phases, the ending, the story, the Source's card */
.du-bust > .fb, .du-ent-art > .fb, .v-end-art > .fb, .st-a > .fb { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-a > .fb { position: relative; }
.v-fb-morph { position: relative; width: min(300px, 58vw, 34vh); aspect-ratio: 1; margin: 0 auto 4px; }
.v-fb-morph > .fb { position: absolute; inset: 0; }
.v-src-line { display: flex; align-items: center; gap: 14px; }
.v-src-line b { color: var(--c); font-weight: 700; }
.v-src-fb { flex: none; width: 96px; aspect-ratio: 1; margin: -6px 0; }
.v-end-art:has(> .fb) { filter: none; }
/* the gauntlet: the five Wardens, side by side (it is not the Source) */
.v-gnt-line { display: grid; gap: 10px; }
.v-gnt-faces { display: flex; gap: 6px; }
.v-gnt-faces span { width: 54px; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 -3px 0 var(--c); }
.v-gnt-faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* 3.2 · between FOLDBACK's phases: the change is the picture; the headline steps back to one line */
.v-res.v-src .v-res-h { font-size: clamp(30px, 5vw, 58px); line-height: .95; text-wrap: balance; }
.v-res.v-src .v-res-in { gap: 8px; }
/* 3.2 · the victory fits the screen: a one-line headline, the XP and the Signal Pack above the fold, the rest a tap away */
.v-res .v-res-h { font-size: clamp(42px, 6.4vw, 84px); line-height: .92; text-wrap: balance; max-width: 18ch; }
.v-res .v-res-in { gap: 12px; }
.v-res .v-res-me { width: min(132px, 34vw); }
@media (max-width: 760px) { .v-res .v-res-h { font-size: clamp(36px, 10vw, 54px); } .v-res .v-res-me { width: min(104px, 30vw); } }
/* 3.5 · a short desk (1280 × 600, a laptop at 150 %): the fighter and the headline give way, so a pack's OPEN PACK is in view on
   arrival, not half under the dock */
@media (min-width: 761px) and (max-height: 700px) { .v-res .v-res-me { width: min(84px, 15vh); } .v-res .v-res-h { font-size: clamp(36px, 9vh, 64px); } .v-res .v-res-in { gap: 8px; padding-top: 14px; } }

/* 3.3 · RIVALS & FITS */
/* a new finish, once, on the result (the piece with its finish on) */
.v-fin-up { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; width: min(100%, 560px); padding: 10px 12px; text-align: left;
  background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line-2); animation: v-fin-in .6s 1.4s both cubic-bezier(.2, .9, .3, 1); }
.v-fin-up .v-pa { width: 72px; }
.v-fin-up b { display: block; font: italic 700 22px/1 var(--f-head); letter-spacing: .02em; }
.v-fin-up span { display: block; margin-top: 4px; font-size: 13px; color: var(--v-ink-2, #C9C5C0); }
@keyframes v-fin-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* a piece's finish on your fighter (GOLD and up): a glow around the piece itself, the art untouched */
.sav-l.sav-fin.f-gold { filter: drop-shadow(0 0 1px rgba(231, 195, 90, .9)) drop-shadow(0 0 5px rgba(231, 195, 90, .45)); animation: sav-gold 3.6s ease-in-out infinite; }
.sav-l.sav-fin.f-diamond { filter: drop-shadow(0 0 1px rgba(191, 243, 255, .95)) drop-shadow(0 0 6px rgba(158, 231, 255, .5)); animation: sav-dia 2.8s ease-in-out infinite; }
.sav-l.sav-fin.f-holo { animation: sav-holo 4.5s linear infinite; }
@keyframes sav-gold { 0%, 100% { filter: drop-shadow(0 0 1px rgba(231, 195, 90, .9)) drop-shadow(0 0 4px rgba(231, 195, 90, .35)); } 50% { filter: drop-shadow(0 0 1px rgba(255, 226, 140, 1)) drop-shadow(0 0 8px rgba(231, 195, 90, .6)); } }
@keyframes sav-dia { 0%, 100% { filter: drop-shadow(0 0 1px rgba(191, 243, 255, .9)) drop-shadow(0 0 5px rgba(158, 231, 255, .4)); } 50% { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 9px rgba(158, 231, 255, .7)); } }
@keyframes sav-holo { 0% { filter: drop-shadow(0 0 1px #FF7AD9) drop-shadow(0 0 6px rgba(255, 122, 217, .5)); } 25% { filter: drop-shadow(0 0 1px #9EE7FF) drop-shadow(0 0 6px rgba(158, 231, 255, .5)); }
  50% { filter: drop-shadow(0 0 1px #FFE27A) drop-shadow(0 0 6px rgba(255, 226, 122, .5)); } 75% { filter: drop-shadow(0 0 1px #9DFFB0) drop-shadow(0 0 6px rgba(157, 255, 176, .5)); } 100% { filter: drop-shadow(0 0 1px #FF7AD9) drop-shadow(0 0 6px rgba(255, 122, 217, .5)); } }
@media (prefers-reduced-motion: reduce) { .sav-l.sav-fin { animation: none !important; } .v-fin-up { animation: none; } }
html.sc-calm .sav-l.sav-fin { animation: none !important; }
/* what works together (ARMED): the two marks joined, one line */
.v-pair { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; padding: 10px 12px; font-size: 13px; line-height: 1.4; color: var(--v-ink-2, #C9C5C0);
  background: color-mix(in srgb, var(--c, #FC4C01) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #FC4C01) 30%, transparent); }
.v-pair b { color: var(--v-ink, #F9F4EE); font: 700 12.5px/1.3 var(--f-disp, sans-serif); letter-spacing: .08em; margin-right: 4px; }
.v-pair-ic { flex: none; display: inline-flex; align-items: center; gap: 0; color: var(--v-ink, #F9F4EE); }
.v-pair-ic .v-ic { width: 22px; height: 22px; }
.v-pair-ic > i:not(.v-ic) { display: inline-block; width: 14px; height: 2px; margin: 0 3px; background: currentColor; opacity: .7; }
/* the Locker's Fits: each one a character (your fighter wearing it), its name, its marks; USE, the rest behind EDIT */
.v-fit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.v-lo-card.v-fit-card { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 10px; }
.v-lo-card.v-fit-card .v-stage { position: relative; width: 100%; aspect-ratio: 1; }
.v-fit-fav { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 6px; font: 700 9.5px/1.2 var(--f-disp, sans-serif); letter-spacing: .14em; color: #0A0A0A; background: var(--v-ink, #F9F4EE); }
.v-fit-card.on .v-fit-fav { background: var(--v-go, #FC4C01); }
.v-fit-card .v-lo-in > b { font: italic 700 20px/1.05 var(--f-head); }
.v-fit-card .v-fit-ms { margin: 2px 0 0; }
.v-fit-card .du-fit-m { color: var(--v-ink, #F9F4EE); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .35); }
.v-fit-card .du-fit-m.pair::after { background: var(--v-ink, #F9F4EE); }
.v-fit-card .v-fine { margin: 2px 0 6px; font-size: 11.5px; }
.v-lo-edit { display: inline-block; }
.v-lo-edit > summary { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; cursor: pointer; list-style: none; font: 700 11px/1 var(--f-disp, sans-serif); letter-spacing: .14em; color: var(--v-ink-2, #C9C5C0);
  box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .25); }
.v-lo-edit > summary::-webkit-details-marker { display: none; }
.v-lo-edit[open] > summary { color: var(--v-ink, #F9F4EE); }
.v-lo-edit > .v-row { margin-top: 8px; }
@media (max-width: 640px) { .v-fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .v-lo-card.v-fit-card { padding: 8px; } .v-fit-card .v-lo-in > b { font-size: 17px; } }

/* 3.6 · C8: the first piece is the katana; the other two are there to want, shown locked with where they open */
.v-sig.shut { opacity: .5; filter: saturate(.25); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-sig.shut .v-dum, .v-sig.shut .v-pa { filter: grayscale(1) brightness(.7); }
.v-sig-lock { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 12px/1 var(--f-disp); letter-spacing: .14em; color: var(--dim); }
.v-sig-lock .v-ui { width: 16px; height: 16px; }

/* 3.6 · A1/A2: CHOOSE YOUR FIGHTER with the three free fighters is one centred column: the one you're on, big, its card beside it,
   the three under it (no half-empty panel). Each picture says its own run: NEW, or its level */
.v-pk2-t { position: relative; }
.v-pk2-run { position: absolute; top: 6px; right: 6px; z-index: 1; font: 800 11px/1 var(--f-disp); letter-spacing: .1em; padding: 4px 6px; font-style: normal; color: #0A0A0A; background: var(--ink); }
.v-pk2-run.new { background: var(--orange, #FC4C01); color: #0A0A0A; }
.v-pk2-tag .v-pk2-run { position: static; display: inline-block; padding: 3px 6px; }
/* (only with the height for it: below 560 px tall, e.g. 1280×720 at 150 %, the 3.5 layout, which fits there) */
@media (min-width: 901px) and (min-height: 560px), (min-aspect-ratio: 5/4) and (min-height: 560px) {
  .v-pk2:not(.many) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "h" "hero" "list";
    padding-left: max(16px, calc((100% - 1040px) / 2)); padding-right: max(16px, calc((100% - 1040px) / 2)); gap: 12px; }
  .v-pk2:not(.many) .v-pk2-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: center; justify-content: center; }
  .v-pk2:not(.many) .v-pk2-art { align-items: center; }
  .v-pk2:not(.many) .v-pk2-art .v-stage.big { width: min(100%, 58vh, 540px); }
  .v-pk2:not(.many) .v-pk2-list { background: none; box-shadow: none; padding: 0; grid-template-rows: auto auto; justify-items: center; }
  .v-pk2:not(.many) .v-pk2-grid { grid-template-columns: repeat(auto-fit, 128px); justify-content: center; overflow: visible; width: 100%; }
  .v-pk2:not(.many) .v-pk2-t .v-stage.sm { width: 104px; }
}
/* 3.6 · F1: LOOK (the wardrobe: how you look, nothing else) and FIGHT (IN FIGHT: how you fight), marked on every tab and item */
.v-lk-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.v-lk-tab > .v-ui { width: 16px; height: 16px; flex: none; }
.v-wt { position: relative; }
.v-kind { display: inline-grid; place-items: center; }
.v-kind .v-ui { width: 14px; height: 14px; }
.v-wt .v-kind.look { position: absolute; top: 6px; left: 6px; z-index: 1; width: 22px; height: 22px; background: rgba(8, 7, 11, .78); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-ab-card header b .v-kind.fight { margin-right: 6px; vertical-align: -2px; color: var(--orange, #FC4C01); }
.v-ab-card .v-state.s-locked { white-space: nowrap; }
/* 3.6 · E9: the score as rounds */
.v-dms { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -4px 0 2px; }
.v-dms b { width: 1px; height: 14px; background: var(--v-line-2); }
.v-dms-r { display: flex; gap: 7px; }
.v-dms-r i { width: 12px; height: 12px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px rgba(249, 244, 238, .25); }
.v-dms-r.you i.on { background: var(--c); box-shadow: 0 0 10px -2px var(--c); }
.v-dms-r.them i.on { background: var(--them, #D9D4CC); }

/* 3.8.1 · THE PLAYER LEVEL: the result's line, the screen (the bar, the next piece, the path of levels, what's earned) */
.v-trk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: min(100%, 540px); margin-top: 10px; padding: 8px 10px; text-align: left; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-trk b { font: 700 11px/1 var(--f-disp); letter-spacing: .14em; }
.v-trk em { font: 600 11px/1 var(--f-mono); color: var(--ink-2); font-style: normal; }
.v-trk .v-xp { height: 4px; }
.v-trk:hover, .v-trk:focus-visible { box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-trk-bar { margin-bottom: 14px; }
.v-trk-bar .v-xp { height: 8px; }
.v-trk-next { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; margin-bottom: 14px; box-shadow: inset 3px 0 0 var(--r), inset 0 0 0 1px var(--v-line); }
.v-trk-next > :first-child { width: 72px; height: 72px; }
.v-trk-next p { display: grid; gap: 4px; margin: 0; min-width: 0; }
.v-trk-next i { font: 600 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-2); font-style: normal; }
.v-trk-next b { font: 700 15px/1.15 var(--f-disp); letter-spacing: .06em; overflow-wrap: anywhere; }
.v-trk-next em { font: 600 11px/1 var(--f-mono); color: var(--r); font-style: normal; letter-spacing: .08em; }
.v-trk-path { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.v-trk-path li { position: relative; display: grid; gap: 4px; justify-items: center; padding: 6px 4px 7px; box-shadow: inset 0 -2px 0 var(--r), inset 0 0 0 1px var(--v-line); opacity: .55; }
.v-trk-path li.got, .v-trk-path li.up-next { opacity: 1; }
.v-trk-path li.up-next { box-shadow: inset 0 -2px 0 var(--r), inset 0 0 0 1px var(--r); }
.v-trk-path li > i { font: 700 11px/1 var(--f-mono); font-style: normal; color: var(--ink-2); justify-self: start; }
.v-trk-path li > :nth-child(2) { width: 40px; height: 40px; }
.v-trk-path li u { display: block; width: 40px; height: 40px; text-decoration: none; background: linear-gradient(135deg, transparent 46%, var(--r) 47%, var(--r) 53%, transparent 54%); opacity: .35; }
.v-trk-path li em { font: 600 9px/1.1 var(--f-mono); font-style: normal; letter-spacing: .06em; text-align: center; color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; }
.v-trk-path li.got em { color: var(--ink); }
.v-trk-got { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (max-width: 420px) { .v-trk-path li > :nth-child(2), .v-trk-path li u { width: 30px; height: 30px; } .v-trk-path li em { font-size: 8px; } .v-trk-next { grid-template-columns: 56px minmax(0, 1fr); } .v-trk-next > :first-child { width: 56px; height: 56px; } .v-trk-next .v-btn { grid-column: 1 / -1; } .v-trk-path { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 360px) { .v-slot.style i { white-space: normal; } }   /* 3.8.1 · FIGHTING STYLE on a 320 px phone: two lines, not an ellipsis */

/* =====================================================================
   3.8.1 · THE GAUNTLET: between two fights, the run's five, the clear
   Between two fights: the run so far (a rail of the five, in order: a check and the score on each one down, the next lit), the one
   you beat (their own art, stilled and dimmed), the one coming (their art arriving in their land's light). The result of a run
   carries the same rail; a first clear lights the five in turn (each with its land's sting, js/game.js). Motion only where it
   says something; none with reduce-motion or CALM
   ===================================================================== */
.v-gnt { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: radial-gradient(60% 60% at 24% 62%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), radial-gradient(64% 72% at 76% 56%, color-mix(in srgb, var(--n) 20%, transparent), transparent 72%);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.v-gnt-in { overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 2.6vh, 28px);
  padding: clamp(16px, 4vh, 44px) max(16px, calc((100% - 1080px) / 2)) 16px; scrollbar-width: thin; }
.v-gnt-top { display: grid; gap: 14px; justify-items: center; text-align: center; }
.v-gnt-rail { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(720px, 100%); }
.v-gnt-rail::before { content: ''; position: absolute; left: 10%; right: 10%; top: 28px; height: 2px; background: var(--v-line); }
.v-gnt-rail li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; }
.v-gnt-face { position: relative; display: block; width: 56px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--h) 12%, #121117);
  box-shadow: inset 0 0 0 2px var(--v-line-2); filter: grayscale(.85) brightness(.5); }
.v-gnt-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.v-gnt-rail b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1 var(--f-disp); letter-spacing: .12em; color: var(--dim); }
.v-gnt-rail em { min-height: 1em; font: 600 12.5px/1 var(--f-mono); font-style: normal; color: var(--ink-2); }
.v-gnt-rail li.done .v-gnt-face { filter: none; box-shadow: inset 0 0 0 2px var(--h); }
.v-gnt-rail li.done b { color: var(--ink); }
.v-gnt-ck { position: absolute; top: 36px; left: calc(50% + 14px); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--h); color: #0B0B0E; }
.v-gnt-ck .v-ui { width: 14px; height: 14px; }
.v-gnt-rail li.nx .v-gnt-face { filter: none; box-shadow: inset 0 0 0 2px var(--h), 0 0 0 4px color-mix(in srgb, var(--h) 30%, transparent); animation: v-gnt-next 1.8s ease-in-out infinite; }
.v-gnt-rail li.nx b { color: var(--h); }
.v-gnt-rail li.nx em { font: 700 10px/1 var(--f-disp); letter-spacing: .16em; color: var(--h); }
.v-gnt-rail li.just .v-gnt-ck { animation: v-gnt-ck .5s var(--v-ease) .35s both; }
@keyframes v-gnt-next { 50% { box-shadow: inset 0 0 0 2px var(--h), 0 0 0 9px color-mix(in srgb, var(--h) 12%, transparent); } }
@keyframes v-gnt-ck { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: none; } }
.v-gnt-stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(12px, 4vw, 56px); align-items: end; min-height: 0; }
.v-gnt-stage figure { display: grid; justify-items: center; gap: 10px; min-width: 0; min-height: 0; text-align: center; }
.v-gnt-art { display: block; width: 100%; height: clamp(150px, 42vh, 460px); }
.v-gnt-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.v-gnt-down .v-gnt-art { height: clamp(120px, 31vh, 360px); filter: grayscale(.9) brightness(.55); transform: translateY(8px); animation: v-gnt-down .9s var(--v-ease) both; }
@keyframes v-gnt-down { from { filter: none; transform: none; } 35% { filter: brightness(1.5); } to { filter: grayscale(.9) brightness(.55); transform: translateY(8px); } }
.v-gnt-next .v-gnt-art { filter: drop-shadow(0 0 42px color-mix(in srgb, var(--n) 42%, transparent)); animation: v-gnt-in 1.1s var(--v-ease) .45s both; }
@keyframes v-gnt-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.v-gnt-stage figcaption { display: grid; justify-items: center; gap: 5px; }
.v-gnt-down b { font: italic 700 clamp(22px, 3vw, 30px)/1 var(--f-head); text-transform: uppercase; color: var(--ink-2); }
.v-gnt-dh { display: grid; justify-items: center; gap: 5px; margin: 0; }
.v-gnt-dh > i { font: 700 12px/1 var(--f-disp); letter-spacing: .3em; color: var(--c); font-style: normal; }
.v-gnt-down .v-score { font-size: 24px; }
.v-gnt-next figcaption > i { font: 700 11px/1 var(--f-disp); letter-spacing: .18em; color: var(--n); font-style: normal; }
.v-gnt-next b { font: italic 700 clamp(44px, 7.5vw, 88px)/.9 var(--f-head); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere;
  text-shadow: 0 0 60px color-mix(in srgb, var(--n) 40%, transparent); animation: v-win .7s var(--v-ease) .7s both; }
.v-gnt-next em { font: 600 11px/1.2 var(--f-disp); letter-spacing: .14em; color: var(--dim); font-style: normal; }
.v-gnt .v-dock { justify-content: center; }
.v-gnt .v-dock .v-btn { min-width: 210px; }
.v-gnt-res { display: grid; gap: 14px; justify-items: center; width: min(720px, 100%); }
.v-gnt-res .v-gnt-face { width: 64px; }
.v-gnt-res .v-gnt-rail::before { top: 32px; }
.v-gnt-res .v-gnt-ck { top: 42px; left: calc(50% + 16px); }
.v-gnt-res.first .v-gnt-rail li .v-gnt-face { animation: v-gnt-lit .6s var(--v-ease) both; animation-delay: calc(.9s + var(--i) * .42s); }
@keyframes v-gnt-lit { from { filter: grayscale(.85) brightness(.5); transform: scale(.9); } 60% { filter: brightness(1.5); transform: scale(1.08); } to { filter: none; transform: none; } }
.v-gnt-sum { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font: 700 11px/1 var(--f-disp); letter-spacing: .16em; color: var(--dim); }
.v-gnt-sum b { margin-left: 6px; font: 600 16px/1 var(--f-mono); letter-spacing: 0; color: var(--ink); }
.v-place .v-gnt-rail { margin: 4px 0 2px; }
.v-place .v-gnt-rail b { font-size: 10px; letter-spacing: .05em; }   /* a card's width: IRONWORK whole, not IRONWO… */
.v-gnt-ask { text-wrap: pretty; } .v-gnt-ask b { color: var(--ink); }   /* END RUN's ask, in the card */
@media (max-height: 640px) {
  .v-gnt-art { height: clamp(110px, 30vh, 240px); } .v-gnt-down .v-gnt-art { height: clamp(90px, 22vh, 180px); }
  .v-gnt-face { width: 44px; } .v-gnt-rail::before { top: 22px; } .v-gnt-ck { top: 28px; left: calc(50% + 10px); width: 18px; height: 18px; } }
@media (max-width: 640px) {
  .v-gnt-rail { gap: 4px; } .v-gnt-face, .v-gnt-res .v-gnt-face { width: 44px; } .v-gnt-rail::before, .v-gnt-res .v-gnt-rail::before { top: 22px; }
  .v-gnt-ck, .v-gnt-res .v-gnt-ck { top: 28px; left: calc(50% + 10px); width: 18px; height: 18px; } .v-gnt-ck .v-ui { width: 12px; height: 12px; }
  .v-gnt-rail b { font-size: 9px; letter-spacing: .04em; } .v-gnt-rail em { font-size: 11px; }
  .v-gnt-stage { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 10px; align-content: center; }   /* a tall phone: the two in the middle, not under an empty sky */
  .v-gnt-stage .v-gnt-art { height: auto; aspect-ratio: 1; max-height: 42vh; } .v-gnt-stage .v-gnt-down .v-gnt-art { max-height: 31vh; }   /* the art's own square: a narrow column's box ends where the art does */
  .v-gnt-down b { font-size: 18px; } .v-gnt-down .v-score { font-size: 18px; }
  .v-gnt .v-dock .v-btn { min-width: 0; flex: 1; } }
@media (orientation: portrait) { .v-gnt-stage { align-content: center; } }   /* a tablet held upright: the two in the middle too */
@media (prefers-reduced-motion: reduce) { .v-gnt *, .v-gnt-res * { animation: none !important; } }
html.sc-calm .v-gnt *, html.sc-calm .v-gnt-res * { animation: none !important; }
.v-gnt-rail li.lost .v-gnt-face { filter: grayscale(.4) brightness(.75); box-shadow: inset 0 0 0 2px var(--v-bad); }
.v-gnt-rail li.lost b, .v-gnt-rail li.lost em { color: var(--v-bad); }
/* the first clear, before its result: the five lit in turn (each with its land's sting, js/game.js gauntletCleared), then the
   words land, then the run's numbers. A tap or CONTINUE goes on to the result (rewards, RETURN TO WORLD) */
.v-gnt-clear { background: radial-gradient(90% 60% at 50% 46%, rgba(249, 244, 238, .07), transparent 70%); }
.v-gnt-clear .v-gnt-in { grid-template-rows: auto auto auto auto; align-content: center; justify-items: center; text-align: center; gap: clamp(10px, 2.8vh, 28px); }
.v-gnt-five { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1.6vw, 22px); width: min(1080px, 100%); align-items: end; }
.v-gnt-five li { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.v-gnt-five .v-gnt-art { height: auto; aspect-ratio: 1; max-height: 34vh; filter: grayscale(.9) brightness(.35); transform: translateY(10px);
  animation: v-gnt-roll .7s var(--v-ease) both; animation-delay: calc(.5s + var(--i) * .42s); }
@keyframes v-gnt-roll { from { filter: grayscale(.9) brightness(.35); transform: translateY(10px); } 55% { filter: brightness(1.55); transform: translateY(-4px); }
  to { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--h) 40%, transparent)); transform: none; } }
.v-gnt-five b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink); }
.v-gnt-five b, .v-gnt-five em { position: relative; z-index: 1; }   /* the names stay over the art while it rolls in */
.v-gnt-five em { min-height: 1em; font: 600 13px/1 var(--f-mono); font-style: normal; color: var(--h); }
.v-gnt-h { margin: 0; font: italic 700 clamp(42px, 8.4vw, 112px)/.88 var(--f-head); text-transform: uppercase; color: var(--ink); text-wrap: balance;
  text-shadow: 0 0 70px rgba(249, 244, 238, .18); animation: v-gnt-land .8s var(--v-ease) both; animation-delay: 2.8s; }
@keyframes v-gnt-land { from { opacity: 0; transform: scale(1.08); letter-spacing: .05em; } to { opacity: 1; transform: none; } }
.v-gnt-clear .v-gnt-sum { animation: v-gnt-in .6s var(--v-ease) both; animation-delay: 3.3s; }
@media (max-width: 640px) { .v-gnt-five b { font-size: 9px; letter-spacing: .04em; } .v-gnt-five em { font-size: 11px; } .v-gnt-five .v-gnt-art { height: auto; aspect-ratio: 1; max-height: 24vh; } }
@media (max-height: 640px) { .v-gnt-five .v-gnt-art { max-height: 26vh; } .v-gnt-h { font-size: clamp(36px, 7vw, 72px); } }
@media (prefers-reduced-motion: reduce) { .v-gnt-clear *, .v-gnt-clear .v-gnt-five .v-gnt-art { animation: none !important; filter: none; transform: none; } }
html.sc-calm .v-gnt-clear * { animation: none !important; } html.sc-calm .v-gnt-five .v-gnt-art { filter: none; transform: none; }
/* =====================================================================
   3.8.1 · PRESTIGE (prototype): the tiers on THE GAUNTLET's card, and a Prestige fight's variant on its walk-up
   ===================================================================== */
.v-pres { display: grid; gap: 8px; margin-top: 4px; }
.v-pres .v-k em { margin-left: 6px; font: 600 10px/1 var(--f-mono); letter-spacing: .06em; color: var(--dim); font-style: normal; }
.v-pres-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-pres-l li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2px 10px; padding: 9px 12px; border: 1px solid var(--v-line-2); border-radius: 10px; }
.v-pres-l li b { font: italic 700 15px/1 var(--f-head); text-transform: uppercase; color: var(--ink); }
.v-pres-l li i { font: 700 10px/1 var(--f-disp); letter-spacing: .14em; color: var(--dim); font-style: normal; }
.v-pres-l li em { grid-row: span 2; align-self: center; font: 600 11px/1 var(--f-mono); font-style: normal; color: var(--ink-2); }
.v-pres-l li span { grid-column: 1 / 3; font-size: 12.5px; color: var(--ink-2); }
.v-pres-l li.done { border-color: color-mix(in srgb, #F9F4EE 40%, transparent); }
.v-pres-l li.done em { color: var(--ink); }
.v-pres-l li.locked { opacity: .55; }
.du-tech.du-var { margin-top: 4px; }
.du-intro .du-tech.du-var, .du-intro .du-tech:has(+ .du-var) { max-width: min(100%, 420px); }   /* a Prestige walk-up: both rows as wide as YOUR FIT and START FIGHT below them, never wider */

/* 3.8.2 · NAME YOUR AVATAR: a free fighter's name, on CHOOSE YOUR FIGHTER (under its name) and from the Locker (its name, top right) */
.v-pk2-nm { display: grid; gap: 5px; }
.v-pk2-nm > .v-k { font: 700 10.5px/1.2 var(--f-disp); letter-spacing: .14em; color: var(--ink-2); }
.v-pk2-nm .v-in { flex: none; width: 100%; min-height: 40px; font-size: 15px; }
.v-pk2-nm > i { font: 400 12px/1.35 var(--f-text); font-style: normal; color: var(--dim); }
.v-pk2-id > .v-pk2-nm { grid-column: 1 / -1; }
@media (max-width: 900px) and (max-aspect-ratio: 5/4) { .v-pk2-id .v-pk2-nm > i { display: none; } .v-pk2-id .v-pk2-nm .v-in { min-height: 36px; } }
.v-nm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 0; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-nm-btn:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-nm-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.v-nm-btn .v-ui { width: 14px; height: 14px; color: var(--dim); }
.v-nm-btn:hover .v-ui { color: var(--ink); }
.v-nm { display: grid; justify-items: center; gap: 18px; max-width: 460px; margin: 0 auto; padding: 8px 0 16px; }
.v-nm .v-stage.big { width: min(64vw, 40vh, 340px); height: auto; aspect-ratio: 1; }
.v-nm .v-pk2-nm { width: 100%; }
.v-nm .v-in { min-height: 48px; font-size: 20px; }

/* 3.8.2 · MY FIGHTER, accessory-first: your pieces, each with what it does in a fight; then the Road's perks; then style in a line */
.v-hub-kit .v-sec .v-btn { margin-left: auto; }
.v-af { display: grid; gap: 6px; }
.v-af-row { display: grid; grid-template-columns: 48px minmax(0, 11fr) minmax(0, 14fr); gap: 12px; align-items: center; min-height: 60px; padding: 6px 10px 6px 6px; text-align: left;
  border: 0; color: inherit; cursor: pointer; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .15s, background-color .15s; }
.v-af-row:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); background: var(--v-panel-3); }
.v-af-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.v-af-row > .v-pa { width: 48px; }
.v-af-row.on { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--v-line); }
.v-af-row.hid > .v-pa { opacity: .5; }
.v-af-id { display: grid; gap: 3px; min-width: 0; }
.v-af-id i { font: 600 10.5px/1.2 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; text-transform: uppercase; }
.v-af-id b { font: 700 14.5px/1.15 var(--f-disp); letter-spacing: .04em; overflow-wrap: anywhere; }
.v-af-role { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; min-width: 0; }
.v-af-role .v-ic { width: 18px; height: 18px; grid-row: 1 / 3; opacity: .7; }
.v-af-role b { font: 700 13px/1.15 var(--f-disp); letter-spacing: .06em; color: var(--ink-2); }
.v-af-role em { grid-column: 2 / 4; font: 400 12.5px/1.3 var(--f-text); color: var(--dim); font-style: normal; }
.v-af-role u { grid-column: 3; grid-row: 1; text-decoration: none; font: 700 9.5px/1 var(--f-disp); letter-spacing: .14em; padding: 3px 6px; color: #0B0A0E; background: var(--c); white-space: nowrap; }
.v-af-role u.off { color: var(--dim); background: transparent; box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-af-role.on .v-ic { opacity: 1; color: var(--c); }
.v-af-role.on b { color: var(--ink); }
.v-af-role.look { display: block; }
.v-af-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 0; font: 400 13px/1.3 var(--f-text); color: var(--ink-2); }
.v-af-sum > .v-ui { width: 16px; height: 16px; color: var(--c); }
.v-af-sum b { color: var(--ink); }
.v-af-sum .v-btn { margin-left: auto; }
.v-af-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.v-af-chip { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; text-align: left; border: 0; color: inherit; cursor: pointer;
  background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-af-chip:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); }
.v-af-chip .v-ic, .v-af-chip > .v-ui { width: 20px; height: 20px; margin-top: 1px; }
.v-af-chip span { display: grid; gap: 3px; min-width: 0; }
.v-af-chip b { font: 700 13.5px/1.15 var(--f-disp); letter-spacing: .06em; }
.v-af-chip em { font: 400 12.5px/1.35 var(--f-text); color: var(--ink-2); font-style: normal; }
.v-af-chip.empty b, .v-af-chip.empty > .v-ui { color: var(--v-go); }
.v-af-chip.locked { opacity: .55; }
.v-af-chip.tech { grid-column: 1 / -1; }
.v-af-style { display: grid; gap: 8px; margin-top: 6px; padding: 10px 12px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-af-style p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.v-af-style i { font: 600 10.5px/1.2 var(--f-text); letter-spacing: .14em; color: var(--dim); font-style: normal; }
.v-af-style b { font: 700 15px/1.1 var(--f-disp); letter-spacing: .06em; }
.v-af-style em { font: 400 12.5px/1.35 var(--f-text); color: var(--ink-2); font-style: normal; }
.v-af-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-af-stb { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; cursor: pointer; color: var(--ink-2); background: transparent;
  box-shadow: inset 0 0 0 1px var(--v-line-2); font: 700 12px/1 var(--f-disp); letter-spacing: .1em; }
.v-af-stb .v-ic { width: 16px; height: 16px; }
.v-af-stb.on { color: #0B0A0E; background: var(--c); box-shadow: none; }
.v-af-stb:disabled { opacity: .35; cursor: default; }
.v-af-st .v-btn { margin-left: auto; }
@media (max-width: 560px) {
  .v-af-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  .v-af-row > .v-pa { width: 44px; grid-row: 1 / 3; }
  .v-af-role { grid-column: 2; }
  .v-af-chips { grid-template-columns: minmax(0, 1fr); }
}
/* 3.8.2 · UI audit: on a 320 px phone the Collection's four tabs ran past the edge (HISTORY cut off): they fit, smaller */
@media (max-width: 350px) { .v-tabs button { padding: 0 4px; font-size: 10.5px; letter-spacing: 0; } }
/* SUNCORE SLAM · YOUR STATS and THE LEADERBOARD (signal-duel-v386): the server's numbers, easy to scan and kept quiet. Tiles for
   what you'd look for first (streaks, days, time), a table for records, a list for bosses; the leaderboard a list a phone reads
   in two lines and a desk in columns. Nothing scrolls sideways */
.v-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.v-sx-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.v-sx-me .v-stage.sm { width: 84px; height: 84px; }
.v-sx-me .v-name { overflow-wrap: anywhere; }
.v-sx { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.v-sx-t { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px 12px 11px; background: var(--v-panel-2); }
.v-sx-t b { font: 700 26px/1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.v-sx-t span { font: 700 11px/1.2 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); }
.v-sx-t em { font: 500 12.5px/1.3 var(--f-text); font-style: normal; color: var(--dim); }
.v-sx-sub { margin-top: 14px; }
.v-sx-tw { max-width: 100%; overflow-x: auto; }
.v-sx-rec { width: 100%; border-collapse: collapse; font: 600 15px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.v-sx-rec th, .v-sx-rec td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--v-line); }
.v-sx-rec thead th { font: 700 11px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); }
.v-sx-rec tbody th { text-align: left; font: 700 12px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink); }
.v-sx-rec tbody tr:last-child > * { border-bottom: 0; }
.v-sx-acc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: baseline; }
.v-sx-acc b { font: 700 30px/1 var(--f-mono); color: var(--ink); white-space: nowrap; }
.v-sx-acc b i { font-style: normal; font-size: 18px; color: var(--dim); }
.v-sx-acc > span:not(.v-sx-bar) { font: 700 11px/1.2 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); }
.v-sx-bar { grid-column: 1 / -1; display: block; height: 8px; background: var(--v-panel-2); }
.v-sx-bar i { display: block; height: 100%; background: var(--c, var(--v-go)); }
.v-sx-boss { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.v-sx-boss li { display: grid; gap: 4px; padding: 10px 12px; background: var(--v-panel-2); }
.v-sx-boss b { font: 700 13px/1.15 var(--f-disp); letter-spacing: .08em; color: var(--ink-2); }
.v-sx-boss span { font: 600 10.5px/1.25 var(--f-mono); letter-spacing: .06em; color: var(--dim); }
.v-sx-boss li.on { box-shadow: inset 3px 0 0 var(--v-go); }
.v-sx-boss li.on b { color: var(--ink); }
.v-sec em { font-style: normal; }
.v-lb-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.v-lb-rec .v-k { margin-right: 4px; }
.v-lb-r { min-height: 44px; padding: 0 14px; font: 700 12px/1 var(--f-disp); letter-spacing: .1em; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lb-r:hover { color: var(--ink); }
.v-lb-r.on { color: var(--ink); box-shadow: inset 0 0 0 2px var(--v-go); }
.v-lb-when { margin: 0 0 10px; }
.v-lb { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; }
.v-lb li { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; grid-template-areas: 'n av nm pt' 'n av meta meta'; column-gap: 10px; row-gap: 3px; align-items: center; padding: 8px 12px; background: var(--v-panel-2); }
.v-lb li > i { grid-area: n; font: 700 15px/1 var(--f-mono); font-style: normal; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.v-lb-av { grid-area: av; position: relative; display: block; width: 40px; height: 40px; overflow: hidden; background: color-mix(in srgb, var(--c, #F9F4EE) 16%, #0D0C11); }
.v-lb-av > * { position: absolute; inset: -4% -12% auto; width: 124%; height: auto; aspect-ratio: 1; }
.v-lb-av .sav { position: absolute; inset: 0; }
.v-lb-nm { grid-area: nm; min-width: 0; font: 700 15px/1.2 var(--f-disp); letter-spacing: .04em; overflow-wrap: anywhere; color: var(--ink); }
.v-lb-nm em { margin-left: 6px; font: 700 10px/1 var(--f-disp); font-style: normal; letter-spacing: .14em; color: var(--v-go); vertical-align: 2px; }
.v-lb li > strong { grid-area: pt; font: 700 17px/1 var(--f-mono); color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v-lb li > strong small { font-size: 10px; letter-spacing: .1em; color: var(--dim); }
.v-lb-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 10px; font: 600 11.5px/1.35 var(--f-mono); letter-spacing: .04em; color: var(--dim); }
.v-lb-meta b { color: var(--ink-2); }
.v-lb-meta small { font-size: inherit; }
.v-lb li.you { box-shadow: inset 3px 0 0 var(--v-go); }
/* (a phone: a name a player can type, 16 characters, on one line beside the points) */
@media (max-width: 480px) { .v-lb li { column-gap: 8px; padding-inline: 10px; } .v-lb-nm { font-size: 13.5px; letter-spacing: .01em; } .v-lb li > strong { font-size: 15.5px; } .v-lb li > strong small { display: none; } }
.v-lb li.v-lb-head { display: none; }
.v-lb li.v-lb-gap { display: block; height: 0; padding: 0; margin: 4px 0; border-top: 1px dashed var(--v-line-2); background: none; }
@media (min-width: 860px) {
  .v-lb li { grid-template-columns: 44px 40px minmax(0, 1fr) 120px 92px 84px 96px; grid-template-areas: none; padding: 7px 14px; }
  .v-lb-wl small { display: none; }
  .v-lb li > i, .v-lb-av, .v-lb-nm, .v-lb li > strong { grid-area: auto; }
  .v-lb-meta { display: contents; }
  .v-lb-meta > span { text-align: right; white-space: nowrap; }
  .v-lb li.v-lb-head { display: grid; padding-block: 2px; background: none; font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); }
  .v-lb li.v-lb-head > * { font: inherit; color: inherit; }
}

/* =====================================================================
   4.0.1 · ON-CHAIN: a piece in your wallet, as SAN's server read it this session. Ownership, not a finish: ones and zeros
   (the piece's own token number in binary) drifting around its tile, and quieter around it on your fighter. Never a glow on
   the piece (finishes glow), never the UNCOMMON green alone: the words ON-CHAIN say it too
   ===================================================================== */
:root { --v-chain: #74FFC4; --v-chain-dim: rgba(116, 255, 196, .34); --v-chain-glow: rgba(70, 255, 178, .6); --v-chain-ink: #04140D; }
.v-wsub { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 -2px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--dim); }
.v-wsub em { font-style: normal; color: var(--ink-2); }
.v-wsub.chain { color: var(--v-chain); }
.v-wsub.chain::before { content: '01'; padding: 2px 4px; font: 700 9px/1 var(--f-mono); letter-spacing: 0; color: var(--v-chain-ink); background: var(--v-chain); }
.v-wt.chain:not(.on):not(.new):not(.focus) { box-shadow: inset 0 0 0 1px var(--v-chain-dim); }
/* its picture on a dark screen of its own, in either look: the ones and zeros read as light on it */
.v-wt.chain .v-pa, html[data-op] .v-wt.chain .v-pa { background: radial-gradient(120% 100% at 50% 30%, #0F2B20 0%, #08160F 58%, #030806 100%); }
.v-wt .v-bin { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.v-bin > .v-d, .sav-bin > .v-d { position: absolute; display: block; font: 600 10px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: 0; color: var(--v-chain); text-shadow: 0 0 6px var(--v-chain-glow);
  opacity: 0; animation: v-bin 3.4s linear infinite; will-change: transform, opacity; }
@keyframes v-bin { 0% { opacity: 0; transform: translate3d(0, 9px, 0); } 18% { opacity: .95; } 70% { opacity: .5; } 100% { opacity: 0; transform: translate3d(0, -20px, 0); } }
.v-wt .v-chain-l { display: flex; align-items: center; gap: 5px; width: max-content; font: 700 9.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--v-chain); }
.v-wt .v-chain-l::before { content: ''; width: 6px; height: 6px; background: var(--v-chain); box-shadow: 0 0 6px var(--v-chain-glow); }
html[data-op] .v-wt .v-chain-l { padding: 3px 6px 3px 5px; color: var(--v-chain); background: var(--op-black, #0A0A0A); font: 700 max(9.5px, var(--t-floor, 10px))/1 var(--f-mono); letter-spacing: .12em; }
/* on your fighter: four or five, smaller and fainter, around where the piece sits; gone on a small portrait */
.sav-has-bin { container-type: inline-size; }
.sav-bin { position: absolute; z-index: 999; pointer-events: none; }
.sav-bin > .v-d { font-size: clamp(9px, 3.4cqw, 15px); animation-name: v-bin-soft; animation-duration: 4.2s; }
@keyframes v-bin-soft { 0% { opacity: 0; transform: translate3d(0, 6px, 0); } 25% { opacity: .82; } 75% { opacity: .4; } 100% { opacity: 0; transform: translate3d(0, -14px, 0); } }
@container (max-width: 150px) { .sav-bin { display: none; } }
@media (prefers-reduced-motion: reduce) { .v-bin > .v-d, .sav-bin > .v-d { animation: none !important; opacity: .72; transform: none; } .sav-bin > .v-d { opacity: .55; } }
html.sc-calm .v-bin > .v-d, html.sc-calm .sav-bin > .v-d { animation: none !important; opacity: .72; transform: none; }
html.sc-calm .sav-bin > .v-d { opacity: .55; }

/* =====================================================================
   4.0.1 · DAILY MISSIONS: three rows, a tier stamp, the line, its bar, the XP (COMPLETE once the server counts it), and the
   time to tomorrow's three. On the MENU, at the top of PLAYER LEVEL, as quiet lines on a result, and DAILY n/3 on the HUD
   ===================================================================== */
.v-ms { display: grid; gap: 10px; margin: 0 0 16px; padding: 12px 12px 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-ms-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.v-ms-h .v-sec { margin: 0; }
.v-ms-reset { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-2); }
.v-ms-reset b { font-weight: 700; color: var(--ink); }
.v-ms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v-ms-m { --ms-c: var(--ink-2); display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: center; padding: 9px 10px; background: rgba(255, 255, 255, .025); box-shadow: inset 3px 0 0 var(--ms-c); }
.v-ms-m.t-easy { --ms-c: var(--ink); } .v-ms-m.t-skill { --ms-c: var(--v-go); } .v-ms-m.t-challenge { --ms-c: var(--v-go-2); }
.v-ms-t { grid-column: 1; grid-row: 1 / span 3; align-self: start; justify-self: start; padding: 4px 6px; font: 700 9.5px/1 var(--f-mono); letter-spacing: .14em; font-style: normal; color: var(--ms-on, #0A0A0A); background: var(--ms-c); }
.v-ms-m.t-challenge .v-ms-t { color: var(--ms-c); background: none; box-shadow: inset 0 0 0 1.5px var(--ms-c); }
.v-ms-m > b { grid-column: 2; grid-row: 1; font: 700 13.5px/1.25 var(--f-text); letter-spacing: .01em; overflow-wrap: anywhere; }
.v-ms-m > em { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; font: 600 11px/1 var(--f-mono); color: var(--ink-2); font-style: normal; white-space: nowrap; }
.v-ms-why { grid-column: 2 / -1; grid-row: 2; font: 400 12px/1.35 var(--f-text); color: var(--dim); }
.v-ms-bar { grid-column: 2 / -1; grid-row: 3; height: 4px; background: var(--v-line); }
.v-ms-m:not(:has(.v-ms-why)) .v-ms-bar { grid-row: 2; }
.v-ms-bar i { display: block; height: 100%; background: var(--ms-c); transition: width .5s var(--v-ease); }
.v-ms-m.done > b { color: var(--ink-2); }
.v-ms-m.done > em { color: var(--ink); }
.v-ms-m.done .v-ms-bar i { background: var(--ink); }
.v-ms-m > em svg, .v-ms-m > em .v-ui { width: 13px; height: 13px; }
.v-ms.guest { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .v-ms.guest .v-sec { grid-column: 1 / -1; } .v-ms.guest .v-line { margin: 0; }
.v-ms > .v-fine { margin: 0; }
@media (max-width: 420px) {
  .v-ms { padding: 10px 10px 12px; }
  .v-ms-m { grid-template-columns: minmax(0, 1fr) auto; }
  .v-ms-t { grid-column: 1; grid-row: 1; }
  .v-ms-m > em { grid-column: 2; grid-row: 1; }
  .v-ms-m > b { grid-column: 1 / -1; grid-row: 2; }
  .v-ms-why { grid-column: 1 / -1; grid-row: 3; }
  .v-ms-bar { grid-column: 1 / -1; grid-row: 4; }
  .v-ms-m:not(:has(.v-ms-why)) .v-ms-bar { grid-row: 3; }
}
/* a result's lines: the missions this fight moved */
.v-ms-res { display: grid; gap: 4px; width: min(100%, 540px); margin-top: 6px; }
.v-ms-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; margin: 0; padding: 6px 10px; font-size: 12.5px; background: rgba(255, 255, 255, .025); }
.v-ms-r i { font: 700 9.5px/1 var(--f-mono); letter-spacing: .14em; font-style: normal; color: var(--ink-2); }
.v-ms-r b { font: 600 12.5px/1.25 var(--f-text); overflow-wrap: anywhere; text-align: left; }
.v-ms-r em { font: 600 11px/1 var(--f-mono); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.v-ms-r.done { box-shadow: inset 3px 0 0 var(--v-go); } .v-ms-r.done i, .v-ms-r.done em { color: var(--v-go-2); }
/* the HUD's DAILY n/3 */
.v-hb-ms { position: relative; }
.v-hb-ms .v-ms-n { margin-left: 2px; padding: 3px 5px; font: 700 10px/1 var(--f-mono); text-decoration: none; color: #0A0A0A; background: var(--v-go); }
.v-hb-ms.all .v-ms-n { background: var(--ink); }
@media (max-width: 720px) { .v-hb-ms .v-ms-n { position: absolute; top: -5px; right: -5px; margin: 0; padding: 2px 4px; font-size: 9px; } }

/* =====================================================================
   4.0.1 · PLAYER LEVEL's parts kept from the first staging build: the result line's next milestone, a pack's picture (a GOLD
   PACK gold, a LEGENDARY PACK lit), the exclusive's plate before it had art, a milestone's state up close
   ===================================================================== */
.v-lvl b i { font-style: normal; font-size: .82em; color: var(--ink-2); }
.v-trk-ms { grid-column: 1 / -1; font: 700 10.5px/1.2 var(--f-mono); letter-spacing: .1em; color: var(--v-go-2); }
.v-rm-pk { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--v-tile); }
.v-rm-pk img { width: 76%; height: auto; display: block; }
.v-rm-pk.gold img, .v-pack-seal.gold .v-pack-cube img, .v-pack-rv.gold .v-pack-burst img, .v-won-pk.gold .v-won-cube img { filter: sepia(1) saturate(4.2) hue-rotate(-10deg) brightness(.92) contrast(1.08) drop-shadow(0 0 14px rgba(231, 195, 90, .8)); }
.v-rm-pk.legend img, .v-pack-seal.legend .v-pack-cube img, .v-pack-rv.legend .v-pack-burst img, .v-won-pk.legend .v-won-cube img { filter: saturate(1.25) drop-shadow(0 0 10px #FFC23D) drop-shadow(0 0 26px rgba(255, 194, 61, .55)); }
.v-rm-pk.legend::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 194, 61, .45) 80%, transparent 90%); animation: v-rm-spin 6s linear infinite; }
.v-rm-pk.legend img { position: relative; }
@keyframes v-rm-spin { to { transform: rotate(1turn); } }
.v-rm-x { display: grid; place-items: center; align-content: center; gap: 6px; background: repeating-linear-gradient(135deg, #0B0B10 0 8px, #12121A 8px 16px); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .14); }
.v-rm-x b { font: 800 34px/1 var(--f-disp); letter-spacing: .02em; color: #F9F4EE; }
.v-rm-x i { font: 700 9px/1 var(--f-mono); letter-spacing: .2em; font-style: normal; color: #C9C5C0; }
.v-rm-x.xl, .v-rm-pk.xl { width: min(100%, 340px); aspect-ratio: 1; }
.v-rm-x.xl b { font-size: 96px; }
.v-rm-state.got { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .v-rm-pk.legend::before { animation: none; } .v-ms-bar i { transition: none; } }
html.sc-calm .v-rm-pk.legend::before { animation: none; }
/* (below a wide desk the HUD's row is full: DAILY rides on MENU as a count, today's three on top of it; from 1280, its own button) */
.v-hb-mn { position: relative; }
.v-ms-mb { display: none; }
@media (max-width: 1279px) {
  .v-hb-ms { display: none !important; }
  .v-ms-mb { display: block; position: absolute; top: -5px; right: -5px; padding: 2px 4px; font: 700 9px/1 var(--f-mono); text-decoration: none; color: #0A0A0A; background: var(--v-go); }
  .v-ms-mb.all { background: var(--ink); }
}
/* 4.0.1 · PLAYER LEVEL 50: its piece revealed on your fighter, large (js/game.js lvreward). The fighter is the picture: no frame
   of its own, no motion beyond the stage's own step in */
.v-lvr { display: grid; justify-items: center; gap: 14px; text-align: center; }
.v-lvr .v-stage.big { width: min(100%, 520px); }
.v-lvr-id { display: grid; justify-items: center; gap: 6px; }
.v-lvr .v-lvr-lv { color: var(--r); letter-spacing: .24em; }
.v-lvr .v-name { font-size: clamp(34px, 9vw, 64px); line-height: .95; }
.v-lvr .v-line { max-width: 44ch; }
@media (min-width: 900px) { .v-lvr { grid-template-columns: minmax(0, 520px) minmax(0, 360px); justify-content: center; align-items: center; text-align: left; }
  .v-lvr-id { justify-items: start; } }

/* =====================================================================
   4.0.1 · PLAYER LEVEL, rebuilt after the staging review (js/game.js SCREENS.level). The grammar of the games players know:
   one big number and one bar (your level), the reward you pick shown large, a picture-first track with every level on it and
   the next one lit; today's three in their own tab as cards. Two tabs, LEVELS and DAILY; the rules behind "?"
   ===================================================================== */
.v-scr-level .v-body { display: grid; align-content: start; gap: 18px; }
.v-lv-panel { display: grid; gap: 18px; min-width: 0; }
.v-lv-qb { display: grid; place-items: center; width: 44px; height: 44px; flex: none; font: 700 20px/1 var(--f-disp); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--v-line-2); }
.v-lv-qb:hover, .v-lv-qb:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* the tabs */
.v-lv-tabs { display: flex; width: min(100%, 440px); box-shadow: inset 0 0 0 1.5px var(--v-line-2); }
.v-lv-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; font: 700 14px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink-2); text-align: center; }
.v-lv-tab.on { color: #0A0A0A; background: #F9F4EE; }
.v-lv-tab u { padding: 3px 5px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .04em; text-decoration: none; color: #0A0A0A; background: var(--c, #F9F4EE); }
.v-lv-tab.on u { color: #F9F4EE; background: #0A0A0A; }
/* the hero: your level, and the reward you've picked */
.v-lv-hero { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 960px) { .v-lv-hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; gap: 18px; } }
.v-lv-me { display: grid; align-content: center; gap: 10px; padding: 16px 18px 18px; min-width: 0; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lv-k { font: 700 12px/1 var(--f-mono); letter-spacing: .26em; color: var(--ink-2); }
.v-lv-num { display: flex; align-items: baseline; gap: 10px; }
.v-lv-num b { font: italic 800 clamp(84px, 22vw, 132px)/.8 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
.v-lv-num i { font: 700 18px/1 var(--f-mono); font-style: normal; color: var(--ink-2); }
.v-lv-bar { display: block; height: 16px; background: rgba(249, 244, 238, .1); box-shadow: inset 0 0 0 1px var(--v-line-2); overflow: hidden; }
.v-lv-bar > i { display: block; height: 100%; background: var(--c, var(--v-go)); transition: width .9s var(--v-ease); }
.v-lv-bar.sm { height: 8px; }
.v-lv-xp { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font: 600 12.5px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.v-lv-xp span:first-child { color: var(--ink); }
.v-lv-guest { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.v-lv-spot { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; min-width: 0; background: rgba(255, 255, 255, .04); box-shadow: inset 3px 0 0 var(--r), inset 0 0 0 1px var(--v-line); }
@media (min-width: 760px) { .v-lv-spot { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; padding: 14px 16px; } }
.v-lv-spot.all { grid-template-columns: minmax(0, 1fr); }
.v-lv-spot-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; overflow: hidden; background: var(--v-tile); }
.v-lv-spot-art > .v-stage { width: 100%; }
.v-lv-spot-art > .v-pa, .v-lv-spot-art > .v-rm-pk { width: 100%; height: 100%; }
.v-lv-q { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--r) 26%, transparent) 0 10px, transparent 10px 20px); }
.v-lv-q b { font: 800 clamp(64px, 16vw, 112px)/1 var(--f-disp); color: var(--r); }
.v-lv-spot-id { display: grid; align-content: center; justify-items: start; gap: 8px; min-width: 0; }
.v-lv-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.v-lv-chip { padding: 4px 7px 3px; font: 700 11px/1 var(--f-mono); letter-spacing: .18em; color: #0A0A0A; background: #F9F4EE; }
.v-lv-st { padding: 4px 7px 3px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px currentColor; }
.v-lv-st.s-next { color: #0A0A0A; background: var(--v-go); box-shadow: none; }
.v-lv-st.s-got { color: #0A0A0A; background: var(--v-ok); box-shadow: none; }
.v-lv-name { font: 700 clamp(22px, 5.6vw, 40px)/1 var(--f-disp); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; color: var(--ink); }
/* a long word (CONSTRUCTION, SANIVERSARY) makes the whole name smaller rather than splitting it: --nl is the name's longest word */
@supports (width: 1cqi) { .v-lv-spot-id { container-type: inline-size; } .v-lv-name { font-size: max(12px, min(clamp(22px, 5.6vw, 40px), calc(100cqi / var(--nl, 6)))); overflow-wrap: normal; } }
@media (max-width: 359px) { .v-lv-spot { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 12px; padding: 10px; } }
.v-lv-what { display: flex; align-items: baseline; gap: 8px; font: 600 12.5px/1.35 var(--f-mono); letter-spacing: .05em; color: var(--ink-2); }
.v-lv-sw { flex: none; width: 10px; height: 10px; background: var(--r); }
.v-lv-spot-id .v-btn { margin-top: 2px; }
/* the track: every level from 2 to 50, picture first. A milestone wider, level 50 the widest; the next lit; a line under it to
   where you are */
.v-lt-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.v-lt-pg { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--v-line-2); }
.v-lt-pg .v-ui { width: 20px; height: 20px; }
.v-lt-pg:hover, .v-lt-pg:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (max-width: 759px), (pointer: coarse) { .v-lt-wrap { grid-template-columns: minmax(0, 1fr); } .v-lt-pg { display: none; } }
.v-lt-row { position: relative; display: flex; align-items: stretch; gap: 8px; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 12px 4px 24px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.v-lt { position: relative; flex: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; width: 96px; height: 150px; padding: 8px 8px 9px; text-align: left; scroll-snap-align: start; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .15s, background-color .15s; }
.v-lt.ms { width: 132px; box-shadow: inset 0 0 0 2px var(--r); }
.v-lt.top { width: 168px; box-shadow: inset 0 0 0 2px var(--r), inset 0 0 0 4px #0A0A0A, inset 0 0 0 5px var(--r); background: rgba(255, 194, 61, .06); }
.v-lt-n { font: 700 17px/1 var(--f-disp); font-style: normal; color: var(--ink); }
.v-lt-art { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: var(--v-tile); }
.v-lt-art > .v-pa, .v-lt-art > .v-rm-pk { height: 100%; width: auto; aspect-ratio: 1; max-width: 100%; }
.v-lt-art > .v-rm-pk { background: transparent; }
/* WebKit (Safari's engine) leaves an unpainted square at the page's top-left when a filtered pack image sits in this scroller:
   its own layer puts it back where it belongs */
.v-lt-art > .v-rm-pk img { transform: translateZ(0); }
.v-lt-art .v-pa img { filter: none; }   /* flat at this size; and a filtered picture still loading leaves the same hole in WebKit */
.v-lt-q { display: grid; place-items: center; width: 100%; height: 100%; font: 800 40px/1 var(--f-disp); color: var(--r); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--r) 22%, transparent) 0 8px, transparent 8px 16px); }
.v-lt-l { font: 700 10.5px/1.15 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.v-lt.myst .v-lt-l { color: var(--r); }
.v-lt-ck, .v-lt-lk, .v-lt-nx { position: absolute; text-decoration: none; }
.v-lt-ck { top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #0A0A0A; background: var(--v-ok); }
.v-lt-ck .v-ui { width: 13px; height: 13px; }
.v-lt-lk { top: 7px; right: 7px; color: var(--ink-2); }
.v-lt-lk .v-ui { width: 14px; height: 14px; }
.v-lt-nx { top: -9px; right: 6px; padding: 3px 6px 2px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; color: #0A0A0A; background: var(--v-go); transform: rotate(-3deg); }
.v-lt.is-next { box-shadow: inset 0 0 0 2px var(--v-go); background: rgba(252, 76, 1, .07); }
.v-lt.sel { box-shadow: inset 0 0 0 3px var(--ink), 0 8px 22px rgba(0, 0, 0, .45); background: rgba(255, 255, 255, .08); }
/* the picked one lifts; its part of the line under the track stays where it was */
.v-lt.sel { transform: translateY(-7px); }
.v-lt.sel::after { transform: translateY(7px); }
.v-lt { transition: box-shadow .15s, background-color .15s, transform .15s var(--v-ease); }
@media (prefers-reduced-motion: reduce) { .v-lt { transition: none; } }
.v-lt:hover { background: rgba(255, 255, 255, .07); }
/* the line under the track: full to your level, the next one's part filled as far as you are into it */
.v-lt::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -14px; height: 4px; background: var(--v-line); }
.v-lt.is-got::after { background: var(--c, var(--v-go)); }
.v-lt.is-next::after { background: linear-gradient(90deg, var(--c, var(--v-go)) var(--p, 0%), var(--v-line) var(--p, 0%)); }
@media (max-width: 759px) {
  .v-lt { width: 84px; height: 124px; padding: 7px 7px 8px; }
  .v-lt.ms { width: 112px; } .v-lt.top { width: 140px; }
  .v-lt-n { font-size: 15px; }
  .v-lt-l { font-size: max(10px, var(--t-floor, 10px)); }
}
/* DAILY: today's three as cards (the MENU's are the same, smaller) */
.v-dly { display: grid; gap: 14px; min-width: 0; }
.v-dly-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.v-dly-k { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v-dly-k b { font: 700 16px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink); }
.v-dly-k em { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; font-style: normal; color: var(--ink-2); }
.v-dly-new { font: 700 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-2); }
.v-dly-new b { color: var(--ink); }
.v-dly-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .v-dly:not(.sm) .v-dly-list, .v-lv-skel .v-dly-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v-dly-list > li { display: grid; }
.v-dm { --ms-c: #7FD08A; display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; width: 100%; padding: 14px 16px 16px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 3px 0 var(--ms-c), inset 0 0 0 1px var(--v-line); }
.v-dm.t-skill { --ms-c: #7EB6FF; } .v-dm.t-challenge { --ms-c: #FFC23D; }
.v-dm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v-dm-t { padding: 4px 6px 3px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .16em; font-style: normal; color: #0A0A0A; background: var(--ms-c); }
.v-dm-xp { display: inline-flex; align-items: center; gap: 4px; font: 700 18px/1 var(--f-disp); letter-spacing: .02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.v-dm-xp .v-ui { width: 16px; height: 16px; }
.v-dm-name { font: 700 17px/1.25 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.v-dm-bar { display: block; height: 10px; background: rgba(249, 244, 238, .1); overflow: hidden; }
.v-dm-bar > i { display: block; height: 100%; background: var(--ms-c); transition: width .6s var(--v-ease); }
.v-dm-n { font: 600 12.5px/1 var(--f-mono); font-style: normal; color: var(--ink-2); }
.v-dm.done { background: color-mix(in srgb, var(--ms-c) 10%, transparent); }
.v-dm.done .v-dm-xp { color: var(--ms-c); font-size: 15px; letter-spacing: .06em; }
.v-dm.done .v-dm-name { color: var(--ink-2); }
button.v-dm:hover, button.v-dm:focus-visible { background: rgba(255, 255, 255, .07); }
.v-dly-foot { font: 600 12.5px/1.3 var(--f-mono); letter-spacing: .05em; color: var(--ink-2); }
.v-dly-foot b { color: var(--ink); }
.v-dly-line { font-size: 15px; color: var(--ink-2); }
.v-dly.guest { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.v-lv-mini { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lv-mini b { font: 700 14px/1 var(--f-disp); letter-spacing: .1em; }
.v-lv-mini em { font: 600 12px/1 var(--f-mono); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.v-lv-mini .v-ui { width: 16px; height: 16px; color: var(--ink-2); }
.v-lv-mini:hover, .v-lv-mini:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }
/* the MENU's: smaller cards, one under the other */
.v-dly.sm { gap: 10px; }
.v-dly.sm .v-dly-k b { font-size: 13px; }
.v-dly.sm .v-dly-list { gap: 8px; }
.v-dly.sm .v-dm { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; gap: 6px 12px; padding: 10px 12px 11px; }
.v-dly.sm .v-dm-top { display: contents; }
.v-dly.sm .v-dm-t { grid-column: 1; grid-row: 1; justify-self: start; }
.v-dly.sm .v-dm-xp { grid-column: 2; grid-row: 1; font-size: 14px; }
.v-dly.sm .v-dm-name { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
.v-dly.sm .v-dm-bar { grid-column: 1; grid-row: 3; align-self: center; height: 6px; }
.v-dly.sm .v-dm-n { grid-column: 2; grid-row: 3; font-size: 11.5px; }
/* waiting, failed, off */
.v-lv-skel { display: grid; gap: 18px; min-width: 0; }
.v-sk { display: block; background: rgba(249, 244, 238, .09); animation: v-sk 1.1s ease-in-out infinite alternate; }
.v-sk.w30 { width: 30%; height: 14px; } .v-sk.num { width: 150px; height: 92px; } .v-sk.bar { height: 16px; } .v-sk.art { width: 100%; aspect-ratio: 1; }
.v-sk.w40 { width: 40%; height: 14px; } .v-sk.w60 { width: 60%; height: 14px; } .v-sk.w80 { width: 80%; height: 14px; } .v-sk.tall { height: 30px; }
.v-sk-lines { display: grid; gap: 12px; align-content: center; min-width: 0; }
.v-sk.card { height: 168px; }
.v-lv-me.sk { grid-template-columns: minmax(0, 1fr); }
.v-lv-spot.sk { background: none; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-sk-row { display: flex; gap: 8px; overflow: hidden; padding: 12px 4px 24px; }
.v-sk.tile { flex: none; width: 96px; height: 150px; }
@media (max-width: 759px) { .v-sk.tile { width: 84px; height: 124px; } }
@keyframes v-sk { from { opacity: .45; } to { opacity: 1; } }
.v-lv-err, .v-lv-off { display: grid; justify-items: start; gap: 12px; padding: 18px; box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lv-err p, .v-lv-off p { font-size: 16px; color: var(--ink); }
/* "?": how levels work, five lines */
.v-lv-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 64ch; }
.v-lv-how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 14px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--v-line); }
.v-lv-how i { font: 700 20px/1 var(--f-disp); font-style: normal; color: var(--ink-2); }
.v-lv-how span { font: 400 15.5px/1.45 var(--f-text); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .v-sk { animation: none; opacity: .8; } .v-lv-bar > i, .v-dm-bar > i { transition: none; } }
html.sc-calm .v-sk { animation: none; opacity: .8; }
html.sc-calm .v-lv-bar > i, html.sc-calm .v-dm-bar > i { transition: none; }