/* ============================================================
   WR THEME — Arena skin
   Scoped under html[data-wr="on"]; classic look untouched when off.
   Engine-owned inline styles (hp-fill width/background, slot
   box-shadow for Fury/Last Stand, mana-fill) are never contested —
   we use outline / filter / pseudo-elements instead (recon notes).
   Discord Activity CSP is same-origin only, so the display font is
   self-hosted below.
   ============================================================ */

@font-face {
  font-family: 'Cinzel Decorative WR';
  src: url('/assets/wr/fonts/CinzelDecorative-Regular.ttf') format('truetype');
  font-display: swap;
}

/* Toggle placement: clear music.js's #music-mute-btn (bottom-right) */
#wr-toggle { right: 64px; }

/* ---------- token overrides ----------
   Typography and glow strength only. The palette tokens are left alone
   on purpose: the arena is not being recoloured, it is being lit. */
html[data-wr="on"] {
  --font-display: 'Cinzel Decorative WR', Georgia, serif;
  --gold-glow: rgba(200, 170, 110, 0.45);
}
/* Glow and depth only — the badge keeps its stock ink and border.
   (Colour changes on arena chrome are deliberately out of scope; the
   arena earns its upgrade from the stage behind it and from motion.) */
html[data-wr="on"] .turn-badge {
  text-shadow: 0 0 12px rgba(200, 170, 110, 0.6);
  box-shadow: var(--wr-glow-gold-soft), inset 0 0 10px rgba(1, 10, 19, 0.8);
}

/* ---------- the stage, seen through the board ----------
   wr-stage.js inserts #wr-stage as body's first child at z-index 0. The
   arena's own chrome is static, and static content paints BELOW a
   positioned z-index:0 sibling — so the viewer has to be lifted into
   its own layer or the stage would cover the fight. */
html[data-wr="on"] .battle-viewer { position: relative; z-index: 1; }

/* The board's stock fill is opaque, which would wall the stage off at
   exactly the place it matters most. Reduced to a darkening wash: the
   plate, the fog and the gate now read through the arena floor, and the
   frame is what separates board from room. */
html[data-wr="on"] .arena-wrapper {
  background:
    radial-gradient(ellipse at center, transparent 26%, rgba(1, 10, 19, 0.62) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(10, 200, 185, 0.05) 0%, transparent 52%),
    linear-gradient(180deg, rgba(8, 21, 32, 0.58), rgba(10, 26, 42, 0.42) 50%, rgba(7, 18, 24, 0.66));
  box-shadow: 0 0 0 1px rgba(10, 200, 185, 0.12), 0 18px 60px rgba(0, 0, 0, 0.7),
              inset 0 0 80px rgba(1, 10, 19, 0.55);
}

/* The stage horizon already breathes; two breathing glows on one screen
   beat against each other. Leave the stock pulse in, just quieter. */
/* The stock bg-breathe swells a teal wash at the centre of the board every
   6 seconds. Against the old flat floor it was barely there; over the lit
   stage it is a throb right where the eye is trying to read the fight.
   Stopped, not dimmed — the previous `opacity: 0.4` here did nothing at
   all, because a running animation's keyframes set opacity every frame and
   override a plain declaration. Kill the animation or the value is inert. */
html[data-wr="on"] .arena-bg-pulse { animation: none; opacity: 0.3; }

/* Sit the gate behind the board rather than the viewport: the action
   panel occupies the lower third, so screen-centre is too low. */
html[data-wr="on"] #wr-stage .wr-gate {
  top: 44%;
  width: min(86vh, 980px);
  height: min(86vh, 980px);
}

/* ---------- no aqua bullseye on the battle board ----------
   The gate is champ-select furniture: a lit core framed by shutters, which
   works when it is framing the pod you are picking. Behind a FIGHT it draws a
   ring of aqua circles dead centre — a 3px stroke at the core rim, a 36px soft
   halo, a 1.5px inner ring and a rotating dashed one — all concentric on the
   medallion, right where the HP bars are read. It reads as a targeting reticle
   the game never explains, and the rotation makes it look like it is pulsing.

   Only the CIRCLES go. The shutters and the gold rails stay: they frame the
   stage from the edges and never cross the board. This file is loaded by the
   two battle pages only (arena/index.html, demo/arena.html), so champ select
   keeps its gate whole. */
html[data-wr="on"] #wr-stage .wr-gate .wr-core,
html[data-wr="on"] #wr-stage .wr-gate .wr-flare,
html[data-wr="on"] #wr-stage .wr-gate .wr-rail-in,
html[data-wr="on"] #wr-stage .wr-gate .wr-backing circle { display: none; }

/* ---------- card slots: aqua energy states (background, not box-shadow —
   the engine writes inline box-shadow for Fury/Last Stand) ---------- */
/* THE SLOT FRAME (2026-09-01, second pass).
   It used to be a bare square-cornered hairline OUTLINE with outline-offset
   bouncing 2->4px on a 1.1s clock: a hard box that read as a debug rect. Same
   box, same width -- it still frames the whole card, portrait through bars --
   but drawn as a neon line: rounded corners, a soft standing glow, and two
   bright glints that travel the frame on a slow rotation, which is where all
   the motion lives now. The portrait rings are untouched.

   HOW IT IS DRAWN: one ::before (::after is the stock relic-lit ring). The
   conic-gradient rides a registered angle so it can actually be animated, and
   the border-box/content-box mask XOR punches the middle out, leaving only the
   2px rim painted. The glow is a drop-shadow, NOT a box-shadow: a box-shadow
   is clipped away by that mask, while a filter runs after it and so traces the
   rim's real shape -- which is what makes it read as neon rather than as a
   lit rectangle. The flat second background layer is the fallback rim for any
   engine without @property: no travel, but never a missing frame. */
