/* =====================================================================
   PARADOX VAULT — game.css
   Art-deco heist UI: brass hairlines, stepped corners, engraved caps,
   teal/gold duotone on near-black.  OWNER: agent-ui.
   All DOM inside #pv-ui is generated by assets/js/ui.js.
   ===================================================================== */

/* ------------------------------------------------------------------ *
   0. BASE / PAGE
 * ------------------------------------------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #05070b;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#pv-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #05070b;
  touch-action: none;
  z-index: 0;
}

/* ------------------------------------------------------------------ *
   1. TOKENS
 * ------------------------------------------------------------------ */
#pv-ui {
  /* -- palette (mirrors PV.PALETTE) -- */
  --void:      #05070b;
  --ink:       #04060a;
  --panel-0:   #070a10;
  --panel-1:   #0d121a;
  --panel-2:   #141a25;
  --brass:     #c9a227;
  --brass-hi:  #f2dc95;
  --brass-dim: #6d5715;
  --gold:      #ffd76e;
  --gold-hot:  #fff3c4;
  --holo:      #5ff0ff;
  --holo-dim:  #1d7f92;
  --holo-deep: #0b3f52;
  --teal:      #2ad4c8;
  --violet:    #9b6cff;
  --laser:     #ff3b58;
  --alarm:     #ff5a3c;
  --amber:     #ffab3d;
  --paper:     #efe6d2;
  --paper-dim: #a9a191;
  --steel:     #8d97a8;

  /* -- type -- */
  --font-display: "Copperplate", "Copperplate Gothic Light", "Perpetua Titling MT",
                  "Futura", "Century Gothic", "Optima", "Gill Sans MT", "Gill Sans",
                  "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Gill Sans MT", "Gill Sans", "Optima", "Avenir Next", "Segoe UI",
             Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Futura", "Century Gothic", "Gill Sans MT", "Trebuchet MS",
              "Segoe UI", system-ui, sans-serif;

  /* -- scale: one unit drives everything, clamps 320px .. 4K -- */
  --u: clamp(12px, calc(0.34vw + 10.2px), 27px);
  --fs-xxs: calc(var(--u) * 0.62);
  --fs-xs:  calc(var(--u) * 0.72);
  --fs-sm:  calc(var(--u) * 0.84);
  --fs-md:  calc(var(--u) * 1.00);
  --fs-lg:  calc(var(--u) * 1.30);
  --fs-xl:  calc(var(--u) * 1.85);
  --fs-2xl: calc(var(--u) * 2.70);
  --fs-3xl: calc(var(--u) * 4.20);

  --gap:  calc(var(--u) * 0.75);
  --pad:  calc(var(--u) * 1.15);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* -- stepped art-deco corner, shared by panels + buttons -- */
  --n:  calc(var(--u) * 0.70);
  --n2: calc(var(--u) * 0.34);
  --step-clip: polygon(
    0 var(--n), var(--n2) var(--n), var(--n2) var(--n2), var(--n) var(--n2), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n2),
    calc(100% - var(--n2)) var(--n2), calc(100% - var(--n2)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n2)) calc(100% - var(--n)),
    calc(100% - var(--n2)) calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n2)),
    calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n2)), var(--n2) calc(100% - var(--n2)),
    var(--n2) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
  /* the same deco step, but only on the bottom edge: used by the HUD marquee,
     which is docked flush to the top of the screen and hangs down from it. */
  --step-clip-hang: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--n)),
    calc(100% - var(--n2)) calc(100% - var(--n)),
    calc(100% - var(--n2)) calc(100% - var(--n2)),
    calc(100% - var(--n)) calc(100% - var(--n2)),
    calc(100% - var(--n)) 100%,
    var(--n) 100%,
    var(--n) calc(100% - var(--n2)),
    var(--n2) calc(100% - var(--n2)),
    var(--n2) calc(100% - var(--n)),
    0 calc(100% - var(--n))
  );

  /* published by ui.js: how much of the viewport the permanent chrome covers */
  --pv-ins-t: 0px;
  --pv-ins-b: 0px;

  /* -- easing -- */
  --e-out:  cubic-bezier(0.16, 0.84, 0.36, 1);
  --e-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --e-soft: cubic-bezier(0.33, 0.02, 0.16, 1);
  --e-snap: cubic-bezier(0.2, 1.35, 0.42, 1);

  /* -- surfaces -- */
  --brushed:
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.022) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(112deg,
      rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 7px);
  --engrave:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0 1px, rgba(0,0,0,0) 1px 4px);
}

/* ------------------------------------------------------------------ *
   2. ROOT LAYER
 * ------------------------------------------------------------------ */
#pv-ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;      /* re-enabled only on real controls */
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--paper);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  box-sizing: border-box;
  contain: layout style;
}
#pv-ui *, #pv-ui *::before, #pv-ui *::after { box-sizing: border-box; }
/* :where() keeps this reset at zero specificity so component rules such as
   .pv-tbtn / .pv-seg__b / .pv-link can still set their own font-size. With a
   plain `#pv-ui button` selector the id beat every class and every button in
   the game silently rendered at the root 12px. */
:where(#pv-ui) :where(button, input, select, a) {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}
#pv-ui button, #pv-ui a, #pv-ui .pv-noselect {
  -webkit-user-select: none;
  user-select: none;
}
#pv-ui :focus { outline: none; }
#pv-ui :focus-visible {
  outline: 2px solid var(--holo);
  outline-offset: 3px;
}
.pv-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ *
   3. PRIMITIVES — frame, panel, rule, heading, button
 * ------------------------------------------------------------------ */

/* Stepped brass frame: outer = the metal edge, inner = the glass face. */
.pv-fr {
  position: relative;
  padding: 1.5px;
  clip-path: var(--step-clip);
  background-color: var(--brass-dim);
  background-image:
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,236,175,.95), rgba(150,113,26,.75) 22%,
      rgba(255,241,196,.90) 44%, rgba(110,83,18,.80) 68%,
      rgba(233,199,109,.95) 86%, rgba(255,236,175,.95));
  filter: drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.9) rgba(0,0,0,.72));
}
.pv-fr > .pv-in {
  position: relative;
  clip-path: var(--step-clip);
  background-color: var(--panel-1);
  background-image:
    linear-gradient(178deg, rgba(120,170,180,.10), rgba(0,0,0,0) 34%),
    radial-gradient(120% 90% at 50% -18%, rgba(95,240,255,.075), rgba(0,0,0,0) 62%),
    var(--engrave),
    var(--brushed),
    linear-gradient(168deg, #141a25 0%, #0a0e15 52%, #10151e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,238,190,.16),
    inset 0 -1px 0 rgba(0,0,0,.9),
    inset 0 calc(var(--u) * -2.2) calc(var(--u) * 2.4) -1.2rem rgba(0,0,0,.65);
}
.pv-fr--glass > .pv-in {
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background-color: rgba(10,14,20,.80);
}
.pv-fr--flat { filter: none; }

/* Card = framed panel with padding + a hairline inner keyline */
.pv-card > .pv-in { padding: calc(var(--pad) * 1.25) calc(var(--pad) * 1.35); }
.pv-card > .pv-in::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 0.34);
  border: 1px solid rgba(201,162,39,.16);
  clip-path: var(--step-clip);
  pointer-events: none;
}

/* Hairline brass rules */
.pv-rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    rgba(201,162,39,0), rgba(201,162,39,.30) 8%,
    var(--brass) 50%, rgba(201,162,39,.30) 92%, rgba(201,162,39,0));
  box-shadow: 0 1px 0 rgba(0,0,0,.85);
  flex: 1 1 auto;
}
.pv-div {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  width: 100%;
  margin: calc(var(--u) * 0.55) 0;
}
.pv-div__dia {
  width: calc(var(--u) * 0.42);
  height: calc(var(--u) * 0.42);
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--brass-hi), var(--brass-dim));
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 calc(var(--u)*.5) rgba(255,215,110,.30);
}

/* Engraved caps heading */
.pv-h {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  margin: 0;
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(0,0,0,.95), 0 -1px 0 rgba(255,255,255,.055);
}
.pv-h--gold {
  background-image: linear-gradient(178deg, var(--gold-hot) 4%, var(--gold) 38%, #b9862a 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.9));
}
.pv-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
}
.pv-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  letter-spacing: 0.045em;
  margin: 0;
}
.pv-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.04em;
}

