/* ==========================================================================
   WELLFALL — 2D interface layer (ui.css)
   Owner: the UI package. Scope: wellfall/src/ui/** + wellfall/ui.css.

   Self-contained by contract: the palette tokens are declared here on `.wf`
   (the class the UI root carries), never on :root, so a missing or broken
   styles.css can never collapse this layout. No webfonts, no external
   requests, no images. Every class is prefixed `.wf-`, every JS-owned bit of
   runtime state is a `data-*` attribute or a CSS custom property, so this
   sheet can never collide with the engine's styles.css.

   Palette (frozen hex): bg #05060a cyan #38f2e0 magenta #ff3ea5 amber #ffc24a
                         violet #7a5cff   (+ the #000/#fff neutrals)
   Every other shade in this sheet is DERIVED from those five with `color-mix()`,
   exactly as contract v1 requires (research/17-wellfall-round2-contract.md section 5);
   `src/core/palette.js` and `src/minigame/sim.js` compute the same mixes in JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens + root scope
   -------------------------------------------------------------------------- */
.wf {
  /* frozen palette */
  --wf-bg: #05060a;
  --wf-ink: color-mix(in srgb, color-mix(in srgb, var(--wf-cyan) 2%, var(--wf-bg)) 96%, var(--wf-violet));
  --wf-cyan: #38f2e0;
  --wf-magenta: #ff3ea5;
  --wf-amber: #ffc24a;
  --wf-violet: #7a5cff;

  /* derived tints: explicit rgba() of the frozen hex channels, or color-mix() of the
     tokens above. No runtime deps, no build step. */
  --wf-cyan-06: rgba(56, 242, 224, .06);
  --wf-cyan-12: rgba(56, 242, 224, .12);
  --wf-cyan-20: rgba(56, 242, 224, .20);
  --wf-cyan-40: rgba(56, 242, 224, .40);
  --wf-mag-10: rgba(255, 62, 165, .10);
  --wf-mag-25: rgba(255, 62, 165, .25);
  --wf-mag-45: rgba(255, 62, 165, .45);
  --wf-amber-40: rgba(255, 194, 74, .40);
  --wf-violet-40: rgba(122, 92, 255, .40);

  /* Body text: the cyan token washed 18% into white, nudged 4% toward the magenta
     (= rgb(221, 245, 246), 1/255 off the previous literal). Secondary text: a cyan/amber blend
     (the desaturated neutral) 64% with the violet (= rgb(150, 171, 182), 3/255 off) - the
     palette has no grey, so the steel tone is mixed from the tokens rather than written. */
  --wf-text: color-mix(in srgb, color-mix(in srgb, var(--wf-cyan) 18%, #fff) 96%, var(--wf-magenta));
  --wf-dim: color-mix(in srgb, color-mix(in srgb, var(--wf-cyan) 45%, var(--wf-amber)) 64%, var(--wf-violet));
  --wf-line: rgba(56, 242, 224, .22);
  --wf-line-soft: rgba(255, 255, 255, .08);
  --wf-panel: linear-gradient(180deg, rgba(11, 14, 24, .93), rgba(5, 6, 10, .95));
  --wf-glass: rgba(5, 6, 10, .72);

  --wf-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wf-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* scale: ~15px at 1280x720, ~20px at 1080p, capped at 4K */
  --wf-fs: clamp(13px, 1.39vmin + 5px, 26px);
  --wf-pad: calc(var(--wf-fs) * 1.1);
  --wf-gap: calc(var(--wf-fs) * .6);
  --wf-r: 4px;
  --wf-shadow: 0 18px 60px rgba(0, 0, 0, .6);

  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--wf-sans);
  font-size: var(--wf-fs);
  line-height: 1.35;
  color: var(--wf-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
  contain: layout style;
}

.wf *,
.wf *::before,
.wf *::after { box-sizing: border-box; }

.wf h1,
.wf h2,
.wf h3,
.wf p,
.wf ul,
.wf li { margin: 0; padding: 0; list-style: none; font-weight: inherit; }

.wf .wf-mono { font-family: var(--wf-mono); font-variant-numeric: tabular-nums; }
.wf .wf-num { font-family: var(--wf-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Screen-reader-only live regions. Kept outside every toggled layer so they
   keep announcing while the HUD is hidden. */
.wf .wf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   2. Layers — exactly one screen's worth of UI is interactive at a time
   -------------------------------------------------------------------------- */
.wf .wf-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* `visibility` is flipped with a DELAY on the way out (so a fading-out layer
     keeps painting for the length of the opacity transition) and with NO delay
     on the way in. An element is not focusable while it computes to
     `visibility: hidden`, so a plain `transition: visibility .2s` made a
     freshly-shown layer unfocusable for up to 200 ms - measured: focusing the
     first upgrade card straight after the offer opened left focus on <body>,
     and Tab immediately after Escape landed on the *outgoing* menu's START RUN
     button instead of the pause menu. See src/ui/dev/evidence/verify-report.txt. */
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.wf .wf-layer[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
/* Modal layers swallow pointer input so clicks never leak into the 3D canvas
   behind a menu. Non-modal layers (HUD) stay click-through. */
.wf .wf-layer.wf-modal[data-visible="true"] { pointer-events: auto; }

/* Interactive primitives re-enable hit-testing inside click-through layers.
   The minigame frame and the intermission offer are non-modal: only their own
   chrome takes pointer input so the engine's canvas keeps the rest. */
.wf .wf-btn,
.wf .wf-card,
.wf .wf-chip,
.wf .wf-panel,
.wf .wf-mg-top,
.wf .wf-mg-bottom,
.wf .wf-inter { pointer-events: auto; }

.wf .wf-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(122, 92, 255, .10), rgba(5, 6, 10, 0) 60%),
    rgba(5, 6, 10, .70);
}
.wf .wf-scrim.wf-scrim-soft { background: rgba(5, 6, 10, .48); }

/* Screen hijacks 3D readability, so keep HUD chrome faded while a modal is up. */
.wf .wf-layer[data-layer="hud"][data-dim="true"] { opacity: .28; }

/* --------------------------------------------------------------------------
   3. Primitives: panels, buttons, chips, bars
   -------------------------------------------------------------------------- */
.wf .wf-panel {
  position: relative;
  background: var(--wf-panel);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-r);
  box-shadow: var(--wf-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
  padding: calc(var(--wf-pad) * .9) var(--wf-pad);
  backdrop-filter: saturate(120%);
}
.wf .wf-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 2px;
  background: var(--wf-cyan);
  box-shadow: 0 0 10px var(--wf-cyan);
  opacity: .8;
}

.wf .wf-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--wf-gap) * .9);
  width: 100%;
  font: inherit;
  color: var(--wf-text);
  text-align: left;
  padding: calc(var(--wf-fs) * .62) calc(var(--wf-fs) * .95);
  background: linear-gradient(180deg, rgba(56, 242, 224, .07), rgba(56, 242, 224, .02));
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-r);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.wf .wf-btn:hover,
.wf .wf-btn:focus-visible {
  background: linear-gradient(180deg, var(--wf-cyan-20), var(--wf-cyan-06));
  border-color: var(--wf-cyan-40);
  outline: none;
}
.wf .wf-btn:focus-visible { box-shadow: 0 0 0 2px rgba(5, 6, 10, .9), 0 0 0 4px var(--wf-cyan); }
.wf .wf-btn:active { transform: translateY(1px); }
.wf .wf-btn:disabled { opacity: .45; cursor: default; }