@property --wr-slot-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
html[data-wr="on"] .card-slot.active { --wr-slot-c: 10, 200, 185; }
html[data-wr="on"] .card-slot.targeted { --wr-slot-c: 232, 67, 63; }
html[data-wr="on"] .card-slot.active::before,
html[data-wr="on"] .card-slot.targeted::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;                 /* .card-slot is a stacking context (pos + z) */
  pointer-events: none;
  border-radius: 12px;
  padding: 2px;                /* the rim's width, cut by the mask below */
  background:
    /* the hot core of each glint: where a neon tube goes white */
    conic-gradient(from var(--wr-slot-a),
      rgba(255, 255, 255, 0)    0deg,
      rgba(255, 255, 255, 0.8)  15deg,
      rgba(255, 255, 255, 0)    30deg,
      rgba(255, 255, 255, 0)   180deg,
      rgba(255, 255, 255, 0.8) 195deg,
      rgba(255, 255, 255, 0)   210deg,
      rgba(255, 255, 255, 0)   360deg),
    /* the glints themselves, two of them, half a lap apart */
    conic-gradient(from var(--wr-slot-a),
      rgba(var(--wr-slot-c), 0)    0deg,
      rgba(var(--wr-slot-c), 1)   15deg,
      rgba(var(--wr-slot-c), 0)   50deg,
      rgba(var(--wr-slot-c), 0)  180deg,
      rgba(var(--wr-slot-c), 1)  195deg,
      rgba(var(--wr-slot-c), 0)  230deg,
      rgba(var(--wr-slot-c), 0)  360deg),
    /* the tube at rest */
    linear-gradient(rgba(var(--wr-slot-c), 0.4) 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 2px rgba(var(--wr-slot-c), 0.9))
    drop-shadow(0 0 6px rgba(var(--wr-slot-c), 0.6))
    drop-shadow(0 0 16px rgba(var(--wr-slot-c), 0.3));
  animation: wr-slot-travel 5s linear infinite;
}
/* Slow enough to be a drift rather than a chase; linear so the glints never
   stall in a corner. */
@keyframes wr-slot-travel { to { --wr-slot-a: 360deg; } }

/* valid-target: the stock sheet already outlines .portrait-container with
   ally-green / enemy-red semantics — do not add a second ring */
html[data-wr="on"] .portrait-container {
  transition: border-color var(--wr-med) var(--wr-ease), filter var(--wr-med) var(--wr-ease);
}
html[data-wr="on"] .card-slot.active .portrait-container { border-color: rgba(10, 200, 185, 0.6); }
/* dead look: stock dims the whole slot already — no second filter */

/* WR's animation on .card-slot.active/.targeted outranks the stock
   .card-slot.hit shake; re-declare it last at WR scope so damage
   feedback survives on active/targeted slots */
html[data-wr="on"] .card-slot.hit { animation: card-shake 0.28s ease-out; }

/* ---------- HP/mana dressing (containers only; fills are inline-styled) ---------- */
html[data-wr="on"] .hp-bar {
  box-shadow: inset 0 0 6px rgba(1, 10, 19, 0.9), 0 0 8px rgba(1, 10, 19, 0.6);
  position: relative;
}
html[data-wr="on"] .hp-bar::after {
  content: ''; position: absolute; inset: 0 0 55% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
}
/* ---------- action panel ----------
   No repaint: the panel keeps its stock fill and border, and gains only
   the shadow that seats it above the stage. */
html[data-wr="on"] #action-panel {
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(10, 200, 185, 0.18);
}

/* Buttons keep their palette at rest. Everything below fires on a state
   change — a lift, a ring, a glow — so the motion reads as feedback
   rather than as a reskin. */
html[data-wr="on"] .ability-btn {
  transition: box-shadow var(--wr-med) var(--wr-ease),
              transform var(--wr-fast) var(--wr-ease-out),
              filter var(--wr-fast) var(--wr-ease);
}
html[data-wr="on"] .ability-btn:not(.disabled):hover {
  box-shadow: var(--wr-glow-aqua-soft);
  transform: translateY(-2px);
  filter: brightness(1.12);
}
html[data-wr="on"] .ability-btn:not(.disabled):active { transform: translateY(0) scale(0.97); }
html[data-wr="on"] .ability-btn.selected {
  box-shadow: 0 0 0 1px var(--wr-aqua), var(--wr-glow-aqua);
  animation: wr-btn-selected 2.6s ease-in-out infinite;
}
@keyframes wr-btn-selected {
  0%, 100% { box-shadow: 0 0 0 1px var(--wr-aqua), var(--wr-glow-aqua-soft); }
  50%      { box-shadow: 0 0 0 1px var(--wr-ice), var(--wr-glow-aqua); }
}

/* The confirm button is the one the eye should be pulled to. Still no
   repaint — an outline sweep and a slow breathe do the work. */
html[data-wr="on"] #confirm-action-btn.active {
  box-shadow: var(--wr-glow-gold-soft);
  animation: wr-confirm-ready 2.2s ease-in-out infinite;
}
@keyframes wr-confirm-ready {
  0%, 100% { outline: 1px solid rgba(200, 170, 110, 0.35); outline-offset: 2px;
             box-shadow: var(--wr-glow-gold-soft); }
  50%      { outline: 1px solid rgba(240, 230, 210, 0.85); outline-offset: 4px;
             box-shadow: var(--wr-glow-gold); }
}

/* ---------- panels: log, right rail ----------
   Depth only, so they read as plates floating over the stage. */
html[data-wr="on"] .log-area,
html[data-wr="on"] #arena-right-rail {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(200, 170, 110, 0.08);
}
html[data-wr="on"] .log-tab.active { box-shadow: inset 0 -2px 0 var(--wr-aqua); }