/* ---- Buttons ---------------------------------------------------- */
.pv-btn {
  --n:  calc(var(--u) * 0.52);
  --n2: calc(var(--u) * 0.26);
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5px;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  clip-path: var(--step-clip);
  background-image: linear-gradient(180deg,
    rgba(214,178,84,.85), rgba(120,92,20,.75) 55%, rgba(178,142,52,.85));
  transition: transform .16s var(--e-out), filter .16s var(--e-out),
              background-image .2s var(--e-out);
  filter: drop-shadow(0 calc(var(--u) * .28) calc(var(--u) * .55) rgba(0,0,0,.6));
}
.pv-btn > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 0.55) calc(var(--u) * 1.25);
  clip-path: var(--step-clip);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  background-color: #10151d;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0) 46%),
    var(--brushed),
    linear-gradient(180deg, #1a212c 0%, #0c1118 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.18),
    inset 0 -2px 0 rgba(0,0,0,.72);
  transition: background-image .18s var(--e-out), color .18s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .pv-btn:hover {
    transform: translateY(-1px);
    background-image: linear-gradient(180deg,
      rgba(255,226,140,.98), rgba(163,127,32,.9) 55%, rgba(226,190,95,.98));
    filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .9) rgba(0,0,0,.7))
            drop-shadow(0 0 calc(var(--u) * .7) rgba(255,203,92,.22));
  }
  .pv-btn:hover > span {
    color: var(--gold-hot);
    background-image:
      linear-gradient(180deg, rgba(255,225,150,.16), rgba(255,255,255,0) 46%),
      var(--brushed),
      linear-gradient(180deg, #232c39 0%, #10161f 100%);
  }
}
.pv-btn:active { transform: translateY(1px) scale(.995); filter: none; }
.pv-btn:active > span {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(255,255,255,.02) 60%),
    linear-gradient(180deg, #0a0e14 0%, #131a24 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,240,200,.08);
}
.pv-btn[disabled] { opacity: .38; cursor: default; pointer-events: none; }
.pv-btn--primary { background-image: linear-gradient(180deg, var(--brass-hi), #8a6c18 60%, var(--brass)); }
.pv-btn--primary > span {
  min-height: calc(var(--u) * 3.0);
  font-size: var(--fs-md);
  letter-spacing: 0.24em;
  color: var(--gold-hot);
  background-image:
    linear-gradient(180deg, rgba(255,214,120,.20), rgba(255,255,255,0) 50%),
    var(--brushed),
    linear-gradient(180deg, #2a2413 0%, #14100a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.28),
    inset 0 -2px 0 rgba(0,0,0,.8),
    inset 0 0 calc(var(--u) * 1.6) rgba(255,190,70,.10);
}
@media (hover: hover) and (pointer: fine) {
  .pv-btn--primary:hover > span {
    background-image:
      linear-gradient(180deg, rgba(255,225,150,.32), rgba(255,255,255,0) 50%),
      var(--brushed),
      linear-gradient(180deg, #3a3018 0%, #1b160c 100%);
  }
}
.pv-btn--ghost { background-image: linear-gradient(180deg, rgba(141,151,168,.42), rgba(50,58,72,.5)); }
.pv-btn--ghost > span { color: var(--paper-dim); letter-spacing: 0.16em; }
.pv-btn--danger { background-image: linear-gradient(180deg, rgba(255,120,90,.7), rgba(120,32,20,.8)); }
.pv-btn--danger > span { color: #ffbca8; }
.pv-btn--sm > span { min-height: calc(var(--u) * 2.0); font-size: var(--fs-xs); padding: calc(var(--u)*.35) calc(var(--u)*.85); }

/* Text links (arcade / leaderboard) */
.pv-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 0.4) calc(var(--u) * 1.3);
  margin-top: calc(var(--u) * 0.9);
}
.pv-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: calc(var(--u)*.34) calc(var(--u)*.5);
  font-family: var(--font-display);
  font-size: max(10.5px, var(--fs-xs));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-dim);
  border-bottom: 1px solid rgba(201,162,39,.24);
  transition: color .18s var(--e-out), border-color .18s var(--e-out), transform .18s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .pv-link:hover { color: var(--gold); border-color: var(--brass); transform: translateY(-1px); }
}
.pv-link:active { color: var(--gold-hot); }

/* ------------------------------------------------------------------ *
   4. SCREENS + TRANSITIONS
 * ------------------------------------------------------------------ */
.pv-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + var(--u)) calc(var(--safe-r) + var(--u))
           calc(var(--safe-b) + var(--u)) calc(var(--safe-l) + var(--u));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.025);
  transition: opacity .26s var(--e-in), transform .26s var(--e-in), visibility 0s linear .26s;
  overflow: hidden;
}
.pv-screen.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .42s var(--e-out), transform .52s var(--e-out), visibility 0s;
}
.pv-screen::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(120% 78% at 50% 8%, rgba(24,44,52,.42), rgba(0,0,0,0) 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(70,52,10,.24), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(3,5,8,.90), rgba(3,5,8,.965));
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  pointer-events: none;
}
.pv-screen--hud::before { display: none; }
.pv-screen__body {
  position: relative;
  width: 100%;
  max-width: calc(var(--u) * 40);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  min-height: 0;
}
.pv-screen.is-on .pv-stagger > * {
  animation: pv-rise .5s var(--e-out) both;
}
.pv-screen.is-on .pv-stagger > *:nth-child(1) { animation-delay: .05s; }
.pv-screen.is-on .pv-stagger > *:nth-child(2) { animation-delay: .10s; }
.pv-screen.is-on .pv-stagger > *:nth-child(3) { animation-delay: .15s; }
.pv-screen.is-on .pv-stagger > *:nth-child(4) { animation-delay: .20s; }
.pv-screen.is-on .pv-stagger > *:nth-child(5) { animation-delay: .25s; }
.pv-screen.is-on .pv-stagger > *:nth-child(6) { animation-delay: .30s; }
.pv-screen.is-on .pv-stagger > *:nth-child(7) { animation-delay: .35s; }
@keyframes pv-rise {
  from { opacity: 0; transform: translateY(calc(var(--u) * 0.85)); }
  to   { opacity: 1; transform: none; }
}

/* scrollable body for tall content (help / settings) */
.pv-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,.45) transparent;
  overscroll-behavior: contain;
}
.pv-scroll::-webkit-scrollbar { width: 8px; }
.pv-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201,162,39,.6), rgba(109,87,21,.6));
  border-radius: 0;
}
.pv-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }

/* ------------------------------------------------------------------ *
   5. BOOT
 * ------------------------------------------------------------------ */
.pv-boot { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*1.1); }
.pv-dial {
  position: relative;
  width: calc(var(--u) * 7.5);
  height: calc(var(--u) * 7.5);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(201,162,39,.55) 0 1.2deg, rgba(0,0,0,0) 1.2deg 15deg),
    radial-gradient(circle at 38% 30%, #2b333f, #0b0f16 68%);
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,.4),
    inset 0 2px 3px rgba(255,240,200,.18),
    inset 0 -3px 8px rgba(0,0,0,.9),
    0 calc(var(--u)*.6) calc(var(--u)*1.6) rgba(0,0,0,.7);
  animation: pv-spin 5.5s cubic-bezier(.36,.06,.24,1) infinite;
}
.pv-dial::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.05) 0 6deg, rgba(0,0,0,.05) 6deg 12deg),
    radial-gradient(circle at 42% 34%, #3a4453, #10151d 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.10);
}
.pv-dial::after {
  content: "";
  position: absolute;
  left: 50%; top: 8%;
  width: 2px; height: 20%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold), rgba(255,215,110,0));
  box-shadow: 0 0 calc(var(--u)*.4) rgba(255,215,110,.7);
}
@keyframes pv-spin {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(220deg); }
  55%  { transform: rotate(220deg); }
  100% { transform: rotate(540deg); }
}
.pv-bar {
  position: relative;
  width: min(calc(var(--u) * 20), 78vw);
  height: calc(var(--u) * 0.62);
  padding: 1px;
  clip-path: var(--step-clip);
  --n: calc(var(--u)*.2); --n2: calc(var(--u)*.1);
  background: linear-gradient(180deg, rgba(201,162,39,.7), rgba(80,62,12,.7));
}
.pv-bar__t {
  position: relative;
  height: 100%;
  background: rgba(0,0,0,.72);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.9);
  overflow: hidden;
}
.pv-bar__f {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--pct, 0));
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.18) 0 3px, rgba(0,0,0,0) 3px 8px),
    linear-gradient(90deg, #8a6a18, var(--gold) 70%, var(--gold-hot));
  box-shadow: 0 0 calc(var(--u)*.5) rgba(255,205,90,.5);
  transition: transform .22s var(--e-out);
}
.pv-boot__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--paper-dim);
  min-height: 1.4em;
}
.pv-boot__pct { color: var(--brass); }

/* ------------------------------------------------------------------ *
   6. TITLE
 * ------------------------------------------------------------------ */
