/* =====================================================================
   SIGNAL COMBAT · the game layer
   ---------------------------------------------------------------------
   TYPE — four voices, each with one job
     display   Jost italic 700, uppercase      names of things, verdicts
     ui        Red Hat Display 600              buttons, headings, labels
     text      Red Hat Text                     anything you read
     numbers   JetBrains Mono, tabular          integrity, charge, points
   Uppercase is kept for display only. Tracking stays modest.

   COLOUR — the world carries faction colour; the interface does not.
     signal orange   interaction and sound
     red             threat
     faction hue     only where it says whose something is

   MOTION
     ui       120–220ms, decisive          --ui-ease
     combat   short, overshooting          --hit-ease
     world    slow (see world.css)
   ===================================================================== */
.sc.g {
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --hit-ease: cubic-bezier(.34, 1.56, .64, 1);
  --panel: #0E0D12;
  --panel-2: #15131B;
  --hair: rgba(255, 255, 255, .08);
  --t-display: italic 700 1em/0.9 var(--f-head);
  position: relative;
  width: calc(100vw - var(--sbw, 0px));                  /* leave the dashboard column, */
  margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);   /* not counting a desktop scrollbar */
  padding-bottom: 40px;
  color: var(--ink);
  background: #0B0A0E;
}
.sc-load { padding: 96px 0; text-align: center; }

/* ---------- shared pieces ---------- */
.g .btn { border-radius: 0; }
.g .btn.primary.g-engage { min-width: 200px; justify-content: center; font: 600 15px/1 var(--f-disp); letter-spacing: .02em;
  padding: 17px 26px; transition: transform .12s var(--ui-ease), box-shadow .18s var(--ui-ease), background .18s; }
.g .btn.primary.g-engage:hover:not([disabled]) { box-shadow: 0 0 0 4px rgba(252, 76, 1, .22); }
.g .btn.primary.g-engage:active:not([disabled]) { transform: translateY(1px) scale(.99); }
.g .btn.primary.g-engage span { text-transform: none; }
.g-close { color: var(--dim); font: 500 13px/1 var(--f-text); padding: 10px 4px; }
.g-close:hover { color: var(--ink); }

/* =====================================================================
   WORLD
   ===================================================================== */
.g-world { position: relative; background: #0B0A0E; }
.g-pan { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.g-pan::-webkit-scrollbar { display: none; }
.g-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; container-type: size; overflow: hidden; }
@media (min-width: 861px) {
  .g-frame { aspect-ratio: auto; height: max(520px, calc(100svh - var(--sc-top, 76px) - var(--nav, 0px))); }
}
/* r28 · on a screen wider than 16:9 the world is cropped top and bottom; it now crops the sky, never the ground:
   the scene sits on the frame's floor, so you, the duel board and the roads stay whole on any monitor */
.g-frame > .ws { inset: auto; left: 50%; bottom: 0; width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh); transform: translateX(-50%); }