/* ---------- end screen ---------- */
html[data-wr="on"] #end-screen .end-screen-card {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
  animation: wr-end-rise 620ms var(--wr-ease-out) both;
}
@keyframes wr-end-rise {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
html[data-wr="on"] #end-screen-title.victory {
  color: var(--wr-gold-1);
  text-shadow: 0 0 30px rgba(200, 170, 110, 0.7), 0 0 80px rgba(10, 200, 185, 0.35);
}
html[data-wr="on"] #end-screen-title.defeat {
  color: #b45a60;
  text-shadow: 0 0 26px rgba(232, 67, 63, 0.5);
}

/* ---------- combat reaction classes (added by wr-arena.js) ----------
   Recoil/hesitate live on .portrait-container — transform-free in the
   stock sheet, so no collision with slot hover/involved transforms. */
html[data-wr="on"] .wr-hesitate { animation: wr-hesitate 560ms var(--wr-ease); }
@keyframes wr-hesitate {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(3px); }
  38%  { transform: translateX(-2px) rotate(-0.6deg); }
  55%  { transform: translateX(-2px) rotate(-0.6deg); filter: saturate(0.7); }
  75%  { transform: translateX(1px) rotate(0.3deg); }
  100% { transform: translateX(0); }
}
html[data-wr="on"] .wr-riddled {
  animation: wr-riddled 2.2s ease-in-out infinite;
}
@keyframes wr-riddled {
  0%, 100% { outline: 1px solid rgba(112, 80, 176, 0.4); outline-offset: 2px; }
  50%      { outline: 1px solid rgba(160, 120, 230, 0.8); outline-offset: 3px; }
}

/* ============================================================
   SPRING — a committed action being taken away from the player.
   Sphinx's confusion and Odysseus' trap both end the same way: the
   blow lands on somebody nobody chose. Stock, that is one line of
   combat log. Here it is a hold: the board stops, the rule names
   itself, a mark lands on EVERY candidate, they turn together, and
   then all but one are gone in a single frame.

   Nothing travels between slots on purpose — a mark flying target to
   target was jagged and hard to watch. The suspense is "any of us",
   carried by six rings turning in phase, and the cut is the answer.

   --wr-spring is set inline per kind (gold trap / violet riddle).
   ============================================================ */
/* THE SPRING RUNS IN BOTH LOOKS. Everything from here to the end of the
   announcement is unscoped on purpose: a blow landing on somebody nobody
   aimed at is not skin, and Classic had no sequence for it at all. The
   theme still owns bars, buttons and background; it does not own this.
   None of these classes exist outside a running spring, so Classic gains
   nothing it did not ask for — with ONE exception, the transition below,
   which is scoped to the halt because Classic filters .card-slot for dead
   / uninvolved / sealed and a blanket transition would make every one of
   those fade instead of snap. wr-halt-out is the halt's own echo, held
   for the length of the fade back. */
#arena-container.wr-halt .card-slot,
#arena-container.wr-halt-out .card-slot { transition: filter 380ms var(--wr-ease-out); }
html[data-wr="on"] #arena-container .card-slot { transition: filter 380ms var(--wr-ease-out); }
#arena-container.wr-halt .card-slot:not(.wr-spring-lit) {
  filter: saturate(0.18) brightness(0.52);
}

.wr-marks {
  position: fixed; inset: 0; z-index: 2147482400; pointer-events: none;
}
.wr-mark {
  position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  opacity: 0; transform: scale(0.55);
  transition: opacity 240ms var(--wr-ease-out), transform 340ms var(--wr-ease-out);
}
.wr-mark.in { opacity: 1; transform: scale(1); }
.wr-mark .wr-mk-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wr-spring, var(--wr-gold-2));
  box-shadow: 0 0 20px var(--wr-spring-dim, rgba(200,170,110,.25)),
        inset 0 0 14px var(--wr-spring-dim, rgba(200,170,110,.25));
}
/* a bare circle spinning shows nothing — the dashes and ticks are what turn */
.wr-mark .wr-mk-spin { position: absolute; inset: 0; animation: wr-mk-spin 3.6s linear infinite; }
.wr-mark .wr-mk-dash {
  position: absolute; inset: 13px; border-radius: 50%;
  border: 2px dashed var(--wr-spring, var(--wr-gold-2)); opacity: .75;
}
.wr-mark i {
  position: absolute; left: 50%; top: -8px; width: 2px; height: 15px; margin-left: -1px;
  background: var(--wr-spring, var(--wr-gold-2));
}
.wr-mark i:nth-child(3) { top: auto; bottom: -8px; }
.wr-mark i:nth-child(4) { left: -8px; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 0; }
.wr-mark i:nth-child(5) { left: auto; right: -8px; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 0; }
@keyframes wr-mk-spin { to { transform: rotate(360deg); } }
/* the wind-up: they all speed up together just before the cut */
.wr-mark.fast .wr-mk-spin { animation-duration: .55s; }
/* everyone not chosen — gone together, in one beat */
.wr-mark.gone {
  opacity: 0; transform: scale(1.3);
  transition: opacity 130ms ease-in, transform 130ms ease-in;
}
/* the one that stays */
.wr-mark.lock { animation: wr-mk-lock 320ms var(--wr-ease-slam); }
.wr-mark.lock .wr-mk-spin { animation: none; }
@keyframes wr-mk-lock { 0% { transform: scale(1.28); } 55% { transform: scale(0.92); } 100% { transform: scale(1); } }
.wr-mark .wr-mk-lockring {
  position: absolute; inset: -16px; border-radius: 50%;
  border: 2px solid var(--wr-spring, var(--wr-gold-2)); opacity: 0;
}
.wr-mark.lock .wr-mk-lockring { animation: wr-mk-lockring 460ms var(--wr-ease-out); }
@keyframes wr-mk-lockring {
  0%   { transform: scale(2.5); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1);   opacity: 0; }
}

/* the announcement — same shape as the arena's own _showTurnAnnounce
   (engine.js), so a spring reads as house furniture, not a new widget */