.pv-title__wrap { display: flex; flex-direction: column; align-items: center; width: 100%; gap: calc(var(--u)*.6); }
.pv-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u)*1.1) calc(var(--u)*1.6) calc(var(--u)*.9);
  isolation: isolate;
}
.pv-logo::before {                    /* deco sunburst */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 52%;
  width: calc(var(--u) * 26); height: calc(var(--u) * 26);
  transform: translate(-50%, -50%);
  background:
    repeating-conic-gradient(from -90deg at 50% 50%,
      rgba(95,240,255,.075) 0 2.6deg, rgba(0,0,0,0) 2.6deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.55) 42%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.55) 42%, transparent 66%);
  pointer-events: none;
  animation: pv-sunburst 46s linear infinite;
}
@keyframes pv-sunburst { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pv-logo__arc {                        /* stepped deco arch above the word */
  width: calc(var(--u) * 13);
  max-width: 74vw;
  height: calc(var(--u) * 1.1);
  background:
    linear-gradient(90deg, transparent, rgba(201,162,39,.85) 18%, var(--brass-hi) 50%, rgba(201,162,39,.85) 82%, transparent);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0 2px, transparent 2px 5px, #000 5px 6px, transparent 6px 10px, #000 10px 11px);
  mask-image:
    linear-gradient(180deg, #000 0 2px, transparent 2px 5px, #000 5px 6px, transparent 6px 10px, #000 10px 11px);
  margin-bottom: calc(var(--u)*.5);
}
.pv-logo__main {
  font-family: var(--font-display);
  font-size: clamp(30px, 11.5vw, 108px);
  line-height: .92;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-indent: 0.10em;
  text-transform: uppercase;
  background-image: linear-gradient(178deg,
    #fffaea 0%, var(--gold-hot) 16%, var(--gold) 42%,
    #c08f2c 62%, #8a641b 78%, #ecc871 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 0 calc(var(--u)*1.2) rgba(255,190,70,.22));
  margin: 0;
  white-space: nowrap;
}
.pv-logo__sub {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*.7);
  width: 100%;
  margin-top: calc(var(--u)*.35);
}
.pv-logo__vault {
  font-family: var(--font-display);
  font-size: clamp(13px, 4.6vw, 40px);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--holo);
  white-space: nowrap;
  text-shadow:
    0 0 calc(var(--u)*.9) rgba(95,240,255,.45),
    0 1px 0 rgba(0,0,0,.9);
}
.pv-tagline {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--paper-dim);
  text-align: center;
  margin: calc(var(--u)*.5) 0 0;
  max-width: 34ch;
}
.pv-menu {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*.52);
  width: min(calc(var(--u) * 17), 88vw);
  margin-top: calc(var(--u)*.9);
}
.pv-best {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: calc(var(--u)*.8);
}
.pv-best b { color: var(--gold); font-weight: 600; letter-spacing: .12em; }
.pv-ver {
  position: absolute;
  right: calc(var(--u)*.8); bottom: calc(var(--u)*.5);
  font-size: var(--fs-xxs);
  letter-spacing: .2em;
  color: rgba(169,161,145,.42);
  font-family: var(--font-num);
}

/* ---- title backdrop: keeps a 4K window from reading as empty black --- */
.pv-screen--title::before {
  background:
    radial-gradient(120% 82% at 50% 4%, rgba(26,50,60,.34), rgba(0,0,0,0) 58%),
    radial-gradient(86% 62% at 50% 114%, rgba(74,55,12,.30), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(3,5,8,.56), rgba(3,5,8,.72) 46%, rgba(3,5,8,.86));
  -webkit-backdrop-filter: blur(3px) saturate(118%);
  backdrop-filter: blur(3px) saturate(118%);
}
.pv-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.pv-deco > i { position: absolute; display: block; }
.pv-deco__rays {
  left: 50%; bottom: -46%;
  width: 210vmax; height: 210vmax;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 184deg at 50% 50%,
    rgba(255,214,120,.055) 0 1.1deg, rgba(0,0,0,0) 1.1deg 5.2deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.5) 26%, transparent 48%);
  mask-image: radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.5) 26%, transparent 48%);
  animation: pv-rayspin 180s linear infinite;
}
@keyframes pv-rayspin { to { transform: translateX(-50%) rotate(360deg); } }
.pv-deco__rings {
  left: 50%; top: 42%;
  width: 132vmin; height: 132vmin;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(201,162,39,.16) 0 1px, rgba(0,0,0,0) 1px 5.2vmin);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 44%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 44%, transparent 74%);
  opacity: .8;
}
.pv-deco__horizon {
  left: 0; right: 0;
  bottom: 11%;
  height: calc(var(--u) * .9);
  background:
    linear-gradient(180deg, transparent 0 calc(50% - 1px), rgba(201,162,39,.34) calc(50% - 1px) 50%, transparent 50%),
    repeating-linear-gradient(90deg,
      rgba(201,162,39,.20) 0 calc(var(--u)*.14), rgba(0,0,0,0) calc(var(--u)*.14) calc(var(--u)*1.5));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.pv-deco__fanL, .pv-deco__fanR {
  top: 0; bottom: 0;
  width: 26vw;
  max-width: calc(var(--u) * 22);
  opacity: .6;
  background: repeating-linear-gradient(90deg,
    rgba(201,162,39,.14) 0 1px, rgba(0,0,0,0) 1px calc(var(--u)*1.1));
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.pv-deco__fanL { left: 0; }
.pv-deco__fanR { right: 0; transform: scaleX(-1); }
@media (max-width: 720px) { .pv-deco__fanL, .pv-deco__fanR { display: none; } }

/* ------------------------------------------------------------------ *
   7. BRIEF — stamped dossier
 * ------------------------------------------------------------------ */
.pv-brief { width: min(calc(var(--u)*30), 94vw); }
.pv-brief .pv-in { padding-top: calc(var(--pad)*1.5); }
.pv-brief__hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); }
.pv-brief__id { min-width: 0; }
.pv-brief__title { font-size: var(--fs-lg); line-height: 1.15; }
.pv-brief__wing {
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: calc(var(--u)*.18) 0 0;
}
.pv-brief__floor {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  text-align: center;
  padding: calc(var(--u)*.3) calc(var(--u)*.55);
  border: 1px solid rgba(201,162,39,.42);
  color: var(--brass);
  background:
    linear-gradient(180deg, rgba(201,162,39,.10), rgba(201,162,39,.02));
  box-shadow: inset 0 1px 0 rgba(255,240,200,.12);
}
.pv-brief__floor-k {
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--paper-dim);
  line-height: 1;
}
.pv-brief__floor b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--gold);
  font-weight: 600;
}
.pv-brief__hint {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: calc(var(--u)*.42) calc(var(--u)*.55);
  background: linear-gradient(180deg, rgba(95,240,255,.055), rgba(95,240,255,.015));
  box-shadow: inset 0 0 0 1px rgba(95,240,255,.18);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(239,230,210,.82);
}
.pv-brief__hint-k {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--holo);
}
.pv-brief__obj {
  font-size: var(--fs-sm);
  color: var(--paper);
  line-height: 1.55;
  margin: 0;
}
.pv-brief__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--u)*6.4), 1fr));
  gap: calc(var(--u)*.55);
  width: 100%;
  margin: calc(var(--u)*.35) 0;
}
.pv-stat {
  position: relative;
  padding: calc(var(--u)*.55) calc(var(--u)*.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,0) 60%),
    rgba(255,255,255,.022);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.18), inset 0 1px 0 rgba(255,240,200,.07);
  min-width: 0;
}
.pv-stat__k {
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-stat__v {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  color: var(--gold);
  letter-spacing: .04em;
  line-height: 1.15;
}
.pv-stat__v small { font-size: .55em; color: var(--paper-dim); letter-spacing: .1em; }
.pv-stamp {
  position: absolute;
  right: calc(var(--u)*1.2);
  top: calc(var(--u)*1.0);
  transform: rotate(-13deg);
  padding: calc(var(--u)*.22) calc(var(--u)*.6);
  border: 2px solid rgba(255,90,60,.55);
  color: rgba(255,120,92,.72);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .3em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: .82;
  box-shadow: inset 0 0 calc(var(--u)*.6) rgba(255,90,60,.12);
}

/* ------------------------------------------------------------------ *
   8. HUD — one engraved brass-and-glass instrument panel
 * ------------------------------------------------------------------ */
.pv-screen--hud {
  display: block;
  padding: 0;
  pointer-events: none !important;
  /* the hud never scales in/out: ui.js measures its real box every layout and
     a transform would poison getBoundingClientRect. */
  transform: none !important;
}
.pv-screen--hud::before { display: none; }
.pv-hud {
  position: absolute;
  inset: 0;
  /* #pv-ui already applies the safe-area insets, so this is pure gutter. */
  padding: 0 calc(var(--u)*.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
}
#pv-ui[data-screen="pause"] .pv-screen--hud,
#pv-ui[data-screen="hud"]   .pv-screen--hud { opacity: 1; visibility: visible; }
#pv-ui[data-screen="pause"] .pv-hud { filter: saturate(.5) brightness(.6); }

/* ---- the rail the marquee hangs from ------------------------------ *
   A single engraved brass hairline that runs the width of the screen and
   dies away at both edges, with a second finer line 3px under it. ui.js
   parks it exactly on the plate's bottom edge. It reads as one continuous
   line through the console instead of a box floating in the corner.       */
.pv-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(201,162,39,0) 0%, rgba(201,162,39,.10) 12%,
    rgba(201,162,39,.34) 34%, rgba(233,204,126,.46) 50%,
    rgba(201,162,39,.34) 66%, rgba(201,162,39,.10) 88%, rgba(201,162,39,0) 100%);
}
.pv-rail::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 3px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0), rgba(0,0,0,.62) 22%, rgba(0,0,0,.62) 78%, rgba(0,0,0,0));
}