.wf .wf-btn .wf-btn-key {
  margin-left: auto;
  font-family: var(--wf-mono);
  font-size: .78em;
  letter-spacing: .08em;
  color: var(--wf-dim);
}
.wf .wf-btn.is-primary {
  background: linear-gradient(180deg, rgba(56, 242, 224, .22), rgba(56, 242, 224, .05));
  border-color: var(--wf-cyan-40);
  /* the cyan token washed 11% into white (= #e9fefc, 1/255 off the previous literal) */
  color: color-mix(in srgb, var(--wf-cyan) 11%, #fff);
  font-weight: 600;
  letter-spacing: .06em;
}
.wf .wf-btn.is-primary:hover { background: linear-gradient(180deg, rgba(56, 242, 224, .32), rgba(56, 242, 224, .10)); }
.wf .wf-btn.is-danger { border-color: var(--wf-mag-45); background: linear-gradient(180deg, var(--wf-mag-25), var(--wf-mag-10)); }
.wf .wf-btn.is-danger:hover { border-color: var(--wf-magenta); background: linear-gradient(180deg, var(--wf-mag-45), var(--wf-mag-25)); }
.wf .wf-btn[aria-pressed="true"] {
  border-color: var(--wf-amber);
  color: var(--wf-amber);
  background: linear-gradient(180deg, var(--wf-amber-40), rgba(255, 194, 74, .08));
}

.wf .wf-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--wf-mono);
  font-size: .74em;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .32em .7em;
  border: 1px solid var(--wf-line);
  border-radius: 999px;
  color: var(--wf-dim);
  background: rgba(56, 242, 224, .04);
}
.wf .wf-chip.is-on { color: var(--wf-cyan); border-color: var(--wf-cyan-40); }

.wf .wf-row { display: flex; align-items: center; gap: var(--wf-gap); }
.wf .wf-grow { flex: 1 1 0; min-width: 0; }
.wf .wf-spread { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wf-gap); }