/* Anchored to the bottom of the board, NOT centred on it. The 3v3 layout is
   two columns of three — there is no empty middle band, and a title across
   the centre covers the two champions the player is trying to read marks on.
   The strip under the last row is the only clear ground, and bottom-anchoring
   (rather than a top %) keeps it clear whatever the block wraps to. */
/* Two positions, one element. It opens ACROSS the board — big enough to own
   the middle row, over a dark scrim so it is read rather than glimpsed — and
   once the beam starts it drops out of the way to the bottom and shrinks,
   because by then the board is the thing worth looking at. Announcements that
   never move are either in the way or too small to matter; this is both, in
   the right order. */
.wr-spring-say {
  position: absolute; left: 50%; top: 46%; z-index: 42; pointer-events: none;
  text-align: center; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) scale(0.84);
  transition: opacity .18s ease-out,
              transform .26s cubic-bezier(.2, 1.5, .4, 1),
              top .55s var(--wr-ease-out);
}
.wr-spring-say.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* the scrim — sized to swallow the middle of the board, gone once it moves */
.wr-spring-say::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: -1;
  width: 190vw; height: 300px; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(1, 10, 19, .93) 0%, rgba(1, 10, 19, .82) 38%, rgba(1, 10, 19, 0) 72%);
  transition: opacity .45s ease;
}
.wr-spring-say.low { top: 88%; }
.wr-spring-say.low::before { opacity: 0; }
.wr-spring-say.out {
  opacity: 0; transform: translate(-50%, -50%) scale(1.05);
  transition: opacity .4s ease-in, transform .4s ease-in;
}
.wr-spring-say .k {
  font-size: 13px; font-weight: 800; letter-spacing: .38em; text-transform: uppercase;
  color: var(--wr-spring, var(--wr-gold-2)); opacity: .95;
  transition: font-size .5s var(--wr-ease-out);
}
.wr-spring-say .t {
  font-size: 46px; font-weight: 800; letter-spacing: .04em; color: #f4ecd9;
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 46px var(--wr-spring-dim, transparent);
  margin-top: 4px; line-height: 1.1;
  transition: font-size .5s var(--wr-ease-out);
}
/* shrunk once it steps aside */
.wr-spring-say.low .k { font-size: 11px; }
.wr-spring-say.low .t { font-size: 24px; }
.wr-spring-say .r {
  max-width: 520px; margin: 5px auto 0; white-space: normal;
  font-size: 12px; line-height: 1.45; color: var(--wr-grey-1);
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s ease-out, transform .3s var(--wr-ease-out);
}
.wr-spring-say.rule .r { opacity: 1; transform: none; }
/* The outcome, in the log's own words, arriving with the impact. The rule
   above says what the Secret does; this says what it just did. */
.wr-spring-say .m {
  max-width: 560px; margin: 8px auto 0; white-space: normal;
  font-size: 13px; font-weight: 700; line-height: 1.4;
  color: var(--wr-spring, var(--wr-gold-2));
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(5px);
  transition: opacity .26s ease-out, transform .26s var(--wr-ease-out);
}
.wr-spring-say.msg .m { opacity: 1; transform: none; }
/* once the outcome is up, the generic rule text steps back */
.wr-spring-say.msg .r { opacity: .45; }

/* ---------- calm-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  /* the spring still HAPPENS — it is a rule firing, not decoration — but
     nothing spins or pulses through it */
  .wr-mark .wr-mk-spin,
  .wr-mark.lock,
  .wr-mark.lock .wr-mk-lockring,
  html[data-wr="on"] .card-slot.active,
  html[data-wr="on"] .card-slot.active::before,
  html[data-wr="on"] .card-slot.targeted,
  html[data-wr="on"] .card-slot.targeted::before,
  html[data-wr="on"] .wr-riddled,
  html[data-wr="on"] .wr-hesitate,
  html[data-wr="on"] .ability-btn.selected,
  html[data-wr="on"] #confirm-action-btn.active,
  html[data-wr="on"] #end-screen .end-screen-card { animation: none; }
  html[data-wr="on"] .ability-btn:not(.disabled):hover { transform: none; }
}

/* ============================================================
   VORTEX / MAELSTROM — the modern dressing.

   WHAT THIS TOUCHES, AND WHAT IT DELIBERATELY DOES NOT.

   The three tiles are LEFT ALONE. They keep the classic sheet's shape, type,
   axis colours and Pick button exactly as they are — an earlier pass here
   notched their corners, hexed the glyph wells and repainted Pick in the aqua
   ramp, and the result was that the one part of the band you actually read
   stopped matching itself between themes. The tiles are the content; the band
   is the furniture; only the furniture gets dressed.

   So this file styles the PLATE and its header, moves the explainer to the
   foot, lifts the whole thing higher, and swaps the embers for the stage's own
   palette. Nothing else.

   Scoped html[data-wr="on"] like the rest of this file: with the toggle off
   the classic band is byte-identical.
   ============================================================ */

/* ---------- the plate, back and square-cut ----------
   It was removed once, on the theory that a card sitting on a larger card
   reads as unplaced. True of a soft rounded panel; not true of a console. The
   tiles floating naked on the fog had no edge to belong to, so three unrelated
   objects hung over the board and every line of text needed a shadow heavy
   enough to be its own background.

   So: one plate, hard 2px corners, a hairline in the theme's dark gold, and a
   single lit rule along the top which is the only bright thing on it. That rule
   carries the mode colour, so Vortex and Maelstrom are told apart from the far
   side of the screen without reading the label. */