/* ---- the console marquee ------------------------------------------ */
.pv-console {
  position: relative;
  width: min(100%, calc(var(--u) * 44));
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.pv-plate {
  --n:  calc(var(--u) * 0.66);
  --n2: calc(var(--u) * 0.32);
  /* docked to the top edge: square shoulders up top, stepped deco skirt below */
  clip-path: var(--step-clip-hang);
  padding: 0 1.5px 1.5px;
  filter: drop-shadow(0 calc(var(--u)*.42) calc(var(--u)*.95) rgba(0,0,0,.8));
  transition: filter .3s var(--e-out);
}
.pv-plate > .pv-in { clip-path: var(--step-clip-hang); }
.pv-plate__in {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "loop echo mission score pause";
  align-items: stretch;
  padding: calc(var(--u)*.40) calc(var(--u)*.42) calc(var(--u)*.44);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  backdrop-filter: blur(10px) saturate(118%);
  background-color: rgba(8, 11, 17, .78);
}
.pv-plate__in::after {                       /* engraved keyline */
  content: "";
  position: absolute;
  inset: calc(var(--u)*.18);
  inset-block-start: 0;
  border: 1px solid rgba(201,162,39,.15);
  border-top: 0;
  clip-path: var(--step-clip-hang);
  pointer-events: none;
}

/* ---- cells ------------------------------------------------------- */
.pv-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u)*.16);
  padding: calc(var(--u)*.30) calc(var(--u)*.80);
  min-width: 0;
}
.pv-cell + .pv-cell {
  border-left: 1px solid rgba(0,0,0,.8);
  box-shadow: inset 1px 0 0 rgba(255,238,190,.09);
}
.pv-cell__k {
  font-family: var(--font-display);
  font-size: calc(var(--u)*.50);
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: rgba(169,161,145,.78);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  line-height: 1;
  white-space: nowrap;
}

/* ---- 1. loop dial ------------------------------------------------ */
.pv-cell--loop {
  grid-area: loop;
  align-items: center;
  padding: calc(var(--u)*.22) calc(var(--u)*.58);
}
.pv-loop {
  position: relative;
  width: calc(var(--u) * 5.15);
  height: calc(var(--u) * 5.15);
  flex: 0 0 auto;
  --pct: 1;
}
.pv-loop svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.pv-loop__bg  { fill: rgba(4,7,11,.72); stroke: rgba(255,255,255,.06); stroke-width: 1; }
.pv-loop__trk { fill: none; stroke: rgba(255,255,255,.085); stroke-width: 7; }
.pv-loop__tick{ stroke: rgba(201,162,39,.30); stroke-width: 1; }
.pv-loop__tick.is-maj { stroke: rgba(201,162,39,.62); stroke-width: 1.6; }
.pv-loop__glow {
  fill: none;
  stroke: var(--holo);
  stroke-width: 9;
  opacity: .16;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: calc(var(--circ) * (1 - var(--pct)));
  transition: stroke .35s linear;
}
.pv-loop__arc {
  fill: none;
  stroke: var(--holo);
  stroke-width: 6.5;
  stroke-linecap: butt;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: calc(var(--circ) * (1 - var(--pct)));
  filter: drop-shadow(0 0 3px rgba(95,240,255,.7));
  transition: stroke .35s linear;
}
.pv-loop[data-state="warn"] .pv-loop__arc,
.pv-loop[data-state="warn"] .pv-loop__glow { stroke: var(--amber); }
.pv-loop[data-state="warn"] .pv-loop__arc { filter: drop-shadow(0 0 4px rgba(255,171,61,.75)); }
.pv-loop[data-state="danger"] .pv-loop__arc,
.pv-loop[data-state="danger"] .pv-loop__glow { stroke: var(--laser); }
.pv-loop[data-state="danger"] .pv-loop__arc { filter: drop-shadow(0 0 6px rgba(255,59,88,.9)); }
.pv-loop__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pv-loop__sec {
  display: flex;
  align-items: baseline;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  line-height: .92;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
}
.pv-loop__sec b { font-size: calc(var(--u) * 1.62); font-weight: 600; letter-spacing: .005em; }
.pv-loop__sec small {
  font-size: calc(var(--u) * .78);
  color: rgba(239,230,210,.62);
  letter-spacing: .01em;
}
.pv-loop[data-state="warn"] .pv-loop__sec { color: #ffe6bd; }
.pv-loop[data-state="danger"] .pv-loop__sec { color: #ffd3d8; }
.pv-loop[data-state="danger"] .pv-loop__sec b { animation: pv-tick .5s steps(2, jump-none) infinite; }
@keyframes pv-tick { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pv-loop__idx {
  font-family: var(--font-display);
  font-size: calc(var(--u) * .48);
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: .3em;
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
}

/* ---- 2. echo budget --------------------------------------------- */
.pv-cell--echo { grid-area: echo; align-items: flex-start; }
.pv-pips {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*.36);
  padding: calc(var(--u)*.12) 0;
}
.pv-pip {
  position: relative;
  width: calc(var(--u)*.66);
  height: calc(var(--u)*.66);
  flex: 0 0 auto;
  transform: rotate(45deg);
  background: rgba(255,255,255,.035);
  box-shadow:
    inset 0 0 0 1px rgba(95,240,255,.26),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(0,0,0,.7);
}
.pv-pip__c {
  position: absolute;
  inset: calc(var(--u)*.1);
  background: linear-gradient(135deg, #d5ffff, var(--holo) 42%, var(--holo-dim));
  box-shadow: 0 0 calc(var(--u)*.42) rgba(95,240,255,.65);
  transform: scale(.2);
  opacity: 0;
  transition: transform .3s var(--e-snap), opacity .22s var(--e-out);
}
.pv-pip.is-full .pv-pip__c { transform: none; opacity: 1; }
.pv-pip.is-spent { box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 1px 0 rgba(0,0,0,.7); }
.pv-pip.is-spending::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(95,240,255,.55) 34%, rgba(95,240,255,0) 70%);
  animation: pv-spend .58s var(--e-out) both;
  pointer-events: none;
}
@keyframes pv-spend {
  0%   { opacity: 0; transform: scale(.35); }
  18%  { opacity: 1; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.9); }
}
.pv-cell--echo[data-low="1"] .pv-pip.is-full .pv-pip__c {
  background: linear-gradient(135deg, #ffe6c0, var(--amber) 45%, #8a4c10);
  box-shadow: 0 0 calc(var(--u)*.5) rgba(255,171,61,.7);
  animation: pv-lowecho 1.6s var(--e-soft) infinite;
}
@keyframes pv-lowecho { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
.pv-echo__foot {
  display: flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-display);
  font-size: calc(var(--u)*.48);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239,230,210,.55);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  transition: opacity .25s var(--e-out);
  white-space: nowrap;
}
.pv-echo__foot.is-off { opacity: .34; }
.pv-kbd, .pv-echo__glyph {
  font-family: var(--font-num);
  font-size: calc(var(--u)*.5);
  line-height: 1;
  min-width: 1.55em;
  text-align: center;
  padding: .18em .3em;
  color: var(--holo);
  background: rgba(95,240,255,.08);
  box-shadow: inset 0 0 0 1px rgba(95,240,255,.42), 0 1px 0 rgba(0,0,0,.75);
}
.pv-echo__foot.is-off .pv-kbd,
.pv-echo__foot.is-off .pv-echo__glyph {
  color: var(--paper-dim);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
}
#pv-ui[data-touch="1"] .pv-kbd { display: none; }
#pv-ui:not([data-touch="1"]) .pv-echo__glyph { display: none; }
/* On a touch device the rewind affordance IS the thumb button — repeating it
   here left a stray cyan chip loose under the pips. */
#pv-ui[data-touch="1"] .pv-echo__foot { display: none; }
#pv-ui[data-touch="1"] .pv-cell--echo { justify-content: center; }