/* Bars: painted with transform:scaleX so a per-frame update never reflows. */
.wf .wf-bar {
  position: relative;
  height: calc(var(--wf-fs) * .62);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--wf-line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.wf .wf-bar.wf-bar-sm { height: calc(var(--wf-fs) * .42); }
.wf .wf-bar-fill {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--wf-v, 1));
  transition: transform .16s linear;
  will-change: transform;
}
.wf .wf-bar-shield .wf-bar-fill { background: linear-gradient(90deg, var(--wf-cyan), rgba(56, 242, 224, .30)); }
.wf .wf-bar-hull .wf-bar-fill { background: linear-gradient(90deg, var(--wf-cyan), var(--wf-violet)); }
.wf .wf-bar-xp .wf-bar-fill { background: linear-gradient(90deg, var(--wf-violet), var(--wf-magenta)); }
.wf .wf-bar-boss .wf-bar-fill { background: linear-gradient(90deg, var(--wf-magenta), var(--wf-amber)); }
.wf .wf-bar-threat .wf-bar-fill { background: linear-gradient(90deg, var(--wf-amber), var(--wf-magenta)); }
.wf .wf-bar[data-hull="low"] .wf-bar-fill {
  background: linear-gradient(90deg, var(--wf-amber), var(--wf-magenta));
  animation: wf-pulse .62s ease-in-out infinite;
}
.wf .wf-bar[data-empty="true"] { opacity: .35; }

/* --------------------------------------------------------------------------
   4. Menu backdrop — pure CSS animation, no images
   -------------------------------------------------------------------------- */
.wf .wf-backdrop { position: absolute; inset: -10%; overflow: hidden; opacity: .9; }
.wf .wf-backdrop i,
.wf .wf-backdrop b,
.wf .wf-backdrop s { position: absolute; display: block; text-decoration: none; }

.wf .wf-bd-grid {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(56, 242, 224, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 242, 224, .08) 1px, transparent 1px);
  background-size: 64px 64px;
  transform-origin: 50% 60%;
  animation: wf-grid-drift 46s linear infinite;
  mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%);
}
.wf .wf-bd-well {
  left: 50%;
  top: 62%;
  width: 78vmin;
  height: 78vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(5, 6, 10, 1) 12%, rgba(5, 6, 10, 0) 13%),
    radial-gradient(circle at 50% 50%, rgba(255, 62, 165, .30) 13%, rgba(122, 92, 255, .18) 34%, rgba(5, 6, 10, 0) 62%);
  filter: blur(1px);
  animation: wf-well-spin 34s linear infinite;
}
.wf .wf-bd-ring {
  left: 50%;
  top: 62%;
  width: 52vmin;
  height: 52vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(56, 242, 224, .30);
  box-shadow: 0 0 40px rgba(56, 242, 224, .18), inset 0 0 60px rgba(122, 92, 255, .18);
  animation: wf-ring-spin 22s linear infinite reverse;
}
.wf .wf-bd-ring.wf-bd-ring-2 {
  width: 68vmin;
  height: 68vmin;
  border-style: dashed;
  border-color: rgba(255, 62, 165, .22);
  animation-duration: 60s;
}
.wf .wf-bd-fall {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(56, 242, 224, 0) 0%, rgba(56, 242, 224, .16) 50%, rgba(56, 242, 224, 0) 100%);
  height: 30% !important;
  animation: wf-fall 7s linear infinite;
  opacity: .5;
}
.wf .wf-bd-fall.wf-bd-fall-2 { animation-duration: 11s; animation-delay: -3s; }
.wf .wf-bd-fall.wf-bd-fall-3 { animation-duration: 15s; animation-delay: -7s; }
.wf .wf-bd-noise {
  inset: 0;
  opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
}

/* --------------------------------------------------------------------------
   5. Main menu
   -------------------------------------------------------------------------- */
.wf .wf-menu {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--wf-pad) * 1.4);
  padding: var(--wf-pad);
  text-align: center;
}

.wf .wf-titleblock { display: grid; gap: calc(var(--wf-gap) * .5); justify-items: center; }

.wf .wf-title {
  position: relative;
  font-size: clamp(44px, 9.2vmin, 148px);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: .95;
  /* the cyan token washed 7% into white (= #f1fefd, 1/255 off the previous literal) */
  color: color-mix(in srgb, var(--wf-cyan) 7%, #fff);
  text-shadow: 0 0 26px rgba(56, 242, 224, .42), 0 0 90px rgba(122, 92, 255, .30);
}
.wf .wf-title::before,
.wf .wf-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}
.wf .wf-title::before { color: var(--wf-magenta); opacity: .55; animation: wf-glitch-a 5.4s steps(1, end) infinite; }
.wf .wf-title::after { color: var(--wf-cyan); opacity: .5; animation: wf-glitch-b 6.8s steps(1, end) infinite; }