html[data-wr="on"] .vortex-overlay .vx-shell {
  padding: 10px 14px 12px;
  border: 1px solid rgba(120, 90, 40, 0.55);
  border-top: none;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(9, 20, 40, 0.90) 0%, rgba(1, 10, 19, 0.95) 100%);
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  box-shadow: 0 -10px 46px rgba(1, 10, 19, 0.75), inset 0 1px 0 rgba(200, 170, 110, 0.10);
}
html[data-wr="on"] .vortex-overlay .vx-shell::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--wr-aqua) 16%,
                              var(--wr-ice) 50%, var(--wr-aqua) 84%, transparent 100%);
  opacity: 0.9; pointer-events: none;
}
html[data-wr="on"] .vortex-overlay.is-paired .vx-shell::before {
  background: linear-gradient(90deg, transparent 0%, var(--wr-blue-3) 16%,
                              var(--wr-ice) 50%, var(--wr-blue-3) 84%, transparent 100%);
}
html[data-wr="on"] .vortex-overlay.is-spectating .vx-shell::before {
  background: linear-gradient(90deg, transparent 0%, #d1785f 16%,
                              #ffd9a0 50%, #d1785f 84%, transparent 100%);
}

/* The band rides the same measured lift as the classic one — no extra rise.
   It used to sit 118px higher, which put it across the bottom card row; the
   engine now lowers it further still if it would cover more than a fifth of
   the last slot (see _vortexFitBand). Whose champion is nearly dead is half
   the reason one relic beats another, so the board wins that argument. */
html[data-wr="on"] .vortex-overlay {
  padding-bottom: var(--vx-lift, 10px);
  background: linear-gradient(to top,
      rgba(1, 10, 19, 0.80) 0%,
      rgba(1, 10, 19, 0.50) 30%,
      rgba(1, 10, 19, 0.10) 58%,
      rgba(1, 10, 19, 0) 76%);
}

/* ---------- the Boon look for the relic pick ----------
   The Expedition's boon screen (gorgons-lair.html, #sheet-overlay under the
   Modern+ look): the whole board dimmed and blurred, a small aqua kind line,
   the gold Cinzel Decorative title with an aqua rule under it, one sub line,
   and the choices standing as three navy plates on a tilted aqua ring lying
   on the floor. Same values, carried over; no keeper at the top. Off until
   the cog's Vortex look is set to Boon, so the shipped band is untouched. */
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay  {
  align-items: center; padding: 0 16px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(30, 22, 8, 0.34), transparent 70%),
    radial-gradient(circle at center, rgba(4, 8, 14, 0.62), rgba(0, 0, 0, 0.88));
  backdrop-filter: blur(7px) saturate(0.75);
  -webkit-backdrop-filter: blur(7px) saturate(0.75);
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay::before ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay::before ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay::before  {
  content: '';
  /* --vx-shift moves the shell by the same amount (midTuner.css, 235px
     unless <html> says otherwise), so the plates keep standing on the ring. */
  position: absolute; left: 50%; top: calc(58% + var(--vx-shift, 235px));
  width: min(120vh, 1100px); height: min(120vh, 1100px);
  transform: translate(-50%, -50%) perspective(1100px) rotateX(72deg);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 52%, rgba(10, 200, 185, 0.10) 58%, rgba(10, 200, 185, 0.22) 62%, rgba(3, 151, 171, 0.10) 66%, transparent 72%),
              radial-gradient(circle, transparent 40%, rgba(200, 170, 110, 0.05) 44%, transparent 48%);
  filter: blur(1.5px); z-index: 0; pointer-events: none;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-aurora ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-aurora ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-aurora  { display: none; }
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-shell ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-shell ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-shell  {
  position: relative; z-index: 1;
  width: min(860px, 96vw); max-width: none;
  padding: 0; border: none; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow: visible; gap: 0;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-shell::before ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-shell::before ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-shell::before  { display: none; }
/* the head reads as the sheet's title block: kind, title, rule, sub */
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-head ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-head ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-head  {
  flex-direction: column; align-items: center; gap: 4px; text-align: center; margin-bottom: 18px;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-mark ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-mark ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-mark  {
  font-size: 10px; letter-spacing: 4px; font-weight: 500; color: var(--wr-aqua);
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-steps ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-steps ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-steps  { order: 5; margin-top: 6px; }
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-title ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-title ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-title  {
  font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 400;
  font-size: 27px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--wr-gold-1); text-shadow: var(--wr-glow-gold); margin: 5px 0 0;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-title::after ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-title::after ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-title::after  {
  content: ''; display: block; width: 120px; height: 1px; margin: 9px auto 0;
  background: linear-gradient(90deg, transparent, var(--wr-aqua), transparent); opacity: 0.6;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-who ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-who ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-who  {
  font-size: 12.5px; color: #a09b8c; font-weight: 400; padding: 0; border: none; background: none; margin-top: 4px;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-foot ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-foot ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-foot  { margin: 6px 0 0; order: 6; }
/* the three plates, .ochoice under the Modern+ look */
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-grid ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-grid ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-grid  { grid-template-columns: repeat(3, minmax(0, 262px)); justify-content: center; gap: 18px; }
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-square ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-square ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-square  {
  width: auto; min-width: 0; min-height: 200px; padding: 15px; gap: 0;
  justify-items: start; text-align: left;
  border: 1px solid #17253c; border-top-width: 1px; border-top-color: #17253c; border-radius: 6px;
  background: linear-gradient(180deg, rgba(9, 20, 40, 0.72), rgba(1, 10, 19, 0.85));
  transition: border-color var(--wr-med) var(--wr-ease), box-shadow var(--wr-med) var(--wr-ease), transform var(--wr-med) var(--wr-ease-out);
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-square:hover ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-square:hover ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-square:hover  {
  border-color: rgba(10, 200, 185, 0.55); box-shadow: var(--wr-glow-aqua-soft); transform: translateY(-3px);
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-face ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-face ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-face  { justify-self: start; margin-bottom: 7px; }
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-glyph ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-glyph ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-glyph  { font-size: 24px; }
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-name ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-name ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-name  {
  font-family: var(--wr-font-display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wr-gold-1); margin-bottom: 6px;
}
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-desc ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-desc ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-desc  { font-size: 11.5px; color: #a09b8c; line-height: 1.5; }
html[data-wr="on"][data-wr-floor="on"] .vortex-overlay .vx-explain ,
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay .vx-explain ,
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay .vx-explain  { text-align: center; }

/* Boon, soft: the same screen, but the veil and its blur live on a layer of
   their own behind the cards and decay outward, so the board, the battle log
   and the quest log at the sides stay legible while the pick is up. The
   overlay itself carries no veil in this state; ::after does, masked. */
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay {
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-wr="on"][data-wr-floor="soft"] .vortex-overlay::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(30, 22, 8, 0.34), transparent 70%),
    radial-gradient(circle at center, rgba(4, 8, 14, 0.62), rgba(0, 0, 0, 0.88));
  backdrop-filter: blur(7px) saturate(0.75);
  -webkit-backdrop-filter: blur(7px) saturate(0.75);
  -webkit-mask-image: radial-gradient(ellipse 60% 42% at 50% 56%, #000 0%, #000 68%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: radial-gradient(ellipse 60% 42% at 50% 56%, #000 0%, #000 68%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.12) 100%);
}

/* Boon, low: Boon's veil and its deep blur, but only across the lower half
   of the screen. The enemy row stands clear above the line the whole time
   the pick is up, because you choose AGAINST them and need to see them.
   Same layer trick as soft: nothing on the overlay itself, ::after carries
   the veil, masked to the bottom with a soft edge across the middle. */
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay {
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-wr="on"][data-wr-floor="low"] .vortex-overlay::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(30, 22, 8, 0.34), transparent 70%),
    radial-gradient(circle at center, rgba(4, 8, 14, 0.62), rgba(0, 0, 0, 0.88));
  backdrop-filter: blur(7px) saturate(0.75);
  -webkit-backdrop-filter: blur(7px) saturate(0.75);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.6) 50%, #000 58%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.6) 50%, #000 58%);
}

/* ---------- folded away, or committed ----------
   H puts the band away to look at the board, and a taken pick settles for a
   beat before the next offer. The base sheet drops the overlay's own
   backdrop for both (style.css .is-hidden / .vx-settled), but the Boon looks
   carry their veil at a higher specificity: on the overlay itself (Boon) or
   on ::after (soft, low), with the floor ring on ::before. Without this the
   blur stayed over the action bar with the band gone, and the "N waiting"
   peek button sat UNDER ::after (z 0, painted last) so H looked like it had
   swallowed the pick. */
html[data-wr="on"][data-wr-floor] .vortex-overlay.is-hidden,
html[data-wr="on"][data-wr-floor] .vortex-overlay.vx-settled {
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-wr="on"][data-wr-floor] .vortex-overlay.is-hidden::before,
html[data-wr="on"][data-wr-floor] .vortex-overlay.is-hidden::after,
html[data-wr="on"][data-wr-floor] .vortex-overlay.vx-settled::before,
html[data-wr="on"][data-wr-floor] .vortex-overlay.vx-settled::after { display: none; }
html[data-wr="on"][data-wr-floor] .vortex-overlay .vx-peek { z-index: 2; }

/* ---------- the title steps back ----------
   VORTEX, "Take a relic and its elixir", the champion's name, the 1 2 3 hint
   and the explainer are read once. Left up, they sit over the board the
   whole pick and, with the lever pulled down, over the top row of cards.
   So they fade after a beat and leave the plates standing alone; their
   space stays, so nothing under them shifts. vx-in is re-set on every new
   offer (engine.js), so each offer gets its title back for a moment. The
   taken and fatigue chips are not part of this: they are the numbers. */
html[data-wr="on"] .vortex-overlay.vx-in .vx-mark,
html[data-wr="on"] .vortex-overlay.vx-in .vx-steps,
html[data-wr="on"] .vortex-overlay.vx-in .vx-title,
html[data-wr="on"] .vortex-overlay.vx-in .vx-who,
html[data-wr="on"] .vortex-overlay.vx-in .vx-foot,
html[data-wr="on"] .vortex-overlay.vx-in .vx-explain {
  animation: wr-vx-title-away .8s ease-in 2.8s forwards;
}
@keyframes wr-vx-title-away { to { opacity: 0; } }
/* ...and the hairline the head draws under itself goes with the words. */
html[data-wr="on"] .vortex-overlay.vx-in .vx-head { animation: wr-vx-rule-away .8s ease-in 2.8s forwards; }
@keyframes wr-vx-rule-away { to { border-bottom-color: transparent; } }

/* ---------- the explainer goes to the foot ----------
   Ordered rather than re-authored: the shell is a flex column, so the order property puts
   the explanation under the tiles for the modern theme without touching the
   markup — and therefore without moving it in the classic one. It is the line
   you read once and never again, so it belongs after the thing you came for. */
html[data-wr="on"] .vortex-overlay .vx-head    { order: 1; }
html[data-wr="on"] .vortex-overlay .vx-grid    { order: 2; }
html[data-wr="on"] .vortex-overlay .vx-explain { order: 3; margin-top: 2px; opacity: .85; }

/* ---------- header ---------- */
html[data-wr="on"] .vortex-overlay .vx-title {
  font-family: var(--wr-font-display);
  font-weight: 700; letter-spacing: .06em;
  color: var(--wr-gold-1);
  text-shadow: 0 1px 3px rgba(1, 10, 19, 0.95), 0 0 10px rgba(1, 10, 19, 0.7);
}
html[data-wr="on"] .vortex-overlay .vx-mark { color: var(--wr-aqua); }
html[data-wr="on"] .vortex-overlay.is-paired .vx-mark { color: var(--wr-blue-3); }
html[data-wr="on"] .vortex-overlay .vx-who {
  color: var(--wr-gold-1);
  border-color: var(--wr-gold-3);
  background: rgba(200, 170, 110, 0.06);
  border-radius: 2px;
}
html[data-wr="on"] .vortex-overlay .vx-steps i.on { background: var(--wr-aqua); }

/* A hairline under the header instead of the champ-select flourish brackets
   that used to wrap it. The brackets were ceremony borrowed from the screen
   where you lock a champion in for the match; this fires twice a turn. A rule
   says "header, then choices" and says nothing else. */
html[data-wr="on"] .vortex-overlay .vx-head {
  position: relative;
  padding-bottom: 7px; margin-bottom: 1px;
  border-bottom: 1px solid rgba(120, 90, 40, 0.38);
}

/* ---------- legibility ----------
   With the plate back the text is on a surface again, so these are down to a
   seating shadow rather than the slab-substitute they had to be. */
html[data-wr="on"] .vortex-overlay .vx-name,
html[data-wr="on"] .vortex-overlay .vx-desc,
html[data-wr="on"] .vortex-overlay .vx-bundle-desc,
html[data-wr="on"] .vortex-overlay .vx-explain,
html[data-wr="on"] .vortex-overlay .vx-who,
html[data-wr="on"] .vortex-overlay .vx-mark,
html[data-wr="on"] .vortex-overlay .vx-foot {
  text-shadow: 0 1px 2px rgba(1, 10, 19, 0.85);
}

/* ---------- embers become motes ----------
   Same particles, the stage's palette, drifting slower and further. Kept few:
   the plate is solid again, so they are an atmosphere behind it rather than
   the only thing proving the band is lit. */
html[data-wr="on"] .vortex-overlay .vx-embers i {
  background: radial-gradient(circle, var(--wr-ice) 0%, var(--wr-aqua) 55%, rgba(10, 200, 185, 0) 72%);
  animation-duration: calc(var(--e-d) * 1.6);
  opacity: 0.7;
}

/* ---------- motion ---------- */
html[data-wr="on"] .vortex-overlay.vx-in .vx-shell {
  animation: vx-lift var(--wr-med) var(--wr-ease-out) both;
}
html[data-wr="on"] .vortex-overlay.vx-in .vx-square {
  animation: vx-rise var(--wr-med) var(--wr-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] .vortex-overlay .vx-embers { display: none; }
}

/* ============================================================
   THREE PLATES — what replaced the three mini gates.

   The gates were a mistake and it is worth writing down which one, because it
   is an attractive mistake. This theme has exactly one ceremonial object —
   the stage gate, a lit core in a dark collar with a gold tick rail and a
   counter-rotating dashed ring — and the temptation was to mint the choice out
   of it. Two things went wrong. Struck three at a time, twice per champion per
   round, the gate stopped meaning anything; and a collar that ROTATES sits
   directly beside the two clamped lines of text the pick is actually decided
   on, so the one thing moving on screen was the thing you needed to ignore.

   The replacement is a console, not a costume:

     · everything square-cut — 2px corners, hairline borders, no discs
     · nothing moves that is not answering the pointer
     · the axis tint does the identifying, on a top rule and a corner chip,
       so Offense / Defense / Utility is answered before a word is read
     · the glyph gets a flat lit well, because it is a picture of the item,
       not a portal

   The tiles keep the classic sheet's structure, type scale and axis colours —
   this is a re-dressing, not a second layout, and the engine never learns
   which theme is on.
   ============================================================ */

/* ---- the tile ----
   Still a card, but this theme's kind of card: hard corners, a dark-gold
   hairline, and its axis colour as a lit top rule that bleeds a short wash
   down into the fill. The wash is what makes three tiles read as three
   DIFFERENT choices at a glance instead of three copies of a layout. */
html[data-wr="on"] .vortex-overlay .vx-square {
  border: 1px solid rgba(120, 90, 40, 0.42);
  border-top: 2px solid var(--vx-tint);
  border-radius: 2px;
  padding: 11px 12px 10px;
  background:
    linear-gradient(180deg, var(--vx-soft) 0%, transparent 34%),
    linear-gradient(180deg, rgba(10, 22, 40, 0.92) 0%, rgba(1, 10, 19, 0.96) 100%);
  box-shadow: 0 4px 18px rgba(1, 10, 19, 0.55);
  transition: transform var(--wr-fast) var(--wr-ease-out),
              box-shadow var(--wr-fast) var(--wr-ease),
              border-color var(--wr-fast) var(--wr-ease);
}
html[data-wr="on"] .vortex-overlay .vx-square:hover,
html[data-wr="on"] .vortex-overlay .vx-square:focus-visible {
  transform: translateY(-3px);
  border-color: var(--vx-tint);
  box-shadow: 0 12px 30px rgba(1, 10, 19, 0.7),
              inset 0 0 0 1px color-mix(in srgb, var(--vx-tint) 45%, transparent),
              0 0 26px var(--vx-soft);
}

/* ---- the glyph well ----
   Flat, square, still. It shows you WHAT the thing is; it is not a portal and
   it has nothing to spin. The tint lights it from above so the well agrees
   with the tile's top rule instead of introducing a second accent. */
html[data-wr="on"] .vortex-overlay .vx-glyph {
  position: relative;
  width: 54px; height: 54px;
  margin-bottom: 3px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 34%, var(--vx-soft) 0%, transparent 70%),
    linear-gradient(180deg, rgba(1, 10, 19, 0.35) 0%, rgba(1, 10, 19, 0.8) 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.18),
              inset 0 1px 0 rgba(240, 230, 210, 0.06);
  font-size: 26px;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.55));
  transition: box-shadow var(--wr-fast) var(--wr-ease),
              transform var(--wr-fast) var(--wr-ease-out);
}
html[data-wr="on"] .vortex-overlay .vx-square:hover .vx-glyph,
html[data-wr="on"] .vortex-overlay .vx-square:focus-visible .vx-glyph {
  transform: none;   /* the tile lifts; the glyph inside it does not swim */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-tint) 70%, transparent),
              0 0 22px var(--vx-soft);
}