/* ---- 3. mission -------------------------------------------------- */
.pv-cell--mission {
  grid-area: mission;
  justify-content: center;
  gap: calc(var(--u)*.22);
  padding-right: calc(var(--u)*.9);
}
.pv-vault {
  font-family: var(--font-display);
  font-size: calc(var(--u)*.56);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* overflow:hidden + line-height:1 shaved the ascenders off the caps on
     short viewports; 1.24 gives the glyphs their own box back. */
  line-height: 1.24;
  text-shadow: 0 1px 0 rgba(0,0,0,.95);
}
.pv-objective {
  font-family: var(--font-ui);
  font-size: calc(var(--u)*.76);
  line-height: 1.3;
  text-wrap: pretty;
  letter-spacing: .012em;
  color: rgba(243,236,220,.94);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ---- 4. score ---------------------------------------------------- */
.pv-cell--score {
  grid-area: score;
  align-items: flex-end;
  text-align: right;
  padding-left: calc(var(--u)*.85);
}
.pv-score__v {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: calc(var(--u)*1.62);
  line-height: .98;
  letter-spacing: .02em;
  background-image: linear-gradient(178deg, var(--gold-hot) 2%, var(--gold) 46%, #bf8d2b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.92));
  transition: filter .2s var(--e-out);
}
.pv-cell--score[data-live="1"] .pv-score__v {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.92)) drop-shadow(0 0 calc(var(--u)*.7) rgba(255,199,84,.55));
}
.pv-chipwrap {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*.3);
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
}
.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: calc(var(--u)*.14) calc(var(--u)*.42);
  font-family: var(--font-display);
  font-size: calc(var(--u)*.5);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(239,230,210,.8);
  background: linear-gradient(180deg, rgba(16,22,31,.9), rgba(6,9,14,.8));
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.28), inset 0 1px 0 rgba(255,240,200,.1);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  white-space: nowrap;
}
.pv-chip .pv-num { font-size: 1.16em; color: var(--gold); letter-spacing: .02em; }
.pv-chip--relic { box-shadow: inset 0 0 0 1px rgba(255,207,92,.38), inset 0 1px 0 rgba(255,240,200,.12); }
.pv-chip--relic .pv-chip__gem {
  background: linear-gradient(135deg, rgba(255,243,196,.95), rgba(201,162,39,.85));
  box-shadow: 0 0 calc(var(--u)*.28) rgba(255,200,90,.5);
}
.pv-chip--combo {
  color: var(--holo);
  box-shadow: inset 0 0 0 1px rgba(95,240,255,.42), 0 0 calc(var(--u)*.45) rgba(95,240,255,.16);
}
.pv-chip--combo .pv-num { color: var(--holo); font-size: 1.05em; letter-spacing: .06em; }
.pv-chip.is-hidden { display: none; }
.pv-chip--carry {
  color: var(--gold-hot);
  box-shadow: inset 0 0 0 1px rgba(255,215,110,.5), 0 0 calc(var(--u)*.7) rgba(255,190,70,.22);
  animation: pv-carry 2.4s var(--e-soft) infinite;
}
@keyframes pv-carry { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
.pv-chip__gem {
  width: .62em; height: .62em;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hot), var(--brass));
  box-shadow: 0 0 calc(var(--u)*.36) rgba(255,200,90,.7);
}
.pv-chip--bump { animation: pv-bump .36s var(--e-snap); }
@keyframes pv-bump { 0% { transform: scale(1); } 34% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---- 5. pause ---------------------------------------------------- */
.pv-iconbtn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u)*2.35);
  height: calc(var(--u)*2.35);
  padding: 0;
  border: 0;
  cursor: pointer;
  color: rgba(239,230,210,.86);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%),
    var(--brushed),
    linear-gradient(180deg, #1c242f, #0a0e15);
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,.4),
    inset 0 1px 0 rgba(255,240,200,.18),
    inset 0 -2px 0 rgba(0,0,0,.8),
    0 calc(var(--u)*.16) calc(var(--u)*.4) rgba(0,0,0,.65);
  --n: calc(var(--u)*.4); --n2: calc(var(--u)*.2);
  clip-path: var(--step-clip);
  transition: transform .14s var(--e-out), color .14s var(--e-out), box-shadow .14s var(--e-out);
}
.pv-iconbtn svg { width: 42%; height: 42%; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .pv-iconbtn:hover {
    color: var(--gold-hot);
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1px rgba(255,215,110,.7),
      inset 0 1px 0 rgba(255,240,200,.26),
      inset 0 -2px 0 rgba(0,0,0,.8),
      0 calc(var(--u)*.22) calc(var(--u)*.5) rgba(0,0,0,.7);
  }
}
.pv-iconbtn:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(201,162,39,.5), inset 0 2px 5px rgba(0,0,0,.85); }
.pv-console__pause {
  grid-area: pause;
  align-self: center;
  margin-left: calc(var(--u)*.5);
  flex: 0 0 auto;
}

/* ---- alert hazard bar, tucked under the plate -------------------- */
.pv-alert {
  --pct: 0;
  /* absolutely placed so an idle alert bar never inflates the measured
     height of the chrome — the room gets those pixels back. */
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  width: min(calc(var(--u)*17), 62%);
  height: calc(var(--u)*.62);
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,120,80,.75), rgba(90,22,12,.8));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--u)*.5) 100%, calc(var(--u)*.5) 100%);
  opacity: 0;
  transform: translate(-50%, calc(var(--u)*-.45));
  transition: opacity .28s var(--e-out), transform .28s var(--e-out);
  filter: drop-shadow(0 calc(var(--u)*.2) calc(var(--u)*.5) rgba(0,0,0,.7));
}
.pv-alert.is-on { opacity: 1; transform: translate(-50%, 0); }
.pv-alert__t { position: relative; height: 100%; background: rgba(3,5,8,.9); overflow: hidden; }
.pv-alert__f {
  position: absolute; inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--pct));
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.26) 0 4px, rgba(0,0,0,0) 4px 9px),
    linear-gradient(90deg, #8f2c12, var(--alarm) 62%, #ffd0b0);
  box-shadow: 0 0 calc(var(--u)*.55) rgba(255,90,60,.6);
}
.pv-alert__lbl {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-display);
  font-size: calc(var(--u)*.44);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
  pointer-events: none;
  white-space: nowrap;
}
.pv-alert[data-state="high"] { animation: pv-alertflash .5s steps(2, jump-none) infinite; }
@keyframes pv-alertflash { 0%,100% { filter: none; } 50% { filter: brightness(1.6); } }

/* ---- console states ---------------------------------------------- */
.pv-console[data-state="warn"] > .pv-plate {
  filter: drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*1.1) rgba(0,0,0,.78))
          drop-shadow(0 0 calc(var(--u)*.9) rgba(255,171,61,.20));
}
.pv-console[data-state="danger"] > .pv-plate {
  filter: drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*1.1) rgba(0,0,0,.78))
          drop-shadow(0 0 calc(var(--u)*1.3) rgba(255,59,88,.45));
  animation: pv-conpulse .62s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pv-conpulse {
  0%, 100% { transform: none; }
  42%      { transform: translateY(calc(var(--u)*.055)); }
}
.pv-console[data-state="danger"] .pv-plate__in {
  box-shadow:
    inset 0 1px 0 rgba(255,238,190,.16),
    inset 0 -1px 0 rgba(0,0,0,.9),
    inset 0 0 calc(var(--u)*2.2) rgba(255,40,60,.22);
}
.pv-console[data-alarm="1"] .pv-plate__in::after { border-color: rgba(255,90,60,.5); }
/* ------------------------------------------------------------------ *
   9. TOUCH CONTROLS  (right zone only — never over the left 62%)
 * ------------------------------------------------------------------ */
.pv-touch {
  position: absolute;
  left: 60%;
  right: 0;
  bottom: 0;
  height: min(46%, calc(var(--u) * 12));
  pointer-events: none;
  display: none;
}
#pv-ui[data-touch="1"][data-screen="hud"] .pv-touch { display: block; }
.pv-tbtn {
  position: absolute;
  pointer-events: auto;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  overflow: hidden;
  transition: transform .09s var(--e-out), filter .12s var(--e-out);
}
.pv-tbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.04) 0 3deg, rgba(0,0,0,.04) 3deg 6deg),
    radial-gradient(circle at 50% 50%, rgba(20,27,37,.86), rgba(6,9,14,.78));
  box-shadow:
    inset 0 0 0 2px rgba(201,162,39,.42),
    inset 0 2px 0 rgba(255,240,200,.16),
    inset 0 -3px 10px rgba(0,0,0,.7),
    0 6px 18px rgba(0,0,0,.55);
}
.pv-tbtn > * { position: relative; }
.pv-tbtn.is-down { transform: scale(.94); }
.pv-tbtn.is-down::before { filter: brightness(1.5); box-shadow: inset 0 0 0 2px rgba(255,215,110,.8), inset 0 3px 12px rgba(0,0,0,.8); }
.pv-tbtn--action {
  right: calc(var(--u) * 1.1);
  bottom: calc(var(--u) * 2.0);
  width: max(64px, calc(var(--u) * 6.2));
  height: max(64px, calc(var(--u) * 6.2));
  color: var(--gold);
}
.pv-tbtn--rewind {
  right: calc(var(--u) * 8.3);
  bottom: calc(var(--u) * 4.1);
  width: max(54px, calc(var(--u) * 5.2));
  height: max(54px, calc(var(--u) * 5.2));
  color: var(--holo);
}
.pv-tbtn--rewind::before { box-shadow: inset 0 0 0 2px rgba(95,240,255,.45), inset 0 2px 0 rgba(200,255,255,.18), inset 0 -3px 10px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.55); }
/* Explicit sizes with a legibility floor. These used to inherit the root
   12px because the old `#pv-ui button { font: inherit }` reset out-specified
   every class here, and "REWIND" spilled straight out of its own button. */