/* the HUD: identity on the left, three places on the right, nothing else */
.g-hud { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; padding: 18px 24px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 10, 18, .72), rgba(9, 10, 18, 0)); }
.g-hud > * { pointer-events: auto; }
.g-id { display: flex; align-items: center; gap: 12px; }
.g-id-pic { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #000;
  box-shadow: 0 0 0 2px var(--f), 0 0 0 3px #000; }
.g-id-pic .sav { width: 140%; margin: -6% 0 0 -20%; }
.g-id b { display: block; font: 600 15px/1.1 var(--f-disp); }
.g-id span { display: block; margin-top: 3px; font: 500 12px/1 var(--f-text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-nav { display: flex; gap: 2px; background: rgba(0, 0, 0, .55); padding: 3px; backdrop-filter: blur(6px); }
.g-nav button { font: 600 13px/1 var(--f-disp); color: var(--ink-2); padding: 10px 14px;
  transition: color .14s var(--ui-ease), background .14s var(--ui-ease); }
.g-nav button:hover { color: var(--ink); }
.g-nav button.on { color: #000; background: var(--ink); }
.g-nav .g-snd { padding: 7px 10px; }
.g-nav .g-snd svg { width: 18px; height: 18px; display: block; }
.g-nav .g-snd.on { color: var(--ink); background: none; }

.g-hint { position: absolute; z-index: 4; left: 50%; top: 84px; transform: translateX(-50%); margin: 0;
  max-width: min(560px, 80%); text-align: center; font: 400 14px/1.45 var(--f-text); color: var(--ink-2);
  text-shadow: 0 1px 12px #000, 0 0 2px #000; pointer-events: none; animation: g-hint 9s var(--ui-ease) .4s both; }
@keyframes g-hint { 0% { opacity: 0; } 6%, 80% { opacity: 1; } 100% { opacity: 0; } }
.g-hint b { color: var(--ink); font-weight: 600; }
@keyframes g-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* hover names a thing; it does not narrate */
.g-tip { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
  background: #0B0A0E; color: var(--ink); font: 500 12.5px/1.2 var(--f-text); padding: 7px 10px; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--hair), 0 8px 24px rgba(0,0,0,.5); opacity: 0; transition: opacity .12s var(--ui-ease); }
.g-tip.on { opacity: 1; }

/* a challenger calling you out: a small orange signal above them */
.w-ch.calls .w-call { position: absolute; left: 50%; top: -2%; z-index: 2; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: var(--orange); box-shadow: 0 0 0 3px rgba(252, 76, 1, .25); animation: w-call 1.4s ease-in-out infinite; }
@keyframes w-call { 50% { transform: translateX(-50%) translateY(-5px) rotate(45deg); } }

/* ---------- the panel: what you picked ----------
   On a wide screen it is a card over the world, on the right, so your
   character stays in frame on the left. On a phone it sits below. */
.g-panel { position: relative; z-index: 3; background: var(--panel); border-top: 1px solid var(--hair);
  animation: g-panel .22s var(--ui-ease); }
@media (min-width: 861px) {
  .g-world { overflow: hidden; }
  .g-world + .g-panel { position: absolute; z-index: 6; right: 24px; bottom: calc(40px + 24px); width: min(600px, 44vw);
    border: 0; background: rgba(12, 11, 16, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px var(--hair), 0 24px 60px rgba(0,0,0,.55); }
  .g-world + .g-panel .g-panel-in { padding: 22px 22px 20px; gap: 18px; grid-template-columns: auto minmax(0, 1fr); }
  .g-world + .g-panel .p-go { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; }
  .g-world + .g-panel .p-go .btn { width: 100%; }
  .g-world + .g-panel.land .g-panel-in { grid-template-columns: 1fr; }
  .g-world + .g-panel.land .p-go { grid-template-columns: 1fr; justify-items: end; }
  .g-world + .g-panel.quiet { width: auto; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .g-world + .g-panel.quiet .g-panel-in { padding: 0; grid-template-columns: repeat(2, 230px); gap: 6px; }
  .g-world + .g-panel.quiet .g-qa { background: rgba(12, 11, 16, .82); backdrop-filter: blur(8px); }
  .g-world + .g-panel::before { top: 0; }
  .g-world + .g-panel .p-art { width: 132px; height: 104px; }
  .g-world + .g-panel.boss .p-art { width: 168px; height: 118px; }
  .g-world + .g-panel .p-art.p-char { width: 132px; height: 132px; }

  @keyframes g-rise-l { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@keyframes g-panel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.g-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--f, transparent); opacity: .9; }
.g-panel-in { max-width: 1180px; margin: 0 auto; padding: 26px 28px 30px; display: grid; gap: 28px;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.g-panel.quiet .g-panel-in { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; padding: 18px 28px 22px; gap: 12px; }
.g-panel.land .g-panel-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: start; }

.p-art { width: 168px; height: 128px; display: grid; place-items: center; }
.p-art svg { width: 100%; height: 100%; overflow: visible; }
.p-drone .dr { width: 62%; }
.g-panel.boss .p-drone .dr { width: 78%; }
.g-panel.boss .p-art { width: 220px; height: 150px; }
.p-art.p-char { width: 150px; height: 150px; }
.p-art.p-char .sav { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%); mask-image: linear-gradient(to top, transparent 0, #000 30%); }
.p-main { display: grid; gap: 8px; align-content: center; }
.p-eye { margin: 0; font: 500 12.5px/1.2 var(--f-text); color: var(--f, var(--ink-2)); }
.p-name { margin: 0; font: italic 700 clamp(30px, 4.6vw, 48px)/0.88 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }
.g-panel.boss .p-name { font-size: clamp(36px, 5.6vw, 60px); }
.p-class { margin: 0; font: 500 13.5px/1.3 var(--f-text); color: var(--ink-2); }
.p-lv { font: 600 13px/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.p-time { color: var(--orange); font-variant-numeric: tabular-nums; }
.p-blurb { margin: 0; font: 400 15px/1.5 var(--f-text); color: var(--ink-2); max-width: 52ch; }
.p-blurb b { color: var(--ink); font-weight: 600; }
.p-note { margin: 0; font: 400 12.5px/1.4 var(--f-text); color: var(--dim); }
.p-done { margin: 0; color: var(--dim); font: 500 13px/1.4 var(--f-text); max-width: 22ch; }
.p-on { color: var(--ok); }
.p-wears { margin: 0; font: 400 13.5px/1.5 var(--f-text); color: var(--ink-2); max-width: 54ch; }
.p-wears b { color: var(--ink); font-weight: 500; }
.p-threat { display: grid; grid-template-columns: auto minmax(80px, 200px); gap: 12px; align-items: center;
  font: 500 12.5px/1 var(--f-text); color: var(--ink-2); margin-top: 2px; }
.p-threat i { display: block; height: 4px; background: rgba(255,255,255,.1); }
.p-threat b { display: block; height: 100%; background: #FF3B30; }
.p-go { display: grid; gap: 4px; justify-items: center; }
.p-list { display: grid; gap: 1px; align-content: start; }
.p-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: baseline; text-align: left;
  padding: 11px 12px; background: var(--panel-2); transition: background .14s var(--ui-ease); }
.p-row:hover { background: #1D1A24; }
.p-row-k { font: 500 12px/1 var(--f-text); color: var(--dim); }
.p-row b { font: 600 15px/1 var(--f-disp); }
.p-row-v { font: 500 12px/1 var(--f-mono); color: var(--ink-2); }

.g-qa { text-align: left; padding: 14px 16px; background: var(--panel-2); display: grid; gap: 4px;
  box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .14s var(--ui-ease), background .14s; }
.g-qa:hover { background: #1B1922; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.g-qa b { font: 600 15px/1.1 var(--f-disp); }
.g-qa span { font: 400 13px/1.35 var(--f-text); color: var(--dim); }

.g-find { grid-column: 1 / -1; display: grid; gap: 12px; }
.g-find-l { display: grid; gap: 6px; font: 500 12.5px/1 var(--f-text); color: var(--ink-2); max-width: 340px; }
.g-find-list { display: grid; gap: 1px; max-height: 340px; overflow-y: auto; }
.g-find-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 8px 12px; background: var(--panel-2); }
.g-find-av { width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px var(--f); }
.g-find-av .sav { width: 150%; margin: -8% 0 0 -25%; }
.g-find-n b { display: block; font: 600 15px/1.1 var(--f-disp); }
.g-find-n i { display: block; font: 400 12px/1.2 var(--f-text); font-style: normal; color: var(--dim); margin-top: 3px; }

/* =====================================================================
   LOADOUT · preparing your character
   ===================================================================== */
.g-lo { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, .85fr);
  height: max(600px, calc(100svh - var(--sc-top, 76px) - var(--nav, 0px))); padding-top: 84px; box-sizing: border-box;
  background: radial-gradient(70% 70% at 32% 46%, color-mix(in srgb, var(--f) 15%, #0B0A0E) 0%, #0B0A0E 72%); }
.sc.g:has(> .g-lo) { padding-bottom: 0; }
.shell.v-combat:has(.g-lo) { padding-bottom: calc(var(--nav, 0px) + env(safe-area-inset-bottom, 0px)); }
.lo-bare { display: none; }

/* the character sheet: one screen, nothing important below the fold */
.lo-sheet { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding: 0 24px 18px; }
.lo-top { display: flex; justify-content: center; min-width: 0; }
/* your characters: an independent strip. Fades and arrows say there are more; the count says how many */
.lo-rwrap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; max-width: min(100%, 760px); min-width: 0; }
.lo-roster { display: flex; gap: 8px; padding: 6px 6px 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; scroll-behavior: auto; overscroll-behavior-x: contain; }
.lo-roster::-webkit-scrollbar { display: none; }
.lo-rwrap.can-l .lo-roster { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px); mask-image: linear-gradient(to right, transparent 0, #000 36px); }
.lo-rwrap.can-r .lo-roster { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px); mask-image: linear-gradient(to left, transparent 0, #000 36px); }
.lo-rwrap.can-l.can-r .lo-roster { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.lo-rnav { width: 28px; height: 44px; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .14s var(--ui-ease); color: var(--ink-2); }
.lo-rnav::before { content: ''; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
.lo-rnav.l::before { transform: rotate(-135deg); margin: 0 0 0 4px; }
.lo-rnav:hover { color: var(--ink); }
.lo-rwrap.can-l .lo-rnav.l, .lo-rwrap.can-r .lo-rnav.r { opacity: 1; pointer-events: auto; }
.lo-rcount { display: none; position: absolute; right: 34px; bottom: -10px; font: 500 10.5px/1 var(--f-mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.lo-rwrap.more .lo-rcount { display: block; }
.lo-pick { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #000; opacity: .5;
  box-shadow: 0 0 0 2px var(--f); transition: opacity .14s var(--ui-ease), transform .14s var(--ui-ease); }
.lo-pick:hover { opacity: .85; }
.lo-pick.on { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 2px var(--f), 0 0 0 4px #000, 0 0 0 5px var(--f); }
.lo-pick .sav { width: 150%; margin: -8% 0 0 -25%; }

/* the paper doll: head and face on the left, body and hands on the right */
.lo-doll { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(150px, 190px); gap: 14px; align-items: center; min-height: 0; }
.lo-col { display: grid; gap: 5px; align-content: center; min-width: 0; }
.lo-ds-w { position: relative; min-width: 0; }
.lo-ds { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left;
  padding: 3px 26px 3px 3px; background: rgba(21, 19, 27, .86); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background .12s var(--ui-ease), box-shadow .12s var(--ui-ease), opacity .12s; }
.lo-col.r .lo-ds { grid-template-columns: minmax(0, 1fr) 40px; text-align: right; padding: 3px 3px 3px 26px; }
.lo-col.r .lo-ds-art { order: 2; }
.lo-ds:hover { background: #1F1C28; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.lo-ds-art { width: 40px; height: 40px; overflow: hidden; }
.lo-ds-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-ds-in { display: grid; gap: 3px; min-width: 0; }
.lo-ds-in i { font: 500 10.5px/1 var(--f-text); font-style: normal; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-ds-in b { font: 600 13.5px/1.1 var(--f-disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-ds.armed, .lo-col.r .lo-ds.armed { box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .55); }
.lo-ds.armed .lo-ds-in i { color: var(--orange); }
.lo-ds.hidden { opacity: .55; }
.lo-ds.pv { background: rgba(252, 76, 1, .08); box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .6); }
.lo-ds.pv .lo-ds-in i { color: var(--orange); }
.lo-ds-w.pv .lo-x { opacity: .7; }
.lo-ds.on { background: #24212D; box-shadow: inset 0 0 0 1.5px var(--ink); }
.lo-ds.just { animation: lo-just .5s var(--hit-ease); }
.lo-ds-w.none .lo-ds { background: rgba(11, 10, 14, .35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lo-ds-w.none .lo-ds-art { background: transparent; outline: 1px dashed rgba(255,255,255,.12); outline-offset: -6px; }
.lo-ds-w.none .lo-ds-in b { font-weight: 500; color: rgba(255,255,255,.3); }
.lo-ds-w.none .lo-ds:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.lo-x { position: absolute; top: 50%; right: 3px; width: 22px; height: 22px; margin-top: -11px; opacity: 0; transition: opacity .12s; }
.lo-col.r .lo-x { right: auto; left: 3px; }
.lo-ds-w:hover .lo-x, .lo-x:focus-visible { opacity: .7; }
.lo-x:hover { opacity: 1 !important; }
.lo-x::before, .lo-x::after { content: ''; position: absolute; left: 10px; top: 5px; width: 1.5px; height: 12px; background: var(--ink); }
.lo-x::before { transform: rotate(45deg); } .lo-x::after { transform: rotate(-45deg); }
@media (hover: none) { .lo-x { opacity: .55; } }

.lo-char { position: relative; height: 100%; max-height: 100%; aspect-ratio: 1; max-width: 100%; justify-self: center; align-self: center; min-height: 0; }
.lo-char > .sav { width: 100%; height: 100%; }
/* a stage: a floor of light in your faction's colour, the character standing on it */
.lo-char::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 2%; height: 22%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--f) 42%, transparent), transparent); filter: blur(4px); }
/* r16: the whole character shows, hands and what they hold included; only the cut edge of the art softens into the floor */
.lo-char .sav { z-index: 1;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 5%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, #000 5%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.6)); }
.lo-preview { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); white-space: nowrap; z-index: 300;
  background: rgba(0,0,0,.8); color: var(--ink); font: 500 12px/1 var(--f-text); padding: 8px 12px;
  box-shadow: inset 0 0 0 1px var(--orange); }
.lo-acts { position: absolute; left: 0; right: 0; bottom: 2px; z-index: 300; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.lo-acts button { font: 500 12.5px/1 var(--f-text); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.lo-acts button:hover { color: var(--ink); }
.lo-off { flex-basis: 100%; text-align: center; font: 400 12.5px/1.3 var(--f-text); color: var(--dim); }

/* under the character: who it is, and the numbers that matter (the season score among them) */
.lo-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.lo-who { display: grid; gap: 5px; max-width: 360px; min-width: 0; }
.lo-who b { font: italic 700 22px/1 var(--f-head); text-transform: uppercase; color: var(--f); }
.lo-who span { font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.lo-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.lo-stats span { display: grid; gap: 5px; }
.lo-stats i { font: 500 11px/1 var(--f-text); font-style: normal; color: var(--dim); }
.lo-stats b { font: 600 20px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.lo-stats em { font: 500 12px/1 var(--f-mono); font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lo-stats .hl { padding-left: 22px; border-left: 1px solid var(--hair); }
.lo-stats .hl b { color: var(--orange); font-size: 24px; }

/* equipment and wardrobe: their own panel, their own scroll; what is armed stays docked in view */
.lo-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: rgba(14, 13, 18, .94);
  box-shadow: inset 1px 0 0 var(--hair); }
.lo-tabs { display: flex; gap: 4px; padding: 0 20px; box-shadow: inset 0 -1px 0 var(--hair); }
.lo-tabs button { position: relative; font: 600 14px/1 var(--f-disp); color: var(--ink-2); padding: 16px 4px 14px; margin-right: 18px; }
.lo-tabs button i { font: 500 12px/1 var(--f-mono); font-style: normal; color: var(--dim); margin-left: 6px; }
.lo-tabs button:hover { color: var(--ink); }
.lo-tabs button.on { color: var(--ink); }
.lo-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); }
.lo-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 20px; min-height: 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.lo-scroll::-webkit-scrollbar { width: 8px; }
.lo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }
.lo-dock { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 20px;
  background: #0E0D12; box-shadow: inset 0 1px 0 var(--hair); }
.lo-armed { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lo-arm-chip { flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; box-shadow: inset 0 -3px 0 var(--gt, var(--orange)); }
.lo-arm-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* equipment icons: the piece alone, framed on itself (combat.js piece()), on a lit tile so black pieces still read */
.lo-art, .lo-ds-art, .lo-try-i, .lo-arm-chip, .b-kb-art, .b-fire-art, .r-gear-art, .b-card-art { position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 32%, #3B3746 0%, #24212C 55%, #16141B 100%); }
img.pc { position: absolute !important; height: auto !important; max-width: none !important; object-fit: contain !important; display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.lo-ds-w.none .lo-ds-art { background: transparent; }
.lo-arm-n { margin-left: 6px; font: 400 13px/1.3 var(--f-text); color: var(--ink-2); }
.lo-arm-n b { font: 600 15px/1 var(--f-mono); color: var(--ink); }
.lo-dock .btn.primary.g-engage { min-width: 0; flex: 0 0 auto; }

.lo-when { margin: 16px 0 6px; font: 600 13px/1 var(--f-disp); color: var(--ink-2); }
.lo-list { display: grid; gap: 1px; }
.lo-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 22px; gap: 14px; align-items: center;
  text-align: left; padding: 10px 14px 10px 10px; background: var(--panel-2);
  transition: background .14s var(--ui-ease), box-shadow .14s var(--ui-ease); }
.lo-item:hover { background: #1B1922; }
.lo-item.on { background: #1F1B12; box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .4); }
.lo-item.just { animation: lo-just .5s var(--hit-ease); }
@keyframes lo-just { 0% { transform: scale(1); } 35% { transform: scale(1.015); background: #2A2416; } 100% { transform: scale(1); } }
.lo-art { width: 56px; height: 56px; overflow: hidden; }
.lo-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-in { display: grid; gap: 4px; min-width: 0; }
.lo-name { font: 600 15px/1.15 var(--f-disp); }
.lo-eff { font: 400 13.5px/1.3 var(--f-text); color: var(--ink-2); }
.lo-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 1px; }
.lo-meta i { font: 500 11.5px/1 var(--f-text); font-style: normal; color: var(--dim); display: inline-flex; gap: 5px; align-items: center; }
.lo-meta i svg { width: 12px; height: 12px; }
.lo-meta .lo-slot { color: var(--ink-2); }
.lo-meta .lo-fam { color: var(--gt); }
.lo-meta .lo-aff { color: var(--orange); }
.lo-meta .lo-vf { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.lo-tick { width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); position: relative; }
.lo-item.on .lo-tick { background: var(--orange); box-shadow: none; }
.lo-item.on .lo-tick::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.g-charge { --gt: #C8A24A; } .g-defence { --gt: #6E8FA8; } .g-attack { --gt: #D06A50; }
.g-momentum { --gt: #A8955F; } .g-replay { --gt: #9C8CC0; } .g-info { --gt: #7FA37F; } .g-wild { --gt: var(--orange); }

.lo-try { display: grid; gap: 4px; }
.lo-try .lo-rule { margin-bottom: 8px; }
.lo-try-slots { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 12px; }
.lo-try-slots button { font: 500 13px/1 var(--f-text); padding: 8px 11px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.lo-try-slots button.on { color: #000; background: var(--ink); box-shadow: none; }
.lo-try-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; padding: 0 0 14px; }
.lo-try-i { aspect-ratio: 1; overflow: hidden; opacity: .75; transition: opacity .12s, box-shadow .12s; }
.lo-try-i:hover { opacity: 1; }
.lo-try-i.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
.lo-try-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-try .g-close { margin: 0; }
.lo-try-slots button { position: relative; }
.lo-try-slots button.has:not(.on) { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.lo-try-slots button i { position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.lo-try-i.mine { opacity: .9; }
.lo-ward { display: grid; gap: 0; }
.lo-ward-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0 8px; }
.lo-ward-h b { font: 600 12.5px/1 var(--f-disp); color: var(--ink); }
.lo-ward-h span { font: 400 11.5px/1 var(--f-text); color: var(--dim); }
.lo-ward-none { margin: 0 0 12px; font: 400 13px/1.4 var(--f-text); color: var(--dim); }

.lo-rule { margin: -2px 0 0; font: 400 13px/1.4 var(--f-text); color: var(--dim); }
.lo-meta .lo-worn { color: var(--ink-2); }
/* where a piece comes from (015): owned on-chain, or unlocked in the game. Kept apart, never merged */
.lo-meta .lo-src { color: var(--ink-2); letter-spacing: .01em; }
.lo-meta .lo-src.game { color: var(--ink); padding: 2px 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.lo-more { display: flex; align-items: baseline; gap: 6px; width: 100%; margin: 1px 0 0; padding: 12px 14px; text-align: left;
  font: 500 13px/1 var(--f-text); color: var(--ink-2); background: var(--panel-2); transition: background .14s var(--ui-ease), color .14s var(--ui-ease); }
.lo-more:hover { background: #1B1922; color: var(--ink); }
.lo-more::after { content: ''; margin-left: auto; align-self: center; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.lo-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.lo-more i { font-style: normal; color: var(--dim); }
.lo-far { margin-top: 8px; }
.lo-empty { padding: 120px 28px 60px; max-width: 520px; margin: 0 auto; display: grid; gap: 14px; justify-items: start; }

/* the character itself: equip animations straight from the registry */
.sav-in { animation-duration: .42s; animation-timing-function: var(--hit-ease); animation-fill-mode: both; }
.sav-from-top { animation-name: sav-top; }
.sav-from-bottom { animation-name: sav-bottom; }
.sav-from-scale { animation-name: sav-scale; }
.sav-from-split { animation-name: sav-split; }
.sav-from-fade, .sav-from-fade-slow { animation-name: sav-fade; }
.sav-from-fade-slow { animation-duration: .9s; }
@keyframes sav-top { from { transform: translateY(-14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sav-bottom { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sav-scale { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sav-split { from { transform: scaleX(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sav-fade { from { opacity: 0; } to { opacity: 1; } }
/* an accessory doing something: that layer, and only that layer, lights */
.sav-hot { animation: sav-hot .9s var(--hit-ease) 2; filter: drop-shadow(0 0 0 transparent); }
@keyframes sav-hot { 0% { filter: drop-shadow(0 0 0 rgba(252,76,1,0)) brightness(1); transform: scale(1); }
  30% { filter: drop-shadow(0 0 14px rgba(252,76,1,.95)) brightness(1.35); transform: scale(1.03); }
  100% { filter: drop-shadow(0 0 0 rgba(252,76,1,0)) brightness(1); transform: scale(1); } }

/* =====================================================================
   BATTLE
   ===================================================================== */
.g-battle { position: relative; background: #08070B; }
.b-stage { position: relative; height: min(56vh, 540px); min-height: 400px; overflow: hidden;
  background:
    radial-gradient(60% 80% at 14% 60%, color-mix(in srgb, var(--fa) 18%, transparent) 0%, transparent 70%),
    radial-gradient(60% 80% at 86% 60%, color-mix(in srgb, var(--fb) 18%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom, #0B0A12 0%, #1A1622 52%, #0C0B10 53%, #08070B 100%); }
.b-sky { position: absolute; inset: 0 0 47% 0;
  background: radial-gradient(40% 70% at 50% 100%, rgba(217,210,198,.10), transparent 70%); }
/* a fighter is never taller than the stage allows, so its head stays clear of the HUD */
.b-f { position: absolute; bottom: -3%; width: min(38%, calc(min(56vh, 540px) * .86)); z-index: 2; transition: transform .25s var(--ui-ease); }
.b-you { left: -2%; }
.b-them { right: -2%; }
.b-art { position: relative; }
.b-art .sav {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 72%, transparent 100%);
  mask-composite: intersect; }
.b-drone { position: relative; display: block; width: 92%; margin: 0 0 6% 2%; aspect-ratio: 1; }
.b-drone .dr { position: relative; z-index: 1; width: 66%; margin: 14% auto 0; }
.b-drone .dr-boss { width: 82%; margin-top: 6%; }
.b-drone::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); }
.b-drone::after { content: ''; position: absolute; left: 30%; right: 30%; top: 46%; bottom: 4%; z-index: 0;
  background: linear-gradient(to bottom, rgba(255,59,48,.22), transparent); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.b-f.low .b-art .sav { animation: b-low 1.2s ease-in-out infinite; }
@keyframes b-low { 50% { filter: drop-shadow(0 0 18px rgba(255,59,48,.45)) brightness(.85); } }
.b-f.hit .b-art { animation: b-shake .34s cubic-bezier(.36,.07,.19,.97); }
.b-f.hit .b-art > .sav, .b-f.hit .b-art > .b-drone { animation: b-flash .38s ease-out; }
@keyframes b-shake { 10%, 90% { transform: translateX(-4px); } 20%, 80% { transform: translateX(7px); } 30%, 50%, 70% { transform: translateX(-11px); } 40%, 60% { transform: translateX(11px); } }
@keyframes b-flash { 0% { filter: brightness(2.4) saturate(.4); } 100% { filter: none; } }
.b-dmg { position: absolute; left: 50%; top: 30%; z-index: 4; transform: translateX(-50%);
  font: 700 clamp(40px, 6vw, 72px)/1 var(--f-mono); color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px #FF3B30, 0 0 4px #000, 0 4px 0 #000; animation: b-dmg 1.2s var(--ui-ease) forwards; pointer-events: none; }
.b-dmg::before { content: '−'; }
@keyframes b-dmg { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.22); }
  30% { transform: translate(-50%, -4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

/* the field of sound, between them */
.b-field { position: absolute; left: 22%; right: 22%; top: 30%; bottom: 14%; z-index: 1; }
.b-field canvas { display: block; width: 100%; height: 100%; }

.b-hud { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 18px; align-items: start; padding: 18px 24px;
  background: linear-gradient(to bottom, rgba(8,7,11,.85), rgba(8,7,11,0)); }
.b-m { display: grid; gap: 7px; max-width: 360px; }
.b-m.r { justify-self: end; text-align: right; }
.b-m-top { display: flex; align-items: baseline; gap: 10px; }
.b-m.r .b-m-top { flex-direction: row-reverse; }
.b-m-top b { font: italic 700 22px/1 var(--f-head); text-transform: uppercase; }
.b-m-top span { font: 500 12.5px/1 var(--f-text); color: var(--f); }
.b-hp { position: relative; height: 12px; background: rgba(255,255,255,.07); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.b-hp i, .b-hp .b-ghost { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.b-hp i { background: var(--f); z-index: 1; }
.b-hp .b-ghost { background: #F4EEE6; z-index: 0; }
.b-m.r .b-hp i, .b-m.r .b-hp .b-ghost { left: auto; right: 0; }
@keyframes hp-drop { from { width: var(--w0); } to { width: var(--w1); } }
@keyframes hp-ghost { from { width: var(--w0); } to { width: var(--w1); } }
/* the number counts down with the bar (where the browser can animate a number) */
/* the numbers count in JS (combat.js tickEls); tabular so they do not jitter */
.b-hpn { font-variant-numeric: tabular-nums; }
/* result: season points count up, then land */
.r-pts { display: inline-block; font-variant-numeric: tabular-nums; }
.r-t { position: relative; }
.r-pts-pop { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--orange); background: rgba(252, 76, 1, .1); }
@keyframes r-pts-pop { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.b-hp.low i { background: #FF3B30; animation: b-pulse .9s ease-in-out infinite; }
@keyframes b-pulse { 50% { opacity: .55; } }
.b-m-bot { display: flex; align-items: center; gap: 14px; }
.b-m.r .b-m-bot { flex-direction: row-reverse; }
.b-num { font: 600 18px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.b-num i { font-style: normal; color: var(--dim); font-size: 12px; }
.b-chg { display: inline-flex; gap: 4px; }
.b-chg i { width: 12px; height: 12px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition: background .2s var(--ui-ease), transform .2s var(--hit-ease); }
.b-chg i.on { background: var(--orange); box-shadow: none; }
.b-chg .debt { color: #FF3B30; font: 600 12px/1 var(--f-mono); margin-left: 4px; }
.b-tag { font: 500 12px/1 var(--f-text); color: var(--ink); padding: 4px 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.b-round { display: grid; justify-items: center; gap: 2px; padding-top: 2px; }
.b-round b { font: 600 28px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.b-round span { font: 500 12px/1 var(--f-text); color: var(--dim); }
.b-round i { font: 500 12px/1 var(--f-text); font-style: normal; color: var(--ink-2); margin-top: 6px; }

/* =====================================================================
   THE EXCHANGE · reveal → launch → impact → health → charge → KO
   Timings follow fighting-game practice: a 50–100ms flash, a shake of
   2–3px for light hits and 8–10px for heavy ones, the number after the
   flash, and a pale chunk on the health bar that drains after a beat.
   ===================================================================== */
.b-shake { position: absolute; inset: 0; }
@keyframes b-shake-s { 0%, 100% { transform: none; } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, 0); } }
@keyframes b-shake-m { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
@keyframes b-shake-l { 0%, 100% { transform: none; } 15% { transform: translate(-10px, 3px) rotate(-.4deg); } 30% { transform: translate(10px, -3px) rotate(.4deg); }
  45% { transform: translate(-8px, 2px); } 60% { transform: translate(6px, -1px); } 80% { transform: translate(-3px, 0); } }
/* the one hit: knocked away from whoever hit them, a white then red flash */
@keyframes b-knock-r { 0% { transform: none; } 16% { transform: translateX(18px) rotate(1deg); } 100% { transform: none; } }
@keyframes b-knock-l { 0% { transform: none; } 16% { transform: translateX(-18px) rotate(-1deg); } 100% { transform: none; } }
@keyframes b-knock-r-h { 0% { transform: none; } 12% { transform: translateX(34px) rotate(2deg) scale(.98); } 40% { transform: translateX(10px); } 100% { transform: none; } }
@keyframes b-knock-l-h { 0% { transform: none; } 12% { transform: translateX(-34px) rotate(-2deg) scale(.98); } 40% { transform: translateX(-10px); } 100% { transform: none; } }
@keyframes b-hitflash { 0% { filter: none; } 1% { filter: brightness(3) saturate(0); } 22% { filter: brightness(1.1) sepia(.8) saturate(3) hue-rotate(-45deg); } 60%, 100% { filter: none; } }
@keyframes b-hitflash-g { 0% { filter: none; } 1% { filter: brightness(2) saturate(.2); } 100% { filter: none; } }
@keyframes b-down { 0% { transform: none; filter: none; } 30% { transform: translateY(-2%) rotate(-1deg); } 100% { transform: translateY(14%) rotate(3deg); filter: grayscale(1) brightness(.35); } }
.b-them .b-art { transform-origin: 70% 100%; } .b-you .b-art { transform-origin: 30% 100%; }

/* the number: what kind of hit it was, then how much */
.b-dn { position: absolute; top: 9%; left: 80%; z-index: 6; display: grid; justify-items: center; gap: 6px; pointer-events: none; transform: translateX(-50%); }
.b-dn.them { left: 20%; }
.b-dn i { font: 700 13px/1 var(--f-disp); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #0B0A0E;
  background: #F4EEE6; padding: 6px 10px; white-space: nowrap; }
.b-dn i em { font-style: normal; font-family: var(--f-mono); letter-spacing: 0; }
.b-dn b { font: italic 800 clamp(58px, 8.4vw, 112px)/.86 var(--f-head); letter-spacing: -.02em; color: #FFF6EC;
  text-shadow: 0 5px 0 #000, 0 0 34px rgba(255, 106, 61, .55); font-variant-numeric: tabular-nums; }
.b-dn.you b { color: #FF4D3D; text-shadow: 0 5px 0 #000, 0 0 34px rgba(255, 59, 48, .5); }
.b-dn.k-counter i { background: var(--orange); color: #0B0A0E; }
.b-dn.k-counter b { font-size: clamp(70px, 10vw, 136px); }
.b-dn.k-guarded i { background: #A8C4DA; }
.b-dn.k-guarded b { font-size: clamp(40px, 5.6vw, 72px); color: #CFE0EC; text-shadow: 0 4px 0 #000; }
.b-dn.k-stall i, .b-dn.k-drain i { background: #6B6670; color: #F4EEE6; }

@keyframes b-dn { 0% { opacity: 0; transform: translate(-50%, 26px) scale(.45); } 7% { opacity: 1; transform: translate(-50%, 0) scale(1.28); }
  14% { transform: translate(-50%, -4px) scale(1); } 74% { opacity: 1; transform: translate(-50%, -24px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
@keyframes b-dn-heavy { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(3px); } 40%, 80% { transform: translateX(-3px); } }
/* a stance with nothing landing on it */
.b-stance { position: absolute; z-index: 5; bottom: 12%; font: 700 13px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; pointer-events: none;
  padding: 7px 12px; background: rgba(8, 7, 11, .85); box-shadow: inset 0 0 0 1px var(--f); color: var(--f); }
.b-stance.you { left: 26%; } .b-stance.them { right: 26%; }
@keyframes b-stance { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* the reveal: both moves, side by side, and whether each read the signal */
.b-mv { position: absolute; z-index: 6; top: 30%; display: grid; gap: 7px; padding: 14px 22px 13px; background: rgba(8, 7, 11, .94); pointer-events: none;
  transform: skewX(-9deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.b-mv > * { transform: skewX(9deg); }
.b-mv.you { left: 25%; }
.b-mv.them { right: 25%; text-align: right; }
.b-mv b { font: italic 800 clamp(30px, 4.2vw, 54px)/.9 var(--f-head); text-transform: uppercase; color: #FFF6EC; }
.b-mv span { font: 600 12.5px/1 var(--f-text); color: var(--dim); }
.b-mv span.ok { color: var(--ok); }
@keyframes b-mv-l { 0% { opacity: 0; transform: translateX(-90px) skewX(-9deg); } 10% { opacity: 1; transform: translateX(8px) skewX(-9deg); }
  16% { transform: translateX(0) skewX(-9deg); } 70% { opacity: 1; transform: translateX(0) skewX(-9deg); } 100% { opacity: 0; transform: translate(-24px, -14px) skewX(-9deg); } }
@keyframes b-mv-r { 0% { opacity: 0; transform: translateX(90px) skewX(-9deg); } 10% { opacity: 1; transform: translateX(-8px) skewX(-9deg); }
  16% { transform: translateX(0) skewX(-9deg); } 70% { opacity: 1; transform: translateX(0) skewX(-9deg); } 100% { opacity: 0; transform: translate(24px, -14px) skewX(-9deg); } }
.b-vs { position: absolute; z-index: 6; top: 36%; left: 50%; transform: translateX(-50%); font: italic 800 22px/1 var(--f-head); color: var(--dim);
  text-transform: uppercase; font-style: italic; pointer-events: none; }
@keyframes b-vs { 0%, 8% { opacity: 0; transform: translateX(-50%) scale(1.8); } 16% { opacity: 1; transform: translateX(-50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }

/* the screen itself: a red edge when you are hurt, white on the heavy ones */
.b-hurt { position: absolute; inset: 0; z-index: 7; pointer-events: none; box-shadow: inset 0 0 90px 0 rgba(255, 40, 30, .34); }
@keyframes b-hurt { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.b-whiteout { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #FFF6EC; mix-blend-mode: screen; }
@keyframes b-whiteout { 0% { opacity: 0; } 1% { opacity: .32; } 100% { opacity: 0; } }

/* knocked out */
.b-kotxt { position: absolute; z-index: 9; left: 50%; top: 44%; display: grid; justify-items: center; gap: 10px; pointer-events: none; }
.b-kotxt b { font: italic 900 clamp(110px, 15vw, 200px)/.8 var(--f-head); letter-spacing: -.03em; color: #FFF6EC;
  text-shadow: 0 8px 0 #000, 0 0 60px rgba(255, 90, 40, .7); }
.b-kotxt.you b { color: #FF4D3D; }
.b-kotxt.both b { font-size: clamp(60px, 8.5vw, 124px); white-space: nowrap; }
.b-kotxt span { font: 700 14px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: #000; padding: 7px 12px; }
@keyframes b-ko { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(.94); }
  16% { transform: translate(-50%, -50%) scale(1); } 86% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); } }

/* charge: spent pips drain, banked pips fill, the change is called out */
@keyframes pip-gain { 0% { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); transform: rotate(45deg) scale(.4); }
  60% { background: var(--orange); box-shadow: 0 0 12px var(--orange); transform: rotate(45deg) scale(1.55); } 100% { background: var(--orange); box-shadow: none; transform: rotate(45deg) scale(1); } }
@keyframes pip-spend { 0% { background: var(--orange); box-shadow: none; transform: rotate(45deg) scale(1); } 40% { background: #FFF6EC; transform: rotate(45deg) scale(1.45); }
  100% { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); transform: rotate(45deg) scale(1); } }
.b-chg { position: relative; align-items: center; }
.b-cd { position: absolute; top: 50%; left: calc(100% + 10px); white-space: nowrap; font: 700 15px/1 var(--f-mono); font-style: normal; color: var(--orange);
  display: inline-flex; gap: 5px; align-items: baseline; pointer-events: none; }
.b-m.r .b-cd { left: auto; right: calc(100% + 10px); }
.b-cd small { font: 600 10.5px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.b-cd.down { color: var(--ink-2); }
@keyframes b-cd { 0% { opacity: 0; transform: translateY(-50%) translateY(8px); } 12% { opacity: 1; transform: translateY(-50%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) translateY(-8px); } }

/* under the stage while it plays: the round in one line */
/* the health bar takes the hit too: a jolt, a flash, and the amount pops off it */
@keyframes hp-hit { 0% { transform: none; box-shadow: none; } 3% { transform: translateX(-4px); box-shadow: 0 0 0 2px #FFF6EC; }
  12% { transform: translateX(4px); } 22% { transform: translateX(-2px); box-shadow: 0 0 0 2px rgba(255, 59, 48, .9); } 45%, 100% { transform: none; box-shadow: 0 0 0 2px transparent; } }
.b-num { position: relative; }
.b-hpd { position: absolute; left: 100%; top: -2px; margin-left: 10px; font: 700 15px/1 var(--f-mono); font-style: normal; color: #FF5A4C;
  white-space: nowrap; pointer-events: none; opacity: 0; text-shadow: 0 1px 6px #000; }
.b-m.r .b-hpd { left: auto; right: 100%; margin: 0 10px 0 0; }
@keyframes b-hpd { 0% { opacity: 0; transform: translateY(4px) scale(.7); } 10% { opacity: 1; transform: translateY(-2px) scale(1.25); }
  25% { transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* the call: the round in words, one line per beat */
.b-say { position: relative; width: 100%; max-width: 820px; min-height: 64px; }
.b-say p { position: absolute; left: 0; right: 0; top: 0; margin: 0; text-align: center; opacity: 0;
  font: 500 clamp(17px, 1.75vw, 23px)/1.35 var(--f-text); color: var(--ink); text-wrap: balance; }
.b-say p em { font: italic 700 1.1em/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; }
.b-say p b { font-weight: 700; }
.b-say p strong { font: 700 1.15em/1 var(--f-mono); color: var(--ink); }
.b-say p.bad strong { color: #FF6A5F; } .b-say p.good strong { color: var(--orange); }
@keyframes b-say { 0% { opacity: 0; transform: translateY(10px); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes b-say-last { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.b-xl { width: 100%; max-width: 760px; display: grid; justify-items: center; gap: 6px; padding: 14px 16px; }
.b-xl-n { font: 600 12px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.b-xl p { margin: 0; display: flex; gap: 26px; font: 500 15px/1 var(--f-text); color: var(--ink-2); }
.b-xl b { font: 700 26px/1 var(--f-mono); font-variant-numeric: tabular-nums; margin-right: 6px; }
.b-xl .good b { color: var(--ink); } .b-xl .bad b { color: #FF6A5F; }
@keyframes b-xl { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.g-battle.seq .b-ctl { min-height: 220px; align-content: start; }

/* equipment firing: named, with its own art, from its own side */
.b-fire { position: absolute; z-index: 4; top: 34%; display: flex; gap: 12px; align-items: center;
  background: rgba(8,7,11,.9); padding: 10px 16px 10px 10px; box-shadow: inset 0 0 0 1px var(--f), 0 16px 40px rgba(0,0,0,.6);
  animation: b-fire 2.2s var(--ui-ease) forwards; }
.b-fire.you { left: 30%; } .b-fire.them { right: 30%; }
.b-fire-art { width: 46px; height: 46px; overflow: hidden; flex: 0 0 46px; }
.b-fire-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-fire span:last-child { display: grid; gap: 3px; }
.b-fire i { font: 500 12px/1 var(--f-text); font-style: normal; color: var(--f); }
.b-fire b { font: 600 16px/1.1 var(--f-disp); }
@keyframes b-fire { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 8% { opacity: 1; transform: none; }
  82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* controls live under the stage, never on top of the characters */
.b-ctl { max-width: 980px; margin: 0 auto; padding: 22px 24px 8px; display: grid; gap: 18px; justify-items: center; }
.b-arm, .b-listen, .b-res, .b-wait { display: grid; gap: 12px; justify-items: center; text-align: center; width: 100%; }
.b-arm h3, .b-res h3 { margin: 0; font: italic 700 30px/0.9 var(--f-head); text-transform: uppercase; }
.b-arm p { margin: 0; color: var(--ink-2); }
/* sound check: three marks light in time with the tones */
.b-lcr { display: flex; gap: 46px; margin: 4px 0 2px; }
.b-lcr i { font: 600 11px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .14em; color: var(--ink-3, rgba(255,255,255,.35));
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); font-style: normal; }
.b-arm.checking .b-lcr i { animation: lcr .3s ease-out both; }
.b-arm.checking .b-lcr i:nth-child(1) { animation-delay: .05s; }
.b-arm.checking .b-lcr i:nth-child(2) { animation-delay: .45s; }
.b-arm.checking .b-lcr i:nth-child(3) { animation-delay: .85s; }
@keyframes lcr { 0%, 100% { background: transparent; color: var(--ink-3, rgba(255,255,255,.35)); border-color: rgba(255,255,255,.14); }
  15%, 75% { background: var(--orange); color: #0B0A0E; border-color: var(--orange); } }
.b-check { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .8; }
.b-check:hover { opacity: 1; }
.s-build { margin: 28px 0 0; font-size: 11px; letter-spacing: .08em; color: var(--ink-3, rgba(255,255,255,.3)); text-align: center; }
.b-prompt { margin: 0; font: 600 20px/1.25 var(--f-disp); }
.b-prompt span { font: 500 12.5px/1 var(--f-text); color: var(--dim); margin-left: 8px; vertical-align: 2px; }
.b-play.busy span { animation: b-pulse .8s ease-in-out infinite; }
.b-left { margin: -4px 0 0; font: 400 13px/1 var(--f-text); color: var(--dim); }
.b-choices { display: grid; gap: 6px; width: 100%; max-width: 700px; grid-template-columns: repeat(3, 1fr); }
.b-choices.c2 { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
.b-choices.c5 { grid-template-columns: repeat(5, 1fr); }
.b-choice { padding: 18px 6px; font: 600 15px/1.1 var(--f-disp); color: var(--ink); background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--hair); transition: background .12s var(--ui-ease), box-shadow .12s, transform .08s, color .12s; }
.b-choice:not([disabled]):hover { background: #221C12; color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.b-choice:not([disabled]):active { transform: translateY(2px); }
.b-choice[disabled] { opacity: .32; }
.b-choice.gone { opacity: .12; text-decoration: line-through; }
.b-hint { margin: 0; font: 400 13px/1.4 var(--f-text); color: var(--dim); }
.b-res.good h3 { color: var(--ok); }
.b-res.bad h3 { color: var(--ink-2); }
.b-truth { margin: 0; font: 500 15px/1.4 var(--f-text); color: var(--ink-2); }
.b-truth.good { color: var(--ink); }
.b-truth.near { color: var(--orange); }
.b-gain { margin: 0; font: 400 14px/1 var(--f-text); color: var(--ink-2); }
.b-gain b { font: 600 15px/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.b-res { gap: 6px; }
.b-res h3 { font-size: 26px; }
.b-ctl { gap: 14px; padding-top: 18px; }
.b-kit { width: 100%; display: grid; gap: 8px; }
.b-kit h4 { margin: 0; font: 600 13px/1 var(--f-disp); color: var(--ink-2); text-align: center; }
.b-kit-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.b-kb { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 14px 8px 8px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .12s var(--ui-ease), background .12s; max-width: 300px; }
.b-kb:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--gt); }
.b-kb.on { box-shadow: inset 0 0 0 2px var(--orange); background: #1F1A10; }
.b-kb.off { opacity: .35; }
.b-kb-art { width: 42px; height: 42px; overflow: hidden; flex: 0 0 42px; }
.b-kb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-kb-in { display: grid; gap: 3px; }
.b-kb-in b { font: 600 14px/1.15 var(--f-disp); }
.b-kb-in i { font: 400 12px/1.2 var(--f-text); font-style: normal; color: var(--gt); }
.b-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; width: 100%; }
.b-act { display: grid; gap: 6px; text-align: left; padding: 18px 18px 16px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--hair); transition: background .12s var(--ui-ease), box-shadow .12s, transform .08s; }
.b-act b { font: italic 700 26px/0.9 var(--f-head); text-transform: uppercase; }
.b-act span { font: 400 13px/1.35 var(--f-text); color: var(--ink-2); }
.b-act i { font: 600 13px/1 var(--f-mono); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.b-act:not([disabled]):active { transform: translateY(2px); }
.b-act.a-strike b { color: #FF6A3D; }
.b-act.a-strike:hover:not([disabled]) { box-shadow: inset 0 0 0 1px #FF6A3D; background: #1F1410; }
.b-act.a-guard b { color: #8FB0C8; }
.b-act.a-guard:hover:not([disabled]) { box-shadow: inset 0 0 0 1px #8FB0C8; background: #12171C; }
.b-act.a-focus b { color: var(--ink); }
.b-act.a-focus:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--ink); }
.b-act.a-overclock b { color: var(--orange); }
.b-act[disabled] { opacity: .4; }
.b-wait p { margin: 0; color: var(--ink-2); }
.b-wait p b { color: var(--ink); }
.b-wait-dot { width: 10px; height: 10px; background: var(--orange); transform: rotate(45deg); animation: b-pulse .9s ease-in-out infinite; }
.b-flash { width: 100%; max-width: 700px; text-align: center; padding: 10px 14px; background: var(--panel-2);
  animation: g-panel .22s var(--ui-ease); }
.b-flash-n { font: 500 12px/1 var(--f-text); color: var(--dim); }
.b-flash p { margin: 4px 0 0; font: 400 14.5px/1.35 var(--f-text); color: var(--ink-2); }
.b-flash b { color: var(--ink); font-weight: 600; }
.b-flash .good { color: var(--ok); } .b-flash .bad { color: #FF6A5F; }
.g-quit { color: var(--dim); font: 400 13px/1 var(--f-text); padding: 12px; }
.g-quit:hover { color: var(--ink-2); }

/* =====================================================================
   RESULT
   ===================================================================== */
.g-result { position: relative; background: #08070B; }
.r-stage { position: relative; height: min(56vh, 520px); min-height: 380px; overflow: hidden;
  background: linear-gradient(to bottom, #0B0A12 0%, #1A1622 52%, #0C0B10 53%, #08070B 100%); }
.g-result.win .r-stage { background:
  radial-gradient(50% 70% at 20% 70%, color-mix(in srgb, var(--fa) 26%, transparent), transparent 70%),
  linear-gradient(to bottom, #0B0A12 0%, #1A1622 52%, #0C0B10 53%, #08070B 100%); }
.g-result.loss .r-stage { background:
  radial-gradient(50% 70% at 80% 70%, color-mix(in srgb, var(--fb) 22%, transparent), transparent 70%),
  linear-gradient(to bottom, #0B0A12 0%, #1A1622 52%, #0C0B10 53%, #08070B 100%); }
.g-result .b-f { width: min(34%, 440px); }
.g-result.win .b-them, .g-result.loss .b-you { filter: grayscale(.85) brightness(.45); transform: translateY(6%); }
.g-result.win .b-you, .g-result.loss .b-them { animation: r-lift .6s var(--hit-ease) .15s both; }
@keyframes r-lift { from { transform: translateY(6%); } to { transform: none; } }
.r-verdict { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
  display: grid; gap: 8px; justify-items: center; width: min(90%, 560px); }
.r-eye { margin: 0; font: 500 14px/1.3 var(--f-text); color: var(--ink-2); text-shadow: 0 1px 10px #000; }
.r-word { margin: 0; font: italic 700 clamp(64px, 12vw, 136px)/0.82 var(--f-head); text-transform: uppercase;
  letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(0,0,0,.7); animation: r-slam .55s cubic-bezier(.16,1,.3,1) both; }
.g-result.win .r-word { color: var(--ink); }
.g-result.loss .r-word { color: var(--ink-2); }
@keyframes r-slam { 0% { opacity: 0; transform: scale(1.8); filter: blur(6px); } 60% { opacity: 1; filter: none; } 100% { transform: scale(1); } }
.r-score { margin: 0; display: flex; gap: 12px; align-items: baseline; font: 600 26px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.r-score span { font: 400 14px/1 var(--f-text); color: var(--dim); }
.r-close { margin: 4px 0 0; font: 500 14px/1.3 var(--f-text); color: var(--orange); }
.r-body { max-width: 1060px; margin: 0 auto; padding: 24px 24px 8px; display: grid; gap: 22px; }
.r-again { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.r-again .btn { width: 100%; justify-content: center; }
.r-again .btn span, .g .btn span { text-transform: none; letter-spacing: 0; font-family: var(--f-disp); }
.r-again .btn span { font-weight: 600; font-size: 14px; }
.r-re { font-size: 17px !important; padding: 20px !important; }
.r-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); }
.r-tiles.four { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
.r-gear-in { display: flex; gap: 12px; align-items: center; }
.r-gear-art { width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; }
.r-gear-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-gear-n { display: block; font: 600 17px/1.15 var(--f-disp) !important; color: var(--ink) !important; margin-bottom: 3px; }
.r-t { background: var(--panel); padding: 18px 18px 16px; display: grid; gap: 8px; align-content: start; }
.r-t-k { font: 500 12.5px/1 var(--f-text); color: var(--dim); }
.r-t b { font: 600 30px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.r-t b i { font-style: normal; font-size: 16px; color: var(--dim); }
.r-t.hl b { color: var(--orange); }
.r-t-bar { height: 4px; background: rgba(255,255,255,.08); }
.r-t-bar i { display: block; height: 100%; background: var(--ink); animation: r-fill .9s var(--ui-ease) .3s both; }
@keyframes r-fill { from { width: 0; } }
.r-t-s { font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.r-log summary { cursor: pointer; font: 600 13.5px/1 var(--f-disp); color: var(--ink-2); padding: 6px 0; list-style: none; }
.r-log summary::-webkit-details-marker { display: none; }
.r-rounds { display: grid; gap: 1px; margin-top: 10px; }
.r-r { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; padding: 10px 12px; background: var(--panel); font: 400 13.5px/1.3 var(--f-text); }
.r-r .n { font: 600 13px/1.3 var(--f-mono); color: var(--dim); }
.r-r .mv { color: var(--ink-2); }
.r-r .mv b { color: var(--ink); font-weight: 600; }
.r-r .d { font: 600 13px/1.3 var(--f-mono); font-variant-numeric: tabular-nums; }
.r-r .d.good { color: var(--ok); } .r-r .d.bad { color: #FF6A5F; }

/* =====================================================================
   SEASON
   ===================================================================== */
.g-season { max-width: 980px; margin: 0 auto; padding: 100px 24px 20px; display: grid; gap: 16px; }
.s-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.s-h h2 { margin: 0; font: italic 700 40px/0.88 var(--f-head); text-transform: uppercase; }
.s-tabs { display: flex; gap: 2px; background: var(--panel-2); padding: 3px; }
.s-tabs button { font: 600 13px/1 var(--f-disp); color: var(--ink-2); padding: 10px 14px; }
.s-tabs button.on { background: var(--ink); color: #000; }
.s-note { margin: 0; font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.s-board, .s-fx, .s-hist { display: grid; gap: 1px; }
.s-row { display: grid; grid-template-columns: 32px 44px minmax(0, 1fr) auto 90px; gap: 14px; align-items: center;
  padding: 10px 14px; background: var(--panel); }
.s-row.you { background: #1F1A10; }
.s-rk { font: 600 15px/1 var(--f-mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.s-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px var(--f); }
.s-av .sav { width: 150%; margin: -8% 0 0 -25%; }
.s-n b { display: block; font: 600 15px/1.1 var(--f-disp); }
.s-n i { display: block; font: 400 12px/1.2 var(--f-text); font-style: normal; color: var(--f); margin-top: 3px; }
.s-v { font: 600 17px/1 var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.s-v i { font: 400 12px/1 var(--f-text); font-style: normal; color: var(--dim); margin-left: 4px; }
.s-s { font: 400 12.5px/1 var(--f-text); color: var(--dim); text-align: right; }
.s-fxr { display: grid; grid-template-columns: 32px 90px minmax(0, 1fr) 50px 90px; gap: 14px; align-items: center; padding: 14px; background: var(--panel); }
.s-fxr b { font: italic 700 20px/1 var(--f-head); text-transform: uppercase; color: var(--f); }
.s-fxr.unq { opacity: .5; }
.s-bar { height: 6px; background: rgba(255,255,255,.07); }
.s-bar i { display: block; height: 100%; background: var(--f); }
.s-sub { margin: 18px 0 0; font: 600 14px/1 var(--f-disp); color: var(--ink-2); }
.s-hr { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 60px; gap: 14px; align-items: center; padding: 11px 14px; background: var(--panel); }
.s-hr b { font: 600 14px/1 var(--f-disp); }
.s-hr.w b { color: var(--ok); } .s-hr.l b { color: var(--dim); }
.s-hr span { font: 400 14px/1.2 var(--f-text); color: var(--ink-2); }

/* =====================================================================
   SMALL SCREENS · recomposed, not shrunk
   ===================================================================== */
@media (max-width: 860px) {
  /* the world pans under your finger instead of shrinking to nothing */
  /* the world fills the phone and pans under your finger */
  .g-frame { --fh: max(460px, calc(100svh - var(--sc-top, 76px) - var(--nav, 64px))); height: var(--fh); width: calc(var(--fh) * 1.7778);
    aspect-ratio: auto; max-height: none; }
  /* what you pick opens as a sheet over the world, not below it */
  .g-world + .g-panel { position: fixed; left: 8px; right: 8px; bottom: calc(var(--nav, 64px) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 25;
    max-height: 60svh; overflow-y: auto; border: 0; background: rgba(12, 11, 16, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px var(--hair), 0 20px 50px rgba(0, 0, 0, .6); }
  .g-world + .g-panel::before { top: 0; }
  .g-hint { font-size: 12.5px; }
  .g-hud { padding: 12px 14px; }
  .g-id-pic { width: 40px; height: 40px; }
  .g-nav button { padding: 9px 10px; font-size: 12.5px; }
  .g-hint { top: 64px; max-width: 86%; }
  .g-panel-in, .g-panel.land .g-panel-in { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px 24px; }
  .g-panel.quiet .g-panel-in { grid-template-columns: 1fr; }
  .p-art { width: 120px; height: 90px; }
  .g-panel.boss .p-art { width: 160px; height: 110px; }
  .p-go { justify-items: stretch; }
  .g .btn.primary.g-engage { width: 100%; }
  /* loadout on a phone: character, what it wears and the score up top; the list scrolls with the page, the dock stays */
  .g-lo { grid-template-columns: 1fr; height: auto; padding-top: 66px;
    background: radial-gradient(120% 50% at 50% 18%, color-mix(in srgb, var(--f) 15%, #0B0A0E) 0%, #0B0A0E 72%); }
  .lo-sheet { padding: 0 14px 16px; grid-template-rows: auto auto auto; }
  .lo-doll { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .lo-col { display: contents; }
  .lo-char { grid-column: 1 / -1; order: -1; width: min(100%, 330px, 44svh); height: auto; margin: 0 auto 8px; }
  /* r16: the links sit under the character, not over its hands */
  .lo-char { margin-bottom: 36px; }
  .lo-acts { bottom: -32px; }
  .lo-ds-w.none { display: none; }
  .lo-col.r .lo-ds { grid-template-columns: 36px minmax(0, 1fr); text-align: left; padding: 3px 26px 3px 3px; }
  .lo-col.r .lo-ds-art { order: 0; }
  .lo-col.r .lo-x { left: auto; right: 3px; }
  .lo-ds { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .lo-ds-art { width: 36px; height: 36px; }
  .lo-bare { display: block; grid-column: 1 / -1; margin: 0; text-align: center; font: 400 13px/1.4 var(--f-text); color: var(--dim); }
  .lo-foot { margin-top: 12px; gap: 14px; }
  .lo-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 10px; width: 100%; }
  .lo-stats b { font-size: 17px; }
  .lo-stats .hl { grid-column: 1 / -1; order: -1; display: flex; align-items: baseline; gap: 10px; padding: 0 0 10px; border: 0; box-shadow: inset 0 -1px 0 var(--hair); }
  .lo-stats .hl b { font-size: 22px; }
  .lo-panel { display: block; box-shadow: inset 0 1px 0 var(--hair); }
  .lo-tabs { padding: 0 14px; }
  .lo-scroll { overflow: visible; padding: 12px 14px 18px; }
  .g-lo { padding-bottom: 76px; }
  .lo-dock { position: fixed; left: 0; right: 0; bottom: calc(var(--nav, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 22; padding: 10px 14px;
    background: rgba(14, 13, 18, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .lo-dock .btn.primary.g-engage { width: auto; padding: 14px 16px; font-size: 14px; }
  .lo-arm-chip { flex-basis: 34px; width: 34px; height: 34px; }
  .lo-arm-n { font-size: 12px; }
  /* battle: characters flank the field, smaller; the field leads */
  .b-stage { height: 52vh; min-height: 360px; }
  .b-f { width: 46%; bottom: -4%; }
  .b-field { left: 6%; right: 6%; top: 34%; bottom: 30%; }
  .b-hud { padding: 12px 12px; gap: 8px; }
  .b-m-top b { font-size: 16px; }
  .b-round b { font-size: 22px; }
  .b-ctl { padding: 16px 14px 8px; }
  .b-choices.c5 { grid-template-columns: repeat(3, 1fr); }
  .b-mv { padding: 9px 14px 8px; gap: 4px; }
  .b-mv b { font-size: 26px; }
  .b-mv span { font-size: 11px; }
  .b-mv.you { left: 6%; top: 22%; }
  .b-mv.them { right: 6%; top: 44%; }
  .b-vs { top: 37%; font-size: 16px; }
  .b-hpd { display: none; }
  .b-cd small { display: none; }
  .b-cd { font-size: 13px; }
  .b-say { min-height: 84px; }
  .b-acts { grid-template-columns: repeat(2, 1fr); }
  .r-again { grid-template-columns: 1fr; }
  .r-tiles, .r-tiles.four { grid-template-columns: 1fr; }
  .g-result .b-f { width: 50%; }
  .s-row { grid-template-columns: 26px 38px minmax(0, 1fr) auto; }
  .s-row .s-s { display: none; }
  .s-fxr { grid-template-columns: 24px 70px minmax(0, 1fr) 40px; }
  .s-fxr .s-s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-panel, .g-hint, .b-dmg, .b-fire, .r-word, .g-result .b-f, .lo-item.just, .sav-in, .sav-hot,
  .b-f.hit .b-art, .b-hp.low i, .b-drone, .w-ch.calls .w-call, .b-shake, .b-art, .b-mv, .b-vs, .b-hurt, .b-whiteout,
  .b-fxc, .b-intro, .b-timer.low, .b-gear i.hot, .b-acts.sent .b-act.on { animation: none !important; }
  .b-mv, .b-vs, .b-hurt, .b-whiteout, .b-intro { display: none; }
  .b-fxc { opacity: .5; }
}
/* =====================================================================
   THE SCENE · twelve layers, one camera
   Layers drift with the pointer by their depth and lag a phone pan by
   their scroll factor. Every animation reads the page clock (--t0), so
   a re-render never makes the world jump.
   ===================================================================== */
.ws { position: absolute; inset: 0; overflow: hidden; background: #070A14; --amp: 18; --px: 0; --py: 0; --sl: 0; --t0: 0s; }
.ws-cam { position: absolute; inset: 0; transform-origin: 50% 52%; transition: transform 1.3s cubic-bezier(.22, .7, .18, 1); will-change: transform; }
.ws-drift { position: absolute; inset: 0; animation: ws-drift 46s ease-in-out infinite alternate; animation-delay: var(--t0); }
@keyframes ws-drift { from { transform: translate3d(-.35%, .12%, 0); } to { transform: translate3d(.35%, -.18%, 0); } }
.wl { position: absolute; inset: 0; pointer-events: none;
  transform: translate3d(calc(var(--px) * var(--amp) * var(--d) * -1px + var(--sl) * var(--sf) * 1px), calc(var(--py) * var(--amp) * var(--d) * -.6px), 0);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }

/* art in its slots */
.wa { position: absolute; display: block; max-width: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.wa.m-fade-x { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%);
  mask-composite: intersect; }
.wa-volcano { filter: brightness(.8) saturate(.92); }
/* the ash column over the Source swells and drifts, slowly */
.wa-ash-plume { filter: brightness(.86) saturate(.9); transform-origin: 50% 92%; animation: ash-swell 42s ease-in-out infinite alternate; animation-delay: var(--t0); }
@keyframes ash-swell { 0% { transform: scale(1) translateX(0); } 100% { transform: scale(1.035, 1.05) translateX(-.6%); } }
@media (prefers-reduced-motion: reduce) { .wa-ash-plume { animation: none; } }

/* 01 sky: SAN's four-point stars */
.fx-star { position: absolute; width: calc(var(--k) * 1.05%); transform: translate(-50%, -50%); opacity: .5;
  animation: fx-tw 7s ease-in-out infinite; animation-delay: calc(var(--t0) - var(--o)); }
@keyframes fx-tw { 0%, 100% { opacity: .55; } 50% { opacity: .14; } }

/* 02 the sea: a glint now and then */
.fx-glint { position: absolute; width: 1.8%; height: 2px; transform: translate(-50%, -50%); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(190, 205, 240, .55), transparent);
  animation: fx-glint 6s ease-in-out infinite; animation-delay: calc(var(--t0) - var(--o)); }
@keyframes fx-glint { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.6); } 40%, 60% { opacity: .9; transform: translate(-50%, -50%) scaleX(1); } }

/* 03 the eruption: a slow glow behind it, embers rising out of it */
.fx-glow { position: absolute; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 128, 64, .30), rgba(170, 64, 50, .12) 55%, transparent);
  animation: fx-glow 6s ease-in-out infinite; animation-delay: var(--t0); }
@keyframes fx-glow { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.fx-ember { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFC27A; box-shadow: 0 0 5px #FF8A3A; opacity: 0;
  animation: fx-ember var(--d) linear infinite; animation-delay: calc(var(--t0) - var(--o)); }
@keyframes fx-ember { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), -130px); } }

/* light: how a land is recognised without a label */
.lt { position: absolute; width: max(var(--r), 3px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0 22%, transparent 100%); mix-blend-mode: screen; opacity: .85;
  animation: lt-flk 9s steps(1) infinite; animation-delay: calc(var(--t0) - var(--o)); }
@keyframes lt-flk { 0%, 93%, 100% { opacity: .85; } 94%, 96% { opacity: .35; } }
.lt-beacon { animation: lt-beat 3.6s ease-in-out infinite; animation-delay: calc(var(--t0) - var(--o)); }
@keyframes lt-beat { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.85); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
.lt-strip { animation: lt-run 2.4s ease-in-out infinite; animation-delay: calc(var(--t0) - var(--o) * .3); }
@keyframes lt-run { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.lt-glint { border-radius: 40%; transform: translate(-50%, -50%) scaleY(.3); opacity: .5; animation: none; }
.lt-bay { border-radius: 2px; transform: translate(-50%, -50%) scaleX(1.4); animation: lt-run 5s ease-in-out infinite; }
.lt-lantern { animation: lt-lan 1.8s ease-in-out infinite; animation-delay: calc(var(--t0) - var(--o)); }
@keyframes lt-lan { 0%, 100% { opacity: .9; } 30% { opacity: .65; } 60% { opacity: 1; } }
.lt-lamp { opacity: .8; animation: none; }
.lt-sign { opacity: .95; animation: none; }

/* r11 · the world, a little more alive */
/* the eruption on the water round the Source */
.fx-glint.warm { height: 1.6px; background: linear-gradient(90deg, transparent, rgba(255, 150, 86, .7), transparent); mix-blend-mode: screen;
  animation-duration: 4.2s; }
/* cloud drifting past the Upper Air, fog drifting over the open ground */
.fx-cloud, .fx-fog { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
  animation: fx-drift var(--dur, 80s) ease-in-out infinite alternate; animation-delay: calc(var(--t0) - var(--o)); }
.fx-cloud { background: radial-gradient(closest-side, rgba(44, 54, 88, .5), rgba(44, 54, 88, .18) 60%, transparent); filter: blur(3px); }
.fx-fog { background: radial-gradient(closest-side, rgba(60, 70, 104, .16), rgba(60, 70, 104, .06) 62%, transparent); }
.fx-cloud.far { background: radial-gradient(closest-side, rgba(46, 56, 90, .55), rgba(46, 56, 90, .2) 60%, transparent); filter: blur(4px); }
@keyframes fx-drift { from { transform: translateX(calc(var(--dx) * -1)); } to { transform: translateX(var(--dx)); } }
/* a meteor, once in a long while */
.fx-meteor { position: absolute; width: 7%; height: 1.4px; opacity: 0; transform-origin: 100% 50%; transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, rgba(220, 230, 255, .75)); border-radius: 2px;
  animation: fx-meteor 29s linear infinite; animation-delay: calc(var(--t0) - 11s); }
@keyframes fx-meteor { 0%, 95.6% { opacity: 0; transform: rotate(-24deg) translateX(0) scaleX(.3); }
  96.4% { opacity: .9; } 98.4% { opacity: 0; transform: rotate(-24deg) translateX(-260%) scaleX(1); } 100% { opacity: 0; } }
/* the Sora lift: a car riding the cable between the headland and the mast's island */
.fx-car { position: absolute; left: var(--x0); top: var(--y0); width: .46%; aspect-ratio: .9; transform: translate(-50%, 0);
  animation: fx-car 34s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: var(--t0); }
.fx-car::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 34%; background: #0A0C14; }
.fx-car::after { content: ''; position: absolute; left: 0; right: 0; top: 30%; bottom: 0; border-radius: 1.5px; background: #0E1220;
  box-shadow: inset 0 1px 0 #2D3656, 0 0 4px rgba(206, 207, 102, .45);
  background-image: linear-gradient(90deg, transparent 18%, rgba(206, 207, 102, .9) 18% 42%, transparent 42% 58%, rgba(206, 207, 102, .9) 58% 82%, transparent 82%);
  background-size: 100% 36%; background-position: 0 40%; background-repeat: no-repeat; }
@keyframes fx-car { 0%, 8% { left: var(--x0); top: var(--y0); } 92%, 100% { left: var(--x1); top: var(--y1); } }

/* 05 low mist lying on the open ground */
.fx-mist { position: absolute; background: linear-gradient(to bottom, transparent, rgba(58, 68, 104, .16) 45%, transparent); }

/* 06 routes */
.w-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* a road is a bed of darker ground, a surface lit faintly from the sky, two worn tracks
   either side of a paler crown, gravel, and a fine lit edge. It fades into the haze. */
.rt-verge polygon { fill: #07080E; opacity: .5; }
.rt-surf polygon { fill: url(#rt-g); }
.rt-crown polygon { fill: #2C3248; opacity: .32; }
.rt-ruts polygon { fill: #10131D; opacity: .55; }
.rt-grit ellipse { fill: #3A4058; opacity: .32; }
.rt-edge .e-l { fill: rgba(150, 162, 206, .13); }
.rt-edge .e-r { fill: rgba(4, 5, 10, .45); }
.rt-plaza .pz-verge { fill: #07080E; opacity: .5; filter: url(#rt-soft); }
.rt-plaza .pz { fill: #20253A; }
.rt-plaza .pz { stroke: rgba(150, 162, 206, .12); stroke-width: 1.4; }
.rt-plaza .pz-wear { fill: #2A3047; opacity: .45; }
/* a footpath: packed earth, a little warmer than the road, worn pale down the middle */
.rt-trail .tb { fill: #07080E; opacity: .4; filter: url(#rt-soft); }
.rt-trail .ts { fill: #22212D; opacity: .9; }
.rt-trail .tw { fill: none; stroke: #34323F; stroke-width: 1; stroke-dasharray: 3 4; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.rt-post path { fill: none; stroke: #05060B; stroke-linecap: round; stroke-linejoin: round; }
.rt-post rect { fill: #0B0D14; stroke: #05060B; stroke-width: .6; }

/* 07 hotspots: a land is quiet until you point at it */
.w-hits { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-land { fill: transparent; pointer-events: auto; cursor: pointer; transition: fill .2s; outline: none; }
.w-land:hover { fill: rgba(255, 255, 255, .018); }
.w-land:focus-visible { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }

/* 08 drones: SAN drone art, given a place in the world */
.w-cones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cone { fill: url(#cone-w); transform-box: view-box; mix-blend-mode: screen;
  animation: cone 7s cubic-bezier(.6, 0, .4, 1) infinite alternate; animation-delay: calc(var(--t0) - var(--o)); }
.cone.boss { fill: url(#cone-r); animation-duration: 11s; }
@keyframes cone { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.wd-pool { position: absolute; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(226, 234, 250, .30), rgba(226, 234, 250, .08) 62%, transparent);
  animation: pool 7s cubic-bezier(.6, 0, .4, 1) infinite alternate; animation-delay: calc(var(--t0) - var(--o)); }
.wd-pool.boss { background: radial-gradient(closest-side, rgba(255, 70, 56, .32), rgba(255, 70, 56, .08) 62%, transparent); animation-duration: 11s; }
@keyframes pool { from { transform: translateX(var(--sw)); } to { transform: translateX(calc(var(--sw) * -1)); } }
.wd-shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.wd { position: absolute; transform: translate(-50%, -50%); padding: 0; margin: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.wd:focus { outline: none; }
.wd-sel { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.9); border-radius: 50%;
  border: 1.5px solid var(--orange); opacity: 0; transition: opacity .16s, transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.wd:hover .wd-sel { opacity: .4; }
.wd.on .wd-sel, .wd:focus-visible .wd-sel { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.dr { position: relative; display: block; width: 100%; }
.dr-body { position: relative; display: block; animation: dr-bob 3.8s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--t0) - var(--o, 0s)); }
.dr img { display: block; width: 100%; height: auto; -webkit-user-drag: none; filter: brightness(.82) drop-shadow(0 0 1px rgba(190, 205, 235, .4)); }
.dr.flip .dr-body img { transform: scaleX(-1); }
.dr.still .dr-body { animation: none; }
.dr-eye { position: absolute; left: 50%; top: 52%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: #FF3B30; box-shadow: 0 0 6px 2px rgba(255, 59, 48, .65); animation: dr-eye 2.4s ease-in-out infinite; }
.dr-t2 .dr-eye, .dr-t4 .dr-eye { left: 56%; top: 50%; }
.dr-t4.flip .dr-eye { left: 44%; }
.dr-t3 .dr-eye, .dr-t5 .dr-eye, .dr-boss .dr-eye { left: 60%; top: 57%; width: 5%; }
.dr.core .dr-eye { width: 9%; box-shadow: 0 0 10px 4px rgba(255, 90, 31, .7); }
.dr-boss .dr-eye { width: 7%; }
.dr.trail .dr-body::after { content: ''; position: absolute; right: 70%; top: 48%; width: 46%; height: 2%;
  background: linear-gradient(to left, rgba(255, 59, 48, .32), transparent); border-radius: 2px; }
.dr.trail.flip .dr-body::after { right: auto; left: 70%; background: linear-gradient(to right, rgba(255, 59, 48, .32), transparent); }
.wd.t4 .dr-body { animation-name: dr-strafe; animation-duration: 5.2s; }
.wd.boss .dr-body { animation-duration: 6.5s; }
@keyframes dr-bob { 0%, 30% { transform: translateY(0); } 50%, 80% { transform: translateY(-6%); } 100% { transform: translateY(0); } }
@keyframes dr-strafe { 0%, 22% { transform: translate(0, 0); } 36%, 58% { transform: translate(18%, -4%); } 72%, 86% { transform: translate(-14%, -2%); } 100% { transform: translate(0, 0); } }
@keyframes dr-eye { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
/* the boss flies with two scouts */
.dr .dr-esc { position: absolute; width: 24%; left: 39%; top: 40%; z-index: 0; filter: brightness(.7); animation: dr-orbit 9s linear infinite; animation-delay: calc(var(--t0)); }
.dr .dr-esc.e2 { animation-delay: calc(var(--t0) - 4.5s); }
.dr-boss .dr-body { z-index: 1; }
@keyframes dr-orbit {
  0% { transform: translate(-190%, -40%) scale(.9); z-index: 0; } 25% { transform: translate(0, -150%) scale(.8); }
  50% { transform: translate(190%, -40%) scale(.9); } 75% { transform: translate(0, 90%) scale(1.05); z-index: 2; }
  100% { transform: translate(-190%, -40%) scale(.9); } }

/* 09 characters standing in the ground (r11): the bust fades into the haze over a soft
   contact shadow, and catches the Source's light on the side that faces it. No slab. */
.w-ch { position: absolute; width: calc(var(--s) * 10.5%); transform: translate(-50%, -100%); padding: 0; margin: 0; border: 0;
  background: none; pointer-events: auto; cursor: pointer; display: block; --lx: 0; --ra: .3; }
div.w-ch { cursor: default; pointer-events: none; }
.w-fig { position: relative; display: block; z-index: 1; }
/* effect layers (flames, smoke) fill the square canvas: the sides and corners fade, and the
   bottom of the bust dissolves into the ground haze instead of ending in a straight cut */
.w-fig .sav {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), radial-gradient(ellipse 60% 66% at 50% 46%, #000 64%, transparent 100%), linear-gradient(to top, transparent 0, transparent 8%, rgba(0, 0, 0, .45) 15%, #000 28%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), radial-gradient(ellipse 60% 66% at 50% 46%, #000 64%, transparent 100%), linear-gradient(to top, transparent 0, transparent 8%, rgba(0, 0, 0, .45) 15%, #000 28%);
  mask-composite: intersect;
  /* further is darker and greyer; nearer the Source, a touch of its warmth */
  filter: brightness(calc(.5 + var(--s) * .38)) saturate(calc(.55 + var(--s) * .35)) sepia(calc(var(--ra) * .2));
  transform-origin: 50% 100%; transition: filter .2s cubic-bezier(.2, .8, .2, 1), transform .2s cubic-bezier(.2, .8, .2, 1); }
.w-ch:hover .w-fig .sav, .w-ch.on .w-fig .sav { filter: brightness(1.02) saturate(1); transform: translateY(-2%); }
.w-ch.you .w-fig .sav { filter: brightness(.95) saturate(.95); }
/* the contact shadow: soft, wider than the body, darkest right under it. The Source is behind
   everyone, so it falls a little toward the camera and away from the fire's side. */
.w-shadow { position: absolute; left: 0; right: 0; bottom: 3%; height: 17%; z-index: 0; pointer-events: none; border-radius: 50%;
  /* a pool on the ground, flattened to the ground's own perspective, centred where the body dissolves:
     the figure sinks into it rather than hovering over it */
  background: radial-gradient(closest-side, rgba(2, 3, 8, .66), rgba(2, 3, 8, .4) 42%, rgba(2, 3, 8, .14) 74%, transparent); }
/* the cast: fainter, longer, falling toward the camera and away from the Source behind everyone */
.w-shadow::before { content: ''; position: absolute; left: 12%; right: 12%; top: 38%; height: 120%; border-radius: 50%;
  transform: translateX(calc(var(--lx) * -16%)); opacity: .55;
  background: radial-gradient(closest-side, rgba(2, 3, 8, .5), rgba(2, 3, 8, .16) 60%, transparent); }
/* the selection ring lies on the ground: only when you point at someone, or pick them */
.w-ring { position: absolute; left: 7%; width: 86%; bottom: -5%; height: 11%; z-index: 0; overflow: visible; pointer-events: none; display: block; }
.w-ring ellipse { fill: none; stroke: var(--orange); stroke-width: 1.2; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity .16s;
  filter: drop-shadow(0 0 2px rgba(255, 90, 31, .6)); }
.w-ch:hover .w-ring ellipse { opacity: .5; }
.w-ch.on .w-ring ellipse { opacity: .9; animation: w-ring 1.6s ease-in-out infinite; }
@keyframes w-ring { 50% { opacity: .5; } }
div.w-ch .w-ring { display: none; }
.w-you-tag { position: absolute; left: 50%; top: 2%; z-index: 2; transform: translateX(-50%); font: 600 10.5px/1 var(--f-disp); letter-spacing: .14em;
  text-transform: uppercase; font-style: normal; color: var(--f); text-shadow: 0 1px 8px #000; }
.w-ch:focus { outline: none; }
.w-ch:focus-visible .w-ring ellipse { opacity: 1; }

/* light on the ground: where lamps, fire and the eruption fall */
.fx-pool { position: absolute; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, var(--c), transparent); opacity: var(--a, .2); }
.fx-pool.breathe { animation: fx-glow 6s ease-in-out infinite; animation-delay: var(--t0); }

/* opponents standing in the world: a warden in each land, today's boss at the Source */
.w-foe { position: absolute; left: 50%; top: 3%; width: 7%; min-width: 7px; aspect-ratio: 1; z-index: 2; transform: translateX(-50%) rotate(45deg);
  background: #FF3B30; box-shadow: 0 0 0 3px rgba(255, 59, 48, .22), 0 0 10px rgba(255, 59, 48, .55); animation: w-foe 2.6s ease-in-out infinite; }
@keyframes w-foe { 50% { transform: translateX(-50%) translateY(-40%) rotate(45deg); } }
.w-ch.boss .w-fig .sav { filter: brightness(.96) saturate(1); }
/* the boss stands in front of the Source: a slow red heat behind it, a lighter shadow (the fire is behind it) */
.w-ch.boss .w-shadow { left: 4%; right: 4%; height: 20%; bottom: 2%; opacity: .9; }
.w-ch.boss .w-shadow::before { transform: none; top: 45%; }
.w-aura { position: absolute; left: -30%; right: -30%; top: -6%; bottom: 14%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 86, 52, .16), rgba(170, 48, 40, .06) 58%, transparent);
  animation: fx-glow 5.2s ease-in-out infinite; animation-delay: var(--t0); }
.w-ch.boss .w-foe { width: 6%; top: -2%; }
.w-ch.done .w-fig .sav { filter: grayscale(.8) brightness(.55); }
.w-ch.done .w-fig { filter: none; }
.w-ch.done .w-foe, .w-ch.done .w-aura { display: none; }
.p-foe .sav { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%); mask-image: linear-gradient(to top, transparent 0, #000 22%); }
/* an opponent's portrait is square, like every SAN avatar: never squeezed into the old drone box */
.g-panel .p-art.p-foe, .g-world + .g-panel.boss .p-art.p-foe { width: 150px; height: 150px; overflow: hidden; }
@media (max-width: 860px) { .g-panel .p-art.p-foe, .g-world + .g-panel.boss .p-art.p-foe { width: 112px; height: 112px; } }

/* 12 the lens: vignette, and a little grain so the night never bands */
.ws-grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }
.ws-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 72% at 50% 46%, transparent 58%, rgba(3, 4, 9, .62) 100%); }

/* engage: push in, go dark, fight */
.ws.engage .ws-cam { transition: transform .55s cubic-bezier(.55, 0, .8, .2); }
.ws.engage::after { content: ''; position: absolute; inset: 0; background: #000; animation: ws-dark .52s ease-in forwards; z-index: 20; }
@keyframes ws-dark { from { opacity: 0; } to { opacity: 1; } }

/* ?art=slots — where the art goes. ?art=bare — the screenshot test. */
.ws.slots .wa { outline: 1px dashed rgba(255, 196, 120, .85); outline-offset: -1px; }
.wa-empty { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 12px); }
.ws-tag { position: absolute; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px;
  font: 500 9.5px/1.2 var(--f-mono, ui-monospace, monospace); color: #FFD9A0; z-index: 30; }
.ws-tag b { font-weight: 700; background: rgba(0, 0, 0, .78); padding: 2px 4px; }
.ws-tag i { font-style: normal; background: rgba(0, 0, 0, .6); padding: 1px 4px; }
.g-world.bare .g-tip { display: none; }
.ws.gray .w-fig .sav, .ws.gray .dr-body img { opacity: 0; }
.ws.gray .w-fig { background: #6B6B70; }
.ws.gray .dr-body { background: #6B6B70; border-radius: 4px; }

/* 07 world objects: things you can use */
.wo { position: absolute; padding: 0; margin: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.wo:focus { outline: none; }
.wo img { display: block; width: 100%; height: 100%; }
.wo-screen { position: absolute; left: 5%; top: 24%; width: 89%; height: 47%; mix-blend-mode: screen; border-radius: 2px;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(214, 210, 222, .26), rgba(169, 165, 174, .06) 70%, transparent);
  box-shadow: 0 0 26px 6px rgba(169, 165, 174, .1);
  transition: background .18s, box-shadow .18s; animation: lt-flk 11s steps(1) infinite; animation-delay: var(--t0); }
.wo:hover .wo-screen, .wo.on .wo-screen, .wo:focus-visible .wo-screen { background: linear-gradient(to bottom, rgba(220, 216, 228, .4), rgba(169, 165, 174, .16));
  box-shadow: 0 0 30px 4px rgba(196, 192, 204, .28); }
.wo.on .wo-screen, .wo:focus-visible .wo-screen { box-shadow: 0 0 0 1.5px var(--orange), 0 0 30px 4px rgba(196, 192, 204, .28); }
.wo-mark { position: absolute; left: 50%; top: -10%; width: 9%; aspect-ratio: 1; background: var(--orange); transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 3px rgba(252, 76, 1, .25); animation: wo-mark 1.4s ease-in-out infinite; }
@keyframes wo-mark { 50% { transform: translateX(-50%) translateY(-40%) rotate(45deg); } }

/* the one persistent control: challenge a player */
.g-pvp { display: inline-flex; align-items: center; gap: 12px; padding: 13px 16px; background: rgba(10, 10, 15, .78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--hair); font: 600 13px/1 var(--f-disp); color: var(--ink);
  transition: background .14s var(--ui-ease); }
.g-pvp:hover { background: rgba(24, 22, 30, .9); }
.g-pvp i { width: 7px; height: 7px; background: var(--orange); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .ws *, .ws-drift { animation: none !important; }
  .ws-cam, .wl { transition: none !important; }
}

/* =====================================================================
   CHARACTERS · shared
   ===================================================================== */
/* a composite is one picture: its layers' z-indexes (0 to 100+) stay inside it. Before 3.5 they leaked wherever the art sat
   outside the game sheet: the hair (70) covered the FAVOURITE tag on a Fit card */
.sav { position: relative; display: block; width: 100%; aspect-ratio: 1; isolation: isolate; }
.sav-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* 3.1 · a layered fighter is one picture: its layers always stack on each other, whatever a container says about its images
   (a story panel's "img { position: relative }" once pushed every layer below the first: #331 showed as wings alone) */
.sav > img.sav-l { position: absolute !important; inset: 0 !important; margin: 0 !important; max-width: none; }
.sav-flat img { width: 100%; height: 100%; object-fit: cover; display: block; }



/* =====================================================================
   r8 · FIT · the game owns the screen under the host's bar; nothing scrolls
   --sc-top is measured at runtime (combat.js measureTop), --nav is the host's bottom bar
   ===================================================================== */
.sc.g.fit { height: calc(100svh - var(--sc-top, 76px) - var(--nav, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 440px;
  padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; }
.shell.v-combat:has(> .sc.g.fit) { padding-bottom: calc(var(--nav, 0px) + env(safe-area-inset-bottom, 0px)); }
.sc.g.fit > .g-world, .sc.g.fit > .g-battle, .sc.g.fit > .g-result, .sc.g.fit > .g-lo { flex: 1 1 auto; min-height: 0; }
.sc.g.fit > .g-lo { height: auto; }
.sc.g.fit .g-pan { height: 100%; container-type: size; }
.sc.g.fit .g-frame { height: 100%; }

/* battle: the stage takes what the controls leave */
.g-battle { display: flex; flex-direction: column; }
.sc.g.fit .b-stage { flex: 1 1 auto; height: auto; min-height: 210px; container-type: size; }
.sc.g.fit .b-f { width: min(38%, 92cqh); }
.b-ctl { flex: 0 0 auto; width: 100%; max-width: 1100px; box-sizing: border-box; padding: 14px 24px 6px; gap: 10px; }
.g-battle.seq .b-ctl { min-height: 150px; }
.b-ctl:has(> .b-arm) { flex-shrink: 1; min-height: 0; overflow-y: auto; }
.g-quit { padding: 6px 12px 8px; font-size: 12.5px; }

/* the round box: round, clock, rules */
.b-round { position: relative; }
.b-timer { display: block; margin-top: 8px; font: 600 20px/1 var(--f-mono); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.b-timer b { font: inherit; }
.b-timer i { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 2px; }
.b-timer.low { color: #FF3B30; animation: b-tlow 1s steps(1) infinite; }
@keyframes b-tlow { 50% { color: #FF8A80; text-shadow: 0 0 12px rgba(255, 59, 48, .7); } }
.b-help { position: absolute; top: -2px; right: -34px; width: 24px; height: 24px; border-radius: 50%; font: 600 13px/1 var(--f-disp);
  color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.b-help:hover, .b-help.on { color: #0B0A0E; background: var(--ink); box-shadow: none; }

/* the rules: one card */
.b-rules { display: grid; gap: 10px; text-align: left; max-width: 620px; }
.b-rules h3 { margin: 0; font: italic 700 22px/1 var(--f-head); text-transform: uppercase; }
.b-rules ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: rule; }
.b-rules li { counter-increment: rule; position: relative; padding-left: 26px; font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.b-rules li::before { content: counter(rule); position: absolute; left: 0; top: 0; font: 600 12px/1.75 var(--f-mono); color: var(--orange); }
.b-rules li b { color: var(--ink); font-weight: 600; }
.b-rules li em { font-style: normal; color: var(--ink); font-weight: 600; }
.b-rules-key { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12.5px/1.2 var(--f-text); color: var(--ink-2); }
.b-rules-key span { display: inline-flex; gap: 7px; align-items: center; }
.b-rules-key .k-hp { width: 22px; height: 6px; background: var(--fa, var(--ink)); }
.b-rules-key .k-ch { width: 9px; height: 9px; transform: rotate(45deg); background: var(--orange); }
.b-rules-key .k-t { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.b-rules-pop { position: absolute; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(92%, 660px);
  max-height: 84%; overflow: auto; padding: 22px 24px 12px; background: rgba(8, 7, 11, .96); box-shadow: 0 0 0 1px var(--hair), 0 30px 80px rgba(0,0,0,.7);
  display: grid; gap: 6px; animation: g-panel .2s var(--ui-ease); }
.b-rules-pop .g-close { justify-self: end; }
.b-arm { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: 1000px; text-align: left; justify-items: stretch; }
.b-arm-go { display: grid; gap: 10px; justify-items: center; text-align: center; }
.b-arm-go h3 { margin: 0; font: italic 700 26px/0.9 var(--f-head); text-transform: uppercase; }
.b-arm-go p { margin: 0; color: var(--ink-2); font-size: 14px; }
.b-arm-note { font-size: 12.5px !important; color: var(--dim) !important; }

/* listen: prompt and listens on one line, Play beside the answers, the fast bar under them */
.b-listen { gap: 8px; max-width: 860px; }
.b-l-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; }
.b-prompt { font-size: 18px; text-align: left; }
.b-left { margin: 0; white-space: nowrap; }
.b-l-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; width: 100%; align-items: stretch; }
.b-l-row .b-play { min-width: 210px; }
.b-l-row .b-play.again { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.b-l-row .b-choices { max-width: none; }
.b-choice { padding: 16px 6px; }
.b-fast { position: relative; width: 100%; height: 30px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden;
  display: grid; place-items: center; font: 500 13px/1 var(--f-text); color: var(--ink-2); }
.b-fast i { position: absolute; inset: 0; background: linear-gradient(to right, rgba(252, 76, 1, .55), rgba(252, 76, 1, .25)); transform-origin: 0 50%; }
.b-fast span { position: relative; grid-area: 1 / 1; }
.b-fast b { color: var(--ink); font-weight: 600; }
.b-fast .out { opacity: 0; }
.b-fast.idle { background: transparent; box-shadow: none; height: 22px; color: var(--dim); }
@keyframes b-fast { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes b-step-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-step-in { 0% { opacity: 0; } 100% { opacity: 1; } }

/* act: what you heard in one line, four moves that say what they do */
.b-res { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; text-align: center; }
.b-res > b { font: italic 700 22px/1 var(--f-head); text-transform: uppercase; }
.b-res.good > b { color: var(--ok); } .b-res.bad > b { color: var(--ink-2); }
.b-res .b-truth { font-size: 14.5px; }
.b-res .b-gain { font-size: 14px; }
.b-res .b-gain strong { font: 600 15px/1 var(--f-mono); color: var(--ink); }
.b-kit { gap: 6px; }
.b-kit h4 { font-size: 12px; }
.b-kb { padding: 6px 12px 6px 6px; }
.b-kb-art { width: 36px; height: 36px; flex-basis: 36px; }
.b-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-acts.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-act { gap: 5px; padding: 12px 14px 12px; }
.b-act b { font-size: 22px; }
.b-act span { font: 500 14px/1.25 var(--f-text); color: var(--ink); }
.b-act span strong { font: 700 16px/1 var(--f-mono); }
.b-act i { font: 400 12.5px/1.3 var(--f-text); color: var(--dim); }
.b-act i strong { color: var(--ink); font-weight: 600; }

/* the bars say what they are */
.b-lbl { font: 500 10.5px/1 var(--f-text); font-style: normal; color: var(--dim); letter-spacing: .02em; margin-left: -8px; }
.b-m.r .b-lbl { margin: 0 -8px 0 0; }

/* result: the stage takes what the payoff leaves */
.g-result { display: flex; flex-direction: column; }
.sc.g.fit .r-stage { flex: 1 1 auto; height: auto; min-height: 200px; container-type: size; }
.sc.g.fit .g-result .b-f { width: min(34%, 92cqh); }
.sc.g.fit .r-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; width: 100%; box-sizing: border-box; padding: 16px 24px 10px; gap: 14px; }
.sc.g.fit .r-t { padding: 12px 16px; gap: 6px; }
.sc.g.fit .r-t b { font-size: 24px; }
.r-re { padding: 16px !important; }

@media (max-width: 860px) {
  .sc.g.fit-d { height: auto; overflow: visible; display: block; min-height: 0; }
  .shell.v-combat:has(> .sc.g.fit-d) { padding-bottom: calc(var(--nav, 64px) + 40px + env(safe-area-inset-bottom, 0px)); }
  .sc.g.fit .g-frame { width: calc(100cqh * 1.7778); }
  .b-ctl { padding: 10px 12px 4px; gap: 8px; }
  .b-l-head { flex-direction: column; align-items: center; gap: 4px; }
  .b-prompt { font-size: 16px; text-align: center; }
  .b-l-row { grid-template-columns: 1fr; }
  .b-l-row .b-play { min-width: 0; padding: 13px; }
  .b-choice { padding: 13px 4px; font-size: 14px; }
  .b-fast { height: 26px; font-size: 12px; }
  .b-fast.idle { font-size: 11.5px; height: auto; }
  .b-acts, .b-acts.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-acts.c3 .b-act:last-child { grid-column: 1 / -1; }
  .b-act { padding: 9px 11px; gap: 3px; }
  .b-act b { font-size: 18px; }
  .b-act span { font-size: 13px; }
  .b-act i { font-size: 11.5px; }
  .b-res > b { font-size: 18px; }
  .b-res .b-truth, .b-res .b-gain { font-size: 13px; }
  .b-kit h4 { display: none; }
  .b-kb { max-width: none; flex: 1 1 40%; }
  .b-kb-in b { font-size: 12.5px; } .b-kb-in i { font-size: 11px; }
  .b-lbl { display: none; }
  .b-timer { font-size: 16px; margin-top: 4px; }
  .b-help { right: auto; left: 50%; top: auto; bottom: -30px; transform: translateX(-50%); width: 22px; height: 22px; }
  .b-arm { grid-template-columns: 1fr; gap: 14px; }
  .b-rules h3 { font-size: 18px; }
  .b-rules li { font-size: 12.5px; }
  .b-arm .b-rules-key { display: none; }
  .sc.g.fit .r-body { padding: 10px 12px 6px; gap: 10px; }
  .sc.g.fit .r-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc.g.fit .r-tiles.four .r-gear { display: none; }
  .sc.g.fit .r-t { padding: 8px 10px; }
  .sc.g.fit .r-t-s { display: none; }
  .sc.g.fit .r-again { grid-template-columns: 1fr 1fr; }
  .sc.g.fit .r-again .r-re { grid-column: 1 / -1; }
}


/* r8 · loadout says what your pieces do */
.lo-ds-in em { font: 500 10.5px/1.2 var(--f-text); font-style: normal; color: var(--gt, var(--dim)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lo-ds:not(.armed) .lo-ds-in em { color: var(--dim); }
.lo-ds { min-height: 46px; }
.lo-stats em { font: 500 11px/1.1 var(--f-text); color: var(--dim); }
.lo-stats .hl em { font: 500 12px/1 var(--f-mono); color: var(--ink-2); }
.lo-dock { flex-wrap: wrap; row-gap: 10px; }
.lo-build { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.lo-b { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 8px 4px 4px; background: var(--panel-2); }
.lo-b .lo-arm-chip { box-shadow: none; }
.lo-b-in { display: grid; gap: 3px; min-width: 0; }
.lo-b-in b { font: 600 12.5px/1.15 var(--f-disp); color: var(--ink); }
.lo-b-in i { font: 400 11px/1.2 var(--f-text); font-style: normal; color: var(--dim); }
.lo-dock .lo-arm-n { margin: 0; }
.lo-legend { margin: 2px 0 6px; }
.lo-legend summary { cursor: pointer; list-style: none; font: 600 12.5px/1 var(--f-disp); color: var(--ink-2); padding: 6px 0; }
.lo-legend summary::-webkit-details-marker { display: none; }
.lo-legend summary::after { content: ' +'; color: var(--dim); }
.lo-legend[open] summary::after { content: ' −'; }
.lo-legend div { display: grid; gap: 6px; padding: 6px 0 10px; }
.lo-legend span { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font: 400 12.5px/1.3 var(--f-text); color: var(--ink-2); }
.lo-legend i { font: 600 12px/1.3 var(--f-disp); font-style: normal; color: var(--gt); display: inline-flex; gap: 6px; align-items: center; }
.lo-legend i svg { width: 13px; height: 13px; }
.lo-pop { position: absolute; z-index: 320; left: 50%; top: 44%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 12px 18px; background: rgba(8, 7, 11, .9); box-shadow: inset 0 0 0 1px var(--gt, var(--orange)), 0 18px 40px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap; }
.lo-pop i { font: 600 11px/1 var(--f-disp); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--gt, var(--orange)); display: inline-flex; gap: 6px; align-items: center; }
.lo-pop i svg { width: 13px; height: 13px; }
.lo-pop b { font: italic 700 22px/1 var(--f-head); text-transform: uppercase; color: var(--ink); }
.lo-pop span { font: 400 12.5px/1 var(--f-text); color: var(--ink-2); }
@keyframes lo-pop { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.92); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
  18% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (max-width: 860px) {
  .lo-build { grid-template-columns: 1fr; }
  .lo-dock .lo-build { display: none; }
  .lo-legend span { grid-template-columns: 96px 1fr; }
}


/* =====================================================================
   r9 · THE FIGHT · effects, sound-synced beats, live clock, gear in view
   ===================================================================== */
/* the effects canvas shakes with the stage: over the fighters' art, under their numbers and the HUD.
   The stage is always its own layer, so this order holds whether or not it is shaking. */
.g-battle .b-shake { z-index: 0; }
.g-battle .b-f { z-index: auto; }
.g-battle .b-art { z-index: 2; }
.b-fxc { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; pointer-events: none; }
.g-battle .b-stance, .g-battle .b-dn { z-index: 6; }

/* the round announces itself */
.b-intro { position: absolute; z-index: 6; left: 50%; top: 46%; display: grid; justify-items: center; gap: 6px; pointer-events: none;
  transform: translate(-50%, -50%); }
.b-intro i { font: 700 13px/1 var(--f-disp); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); padding-left: .3em; }
.b-intro b { font: italic 900 clamp(84px, 11vw, 150px)/.8 var(--f-head); color: #FFF6EC; letter-spacing: -.03em;
  text-shadow: 0 6px 0 #000, 0 0 50px rgba(252, 76, 1, .55); }
.b-intro span { font: 700 12px/1 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; color: #0B0A0E; background: var(--orange); padding: 6px 10px 6px 12px; }
@keyframes b-intro { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); filter: blur(6px); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(.96); filter: none; } 18% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } 100% { opacity: 0; transform: translate(-50%, -54%) scale(1.04); } }

/* the labels make way while an exchange plays, so the deltas never sit on them */
.g-battle.seq .b-lbl { visibility: hidden; }

/* gear: what each side carries, lit when it fires, dim when spent */
.b-m { position: relative; }
.b-gear { display: flex; gap: 4px; margin-top: 1px; }
.b-m.r .b-gear { justify-content: flex-end; }
.b-gear i { position: relative; width: 26px; height: 26px; overflow: hidden; background: rgba(255,255,255,.10);
  box-shadow: inset 0 -2px 0 var(--gt, rgba(255,255,255,.22)); transition: opacity .2s var(--ui-ease); }
.b-gear i img.pc { pointer-events: none; }
.b-gear i s { position: absolute; right: 1px; bottom: 2px; font: 600 9px/1 var(--f-mono); text-decoration: none; color: var(--ink); text-shadow: 0 0 3px #000, 0 0 3px #000; }
.b-gear i.spent { opacity: .32; }
.b-gear i.used { box-shadow: inset 0 -2px 0 var(--fb, var(--orange)); }
.b-gear i.hot { box-shadow: inset 0 0 0 1.5px var(--f), 0 0 16px var(--f); animation: b-gear-hot 1.1s ease-out 2; }
@keyframes b-gear-hot { 0% { transform: scale(1.35); background: rgba(255,255,255,.3); } 100% { transform: none; } }

/* equipment firing: called out under the meter of the side that fired it */
.b-m .b-fire { position: absolute; top: calc(100% + 10px); left: 0; right: auto; z-index: 1; width: max-content; max-width: min(340px, 44vw); padding: 8px 14px 8px 8px; gap: 10px; }
.b-m.r .b-fire { left: auto; right: 0; flex-direction: row-reverse; text-align: right; padding: 8px 8px 8px 14px; }
.b-m .b-fire-art { width: 40px; height: 40px; flex-basis: 40px; }

/* the move you pressed stays lit while it goes in */
.b-acts.sent .b-act { opacity: .38; }
.b-acts.sent .b-act.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--orange), 0 0 26px rgba(252, 76, 1, .35); animation: b-sent .5s var(--hit-ease); }
@keyframes b-sent { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: none; } }

@media (max-width: 860px) {
  .b-gear i { width: 20px; height: 20px; }
  .b-gear i s { font-size: 8px; }
  .b-m .b-fire { max-width: 62vw; padding: 6px 10px 6px 6px; }
  .b-m.r .b-fire { padding: 6px 6px 6px 10px; }
  .b-m .b-fire-art { width: 30px; height: 30px; flex-basis: 30px; }
  .b-m .b-fire b { font-size: 13px; }
  .b-m .b-fire i { font-size: 10.5px; }
  .b-intro b { font-size: 76px; }
}

/* loadout: what each worn piece adds, and the totals it makes */
.lo-ds-v { position: absolute; z-index: 1; right: 1px; top: 1px; padding: 2px 3px; font: 600 9.5px/1 var(--f-mono); text-decoration: none;
  color: var(--ink); background: rgba(8, 7, 11, .82); pointer-events: none; }
.lo-ds-v.zero { color: var(--dim); }
.lo-stats b i { margin-left: 1px; }

/* r9 · phone: near and far. On a narrow stage you stand close at the bottom left and they stand
   back at the top right, so both characters are big and the field runs between them. */
@container (max-width: 620px) {
  .sc.g.fit .g-battle .b-you { left: -8%; right: auto; top: auto; bottom: -3%; width: min(72cqw, 62cqh); }
  .sc.g.fit .g-battle .b-them { right: -7%; left: auto; bottom: auto; top: 19%; width: min(54cqw, 50cqh); }
  .g-battle .b-field { left: 3%; right: 3%; top: 40%; bottom: 33%; }
  .g-battle .b-mv.them { top: 26%; left: 4%; right: auto; text-align: left; }
  .g-battle .b-mv.you { top: 60%; right: 4%; left: auto; text-align: right; }
  .g-battle .b-vs { top: 47%; }
  .g-battle .b-stance.them { top: 52%; bottom: auto; right: 8%; left: auto; }
  .g-battle .b-stance.you { bottom: 6%; left: auto; right: 8%; }
  /* the numbers sit apart: theirs up in the open sky to their left, yours beside you */
  .g-battle .b-dn.them { top: 6%; left: 2%; }
  .g-battle .b-dn.you { top: 30%; left: 96%; }
  .g-battle .b-kotxt { top: 40%; }
}
@media (max-width: 860px) {
  /* the charge change floats over the pips, never into the round box */
  .b-m .b-cd { left: 50%; right: auto; top: -4px; animation-name: b-cd-m !important; }
  .b-m.r .b-cd { left: 50%; right: auto; }
}
@keyframes b-cd-m { 0% { opacity: 0; transform: translate(-50%, -60%); } 12% { opacity: 1; transform: translate(-50%, -100%); }
  80% { opacity: 1; transform: translate(-50%, -100%); } 100% { opacity: 0; transform: translate(-50%, -140%); } }
/* while an exchange plays, its call sits in the middle of the room the controls keep */
.g-battle.seq .b-ctl { align-content: center; }
/* a charge change carries the pip's own shape, so it never reads as health */
.b-cd::before { content: ''; align-self: center; width: 7px; height: 7px; margin-right: 1px; background: currentColor; transform: rotate(45deg); }
.b-cd.down::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }


/* =====================================================================
   r10 · five round types, a shield that reads as a shield, fair finishes
   ===================================================================== */
/* the question: which kind of round, and the word that decides it set apart */
.b-kind { display: inline-block; margin-right: 10px; padding: 3px 7px 4px; vertical-align: 3px; font: 600 10.5px/1 var(--f-disp); font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim); box-shadow: inset 0 0 0 1px var(--hair); }
.b-ask { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 2px 6px; margin: 0 1px; text-transform: uppercase; letter-spacing: .02em; }
.b-ask svg { width: 10px; height: 10px; fill: currentColor; }
.b-ask.hi { color: #0B0A0E; background: #DDE8F2; }
.b-ask.lo { color: #0B0A0E; background: var(--orange); }

/* count: numbers read as numbers */
.b-choices.num .b-choice { font: 600 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; }

/* the drop: one wide target, Space works too */
.b-l-row.solo { grid-template-columns: 1fr; }
.b-drop { width: 100%; display: grid; gap: 4px; justify-items: center; padding: 14px 12px; background: #1A120C; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--orange); transition: background .1s var(--ui-ease), transform .06s; }
.b-drop b { font: italic 800 30px/.9 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); }
.b-drop span { font: 500 12.5px/1 var(--f-text); color: var(--ink-2); }
.b-drop:not([disabled]):hover { background: #2A170B; }
.b-drop:not([disabled]):active { transform: scale(.985); background: var(--orange); }
.b-drop:not([disabled]):active b { color: #0B0A0E; }
.b-drop[disabled] { opacity: .45; box-shadow: inset 0 0 0 1px var(--hair); }

/* pattern: three pads, low to high, and the notes you have played */
.b-pat { display: grid; gap: 8px; width: 100%; }
.b-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b-pad { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; padding: 12px 14px; text-align: left;
  background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); transition: background .1s, box-shadow .1s, transform .06s; }
.b-pad b { font: 600 15px/1 var(--f-disp); }
.b-pad i { font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--dim); }
.b-pad-bar { width: 6px; background: var(--orange); align-self: end; }
.b-pad.p0 .b-pad-bar { height: 8px; } .b-pad.p1 .b-pad-bar { height: 15px; } .b-pad.p2 .b-pad-bar { height: 22px; }
.b-pad:not([disabled]):hover { background: #221C12; box-shadow: inset 0 0 0 1px var(--orange); }
.b-pad:not([disabled]):active { transform: translateY(2px); background: #2A170B; }
.b-pad[disabled] { opacity: .35; }
.b-pat-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 20px; }
.b-pat-slots { display: inline-flex; gap: 6px; }
.b-pat-slots i { width: 14px; height: 14px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.b-pat-slots i.cur { box-shadow: inset 0 0 0 1.5px var(--orange); animation: b-pulse .9s ease-in-out infinite; }
.b-pat-slots i.on { background: var(--ink); box-shadow: none; }
.b-pat-slots i.on.p0 { background: #B9B3AA; } .b-pat-slots i.on.p2 { background: var(--orange); }
.b-pat-clr { font: 500 12.5px/1 var(--f-text); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.b-pat-n { font: 500 12px/1 var(--f-text); color: var(--dim); }

/* the result: why, in one balanced line, and the tie-break when it decided */
.r-eye { text-wrap: balance; max-width: 520px; }
.r-close.tb { color: var(--ink-2); }
.r-close.tb b { font: 600 15px/1 var(--f-mono); color: var(--ink); }

@media (max-width: 860px) {
  .b-kind { display: none; }
  .b-drop { padding: 12px; }
  .b-drop b { font-size: 26px; }
  .b-pad { padding: 11px 10px; gap: 8px; }
  .b-pad b { font-size: 14px; }
  .b-choices.num .b-choice { font-size: 19px; }
}
.b-choices.c4 { grid-template-columns: repeat(4, 1fr); max-width: 560px; }

/* wardrobe: every piece says what it is worth, and yours say what wearing it would change */
.lo-try-i { position: relative; }
.lo-try-i .lo-vf { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 2px 3px 3px; font: 600 9.5px/1 var(--f-mono); text-decoration: none;
  text-align: center; color: var(--ink); background: linear-gradient(to top, rgba(8,7,11,.92), rgba(8,7,11,.55)); pointer-events: none; }
.lo-try-i:not(.mine) .lo-vf { color: var(--dim); }
.lo-dv { position: absolute; z-index: 1; top: 2px; left: 2px; padding: 2px 4px; font: 700 10px/1 var(--f-mono); font-style: normal; pointer-events: none;
  background: rgba(8,7,11,.85); color: var(--dim); display: inline-flex; gap: 3px; align-items: baseline; }
.lo-dv i { font-style: normal; font-weight: 600; color: var(--orange); }
.lo-dv.up { color: #8BE08B; } .lo-dv.down { color: #FF7A6E; } .lo-dv.on { color: #0B0A0E; background: var(--ink); }
.lo-ward-key { margin-right: auto; margin-left: 10px; font: 400 11px/1 var(--f-text) !important; }
.lo-ward-key .up { font-style: normal; font-family: var(--f-mono); color: #8BE08B; }
@media (max-width: 860px) { .lo-ward-key { display: none; } }
.b-kbd { font-style: normal; }
@media (hover: none) { .b-kbd { display: none; } }

/* =====================================================================
   r12 · the audit pass: the daily loop, honest labels, fixes
   ===================================================================== */
/* the game paints inside its own stacking context: never over the host's sheet, nav or bar */
.sc.g { isolation: isolate; }
.sc.g .sav { isolation: isolate; }
/* read aloud, never seen */
.sc-sr { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; }

/* TODAY · the next step and what you are keeping up. Small chips under your name. */
.g-today { position: absolute; z-index: 5; left: 24px; top: 82px; display: flex; flex-wrap: wrap; gap: 6px; max-width: min(720px, 60%); pointer-events: auto; }
.g-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px 9px; text-align: left; background: rgba(9, 9, 14, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); color: var(--ink); transition: background .14s var(--ui-ease), box-shadow .14s var(--ui-ease); }
.g-chip:hover { background: rgba(20, 19, 26, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.g-chip i { font: 600 10px/1 var(--f-disp); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.g-chip b { font: 600 13px/1.1 var(--f-disp); white-space: nowrap; }
.g-chip.nx { box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .55); }
.g-chip.nx i { color: var(--orange); }
.g-chip.good b { color: #9BD99B; }
.g-chip.due i { color: var(--orange); }
.g-world.bare .g-today, .g-world.bare .g-wait { display: none; }

/* your challenge, waiting for a taker */
.g-wait { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px; background: rgba(9, 9, 14, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(252, 76, 1, .4), 0 18px 50px rgba(0, 0, 0, .55); animation: g-panel .22s var(--ui-ease); white-space: nowrap; }
.g-wait p { margin: 0; display: grid; gap: 3px; }
.g-wait p b { font: 600 14px/1 var(--f-disp); }
.g-wait p span { font: 400 12.5px/1 var(--f-text); color: var(--ink-2); }
.g-wait em { font: 600 12.5px/1 var(--f-mono); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.g-wait .g-close { padding: 8px 6px; margin-left: auto; }

/* a warden you have beaten: its marker turns to a hollow seal in its land's light */
.w-ch.foe.sealed .w-foe { background: transparent; box-shadow: inset 0 0 0 1.5px var(--f), 0 0 8px var(--f); animation: none; }
/* the encounter card: what it is, honestly; whether it is sealed */
.p-bot { display: inline-block; padding: 3px 7px 4px; margin-right: 6px; font: 600 11px/1 var(--f-disp); letter-spacing: .04em; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.p-seal { font: 500 12.5px/1 var(--f-text); color: var(--dim); }
.p-seal.on { color: var(--f, var(--ink)); font-weight: 600; }
/* in the arena: a warden or the boss is named as such */
.b-botchip { display: inline-block; margin-right: 6px; padding: 2px 5px 3px; font: 600 10px/1 var(--f-disp); font-style: normal; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); vertical-align: 1px; }
.b-m-top { min-width: 0; }
.b-m-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-m-top span { white-space: nowrap; }

/* the connection: said, not hidden */
.b-net { margin: 0 0 4px; display: flex; gap: 10px; align-items: center; justify-content: center; font: 500 13px/1 var(--f-text); color: var(--orange); }
.b-net .b-wait-dot { width: 8px; height: 8px; }
/* leaving takes two taps; the second one says what it costs */
.g-quit.sure { color: #FF7A6E; }

/* "Hear it again" is a quiet control, never mistaken for a chosen answer */
.b-l-row .b-play.again { background: transparent; color: var(--ink-2); border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font-size: 13px; }
.b-l-row .b-play.again:hover:not([disabled]) { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
/* the five lanes keep their places on a phone: one row, short names */
.b-choice .sh { display: none; }
@media (max-width: 560px) {
  .b-choices.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .b-choices.c5 .b-choice .lg { display: none; }
  .b-choices.c5 .b-choice .sh { display: inline; }
}
@media (hover: none) { .b-pad i { display: none; } }

/* the result: who it was against, the day kept */
.r-vs { margin: 6px 0 0; font: 500 13px/1.2 var(--f-text); color: var(--ink-2); }
.r-vs b { color: var(--ink); font-weight: 600; }
.r-kept { margin: 8px 0 0; display: inline-flex; gap: 8px; align-items: center; font: 500 12.5px/1 var(--f-text); color: #9BD99B; }
.r-kept i { width: 7px; height: 7px; background: #9BD99B; transform: rotate(45deg); box-shadow: 0 0 8px rgba(155, 217, 155, .6); }
.r-log summary::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 2px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .14s var(--ui-ease); }
.r-log[open] summary::before { transform: rotate(45deg); }

/* the season: the gap to the next place, the column names, your ears */
.s-goal { margin: 10px 0 2px; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }
.s-goal b { font: 600 15px/1 var(--f-mono); color: var(--orange); }
.s-row.s-head { background: none; box-shadow: none; padding-top: 4px; padding-bottom: 4px; font: 600 10.5px/1 var(--f-disp); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); }
.s-row.s-head .s-v, .s-row.s-head .s-s { font: inherit; color: inherit; }
.s-sub i { font: 400 12px/1 var(--f-text); font-style: normal; color: var(--dim); margin-left: 6px; }
.s-ears { display: grid; gap: 1px; margin-top: 8px; }
.s-ear { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px 150px; gap: 14px; align-items: center; padding: 10px 14px; background: var(--panel); }
.s-ear-k { font: 600 13px/1 var(--f-disp); }
.s-ear b { font: 600 15px/1 var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.s-ear .s-bar { height: 6px; background: rgba(255, 255, 255, .06); }
.s-ear .s-bar i { display: block; height: 100%; background: var(--ink-2); }
.s-ear-d { font: 500 12px/1 var(--f-text); color: var(--dim); text-align: right; }
.s-ear-d.up { color: #9BD99B; } .s-ear-d.down { color: #FF7A6E; }

/* a short screen still reaches every move: the stage gives way and the controls scroll */
.sc.g.fit { min-height: 0; }
.sc.g.fit > .g-battle { min-height: 0; }
.sc.g.fit .b-ctl { min-height: 0; flex-shrink: 1; overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 640px) {
  .sc.g.fit .b-stage { min-height: 150px; }
  .b-act i { display: none; }
  .b-ctl { padding-top: 8px; gap: 6px; }
}
@media (max-height: 470px) { .sc.g.fit .b-stage { min-height: 110px; } }

/* the HUD on a phone: your line never wraps; at 320 the nav fits */
.g-id { min-width: 0; flex: 0 1 auto; }
.g-id > div { min-width: 0; }
.g-id span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-nav { flex: 0 0 auto; }
.s-row.s-head .s-av { visibility: hidden; }
@media (max-width: 860px) {
  .g-today { left: 12px; right: 12px; top: auto; bottom: 10px; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .g-today::-webkit-scrollbar { display: none; }
  .g-chip { flex: 0 0 auto; padding: 7px 10px 8px; }
  .g-chip b { font-size: 12.5px; }
  .g-wait { bottom: 70px; left: 12px; right: 12px; transform: none; }
  .s-ear { grid-template-columns: 96px minmax(0, 1fr) 40px; }
  .s-ear-d { display: none; }
}
@media (max-width: 360px) {
  .g-hud { flex-wrap: wrap; }
  .g-nav button { padding: 9px 10px; font-size: 12.5px; }
}

/* a phone: the opponent's name stays readable; the read rate is on their card */
@media (max-width: 560px) { .b-reads { display: none; } }
/* the result on a phone: the verdict sits high, the fighters stand big under it */
@container (max-width: 620px) {
  .sc.g.fit .g-result .b-f { width: min(52cqw, 58cqh); }
  .sc.g.fit .g-result .r-verdict { top: 36%; }
}
/* the two move plates stand either side of "vs", never into it (OVERCLOCK is long) */
@container (min-width: 621px) {
  .g-battle .b-mv.you { left: auto; right: calc(50% + 44px); text-align: right; }
  .g-battle .b-mv.them { right: auto; left: calc(50% + 44px); text-align: left; }
}
/* a phone: the charge change is told by the pips themselves; no number floats over the bar */
@media (max-width: 860px) { .b-m .b-cd { display: none; } }

/* =====================================================================
   r13 · the signal loop, the season screen, sound in battle
   ===================================================================== */
/* sound on/off, beside the help in battle (and visible when off) */
.b-tools { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.b-snd { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-width: 28px; padding: 0 6px; border-radius: 14px;
  background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.b-snd svg { width: 16px; height: 16px; }
.b-snd.on { color: var(--ink-2); }
.b-snd:not(.on) { color: #FFB59A; box-shadow: inset 0 0 0 1px rgba(255, 106, 61, .5); }
.b-snd span { font: 600 10.5px/1 var(--f-disp); letter-spacing: .1em; text-transform: uppercase; }
.g-snd span { display: none; }

/* the card, before the sound */
.b-cards { width: 100%; max-width: 980px; display: grid; gap: 12px; }
.b-c-them { margin: 4px 0 0; font: 400 13px/1.35 var(--f-text); color: var(--ink-2); }
.b-c-them b { color: var(--ink); font-weight: 600; }
.b-c-sig { display: inline-flex; gap: 3px; vertical-align: -1px; margin: 0 2px; }
.b-c-sig i, .b-cost i { width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); display: inline-block; }
.b-c-tell { color: var(--dim); }
.b-c-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; justify-self: stretch; }
/* r14 · the cards in four plain groups: Basics, Tricks, Counters (one row), then Your gear */
.b-c-row:not(.gear) { grid-template-columns: 3fr 2fr 2fr; gap: 16px; }
.b-c-grp { display: grid; gap: 6px; min-width: 0; align-content: start; }
.b-c-h { margin: 0; font: 400 11.5px/1.2 var(--f-text); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-c-h b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.b-c-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.b-c-cards.gear { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding: 0; border: 0; margin: 0; }
.b-card .b-c-line { font: 400 12px/1.3 var(--f-text); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.b-card.off .b-c-line { color: var(--dim); }
.b-card .b-c-short { display: none; font: 400 11px/1.2 var(--f-text); color: var(--ink-2); }
.b-card .b-cost-n { font: 500 11px/1 var(--f-text); font-style: normal; color: var(--dim); margin-left: 2px; }
.b-card.gear .b-c-line { grid-column: 2; }
.b-card.gear .b-cost { grid-column: 2; }
/* what you have to spend, and what they have */
.b-c-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.b-c-gain { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 12.5px/1.3 var(--f-text); color: var(--dim); }
.b-c-gain > b { font: 600 13px/1 var(--f-disp); color: var(--ink); }
.b-c-m { display: inline-flex; gap: 4px; }
.b-c-m i { width: 9px; height: 9px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.3px rgba(255, 106, 61, .55); }
.b-c-m i.on { background: var(--orange); box-shadow: none; }
.b-c-row.gear { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0; border: 0; margin: 0; }   /* the host also has a .gear class */
.b-card { position: relative; display: grid; gap: 6px; justify-items: start; align-content: start; text-align: left; padding: 11px 11px 10px; min-height: 64px;
  background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer;
  transition: background .12s var(--ui-ease), box-shadow .12s var(--ui-ease), transform .08s; }
.b-card b { font: 700 13px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; }
.b-card .b-cost { display: inline-flex; gap: 4px; align-items: center; font: 500 11.5px/1 var(--f-text); color: var(--dim); min-height: 9px; }
.b-card:hover:not([disabled]) { background: #1B1822; }
.b-card:active:not([disabled]) { transform: translateY(1px); }
.b-card.on { box-shadow: inset 0 0 0 2px var(--orange); background: #1F1410; }
.b-card.off, .b-card[disabled] { opacity: .38; cursor: default; }
.b-card.c-rush b, .b-card.c-decoy b, .b-card.c-mask b, .b-card.c-ghost b { color: #FF8A5F; }
.b-card.c-clear b, .b-card.c-steady b, .b-card.c-scan b, .b-card.c-brace b, .b-card.c-guard b { color: #9EC2DE; }
.b-card.c-clear.on, .b-card.c-steady.on, .b-card.c-scan.on, .b-card.c-brace.on, .b-card.c-guard.on { box-shadow: inset 0 0 0 2px #9EC2DE; background: #12171C; }
.b-card.c-focus b, .b-card.c-boost b, .b-card.c-surge b { color: #E6C56E; }
.b-card.c-focus.on { box-shadow: inset 0 0 0 2px #E6C56E; background: #1C1810; }
.b-card.gear { grid-template-columns: 34px 1fr; align-items: center; column-gap: 10px; row-gap: 4px; }
.b-card.gear .b-card-art { grid-row: span 2; width: 34px; height: 34px; }
.b-card.gear .b-card-art img.pc { position: absolute; max-width: none; height: auto; display: block; }
.b-card.gear .b-card-art img:not(.pc) { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-c-say { margin: 0; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); min-height: 20px; }
.b-c-say b { color: var(--ink); font-weight: 600; }
.b-c-say em { font-style: normal; color: #9EC2DE; }
.b-c-go { width: 100%; }

/* r16 · SEND & CATCH: what you send into their sound, and what you know before you do */
.sd-panel { gap: 10px; }
.sd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; align-items: start; }
.sd-side { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sd-side.them { justify-items: end; text-align: right; }
.sd-lbl { margin: 0; font: 700 10.5px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.sd-count { margin: 0; display: flex; align-items: center; gap: 10px; }
.sd-side.them .sd-count { flex-direction: row-reverse; }
.sd-count b { font: 700 22px/1 var(--f-mono); color: var(--ink); }
.sd-pips { display: inline-flex; gap: 6px; }
.sd-pips i { width: 11px; height: 11px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, .28); }
.sd-pips i.on { background: var(--ink); box-shadow: 0 0 10px rgba(255, 255, 255, .18); }
.sd-side.them .sd-pips i.on { background: #FF8A5F; box-shadow: 0 0 10px rgba(255, 106, 61, .3); }
.sd-gear { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-side.them .sd-gear { justify-content: flex-end; }
.sd-g { display: inline-grid; grid-template-columns: 22px auto auto; align-items: center; column-gap: 6px; padding: 3px 8px 3px 3px; font-style: normal;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.sd-g b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sd-g em { font: 400 11.5px/1 var(--f-text); font-style: normal; color: var(--dim); }
.sd-g s { text-decoration: none; font: 600 10.5px/1 var(--f-mono); color: var(--ink-2); grid-column: 3; display: none; }
.sd-g.spent { opacity: .4; }
.sd-g-art { position: relative; overflow: hidden; width: 22px; height: 22px; display: block; }
.sd-g-art img.pc { position: absolute; max-width: none; height: auto; display: block; }
.sd-g-art img:not(.pc) { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-g.g-surge b, .sd-g.g-mask b, .sd-g.g-ghost b { color: #FF8A5F; }
.sd-g.g-scan b, .sd-g.g-echo b, .sd-g.g-brace b { color: #9EC2DE; }
.sd-g.g-amp b { color: #E6C56E; }
.sd-tell { margin: 2px 0 0; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); max-width: 420px; }
.sd-tell i { font: 600 10px/1 var(--f-disp); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-right: 8px; }
/* what they have sent so far */
.sd-hist { display: grid; gap: 6px; }
.sd-hist ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sd-hist ol::-webkit-scrollbar { display: none; }
.sd-hist li { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: baseline; padding: 7px 10px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.sd-hist .h-n { font: 600 10px/1 var(--f-mono); color: var(--dim); }
.sd-hist li b { justify-self: start; font: 700 11px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sd-hist li.h-rush b { color: #FF8A5F; }
.sd-hist li.h-fake b { color: #9EC2DE; }
.sd-hist li em { grid-column: 1 / -1; font: 400 11.5px/1.2 var(--f-text); font-style: normal; color: var(--ink-2); }
.sd-hist .h-t { grid-column: 1 / -1; font: 400 11px/1.2 var(--f-text); color: var(--dim); }
.sd-new { margin: 0; padding: 10px 14px; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); background: var(--panel-2); box-shadow: inset 2px 0 0 var(--orange); }
.sd-new b { color: var(--ink); font-weight: 600; }
/* the three sends */
.sd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sd-btn { display: grid; gap: 6px; justify-items: start; align-content: start; text-align: left; padding: 16px 16px 14px; min-height: 104px;
  background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; position: relative;
  transition: background .12s var(--ui-ease), box-shadow .12s var(--ui-ease), transform .08s; }
.sd-btn b { font: 700 20px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; }
.sd-btn span { font: 400 13px/1.3 var(--f-text); color: var(--ink-2); }
.sd-btn i { margin-top: auto; font: 500 11.5px/1 var(--f-text); font-style: normal; color: var(--dim); }
.sd-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c, var(--ink)); opacity: .55; transition: opacity .12s; }
.sd-btn.sd-save { --c: #E9E4DA; }
.sd-btn.sd-rush { --c: #FF5A3C; }
.sd-btn.sd-fake { --c: #9EC2DE; }
.sd-btn.sd-rush b { color: #FF8A5F; }
.sd-btn.sd-fake b { color: #9EC2DE; }
.sd-btn:hover:not([disabled]) { background: #1B1822; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.sd-btn:hover:not([disabled])::after { opacity: 1; }
.sd-btn:active:not([disabled]) { transform: translateY(1px); }
.sd-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.sd-btn.off, .sd-btn[disabled] { opacity: .38; cursor: default; }
.sd-foot { margin: 0; font: 400 12px/1.3 var(--f-text); color: var(--dim); text-align: center; }
.b-stamp.caught { color: #9EC2DE; text-shadow: 0 0 24px rgba(158, 194, 222, .5); }
.b-rules-gear { margin: 10px 0 0; font: 400 12.5px/1.45 var(--f-text); color: var(--dim); }
.b-rules-gear b { color: var(--ink-2); font-weight: 600; }
.b-chg.sends i.on { background: var(--ink); }
@media (max-width: 560px) {
  .sd-top { gap: 8px 12px; }
  .sd-count b { font-size: 18px; }
  .sd-pips { gap: 5px; }
  .sd-pips i { width: 9px; height: 9px; }
  .sd-g { grid-template-columns: auto auto; padding: 5px 7px; column-gap: 5px; }
  .sd-g-art, .sd-g em { display: none; }
  .sd-g b { font-size: 9.5px; letter-spacing: .1em; }
  .sd-g s { display: block; grid-column: 2; font-size: 10px; }
  .sd-tell { font-size: 12px; }
  .sd-hist li { padding: 6px 8px; }
  .sd-new { font-size: 12.5px; padding: 8px 10px; }
  .sd-row { gap: 6px; }
  .sd-btn { padding: 12px 10px 10px; min-height: 84px; gap: 5px; }
  .sd-btn b { font-size: 15px; letter-spacing: .1em; }
  .sd-btn span { font-size: 11.5px; }
  .sd-btn i { font-size: 10.5px; }
}

/* r16 · Attack or Block, while you listen */
.sd-stance { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 10px; }
.sd-st { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 10px 14px; background: var(--panel-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; transition: background .12s var(--ui-ease), box-shadow .12s var(--ui-ease); }
.sd-st b { font: 700 13px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; }
.sd-st span { font: 400 12px/1.3 var(--f-text); color: var(--dim); }
.sd-st:hover:not([disabled]):not(.on) { background: #1B1822; }
.sd-st.on.st-attack { box-shadow: inset 0 0 0 2px var(--orange); background: #1F1410; }
.sd-st.on.st-block { box-shadow: inset 0 0 0 2px #9EC2DE; background: #12171C; }
.sd-st.on.st-block b { color: #9EC2DE; }
.sd-st.on span { color: var(--ink-2); }
.sd-st[disabled] { opacity: .5; cursor: default; }
.sd-st-k { position: absolute; right: 8px; top: 8px; font: 600 10px/1 var(--f-mono); font-style: normal; color: var(--dim); padding: 2px 4px; box-shadow: inset 0 0 0 1px var(--hair); }
@media (hover: none) { .sd-st-k { display: none; } }
@media (max-width: 560px) { .sd-st { padding: 8px 10px; } .sd-st b { font-size: 12px; } .sd-st span { font-size: 11px; } }

/* what their card did to your signal */
.b-hitby { width: 100%; max-width: 820px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 14px;
  background: var(--panel-2); animation: b-xl .3s var(--ui-ease) both; }
.b-hitby b { font: 700 12px/1.2 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.b-hitby span { font: 400 13.5px/1.4 var(--f-text); color: var(--ink-2); }
.b-hitby span b { font: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; }
.b-hitby.rush > b, .b-hitby.decoy > b, .b-hitby.mask > b, .b-hitby.bad > b { color: #FF8A5F; }
.b-hitby.read > b { color: #9EC2DE; }
.b-hitby.read span b { color: #9EC2DE; }
.b-fast.rush i { background: #FF5A3C; }
.b-fast.rush span b { color: #FF8A5F; }
.b-listen.rushed { box-shadow: inset 0 0 0 1px rgba(255, 90, 60, .35); }

/* your read, stamped as the reveal lands */
.b-stamp { font: 700 clamp(22px, 3.4vw, 34px)/1 var(--f-disp); letter-spacing: .2em; text-transform: uppercase; opacity: 0; }
.b-stamp.r-perfect { color: var(--orange); text-shadow: 0 0 24px rgba(255, 106, 61, .45); }
.b-stamp.r-hit { color: var(--ink); }
.b-stamp.r-miss, .b-stamp.r-wide { color: #FF6A5F; }
@keyframes b-stamp { 0% { opacity: 0; transform: scale(1.25); letter-spacing: .4em; } 14% { opacity: 1; transform: none; letter-spacing: .2em; } 80% { opacity: 1; } 100% { opacity: 0; } }
.b-stance.s-missed b, .b-stance.s-wide b { color: #FF6A5F; }

/* the warden's habit, the result's why */
.p-tell { margin: 0; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.p-tell i { font: 600 10.5px/1 var(--f-disp); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-right: 8px; }
.r-why { margin: 8px 0 0; font: 400 14px/1.45 var(--f-text); color: var(--ink-2); max-width: 520px; text-align: center; }
.r-r .mv i { color: var(--dim); font-style: normal; }

/* season: you, what you are playing for, how it scores, every match */
.g-season .s-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.s-ends { font: 500 13px/1 var(--f-text); color: var(--dim); }
.s-me { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin: 18px 0 8px; padding: 14px 18px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--f, #888) 14%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.s-me-av { width: 120px; height: 120px; align-self: end; }
.s-me-av > * { width: 100%; height: 100%; }
.s-me-in { padding-bottom: 14px; display: grid; gap: 6px; }
.s-me-k { margin: 0; font: 600 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.s-me-rank { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.s-me-rank b { font: 700 40px/1 var(--f-mono); color: var(--orange); }
.s-me-rank span { font: 500 13px/1 var(--f-text); color: var(--dim); }
.s-me-line { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }
.s-me-line b { font: 700 15px/1 var(--f-mono); color: var(--ink); }
.s-me-line i { font-style: normal; font-weight: 600; }
.s-me-next { margin: 0; font: 400 13px/1.45 var(--f-text); color: var(--dim); max-width: 560px; }
.s-rw { margin: 14px 0 6px; }
.s-rw-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.s-rw-t { display: grid; gap: 4px; align-content: start; padding: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.s-rw-t.good { box-shadow: inset 0 0 0 1px rgba(255, 106, 61, .55); }
.s-rw-art { position: relative; display: grid; place-items: center; height: 72px; margin-bottom: 4px; color: var(--dim); }
.s-rw-art svg { width: 64px; height: 64px; }
.s-rw-art span { position: absolute; font: 600 9.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.s-rw-art img { max-height: 72px; }
.s-rw-t.real .s-rw-art { position: relative; overflow: hidden; width: 72px; height: 72px; margin: 0 auto 4px; }
.s-rw-t.real .s-rw-art img.pc { position: absolute; max-width: none; height: auto; max-height: none; }
.s-rw-t b { font: 700 13px/1.1 var(--f-disp); letter-spacing: .1em; text-transform: uppercase; }
.s-rw-t i { font: 400 12px/1.3 var(--f-text); font-style: normal; color: var(--dim); }
.s-rw-rule { font: 400 12.5px/1.35 var(--f-text); color: var(--ink-2); }
.s-rw-st { font: 600 11.5px/1.3 var(--f-text); font-style: normal; color: var(--dim); margin-top: 2px; }
.s-rw-t.good .s-rw-st { color: var(--orange); }
.s-tabs { margin-top: 18px; }
.s-row .s-n em { font: 600 10px/1 var(--f-disp); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-left: 6px; }
.s-how { margin: 18px 0 4px; box-shadow: inset 0 0 0 1px var(--hair); padding: 0 16px; }
.s-how summary { cursor: pointer; padding: 13px 0; font: 600 12px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.s-how ul { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 7px; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); }
.s-how li b { color: var(--ink); font-weight: 600; }
.s-kind { font: 600 9.5px/1 var(--f-disp); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  margin-left: 8px; padding: 3px 5px; box-shadow: inset 0 0 0 1px var(--hair); }
.s-kind.k-ranked { color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255, 106, 61, .45); }
.s-hr .s-s { color: var(--dim); }
.s-hr .s-s.pts { color: var(--ink); font-family: var(--f-mono); }

@media (max-width: 860px) {
  .s-rw-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 60%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .s-rw-t { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .b-c-row { gap: 4px; }
  /* phone: basics on one row, tricks and counters side by side on the next, gear under; two words a card */
  .b-c-row:not(.gear) { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  .b-c-row .g-basics { grid-column: 1 / -1; }
  .b-c-grp, .b-c-cards { gap: 4px; }
  .b-c-h { font-size: 10.5px; }
  .b-c-h b { font-size: 9.5px; }
  .b-c-row .g-tricks .b-c-h, .b-c-row .g-counters .b-c-h { font-size: 0; }
  .b-c-row .g-tricks .b-c-h b, .b-c-row .g-counters .b-c-h b { font-size: 9.5px; }
  .b-c-cards.gear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-card { padding: 8px 7px 7px; min-height: 0; gap: 4px; }
  .b-card .b-c-line { display: none; }
  .b-card .b-c-short { display: block; }
  .b-card.gear { grid-template-columns: 1fr; padding: 8px 7px 7px; }
  .b-card.gear .b-card-art { display: none; }
  .b-card.gear .b-c-short, .b-card.gear .b-cost { grid-column: 1; }
  .b-card .b-cost-n { display: none; }
  .b-c-how { display: none; }
  .b-c-top { gap: 2px 12px; }
  .b-card { padding: 10px 6px 9px; min-height: 52px; gap: 6px; }
  .b-card b { font-size: 11px; letter-spacing: .06em; }
  .b-card .b-cost { font-size: 10.5px; }
  .b-c-them { font-size: 12.5px; }
  .b-c-say { font-size: 12.5px; }
  .b-hitby { padding: 8px 10px; }
  .s-me { grid-template-columns: 84px 1fr; gap: 12px; padding: 10px 12px 0; }
  .s-me-av { width: 84px; height: 84px; }
  .s-me-rank b { font-size: 32px; }
  .b-snd span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .b-stamp { animation: none !important; opacity: 1; } }
/* the season column never grows past the screen: the reward strip scrolls inside it */
.g-season { grid-template-columns: minmax(0, 1fr); }
.g-season > * { min-width: 0; }

/* =====================================================================
   r14 · THE WALK-UP. A warden or boss arrives the way their land brings them, then says one thing.
   Every animation here is given its start by the renderer (relative to the walk-up's clock), so a
   re-render mid-arrival never restarts it.
   ===================================================================== */
.ent-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 34% 62% at 78% 62%, rgba(4, 4, 9, .05), rgba(4, 4, 9, .55) 55%, rgba(4, 4, 9, .82)); }
.ent-dim.boss { background: radial-gradient(ellipse 34% 62% at 78% 62%, rgba(60, 6, 6, .1), rgba(20, 3, 6, .6) 55%, rgba(8, 2, 4, .86)); }
@keyframes ent-dim { 0% { opacity: 0; } 7% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

.ent-name { position: absolute; z-index: 7; right: 31%; top: 27%; display: grid; justify-items: end; gap: 6px; pointer-events: none; text-align: right; }
.ent-name i { font: 600 11px/1 var(--f-disp); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.ent-name b { font: italic 800 clamp(34px, 5.4vw, 72px)/.86 var(--f-head); text-transform: uppercase; color: #FFF6EC;
  text-shadow: 0 0 28px color-mix(in srgb, var(--f) 55%, transparent), 0 6px 30px rgba(0, 0, 0, .7); }
.ent-name.boss i { color: #FF8A5F; }
@keyframes ent-name { 0% { opacity: 0; transform: translateX(14%) skewX(-8deg); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-4%); } }

.g-battle.ent .b-them { z-index: 4; }
.b-f.ent > i, .b-f.ent > span { position: absolute; pointer-events: none; }
@keyframes ent-fade { 0% { opacity: 0; } 100% { opacity: 1; } }

/* SORA · drops out of the sky and lands */
@keyframes ent-sora {
  0% { transform: translate(-8%, -135%) rotate(-5deg) scale(.92); opacity: 0; animation-timing-function: cubic-bezier(.25,.6,.35,1); }
  6% { opacity: 1; }
  52% { transform: translate(-2%, -34%) rotate(-2deg) scale(.97); animation-timing-function: cubic-bezier(.55,0,.9,.5); }
  64% { transform: translateY(4%) scale(1.04, .95); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  76% { transform: translateY(-2%) scale(.99, 1.01); } 88% { transform: translateY(.6%); } 100% { transform: none; opacity: 1; } }
.ent-wind { left: 22%; right: 22%; top: -70%; height: 110%; z-index: 1;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(220, 228, 255, .16) 9px 10px, transparent 10px 23px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent); }
@keyframes ent-wind { 0% { opacity: 0; transform: translateY(-30%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(40%); } }
.ent-ring { left: 14%; right: 14%; bottom: 7%; height: 11%; border-radius: 50%; z-index: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--f) 70%, #fff), 0 0 22px color-mix(in srgb, var(--f) 60%, transparent); }
@keyframes ent-ring { 0% { opacity: 1; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.7); } }
.ent-dust { left: -10%; right: -10%; bottom: 2%; height: 16%; z-index: 3; border-radius: 50%; filter: blur(10px);
  background: radial-gradient(closest-side, rgba(170, 176, 196, .45), transparent); }
@keyframes ent-dust { 0% { opacity: 0; transform: scaleX(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.25) translateY(-14%); } }

/* UMI · rises out of the water */
@keyframes ent-umi {
  0% { transform: translateY(48%); filter: brightness(.45) saturate(.5) blur(1.2px); opacity: 0; } 10% { opacity: 1; }
  72% { transform: translateY(2%); filter: brightness(.85) saturate(.85) blur(0); } 100% { transform: none; filter: none; opacity: 1; } }
.ent-water { left: -24%; right: -24%; bottom: -6%; height: 44%; z-index: 3;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  background: linear-gradient(to bottom, rgba(120, 200, 255, .5) 0, rgba(18, 52, 92, .92) 3%, rgba(8, 24, 44, .97) 40%, rgba(6, 12, 24, 1)); }
.ent-water::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 6px;
  background: repeating-radial-gradient(ellipse 18px 3px at 50% 100%, rgba(170, 225, 255, .75) 0 1px, transparent 2px 7px); }
@keyframes ent-water { 0% { opacity: 0; transform: none; } 6% { opacity: 1; } 62% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(70%); } }
.ent-ripple { left: 12%; right: 12%; bottom: 33%; height: 9%; border-radius: 50%; z-index: 4;
  box-shadow: 0 0 0 1.5px rgba(170, 225, 255, .7); }
@keyframes ent-ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.ent-drops { left: 30%; right: 30%; top: 30%; height: 40%; z-index: 4;
  background: radial-gradient(circle at 20% 10%, rgba(180, 230, 255, .9) 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 0, rgba(180, 230, 255, .9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 20%, rgba(180, 230, 255, .8) 0 1.2px, transparent 2px), radial-gradient(circle at 85% 30%, rgba(180, 230, 255, .8) 0 1.2px, transparent 2px); }
@keyframes ent-drops { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(70%); } }

/* CHI · gets dressed, piece by piece, under a pink light */
@keyframes ent-chi { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ent-dress { 0% { opacity: 0; transform: translateY(-12%) scale(1.06); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.ent-spot { left: 4%; right: 4%; top: -40%; bottom: 0; z-index: 1;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--f) 38%, transparent), color-mix(in srgb, var(--f) 8%, transparent) 80%, transparent); }
@keyframes ent-spot { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; } }
.ent-flash { inset: 0; z-index: 3; background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(255, 220, 240, .5), transparent 70%); mix-blend-mode: screen; }
@keyframes ent-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* MECHA · player two loads in */
@keyframes ent-mecha {
  0% { clip-path: inset(100% 0 0 0); filter: drop-shadow(-5px 0 rgba(255, 40, 90, .75)) drop-shadow(5px 0 rgba(0, 220, 255, .75)); }
  70% { clip-path: inset(0 0 0 0); filter: drop-shadow(-3px 0 rgba(255, 40, 90, .6)) drop-shadow(3px 0 rgba(0, 220, 255, .6)); }
  78% { transform: translateX(-1.5%); } 84% { transform: translateX(1%); }
  100% { clip-path: inset(0 0 0 0); filter: none; transform: none; } }
.ent-hud { left: 14%; right: 14%; top: 28%; z-index: 4; display: grid; justify-items: center; gap: 10px; padding: 14px 10px;
  font: 600 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #E9C8A8;
  box-shadow: inset 0 0 0 1px rgba(210, 162, 127, .5); background: rgba(10, 8, 6, .55); }
.ent-hud b { font: 700 30px/1 var(--f-mono); letter-spacing: .06em; color: #FFE6CC; }
.ent-hud em { font-style: normal; }
.ent-bar { position: relative; width: 70%; height: 6px; box-shadow: inset 0 0 0 1px rgba(210, 162, 127, .6); }
.ent-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #D2A27F; }
@keyframes ent-bar { 0% { width: 0; } 100% { width: 100%; } }
.ent-hud strong { font: 700 14px/1 var(--f-mono); letter-spacing: .3em; color: #FFE6CC; }
@keyframes ent-ready { 0%, 19% { opacity: 0; } 20%, 49% { opacity: 1; } 50%, 61% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes ent-load { 0%, 49% { opacity: 1; } 50%, 59% { opacity: .35; } 60%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ent-hud { 0% { opacity: 0; transform: scaleY(.1); } 6% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scaleX(1.06) scaleY(.08); } }
.ent-hud em { grid-area: 2 / 1; } .ent-hud strong { grid-area: 2 / 1; opacity: 0; }
.ent-scan { left: 0; right: 0; top: 0; height: 3px; z-index: 5; background: #FFE6CC; box-shadow: 0 0 14px 4px rgba(255, 210, 170, .6); }
@keyframes ent-scan { 0% { opacity: 1; top: 100%; } 70% { opacity: 1; top: 0; } 100% { opacity: 0; top: 0; } }

/* NOMAD · walks out of the dark */
@keyframes ent-nomad {
  0% { transform: translateY(7%) scale(.84); filter: brightness(0); opacity: 0; } 8% { opacity: 1; }
  22% { transform: translateY(5.5%) scale(.87); filter: brightness(.05); } 34% { transform: translateY(6.4%) scale(.89); }
  48% { transform: translateY(3.4%) scale(.92); filter: brightness(.3); } 60% { transform: translateY(4.2%) scale(.94); }
  76% { transform: translateY(1.2%) scale(.98); filter: brightness(.75); } 100% { transform: none; filter: none; opacity: 1; } }
.ent-fog { left: -40%; right: -40%; bottom: -4%; height: 46%; z-index: 3; filter: blur(14px);
  background: radial-gradient(ellipse 50% 60% at 40% 60%, rgba(120, 118, 134, .5), transparent 70%), radial-gradient(ellipse 40% 50% at 70% 70%, rgba(90, 88, 104, .5), transparent 70%); }
@keyframes ent-fog { 0% { opacity: 1; transform: translateX(0); } 60% { opacity: .8; } 100% { opacity: 0; transform: translateX(-14%); } }
.ent-lamp { left: 6%; top: 52%; width: 26%; aspect-ratio: 1; z-index: 3; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .55), rgba(255, 150, 70, .12) 50%, transparent); }
@keyframes ent-lamp { 0% { opacity: 0; transform: translate(-12%, 6%); } 20% { opacity: 1; } 40% { transform: translate(6%, 2%); }
  60% { transform: translate(-4%, 4%); } 80% { opacity: .8; transform: translate(4%, 2%); } 100% { opacity: 0; transform: none; } }

/* the boss arrives harder */
@keyframes ent-quake { 0% { transform: none; } 10% { transform: translate(-1.2%, .8%); } 22% { transform: translate(1%, -.6%); } 36% { transform: translate(-.7%, .5%); }
  52% { transform: translate(.5%, -.3%); } 70% { transform: translate(-.2%, .2%); } 100% { transform: none; } }
.ent-bflash { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 76% 55%, rgba(255, 70, 50, .42), rgba(120, 0, 0, .25) 60%, transparent); mix-blend-mode: screen; }
@keyframes ent-bflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.ent-warn { position: absolute; left: 0; right: 0; top: 72%; z-index: 7; pointer-events: none; display: grid; place-items: center; height: 40px;
  border-block: 1px solid rgba(255, 90, 60, .55); background: linear-gradient(90deg, transparent, rgba(60, 4, 4, .7) 20%, rgba(60, 4, 4, .7) 80%, transparent); }
.ent-warn span { font: 700 12px/1 var(--f-disp); letter-spacing: .42em; text-transform: uppercase; color: #FF8A5F; padding-left: .42em; }
@keyframes ent-warn { 0% { opacity: 0; transform: scaleY(0); } 8% { opacity: 1; transform: none; } 20% { opacity: .55; } 30% { opacity: 1; } 42% { opacity: .55; } 54% { opacity: 1; }
  84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleY(0); } }
.b-f.ent-boss .b-art { filter: drop-shadow(0 0 24px rgba(255, 59, 48, .25)); }

/* what they say, where the controls will be */
.ent-say { width: 100%; max-width: 820px; display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; text-align: center; }
.ent-q { margin: 0; font: italic 600 clamp(20px, 2.6vw, 30px)/1.25 var(--f-head); color: #FFF6EC; text-wrap: balance; }
.ent-q span { display: inline-block; }
@keyframes ent-w { 0% { opacity: 0; transform: translateY(.25em); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: none; } }
.ent-who { margin: 0; font: 600 11px/1 var(--f-disp); letter-spacing: .18em; text-transform: uppercase; color: var(--f); }
@keyframes ent-who { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.ent-skip { margin-top: 6px; font: 500 12.5px/1 var(--f-text); color: var(--dim); text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px; }
.ent-skip:hover { color: var(--ink); }
@media (max-width: 560px) { .ent-name { right: auto; left: 5%; top: 30%; justify-items: start; text-align: left; } .ent-q { font-size: 19px; }
  .ent-hud { left: 4%; right: 4%; top: 20%; } .ent-warn { top: 43%; } }
@media (prefers-reduced-motion: reduce) { .ent-wind, .ent-ring, .ent-dust, .ent-ripple, .ent-drops, .ent-scan, .ent-lamp, .ent-warn, .ent-bflash { display: none; } }

/* ======================================================================
   CREATE YOUR FIGHTER (db/016): three options, pick one
   ====================================================================== */
.cf { max-width: 1120px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) 24px 40px; display: grid; gap: 22px; }
.cf-head { display: grid; gap: 10px; justify-items: start; }
.cf-kick { margin: 0; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cf-opt { position: relative; display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; overflow: hidden;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .16s var(--ui-ease), transform .16s var(--ui-ease), background .16s var(--ui-ease); }
.cf-opt:hover { background: #1A1820; }
.cf-opt.on { transform: translateY(-2px); background: #1A1820; }
.cf-opt::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .16s var(--ui-ease); }
.cf-opt.on::after { box-shadow: inset 0 0 0 2px var(--fu); }
.cf-art { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4;
  background: radial-gradient(70% 55% at 50% 92%, color-mix(in srgb, var(--f) 34%, transparent), transparent 72%), linear-gradient(to bottom, #0B0A0F, #121018); }
.cf-art .sav { width: 100%; margin-top: -3%; }
.cf-in { display: grid; gap: 12px; align-content: start; padding: 14px 16px 18px; }
.cf-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cf-who b { font: italic 700 26px/0.9 var(--f-head); text-transform: uppercase; color: var(--fu); }
.cf-who i { font: 500 12px/1 var(--f-text); font-style: normal; color: var(--ink-2); }
.cf-gear { display: grid; gap: 7px; }
.cf-gear span { display: grid; gap: 2px; padding-left: 10px; box-shadow: inset 2px 0 0 var(--gt); }
.cf-gear em { font: 600 13px/1.2 var(--f-disp); font-style: normal; color: var(--ink); }
.cf-gear i { font: 400 12px/1.3 var(--f-text); font-style: normal; color: var(--ink-2); }
.cf-more { font: 500 11.5px/1 var(--f-mono); color: var(--dim); }
.cf-tick { position: absolute; z-index: 3; top: 12px; right: 12px; width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); background: rgba(0,0,0,.35); }
.cf-opt.on .cf-tick { background: var(--fu); box-shadow: none; }
.cf-opt.on .cf-tick::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.cf-dock { position: sticky; bottom: calc(var(--nav, 0px) + 12px); z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 12px 12px 18px; background: rgba(10, 9, 13, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--hair); }
.cf-dock p { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }
.cf-dock .btn { flex: 0 0 auto; }
.lo-who b .lo-mark { margin-left: 10px; font: 500 11px/1 var(--f-mono); font-style: normal; letter-spacing: .06em; color: var(--dim); vertical-align: middle; }
.lo-who b .lo-mark.sf { text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 760px) {
  .cf { padding: 24px 16px 28px; gap: 18px; }
  .cf-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .cf-row::-webkit-scrollbar { display: none; }
  .cf-opt { scroll-snap-align: center; }
  .cf-dock { bottom: calc(var(--nav, 0px) + 8px); flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; margin: 0 -4px; }
  .cf-dock .btn { width: 100%; }
}

/* ======================================================================
   XP and the pack meter (db/017)
   ====================================================================== */
.r-xp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n bar k" "why why why"; align-items: center; gap: 8px 16px;
  padding: 14px 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.r-xp.none { grid-template-columns: auto 1fr; grid-template-areas: "n k"; }
.r-xp.none span { font: 400 13px/1.3 var(--f-text); color: var(--ink-2); }
.r-xp-n { grid-area: n; font: 700 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.r-xp-bar { grid-area: bar; position: relative; height: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.r-xp-bar i { position: absolute; inset: 0 auto 0 0; width: var(--b); background: var(--orange); animation: r-xp-fill 1100ms cubic-bezier(.2,.8,.2,1) both; }
.r-xp.got .r-xp-bar i { animation-name: r-xp-got; }
@keyframes r-xp-fill { from { width: var(--a); } to { width: var(--b); } }
@keyframes r-xp-got { 0% { width: 70%; } 45% { width: 100%; background: #fff; } 55% { width: 0; } 100% { width: var(--b); } }
.r-xp-k { grid-area: k; font: 500 12.5px/1 var(--f-text); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-xp-k b { color: var(--ink); font-family: var(--f-mono); }
.r-xp-k em { font-style: normal; font-weight: 600; color: var(--orange); }
.r-xp-why { grid-area: why; font: 400 12px/1.3 var(--f-text); color: var(--dim); }
.r-xp-why b { color: var(--ink-2); font-family: var(--f-mono); font-weight: 600; }
.r-xp-why em { font-style: normal; }
.g-meter { display: block; width: 72px; height: 3px; margin-top: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.g-meter i { display: block; height: 100%; background: var(--ink-2); }
.g-meter.ready i { background: var(--orange); }
@media (max-width: 760px) {
  .r-xp { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n k" "bar bar" "why why"; padding: 12px 14px; }
  .r-xp-n { font-size: 18px; }
  .r-xp-k { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .r-xp-bar i { animation: none; } }

/* ======================================================================
   r20 · gear in plain words, mastery finishes, Signal Level, the ladder,
   the pack reveal and the crate in the world (db/018, db/019)
   ====================================================================== */

/* ---------- finishes: the frame a piece wears everywhere it shows ----------
   Bronze, Silver, Gold, Diamond, Holographic. Gold and up catches the light. */
.fin { --fin: transparent; }
.fin-2 { --fin: #B9824F; } .fin-3 { --fin: #CDD3DB; } .fin-4 { --fin: #E7BE5A; } .fin-5 { --fin: #A9ECFF; } .fin-6 { --fin: #D9A8FF; }
.fin::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 2px var(--fin); }
.fin-2::after, .fin-3::after { box-shadow: inset 0 0 0 1.5px var(--fin); }
.fin-4::after { box-shadow: inset 0 0 0 2px var(--fin), inset 0 0 14px color-mix(in srgb, var(--fin) 35%, transparent); }
.fin-5::after { box-shadow: inset 0 0 0 2px var(--fin), inset 0 0 18px color-mix(in srgb, var(--fin) 45%, transparent); }
.fin-6::after { padding: 2px; box-shadow: none;
  background: conic-gradient(from 0deg, #FF7AD9, #B98BFF, #7FB2FF, #7CF5D2, #F7F59A, #FF9F7A, #FF7AD9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fin-holo 5s linear var(--lt, 0s) infinite; }
.fin-4::before, .fin-5::before, .fin-6::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .20) 50%, transparent 62%); background-size: 260% 100%;
  animation: fin-sheen 4.2s ease-in-out var(--lt, 0s) infinite; }
.fin-6::before { background-image: linear-gradient(115deg, transparent 34%, rgba(255, 140, 220, .16) 44%, rgba(140, 230, 255, .2) 52%, transparent 64%); }
.fin-5, .fin-6 { background: radial-gradient(120% 100% at 50% 32%, #3E4553 0%, #232733 55%, #15161D 100%); }
@keyframes fin-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes fin-holo { to { filter: hue-rotate(360deg); } }

/* ---------- the Locker: what a piece does, when, how many times ---------- */
.lo-eff .lo-gk { display: inline-flex; gap: 5px; align-items: center; margin-right: 8px; font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gt); vertical-align: 1px; }
.lo-eff .lo-gk svg { width: 12px; height: 12px; }
.lo-eff em { font-style: normal; color: var(--ink); }
.lo-meta .lo-uses { color: var(--ink-2); font-family: var(--f-mono); font-size: 11px; }
.lo-meta .lo-gold { font: 600 10.5px/1 var(--f-mono); color: #E7BE5A; }
.lo-meta .lo-home { color: var(--ink); padding: 2px 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font: 600 10.5px/1 var(--f-disp); letter-spacing: .04em; }
.lo-meta .lo-fin { font: 500 11px/1 var(--f-mono); color: var(--dim); }
.lo-meta .lo-fin.f2 { color: #C99466; } .lo-meta .lo-fin.f3 { color: #D7DCE3; } .lo-meta .lo-fin.f4 { color: #E7BE5A; }
.lo-meta .lo-fin.f5 { color: #A9ECFF; } .lo-meta .lo-fin.f6 { color: #E3B8FF; }
/* how gear works: one line per piece type, plus what levels add */
.lo-legend.gw div { gap: 8px; }
.lo-legend.gw span { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
.lo-legend.gw b { font: 500 12.5px/1.3 var(--f-text); color: var(--ink-2); }
.lo-legend.gw em { font: 500 12.5px/1.3 var(--f-text); font-style: normal; color: var(--ink); }
.lo-legend.gw p { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); font: 400 12.5px/1.45 var(--f-text); color: var(--ink-2); max-width: 62ch; }
@media (max-width: 760px) {
  .lo-legend.gw span { grid-template-columns: 74px minmax(0, 1fr); row-gap: 2px; }
  .lo-legend.gw em { grid-column: 2; }
}

/* ---------- in the fight: your gear and theirs, with uses as pips ---------- */
.b-gear.sig { position: relative; z-index: 5; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.b-gear.sig i { width: auto; height: auto; overflow: visible; display: inline-grid; grid-template-columns: 24px auto; grid-template-areas: "a n" "a p";
  column-gap: 7px; row-gap: 3px; align-items: center; padding: 3px 9px 3px 3px; font-style: normal;
  background: rgba(14, 13, 19, .86); box-shadow: inset 2px 0 0 var(--gt, rgba(255,255,255,.3)); }
.b-m.r .b-gear.sig i { box-shadow: inset -2px 0 0 var(--gt, rgba(255,255,255,.3)); }
.b-ga { grid-area: a; position: relative; overflow: hidden; width: 24px; height: 24px; display: block;
  background: radial-gradient(120% 100% at 50% 32%, #3B3746 0%, #24212C 55%, #16141B 100%); }
.b-gear.sig em { grid-area: n; font: 700 10px/1 var(--f-disp); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--gt, var(--ink)); }
.b-pips { grid-area: p; display: flex; gap: 4px; padding-left: 1px; }
.b-pips b { width: 5px; height: 5px; transform: rotate(45deg); background: rgba(255, 255, 255, .18); }
.b-pips b.on { background: var(--gt, var(--ink)); }
.b-gear.sig i.hot { box-shadow: inset 0 0 0 1px var(--gt, var(--f)), 0 0 18px color-mix(in srgb, var(--gt, #fff) 55%, transparent); animation: b-gear-hot 1.1s ease-out 2; }
.b-gear.sig i.spent { opacity: .38; }
/* when a piece fires: what it did, under the meter of the side it fired for */
.b-gfx { position: absolute; z-index: 4; left: 0; top: calc(100% + 12px + var(--i, 0) * 46px); display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; white-space: nowrap; pointer-events: none; opacity: 0;
  background: rgba(8, 7, 11, .9); box-shadow: inset 2px 0 0 var(--gt, var(--orange)), 0 12px 30px rgba(0, 0, 0, .45); }
.b-m.r .b-gfx { left: auto; right: 0; flex-direction: row-reverse; padding: 6px 6px 6px 14px; text-align: right;
  box-shadow: inset -2px 0 0 var(--gt, var(--orange)), 0 12px 30px rgba(0, 0, 0, .45); }
.b-gfx-art { position: relative; overflow: hidden; width: 30px; height: 30px; flex: 0 0 30px;
  background: radial-gradient(120% 100% at 50% 32%, #3B3746 0%, #24212C 55%, #16141B 100%); }
.b-gfx b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--gt, var(--orange)); }
.b-gfx em { font: 600 15px/1 var(--f-disp); font-style: normal; color: #FFF6EC; }
@keyframes b-gfx { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 10% { opacity: 1; transform: translateY(0) scale(1.03); }
  16% { transform: none; } 84% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes b-gfx-rm { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
.sd-g s u { text-decoration: none; margin-left: 2px; color: #E7BE5A; }
@media (max-width: 860px) {
  .b-gear.sig i { grid-template-columns: 20px auto; padding: 2px 6px 2px 2px; column-gap: 5px; }
  .b-ga { width: 20px; height: 20px; }
  .b-gear.sig em { font-size: 9px; letter-spacing: .08em; }
  .b-gfx { top: calc(100% + 8px + var(--i, 0) * 38px); padding: 4px 10px 4px 4px; gap: 8px; }
  .b-m.r .b-gfx { padding: 4px 4px 4px 10px; }
  .b-gfx-art { width: 24px; height: 24px; flex-basis: 24px; }
  .b-gfx em { font-size: 13px; }
}

/* ---------- the result: what your gear did, in numbers ---------- */
.r-gsum .r-t-s { max-width: 40ch; }
.r-again.gift { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.r-again .r-pack { position: relative; animation: gift-glow 2.4s ease-in-out var(--lt, 0s) infinite; }
.r-again .r-pack span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; transform: rotate(45deg) translateY(-1px);
  background: currentColor; }
@keyframes gift-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 76, 1, 0); } 50% { box-shadow: 0 0 0 4px rgba(252, 76, 1, .18), 0 0 28px rgba(252, 76, 1, .45); } }
@media (max-width: 860px) {
  .r-again.gift { grid-template-columns: 1fr; }
  .sc.g.fit .r-again.gift { grid-template-columns: 1fr 1fr; }
  .sc.g.fit .r-again.gift .r-pack { grid-column: 1 / -1; }
  .sc.g.fit .r-again.gift .r-re { grid-column: auto; }
  .sc.g.fit .r-tiles.four .r-gsum { grid-column: 1 / -1; }
  .sc.g.fit .r-gsum .r-t-s { display: block; font-size: 12px; }
}

/* ---------- the HUD: your Signal Level, then where you stand this month ---------- */
.g-id .g-lv { display: flex; align-items: center; gap: 0; }
.g-lv i { font-style: normal; } .g-lv i.sm { display: none; }
@media (max-width: 560px) { .g-lv i.lg { display: none; } .g-lv i.sm { display: inline; } }
@media (max-width: 420px) { .g-lv i.sm { display: none; } }
.g-lv em { display: inline-block; margin-right: 8px; padding: 3px 6px 2px; font: 700 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .06em;
  color: #0B0A0E; background: #FFF6EC; }
.g-meter { width: 96px; height: 4px; }
.g-meter.ready i { animation: meter-ready 1.6s ease-in-out var(--lt, 0s) infinite; }
@keyframes meter-ready { 50% { opacity: .55; } }

/* ---------- the world strip: plain words ---------- */
.g-chip.gift { background: rgba(252, 76, 1, .16); box-shadow: inset 0 0 0 1px var(--orange); animation: gift-glow 2.4s ease-in-out var(--lt, 0s) infinite; }
.g-chip.gift i { color: var(--orange); }
.g-chip.gift b { color: #FFF6EC; }
.g-chip.lock b { color: var(--dim); }

/* ---------- the ladder: a warden you can't fight yet ---------- */
.w-ch.foe.locked .w-fig .sav { filter: brightness(.34) saturate(.15) !important; }
.w-ch.foe.locked:hover .w-fig .sav, .w-ch.foe.locked.on .w-fig .sav { filter: brightness(.5) saturate(.3) !important; }
.w-ch.foe.locked .w-foe { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); animation: none; }
.w-ch.foe.locked .w-aura { opacity: .25; }
.p-lock { margin: 0; display: grid; gap: 5px; max-width: 28ch; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.p-lock b { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.p-lock b::before { content: ''; width: 9px; height: 7px; border: 1.5px solid currentColor; border-bottom-width: 5px; border-radius: 3px 3px 0 0; box-sizing: border-box; }
.g-world + .g-panel .p-go .p-lock { justify-self: start; }

/* ---------- your path: a new player's steps ---------- */
.g-panel.guide { --f: var(--orange); }
.gd { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; counter-reset: gd; }
.gd li { counter-increment: gd; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; font: 500 13px/1.3 var(--f-text); color: var(--dim); }
.gd li::before { content: counter(gd); display: grid; place-items: center; width: 20px; height: 20px; font: 600 10.5px/1 var(--f-mono);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.gd li.done { color: var(--ink-2); }
.gd li.done::before { content: '✓'; color: #9BD99B; background: rgba(155, 217, 155, .14); box-shadow: none; font-family: var(--f-text); }
.gd li.now { color: var(--ink); font-weight: 600; }
.gd li.now::before { background: var(--orange); color: #0B0A0E; box-shadow: none; }
.g-panel.guide .p-name { font-size: clamp(24px, 2.6vw, 32px); }
@media (min-width: 861px) {
  .g-world + .g-panel.guide { width: min(440px, 38vw); }
  .g-world + .g-panel.guide .g-panel-in { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .gd { display: flex; gap: 4px; margin-top: 10px; }
  .gd li { flex: 1 1 0; height: 3px; font-size: 0; display: block; background: rgba(255, 255, 255, .14); }
  .gd li::before { display: none; }
  .gd li.done { background: #9BD99B; }
  .gd li.now { background: var(--orange); }
  /* on a phone the path sits up top, under your name: the chips, you and your crate stay in sight below */
  .g-world + .g-panel.guide { top: calc(var(--sc-top, 64px) + 68px); bottom: auto; }
  .g-world + .g-panel.guide .g-panel-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 14px 14px 14px 16px; }
  .g-panel.guide .p-blurb { display: none; }
  .g-panel.guide .p-name { font-size: 20px; }
  .g-panel.guide .p-eye { margin-bottom: 6px; }
  .g-panel.guide .p-go { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .g-panel.guide .p-go .btn.g-engage { min-width: 0; padding: 12px 18px; }
}

/* ---------- the crate: a Signal Pack waiting, beside you in the world ---------- */
.crate { display: block; width: 100%; height: auto; overflow: visible; }
.crate .c-top { fill: #2C2835; } .crate .c-l { fill: #15131B; } .crate .c-r { fill: #1E1B26; }
.crate .c-seam { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linejoin: round; }
.crate .c-wave { fill: none; stroke: #FFF6EC; stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.crate.plus .c-top { fill: #3A3324; } .crate.plus .c-seam { stroke: #E7BE5A; }
.w-crate { position: absolute; z-index: 30; width: 5.4%; min-width: 42px; transform: translate(-50%, -100%); padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; display: grid; justify-items: center; gap: 4px; pointer-events: auto; }
.w-crate .crate { filter: drop-shadow(0 0 10px rgba(252, 76, 1, .55)) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); animation: crate-bob 2.6s ease-in-out var(--lt, 0s) infinite; }
.w-crate b { position: absolute; top: -4px; right: -10px; padding: 3px 5px 2px; font: 700 11px/1 var(--f-mono); color: #0B0A0E; background: var(--orange); }
.w-crate span { padding: 4px 7px 3px; font: 600 10px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: #0B0A0E; background: var(--orange); white-space: nowrap; }
.w-crate:hover .crate, .w-crate:focus-visible .crate { filter: drop-shadow(0 0 16px rgba(252, 76, 1, .85)) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
@keyframes crate-bob { 50% { transform: translateY(-7%); } }

/* ---------- the reveal: full screen, one piece at a time ---------- */
.rv { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; overflow-y: auto;
  padding: 32px 24px 24px; box-sizing: border-box; text-align: center;
  background: radial-gradient(55% 45% at 50% 50%, rgba(255, 255, 255, .07), transparent 70%), #08080A; }
.rv.plus { background: radial-gradient(60% 50% at 50% 46%, rgba(231, 190, 90, .14), transparent 70%), #0B0A0E; }
.sc.g:not(.fit) > .rv { min-height: 640px; }
.rv-head { display: grid; gap: 8px; justify-items: center; }
.rv-kick { margin: 0; font: 600 11px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.rv.plus .rv-kick { color: #E7BE5A; }
.rv-crate { margin: auto 0 0; padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.rv-crate .crate { width: min(220px, 34vh); filter: drop-shadow(0 0 28px rgba(252, 76, 1, .45)) drop-shadow(0 18px 22px rgba(0, 0, 0, .6));
  animation: crate-bob 2.8s ease-in-out var(--lt, 0s) infinite; }
.rv.plus .rv-crate .crate { filter: drop-shadow(0 0 30px rgba(231, 190, 90, .5)) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.rv-crate span { font: 600 12px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.rv-crate:hover .crate { filter: drop-shadow(0 0 40px rgba(252, 76, 1, .7)) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.rv-crate.cracking { cursor: default; }
.rv-crate.cracking .crate { animation: crate-crack .5s ease-in-out infinite; }
.rv-crate.cracking .c-seam { stroke: #FFF6EC; stroke-width: 3; }
@keyframes crate-crack { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.03); } 75% { transform: rotate(3deg) scale(1.03); } }
.rv-odds { margin-bottom: auto; font: 400 12.5px/1.4 var(--f-text); color: var(--ink-2); }
.rv-odds summary { cursor: pointer; list-style: none; font: 600 12px/1 var(--f-disp); color: var(--dim); padding: 6px 10px; }
.rv-odds summary::-webkit-details-marker { display: none; }
.rv-odds summary::after { content: ' +'; }
.rv-odds[open] summary::after { content: ' −'; }
.rv-odds div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 460px; padding: 6px 0 0; }
.rv-odds span { display: inline-flex; gap: 6px; align-items: baseline; }
.rv-odds i { font-style: normal; font: 600 11px/1 var(--f-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.rv-odds b { font: 600 12px/1 var(--f-mono); color: var(--ink); }
.rv-odds p { flex-basis: 100%; margin: 4px 0 0; color: var(--dim); }
/* rarity colours: quiet for common, warmer the rarer it is */
.rv .r1 { --rc: #A7A4B0; } .rv .r2 { --rc: #7FCBA2; } .rv .r3 { --rc: #6FA9FF; } .rv .r4 { --rc: #B98BFF; } .rv .r5 { --rc: #F2B84B; }
.rv-cards { margin: auto 0; display: grid; grid-template-columns: repeat(3, 228px); gap: 14px; justify-content: center; perspective: 1200px; }
.rv-card { position: relative; display: grid; gap: 8px; justify-items: center; align-content: start; padding: 16px 14px 16px; min-height: 340px; box-sizing: border-box;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc, #fff) 45%, transparent);
 }
.rv-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rc); }
.rv-card.r4 { box-shadow: inset 0 0 0 1px var(--rc), 0 0 36px color-mix(in srgb, var(--rc) 30%, transparent); }
.rv-card.r5 { box-shadow: inset 0 0 0 1px var(--rc), 0 0 52px color-mix(in srgb, var(--rc) 40%, transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--rc) 12%, var(--panel-2)), var(--panel-2) 60%); }
.rv-card.shut { place-items: center; align-content: center; background: #121018; box-shadow: inset 0 0 0 1px var(--hair); animation: rv-wait 1.8s ease-in-out var(--lt, 0s) infinite; }
.rv-card.shut::before { display: none; }
.rv-back { width: 64px; opacity: .55; }
@keyframes rv-in { 0% { opacity: 0; transform: rotateY(80deg) scale(.9); } 60% { opacity: 1; transform: rotateY(-6deg) scale(1.03); } 100% { transform: none; } }
@keyframes rv-wait { 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } }
.rv-rar { font: 700 11px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--rc); }
.rv-art { position: relative; overflow: hidden; width: 150px; height: 150px; margin: 4px 0 2px;
  background: radial-gradient(120% 100% at 50% 32%, #3B3746 0%, #24212C 55%, #16141B 100%); }
.rv-name { font: 600 17px/1.15 var(--f-disp); color: var(--ink); }
.rv-slot { font: 500 12px/1 var(--f-text); color: var(--dim); }
.rv-gear { display: grid; gap: 3px; font: 400 12.5px/1.35 var(--f-text); color: var(--ink-2); max-width: 26ch; }
.rv-gear b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--gt); }
.rv-tag { margin-top: auto; padding: 5px 8px 4px; font: 700 10.5px/1 var(--f-disp); letter-spacing: .1em; text-transform: uppercase; }
.rv-tag.new { color: #0B0A0E; background: var(--orange); }
.rv-tag.dup { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.rv-up { font: 700 12px/1 var(--f-disp); letter-spacing: .06em; color: var(--ink); }
.rv-up.f2 { color: #C99466; } .rv-up.f3 { color: #D7DCE3; } .rv-up.f4 { color: #E7BE5A; } .rv-up.f5 { color: #A9ECFF; }
.rv-up.f6 { background: linear-gradient(90deg, #FF7AD9, #B98BFF, #7FB2FF, #7CF5D2, #F7F59A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-xp { position: relative; width: 100%; height: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rv-xp i { position: absolute; inset: 0 auto 0 0; width: var(--b); background: #E7BE5A; }
@keyframes rv-xp { from { width: var(--a); } to { width: var(--b); } }
.rv-xpk { font: 500 11px/1 var(--f-mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.rv-dock { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rv-dock .btn { min-width: 170px; justify-content: center; }
.rv-dock .btn span { text-transform: none; letter-spacing: 0; font: 600 14px/1 var(--f-disp); }
@media (max-width: 860px) {
  .rv { padding: 20px 16px 16px; gap: 14px; }
  .rv-cards { grid-template-columns: 1fr; width: 100%; max-width: 420px; gap: 8px; }
  .rv-card { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "art rar" "art name" "art slot" "art gear" "tag tag" "up up" "xp xp" "xpk xpk";
    justify-items: start; text-align: left; min-height: 0; padding: 12px 12px 12px; column-gap: 12px; row-gap: 4px; }
  .rv-card.shut { min-height: 108px; display: grid; grid-template-columns: 1fr; grid-template-areas: none; justify-items: center; }
  .rv-rar { grid-area: rar; } .rv-name { grid-area: name; font-size: 15px; } .rv-slot { grid-area: slot; } .rv-gear { grid-area: gear; font-size: 12px; }
  .rv-art { grid-area: art; width: 84px; height: 84px; margin: 0; align-self: start; }
  .rv-tag { grid-area: tag; margin-top: 6px; }
  .rv-xp { grid-area: xp; } .rv-xpk { grid-area: xpk; } .rv-up { grid-area: up; }
  .rv-back { width: 44px; }
  .rv-dock { width: 100%; max-width: 420px; flex-direction: column; }
  .rv-dock .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fin-4::before, .fin-5::before, .fin-6::before, .fin-6::after, .w-crate .crate, .rv-crate .crate, .rv-card, .rv-card.shut,
  .g-chip.gift, .r-again .r-pack, .g-meter.ready i, .rv-xp i { animation: none !important; }
  .b-gfx { animation-name: b-gfx-rm !important; }
}
@media (max-width: 860px) { .sc.g.fit .r-again.gift .btn.ghost { grid-column: 1 / -1; } }
@media (max-width: 860px) { .w-crate span { display: none; } }

/* =====================================================================
   r21 · vNEXT: commit a send and a tune (two taps, one lock), the setlist, the raw history, the reveal with both
   tunes, hear their clip, the tap test. Phone first: the panel scrolls under a lock button that stays in reach.
   ===================================================================== */
.b-ctl:has(> .vn-panel), .b-ctl:has(> .vn-cal) { flex-shrink: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vn-panel { gap: 10px; }
/* the setlist: all seven rounds from round 1 */
.vn-set { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vn-set li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; row-gap: 4px; padding: 6px 8px; min-width: 0;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.vn-set li span { font: 600 10px/1 var(--f-mono); color: var(--dim); }
.vn-set li b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-set li .vn-d { grid-column: 1 / -1; }
.vn-set li.now { background: #1F1410; box-shadow: inset 0 0 0 2px var(--orange); }
.vn-set li.now b { color: var(--ink); }
.vn-set li.done { opacity: .45; }
.vn-d { display: inline-flex; gap: 2px; }
.vn-d u { display: block; width: 8px; height: 3px; background: rgba(255, 255, 255, .14); }
.vn-d u.on { background: var(--ink-2); }
.vn-set li.now .vn-d u.on { background: var(--orange); }
/* what they have done so far: raw rows, oldest first */
.vn-hist { display: grid; gap: 6px; }
.vn-hist ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vn-hist ol::-webkit-scrollbar { display: none; }
.vn-hist li { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 8px; row-gap: 3px; align-items: baseline;
  padding: 7px 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.vn-hist .h-n { grid-column: 1 / -1; font: 600 10px/1 var(--f-mono); color: var(--dim); }
.vn-hist li b { font: 700 11px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.vn-hist li.h-rush b { color: #FF8A5F; }
.vn-hist li.h-fake b { color: #9EC2DE; }
.vn-hist li em { font: 400 11.5px/1.2 var(--f-text); font-style: normal; color: var(--ink-2); }
.vn-hist .h-t { grid-column: 1 / -1; font: 400 11px/1.2 var(--f-text); color: var(--dim); }
.vn-hist li.caught .h-t { color: #FF8A5F; }
.vn-hist .h-rp { grid-column: 1 / -1; }
/* hear a finished round: theirs, or yours again */
.vn-rps, .b-xl-rp, .h-rp, .r-rp { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.vn-rp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; font: 600 10.5px/1 var(--f-disp); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); cursor: pointer; }
.vn-rp i { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }
.vn-rp:hover:not([disabled]) { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.vn-rp.on { color: #0B0A0E; background: var(--ink); box-shadow: none; }
.vn-rp[disabled] { opacity: .4; cursor: default; }
.b-xl-rp { margin-top: 4px; }
/* the guided match, and a task met for the first time */
.vn-coach { margin: 0; padding: 10px 14px; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); background: var(--panel-2); box-shadow: inset 2px 0 0 var(--orange); }
.vn-coach b { color: var(--ink); font-weight: 600; }
.vn-coach em { font-style: normal; color: #9EC2DE; font-weight: 600; }
.vn-new { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.vn-new b { color: var(--ink); font-weight: 600; }
.vn-new em { font-style: normal; color: var(--ink); font-weight: 600; }
.vn-demo { padding: 7px 12px; font: 600 12px/1 var(--f-disp); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); cursor: pointer; }
.vn-demo.fresh { color: #0B0A0E; background: var(--ink); box-shadow: none; }
.vn-demo[disabled] { opacity: .5; cursor: default; }
.vn-ready { margin: 0; font: 600 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
/* two rows, two taps */
.vn-rows { display: grid; gap: 8px; }
.vn-row { display: grid; grid-template-columns: 56px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.vn-row.tune { grid-template-columns: 56px repeat(2, minmax(0, 1fr)); }
.vn-k { margin: 0; align-self: center; font: 700 10.5px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.vn-btn { position: relative; display: grid; gap: 5px; justify-items: start; align-content: start; text-align: left; padding: 12px 14px 11px; min-height: 76px;
  background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer;
  transition: background .12s var(--ui-ease), box-shadow .12s var(--ui-ease), transform .08s; }
.vn-btn b { font: 700 16px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; }
.vn-btn span { font: 400 12.5px/1.3 var(--f-text); color: var(--ink-2); }
.vn-btn i { margin-top: auto; font: 500 11px/1 var(--f-text); font-style: normal; color: var(--dim); min-height: 11px; }
.vn-btn.sd-save { --c: #E9E4DA; } .vn-btn.sd-rush { --c: #FF5A3C; } .vn-btn.sd-fake { --c: #9EC2DE; }
.vn-btn.tn-speed { --c: #FF8A5F; } .vn-btn.tn-decoy { --c: #9EC2DE; }
.vn-btn.sd-rush b, .vn-btn.tn-speed b { color: #FF8A5F; }
.vn-btn.sd-fake b, .vn-btn.tn-decoy b { color: #9EC2DE; }
.vn-btn:hover:not([disabled]):not(.on) { background: #1B1822; }
.vn-btn.on { background: #1C1915; box-shadow: inset 0 0 0 2px var(--c); }
.vn-btn.on::after { content: ''; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--c); }
.vn-btn:active:not([disabled]) { transform: translateY(1px); }
.vn-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.vn-btn.off, .vn-btn[disabled] { opacity: .38; cursor: default; }
.vn-btn.off.on { opacity: .7; }
.vn-lock { position: sticky; bottom: 0; z-index: 2; width: 100%; box-shadow: 0 -10px 18px rgba(11, 10, 14, .9); }
.vn-cal-redo { padding: 0; margin-left: 6px; font: inherit; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; background: none; cursor: pointer; }
.vn-cal-redo:hover { color: var(--ink-2); }
/* the listen: under a Rush, Perfect ends at the mark and the bar is the deadline */
.b-fast.vn2 .b-fast-mark { position: absolute; top: 0; bottom: 0; left: var(--pm, 70%); width: 2px; background: #FFF6EC; opacity: .85; }
.b-fast .mid { opacity: 0; }
.b-fast .mid em { font-style: normal; }
/* the reveal: each side's send, the ear it was on, and how it heard */
.b-mv.vn .b-mv-t { font: 600 11.5px/1 var(--f-text); font-style: normal; color: var(--ink-2); }
.b-mv.vn b.s-rush { color: #FF8A5F; } .b-mv.vn b.s-fake { color: #9EC2DE; }
.b-mv.vn.caught { box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 0 0 2px #9EC2DE; }
/* the tap test */
.vn-cal .b-arm-go { display: grid; gap: 12px; justify-items: center; max-width: 520px; }
.vn-cal p { font: 400 14px/1.45 var(--f-text); }
.vn-cal-go { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vn-cal-res b { color: var(--ink); font: 600 15px/1 var(--f-mono); }
.vn-cal-err { color: #FF8A80 !important; }
.vn-tap { width: min(320px, 80vw); height: 120px; display: grid; place-content: center; gap: 8px; background: var(--panel-2); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--orange); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.vn-tap b { font: italic 800 34px/1 var(--f-head); text-transform: uppercase; }
.vn-tap i { font: 500 11px/1 var(--f-text); font-style: normal; color: var(--dim); }
.vn-tap.hit { animation: vn-tap .18s var(--ui-ease); }
@keyframes vn-tap { 0% { background: #2A1A12; transform: scale(.98); } 100% { background: var(--panel-2); transform: none; } }
@media (hover: none) { .vn-tap i { display: none; } }
/* the rules card and the result */
.b-rules.vn .b-rules-gear { color: var(--ink-2); }
.r-r.vn { grid-template-columns: 30px 1fr auto auto; align-items: center; }
.r-r .r-task { font: 600 10.5px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--dim); margin-right: 8px; }
.lo-dock.vn { justify-content: space-between; }
.lo-dock.vn .lo-arm-n { font: 400 13px/1.4 var(--f-text); color: var(--ink-2); }
.lo-dock.vn .lo-arm-n b { color: var(--ink); }
@media (max-width: 860px) {
  .vn-set li { padding: 5px 5px; column-gap: 4px; }
  .vn-set li b { font-size: 9px; letter-spacing: .06em; }
  .vn-d u { width: 5px; }
}
@media (max-width: 560px) {
  .vn-panel { gap: 8px; }
  .vn-set { gap: 3px; }
  .vn-set li { grid-template-columns: 1fr; justify-items: center; padding: 5px 2px 6px; row-gap: 4px; }
  .vn-set li span { display: none; }
  .vn-set li b { font-size: 8.5px; letter-spacing: .04em; max-width: 100%; }
  .vn-row, .vn-row.tune { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vn-row.tune { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-k { display: none; }
  .vn-btn { min-height: 58px; padding: 10px 10px 9px; gap: 4px; }
  .vn-btn b { font-size: 13.5px; letter-spacing: .1em; }
  .vn-btn span { display: none; }
  .vn-btn i { font-size: 10.5px; }
  .vn-hist li { padding: 6px 8px; }
  .vn-coach { font-size: 12.5px; padding: 8px 10px; }
  .vn-panel .sd-foot { font-size: 11px; }
  .r-r.vn { grid-template-columns: 24px 1fr auto; grid-template-areas: "n mv d" ". rp rp"; row-gap: 8px; }
  .r-r.vn .n { grid-area: n; } .r-r.vn .mv { grid-area: mv; } .r-r.vn .d { grid-area: d; } .r-r.vn .r-rp { grid-area: rp; }
  .vn-row.tune .vn-btn span { display: block; font-size: 11px; }
}
/* r21 · M2: the bend, said once; your notes on a warden; hidden labels; an Overload */
.vn-bend { margin: 0; display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2);
  background: #1A0F0C; box-shadow: inset 2px 0 0 #FF5A3C; }
.vn-bend b { flex: 0 0 auto; font: 700 10.5px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: #FF8A5F; }
.p-tell.bend i { color: #FF8A5F; }
.p-tell.none { color: var(--dim); }
.vn-hist li.h-hidden b { color: var(--dim); }
.vn-hist li.h-overload b { color: #FF5A3C; }
.b-mv.vn b.s-overload { color: #FF5A3C; }
.b-mv.vn b.s-hidden { color: var(--dim); }
@media (max-width: 560px) { .vn-bend { font-size: 12.5px; padding: 8px 10px; flex-direction: column; gap: 4px; } }

/* =====================================================================
   r22 · TECHNIQUES. A piece carries a verb. In a match: both sides' techniques, Overload, the third tunes,
   REFLECT's choice, CALL, a reflect announced. In the Locker: two slots, arm without wearing, fits. One colour
   per archetype: pressure, phantom, reader, anchor.
   ===================================================================== */
.a-pr { --tc: #FF8A5F; } .a-ph { --tc: #9EC2DE; } .a-rd { --tc: #B9ACE0; } .a-an { --tc: #D6B45E; } .a-x { --tc: #C9C2B6; }
/* in a match: yours and theirs on one line; tap for what each does */
.vn-tech { display: grid; gap: 6px; }
.vt-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 7px 10px; width: 100%;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); cursor: pointer; text-align: left; }
.vt-head:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.vt-side { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.vt-side em { font: 600 10px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--dim); margin-right: 2px; }
.vt { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 7px; box-shadow: inset 0 0 0 1px var(--tc); }
.vt b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; color: var(--tc); }
.vt i { font: 500 10px/1 var(--f-mono); font-style: normal; color: var(--dim); }
.vt.used { opacity: .45; }
.vt-none { font: 400 11.5px/1 var(--f-text); color: var(--dim); }
.vt-say { list-style: none; margin: 0; padding: 0 2px; display: grid; gap: 5px; }
.vt-say li { font: 400 12.5px/1.4 var(--f-text); color: var(--ink-2); }
.vt-say li b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink); margin-right: 8px; }
.vt-say li i { font-style: normal; color: var(--dim); margin-right: 6px; }
/* the rows: Overload, the third tunes, REFLECT's choice */
.vn-row.c4 { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); }
.vn-row.tune.c3 { grid-template-columns: 56px repeat(3, minmax(0, 1fr)); }
.vn-row.tune.c4 { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); }
.vn-row.refl { grid-template-columns: 56px repeat(2, minmax(0, 1fr)); }
.vn-row.refl .vn-btn { min-height: 58px; }
.vn-btn.sd-overload { --c: #FF5A3C; } .vn-btn.sd-overload b { color: #FF5A3C; }
.vn-btn.tn-scan { --c: #B9ACE0; } .vn-btn.tn-scan b { color: #B9ACE0; }
.vn-btn.tn-steady { --c: #D6B45E; } .vn-btn.tn-steady b { color: #D6B45E; }
.vn-btn.rf-on { --c: #D6B45E; } .vn-btn.rf-on b { color: #D6B45E; }
.vn-btn.rf-off { --c: #E9E4DA; }
/* REFLECT, announced before anyone commits */
.vn-refl { margin: 0; display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2);
  background: #15130C; box-shadow: inset 2px 0 0 #D6B45E; }
.vn-refl b { flex: 0 0 auto; font: 700 10.5px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: #D6B45E; }
.vn-refl.in { background: #1A0F0C; box-shadow: inset 2px 0 0 #FF5A3C; }
.vn-refl.in b { color: #FF8A5F; }
/* CALL: a later round's task, once a match */
.vn-call-open { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px #B9ACE0; cursor: pointer; text-align: left; }
.vn-call-open b { font: 700 12px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: #B9ACE0; }
.vn-call-open i { font: 500 11px/1 var(--f-text); font-style: normal; color: var(--dim); }
.vn-call-open:hover { background: #17141D; }
.vn-call { display: grid; gap: 8px; padding: 10px 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px #B9ACE0; }
.vn-call .vn-k { color: #B9ACE0; }
.vn-call-r, .vn-call-k { display: flex; flex-wrap: wrap; gap: 5px; }
.vn-call-r button, .vn-call-k button { display: grid; gap: 4px; justify-items: start; padding: 7px 9px; background: #121016; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.vn-call-r b { font: 600 10px/1 var(--f-mono); color: var(--dim); }
.vn-call-r i { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.vn-call-k button { font: 700 11px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; }
.vn-call-r button.on, .vn-call-k button.on { box-shadow: inset 0 0 0 2px #B9ACE0; background: #18151F; }
.vn-call-hint { margin: 0; font: 400 12px/1.4 var(--f-text); color: var(--dim); }
.vn-call-go { display: flex; gap: 8px; flex-wrap: wrap; }
/* the setlist: a called round */
.vn-set li.called { box-shadow: inset 0 0 0 1px #B9ACE0; }
.vn-set li.called.now { box-shadow: inset 0 0 0 2px var(--orange); }
.vn-set li.called em { grid-column: 1 / -1; font: 600 9px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: #B9ACE0; }
/* the listen: what a Scan told you */
.b-hitby.scan { box-shadow: inset 2px 0 0 #B9ACE0; }
.b-hitby.scan > b { color: #B9ACE0; }
/* the result: a seal, what it opened, its pieces */
.r-seal { display: grid; gap: 8px; padding: 16px 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair), inset 3px 0 0 var(--orange); }
.r-seal-k { margin: 0; font: 700 11px/1 var(--f-disp); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.r-seal-v { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.r-seal-v b { font: italic 800 20px/1 var(--f-head); text-transform: uppercase; color: var(--ink); padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--hair); }
.r-seal-v b.slot { color: var(--orange); }
.r-seal-t { margin: 0; font: 400 13px/1.45 var(--f-text); color: var(--ink-2); }
.r-seal-t em { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--ink); margin-right: 8px; }
.r-seal-p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.r-seal-p > span { display: grid; justify-items: center; gap: 4px; }
.r-seal-art { position: relative; width: 56px; height: 56px; overflow: hidden; display: block; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair); }
.r-seal-p i { font: 600 9.5px/1 var(--f-disp); letter-spacing: .12em; font-style: normal; color: var(--dim); }
.r-seal-p em { font: 400 12.5px/1.4 var(--f-text); font-style: normal; color: var(--ink-2); }
/* the Locker: two slots */
.vk-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vk-slot { position: relative; display: grid; gap: 4px; align-content: center; min-height: 74px; padding: 10px 12px; background: var(--panel-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair); text-align: left; }
.vk-slot span { font: 600 10px/1 var(--f-mono); color: var(--dim); }
.vk-slot b { font: 700 13px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; }
.vk-slot i { font: 400 11.5px/1.3 var(--f-text); font-style: normal; color: var(--dim); }
.vk-slot.empty { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.vk-slot.locked { opacity: .55; }
.vk-slot.on { box-shadow: inset 0 0 0 2px var(--orange); }
.vk-slot.full { padding: 0; }
.vk-slot-in { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; width: 100%; padding: 10px 40px 10px 10px; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.vk-slot.full b { color: var(--tc); }
.vk-slot-t { display: grid; gap: 4px; min-width: 0; }
.vk-slot-t i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-em { position: relative; width: 52px; height: 52px; overflow: hidden; display: block; background: #121016; box-shadow: inset 0 0 0 1px var(--tc); }
.vk-slot .lo-x { top: 10px; right: 8px; margin-top: 0; opacity: .7; }
.vk-first { margin: 0 0 12px; font: 400 13px/1.45 var(--f-text); color: var(--ink-2); }
.lo-when i { font: 400 12px/1 var(--f-text); font-style: normal; color: var(--dim); margin-left: 8px; letter-spacing: 0; text-transform: none; }
/* the Locker: every technique, in plain words, with your pieces that carry it */
.vk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.vk-t { display: grid; gap: 7px; align-content: start; padding: 12px 12px 11px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hair), inset 2px 0 0 var(--tc); }
.vk-t-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vk-t-h b { font: 700 14px/1 var(--f-disp); letter-spacing: .14em; color: var(--tc); }
.vk-t-h i { font: 500 10.5px/1 var(--f-mono); font-style: normal; color: var(--dim); }
.vk-t-h em { margin-left: auto; font: 600 10px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--dim); }
.vk-t-h em.on { color: var(--ok); }
.vk-t p { margin: 0; font: 400 12.5px/1.4 var(--f-text); color: var(--ink-2); }
.vk-t.locked { opacity: .62; }
.vk-t.armed { box-shadow: inset 0 0 0 1px var(--tc), inset 2px 0 0 var(--tc); }
.vk-pcs { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-p { position: relative; width: 48px; height: 48px; overflow: hidden; padding: 0; background: #121016; box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.vk-p:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.vk-p.on { box-shadow: inset 0 0 0 2px var(--tc); }
.vk-t p.vk-none { font-size: 12px; color: var(--dim); }
.vk-next { margin: 4px 0 0; font: 400 12.5px/1.4 var(--f-text); color: var(--dim); }
.vk-next b { color: var(--ink-2); font-weight: 600; }
/* the dock: your two techniques as emblems, never worn */
.lo-build.vk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.lo-b.vk { box-shadow: inset 0 0 0 1px var(--tc); }
.lo-b.vk b { color: var(--tc); letter-spacing: .12em; }
/* fits */
.vk-fit-new { display: flex; gap: 8px; margin-bottom: 12px; }
.vk-fit-new input { flex: 1; min-width: 0; padding: 10px 12px; font: 400 14px/1 var(--f-text); color: var(--ink); background: var(--panel-2); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--hair); }
.vk-fit-new input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--orange); }
.vk-fits { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.vk-fit { position: relative; }
.vk-fit-in { width: 100%; display: grid; gap: 4px; justify-items: center; padding: 8px 8px 10px; background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.vk-fit.on .vk-fit-in { box-shadow: inset 0 0 0 2px var(--orange); }
.vk-fit-art { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; }
.vk-fit-in b { font: 700 11.5px/1.1 var(--f-disp); letter-spacing: .1em; text-transform: uppercase; }
.vk-fit-in i { font: 400 11px/1 var(--f-text); font-style: normal; color: var(--dim); }
.vk-fit .lo-x { top: 8px; right: 6px; margin-top: 0; opacity: .7; }
/* a Warden's card: what her seal opens */
.p-opens { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 400 12.5px/1.4 var(--f-text); color: var(--ink-2); }
.p-opens i { font-style: normal; color: var(--dim); margin-right: 2px; }
.p-opens b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.p-opens b.slot { color: var(--orange); }
@media (hover: none) { .vk-slot .lo-x, .vk-fit .lo-x { opacity: .85; } }
@media (max-width: 860px) {
  .vn-row.c4 .vn-btn span, .vn-row.tune.c4 .vn-btn span { display: none; }
}
@media (max-width: 560px) {
  .vk-list { grid-template-columns: 1fr; }
  .vk-slots { gap: 6px; }
  .vk-slot-in { grid-template-columns: 44px 1fr; padding-right: 34px; }
  .vk-em { width: 44px; height: 44px; }
  .vn-row.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vn-row.tune.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vn-row.tune.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-row.refl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-row.c4 .vn-btn b { font-size: 11.5px; letter-spacing: .06em; }
  .vn-row.tune.c3 .vn-btn span, .vn-row.tune.c4 .vn-btn span { display: none; }
  .vn-set li.called em { display: none; }
  .vn-set li.called b { color: #B9ACE0; }
  .vt-head { padding: 6px 8px; gap: 5px 10px; }
  .vn-refl { font-size: 12.5px; padding: 8px 10px; flex-direction: column; gap: 4px; }
  .r-seal-v b { font-size: 16px; }
}

/* =====================================================================
   r24 · M4 · DUELS (db/023). Async by default; a duel never blocks anything.
   The duels panel, a challenge card, the challenge sheet, a duel's clock and waits,
   rivals and head-to-head. Same type, same squares, same hairlines as the rest.
   ===================================================================== */
.d-rv { display: inline-block; margin-left: 8px; padding: 3px 6px 3px 7px; font: 700 9.5px/1 var(--f-disp); font-style: normal; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .6); vertical-align: 2px; }
p .d-rv:first-child, .p-class .d-rv { margin-left: 0; }
.g-chip.move { box-shadow: inset 0 0 0 1px var(--orange); background: rgba(252, 76, 1, .12); }
.g-chip.move i { color: var(--orange); }
.g-chip.move b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; background: var(--orange); transform: rotate(45deg);
  animation: b-pulse .9s ease-in-out infinite; }
/* the panel: a list that can grow, so it scrolls inside itself (on a phone it never pushes the world off) */
.g-panel.dl .p-main { align-content: start; }
.g-panel.dl .d-scroll { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.d-list { display: grid; gap: 1px; }
.d-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; background: var(--panel-2); }
.d-in { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; text-align: left; padding: 12px 12px;
  color: var(--ink); background: transparent; border: 0; width: 100%; min-width: 0; font: inherit; }
button.d-in { cursor: pointer; transition: background .14s var(--ui-ease); }
button.d-in:hover { background: #1D1A24; }
.d-k { font: 500 12px/1.1 var(--f-text); color: var(--dim); }
.d-in b { font: 600 15px/1.1 var(--f-disp); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-in b .d-rv { font-size: 9px; padding: 2px 5px 2px 6px; }
.d-v { font: 500 12px/1.1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-row.mv { box-shadow: inset 2px 0 0 var(--orange); }
.d-row.mv .d-k { color: var(--orange); font-weight: 600; }
.d-row.mv .d-v { color: var(--ink); }
.d-row.done .d-in b, .d-row.done .d-v { color: var(--ink-2); }
.d-tools { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.d-tool { font: 500 12px/1 var(--f-text); color: var(--ink-2); padding: 8px 8px; background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.d-tool:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink-2); }
.d-sec { margin: 10px 0 0; font: 600 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.d-none { max-width: 46ch; }
.g-panel.dl .p-go .btn { justify-content: center; }
.cs-gate { color: #E9B38F; }
/* a challenge: pace and stakes as two pairs of squares; what each side brings */
.cs-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.cs-o { display: grid; gap: 5px; text-align: left; padding: 11px 12px; color: var(--ink); background: var(--panel-2); border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .14s var(--ui-ease), background .14s var(--ui-ease); }
.cs-o b { font: 700 12px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; }
.cs-o i { font: 400 12px/1.3 var(--f-text); font-style: normal; color: var(--dim); }
.cs-o:hover:not([disabled]) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.cs-o.on { background: rgba(252, 76, 1, .1); box-shadow: inset 0 0 0 1px var(--orange); }
.cs-o.on b { color: var(--orange); }
.cs-o.off { cursor: default; opacity: .5; }
.cs-o.off i { color: #E9B38F; }
.cs-tech { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.cs-k { margin: 0; min-width: 72px; font: 600 10px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cs-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.cs-ch { margin-left: auto; font: 500 12px/1 var(--f-text); color: var(--ink-2); padding: 6px 2px; background: transparent; border: 0; cursor: pointer; }
.cs-ch:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink-2); }
@media (min-width: 861px) {
  .g-world + .g-panel.dl { max-height: calc(100% - 40px - 24px - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .g-world + .g-panel.dl .g-panel-in { grid-template-columns: minmax(0, 1fr); }
  .g-world + .g-panel.dl.take .g-panel-in { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sc.g.fit > .g-panel.dl { flex: 0 1 auto; min-height: 0; max-height: 74%; overflow-y: auto; overscroll-behavior: contain; }
  .sc.g.fit:has(> .g-panel.dl) > .g-world { min-height: 22%; }
  .g-panel.dl.take .p-art.p-char { display: none; }
  .d-in { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; padding: 12px 10px; }
}
@media (max-width: 420px) {
  .d-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; }
  .d-in .d-k { grid-column: 1 / -1; }
  .d-row:has(.d-tools) { grid-template-columns: 1fr; }
  .d-tools { padding: 0 6px 8px 4px; }
  .cs-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-o { padding: 10px; }
  .cs-o i { font-size: 11.5px; }
}
/* in a duel: the day's clock, the wait that lets you leave, the record against this person */
.b-timer.long { font: 600 15px/1 var(--f-text); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-timer.long i { font-size: 10.5px; margin-left: 4px; }
.b-wait.duel { gap: 10px; }
.g-quit.out { color: var(--ink-2); }
.g-quit.out:hover { color: var(--ink); }
.b-wait-duel { margin: 0; max-width: 46ch; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); }
.b-wait-duel b { font: 600 13.5px/1 var(--f-text); color: var(--ink); font-variant-numeric: tabular-nums; }
.vn-rec { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 11.5px/1.2 var(--f-text); color: var(--ink-2); }
.vn-rec .d-rv { margin-left: 0; }
.vn-rec span b { color: var(--ink); font-weight: 600; }
.b-rv { margin-left: 6px; padding: 2px 5px; font: 700 9px/1 var(--f-disp); font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .6); }
/* the result: a rival named, a rival beaten back, the head-to-head now */
.r-rival { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; font: 400 13px/1.3 var(--f-text); color: var(--ink-2); }
.r-rival b { font: 700 11px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); padding: 4px 7px; box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .6); }
.r-rival.back b { color: #0B0A0E; background: var(--orange); box-shadow: none; }
.r-h2h { margin: 6px 0 0; font: 500 12.5px/1.2 var(--f-text); color: var(--ink-2); }
.r-h2h b { font: 600 13px/1 var(--f-mono); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .g-chip.move b::before { animation: none; } }
/* touch: every duel control is a real target (44 px and up) */
@media (hover: none), (max-width: 860px) {
  .d-in { min-height: 48px; }
  .d-tool, .cs-ch { min-height: 44px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  .g-quit.out { min-height: 44px; }
}
/* a pack's piece in vNext: the technique it carries, in its archetype's colour */
.rv-gear.tech b { color: var(--tc, var(--ink)); }

/* =====================================================================
   r26 · UX, UI & LANGUAGE PASS. The commit in decision order (this round, their read, send, tune, lock in);
   choice lines and row labels at every width; the read as their move against yours; a reveal that stays readable;
   a Catch you can see move; the Locker split into your look and what you fight with.
   ===================================================================== */
/* this round */
.vn-this { display: grid; gap: 8px; }
.vn-this .b-prompt { text-align: left; }
.b-prompt .vn-d { margin-left: 10px; vertical-align: 3px; }
.b-cue { margin: 6px 0 0; font: 400 12.5px/1.35 var(--f-text); color: var(--dim); }
/* their sends and yours, one line */
.vn-sends { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.vn-sends .vs { display: inline-flex; align-items: center; gap: 8px; }
.vn-sends .vs.them { margin-left: auto; }
.vn-sends em { font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--dim); }
.vn-sends b { font: 700 18px/1 var(--f-mono); color: var(--ink); }
.vn-sends .vs.them .sd-pips i.on { background: #FF8A5F; box-shadow: 0 0 10px rgba(255, 106, 61, .3); }
.vn-sends .vn-ready { font-style: normal; margin-left: 4px; }
/* the read: their move against yours, last three rounds */
.vn-hist ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.vn-hist li { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 5px 12px; padding: 8px 10px 9px;
  background: var(--panel-2); box-shadow: none; }
.vn-hist .h-n { grid-column: 1 / -1; font: 500 10px/1 var(--f-mono); color: var(--dim); }
.vn-hist .h-n b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); margin-left: 4px; }
.vn-hist .h-you, .vn-hist .h-them { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.vn-hist .h-you em, .vn-hist .h-them em { font: 500 10.5px/1 var(--f-text); font-style: normal; color: var(--dim); }
.vn-hist li b { font: 700 11.5px/1 var(--f-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.vn-hist li b.s-rush { color: #FF8A5F; } .vn-hist li b.s-fake { color: #9EC2DE; } .vn-hist li b.s-overload { color: #FF5A3C; } .vn-hist li b.s-hidden { color: var(--dim); }
.vn-hist .h-them i { font: 400 11.5px/1 var(--f-text); font-style: normal; color: var(--ink-2); }
.vn-hist .h-t { grid-column: 1 / -1; font: 500 11.5px/1.2 var(--f-text); color: var(--ink-2); }
.vn-hist .h-t.r-perfect { color: var(--orange); } .vn-hist .h-t.r-miss, .vn-hist .h-t.r-wide { color: #FF8A80; }
.vn-hist li.caught .h-t { color: #9EC2DE; }
.vn-hist .h-rp { grid-column: 1 / -1; }
/* last round's takeaway, until you lock in again */
.vn-last { margin: 0; padding: 9px 12px; font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); background: var(--panel-2); box-shadow: inset 2px 0 0 var(--dim); }
.vn-last b { font: 700 10.5px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-right: 10px; }
.vn-last strong { font: 700 1em/1 var(--f-mono); color: var(--ink); }
.vn-last.good { box-shadow: inset 2px 0 0 var(--orange); } .vn-last.bad { box-shadow: inset 2px 0 0 #FF6A5F; }
/* the lock never covers a choice: it sits after the rows */
.vn-lock { position: static; box-shadow: none; margin-top: 2px; }
.vn-btn i:empty { display: none; }
/* phones: Send and Tune keep their labels and their lines; the rows get a header instead of a column */
@media (max-width: 560px) {
  .vn-panel { gap: 10px; }
  .vn-this .b-prompt { text-align: center; }
  .b-cue { text-align: center; }
  .vn-row, .vn-row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vn-row.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-row.tune, .vn-row.tune.c2, .vn-row.tune.c4, .vn-row.refl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-row.tune.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vn-k { display: block; grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink-2); }
  .vn-btn { min-height: 0; padding: 10px 10px 10px; gap: 5px; }
  .vn-btn b { font-size: 13.5px; letter-spacing: .1em; }
  .vn-btn span, .vn-row.tune .vn-btn span, .vn-row.c4 .vn-btn span, .vn-row.tune.c3 .vn-btn span, .vn-row.tune.c4 .vn-btn span { display: block; font-size: 11.5px; line-height: 1.3; }
  .vn-row.c4 .vn-btn b { font-size: 12.5px; letter-spacing: .08em; }
  .vn-hist ol { grid-template-columns: 1fr; gap: 4px; }
  .vn-hist li { grid-template-columns: auto auto 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 9px; }
  .vn-hist .h-n { grid-column: auto; }
  .vn-hist .h-t { grid-column: 1 / -2; }
  .vn-hist .h-rp { grid-column: -2 / -1; grid-row: 1 / span 2; align-self: center; }
  .vn-hist .h-rp .vn-rp { padding: 8px 9px 8px 8px; }
  .vn-sends em { font-size: 9.5px; letter-spacing: .1em; }
  .vn-last { font-size: 12.5px; padding: 8px 10px; }
}
/* the stage during commit: your lock lands on you; a side that has locked in says so; their Rush arrives in yours */
.b-lockfx { position: absolute; inset: 8% 6% 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, var(--lk, rgba(233, 228, 218, .35)), transparent 72%); }
.b-lockfx.s-rush { --lk: rgba(255, 90, 60, .5); } .b-lockfx.s-fake { --lk: rgba(158, 194, 222, .5); } .b-lockfx.s-overload { --lk: rgba(255, 90, 60, .6); }
@keyframes b-lockfx { 0% { opacity: 0; transform: scale(.7); } 22% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.12); } }
.b-lockb { position: absolute; z-index: 4; top: 34%; padding: 4px 8px 5px; font: 700 10px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ok); background: rgba(8, 7, 11, .82); box-shadow: inset 0 0 0 1px rgba(127, 212, 160, .45); animation: b-lockb .35s var(--ui-ease) both; }
.b-lockb.you { left: 10%; } .b-lockb.them { right: 10%; }
@keyframes b-lockb { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.b-incoming { position: absolute; z-index: 3; left: -40%; right: -40%; top: 46%; height: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(270deg, transparent, #FF5A3C 40%, #FFB199 50%, transparent 62%); filter: drop-shadow(0 0 10px rgba(255, 90, 60, .8)); }
@keyframes b-incoming { 0% { opacity: 0; transform: translateX(120%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(-10%); } }
/* a Catch: one send flies from the side that lost it to the side that took it */
.b-steal { position: absolute; z-index: 7; top: 12%; display: grid; justify-items: center; gap: 6px; pointer-events: none; opacity: 0; transform: translateX(-50%); }
.b-steal b { width: 16px; height: 16px; transform: rotate(45deg); background: #9EC2DE; box-shadow: 0 0 18px rgba(158, 194, 222, .8); }
.b-steal span { font: 700 10.5px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: #9EC2DE; white-space: nowrap; }
@keyframes b-steal-you { 0% { left: 84%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 16%; opacity: 0; } }
@keyframes b-steal-them { 0% { left: 16%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 84%; opacity: 0; } }
.b-steal.to-them b { background: #FF8A5F; box-shadow: 0 0 18px rgba(255, 138, 95, .8); } .b-steal.to-them span { color: #FF8A5F; }
/* the reveal: lines stack and stay */
.b-say.vn { display: grid; gap: 6px; min-height: 0; }
.b-say.vn p { position: relative; }
@media (max-width: 560px) { .b-say.vn p { font-size: 15px; } }
/* who you are fighting, said on the HUD */
.b-botchip.boss { color: #0B0A0E; background: #FF5A3C; box-shadow: none; }
.b-botchip.player { color: var(--ink-2); }
/* the result: you, then them, on their own lines */
.r-r.vn .r-side { display: block; }
.r-r.vn .r-side em { display: inline-block; min-width: 46px; margin-right: 6px; font: 500 11px/1 var(--f-text); font-style: normal; color: var(--dim); }
/* the Locker: your look, and what you fight with */
.lo-zone { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lo-zone b { font: 700 11px/1 var(--f-disp); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.lo-zone i { font: 400 12.5px/1.4 var(--f-text); font-style: normal; color: var(--dim); }
.lo-zone.armed b { color: var(--ok); }
.lo-zone.look { justify-content: center; margin-top: 4px; }
/* the first pack: rarity and finish are looks */
.rv-note { margin: 14px auto 0; max-width: 520px; text-align: center; font: 500 13.5px/1.4 var(--f-text); color: var(--ink-2); }
.b-rules-cal { margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) { .b-lockfx, .b-incoming, .b-steal { display: none; } .b-lockb { animation: none; } }
/* r26 · fixes from the first look */
.b-stage:has(> .b-intro) .b-round > * { opacity: 0; }
.b-lockb { top: 58%; }
.lo-top { flex-wrap: wrap; }
.lo-zone.look { flex-basis: 100%; }
@media (max-width: 560px) {
  .g-battle .b-dn.them { top: 20%; }
  .r-xp { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n k" "bar bar" "why why"; }
  .r-xp-k { white-space: normal; text-align: right; line-height: 1.3; }
}
.b-lockb { top: auto; bottom: 12%; }
/* short phones: the read keeps its last two rounds so Send and Tune stay near the top of the scroll */
@media (max-width: 560px) and (max-height: 720px) {
  .vn-hist li:nth-last-child(n+3) { display: none; }
}
.rv-sub { margin: 6px 0 0; font: 400 13px/1.4 var(--f-text); color: var(--dim); text-transform: none; letter-spacing: 0; }

/* r27 · the rules card: four steps, each with what you do and what every choice means */
.b-rules.vn { gap: 12px; }
.b-rules.vn .vr-lead { margin: -2px 0 0; font: 400 14px/1.45 var(--f-text); color: var(--ink-2); }
.vr-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.b-rules .vr-step { padding: 12px 14px 12px; padding-left: 14px; background: var(--panel-2); counter-increment: none; font-size: inherit; }
.b-rules .vr-step::before { content: none; }
.vr-h { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vr-n { font: 700 12px/1 var(--f-mono); color: var(--orange); }
.vr-h b { font: 700 13px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.vr-h i { font: 400 13.5px/1.35 var(--f-text); font-style: normal; color: var(--ink-2); }
.vr-opts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; }
.vr-opts dt { margin: 0; }
.vr-opts dd { margin: 0; font: 400 13.5px/1.4 var(--f-text); color: var(--ink-2); }
.vr-chip { display: inline-block; min-width: 64px; padding: 4px 7px 5px; text-align: center; font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c, var(--ink)); box-shadow: inset 0 0 0 1px var(--c, rgba(255, 255, 255, .35)); }
.vr-chip.sd-save { --c: #E9E4DA; } .vr-chip.sd-rush { --c: #FF8A5F; } .vr-chip.sd-fake { --c: #9EC2DE; }
.vr-chip.tn-speed { --c: #FF8A5F; } .vr-chip.tn-decoy { --c: #9EC2DE; }
.vr-chip.gr-hit { --c: #E9E4DA; } .vr-chip.gr-perfect { --c: var(--orange); }
.vr-note { margin: 8px 0 0; font: 400 12.5px/1.45 var(--f-text); color: var(--dim); }
.vr-step > .vr-note:first-of-type:not(:only-child) { margin-top: 8px; }
.vr-h + .vr-note { margin-top: 0; color: var(--ink-2); font-size: 13.5px; }
.vr-win { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 400 14px/1.4 var(--f-text); color: var(--ink); }
.vr-win b { font: 700 13px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.vr-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 400 12.5px/1.4 var(--f-text); color: var(--dim); }
.vr-facts li { position: relative; padding-left: 14px; }
.vr-facts li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--dim); }
@media (max-width: 560px) {
  .b-rules .vr-step { padding: 10px 11px; }
  .vr-h i, .vr-opts dd { font-size: 12.5px; }
  .vr-chip { min-width: 56px; font-size: 10px; }
}
.vr-opts { grid-template-columns: 82px 1fr; }
.vr-chip { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .vr-opts { grid-template-columns: 74px 1fr; gap: 6px 10px; } }

/* =====================================================================
   r28 · THE DUEL: the commit, from the approved canvas. Cream on black; Rush red-orange, Fake pale blue; nothing else
   takes a colour. Position, scale, type and hairlines do the work, not boxes.
   ===================================================================== */
.g-battle.duel { --rush: #FF5A3C; --fake: #9EC2DE; --bone: #F9F4EE; --line: #1E1E1E; --rail: #333;
  position: relative; display: flex; flex-direction: column; min-height: 0; background: #0A0A0A; color: var(--bone); }
.g-battle.duel :focus-visible { outline: 1.5px solid var(--bone); outline-offset: 2px; }
.dl-k { margin: 0; font: 600 11px/1.2 var(--f-mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.dl-d { display: inline-block; flex: none; width: 10px; height: 10px; transform: rotate(45deg); box-sizing: border-box; background: var(--bone); }
.dl-d.slot { background: transparent; border: 1.5px solid currentColor; }
.dl-d.ghost { background: transparent; border: 1px dashed var(--dim); }
.dl-d.spent { opacity: .25; }
.dl-d.s-rush { background: var(--rush); } .dl-d.s-fake { background: var(--fake); }

/* the band: round, the seven tasks, tools */
.dl-band { flex: none; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); height: 76px; padding: 0 48px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.dl-round { flex: none; font: 600 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-2); white-space: nowrap; }
.dl-round.sm, .dl-now-sm, .dl-more { display: none; }
.dl-set { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: clamp(14px, 2.6vw, 44px); flex: 1; min-width: 0; }
.dl-t { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.dl-tn { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--dim); white-space: nowrap; }
.dl-t b { font: 600 15px/1 var(--f-disp); letter-spacing: .04em; color: var(--bone); white-space: nowrap; }
.dl-t.done .dl-tn { color: #5A5754; }
.dl-t.done b { font-size: 13px; color: #6A6764; }
.dl-t.done .dl-pips { visibility: hidden; }
.dl-t.now .dl-tn { color: var(--bone); font-weight: 700; }
.dl-t.now b { font-size: 22px; font-weight: 700; padding: 0 2px 4px; box-shadow: inset 0 -2px 0 var(--bone); }
.dl-t em { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .08em; color: var(--ink-2); }
.dl-pips { display: flex; gap: 3px; height: 3px; }
.dl-pips u { display: block; width: 10px; height: 3px; background: #262626; }
.dl-pips u.on { background: #5A5754; }
.dl-t.now .dl-pips u.on, .dl-tk .dl-pips u.on { background: var(--bone); }
.dl-tools { flex: none; display: flex; align-items: center; gap: 14px; }
.dl-tools .b-timer { margin: 0; font-size: 16px; }
.dl-tools .b-timer i { font-size: 11px; }
.dl-help { font: 600 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--dim); padding: 12px 0; }
.dl-help:hover, .dl-help[aria-expanded="true"] { color: var(--bone); }
.dl-snd { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 36px; justify-content: center; color: var(--dim); }
.dl-snd svg { width: 18px; height: 18px; }
.dl-snd:not(.on) { color: #FFB59A; }
.dl-snd span { font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.dl-call { flex: none; font: 700 12px/1 var(--f-mono); letter-spacing: .1em; padding: 10px 14px; box-shadow: inset 0 0 0 1px #4A4A4A; }
.dl-call[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--bone); }
.dl-callp { flex: none; padding: 14px 48px; border-bottom: 1px solid var(--line); background: #0E0D12; }
.dl-callp .vn-call { max-width: 860px; }

/* the body: the opponent left, the decision right */
.dl-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 60fr) minmax(360px, 40fr); }
.dl-opp { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 400px) minmax(240px, 1fr); gap: clamp(24px, 3vw, 44px);
  padding: 28px 44px 56px 48px; border-right: 1px solid var(--line); box-sizing: border-box; overflow: hidden;
  background: radial-gradient(ellipse 420px 100px at 248px 78%, rgba(249, 244, 238, .07), rgba(10, 10, 10, 0) 70%); }
.dl-body.filing .dl-opp { display: block; background: none; overflow-y: auto; }
.dl-who { min-height: 0; display: flex; flex-direction: column; }
.dl-art { position: relative; display: block; width: 100%; flex: 1 1 auto; min-height: 160px; max-height: 560px; overflow: hidden; padding: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.dl-art:disabled { cursor: default; opacity: 1; }
.dl-art > .sav, .dl-art > .b-drone { position: absolute; left: -20%; top: 0; width: 140%; }
.dl-id { flex: none; padding-top: 10px; }
.dl-name { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dl-name b { font: italic 700 clamp(36px, 4vw, 56px)/.9 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }
.dl-name span, .dl-name em { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .14em; color: var(--dim); }
.dl-name em { color: var(--bone); }
.dl-hp { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-bar { position: relative; display: block; width: min(320px, 70%); height: 3px; background: #262626; }
.dl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bone); }
.dl-hp > b { font: 600 13px/1 var(--f-mono); }
.dl-ds { display: inline-flex; gap: 10px; padding-left: 2px; align-items: center; }
.dl-sends { margin: 14px 0 0; display: flex; align-items: center; gap: 12px; }
.dl-sends .dl-ds { gap: 9px; }
.dl-dsn { font: 500 11px/1 var(--f-mono); font-style: normal; letter-spacing: .06em; color: var(--dim); }
.dl-bend, .dl-ttech { margin: 12px 0 0; font: 400 13.5px/1.4 var(--f-text); color: var(--ink-2); max-width: 380px; }
.dl-bend b { font: 700 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--bone); margin-right: 8px; }
.dl-ttech { font: 600 11px/1.4 var(--f-mono); letter-spacing: .1em; color: var(--dim); }
.dl-id .vn-refl { margin: 12px 0 0; }
.dl-take.sm { display: none; }

/* evidence: the last round, his last sends, his reads, the File */
.dl-ev { min-width: 0; display: flex; flex-direction: column; padding-top: clamp(20px, 6vh, 64px); }
.dl-take { margin-top: 12px; }
.dl-take p { margin: 0; font: 600 19px/1.35 var(--f-disp); }
.dl-take p.b { color: var(--ink-2); }
.dl-take.caught p.b { color: var(--bone); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.dl-intro { margin: 12px 0 0; font: 600 19px/1.35 var(--f-disp); }
.dl-none { margin: 14px 0 0; font: 400 14px/1.4 var(--f-text); color: var(--dim); }
.dl-trail { display: grid; gap: 16px; text-align: left; padding: 24px 0 0; margin-top: 28px; border-top: 1px solid var(--line); justify-items: start; }
.dl-trail .dl-k.sm, .dl-fl.sm { display: none; }
.dl-trs { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dl-tr { display: inline-flex; align-items: center; gap: 10px; }
.dl-tr b { font: 700 20px/1 var(--f-disp); letter-spacing: .05em; color: var(--ink-2); }
.dl-tr.s-rush b { color: var(--rush); } .dl-tr.s-fake b { color: var(--fake); } .dl-tr.s-overload b { color: var(--bone); }
.dl-tr .dl-d { width: 12px; height: 12px; }
.dl-tr.s-save .dl-d.slot, .dl-tr.s-hidden .dl-d.slot { color: var(--ink-2); }
.dl-tr.a1 { opacity: .75; } .dl-tr.a2 { opacity: .5; }
.dl-reads { font: 400 14px/1.2 var(--f-text); color: var(--ink-2); display: flex; gap: 10px; align-items: baseline; }
.dl-reads i { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .12em; color: var(--dim); }
.dl-open { align-self: flex-start; margin-top: 30px; font: 700 12px/1 var(--f-mono); letter-spacing: .14em; padding: 10px 0; }
.dl-open:hover, .dl-trail:hover .dl-reads { color: var(--bone); }

/* the File (desktop: in the opponent's place; the decision stays usable) */
.dl-file { display: flex; flex-direction: column; min-height: 0; }
.dl-fh { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.dl-fart { position: relative; flex: none; width: 72px; height: 72px; overflow: hidden; }
.dl-fart > .sav, .dl-fart > .b-drone { position: absolute; width: 150%; left: -25%; top: -4%; }
.dl-fh > div { flex: 1; min-width: 0; }
.dl-fh .dl-name b { font-size: 34px; }
.dl-fsub { margin: 8px 0 0; font: 400 14px/1.3 var(--f-text); color: var(--ink-2); }
.dl-back { flex: none; font: 700 12px/1 var(--f-mono); letter-spacing: .12em; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--rail); }
.dl-seq { display: grid; grid-template-columns: 130px 1fr; row-gap: 10px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.dl-seq dt { font: 600 11px/1.6 var(--f-mono); letter-spacing: .12em; color: var(--dim); }
.dl-seq dd { margin: 0; font: 400 15px/1.4 var(--f-text); }
.dl-ftech p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; } .dl-ftech b { font: 600 12px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--bone); margin-right: 6px; }
.dl-rounds { list-style: none; margin: 0; padding: 0; }
.dl-rounds > li { display: grid; grid-template-columns: 130px minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--line); }
.dl-rn { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dl-rn b { font: 700 12px/1 var(--f-mono); letter-spacing: .1em; }
.dl-rn span { font: 600 14px/1 var(--f-disp); letter-spacing: .04em; color: var(--ink-2); }
.dl-rn em { font: 600 11px/1 var(--f-mono); font-style: normal; color: var(--dim); }
.dl-lanes { display: grid; gap: 8px; }
.dl-fl-l { display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px 118px; gap: 12px; align-items: baseline; }
.dl-fl-who { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; }
.dl-fl-l > span { font: 400 15px/1.3 var(--f-text); color: var(--dim); }
.dl-fl-l > span b { font-weight: 700; color: var(--bone); }
.dl-fl-l > span b.s-rush { color: var(--rush); } .dl-fl-l > span b.s-fake { color: var(--fake); }
.dl-fl-l > em { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .08em; }
.dl-rp.vn-rp { justify-self: start; font: 700 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink-2); padding: 8px 0; background: none; box-shadow: none; min-height: 32px; }
.dl-rp.vn-rp i { display: none; }
.dl-rp.vn-rp.on { color: var(--bone); }
.dl-note { margin: 0; padding-left: 96px; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }

/* the decision: task, you, 1 · send, 2 · expect, 3 · lock in */
.dl-dec { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 28px 48px 28px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }
.dl-tk { margin: 0; display: flex; align-items: center; gap: 14px; }
.dl-tk b { font: 700 34px/1 var(--f-disp); letter-spacing: .02em; }
.dl-ask { margin: 8px 0 0; font: 400 17px/1.35 var(--f-text); }
.dl-ask span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--dim); }
.dl-ask .b-ask { font-weight: 600; }
.dl-task .vn-new { margin: 10px 0 0; font: 600 13px/1.3 var(--f-disp); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-task .vn-demo, .dl-task .vn-demo.fresh { padding: 9px 14px; font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); background: transparent; box-shadow: inset 0 0 0 1px var(--bone); }
.dl-you { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dl-you > b { font: 600 12px/1 var(--f-mono); letter-spacing: .12em; width: 40px; }
.dl-you .dl-bar { width: 210px; }
.dl-you > em { font: 600 13px/1 var(--f-mono); font-style: normal; }
.dl-you .dl-ds { margin-left: auto; padding-right: 3px; }
.dl-dec .vn-coach { margin: 18px 0 0; font: 400 15.5px/1.45 var(--f-text); max-width: none; }
.dl-step { display: flex; gap: 16px; }
.dl-step:first-of-type { margin-top: 0; }
.dl-dec .dl-you + .dl-step, .dl-dec .vn-coach + .dl-step { margin-top: 22px; }
.dl-step.grow { flex: 1 1 auto; min-height: 12px; }
.dl-sp { width: 24px; flex: none; display: flex; flex-direction: column; align-items: center; }
.dl-sp > i { flex: 1; width: 1px; background: #2E2E2E; margin-top: 8px; }
.dl-step.grow .dl-sp > i { margin-top: 0; }
.dl-sp.end { justify-content: flex-start; }
.dl-sp.end > i { flex: none; height: 28px; margin-top: 0; }
.dl-mk { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box;
  font: 700 12px/1 var(--f-mono); color: var(--ink-2); box-shadow: inset 0 0 0 1px #5A5754; }
.dl-mk.done { background: var(--bone); color: #0A0A0A; box-shadow: none; }
.dl-mk.sm { display: none; }
.dl-q { flex: 1; min-width: 0; padding-bottom: 26px; }
.dl-ql { margin: 0; font: 700 12.5px/24px var(--f-mono); letter-spacing: .14em; }
.dl-rail { display: grid; margin-top: 10px; box-shadow: inset 0 0 0 1px var(--rail); }
.dl-rail.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-rail.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-o { position: relative; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px;
  box-shadow: inset 1px 0 0 var(--rail); transition: background .14s var(--ui-ease), box-shadow .14s var(--ui-ease); }
.dl-o:first-child { box-shadow: none; }
.dl-ol { display: inline-flex; align-items: center; gap: 10px; }
.dl-ol b { font: 600 18px/1 var(--f-disp); letter-spacing: .08em; color: var(--ink-2); }
.dl-ol .dl-d { width: 9px; height: 9px; color: var(--bone); }
.dl-om { font: 400 12.5px/1 var(--f-text); color: var(--dim); }
.dl-o em { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .06em; color: var(--dim); }
.dl-o:hover:not(:disabled) { background: rgba(249, 244, 238, .04); }
.dl-o.on b { color: var(--bone); font-weight: 700; }
.dl-o.sd-save.on { background: rgba(249, 244, 238, .10); box-shadow: inset 0 -2px 0 var(--bone); }
.dl-o.sd-rush.on, .dl-o.tn-speed.on { background: rgba(255, 90, 60, .14); box-shadow: inset 1px 0 0 var(--rail), inset 0 -2px 0 var(--rush); }
.dl-o.sd-fake.on, .dl-o.tn-decoy.on { background: rgba(158, 194, 222, .14); box-shadow: inset 1px 0 0 var(--rail), inset 0 -2px 0 var(--fake); }
.dl-o.tn-speed.on:first-child { box-shadow: inset 0 -2px 0 var(--rush); }
.dl-o.off { opacity: .35; }
.dl-o:disabled { cursor: default; }
.dl-rail.dim .dl-o { opacity: .25; }
.dl-alt { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.dl-or { width: 22px; flex: none; font: 500 11px/1 var(--f-mono); color: var(--dim); }
.dl-pill { flex: 1; min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-radius: 23px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px #4A4A4A; background-image: none; text-align: left; position: relative; }
.dl-pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed #4A4A4A; pointer-events: none; }
.dl-pill { box-shadow: none; }
.dl-pill b { flex: none; font: 700 12px/1 var(--f-mono); letter-spacing: .1em; }
.dl-pill span { flex: 1; min-width: 0; font: 400 14px/1.2 var(--f-text); color: var(--ink-2); }
.dl-pill svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dl-pill .dl-d { width: 9px; height: 9px; margin-left: 6px; }
.dl-pill .dl-d + .dl-d { margin-left: 0; }
.dl-pill.on { background: rgba(249, 244, 238, .06); }
.dl-pill.on::before { border: 1px solid var(--bone); }
.dl-pill.off { opacity: .35; }
.dl-q .vn-row.refl { margin-top: 12px; }
.dl-lockrow { flex: none; display: flex; gap: 16px; align-items: flex-start; }
.dl-lock { flex: 1; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 2px;
  background: var(--bone); color: #0A0A0A; transition: transform .12s var(--ui-ease), background .14s; }
.g-battle.duel .dl-lock { color: #0A0A0A; }
.dl-lock b { font: 700 18px/1 var(--f-disp); letter-spacing: .1em; }
.dl-lock span { font: 500 13.5px/1 var(--f-text); }
.dl-lock:active:not(:disabled) { transform: scale(.98); }
.dl-lock.wait, .dl-lock:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--rail); }
.g-battle.duel .dl-lock.wait, .g-battle.duel .dl-lock:disabled { color: var(--dim); }

/* locked: SIGNAL's words arrive after the commit */
.dl-locked { margin-top: 36px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.dl-big { margin: 0; font: italic 700 clamp(32px, 3.4vw, 44px)/1 var(--f-head); text-transform: uppercase; color: var(--bone); }
.dl-big.s-rush, .dl-big.t-speed { color: var(--rush); }
.dl-big.s-fake, .dl-big.t-decoy { color: var(--fake); }
.dl-wait { margin: 22px 0 0; display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-2); }
.dl-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--bone); animation: dl-pulse 1.6s ease-in-out infinite; }
@keyframes dl-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.dl-locked .b-wait-duel { margin-top: 18px; font: 400 14px/1.4 var(--f-text); color: var(--ink-2); }

/* leaving, the rules, the phone sheet */
.dl-quit { position: absolute; left: 36px; bottom: 6px; display: flex; gap: 6px; }
.dl-quit .g-quit { padding: 10px 12px; font-size: 12.5px; }
.dl-rules, .dl-sheet { position: absolute; inset: 0; z-index: 20; background: rgba(8, 7, 11, .94); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 32px 16px; box-sizing: border-box; }
.dl-rules-in { max-width: 640px; width: 100%; display: grid; gap: 16px; justify-items: start; }
.dl-sheet-in { width: 100%; max-width: 520px; display: grid; gap: 16px; }
.dl-set.full { flex-direction: column; align-items: stretch; gap: 0; }
.dl-set.full .dl-t { flex-direction: row; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dl-set.full .dl-tn { width: 70px; }
.dl-set.full .dl-t b { flex: 1; }
.dl-sheet-row { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* reduced motion: state changes still happen, nothing slides or pulses */
@media (prefers-reduced-motion: reduce) {
  .dl-o, .dl-lock { transition: none; }
  .dl-wait i { animation: none; opacity: 1; }
}

/* laptops with less height: the same layout, tighter */
@media (min-width: 761px) and (max-height: 820px) {
  .dl-band { height: 64px; }
  .dl-dec { padding-top: 20px; padding-bottom: 20px; }
  .dl-tk b { font-size: 28px; }
  .dl-o { min-height: 60px; gap: 4px; }
  .dl-lock { min-height: 64px; }
  .dl-q { padding-bottom: 18px; }
  .dl-you { margin-top: 14px; padding-bottom: 12px; }
  .dl-dec .dl-you + .dl-step { margin-top: 16px; }
}
/* a short laptop (1280×720 and the like, about 650 px for the game): the same screen, tighter */
@media (min-width: 761px) and (max-height: 740px) {
  .dl-band { height: 52px; }
  .dl-dec { padding-top: 14px; padding-bottom: 12px; }
  .dl-tk b { font-size: 24px; }
  .dl-ask { margin-top: 4px; font-size: 15px; } .dl-ask span { margin-top: 1px; font-size: 12.5px; }
  .dl-task .vn-new { margin-top: 6px; } .dl-task .vn-demo, .dl-task .vn-demo.fresh { padding: 7px 12px; }
  .dl-o { min-height: 48px; gap: 2px; }
  .dl-pill { min-height: 38px; }
  .dl-alt { margin-top: 8px; }
  .dl-lock { min-height: 54px; }
  .dl-q { padding-bottom: 12px; }
  .dl-you { margin-top: 10px; padding-bottom: 10px; }
  .dl-dec .dl-you + .dl-step { margin-top: 12px; }
  .dl-ev { padding-top: 20px; }
}
/* a narrower desktop: their last 3 sends stay on one line */
@media (min-width: 761px) and (max-width: 1366px) {
  .dl-trs { gap: 14px; flex-wrap: nowrap; } .dl-tr { gap: 7px; } .dl-tr b { font-size: 17px; }
}

/* the phone: the same order top to bottom; the opponent becomes a row, the File a sheet, nothing scrolls */
@media (max-width: 760px) {
  .dl-band { height: 44px; padding: 0 16px; gap: 10px; }
  .dl-round, .dl-set, .dl-band .dl-call { display: none; }
  .dl-round.sm { display: block; color: var(--dim); font-size: 11px; }
  /* the clock stays in the band on a phone (a live round is timed); How to play and sound move to the sheet */
  .dl-tools { gap: 0; } .dl-tools .dl-help, .dl-tools .dl-snd { display: none; }
  .dl-tools .b-timer { font-size: 14px; } .dl-tools .b-timer.long { font-size: 12.5px; }
  .dl-now-sm { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
  .dl-now-sm b { font: 700 17px/1 var(--f-disp); letter-spacing: .03em; padding-bottom: 3px; box-shadow: inset 0 -2px 0 var(--bone); }
  .dl-now-sm span { font: 600 12.5px/1 var(--f-disp); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .dl-more { display: flex; align-items: center; flex: none; min-height: 44px; font: 600 11px/1 var(--f-mono); color: var(--dim); padding: 0 0 0 8px; }
  .dl-callp { padding: 10px 16px; }
  .dl-body { display: flex; flex-direction: column; }
  .dl-opp { display: block; padding: 0; border-right: 0; background: none; overflow: visible; flex: none; }
  .dl-who { flex-direction: row; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
  .dl-art { flex: none; width: 76px; height: 86px; min-height: 0; -webkit-mask-image: none; mask-image: none; }
  .dl-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-content: start; }
  .dl-id > .dl-name, .dl-id > .dl-take, .dl-id > .dl-bend, .dl-id > .vn-refl { grid-column: 1 / -1; }
  .dl-id > .dl-hp { grid-column: 1; }
  .dl-id > .dl-sends { grid-column: 2; grid-row: 2; margin: 8px 0 0; align-self: center; }
  .dl-art > .sav, .dl-art > .b-drone { width: 130%; left: -15%; top: -3%; }
  .dl-id { flex: 1; min-width: 0; padding-top: 0; }
  .dl-name { gap: 8px; }
  .dl-name b { font-size: 24px; }
  .dl-name span, .dl-name em { font-size: 11px; letter-spacing: .1em; }
  .dl-hp { margin-top: 8px; gap: 8px; flex-wrap: nowrap; }
  .dl-bar { flex: 1; width: auto; }
  .dl-sends { gap: 7px; }
  .dl-sends .dl-ds { gap: 7px; } .dl-sends .dl-d { width: 8px; height: 8px; }
  .dl-dsn { display: none; }
  .dl-bend { font-size: 12.5px; margin-top: 6px; }
  .dl-ttech { grid-column: 1 / -1; margin: 5px 0 0; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dl-take.sm { display: block; margin-top: 7px; }
  .dl-take.sm p { font-size: 13px; line-height: 1.22; letter-spacing: -.005em; }
  .dl-take.sm.intro p { color: var(--ink-2); font-size: 13px; }
  .dl-take.caught.sm p.b { text-decoration: none; }
  .dl-ev { padding: 0; }
  .dl-ev > .dl-k, .dl-ev > .dl-take, .dl-ev > .dl-intro, .dl-ev > .dl-none, .dl-open, .dl-trail .dl-k:not(.sm), .dl-reads { display: none; }
  .dl-trail { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0 16px; min-height: 36px; border-top: 0; border-bottom: 1px solid var(--line); box-sizing: border-box; }
  .dl-trail .dl-k.sm { display: block; font-size: 11px; letter-spacing: .1em; }
  .dl-trs { gap: 12px; flex-wrap: nowrap; }
  .dl-tr { gap: 6px; } .dl-tr b { font-size: 13px; letter-spacing: .04em; } .dl-tr .dl-d { width: 8px; height: 8px; }
  .dl-fl.sm { display: block; margin-left: auto; font: 700 11px/1 var(--f-mono); letter-spacing: .08em; }
  .dl-ev:has(.dl-intro):not(:has(.dl-trail)) { display: none; }
  .dl-dec { flex: 1 1 auto; padding: 7px 16px 8px; overflow-y: auto; }
  .dl-tk { display: none; }
  .dl-ask { margin: 0; font-size: 14px; line-height: 1.25; }
  .dl-ask span { display: inline; margin: 0 0 0 4px; font-size: 13px; }
  .dl-task { display: flex; align-items: center; gap: 10px; min-height: 20px; }
  .dl-task .dl-ask { flex: 1; min-width: 0; }
  .dl-task .vn-new { margin: 0; flex: none; font-size: 12.5px; }
  .dl-task .vn-new > b { display: none; }
  .dl-task:has(.vn-new) .dl-ask span { display: none; }
  .dl-task .vn-demo, .dl-task .vn-demo.fresh { padding: 0 12px; min-height: 32px; }
  .dl-you { margin-top: 7px; padding-bottom: 0; border-bottom: 0; gap: 10px; }
  .dl-you > b { font-size: 11px; width: auto; }
  .dl-you .dl-bar { flex: 1; width: auto; }
  .dl-you > em { font-size: 11px; }
  .dl-you .dl-ds { gap: 8px; } .dl-you .dl-ds .dl-d { width: 8px; height: 8px; }
  .dl-dec .vn-coach { margin-top: 10px; font-size: 14px; }
  .dl-dec .dl-you + .dl-step, .dl-dec .vn-coach + .dl-step { margin-top: 9px; }
  .dl-step { gap: 0; }
  .dl-sp, .dl-step.grow { display: none; }
  .dl-q { padding-bottom: 8px; }
  .dl-ql { display: flex; align-items: center; gap: 10px; font-size: 11.5px; line-height: 20px; letter-spacing: .12em; }
  .dl-lockrow { gap: 0; }
  .dl-mk.sm { display: inline-flex; width: 20px; height: 20px; font-size: 11px; }
  .dl-lockrow > .dl-mk.sm { align-self: center; margin-right: 10px; }
  .dl-rail { margin-top: 5px; }
  .dl-o { min-height: 44px; flex-direction: row; gap: 8px; padding: 6px; }
  .dl-om, .dl-o em { display: none; }
  .dl-ol b { font-size: 14px; letter-spacing: .06em; }
  .dl-alt { margin-top: 5px; gap: 8px; }
  .dl-pill { min-height: 36px; padding: 0 14px; gap: 9px; }
  .dl-pill b { font-size: 11px; letter-spacing: .08em; }
  .dl-pill span { font-size: 13px; }
  .dl-pill svg { width: 16px; height: 16px; }
  .dl-lockrow { margin-top: auto; padding-top: 4px; }
  .dl-lockrow .dl-sp { display: none; }
  .dl-lock { min-height: 48px; gap: 2px; }
  .dl-lock b { font-size: 15px; }
  .dl-lock span { font-size: 12.5px; }
  .dl-locked { margin-top: 18px; }
  .dl-quit { display: none; }
  .dl-body.filing .dl-opp { position: absolute; inset: 0; z-index: 15; background: #0A0A0A; padding: 0 16px; overflow-y: auto; }
  .dl-fh { gap: 12px; padding: 12px 0; }
  .dl-fart { width: 52px; height: 52px; }
  .dl-fh .dl-name b { font-size: 24px; }
  .dl-fsub { display: none; }
  .dl-back { padding: 12px; font-size: 11px; letter-spacing: .08em; }
  .dl-seq { grid-template-columns: 96px 1fr; row-gap: 6px; padding: 12px 0; }
  .dl-seq dd { font-size: 14px; }
  .dl-rounds > li { display: block; padding: 10px 0; }
  .dl-rn { flex-direction: row; align-items: baseline; gap: 10px; }
  .dl-rn span { font-size: 13px; }
  .dl-lanes { gap: 4px; margin-top: 6px; }
  .dl-fl-l { grid-template-columns: 62px minmax(0, 1fr) auto auto; gap: 8px; }
  .dl-fl-l > span { font-size: 13.5px; }
  .dl-rp.vn-rp { padding: 6px 4px 6px 8px; min-height: 32px; min-width: 32px; font-size: 12px; }
  .dl-rp.vn-rp span { display: none; }
  .dl-note { padding-left: 0; font-size: 13px; line-height: 1.35; }
}
/* r28 · inside the Duel the only colours are Rush and Fake: the pitch word and Tide's coach line go cream */
.dl-ask .b-ask { background: none; color: var(--bone); padding: 0; box-shadow: inset 0 -1.5px 0 var(--bone); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dl-ask .b-ask svg { fill: var(--bone); }
.g-battle.duel .vn-coach { background: none; border: 0; box-shadow: none; padding: 0; color: var(--bone); }
.g-battle.duel .vn-coach::before { content: 'TIDE'; display: inline-block; margin-right: 12px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--dim); }

/* r28 · the stage: the sound check sits centred when it stands alone; the round counter reads ROUND 1/7 */
.b-arm { margin-inline: auto; }
.b-arm:has(> .b-arm-go:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 560px; justify-items: center; }
.b-rlab { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .18em; color: var(--dim); }
.b-round > b { display: flex; align-items: baseline; gap: 2px; font: italic 700 34px/1 var(--f-head); letter-spacing: .01em; margin-top: 2px; }
.b-round > b small { font: 600 15px/1 var(--f-mono); font-style: normal; color: var(--dim); letter-spacing: .04em; }
.b-rpips { display: flex; gap: 4px; margin-top: 6px; }
.b-rpips u { width: 10px; height: 3px; background: rgba(249, 244, 238, .18); }
.b-rpips u.done { background: rgba(249, 244, 238, .55); }
.b-rpips u.now { background: var(--bone, #F9F4EE); box-shadow: 0 0 0 1px var(--bone, #F9F4EE); }
@media (max-width: 760px) { .b-round > b { font-size: 26px; } .b-round > b small { font-size: 12.5px; } .b-rpips { gap: 3px; } .b-rpips u { width: 5px; } }

/* r28 · a piece's mastery on its technique card */
.vk-mast { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 6px; }
.vk-mast p { margin: 0; display: flex; justify-content: space-between; gap: 8px; font: 500 12.5px/1.3 var(--f-text); color: var(--ink-2); }
.vk-mast p b { font-weight: 600; color: var(--ink); }
.vk-mast p span { font: 600 11px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.vk-mbar { display: block; height: 4px; background: rgba(255,255,255,.1); }
.vk-mbar i { display: block; height: 100%; background: var(--ink-2); }
.vk-mast.fin-2 .vk-mbar i { background: #B0794B; } .vk-mast.fin-3 .vk-mbar i { background: #C9CDD2; } .vk-mast.fin-4 .vk-mbar i { background: #D9B45A; }
.vk-mast.fin-5 .vk-mbar i { background: #9FD8EA; } .vk-mast.fin-6 .vk-mbar i { background: linear-gradient(90deg, #F2A1E0, #9FD8EA, #D9F27A); }
.vk-mast .vk-mnext { font-size: 12px; color: var(--dim); display: block; }

/* r28 · the crystal Signal Pack: the art carries its own colour; the glow is white light (gold on a Pack+) */
.crate.xtal .c-top { fill: #D4D4DA; } .crate.xtal .c-seam { stroke: #fff; stroke-width: 1.8; } .crate.xtal.plus .c-seam { stroke: #F4D58A; }
.rv-crate .crate.xtal { width: min(340px, 44vh, 78vw); filter: drop-shadow(0 0 26px rgba(255, 255, 255, .28)) drop-shadow(0 22px 28px rgba(0, 0, 0, .7)); }
.rv.plus .rv-crate .crate.xtal { filter: drop-shadow(0 0 30px rgba(244, 213, 138, .4)) drop-shadow(0 22px 28px rgba(0, 0, 0, .7)); }
.rv-crate:hover .crate.xtal { filter: drop-shadow(0 0 40px rgba(255, 255, 255, .45)) drop-shadow(0 22px 28px rgba(0, 0, 0, .7)); }
.rv-crate.cracking .crate.xtal .c-seam { stroke-width: 2.6; }
.w-crate .crate.xtal { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .45)) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.w-crate:hover .crate.xtal, .w-crate:focus-visible .crate.xtal { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .7)) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.rv-crate span { font: 600 14px/1 var(--f-disp); letter-spacing: .18em; color: var(--ink); }
.rv-odds > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px; max-width: 720px; padding: 0; }
.rv-odds .rv-ok { font: 600 15px/1 var(--f-disp); color: var(--ink); margin-right: 2px; }
.rv-odds .rv-ok::after { content: ' –'; color: var(--dim); }
.rv-odds i { font-size: 12.5px; } .rv-odds b { font-size: 13px; }
.rv-odds p { text-align: center; font-size: 13px; color: var(--ink-2); }
@media (max-width: 760px) { .rv-crate .crate.xtal { width: min(260px, 32vh, 70vw); } .rv-odds p { font-size: 12px; } }

/* r28 · a piece just won, in the wardrobe: a glow that breathes, and NEW until you touch it */
.lo-try-i.new { position: relative; box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 18px 2px rgba(255, 255, 255, .45); animation: lo-new 1.6s ease-in-out infinite; }
.lo-new { position: absolute; bottom: 3px; right: 3px; padding: 3px 6px; font: 700 11px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; color: #0B0A0E; background: #FFFFFF; }
@keyframes lo-new { 50% { box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 30px 6px rgba(255, 255, 255, .7); } }
@media (prefers-reduced-motion: reduce) { .lo-try-i.new { animation: none; } }

/* r28 · the opponent's line after a round: a speech box over the evidence */
.dl-quip { position: relative; margin: 0 0 22px; padding: 12px 16px; max-width: 360px; width: fit-content; box-sizing: border-box; background: #F9F4EE; color: #0A0A0A; display: grid; gap: 4px; }
.dl-quip::after { content: ''; position: absolute; left: -10px; top: 18px; border: 6px solid transparent; border-right: 6px solid #F9F4EE; border-width: 6px 10px 6px 0; }
.dl-quip b { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; color: #5A5650; }
.dl-quip span { font: italic 600 17px/1.3 var(--f-disp); }
.dl-quip.won span { color: #0A0A0A; } .dl-quip.lost span { color: #2A2A2A; }
@media (min-width: 761px) and (max-height: 740px) { .dl-quip { margin-bottom: 14px; padding: 9px 12px; } .dl-quip span { font-size: 15px; } }
@media (max-width: 760px) { .dl-quip { display: none; } }

/* r28 · the reveal: the fight gets the room, the words get out of the way (short lines, smaller, tight) */
.b-say.vn { gap: 2px; max-width: 640px; }
.b-say.vn p { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.b-say.vn p.good, .b-say.vn p.bad { color: var(--ink); }
.b-say.vn p i { font: 600 12px/1 var(--f-mono); font-style: normal; color: var(--dim); margin-left: 4px; }
.sc.g.fit .g-battle.seq .b-ctl { min-height: 96px; padding-top: 8px; gap: 6px; }
.g-battle.seq .b-xl { padding: 6px 16px; gap: 4px; }
.g-battle.seq .b-xl b { font-size: 20px; }
@media (max-width: 560px) { .b-say.vn p { font-size: 13.5px; } }

/* r28.1 · the pack is the supplied art; a Pack+ is the same cube in gold */
.crate.pk { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.crate.pk.plus { filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.04); }
.rv-crate .crate.pk { width: min(380px, 46vh, 82vw); filter: none; }
.rv-crate .crate.pk.plus, .rv.plus .rv-crate .crate.pk { filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.04); }
.rv-crate:hover .crate.pk:not(.plus) { filter: brightness(1.08); }
.w-crate .crate.pk { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.rv-card.shut .rv-back .crate.pk { width: 70%; margin: auto; opacity: .85; }
@media (max-width: 760px) { .rv-crate .crate.pk { width: min(280px, 34vh, 72vw); } }
/* r28.1 · a character on the map never ends on a hard line: the top fades too (a staff, a tall helmet) */
.w-fig .sav { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), radial-gradient(ellipse 60% 66% at 50% 46%, #000 64%, transparent 100%), linear-gradient(to top, transparent 0, transparent 8%, rgba(0, 0, 0, .45) 15%, #000 28%), linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 8%, #000 20%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), radial-gradient(ellipse 60% 66% at 50% 46%, #000 64%, transparent 100%), linear-gradient(to top, transparent 0, transparent 8%, rgba(0, 0, 0, .45) 15%, #000 28%), linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 8%, #000 20%); mask-composite: intersect; }
.dl-art > .sav, .dl-fart .sav { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }

/* r28.1 · the control deck: the bar under the fight stays put through listen, answer and reveal, and reads as a
   heads-up display you look through: a lit edge along the stage, a fine scan texture, corner ticks at the deck's ends */
.g-battle:not(.duel) { background:
  repeating-linear-gradient(to bottom, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
  linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 48px 100%,
  radial-gradient(80% 60% at 50% 100%, rgba(255, 255, 255, .045), transparent 70%),
  #0A090D; }
.g-battle:not(.duel) > .b-stage { box-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(255, 255, 255, .12); }
.g-battle:not(.duel) > .b-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .5) 80%, transparent); }
.g-battle:not(.duel) > .b-ctl { position: relative; }
.g-battle:not(.duel) > .b-ctl::before, .g-battle:not(.duel) > .b-ctl::after { content: ''; position: absolute; top: 10px; width: 14px; height: 14px; pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .35); }
.g-battle:not(.duel) > .b-ctl::before { left: 8px; border-left: 1px solid rgba(255, 255, 255, .35); }
.g-battle:not(.duel) > .b-ctl::after { right: 8px; border-right: 1px solid rgba(255, 255, 255, .35); }