/* ---- the slot label ----
   The axis word (OFFENSE / DEFENSE / UTILITY) is the fastest read on the tile
   and it was set as plain small caps. Here it becomes a chip in its own tint,
   which is what ties it to the top rule above it. */
html[data-wr="on"] .vortex-overlay .vx-slot {
  padding: 1px 7px; border-radius: 2px;
  background: color-mix(in srgb, var(--vx-tint) 14%, rgba(1, 10, 19, 0.5));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-tint) 34%, transparent);
}

/* ---- names and body ---- */
html[data-wr="on"] .vortex-overlay .vx-name {
  font-family: var(--wr-font-display);
  font-weight: 700; letter-spacing: .03em;
  color: var(--wr-gold-1);
}
html[data-wr="on"] .vortex-overlay .vx-desc { color: var(--wr-grey-1); }

/* ---- the number chip ----
   Flush into the tile's top corner like a keycap tab, not floating near the
   glyph. It is the shortcut, so it belongs on the edge of the thing the
   shortcut presses. */
html[data-wr="on"] .vortex-overlay .vx-key {
  top: -1px; right: -1px;
  width: 19px; height: 17px;
  border: none; border-radius: 0 0 0 3px;
  background: color-mix(in srgb, var(--vx-tint) 26%, rgba(1, 10, 19, 0.88));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-tint) 30%, transparent);
  font-family: var(--wr-font-ui); font-weight: 800; font-size: 10px;
  color: var(--wr-gold-1);
}