.wf .wf-tagline {
  font-size: .95em;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--wf-cyan);
  opacity: .85;
}
.wf .wf-subline { font-size: .78em; letter-spacing: .18em; text-transform: uppercase; color: var(--wf-dim); }

.wf .wf-menu-panel {
  display: grid;
  gap: calc(var(--wf-gap) * .7);
  width: min(420px, 88vw);
  text-align: left;
}

.wf .wf-best {
  display: grid;
  gap: calc(var(--wf-gap) * .35);
  width: min(420px, 88vw);
  padding: calc(var(--wf-fs) * .6) var(--wf-fs);
  border-left: 2px solid var(--wf-amber);
  background: linear-gradient(90deg, rgba(255, 194, 74, .10), rgba(255, 194, 74, 0));
  text-align: left;
}
.wf .wf-best[data-has="false"] { display: none; }
.wf .wf-best-label { font-size: .72em; letter-spacing: .28em; text-transform: uppercase; color: var(--wf-amber); }
/* the amber token washed 16% into white (= #fff5e2, 1/255 off the previous literal) */
.wf .wf-best-value { font-family: var(--wf-mono); font-size: 1.5em; color: color-mix(in srgb, var(--wf-amber) 16%, #fff); }
.wf .wf-best-sub { font-size: .76em; color: var(--wf-dim); letter-spacing: .06em; }

.wf .wf-version {
  position: absolute;
  right: var(--wf-pad);
  bottom: calc(var(--wf-pad) * .8);
  font-family: var(--wf-mono);
  font-size: .68em;
  letter-spacing: .14em;
  color: var(--wf-dim);
  text-transform: uppercase;
  opacity: .8;
  text-align: right;
}

/* sub panels (options / controls) share one shell */
.wf .wf-panel-screen {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--wf-pad);
}
.wf .wf-panel-inner { width: min(660px, 92vw); display: grid; gap: calc(var(--wf-gap) * .9); text-align: left; }
.wf .wf-panel-title {
  font-size: 1.05em;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wf-cyan);
}
.wf .wf-panel-note { font-size: .78em; color: var(--wf-dim); letter-spacing: .04em; }

.wf .wf-keys { display: grid; gap: calc(var(--wf-gap) * .45); }
.wf .wf-keyrow {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: var(--wf-gap);
  align-items: baseline;
  border-bottom: 1px dashed var(--wf-line-soft);
  padding-bottom: calc(var(--wf-gap) * .45);
}
.wf .wf-keyrow kbd {
  font-family: var(--wf-mono);
  font-size: .8em;
  color: var(--wf-amber);
  letter-spacing: .08em;
}
.wf .wf-keyrow span { color: var(--wf-text); font-size: .86em; opacity: .9; }

/* --------------------------------------------------------------------------
   6. In-run HUD
   -------------------------------------------------------------------------- */
.wf .wf-hud { position: absolute; inset: 0; }
.wf .wf-hud-corner { position: absolute; display: grid; gap: calc(var(--wf-gap) * .6); }
.wf .wf-hud-tl { left: var(--wf-pad); top: var(--wf-pad); width: min(30vw, 360px); }
.wf .wf-hud-tr { right: var(--wf-pad); top: var(--wf-pad); justify-items: end; text-align: right; }
.wf .wf-hud-bc { left: 50%; bottom: var(--wf-pad); transform: translateX(-50%); justify-items: center; text-align: center; }

.wf .wf-vitals { position: relative; display: grid; gap: calc(var(--wf-gap) * .35); }
.wf .wf-vital { display: grid; gap: 2px; }
.wf .wf-vital-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--wf-mono);
  font-size: .7em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-vital-label b { color: var(--wf-text); font-weight: 500; }
.wf .wf-hitflash {
  position: absolute;
  inset: -8px -12px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 100% at 20% 50%, rgba(255, 62, 165, .55), rgba(255, 62, 165, 0) 70%);
}
.wf .wf-vitals[data-hit^="hull"] .wf-hitflash { animation: wf-flash .34s ease-out 1; }
.wf .wf-vitals[data-hit^="shield"] .wf-hitflash {
  background: radial-gradient(60% 100% at 20% 50%, rgba(56, 242, 224, .5), rgba(56, 242, 224, 0) 70%);
  animation: wf-flash .26s ease-out 1;
}