.pv-tbtn__glyph {
  font-size: max(19px, calc(var(--u) * 1.5));
  line-height: 1;
  margin-bottom: .06em;
}
.pv-tbtn__lbl {
  font-size: max(9px, calc(var(--u) * .5));
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em;
  max-width: 92%;
  overflow: hidden;
  white-space: nowrap;
  opacity: .88;
}
.pv-tbtn--rewind .pv-tbtn__glyph { font-size: max(17px, calc(var(--u) * 1.3)); }
.pv-tbtn--action .pv-tbtn__lbl { font-size: max(10px, calc(var(--u) * .56)); }
.pv-tbtn[disabled] { opacity: .38; pointer-events: none; }

/* ------------------------------------------------------------------ *
   10. PAUSE / RESULTS / HELP
 * ------------------------------------------------------------------ */
.pv-sheet { width: min(calc(var(--u)*26), 94vw); }
.pv-sheet .pv-in { padding: calc(var(--pad)*1.2) calc(var(--pad)*1.25); }
.pv-sheet__title { font-size: var(--fs-lg); text-align: center; }
.pv-sheet__menu { display: flex; flex-direction: column; gap: calc(var(--u)*.45); width: 100%; margin-top: calc(var(--u)*.6); }
.pv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*.45); }

/* results */
.pv-res__head { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*.2); }
.pv-res__verdict {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
}
.pv-res--win .pv-res__verdict {
  background-image: linear-gradient(178deg, #fffaea, var(--gold) 55%, #b0801f);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.85));
}
.pv-res--lose .pv-res__verdict { color: #ff9e86; text-shadow: 0 2px 0 rgba(0,0,0,.85), 0 0 calc(var(--u)*1.1) rgba(255,90,60,.35); }
.pv-lines { width: 100%; display: flex; flex-direction: column; gap: 1px; margin: calc(var(--u)*.5) 0; }
.pv-line {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u)*.5);
  padding: calc(var(--u)*.28) calc(var(--u)*.15);
  opacity: 0;
  transform: translateY(calc(var(--u)*.35));
  border-bottom: 1px solid rgba(201,162,39,.10);
}
.pv-line.is-in { animation: pv-rise .38s var(--e-out) both; }
.pv-line__k {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-line__dots { flex: 1 1 auto; height: 1px; min-width: calc(var(--u)*.8); background-image: radial-gradient(circle, rgba(201,162,39,.45) 0.5px, transparent 0.6px); background-size: 5px 1px; background-repeat: repeat-x; }
.pv-line__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--paper); white-space: nowrap; }
.pv-line--bonus .pv-line__v { color: var(--teal); }
.pv-line--zero { opacity: .55; }
.pv-line--zero .pv-line__v { color: var(--paper-dim); }
.pv-line--plain .pv-line__v { color: var(--paper); }
.pv-line--run { border-bottom: 0; }
.pv-line--run .pv-line__k { color: var(--paper-dim); }
.pv-line--run .pv-line__v { color: var(--paper); font-size: var(--fs-md); }
.pv-mult {
  display: inline-block;
  margin-left: .7em;
  padding: 0 .45em;
  font-family: var(--font-num);
  font-size: .88em;
  letter-spacing: .06em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hot), var(--brass));
  box-shadow: 0 0 calc(var(--u)*.6) rgba(255,200,90,.3);
  vertical-align: baseline;
}
.pv-res__next {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: calc(var(--u)*.2);
}
.pv-res__next b { color: var(--holo); letter-spacing: .16em; }
.pv-line--total { border-bottom: 0; margin-top: calc(var(--u)*.3); padding-top: calc(var(--u)*.5); border-top: 1px solid rgba(201,162,39,.35); }
.pv-line--total .pv-line__k { color: var(--brass); font-size: var(--fs-sm); }
.pv-line--total .pv-line__v { font-size: var(--fs-xl); color: var(--gold); text-shadow: 0 0 calc(var(--u)*.9) rgba(255,190,70,.28); }
.pv-res__best {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim);
}
.pv-res__best b { color: var(--gold); }
.pv-newbest {
  display: inline-block;
  padding: calc(var(--u)*.14) calc(var(--u)*.5);
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hot), var(--brass));
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .26em;
  text-transform: uppercase;
  box-shadow: 0 0 calc(var(--u)*.9) rgba(255,200,90,.4);
  animation: pv-shimmer 2.2s var(--e-soft) infinite;
}
@keyframes pv-shimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
.pv-submit {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--paper-dim);
  min-height: 1.6em; letter-spacing: .06em;
}
.pv-submit[data-state="ok"] { color: var(--teal); }
.pv-submit[data-state="err"] { color: #ff9e86; }
.pv-spin {
  width: .85em; height: .85em; border-radius: 50%;
  border: 2px solid rgba(95,240,255,.25);
  border-top-color: var(--holo);
  animation: pv-rot .8s linear infinite;
  flex: 0 0 auto;
}
@keyframes pv-rot { to { transform: rotate(360deg); } }

/* help */
.pv-help { width: min(calc(var(--u)*34), 96vw); }
.pv-help .pv-in { padding: calc(var(--pad)*1.1) calc(var(--pad)*1.2); display: flex; flex-direction: column; min-height: 0; }
.pv-help__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--u)*11), 1fr));
  gap: calc(var(--u)*.9);
  width: 100%;
}
.pv-keys { display: flex; flex-direction: column; gap: calc(var(--u)*.28); }
.pv-keys__row { display: flex; align-items: center; gap: calc(var(--u)*.5); font-size: var(--fs-xs); }
.pv-keys__row .pv-k {
  font-family: var(--font-num);
  min-width: calc(var(--u)*1.9);
  text-align: center;
  padding: calc(var(--u)*.14) calc(var(--u)*.34);
  color: var(--holo);
  background: rgba(95,240,255,.07);
  box-shadow: inset 0 0 0 1px rgba(95,240,255,.36), 0 1px 0 rgba(0,0,0,.7);
  font-size: var(--fs-xxs);
  letter-spacing: .08em;
  white-space: nowrap;
}
.pv-keys__row span:last-child { color: var(--paper-dim); }