/* ---- Pick ----
   A full-width bar that fills solid with the axis colour on hover. It is the
   one control here, so it is allowed to be the loudest thing on the tile the
   moment you are actually pointing at it — and nothing at all before then. */
html[data-wr="on"] .vortex-overlay .vx-pick {
  border-radius: 2px;
  border-color: color-mix(in srgb, var(--vx-tint) 55%, transparent);
  background: rgba(1, 10, 19, 0.5);
  letter-spacing: .2em;
}
html[data-wr="on"] .vortex-overlay .vx-square:hover .vx-pick,
html[data-wr="on"] .vortex-overlay .vx-square:focus-visible .vx-pick {
  background: var(--vx-tint);
  color: var(--wr-black);
  box-shadow: 0 0 18px var(--vx-soft);
}

/* ---- armed / taken ----
   Armed keeps the hover lift and adds a solid rim; taken locks it in ice so
   the committed tile is unmistakable in a row that is otherwise dimming. */
html[data-wr="on"] .vortex-overlay .vx-square.is-armed {
  box-shadow: 0 12px 30px rgba(1, 10, 19, 0.7),
              inset 0 0 0 1px var(--vx-tint), 0 0 30px var(--vx-soft);
}
html[data-wr="on"] .vortex-overlay .vx-square.is-taken {
  border-color: var(--wr-ice);
  box-shadow: inset 0 0 0 1px var(--wr-ice), 0 0 34px var(--vx-soft), var(--wr-glow-aqua-soft);
}