.wf .wf-xp { display: grid; gap: calc(var(--wf-gap) * .3); margin-top: calc(var(--wf-gap) * .5); }
.wf .wf-level {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--wf-mono);
  font-size: .78em;
  letter-spacing: .18em;
  color: var(--wf-violet);
  text-transform: uppercase;
}
.wf .wf-level b { color: #fff; font-size: 1.15em; font-weight: 600; }
.wf .wf-level[data-bump="true"] { animation: wf-bump .5s ease-out 1; }

.wf .wf-statrow {
  display: grid;
  grid-template-columns: auto auto;
  gap: calc(var(--wf-gap) * .8);
  align-items: baseline;
  font-size: .74em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-statrow b { font-family: var(--wf-mono); font-size: 1.25em; color: var(--wf-text); font-weight: 500; }
.wf .wf-score b { color: #fff; font-size: 1.9em; text-shadow: 0 0 18px rgba(56, 242, 224, .35); }
.wf .wf-perf {
  margin-top: calc(var(--wf-gap) * .5);
  font-family: var(--wf-mono);
  font-size: .68em;
  letter-spacing: .14em;
  color: var(--wf-dim);
  padding: .25em .6em;
  border: 1px solid var(--wf-line-soft);
  border-radius: 2px;
  background: rgba(5, 6, 10, .5);
}
.wf .wf-perf[data-visible="false"] { display: none; }

/* wave banner + boss bar share the top-centre column */
.wf .wf-hud-top {
  position: absolute;
  left: 50%;
  top: calc(var(--wf-pad) * 1.1);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--wf-gap) * .7);
  width: min(88vw, 900px);
}
.wf .wf-wavebanner {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: calc(var(--wf-gap) * .5) var(--wf-pad);
  opacity: 0;
  transition: opacity .3s ease;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .9);
}
.wf .wf-wavebanner[data-visible="true"] { opacity: 1; }
.wf .wf-wave-num {
  font-family: var(--wf-mono);
  font-size: .78em;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--wf-cyan);
}
.wf .wf-wave-name { font-size: 1.5em; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.wf .wf-wave-count { font-family: var(--wf-mono); font-size: .72em; letter-spacing: .2em; color: var(--wf-amber); }
.wf .wf-wave-count[data-visible="false"] { display: none; }
.wf .wf-wave-tag {
  margin-top: calc(var(--wf-gap) * .25);
  font-family: var(--wf-mono);
  font-size: .74em;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--wf-amber);
  border: 1px solid var(--wf-amber-40);
  padding: .2em .7em;
  background: rgba(255, 194, 74, .08);
}
.wf .wf-wave-tag[data-visible="false"] { display: none; }

/* boss bar */
.wf .wf-boss {
  width: min(70vw, 760px);
  display: grid;
  gap: calc(var(--wf-gap) * .3);
  text-align: center;
}
.wf .wf-boss[data-visible="false"] { display: none; }
.wf .wf-boss-name {
  font-size: .84em;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wf-magenta);
  text-shadow: 0 0 16px rgba(255, 62, 165, .5);
}
.wf .wf-pips { display: flex; justify-content: center; gap: .45em; }
.wf .wf-pips i {
  width: calc(var(--wf-fs) * .5);
  height: calc(var(--wf-fs) * .5);
  border: 1px solid var(--wf-mag-45);
  transform: rotate(45deg);
  background: rgba(255, 62, 165, .12);
}
.wf .wf-pips i[data-lit="true"] { background: var(--wf-magenta); box-shadow: 0 0 10px var(--wf-magenta); border-color: var(--wf-magenta); }

/* dash / boost / well readouts */
.wf .wf-gauge { display: grid; gap: 2px; min-width: calc(var(--wf-fs) * 8); }
.wf .wf-gauge-label {
  display: flex;
  justify-content: space-between;
  gap: var(--wf-gap);
  font-family: var(--wf-mono);
  font-size: .68em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-gauge-label b { color: var(--wf-text); font-weight: 500; }
.wf .wf-gauge[data-ready="true"] .wf-gauge-label b { color: var(--wf-cyan); }

.wf .wf-well-hud {
  display: grid;
  gap: 2px;
  min-width: calc(var(--wf-fs) * 12);
  padding: .3em .7em;
  border: 1px solid var(--wf-mag-25);
  border-radius: 2px;
  background: rgba(255, 62, 165, .07);
}
.wf .wf-well-hud[data-near="true"] {
  border-color: var(--wf-magenta);
  background: rgba(255, 62, 165, .16);
  animation: wf-pulse 1s ease-in-out infinite;
}
.wf .wf-well-head { font-family: var(--wf-mono); font-size: .68em; letter-spacing: .2em; color: var(--wf-magenta); text-transform: uppercase; }
.wf .wf-well-nums { display: flex; gap: var(--wf-gap); font-family: var(--wf-mono); font-size: .82em; color: var(--wf-text); }

/* crosshair */
.wf .wf-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--wf-fs) * 1.5);
  height: calc(var(--wf-fs) * 1.5);
  margin: calc(var(--wf-fs) * -.75) 0 0 calc(var(--wf-fs) * -.75);
  opacity: .8;
  transition: transform .12s ease, opacity .12s ease;
}
.wf .wf-crosshair[data-hit="true"] { transform: scale(1.4); opacity: 1; }
.wf .wf-crosshair::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--wf-cyan-40);
  border-radius: 50%;
}
.wf .wf-crosshair::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--wf-cyan);
  box-shadow: 0 0 8px var(--wf-cyan);
}

