:root {
    --bg-0: #04040c;
    --bg-1: #0a0a1e;
    --ink: #e8ecff;
    --ink-dim: #8a93b8;
    --mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --info: #4cc9f0;
    --ok: #2dd4bf;
    --warn: #ffb703;
    --crit: #ff4d6d;
    --card-w: 640px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; overflow: hidden; }

  body {
    background: radial-gradient(1200px 800px at 70% -10%, #14143a 0%, transparent 60%),
                radial-gradient(1000px 700px at 10% 110%, #0e1f33 0%, transparent 55%),
                linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    color: var(--ink);
    font-family: var(--sans);
    user-select: none;
    -webkit-user-select: none;
  }
  body.hand-gating #hud,
  body.hand-gating #scene,
  body.hand-gating #drawer {
    filter: blur(6px) brightness(.58);
  }
  body.hand-gating #handLayer {
    z-index: 95;
  }
  body.hand-gating .hand-3d-label {
    background: rgba(3,4,14,.86);
    box-shadow: 0 0 22px -8px currentColor;
  }

  #stars { position: fixed; inset: 0; z-index: 0; }

  /* perspective grid floor */
  #floor {
    position: fixed; left: -50%; right: -50%; bottom: -12vh; height: 46vh;
    z-index: 0; pointer-events: none;
    background:
      linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(76,201,240,.28) 100%) 0 0 / 100% 48px,
      linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(76,201,240,.28) 100%) 0 0 / 48px 100%;
    transform: perspective(600px) rotateX(62deg);
    transform-origin: 50% 0;
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 96%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 96%);
    opacity: .35;
  }

  .hand-gate {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    padding: 28px;
    background:
      linear-gradient(rgba(76,201,240,.035) 1px, transparent 1px) 0 0 / 72px 72px,
      linear-gradient(90deg, rgba(76,201,240,.028) 1px, transparent 1px) 0 0 / 72px 72px,
      radial-gradient(ellipse at 50% 43%, rgba(76,201,240,.2), transparent 36%),
      linear-gradient(180deg, rgba(3,4,14,.92), rgba(4,4,12,.98));
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .hand-gate.active {
    opacity: 1;
    pointer-events: auto;
  }
  .hand-gate[hidden] { display: none; }
  .gate-shell {
    position: relative;
    width: min(760px, 92vw);
    min-height: min(760px, 86vh);
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
    gap: clamp(14px, 2.2vh, 22px);
    isolation: isolate;
  }
  .gate-shell::before {
    content: "";
    position: absolute;
    inset: 13% 0 19%;
    z-index: -1;
    background:
      linear-gradient(90deg, transparent 0 7%, rgba(76,201,240,.1) 15%, transparent 25% 75%, rgba(45,212,191,.08) 85%, transparent 93%),
      repeating-linear-gradient(90deg, transparent 0 30px, rgba(76,201,240,.08) 31px, transparent 32px);
    mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 52%, transparent 74%);
    opacity: .68;
  }
  .gate-title {
    text-align: center;
    font: 800 14px/1 var(--mono);
    letter-spacing: .28em;
    color: var(--ink);
    text-shadow: 0 0 24px rgba(76,201,240,.28);
  }
  .gate-title small {
    display: block;
    margin-top: 12px;
    font: 600 10px/1.4 var(--mono);
    letter-spacing: .14em;
    color: var(--ink-dim);
  }
  .gate-scanner {
    --scan-c: var(--info);
    position: relative;
    width: min(540px, 78vw, 56vh);
    aspect-ratio: .78;
    display: grid;
    place-items: center;
    border-radius: 32px;
    overflow: hidden;
    background:
      linear-gradient(rgba(76,201,240,.08) 1px, transparent 1px) 0 0 / 34px 34px,
      linear-gradient(90deg, rgba(76,201,240,.07) 1px, transparent 1px) 0 0 / 34px 34px,
      radial-gradient(ellipse at 50% 45%, rgba(182,246,255,.16), rgba(76,201,240,.055) 37%, transparent 68%),
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 42%, rgba(45,212,191,.045));
    border: 1px solid rgba(140,232,255,.38);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 0 0 10px rgba(76,201,240,.035) inset,
      0 36px 90px -42px rgba(0,0,0,.95),
      0 0 95px -30px var(--scan-c);
  }
  .gate-scanner::before {
    content: "";
    position: absolute; inset: 7.5%;
    border-radius: 26px;
    border: 1px solid rgba(190,245,255,.26);
    background:
      linear-gradient(90deg, transparent 49.7%, rgba(190,245,255,.22) 50%, transparent 50.3%),
      linear-gradient(180deg, transparent 49.7%, rgba(190,245,255,.18) 50%, transparent 50.3%);
    box-shadow:
      inset 0 0 42px -24px var(--scan-c),
      0 0 44px -30px var(--scan-c);
    opacity: .88;
  }
  .gate-scanner::after {
    content: "";
    position: absolute; left: 6%; right: 6%; top: -20%;
    height: 18%;
    background:
      linear-gradient(180deg, transparent, rgba(76,201,240,.1) 14%, rgba(76,201,240,.52) 44%, rgba(255,255,255,.8) 50%, rgba(45,212,191,.48) 56%, rgba(76,201,240,.08) 84%, transparent),
      linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    filter: blur(.25px) drop-shadow(0 0 24px var(--scan-c));
    mix-blend-mode: screen;
    animation: gateScan 2.05s cubic-bezier(.45,0,.25,1) infinite;
  }
  @keyframes gateScan {
    0% { transform: translateY(0); opacity: .1; }
    16% { opacity: 1; }
    84% { opacity: 1; }
    100% { transform: translateY(760%); opacity: .1; }
  }
  .gate-scan-plane {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    pointer-events: none;
    opacity: .56;
    background:
      conic-gradient(from 270deg, rgba(76,201,240,.02), rgba(76,201,240,.32), rgba(45,212,191,.08), rgba(76,201,240,.02) 58%, transparent 60%),
      radial-gradient(circle, transparent 0 47%, rgba(190,245,255,.3) 47.4% 47.8%, transparent 48.2% 100%);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 25% 63%, transparent 74%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 25% 63%, transparent 74%);
    animation: gateRadar 7s linear infinite;
  }
  .gate-scan-plane::before,
  .gate-scan-plane::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    inset: 12%;
    border: 1px solid rgba(190,245,255,.2);
  }
  .gate-scan-plane::after {
    inset: 27%;
    border-color: rgba(45,212,191,.22);
  }
  @keyframes gateRadar {
    to { transform: rotate(360deg); }
  }
  .gate-corner {
    position: absolute;
    width: 44px;
    height: 44px;
    color: rgba(190,245,255,.48);
    border-color: rgba(190,245,255,.48);
    filter: drop-shadow(0 0 12px var(--scan-c));
    pointer-events: none;
  }
  .gate-corner.c1 { top: 7%; left: 7%; border-top: 2px solid; border-left: 2px solid; }
  .gate-corner.c2 { top: 7%; right: 7%; border-top: 2px solid; border-right: 2px solid; }
  .gate-corner.c3 { bottom: 7%; left: 7%; border-bottom: 2px solid; border-left: 2px solid; }
  .gate-corner.c4 { bottom: 7%; right: 7%; border-bottom: 2px solid; border-right: 2px solid; }
  .gate-hand {
    position: relative;
    z-index: 1;
    display: block;
    width: 76%;
    height: 82%;
    object-fit: contain;
    opacity: .92;
    transform: perspective(520px) rotateX(-10deg) rotateZ(2deg) scaleX(-1);
    pointer-events: none;
    user-select: none;
    filter:
      drop-shadow(0 0 16px rgba(190,245,255,.64))
      drop-shadow(0 0 36px rgba(76,201,240,.36))
      drop-shadow(0 0 78px rgba(45,212,191,.22));
    mix-blend-mode: screen;
    animation: gateHandFloat 4.8s ease-in-out infinite;
  }
  @keyframes gateHandFloat {
    50% {
      opacity: .98;
      transform: perspective(520px) rotateX(-10deg) rotateZ(1deg) translateY(-5px) scale(-1.012, 1.012);
    }
  }
  .gate-target-ring {
    position: absolute; inset: 17%;
    border-radius: 50%;
    border: 1px solid rgba(76,201,240,.18);
    box-shadow: inset 0 0 36px -28px var(--scan-c);
    animation: gatePulse 2.6s ease-in-out infinite;
  }
  .gate-target-ring.outer {
    inset: 9%;
    border-style: dashed;
    border-color: rgba(190,245,255,.18);
    animation-delay: -.8s;
  }
  @keyframes gatePulse {
    50% { transform: scale(1.045); border-color: rgba(76,201,240,.38); box-shadow: 0 0 44px -28px var(--scan-c); }
  }
  .gate-status {
    width: min(520px, 78vw);
    display: grid;
    gap: 12px;
    text-align: center;
  }
  .gate-status b {
    font: 800 12px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--info);
    text-shadow: 0 0 18px rgba(76,201,240,.36);
  }
  .gate-status span {
    font: 500 12px/1.5 var(--mono);
    letter-spacing: .08em;
    color: var(--ink-dim);
  }
  .gate-progress {
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
  }
  .gate-progress i {
    display: block;
    height: 100%;
    width: 34%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--info), #fff, var(--info), transparent);
    box-shadow: 0 0 18px var(--info);
    animation: gateBar 1.35s ease-in-out infinite;
  }
  .hand-gate.aligning .gate-scanner {
    --scan-c: var(--warn);
  }
  .hand-gate.aligning .gate-status b {
    color: var(--warn);
  }
  .hand-gate.aligning .gate-progress i {
    width: var(--gate-progress, 0%);
    transform: none;
    animation: none;
    background: linear-gradient(90deg, var(--warn), #fff7c2, var(--warn));
  }
  .hand-gate.aligned .gate-scanner {
    --scan-c: var(--ok);
    border-color: rgba(45,212,191,.54);
  }
  .hand-gate.aligned .gate-status b {
    color: var(--ok);
  }
  .hand-gate.aligned .gate-progress i {
    background: linear-gradient(90deg, var(--ok), #eafffb, var(--ok));
    box-shadow: 0 0 18px var(--ok);
  }
  @keyframes gateBar {
    0% { transform: translateX(-115%); }
    100% { transform: translateX(315%); }
  }
  .gate-cancel {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.035);
    color: var(--ink-dim);
    border-radius: 8px;
    padding: 9px 13px;
    font: 700 10px/1 var(--mono);
    letter-spacing: .14em;
    cursor: pointer;
  }
  .hand-gate.found .gate-scanner {
    --scan-c: var(--ok);
    border-color: rgba(45,212,191,.48);
    animation: foundGlow .55s ease-out;
  }
  .hand-gate.found .gate-hand {
    opacity: 1;
    filter:
      drop-shadow(0 0 18px rgba(218,255,247,.75))
      drop-shadow(0 0 42px rgba(45,212,191,.58))
      drop-shadow(0 0 92px rgba(45,212,191,.32));
  }
  .hand-gate.found .gate-scan-plane { opacity: .78; }
  .hand-gate.found .gate-status b { color: var(--ok); }
  @keyframes foundGlow {
    50% { transform: scale(1.015); box-shadow: 0 0 110px -30px var(--ok); }
  }

  /* ---------- HUD ---------- */
  #hud {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; gap: 18px;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(5,6,18,.85), rgba(5,6,18,.35) 75%, transparent);
    backdrop-filter: blur(6px);
  }
  #brand { display: flex; align-items: center; gap: 10px; }
  #brand .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 12px var(--ok), 0 0 30px var(--ok);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 50% { opacity: .45; } }
  #brand h1 {
    font: 700 15px/1 var(--mono);
    letter-spacing: .32em;
    color: var(--ink);
  }
  #brand small { font: 400 10px/1 var(--mono); letter-spacing: .18em; color: var(--ink-dim); display:block; margin-top:4px;}

  #gauges { display: flex; gap: 14px; margin-left: auto; }
  .gauge { display: flex; align-items: center; gap: 7px; }
  .gauge svg { width: 38px; height: 38px; transform: rotate(-90deg); }
  .gauge .track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 3.4; }
  .gauge .val   { fill: none; stroke: var(--info); stroke-width: 3.4; stroke-linecap: round;
                  transition: stroke-dashoffset .8s ease, stroke .8s ease; }
  .gauge .lbl { font: 600 9px/1.5 var(--mono); letter-spacing: .12em; color: var(--ink-dim); }
  .gauge .num { font: 700 12px/1.1 var(--mono); color: var(--ink); }

  #counts { display: flex; gap: 8px; }
  .chip {
    font: 700 11px/1 var(--mono); letter-spacing: .06em;
    padding: 6px 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--ink-dim); background: rgba(255,255,255,.03);
    transition: all .3s;
  }
  .chip.crit.on { color: #fff; border-color: var(--crit); background: rgba(255,77,109,.18);
                  box-shadow: 0 0 14px rgba(255,77,109,.5); animation: pulse 1.2s infinite; }
  .chip.warn.on { color: #1a1200; border-color: var(--warn); background: var(--warn);
                  box-shadow: 0 0 14px rgba(255,183,3,.45); }

  .hud-btn {
    font: 600 10px/1 var(--mono); letter-spacing: .14em;
    color: var(--ink-dim); background: transparent;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    padding: 8px 12px; cursor: pointer; transition: all .2s;
  }
  .hud-btn:hover,
  .hud-btn.hand-hover { color: var(--ink); border-color: var(--info); box-shadow: 0 0 12px rgba(76,201,240,.35); }
  .hud-btn.active { color: #001018; background: var(--info); border-color: var(--info); }
  .hud-btn.loading { color: var(--info); border-color: var(--info); animation: pulse 1s ease-in-out infinite; }

  #clock { font: 600 12px/1.4 var(--mono); color: var(--ink-dim); text-align: right; min-width: 74px; }
  #clock b { color: var(--ink); font-size: 14px; display: block; }

  /* ---------- SCENE: CENTER STAGE + QUEUE RAIL ---------- */
  #scene {
    position: fixed; inset: 0; z-index: 10;
    display: grid;
    padding: 84px 22px 48px;
    perspective: 1400px;
  }

  #handLayer {
    position: fixed; inset: 0; z-index: 15;
    pointer-events: none;
    perspective: 1400px;
    transform-style: preserve-3d;
  }
  .hand-3d-host {
    position: absolute; inset: 0; z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
  }
  .hand-3d-host.visible { opacity: 1; }
  .hand-3d-host canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hand-3d-label {
    position: absolute; left: 0; top: 0;
    transform: translate3d(-999px, -999px, 0);
    font: 800 9px/1 var(--mono);
    letter-spacing: .14em;
    color: var(--info);
    background: rgba(5,6,18,.78);
    border: 1px solid color-mix(in srgb, var(--info) 42%, transparent);
    border-radius: 999px;
    padding: 5px 8px;
    white-space: nowrap;
    text-shadow: 0 0 10px currentColor;
    box-shadow: 0 0 18px -10px currentColor;
  }
  .hand-cursor {
    --x: 50vw;
    --y: 50vh;
    --hand-c: var(--info);
    --skin: color-mix(in srgb, var(--hand-c) 38%, rgba(214,232,255,.86));
    --skin-hi: color-mix(in srgb, #fff 35%, var(--skin));
    --skin-shade: color-mix(in srgb, #050716 42%, var(--skin));
    --hand-scale: .9;
    --hand-tilt: 0deg;
    position: absolute; left: 0; top: 0;
    width: 112px; height: 142px;
    opacity: 0;
    transform:
      translate3d(calc(var(--x) - 56px), calc(var(--y) - 71px), -140px)
      rotateX(-14deg)
      rotateZ(var(--hand-tilt))
      scale(var(--hand-scale));
    transform-style: preserve-3d;
    transition: opacity .18s ease, filter .18s ease;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--hand-c) 45%, transparent));
    will-change: transform, opacity;
    display: none;
  }
  .hand-cursor::before {
    content: "";
    position: absolute; left: 20px; right: 16px; bottom: 6px; height: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--hand-c) 22%, transparent), transparent 70%);
    transform: rotateX(72deg);
    opacity: .72;
  }
  .hand-cursor.visible { opacity: .88; }
  .hand-cursor.closed,
  .hand-cursor.grab { --hand-c: var(--warn); filter: drop-shadow(0 0 26px color-mix(in srgb, var(--warn) 58%, transparent)); }
  .hand-cursor.pinch { --hand-c: var(--crit); filter: drop-shadow(0 0 28px color-mix(in srgb, var(--crit) 55%, transparent)); }
  .hand-cursor.point { --hand-c: var(--ok); filter: drop-shadow(0 0 26px color-mix(in srgb, var(--ok) 54%, transparent)); }
  .hand-wrist {
    position: absolute; left: 39px; bottom: 0; z-index: 0;
    width: 32px; height: 42px;
    border-radius: 14px 14px 18px 18px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.14), transparent 35%),
      linear-gradient(180deg, var(--skin), var(--skin-shade));
    border: 1px solid color-mix(in srgb, var(--hand-c) 45%, transparent);
    box-shadow: inset -8px 0 14px rgba(0,0,0,.16);
    transform: rotate(-3deg);
  }
  .hand-palm {
    position: absolute; left: 26px; bottom: 27px; z-index: 3;
    width: 60px; height: 64px;
    border-radius: 46% 42% 41% 40% / 34% 36% 48% 48%;
    background:
      radial-gradient(circle at 36% 28%, rgba(255,255,255,.34), transparent 26%),
      radial-gradient(circle at 72% 70%, rgba(0,0,0,.18), transparent 38%),
      linear-gradient(135deg, var(--skin-hi), var(--skin) 42%, var(--skin-shade));
    border: 1px solid color-mix(in srgb, var(--hand-c) 62%, transparent);
    box-shadow:
      inset 8px 8px 16px rgba(255,255,255,.08),
      inset -12px -10px 18px rgba(0,0,0,.18),
      0 0 24px -8px var(--hand-c);
    transform: rotate(-2deg);
  }
  .hand-palm::before {
    content: "";
    position: absolute; inset: 13px 12px 12px;
    border-radius: 50%;
    background:
      linear-gradient(145deg, transparent 42%, color-mix(in srgb, var(--hand-c) 34%, transparent) 43% 45%, transparent 46%),
      linear-gradient(28deg, transparent 54%, rgba(255,255,255,.22) 55% 57%, transparent 58%),
      linear-gradient(96deg, transparent 48%, rgba(0,0,0,.16) 49% 51%, transparent 52%);
    opacity: .65;
  }
  .hand-finger {
    position: absolute; bottom: 82px; z-index: 2;
    width: 14px; height: 52px;
    border-radius: 999px 999px 11px 11px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.22), transparent 28%),
      linear-gradient(180deg, var(--skin-hi), var(--skin) 45%, var(--skin-shade));
    border: 1px solid color-mix(in srgb, var(--hand-c) 60%, transparent);
    transform-origin: 50% 100%;
    box-shadow: inset -5px -6px 10px rgba(0,0,0,.16), inset 4px 7px 10px rgba(255,255,255,.06);
    overflow: hidden;
    transition: transform .18s ease, height .18s ease, bottom .18s ease;
  }
  .hand-finger::before {
    content: "";
    position: absolute; left: 4px; right: 4px; top: 5px; height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    box-shadow: 0 0 6px color-mix(in srgb, var(--hand-c) 22%, transparent);
  }
  .hand-finger::after {
    content: "";
    position: absolute; left: 2px; right: 2px; top: 24px; height: 1px;
    background: color-mix(in srgb, var(--hand-c) 34%, rgba(0,0,0,.28));
    box-shadow: 0 14px 0 color-mix(in srgb, var(--hand-c) 25%, rgba(0,0,0,.22));
  }
  .hand-finger.f1 { left: 25px; height: 48px; transform: rotate(-15deg); }
  .hand-finger.f2 { left: 41px; height: 68px; transform: rotate(-4deg); }
  .hand-finger.f3 { left: 58px; height: 63px; transform: rotate(5deg); }
  .hand-finger.f4 { left: 74px; height: 49px; transform: rotate(15deg); }
  .hand-thumb {
    position: absolute; left: 14px; bottom: 54px; z-index: 4;
    width: 17px; height: 48px;
    border-radius: 999px 999px 11px 11px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.22), transparent 34%),
      linear-gradient(180deg, var(--skin-hi), var(--skin) 48%, var(--skin-shade));
    border: 1px solid color-mix(in srgb, var(--hand-c) 60%, transparent);
    transform: rotate(-54deg);
    transform-origin: 50% 100%;
    box-shadow: inset -5px -6px 10px rgba(0,0,0,.16), inset 4px 7px 10px rgba(255,255,255,.06);
    overflow: hidden;
    transition: transform .18s ease, height .18s ease, bottom .18s ease;
  }
  .hand-thumb::before {
    content: "";
    position: absolute; left: 5px; right: 5px; top: 5px; height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.32);
  }
  .hand-thumb::after {
    content: "";
    position: absolute; left: 3px; right: 3px; top: 25px; height: 1px;
    background: color-mix(in srgb, var(--hand-c) 30%, rgba(0,0,0,.28));
  }
  .hand-cursor.closed .f1,
  .hand-cursor.grab .f1 { height: 42px; transform: rotate(-22deg) translate(5px, 24px) scaleY(.68); }
  .hand-cursor.closed .f2,
  .hand-cursor.grab .f2 { height: 48px; transform: rotate(-8deg) translate(4px, 27px) scaleY(.62); }
  .hand-cursor.closed .f3,
  .hand-cursor.grab .f3 { height: 46px; transform: rotate(9deg) translate(-2px, 27px) scaleY(.62); }
  .hand-cursor.closed .f4,
  .hand-cursor.grab .f4 { height: 38px; transform: rotate(22deg) translate(-6px, 25px) scaleY(.66); }
  .hand-cursor.closed .hand-thumb,
  .hand-cursor.grab .hand-thumb { transform: rotate(-19deg) translate(18px, 16px) scaleY(.78); }
  .hand-cursor.pinch .f1 { transform: rotate(-24deg) translate(10px, 18px) scaleY(.76); }
  .hand-cursor.pinch .f2 { transform: rotate(-16deg) translate(7px, 6px); }
  .hand-cursor.pinch .f3,
  .hand-cursor.pinch .f4 { height: 39px; transform: rotate(10deg) translateY(22px) scaleY(.68); }
  .hand-cursor.pinch .hand-thumb { transform: rotate(-29deg) translate(22px, 9px) scaleY(.92); }
  .hand-cursor.point .f1 { height: 58px; transform: rotate(-11deg) translate(2px, -7px); }
  .hand-cursor.point .f2 { height: 44px; transform: rotate(-8deg) translate(4px, 25px) scaleY(.64); }
  .hand-cursor.point .f3 { height: 41px; transform: rotate(8deg) translate(-2px, 26px) scaleY(.64); }
  .hand-cursor.point .f4 { height: 36px; transform: rotate(21deg) translate(-6px, 24px) scaleY(.68); }
  .hand-cursor.point .hand-thumb { transform: rotate(-25deg) translate(20px, 14px) scaleY(.78); }
  .hand-label {
    position: absolute; left: 50%; bottom: -16px;
    transform: translateX(-50%);
    font: 800 9px/1 var(--mono);
    letter-spacing: .14em;
    color: var(--hand-c);
    background: rgba(5,6,18,.82);
    border: 1px solid color-mix(in srgb, var(--hand-c) 40%, transparent);
    border-radius: 999px;
    padding: 4px 7px;
    white-space: nowrap;
  }
  .card.hand-held .face {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 30px 70px -20px rgba(0,0,0,.9),
      0 0 42px -8px color-mix(in srgb, var(--accent) 78%, transparent);
  }
  .card.hand-held { will-change: transform, opacity; }
  .hand-video {
    position: fixed; right: 8px; bottom: 48px;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
  }

  #stage {
    position: relative;
    display: grid; place-items: center;
    transform-style: preserve-3d;
    min-width: 0; min-height: 0;
  }

  /* the 3D pile in the middle: front card in flow, the rest layered behind it */
  #stack {
    position: relative; z-index: 2;
    width: min(780px, calc(100vw - 44px));
    height: min(760px, calc(100vh - 128px)); /* fixed: the pile is transform-only, nothing ever reflows */
    transform-style: preserve-3d;
  }
  /* every card is anchored to the same spot; depth comes purely from transforms */
  #stack .card { width: 100%; position: absolute; top: min(170px, 18vh); left: 0; }

  /* landing pad — static rings, animates with the arriving card's severity */
  #pad {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    width: 880px; height: 880px; max-width: 98%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  #pad { --pad-c: var(--info); }
  #pad .glow {
    position: absolute; inset: 14%;
    opacity: .72;
    background: radial-gradient(circle, color-mix(in srgb, var(--pad-c) 9%, transparent) 0%, transparent 64%);
  }
  #pad .ring { position: absolute; border-radius: 50%; }
  #pad .r1 { inset: 4%;  border: 1px dashed color-mix(in srgb, var(--pad-c) 18%, transparent); }
  #pad .r2 { inset: 13%; border: 1px solid  color-mix(in srgb, var(--pad-c) 10%, transparent); }
  #pad .tick { position: absolute; width: 14px; height: 1px; background: color-mix(in srgb, var(--pad-c) 36%, transparent); top: 50%; }
  #pad .tick.tl { left: 1.2%; } #pad .tick.tr { right: 1.2%; }
  #pad .ripple {
    position: absolute; inset: 18%; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--pad-c) 18%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--pad-c) 8%, transparent), transparent 68%);
    opacity: 0; transform: scale(.82);
    filter: blur(.2px);
  }
  #pad.land .ripple { animation: padAura 1.45s cubic-bezier(.18,.7,.25,1); }
  #pad.land .glow { animation: glowUp 1.45s ease-out; }
  #pad.land .ring, #pad.land .tick { animation: padFlare 1.45s ease-out; }
  @keyframes padAura {
    0% { opacity: 0; transform: scale(.82); }
    32% { opacity: .2; }
    100% { opacity: 0; transform: scale(1.01); }
  }
  @keyframes glowUp {
    35% { opacity: .92; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pad-c) 26%, transparent)); }
  }
  @keyframes padFlare {
    35% {
      border-color: color-mix(in srgb, var(--pad-c) 32%, transparent);
      box-shadow: 0 0 8px color-mix(in srgb, var(--pad-c) 20%, transparent);
    }
  }

  /* cards behind the front one: header-only sheets receding into depth,
     their title edge peeking above the front card */
  .card.behind { cursor: pointer; }
  .card.behind .face {
    height: 40px;
    padding: 6px 20px;
    border-radius: 12px;
    overflow: hidden;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, rgba(15,18,44,.98)), rgba(7,8,24,.98));
    box-shadow:
      0 0 0 1px rgba(255,255,255,.035) inset,
      0 8px 18px -14px rgba(0,0,0,.9),
      0 0 14px -10px color-mix(in srgb, var(--accent) 52%, transparent);
  }
  .card.behind .face::after { display: none; }
  .card.behind .corner { display: none; }
  .card.behind .card-more { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2,.9,.25,1), opacity .25s ease; }
  .card.behind .card-more-inner { overflow: hidden; padding-bottom: 0; pointer-events: none; }
  .card.behind .card-head { gap: 12px; }
  .card.behind .icon-tile { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
  .card.behind .card-title {
    max-width: calc(100vw - 170px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  .card.behind .card-meta { margin-top: 1px; opacity: .8; }
  .card.behind .sev { font-size: 8px; padding: 2px 6px; }
  .card.behind .tstamp { font-size: 10px; }
  .card.behind .dupe { top: 6px; right: 8px; padding: 3px 8px; font-size: 10px; }
  .card.behind:hover .face,
  .card.behind.hand-hover .face { border-color: var(--accent); box-shadow: 0 0 30px -6px var(--accent); }

  /* ---------- CARD ---------- */
  .card {
    width: var(--card-w);
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.14,.86,.22,1), opacity .72s ease, filter .72s ease;
    touch-action: none;
    position: relative;
  }
  .card.enter { transform: translateY(-58vh) rotateX(22deg) scale(1.04); opacity: 0; }
  .card.enter.sev-info,
  .card.enter.sev-success { transform: translateY(-24vh) rotateX(8deg) scale(.98); }
  .card.enter.sev-critical { transform: translateY(-66vh) rotateX(34deg) scale(1.08); }
  .card.leave { transform: translate3d(42vw, -18vh, 340px) rotateZ(14deg) rotateX(-18deg) scale(.98); opacity: 0; pointer-events: none; }
  .card.fling-r { transform: translate3d(135vw, -10vh, 140px) rotateZ(28deg) scale(.98); opacity: 0; pointer-events: none; }
  .card.fling-l { transform: translate3d(-135vw, -10vh, 140px) rotateZ(-28deg) scale(.98); opacity: 0; pointer-events: none; }
  .card.dissolve-out { transform: translate3d(118vw, -12vh, 180px) rotateZ(18deg) rotateX(-10deg) scale(.94); opacity: 0; pointer-events: none; filter: blur(.5px); }
  .card.snooze { transform: translate3d(0, 38vh, -380px) rotateX(68deg) scale(.36); opacity: 0; pointer-events: none; }
  .card.dragging { transition: opacity .5s ease; }

  /* one gentle settle bounce right after arrival, then the card sits still */
  .bob {
    animation: settle 1.6s ease-in-out 1;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.25,.8,.3,1), filter .6s ease;
  }
  @keyframes settle {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(-6px); }
  }

  .face {
    --accent: var(--info);
    position: relative;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(42,47,78,.96) 0%, rgba(18,20,48,.96) 40%, rgba(7,8,24,.98) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 22px 50px -18px rgba(0,0,0,.85),
      0 0 26px -6px color-mix(in srgb, var(--accent) 55%, transparent);
    backdrop-filter: blur(14px);
    padding: 30px 30px 42px;
    transition: transform .25s ease-out, box-shadow .3s, background-color .4s ease,
                padding .5s cubic-bezier(.2,.9,.25,1);
    transform-style: preserve-3d;
    overflow: hidden;
  }
  .face::before { /* top accent beam */
    content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    filter: drop-shadow(0 0 6px var(--accent));
  }
  .face::after { /* sheen sweep on hover */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 46%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .8s ease;
    pointer-events: none;
  }
  .card:hover .face::after,
  .card.hand-hover .face::after { transform: translateX(120%); }

  /* corner brackets */
  .face .corner { position: absolute; width: 22px; height: 22px; border-color: var(--accent); border-style: solid; opacity: .8; }
  .face .c-tl { top: 9px; left: 9px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
  .face .c-br { bottom: 9px; right: 9px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

  .card-head { display: flex; align-items: center; gap: 18px; transition: opacity .35s ease; }
  .icon-tile {
    width: 76px; height: 76px; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: 36px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 16px -4px var(--accent);
    transition: width .5s cubic-bezier(.2,.9,.25,1), height .5s cubic-bezier(.2,.9,.25,1), font-size .5s ease;
  }
  .card-title { font: 700 27px/1.18 var(--sans); letter-spacing: .01em; transition: font-size .5s ease; }
  .card-meta { display: flex; gap: 12px; align-items: center; margin-top: 7px; }
  .sev {
    font: 700 12px/1 var(--mono); letter-spacing: .16em;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    padding: 5px 9px; border-radius: 5px;
    text-shadow: 0 0 8px var(--accent);
  }
  .tstamp { font: 500 14px/1 var(--mono); color: var(--ink-dim); letter-spacing: .05em; }

  /* collapsible lower half of the card — folds shut while buried in the pile */
  .card-more {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .5s cubic-bezier(.2,.9,.25,1), opacity .35s ease .12s;
  }
  .card-more-inner { min-height: 0; overflow: visible; padding-bottom: 3px; }

  .card-body { font: 400 21px/1.45 var(--sans); color: #c3cae6; margin: 20px 4px 0; }

  .metric { margin-top: 22px; }
  .metric-row { display: flex; justify-content: space-between; font: 600 14px/1 var(--mono); letter-spacing: .1em; color: var(--ink-dim); margin-bottom: 10px; }
  .metric-row b { color: var(--accent); font-size: 18px; text-shadow: 0 0 10px var(--accent); }
  .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
  .bar i {
    display: block; height: 100%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
    box-shadow: 0 0 10px var(--accent);
    transition: width 1s cubic-bezier(.2,.9,.3,1);
  }

  .card-actions { display: flex; gap: 14px; margin-top: 28px; padding-bottom: 2px; }
  .act {
    flex: 1;
    display: grid;
    place-items: center;
    text-align: center;
    font: 700 15px/1 var(--mono); letter-spacing: .1em;
    min-height: 58px;
    padding: 18px 18px 20px; border-radius: 12px; cursor: pointer;
    transition: all .18s;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04); color: var(--ink);
    position: relative;
    overflow: hidden;
  }
  .act::before {
    content: "";
    position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 18%, transparent),
      var(--accent),
      color-mix(in srgb, #fff 22%, var(--accent)));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 44%, transparent);
    transform: scaleX(0);
    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
  }
  .act.auto-pending {
    border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.16));
    background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.04));
    box-shadow: 0 0 26px -14px var(--accent);
  }
  .act.auto-pending::before {
    opacity: 1;
    animation: autoFill var(--auto-duration, 15s) linear forwards;
  }
  @keyframes autoFill { to { transform: scaleX(1); } }
  button.hand-dwell-target {
    --hand-dwell-c: var(--info);
    position: relative;
    overflow: hidden;
  }
  .act.hand-dwell-target {
    --hand-dwell-c: var(--accent);
  }
  button.hand-dwell-target::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--hand-dwell-c) 20%, transparent),
      var(--hand-dwell-c),
      color-mix(in srgb, #fff 24%, var(--hand-dwell-c)));
    box-shadow: 0 0 11px color-mix(in srgb, var(--hand-dwell-c) 48%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: scaleX(var(--hand-dwell-progress, 0));
    transform-origin: left center;
    animation: none;
  }
  .act.hand-dwell-target::before {
    left: 12px;
    right: 12px;
    bottom: 10px;
  }
  button.hand-dwell-active {
    border-color: color-mix(in srgb, var(--hand-dwell-c) 58%, rgba(255,255,255,.18));
    box-shadow: 0 0 24px -12px var(--hand-dwell-c);
  }
  button.hand-dwell-active::before {
    opacity: 1;
  }
  .act.primary {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: #fff; text-shadow: 0 0 8px var(--accent);
  }
  .act.primary:hover,
  .act.primary.hand-hover { background: var(--accent); color: #060612; text-shadow: none; box-shadow: 0 0 26px var(--accent); }
  .act.ghost:hover,
  .act.ghost.hand-hover { border-color: var(--ink-dim); background: rgba(255,255,255,.09); }
  .act:active { transform: scale(.96); }
  .act.done { background: var(--ok); border-color: var(--ok); color: #04120e; pointer-events: none; }

  /* resolved flash */
  .face.resolved { border-color: var(--ok); box-shadow: 0 0 34px -4px var(--ok); }
  .face.dissolving { filter: saturate(.45) brightness(.85); }

  /* outcome stamp slammed onto the card before it leaves */
  .stamp {
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-items: center;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
  }
  .stamp span {
    font: 800 36px/1 var(--mono); letter-spacing: .18em;
    padding: 16px 30px;
    border: 4px solid currentColor; border-radius: 12px;
    transform: rotate(-12deg);
  }
  .stamp.show { animation: stampIn .38s cubic-bezier(.15,1.5,.4,1) forwards; background: rgba(4,6,16,.45); }
  .stamp.ok,
  .stamp.resolved { color: var(--ok); text-shadow: 0 0 16px var(--ok); }
  .stamp.no,
  .stamp.ignored,
  .stamp.cleared { color: #99a2c2; }
  .stamp.snoozed { color: var(--info); text-shadow: 0 0 16px var(--info); }
  .stamp.expired { color: var(--ink-dim); }
  .stamp.retired { color: #7f879e; }
  @keyframes stampIn {
    0%   { opacity: 0; transform: scale(2.4); }
    55%  { opacity: 1; transform: scale(.93); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* ×N badge when repeated events coalesce into one card */
  .dupe {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    font: 800 14px/1 var(--mono);
    color: #060612;
    background: var(--accent);
    padding: 6px 11px; border-radius: 99px;
    box-shadow: 0 0 16px var(--accent);
    pointer-events: none;
  }
  .dupe.pop { animation: dupePop .45s cubic-bezier(.15,1.5,.4,1); }
  @keyframes dupePop { 40% { transform: scale(1.6); } }

  .face.flash { animation: faceFlash .65s ease; }
  @keyframes faceFlash {
    30% {
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 22px 50px -18px rgba(0,0,0,.85),
        0 0 24px -8px color-mix(in srgb, var(--accent) 65%, transparent);
    }
  }

  /* severity emphasis: a quiet screen-edge glow + very small pile nudge */
  #vignette { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; }
  #vignette.crit {
    box-shadow: inset 0 0 16vmax 0 rgba(255,77,109,.20);
    animation: vigGlow .85s ease-out;
  }
  #vignette.warn {
    box-shadow: inset 0 0 14vmax 0 rgba(255,183,3,.14);
    animation: vigGlow .75s ease-out;
  }
  @keyframes vigGlow { 0%{opacity:0} 30%{opacity:1} 100%{opacity:0} }

  #stack.shake { animation: shake .45s ease; }
  @keyframes shake {
    25% { transform: translateX(-2px) rotateZ(-.12deg); }
    55% { transform: translateX(2px) rotateZ(.1deg); }
  }

  .particles {
    position: absolute; inset: 0; z-index: 6;
    overflow: hidden; border-radius: inherit;
    pointer-events: none;
  }
  .particle {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--s); height: var(--s); border-radius: 50%;
    background: var(--p-c);
    box-shadow: 0 0 12px var(--p-c);
    animation: particleOut .78s cubic-bezier(.12,.75,.32,1) forwards;
  }
  @keyframes particleOut {
    to { transform: translate(var(--dx), var(--dy)) scale(.18); opacity: 0; }
  }

  /* ---------- EMPTY STATE ---------- */
  #empty {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-items: center; text-align: center;
    opacity: 0; transition: opacity .8s; pointer-events: none;
  }
  #empty.show { opacity: 1; }
  #empty .ring {
    width: 130px; height: 130px; margin: 0 auto 22px;
    border-radius: 50%;
    border: 1px solid rgba(45,212,191,.5);
    box-shadow: 0 0 40px -6px var(--ok), inset 0 0 30px -10px var(--ok);
    display: grid; place-items: center;
    animation: ringPulse 3s ease-in-out infinite;
  }
  @keyframes ringPulse { 50% { transform: scale(1.06); box-shadow: 0 0 60px -6px var(--ok), inset 0 0 40px -10px var(--ok); } }
  #empty .ring span { font-size: 44px; filter: drop-shadow(0 0 12px var(--ok)); }
  #empty h2 { font: 700 15px/1 var(--mono); letter-spacing: .3em; color: var(--ok); text-shadow: 0 0 14px var(--ok); }
  #empty p { font: 400 11px/1.6 var(--mono); letter-spacing: .12em; color: var(--ink-dim); margin-top: 10px; }

  /* ---------- HISTORY DRAWER ---------- */
  #drawer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: 38px; overflow: hidden;
    background: linear-gradient(0deg, rgba(5,6,18,.97), rgba(5,6,18,.78));
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.08);
    transition: height .45s cubic-bezier(.2,.9,.25,1);
  }
  #drawer:hover,
  #drawer.hand-hover,
  #drawer.open { height: min(46vh, 420px); border-top-color: rgba(76,201,240,.35); }
  #drawer.pulling-history { overflow: visible; }
  #drawer.pulling-history #historyList { overflow: visible; }
  .drawer-head {
    display: flex; align-items: center; gap: 12px;
    height: 38px; padding: 0 18px;
    font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--ink-dim);
    white-space: nowrap; cursor: pointer;
  }
  .drawer-head .tk-dot { color: var(--info); }
  #lastLine { flex: 1; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
  #histHint { opacity: .75; letter-spacing: .14em; font-size: 9.5px; }
  #histHint b { color: var(--info); }
  #historyList {
    height: calc(100% - 38px); overflow-y: auto;
    padding: 2px 18px 14px;
    scrollbar-width: none;
  }
  #historyList::-webkit-scrollbar { display: none; }
  .hrow {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 11px;
    padding: 8px 8px;
    margin: 0 -8px;
    font: 500 11px/1.3 var(--mono);
    color: #b9c1e0;
    border-bottom: 1px dashed rgba(255,255,255,.05);
    border-radius: 8px;
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease;
  }
  .hrow.empty { cursor: default; }
  .hrow.pullable { cursor: grab; touch-action: none; }
  .hrow.pullable:hover,
  .hrow.pullable.hand-hover {
    background: rgba(76,201,240,.055);
    border-bottom-color: color-mix(in srgb, var(--info) 22%, transparent);
  }
  .hrow.pulling {
    z-index: 5;
    cursor: grabbing;
    background: rgba(76,201,240,.11);
    border-bottom-color: color-mix(in srgb, var(--info) 38%, transparent);
  }
  .hrow .ht { color: var(--ink-dim); font-size: 10px; min-width: 74px; }
  .hrow .hdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .hrow .htitle { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hrow .hout {
    font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
    padding: 3px 7px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,.15); color: var(--ink-dim);
  }
  .hrow .hout.active { color: var(--info); border-color: var(--info); animation: pulse 2.2s infinite; }
  .hrow .hout.resolved { color: var(--ok); border-color: var(--ok); }
  .hrow .hout.ignored { color: #aeb7d6; border-color: #65708f; }
  .hrow .hout.expired { color: var(--ink-dim); border-color: rgba(255,255,255,.12); }
  .hrow .hout.snoozed { color: var(--info); border-color: var(--info); }
  .hrow .hout.retired { color: #7f879e; border-color: rgba(255,255,255,.10); }

  /* Hand tracking needs steady frame time more than decorative glow. */
  body.hand-perf #hud,
  body.hand-perf #drawer,
  body.hand-perf .face {
    backdrop-filter: none;
  }
  body.hand-perf .face {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.035) inset,
      0 20px 42px -22px rgba(0,0,0,.88),
      0 0 18px -10px color-mix(in srgb, var(--accent) 42%, transparent);
  }
  body.hand-perf .card.hand-held .face {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 24px 50px -24px rgba(0,0,0,.9),
      0 0 24px -12px color-mix(in srgb, var(--accent) 58%, transparent);
  }
  body.hand-perf .card.behind .face,
  body.hand-perf .card.behind:hover .face {
    box-shadow: none;
  }
  body.hand-perf .bob,
  body.hand-perf #brand .dot,
  body.hand-perf .chip.crit.on,
  body.hand-perf .dupe.pop,
  body.hand-perf #empty .ring,
  body.hand-perf .face.flash,
  body.hand-perf #stack.shake,
  body.hand-perf #vignette.crit,
  body.hand-perf #vignette.warn {
    animation: none !important;
  }
  body.hand-perf .particles,
  body.hand-perf .particle {
    display: none;
  }
  body.hand-perf .card:hover .face::after {
    transform: translateX(-120%);
  }
  body.hand-perf #pad .glow {
    opacity: .38;
    filter: none;
  }
  body.hand-perf #pad.land .ripple,
  body.hand-perf #pad.land .glow,
  body.hand-perf #pad.land .ring,
  body.hand-perf #pad.land .tick {
    animation-duration: .42s;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px) {
    #scene { padding: 96px 14px 44px; }
    #pad { width: 420px; height: 420px; }
  }

  @media (max-width: 760px) {
    :root { --card-w: min(92vw, 360px); }
    #hud { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    #gauges { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
    .gauge .lbl { display: none; }
    #clock b { font-size: 12px; }
    #scene { padding-top: 128px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bob, #brand .dot, #stack.shake, #vignette.crit, #vignette.warn,
    .act.auto-pending::before, .particle,
    .gate-scanner::after, .gate-scan-plane, .gate-target-ring, .gate-progress i, .gate-hand { animation: none; }
  }