/* the bundled flask's divider, in the theme's gold */
html[data-wr="on"] .vortex-overlay .vx-bundle { border-top-color: rgba(120, 90, 40, 0.5); }
html[data-wr="on"] .vortex-overlay .vx-bundle-name { color: var(--wr-gold-2); }

/* The well is smaller than the gate it replaced, so the tiles go back to the
   classic sheet's heights — no override needed here. Short screens still trim
   the well itself. */
@media (max-height: 820px) {
  html[data-wr="on"] .vortex-overlay .vx-glyph { width: 46px; height: 46px; font-size: 22px; }
}

/* ============================================================
   FURY OF THE FALLEN — the tip, modern dressing.

   The classic tip is a warm amber pill. Here it becomes a flat console strip:
   square corners, a dark-gold hairline, and one ember rule down its leading
   edge doing the colour work the whole fill used to do. Same size, same place
   (the engine measures it into the seam between the board and the key bar),
   same rule that it must never outshine the kill it is explaining.

   The base rules are injected by _showFuryTip at runtime, so this file wins on
   specificity alone — html[data-wr] + #id beats the bare #id.
   ============================================================ */
html[data-wr="on"] #bn-fury-tip {
  border-radius: 2px;
  padding: 8px 16px 8px 13px;
  border: 1px solid rgba(120, 90, 40, 0.6);
  border-left: 3px solid #e8781f;
  background: linear-gradient(180deg, rgba(9, 20, 40, 0.94) 0%, rgba(1, 10, 19, 0.96) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--wr-gold-1);
  font-family: var(--wr-font-ui); font-size: 13.5px;
  box-shadow: 0 8px 26px rgba(1, 10, 19, 0.7), inset 0 1px 0 rgba(200, 170, 110, 0.10);
}
html[data-wr="on"] #bn-fury-tip b {
  font-family: var(--wr-font-display);
  font-weight: 700; letter-spacing: .05em;
  color: #ffab5e;
}
/* Same two breaths, but on the leading rule rather than the whole rim — the
   strip's edge lights, the plate stays put. */
@keyframes wrFuryTipEdge {
  0%, 100% { border-left-color: #a8501a;
             box-shadow: 0 8px 26px rgba(1, 10, 19, 0.7), inset 0 1px 0 rgba(200, 170, 110, 0.10); }
  50%      { border-left-color: #ffb066;
             box-shadow: 0 8px 26px rgba(1, 10, 19, 0.7), inset 0 1px 0 rgba(200, 170, 110, 0.10),
                         -4px 0 22px rgba(232, 120, 31, 0.45); }
}
html[data-wr="on"] #bn-fury-tip.is-in {
  animation: bnFuryTipIn var(--wr-fast) var(--wr-ease-out),
             wrFuryTipEdge 1.5s var(--wr-ease) 2;
}
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] #bn-fury-tip.is-in { animation: none; }
}