/* CSS time-loop diagram */
.pv-diagram { display: flex; flex-direction: column; gap: calc(var(--u)*.5); width: 100%; }
.pv-loops { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*.5); }
.pv-loopcell {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(160deg, #131822, #090d13);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.22), inset 0 0 calc(var(--u)*1.4) rgba(0,0,0,.7);
  overflow: hidden;
}
.pv-loopcell__tag {
  position: absolute; left: 6%; top: 5%;
  font-family: var(--font-display); font-size: calc(var(--u)*.5);
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
}
.pv-dot {
  position: absolute;
  width: 14%; height: 14%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pv-dot--you { background: radial-gradient(circle at 36% 32%, #fff6d8, var(--gold) 45%, #8a641b); box-shadow: 0 0 calc(var(--u)*.6) rgba(255,200,90,.6); }
.pv-dot--echo { background: radial-gradient(circle at 36% 32%, #d8ffff, var(--holo) 45%, var(--holo-deep)); box-shadow: 0 0 calc(var(--u)*.6) rgba(95,240,255,.55); opacity: .85; }
.pv-dot--goal { background: none; box-shadow: inset 0 0 0 2px rgba(255,207,92,.6); border-radius: 0; transform: translate(-50%,-50%) rotate(45deg); }
.pv-path {
  position: absolute;
  height: 2px;
  transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px);
  opacity: .5;
}
.pv-legend { display: flex; flex-wrap: wrap; gap: calc(var(--u)*.3) calc(var(--u)*.9); font-size: var(--fs-xxs); color: var(--paper-dim); letter-spacing: .1em; }
.pv-legend i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .4em; vertical-align: baseline; }
.pv-help__p { font-size: var(--fs-xs); color: var(--paper-dim); line-height: 1.6; margin: 0; }
.pv-help__p b { color: var(--paper); font-weight: 600; }
.pv-help__p .hi { color: var(--holo); }
.pv-help__p .gd { color: var(--gold); }

/* ------------------------------------------------------------------ *
   11. SETTINGS
 * ------------------------------------------------------------------ */
.pv-set { display: flex; flex-direction: column; gap: calc(var(--u)*.1); width: 100%; }
.pv-setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: calc(var(--u)*.48) 0;
  border-bottom: 1px solid rgba(201,162,39,.12);
  min-height: calc(var(--u)*2.2);
}
.pv-setrow:last-child { border-bottom: 0; }
.pv-setrow__k {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  flex: 0 1 auto;
  min-width: 0;
}
.pv-setrow__c { display: flex; align-items: center; gap: calc(var(--u)*.4); flex: 0 0 auto; }

/* toggle */
.pv-toggle {
  position: relative;
  pointer-events: auto;
  width: calc(var(--u)*2.9);
  height: calc(var(--u)*1.35);
  padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #05080c, #10151d);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.3), inset 0 2px 4px rgba(0,0,0,.85);
  transition: box-shadow .2s var(--e-out);
}
.pv-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: calc(var(--u)*1.35 - 4px);
  height: calc(var(--u)*1.35 - 4px);
  background: linear-gradient(180deg, #6d7789, #333b48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.8);
  transition: transform .22s var(--e-snap), background .22s var(--e-out);
}
.pv-toggle[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(255,215,110,.6), inset 0 2px 4px rgba(0,0,0,.7), 0 0 calc(var(--u)*.6) rgba(255,190,70,.2); }
.pv-toggle[aria-checked="true"]::after {
  transform: translateX(calc(var(--u)*1.55));
  background: linear-gradient(180deg, var(--gold-hot), var(--brass));
}

/* slider */
.pv-slider {
  pointer-events: auto;
  -webkit-appearance: none; appearance: none;
  width: calc(var(--u)*7);
  max-width: 34vw;
  height: calc(var(--u)*1.0);
  background: transparent;
  cursor: pointer;
}
.pv-slider::-webkit-slider-runnable-track {
  height: calc(var(--u)*.4);
  background:
    linear-gradient(90deg, var(--brass) 0 calc(var(--fill,50%)), rgba(255,255,255,.09) calc(var(--fill,50%)) 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.85), inset 0 0 0 1px rgba(201,162,39,.22);
}
.pv-slider::-moz-range-track {
  height: calc(var(--u)*.4);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.85), inset 0 0 0 1px rgba(201,162,39,.22);
}
.pv-slider::-moz-range-progress { height: calc(var(--u)*.4); background: var(--brass); }
.pv-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: calc(var(--u)*.92); height: calc(var(--u)*.92);
  margin-top: calc(var(--u)*-.26);
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hot), var(--brass));
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 2px 5px rgba(0,0,0,.7);
}
.pv-slider::-moz-range-thumb {
  width: calc(var(--u)*.8); height: calc(var(--u)*.8);
  border: 0;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hot), var(--brass));
  box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 2px 5px rgba(0,0,0,.7);
}
.pv-setrow__v {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--brass);
  min-width: 3.2em;
  text-align: right;
}

/* segmented (quality) */
.pv-seg {
  display: inline-flex;
  padding: 1.5px;
  gap: 1.5px;
  background: linear-gradient(180deg, rgba(201,162,39,.5), rgba(80,62,12,.5));
}
.pv-seg__b {
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  padding: calc(var(--u)*.3) calc(var(--u)*.62);
  font-family: var(--font-display);
  font-size: var(--fs-xxs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: linear-gradient(180deg, #171d27, #0b0f16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: color .16s var(--e-out), background .16s var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .pv-seg__b:hover { color: var(--paper); } }
.pv-seg__b[aria-pressed="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hot), var(--brass));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 3px rgba(0,0,0,.35);
  text-shadow: none;
}

/* ------------------------------------------------------------------ *
   12. TOASTS / MODALS
 * ------------------------------------------------------------------ */
.pv-toasts {
  position: absolute;
  left: 50%;
  /* --pv-ins-b is the measured height of the thumb cluster, published by
     ui.js. Toasts stack above it instead of underneath it. */
  bottom: calc(var(--safe-b) + var(--pv-ins-b, 0px) + var(--u) * 1.1);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: calc(var(--u)*.35);
  pointer-events: none;
  width: min(calc(var(--u)*26), 92vw);
  z-index: 6;
}
.pv-toast {
  --n: calc(var(--u)*.38); --n2: calc(var(--u)*.19);
  max-width: 100%;
  padding: 1.5px;
  clip-path: var(--step-clip);
  background: linear-gradient(180deg, rgba(201,162,39,.7), rgba(80,62,12,.7));
  animation: pv-toast-in .38s var(--e-out) both;
  filter: drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.9) rgba(0,0,0,.7));
}
.pv-toast.is-out { animation: pv-toast-out .28s var(--e-in) both; }
.pv-toast > span {
  display: block;
  clip-path: var(--step-clip);
  padding: calc(var(--u)*.42) calc(var(--u)*1.0);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-align: center;
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(14,19,27,.96), rgba(6,9,14,.96));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@keyframes pv-toast-in {
  from { opacity: 0; transform: translateY(calc(var(--u)*.9)) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes pv-toast-out {
  to { opacity: 0; transform: translateY(calc(var(--u)*-.4)) scale(.98); }
}

.pv-modalwrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + var(--u)) calc(var(--safe-r) + var(--u))
           calc(var(--safe-b) + var(--u)) calc(var(--safe-l) + var(--u));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--e-in), visibility 0s linear .22s;
  z-index: 8;
}
.pv-modalwrap.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .3s var(--e-out), visibility 0s;
}
.pv-modalwrap::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(2,4,7,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pv-modal {
  position: relative;
  width: min(calc(var(--u)*24), 94vw);
  max-height: 100%;
  transform: translateY(calc(var(--u)*1.1)) scale(.97);
  transition: transform .34s var(--e-out);
}
.pv-modalwrap.is-on .pv-modal { transform: none; }
.pv-modal .pv-in { padding: calc(var(--pad)*1.15); display: flex; flex-direction: column; gap: calc(var(--u)*.55); min-height: 0; }
.pv-modal__title { font-size: var(--fs-md); text-align: center; }
.pv-modal__body { font-size: var(--fs-xs); color: var(--paper-dim); line-height: 1.6; text-align: center; }
.pv-modal__btns { display: flex; gap: calc(var(--u)*.45); flex-wrap: wrap; }
.pv-modal__btns .pv-btn { flex: 1 1 calc(var(--u)*7); }
.pv-input {
  pointer-events: auto;
  width: 100%;
  padding: calc(var(--u)*.5) calc(var(--u)*.7);
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  background: linear-gradient(180deg, #05080c, #0d121a);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.35), inset 0 2px 5px rgba(0,0,0,.8);
  transition: box-shadow .2s var(--e-out);
}
.pv-input::placeholder { color: rgba(169,161,145,.4); letter-spacing: .18em; }
.pv-input:focus { box-shadow: inset 0 0 0 1px var(--brass), inset 0 2px 5px rgba(0,0,0,.8), 0 0 calc(var(--u)*.8) rgba(255,190,70,.22); }

/* ------------------------------------------------------------------ *
   13. FLASH
 * ------------------------------------------------------------------ */
.pv-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9;
  mix-blend-mode: screen;
}
.pv-flash[data-kind="alarm"] {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(255,40,60,.05), rgba(255,40,60,.42) 100%);
}
.pv-flash[data-kind="rewind"] {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(95,240,255,.30), rgba(20,90,140,.12) 78%);
}
.pv-flash[data-kind="grab"] {
  background:
    radial-gradient(100% 80% at 50% 55%, rgba(255,215,110,.34), rgba(255,180,60,.04) 72%);
}
.pv-flash.is-on { animation: pv-flash .46s cubic-bezier(.12,.72,.28,1) both; }
@keyframes pv-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------------------ *
   14. RESPONSIVE
 * ------------------------------------------------------------------ */

/* --- tablet / small laptop: console keeps one row but tightens --- */
@media (max-width: 1100px) {
  .pv-console { width: min(100%, calc(var(--u) * 44)); }
  .pv-cell { padding-left: calc(var(--u)*.62); padding-right: calc(var(--u)*.62); }
}

/* --- below ~700px the console folds into two rows.
   The loop dial is a single grid item that spans both rows because the area
   name appears twice in the template — never with `grid-row: span 2`, which
   is what used to stack the dial straight on top of the echo pips and the
   REWIND caption at 320 and 390 CSS px.                                    */