/* gravity-well proximity vignette */
.wf .wf-vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(115% 88% at 50% 50%, rgba(5, 6, 10, 0) 40%, rgba(255, 62, 165, .22) 76%, rgba(255, 62, 165, .55) 100%);
  transition: opacity .18s linear;
}
.wf .wf-vignette[data-danger="true"] { animation: wf-vig 1.15s ease-in-out infinite; }

/* log / toast column — sits above the gauge row so the two never collide */
.wf .wf-log {
  position: absolute;
  left: var(--wf-pad);
  bottom: calc(var(--wf-pad) * 5.4);
  width: min(30vw, 380px);
  display: grid;
  gap: calc(var(--wf-gap) * .3);
  align-content: end;
}
.wf .wf-toast {
  font-size: .78em;
  letter-spacing: .06em;
  padding: .3em .7em;
  border-left: 2px solid var(--wf-cyan);
  background: linear-gradient(90deg, rgba(5, 6, 10, .82), rgba(5, 6, 10, 0));
  animation: wf-toast-in .24s ease-out both;
  color: var(--wf-text);
}
.wf .wf-toast[data-kind="warn"] { border-left-color: var(--wf-amber); }
.wf .wf-toast[data-kind="danger"] { border-left-color: var(--wf-magenta); }
.wf .wf-toast[data-kind="good"] { border-left-color: var(--wf-violet); }

/* --------------------------------------------------------------------------
   7. Upgrade cards
   -------------------------------------------------------------------------- */
.wf .wf-upgrade {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--wf-pad) * .9);
  padding: var(--wf-pad);
}
.wf .wf-upgrade-head { display: grid; justify-items: center; gap: calc(var(--wf-gap) * .3); text-align: center; }
.wf .wf-upgrade-head h2 {
  font-size: 1.5em;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 24px rgba(122, 92, 255, .7);
}
.wf .wf-upgrade-head p { font-size: .76em; letter-spacing: .24em; text-transform: uppercase; color: var(--wf-dim); }

.wf .wf-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wf-pad);
  width: min(1180px, 94vw);
}

.wf .wf-card {
  --wf-rc: var(--wf-cyan);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--wf-gap) * .7);
  text-align: left;
  padding: var(--wf-pad);
  min-height: calc(var(--wf-fs) * 13);
  font: inherit;
  color: var(--wf-text);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(11, 14, 24, .95), rgba(5, 6, 10, .96));
  border: 2px solid var(--wf-rc);
  border-radius: var(--wf-r);
  box-shadow: var(--wf-shadow), inset 0 0 40px rgba(0, 0, 0, .5);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  /* `backwards`, never `both`: a retained keyframe transform would override
     both the hover transform and any positioning transform. */
  animation: wf-card-in .34s cubic-bezier(.2, .9, .2, 1) backwards;
  animation-delay: calc(var(--wf-i, 0) * 70ms);
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}
.wf .wf-card[data-rarity="common"] { --wf-rc: var(--wf-cyan); }
.wf .wf-card[data-rarity="rare"] { --wf-rc: var(--wf-violet); }
.wf .wf-card[data-rarity="epic"] { --wf-rc: var(--wf-magenta); }
.wf .wf-card:hover,
.wf .wf-card:focus-visible {
  outline: none;
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--wf-rc), 0 22px 60px rgba(0, 0, 0, .7), 0 0 46px -6px var(--wf-rc);
  background: linear-gradient(180deg, rgba(20, 24, 40, .96), rgba(8, 10, 18, .97));
}
.wf .wf-card:focus-visible { box-shadow: 0 0 0 3px rgba(5, 6, 10, .9), 0 0 0 6px var(--wf-rc); }
.wf .wf-card:disabled { opacity: .4; }

.wf .wf-card-rarity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wf-mono);
  font-size: .68em;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--wf-rc);
}
.wf .wf-card-name { font-size: 1.16em; font-weight: 650; letter-spacing: .06em; color: #fff; }
.wf .wf-card-desc { font-size: .82em; line-height: 1.45; color: var(--wf-dim); }
.wf .wf-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wf-mono);
  font-size: .7em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-card-foot .wf-card-key {
  color: var(--wf-rc);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .1em .45em;
}
.wf .wf-card[data-picked="true"] { animation: wf-card-pick .26s ease-out 1 forwards; }
.wf .wf-upgrade-hint {
  font-size: .74em;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wf-dim);
}

/* --------------------------------------------------------------------------
   8. Pause + summary
   -------------------------------------------------------------------------- */