@media (max-width: 700px) {
  /* edge to edge: a 6px sliver of gameplay either side of the bar reads as a
     mistake, a full-bleed band reads as chrome. */
  .pv-hud { padding: 0; }
  /* the bar already spans the screen; a second rule under it just doubles up */
  .pv-rail { display: none; }
  .pv-console { width: 100%; }
  .pv-plate { padding-left: 0; padding-right: 0; }
  .pv-plate__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "loop mission pause"
      "loop echo    score";
    column-gap: 0;
    row-gap: calc(var(--u)*.26);
    padding: calc(var(--u)*.34) calc(var(--u)*.34) calc(var(--u)*.42);
  }
  .pv-cell { padding: calc(var(--u)*.14) calc(var(--u)*.5); }
  .pv-cell + .pv-cell { border-left: 0; box-shadow: none; }

  .pv-cell--loop {
    align-self: center;
    padding: 0 calc(var(--u)*.62) 0 calc(var(--u)*.26);
    border-right: 1px solid rgba(0,0,0,.8);
    box-shadow: inset -1px 0 0 rgba(255,238,190,.09);
  }
  .pv-cell--mission {
    justify-content: center;
    padding: calc(var(--u)*.1) calc(var(--u)*.5) calc(var(--u)*.22) calc(var(--u)*.66);
  }
  .pv-cell--echo,
  .pv-cell--score {
    border-top: 1px solid rgba(0,0,0,.78);
    box-shadow: inset 0 1px 0 rgba(255,238,190,.075);
    padding-top: calc(var(--u)*.3);
  }
  .pv-cell--echo { padding-left: calc(var(--u)*.66); justify-content: center; }
  .pv-cell--echo .pv-cell__k { display: none; }
  .pv-cell--score {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--u)*.42);
    padding-left: calc(var(--u)*.5);
  }
  .pv-cell--score .pv-cell__k { display: none; }
  .pv-console__pause {
    align-self: center;
    justify-self: end;
    margin: calc(var(--u)*.14) calc(var(--u)*.2) 0 calc(var(--u)*.34);
  }
  /* The vault name is the brief's job. In play, the live objective is the
     only line in this cell that earns the width. */
  .pv-vault { display: none; }
  .pv-objective {
    font-size: max(11px, calc(var(--u)*.9));
    line-height: 1.26;
    -webkit-line-clamp: 2; line-clamp: 2;
  }
  .pv-score__v { font-size: calc(var(--u)*1.3); }
  .pv-pips { gap: calc(var(--u)*.32); padding: 0; }
  .pv-alert { width: min(calc(var(--u)*15), 58%); }
}

/* --- short viewports (phone landscape, 844x390) --- */
@media (max-height: 470px) {
  #pv-ui { --u: clamp(11px, calc(0.22vw + 9.4px), 16px); }
  .pv-logo__main { font-size: clamp(26px, 7.2vh, 54px); }
  .pv-logo__vault { font-size: clamp(11px, 3.0vh, 22px); letter-spacing: .5em; text-indent: .5em; }
  .pv-logo { padding: calc(var(--u)*.4) calc(var(--u)*1.2); }
  .pv-logo__arc { display: none; }
  .pv-tagline { margin-top: calc(var(--u)*.2); }
  .pv-menu { width: min(calc(var(--u)*15), 60vw); gap: calc(var(--u)*.34); margin-top: calc(var(--u)*.5); }
  .pv-best { margin-top: calc(var(--u)*.4); }
  .pv-screen__body { gap: calc(var(--u)*.35); }
  .pv-card > .pv-in { padding: calc(var(--pad)*.85) calc(var(--pad)*1.0); }
  .pv-help__cols { grid-template-columns: 1fr 1fr; }
  /* thumbs sit in the bottom-right corner; keep the cluster short so the
     bottom inset it costs the camera stays small on a 390px-tall window. */
  .pv-tbtn--action {
    width: max(58px, calc(var(--u)*5.0)); height: max(58px, calc(var(--u)*5.0));
    right: calc(var(--u)*.9); bottom: calc(var(--u)*.9);
  }
  .pv-tbtn--rewind {
    width: max(52px, calc(var(--u)*4.4)); height: max(52px, calc(var(--u)*4.4));
    right: calc(var(--u)*7.2); bottom: calc(var(--u)*2.3);
  }
  .pv-touch { height: min(52%, calc(var(--u)*9)); }
  .pv-loop { width: calc(var(--u)*4.3); height: calc(var(--u)*4.3); }
  .pv-loop__sec b { font-size: calc(var(--u)*1.34); }
  .pv-loop__sec small { font-size: calc(var(--u)*.64); }
  .pv-plate__in { padding: calc(var(--u)*.3) calc(var(--u)*.34) calc(var(--u)*.34); }
  .pv-cell { padding-top: calc(var(--u)*.18); padding-bottom: calc(var(--u)*.18); }
  .pv-objective { -webkit-line-clamp: 1; line-clamp: 1; }
  .pv-alert { height: calc(var(--u)*.5); }
}

/* --- landscape phones: title menu becomes 2 columns --- */
@media (max-height: 430px) and (orientation: landscape) {
  .pv-menu { display: grid; grid-template-columns: 1fr 1fr; width: min(calc(var(--u)*24), 78vw); }
  .pv-links { margin-top: calc(var(--u)*.4); }
}

/* --- phones: drop the relic word, the dial shrinks a notch --- */
@media (max-width: 470px) {
  .pv-loop { width: calc(var(--u)*4.7); height: calc(var(--u)*4.7); }
  .pv-loop__sec b { font-size: calc(var(--u)*1.46); }
  .pv-loop__sec small { font-size: calc(var(--u)*.68); }
  .pv-chip--relic .pv-chip__k { display: none; }
  .pv-chip { padding: calc(var(--u)*.12) calc(var(--u)*.36); }
}

/* --- narrow phones --- */
@media (max-width: 380px) {
  #pv-ui { --u: 12px; }
  .pv-logo__vault { letter-spacing: .44em; text-indent: .44em; }
  .pv-brief__grid { grid-template-columns: 1fr 1fr; }
  .pv-modal__btns .pv-btn { flex: 1 1 100%; }
  .pv-cell { padding-left: calc(var(--u)*.42); padding-right: calc(var(--u)*.42); }
  .pv-cell--loop { padding: 0 calc(var(--u)*.5) 0 calc(var(--u)*.16); }
  .pv-cell--mission { padding-left: calc(var(--u)*.52); padding-right: calc(var(--u)*.34); }
  .pv-cell--echo { padding-left: calc(var(--u)*.52); }
  .pv-loop { width: calc(var(--u)*4.3); height: calc(var(--u)*4.3); }
  .pv-loop__sec b { font-size: calc(var(--u)*1.36); }
  .pv-objective { font-size: max(10px, calc(var(--u)*.84)); }
  .pv-echo__foot .pv-echo__word { display: none; }
}

/* --- tablets and up: give the help two columns --- */
@media (min-width: 900px) {
  .pv-help__cols { grid-template-columns: 1.05fr 1fr; }
}

/* --- 4K / very large: scale HUD up and pull it inward so it stays composed --- */
@media (min-width: 2200px) {
  #pv-ui { --u: clamp(20px, calc(0.30vw + 14px), 30px); }
  .pv-screen__body { max-width: calc(var(--u) * 34); }
  .pv-console { width: min(100%, calc(var(--u) * 42)); }
  .pv-plate__in { padding: calc(var(--u)*.46) calc(var(--u)*.5) calc(var(--u)*.5); }
}
@media (min-width: 3200px) {
  #pv-ui { --u: 34px; }
  .pv-logo__main { font-size: clamp(96px, 8vw, 200px); }
  .pv-logo__vault { font-size: clamp(34px, 3.1vw, 72px); }
}

/* ------------------------------------------------------------------ *
   15. REDUCED MOTION
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #pv-ui:not([data-motion="full"]) *,
  #pv-ui:not([data-motion="full"]) *::before,
  #pv-ui:not([data-motion="full"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  #pv-ui:not([data-motion="full"]) .pv-screen.is-on .pv-stagger > * { animation: none; opacity: 1; transform: none; }
  #pv-ui:not([data-motion="full"]) .pv-line.is-in { animation: none; opacity: 1; transform: none; }
  #pv-ui:not([data-motion="full"]) .pv-flash.is-on { animation: pv-flash-rm .3s linear both; }
}
#pv-ui[data-motion="reduce"] *,
#pv-ui[data-motion="reduce"] *::before,
#pv-ui[data-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
#pv-ui[data-motion="reduce"] .pv-screen.is-on .pv-stagger > * { animation: none; opacity: 1; transform: none; }
#pv-ui[data-motion="reduce"] .pv-line.is-in { animation: none; opacity: 1; transform: none; }
#pv-ui[data-motion="reduce"] .pv-flash.is-on { animation: pv-flash-rm .3s linear both !important; }
@keyframes pv-flash-rm { 0% { opacity: 0; } 20% { opacity: .42; } 100% { opacity: 0; } }

/* Forced colors / high contrast safety net */
@media (forced-colors: active) {
  .pv-btn > span, .pv-chip, .pv-card > .pv-in { forced-color-adjust: none; }
}