.wf .wf-pause,
.wf .wf-summary {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--wf-pad) * .8);
  padding: var(--wf-pad);
}
.wf .wf-pause h2,
.wf .wf-summary-title {
  font-size: 1.9em;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 26px rgba(56, 242, 224, .4);
}
.wf .wf-pause .wf-panel-inner,
.wf .wf-summary .wf-panel-inner { gap: calc(var(--wf-gap) * .55); }
.wf .wf-pause-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--wf-gap) * .55); }
.wf .wf-pause-actions .wf-btn.wf-span { grid-column: span 2; }

/* the magenta token washed 19% into white (= #ffdaee, 2/255 off the previous literal) */
.wf .wf-dead .wf-summary-title { color: color-mix(in srgb, var(--wf-magenta) 19%, #fff); text-shadow: 0 0 30px rgba(255, 62, 165, .55); }
.wf .wf-newbest {
  display: none;
  align-items: center;
  gap: .6em;
  font-family: var(--wf-mono);
  font-size: .82em;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wf-amber);
  border: 1px solid var(--wf-amber);
  background: linear-gradient(90deg, rgba(255, 194, 74, .22), rgba(255, 194, 74, .04));
  padding: .35em 1em;
  animation: wf-bump .9s ease-out infinite;
}
.wf .wf-newbest[data-visible="true"] { display: inline-flex; }

.wf .wf-stats { display: grid; gap: calc(var(--wf-gap) * .35); }
.wf .wf-statline {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--wf-gap);
  font-size: .8em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-statline b { font-family: var(--wf-mono); font-size: 1.3em; color: var(--wf-text); font-weight: 500; }
.wf .wf-statline.wf-statline-hi b { color: var(--wf-cyan); }
.wf .wf-bigstat { display: grid; gap: 2px; text-align: center; padding: calc(var(--wf-gap) * .6) 0; }
.wf .wf-bigstat small { font-size: .68em; letter-spacing: .3em; text-transform: uppercase; color: var(--wf-dim); }
.wf .wf-bigstat b { font-family: var(--wf-mono); font-size: 2.6em; font-weight: 600; color: #fff; text-shadow: 0 0 30px rgba(56, 242, 224, .35); }
.wf .wf-chips { display: flex; flex-wrap: wrap; gap: calc(var(--wf-gap) * .35); }
.wf .wf-best-line { font-size: .76em; letter-spacing: .12em; color: var(--wf-dim); text-align: center; }

/* --------------------------------------------------------------------------
   9. Minigame handoff frame
   -------------------------------------------------------------------------- */
.wf .wf-mg-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--wf-gap);
  padding: calc(var(--wf-gap) * .7) var(--wf-pad);
  background: linear-gradient(180deg, rgba(5, 6, 10, .92), rgba(5, 6, 10, 0));
  border-bottom: 1px solid var(--wf-line);
}
.wf .wf-mg-brand {
  display: grid;
  gap: 1px;
}
.wf .wf-mg-brand strong {
  font-size: 1.05em;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--wf-cyan);
  text-shadow: 0 0 18px rgba(56, 242, 224, .5);
}
.wf .wf-mg-brand span { font-size: .66em; letter-spacing: .2em; text-transform: uppercase; color: var(--wf-dim); }
.wf .wf-mg-metrics { display: flex; gap: var(--wf-gap); margin-left: auto; }
.wf .wf-metric {
  display: grid;
  gap: 1px;
  justify-items: end;
  font-family: var(--wf-mono);
  font-size: .7em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-metric b { font-size: 1.5em; color: #fff; font-weight: 500; }
.wf .wf-mg-skip { width: auto; padding: .5em 1.1em; }
.wf .wf-mg-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-gap);
  padding: calc(var(--wf-gap) * .6) var(--wf-pad);
  background: linear-gradient(0deg, rgba(5, 6, 10, .92), rgba(5, 6, 10, 0));
  border-top: 1px solid var(--wf-line);
  font-size: .72em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wf-dim);
}
.wf .wf-mg-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(56, 242, 224, 0), var(--wf-cyan), rgba(56, 242, 224, 0));
  animation: wf-sweep 3.2s linear infinite;
}

/* --------------------------------------------------------------------------
   10. Intermission offer
   -------------------------------------------------------------------------- */
.wf .wf-inter {
  position: absolute;
  left: 50%;
  bottom: calc(var(--wf-pad) * 6);
  transform: translateX(-50%);
  width: min(620px, 92vw);
  display: grid;
  gap: calc(var(--wf-gap) * .7);
  padding: var(--wf-pad);
  text-align: left;
  border: 1px solid var(--wf-violet);
  background: linear-gradient(180deg, rgba(16, 12, 34, .95), rgba(5, 6, 10, .96));
  box-shadow: 0 0 0 1px rgba(122, 92, 255, .15), 0 24px 70px rgba(0, 0, 0, .7);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  /* `backwards`, never `both`: the retained final keyframe transform
     (translateY(0) scale(1)) used to override `transform: translateX(-50%)`
     above, so the panel was never actually centred - measured at 900x600 it
     spanned 450..1070 and at 640x480 320..909, i.e. off the right edge. */
  animation: wf-card-in .3s cubic-bezier(.2, .9, .2, 1) backwards;
}
.wf .wf-inter-head {
  display: flex;
  align-items: baseline;
  gap: var(--wf-gap);
  font-family: var(--wf-mono);
  font-size: .72em;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wf-violet);
}
.wf .wf-inter-title { font-size: 1.1em; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.wf .wf-inter-copy { font-size: .82em; color: var(--wf-dim); }
.wf .wf-inter-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(var(--wf-gap) * .5); }

/* --------------------------------------------------------------------------
   11. Animations
   -------------------------------------------------------------------------- */
@keyframes wf-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes wf-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wf-bump { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes wf-card-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wf-card-pick { to { opacity: 0; transform: translateY(-14px) scale(1.04); } }
@keyframes wf-toast-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wf-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 640px, 0 640px; } }
@keyframes wf-well-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes wf-ring-spin { from { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.04); } to { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
@keyframes wf-fall { from { transform: translateY(-120%); } to { transform: translateY(420%); } }
@keyframes wf-vig { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes wf-sweep { from { transform: translateX(-30%); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(30%); opacity: 0; } }
@keyframes wf-glitch-a {
  0%, 92%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  93% { transform: translate(-3px, 1px); clip-path: inset(12% 0 62% 0); }
  95% { transform: translate(3px, -2px); clip-path: inset(58% 0 18% 0); }
  97% { transform: translate(-2px, 0); clip-path: inset(34% 0 44% 0); }
}
@keyframes wf-glitch-b {
  0%, 90%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  91% { transform: translate(3px, -1px); clip-path: inset(66% 0 12% 0); }
  94% { transform: translate(-3px, 2px); clip-path: inset(20% 0 56% 0); }
  96% { transform: translate(2px, 1px); clip-path: inset(44% 0 30% 0); }
}

/* --------------------------------------------------------------------------
   12. Responsive — 1280x720 .. 4K, plus portrait
   -------------------------------------------------------------------------- */
@media (max-width: 1100px), (orientation: portrait) {
  .wf .wf-cards { grid-template-columns: minmax(0, 1fr); width: min(560px, 94vw); }
  .wf .wf-card { min-height: 0; }
  .wf .wf-hud-tl { width: min(46vw, 320px); }
  .wf .wf-boss { width: 84vw; }
  .wf .wf-log { width: min(52vw, 380px); }
  /* Once the corner readouts wrap they are ~100..155px tall (measured: hud-tr
     768..885 x 15..153 at 900x600, 512..626 x 14..150 at 640x480) while the
     top-centre column starts at ~16px, so the wave banner and the boss bar sat
     on top of them (banner x hud-tl = 129x80 at 640x480, boss x hud-tr = 96x35
     at 900x600). Same remedy as the portrait rule below: drop the column under
     the corner band. */
  .wf .wf-hud-tr { width: min(42vw, 320px); }
  .wf .wf-hud-top { top: calc(var(--wf-pad) * 11.4); width: min(92vw, 640px); }
}
@media (orientation: portrait) {
  .wf .wf-menu { align-content: start; padding-top: calc(var(--wf-pad) * 2.4); }
  /* Top-centre column drops below the corner readouts, which are wide here. */
  .wf .wf-hud-tl { width: min(40vw, 300px); }
  .wf .wf-hud-top { top: calc(var(--wf-pad) * 8.6); width: min(92vw, 640px); }
  .wf .wf-hud-bc { bottom: calc(var(--wf-pad) * 1.2); }
  .wf .wf-pause-actions { grid-template-columns: minmax(0, 1fr); }
  .wf .wf-pause-actions .wf-btn.wf-span { grid-column: auto; }
  .wf .wf-inter { bottom: calc(var(--wf-pad) * 8.4); }
  .wf .wf-log { bottom: calc(var(--wf-pad) * 7.6); }
  .wf .wf-title { font-size: clamp(34px, 13vmin, 90px); }
}
@media (min-width: 2400px) {
  .wf .wf-cards { width: min(1500px, 90vw); }
  .wf .wf-hud-tl { width: min(24vw, 520px); }
}

/* --------------------------------------------------------------------------
   13. Reduced motion and high contrast
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wf *,
  .wf *::before,
  .wf *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wf .wf-bd-grid { animation: none; }
}
@media (forced-colors: active) {
  .wf .wf-layer[data-visible="true"] { opacity: 1; }
  .wf .wf-btn,
  .wf .wf-card { border: 2px solid CanvasText; }
}