:root {
  --void: #05010a;
  --void-deep: #020006;
  --fg: #f7f0e4;
  --muted: #d9cbb0;
  --gold: #ffd76a;
  --gold-hot: #fff1c4;
  --gold-dim: #c9a24a;
  --violet: #9b5cff;
  --violet-soft: #c084fc;
  --danger: #ff6b9d;
  --danger-hot: #ff8fab;
  --cut: 0.7rem;
  --octagon: polygon(
    29.29% 2.4%, 70.71% 2.4%,
    97.6% 29.29%, 97.6% 70.71%,
    70.71% 97.6%, 29.29% 97.6%,
    2.4% 70.71%, 2.4% 29.29%
  );
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--fg);
  font-family: "Cormorant Garamond", Georgia, serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  color-scheme: dark;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ── HUD: lock-on viewfinder, sacred meter, chrome-less ── */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.45s ease;
}

body:has(.overlay:not(.hidden)) #hud {
  opacity: 0;
}

.hud-frame {
  position: absolute;
  inset: max(8px, env(safe-area-inset-top, 0px))
         max(8px, env(safe-area-inset-right, 0px))
         max(8px, env(safe-area-inset-bottom, 0px))
         max(8px, env(safe-area-inset-left, 0px));
}

.hud-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgba(255, 233, 168, 0.72);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.4));
}

.hud-corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hud-tick {
  position: absolute;
  background: rgba(255, 233, 168, 0.55);
}

.hud-tick.top,
.hud-tick.bottom {
  left: 50%;
  width: 1px;
  height: 9px;
  transform: translateX(-50%);
}

.hud-tick.top { top: 0; }
.hud-tick.bottom { bottom: 0; }

.hud-tick.left,
.hud-tick.right {
  top: 50%;
  width: 9px;
  height: 1px;
  transform: translateY(-50%);
}

.hud-tick.left { left: 0; }
.hud-tick.right { right: 0; }

#score-wrap {
  position: absolute;
  top: max(18px, env(safe-area-inset-top, 0px));
  left: max(22px, env(safe-area-inset-left, 0px));
  padding: 0.85rem 1.1rem 0.55rem 1.15rem;
  min-width: 6.4rem;
  background: radial-gradient(ellipse 90% 80% at 28% 45%, rgba(5, 1, 10, 0.55), transparent 72%);
}

.longing-lock {
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  left: 0.55rem;
  top: 1.35rem;
  pointer-events: none;
  border: 1px solid rgba(255, 215, 106, 0.5);
  transform: rotate(45deg);
  animation: lock-breathe 5.2s ease-in-out infinite;
}

.longing-lock::before,
.longing-lock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(-45deg);
}

.longing-lock::before {
  inset: -11px;
  border: 1px solid rgba(255, 215, 106, 0.22);
}

.longing-lock::after {
  inset: 6px;
  border: 1px solid rgba(180, 140, 255, 0.2);
}

#score-wrap .label {
  display: block;
  position: relative;
  z-index: 1;
  width: max-content;
  font-family: Cinzel, serif;
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.28rem;
  margin-bottom: 0.08rem;
  border-bottom: 1px solid rgba(255, 215, 106, 0.38);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

#score {
  position: relative;
  z-index: 1;
  display: block;
  font-family: Cinzel, serif;
  font-size: clamp(2.15rem, 5.4vw, 3.05rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--gold-hot);
  letter-spacing: 0.04em;
  text-shadow:
    0 0 6px rgba(5, 1, 10, 0.95),
    0 2px 14px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(255, 215, 106, 0.45),
    0 0 48px rgba(180, 80, 255, 0.22);
  animation: gold-pulse 5.2s ease-in-out infinite;
}

#meta-wrap {
  position: absolute;
  top: max(18px, env(safe-area-inset-top, 0px));
  right: max(22px, env(safe-area-inset-right, 0px));
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  padding: 0.35rem 0.4rem 0.5rem 1.2rem;
  background: radial-gradient(ellipse 90% 80% at 72% 40%, rgba(5, 1, 10, 0.5), transparent 72%);
}

#length-label,
#shadows-label {
  display: block;
  font-family: Cinzel, serif;
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

#length-label b,
#shadows-label b {
  display: block;
  margin-top: 0.18rem;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg);
  text-shadow:
    0 0 8px rgba(5, 1, 10, 0.95),
    0 0 16px rgba(200, 160, 255, 0.28);
}

#shadows-label b { color: var(--gold); }

/* ── Mobile pause: octagon lock, not a round chrome blob ── */

#mobile-pause {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 6;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--gold-hot);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(255, 233, 168, 0.75),
    inset 0 0 16px rgba(255, 215, 106, 0.12);
  clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  filter: drop-shadow(0 0 8px rgba(255, 215, 106, 0.45));
}

#mobile-pause:hover { transform: none; border-color: transparent; }

@media (pointer: coarse) {
  #mobile-pause { display: block; }
  #meta-wrap { right: max(64px, calc(env(safe-area-inset-right, 0px) + 52px)); }
  .hud-corner.tr { right: 52px; }
  .hud-tick.right { right: 52px; }
}

body:has(#splash:not(.hidden)) #mobile-pause,
body:has(#death:not(.hidden)) #mobile-pause {
  opacity: 0;
  pointer-events: none;
}

/* ── Overlays: veil over the live chamber, never a landing-page slab ── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse 52% 46% at 50% 48%, transparent 0%, transparent 34%, rgba(4, 0, 10, 0.38) 68%, rgba(2, 0, 6, 0.82) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.overlay.hidden { display: none; }

.overlay:not(.hidden) {
  animation: veil-in 0.7s ease-out;
}

#pause {
  background:
    radial-gradient(ellipse 42% 52% at 50% 48%, rgba(8, 2, 22, 0.08), rgba(2, 0, 8, 0.58) 84%);
}

#death {
  background:
    radial-gradient(ellipse 48% 44% at 50% 46%, rgba(40, 0, 16, 0.16), rgba(8, 0, 6, 0.74) 80%);
}

/* ── Temple-guardian occupancy: carved lintel, sill and pilasters at the edges ── */

.overlay::before,
.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.92;
}

.overlay::before {
  background-image:
    linear-gradient(to bottom, rgba(255, 244, 210, 0.9), rgba(255, 215, 106, 0.12)),
    linear-gradient(to top, rgba(255, 244, 210, 0.88), rgba(255, 215, 106, 0.12)),
    repeating-linear-gradient(90deg, rgba(255, 233, 168, 0.34) 0 6px, transparent 6px 24px),
    repeating-linear-gradient(90deg, rgba(255, 233, 168, 0.3) 0 6px, transparent 6px 24px),
    radial-gradient(closest-side, rgba(255, 250, 232, 0.9) 0%, rgba(255, 215, 106, 0.32) 40%, transparent 74%),
    radial-gradient(closest-side, rgba(255, 250, 232, 0.9) 0%, rgba(255, 215, 106, 0.32) 40%, transparent 74%),
    radial-gradient(closest-side, rgba(255, 250, 232, 0.9) 0%, rgba(255, 215, 106, 0.32) 40%, transparent 74%),
    radial-gradient(closest-side, rgba(255, 250, 232, 0.9) 0%, rgba(255, 215, 106, 0.32) 40%, transparent 74%),
    radial-gradient(circle, rgba(255, 246, 216, 0.95) 0 2px, rgba(255, 215, 106, 0.38) 38%, transparent 70%),
    radial-gradient(circle, rgba(255, 246, 216, 0.95) 0 2px, rgba(255, 215, 106, 0.38) 38%, transparent 70%),
    linear-gradient(to bottom, rgba(255, 215, 106, 0.13), rgba(155, 92, 255, 0.05) 58%, transparent),
    linear-gradient(to top, rgba(255, 215, 106, 0.11), rgba(155, 92, 255, 0.05) 58%, transparent);
  background-repeat: no-repeat;
  background-size:
    100% 2px, 100% 2px,
    100% 4.6vmin, 100% 4.6vmin,
    17vmin 17vmin, 17vmin 17vmin, 17vmin 17vmin, 17vmin 17vmin,
    11vmin 11vmin, 11vmin 11vmin,
    100% 12vmin, 100% 12vmin;
  background-position:
    0 7.6vmin, 0 calc(100% - 7.6vmin),
    0 1.7vmin, 0 calc(100% - 6.3vmin),
    left top, right top, left bottom, right bottom,
    center top, center bottom,
    0 0, 0 100%;
}

.overlay::after {
  background-image:
    linear-gradient(to right, rgba(255, 244, 210, 0.8), rgba(255, 215, 106, 0.1)),
    linear-gradient(to left, rgba(255, 244, 210, 0.78), rgba(255, 215, 106, 0.1)),
    repeating-linear-gradient(180deg, rgba(255, 233, 168, 0.26) 0 5px, transparent 5px 27px),
    repeating-linear-gradient(180deg, rgba(255, 233, 168, 0.22) 0 5px, transparent 5px 27px),
    radial-gradient(circle, rgba(224, 179, 255, 0.9) 0 2px, rgba(155, 92, 255, 0.36) 38%, transparent 70%),
    radial-gradient(circle, rgba(224, 179, 255, 0.9) 0 2px, rgba(155, 92, 255, 0.36) 38%, transparent 70%),
    radial-gradient(circle, rgba(224, 179, 255, 0.9) 0 2px, rgba(155, 92, 255, 0.36) 38%, transparent 70%),
    radial-gradient(circle, rgba(224, 179, 255, 0.9) 0 2px, rgba(155, 92, 255, 0.36) 38%, transparent 70%),
    linear-gradient(to right, rgba(255, 215, 106, 0.1), rgba(155, 92, 255, 0.05) 58%, transparent),
    linear-gradient(to left, rgba(255, 215, 106, 0.09), rgba(155, 92, 255, 0.05) 58%, transparent);
  background-repeat: no-repeat;
  background-size:
    2px 100%, 2px 100%,
    4.2vmin 100%, 4.2vmin 100%,
    10vmin 10vmin, 10vmin 10vmin, 10vmin 10vmin, 10vmin 10vmin,
    9vmin 100%, 9vmin 100%;
  background-position:
    6.1vmin 0, calc(100% - 6.1vmin - 2px) 0,
    1.3vmin 0, calc(100% - 5.5vmin) 0,
    0 27%, 100% 27%, 0 73%, 100% 73%,
    0 0, 100% 0;
}

.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Peripheral fill — frame-filling matter between medallion and edge */

.veil::before,
.veil::after {
  content: "";
  position: absolute;
  inset: -6%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.veil::before {
  background:
    linear-gradient(to right, rgba(255, 224, 138, 0.14), transparent 20%, transparent 80%, rgba(214, 136, 255, 0.13)),
    linear-gradient(to bottom, rgba(255, 236, 180, 0.1), transparent 26%, transparent 70%, rgba(196, 160, 255, 0.11)),
    radial-gradient(circle 42vmax at 0% 50%, rgba(255, 215, 106, 0.1), transparent 58%),
    radial-gradient(circle 42vmax at 100% 50%, rgba(180, 140, 255, 0.11), transparent 58%);
}

.veil::after {
  background:
    repeating-conic-gradient(from 8deg at 50% 48%, rgba(255, 236, 180, 0.05) 0deg 1.1deg, transparent 1.1deg 7.5deg),
    radial-gradient(ellipse 120% 90% at 50% 48%, transparent 28%, rgba(255, 215, 106, 0.07) 52%, rgba(155, 92, 255, 0.09) 72%, rgba(255, 180, 120, 0.05) 90%);
}

.splash-inner,
.panel-shell {
  position: relative;
  z-index: 2;
}

/* Particle dust — Tetris-01 occupancy, gold/violet field */

.dust {
  position: absolute;
  inset: -14%;
  background-image:
    radial-gradient(120% 95% at 50% 48%, transparent 40%, rgba(255, 215, 106, 0.09) 66%, rgba(155, 92, 255, 0.13) 86%, rgba(196, 160, 255, 0.06) 97%),
    linear-gradient(to bottom, rgba(255, 236, 180, 0.05), transparent 28%, transparent 70%, rgba(180, 140, 255, 0.07)),
    radial-gradient(1.4px 1.4px at 8% 14%, rgba(255, 236, 180, 0.95), transparent),
    radial-gradient(2px 2px at 16% 68%, rgba(210, 170, 255, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 24% 22%, rgba(255, 248, 228, 0.9), transparent),
    radial-gradient(1.6px 1.6px at 33% 86%, rgba(180, 130, 255, 0.75), transparent),
    radial-gradient(2.1px 2.1px at 41% 11%, rgba(255, 215, 106, 0.92), transparent),
    radial-gradient(1.2px 1.2px at 49% 58%, rgba(244, 220, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 58% 31%, rgba(255, 233, 168, 0.88), transparent),
    radial-gradient(1.8px 1.8px at 67% 78%, rgba(192, 132, 252, 0.82), transparent),
    radial-gradient(1.3px 1.3px at 76% 18%, rgba(255, 246, 216, 0.85), transparent),
    radial-gradient(1.6px 1.6px at 84% 54%, rgba(180, 140, 255, 0.72), transparent),
    radial-gradient(2px 2px at 91% 88%, rgba(255, 215, 106, 0.78), transparent),
    radial-gradient(1.2px 1.2px at 12% 46%, rgba(255, 236, 180, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 69% 7%, rgba(232, 200, 255, 0.75), transparent),
    radial-gradient(1.7px 1.7px at 5% 91%, rgba(255, 180, 210, 0.65), transparent),
    radial-gradient(1.3px 1.3px at 47% 40%, rgba(255, 215, 106, 0.55), transparent),
    radial-gradient(1.8px 1.8px at 28% 52%, rgba(255, 248, 228, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 88% 36%, rgba(224, 179, 255, 0.7), transparent),
    radial-gradient(2.2px 2.2px at 54% 92%, rgba(255, 215, 106, 0.8), transparent),
    radial-gradient(1.2px 1.2px at 37% 6%, rgba(255, 236, 180, 0.72), transparent),
    radial-gradient(1.6px 1.6px at 73% 48%, rgba(255, 233, 168, 0.68), transparent),
    radial-gradient(1.3px 1.3px at 19% 33%, rgba(196, 160, 255, 0.62), transparent),
    radial-gradient(1.9px 1.9px at 61% 14%, rgba(255, 215, 106, 0.78), transparent),
    radial-gradient(1.2px 1.2px at 95% 63%, rgba(255, 248, 228, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 42% 73%, rgba(180, 140, 255, 0.6), transparent);
  animation: dust-drift 90s linear infinite;
  mix-blend-mode: screen;
}

.dust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 236, 180, 0.9) 0.7px, transparent 1px),
    radial-gradient(circle, rgba(196, 160, 255, 0.7) 0.55px, transparent 0.9px),
    radial-gradient(circle, rgba(255, 215, 106, 0.55) 0.45px, transparent 0.8px);
  background-size: 38px 38px, 27px 27px, 53px 53px;
  background-position: 0 0, 13px 19px, 24px 7px;
  opacity: 1;
  mask-image: radial-gradient(ellipse at 50% 48%, transparent 16%, #000 26%, #000 70%, transparent 94%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, transparent 16%, #000 26%, #000 70%, transparent 94%);
  animation: dust-drift 140s linear infinite reverse;
}

.dust::after {
  content: "";
  position: absolute;
  width: 170vmin;
  height: 170vmin;
  left: 50%;
  top: 48%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 215, 106, 0.13), transparent 38%),
    radial-gradient(circle at 38% 42%, rgba(155, 92, 255, 0.26), transparent 54%),
    radial-gradient(circle at 64% 60%, rgba(255, 180, 120, 0.11), transparent 48%),
    radial-gradient(circle at 3% 3%, rgba(155, 92, 255, 0.22), transparent 34%),
    radial-gradient(circle at 97% 5%, rgba(255, 215, 106, 0.18), transparent 33%),
    radial-gradient(circle at 4% 98%, rgba(255, 180, 120, 0.17), transparent 33%),
    radial-gradient(circle at 96% 97%, rgba(196, 160, 255, 0.21), transparent 35%);
  filter: blur(16px);
  transform: translate(-50%, -50%);
  animation: orb-breathe 11s ease-in-out infinite;
}

.motes {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow:
    12vmin -28vmin 0 0.5px rgba(255, 236, 180, 0.95),
    -22vmin 18vmin 0 1px rgba(224, 179, 255, 0.8),
    31vmin 8vmin 0 0 rgba(255, 215, 106, 0.9),
    -34vmin -12vmin 0 0.5px rgba(255, 248, 228, 0.85),
    8vmin 32vmin 0 1px rgba(255, 215, 106, 0.75),
    -14vmin -34vmin 0 0 rgba(196, 160, 255, 0.7),
    26vmin -22vmin 0 0.5px rgba(255, 233, 168, 0.88),
    -28vmin 26vmin 0 0 rgba(180, 140, 255, 0.72),
    38vmin -4vmin 0 1px rgba(255, 236, 180, 0.8),
    -38vmin 4vmin 0 0.5px rgba(255, 215, 106, 0.7),
    18vmin 24vmin 0 0 rgba(232, 200, 255, 0.75),
    -8vmin 36vmin 0 0.5px rgba(255, 248, 228, 0.82),
    4vmin -36vmin 0 1px rgba(255, 215, 106, 0.78),
    -32vmin -24vmin 0 0 rgba(196, 160, 255, 0.68),
    34vmin 20vmin 0 0.5px rgba(255, 233, 168, 0.72),
    -20vmin 8vmin 0 0 rgba(255, 236, 180, 0.65),
    22vmin -32vmin 0 1px rgba(224, 179, 255, 0.7),
    0 40vmin 0 0.5px rgba(255, 215, 106, 0.6),
    -40vmin -6vmin 0 0 rgba(255, 248, 228, 0.7),
    16vmin 14vmin 0 0.5px rgba(255, 180, 210, 0.55),
    -26vmin -30vmin 0 1px rgba(255, 215, 106, 0.72),
    30vmin 32vmin 0 0 rgba(180, 140, 255, 0.6),
    -12vmin 22vmin 0 0.5px rgba(255, 236, 180, 0.8),
    36vmin -16vmin 0 0 rgba(255, 233, 168, 0.75),
    -46vmin -38vmin 0 1px rgba(224, 179, 255, 0.55),
    46vmin -40vmin 0 0.5px rgba(255, 215, 106, 0.5),
    47vmin 39vmin 0 0 rgba(255, 236, 180, 0.48),
    -47vmin 40vmin 0 1px rgba(196, 160, 255, 0.45),
    -46vmin -38vmin 14px 8px rgba(155, 92, 255, 0.12),
    46vmin -40vmin 14px 8px rgba(255, 215, 106, 0.09),
    47vmin 39vmin 14px 8px rgba(255, 180, 120, 0.08),
    -47vmin 40vmin 14px 8px rgba(196, 160, 255, 0.11);
  animation: dust-drift 70s linear infinite reverse;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Rotating mandala — photographable spokes, not watermarks */

.spoke {
  position: absolute;
  width: min(108vmin, 980px);
  height: min(108vmin, 980px);
  left: 50%;
  top: 48%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 22.5deg,
    transparent 0deg 42.85deg,
    rgba(255, 233, 168, 0.48) 42.85deg 45deg,
    transparent 45deg 87.85deg,
    rgba(196, 160, 255, 0.42) 87.85deg 90deg
  );
  mask-image: radial-gradient(circle, transparent 12%, #000 22%, #000 58%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 22%, #000 58%, transparent 78%);
  transform: translate(-50%, -50%);
  animation: spin 128s linear infinite;
  mix-blend-mode: screen;
}

.spoke-b {
  width: min(100vmin, 900px);
  height: min(100vmin, 900px);
  background: repeating-conic-gradient(
    from 7.5deg,
    transparent 0deg 14.55deg,
    rgba(255, 215, 106, 0.28) 14.55deg 15deg
  );
  mask-image: radial-gradient(circle, transparent 20%, #000 30%, #000 64%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle, transparent 20%, #000 30%, #000 64%, transparent 82%);
  animation: spin 176s linear infinite reverse;
  opacity: 0.9;
}

.ring {
  position: absolute;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.ring.r-compass {
  width: min(56vmin, 560px);
  height: min(56vmin, 560px);
  border: 0;
  background:
    repeating-conic-gradient(
      from -0.85deg,
      rgba(255, 236, 180, 0.95) 0deg 0.7deg,
      transparent 0.7deg 45deg
    ),
    repeating-conic-gradient(
      from -0.35deg,
      rgba(224, 179, 255, 0.62) 0deg 0.32deg,
      transparent 0.32deg 15deg
    );
  mask-image: radial-gradient(circle, transparent 45.5%, #000 46.2%, #000 50.4%, transparent 51.4%);
  -webkit-mask-image: radial-gradient(circle, transparent 45.5%, #000 46.2%, #000 50.4%, transparent 51.4%);
  animation: spin 80s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.55));
}

.ring.r1 {
  width: min(34vmin, 340px);
  height: min(34vmin, 340px);
  border: 2px solid rgba(255, 236, 180, 0.82);
  box-shadow:
    0 0 14px rgba(255, 215, 106, 0.55),
    0 0 36px rgba(255, 215, 106, 0.22),
    inset 0 0 14px rgba(255, 215, 106, 0.18);
  animation: ring-breathe 8s ease-in-out infinite;
}

.ring.r2 {
  width: min(62vmin, 620px);
  height: min(62vmin, 620px);
  border: 1.5px solid rgba(224, 179, 255, 0.7);
  box-shadow:
    0 0 16px rgba(155, 92, 255, 0.4),
    inset 0 0 10px rgba(155, 92, 255, 0.12);
  animation: ring-breathe 11s ease-in-out infinite reverse;
}

.ring.r3 {
  width: min(86vmin, 860px);
  height: min(86vmin, 860px);
  border: 1.5px dashed rgba(255, 215, 106, 0.62);
  box-shadow: 0 0 12px rgba(255, 215, 106, 0.22);
  animation: spin 90s linear infinite;
}

#pause .spoke { animation-duration: 180s; }
#pause .ring.r2 {
  border-color: rgba(255, 233, 168, 0.55);
  width: min(52vmin, 520px);
  height: min(52vmin, 520px);
}

#death .spoke {
  background: repeating-conic-gradient(
    from 22.5deg,
    transparent 0deg 42.8deg,
    rgba(255, 107, 157, 0.46) 42.8deg 45deg,
    transparent 45deg 87.8deg,
    rgba(255, 215, 106, 0.32) 87.8deg 90deg
  );
  animation-duration: 72s;
}

#death .ring.r1 { border-color: rgba(255, 140, 170, 0.78); box-shadow: 0 0 16px rgba(255, 80, 130, 0.45), inset 0 0 12px rgba(255, 80, 130, 0.15); }
#death .ring.r2 { border-color: rgba(255, 215, 106, 0.55); }
#death .dust::after {
  background:
    radial-gradient(circle at 40% 40%, rgba(255, 80, 120, 0.28), transparent 55%),
    radial-gradient(circle at 65% 60%, rgba(255, 215, 106, 0.14), transparent 50%);
}

/* ── Splash chamber: type in space, frame is the sigil ── */

.splash-inner {
  isolation: isolate;
  width: min(34rem, 78vw);
  max-height: 96dvh;
  padding: 3.2rem 1.6rem 2.1rem;
  text-align: center;
  background: none;
}

#splash.overlay {
  padding-bottom: max(5.8rem, calc(env(safe-area-inset-bottom, 0px) + 5rem));
  background:
    radial-gradient(ellipse 46% 42% at 50% 46%, transparent 52%, rgba(2, 0, 6, 0.52) 100%),
    radial-gradient(circle 24vmax at 0% 0%, rgba(255, 224, 138, 0.3) 0%, rgba(154, 62, 224, 0.17) 38%, transparent 66%),
    radial-gradient(circle 24vmax at 100% 0%, rgba(214, 136, 255, 0.27) 0%, rgba(255, 215, 106, 0.16) 40%, transparent 68%),
    radial-gradient(circle 26vmax at 0% 100%, rgba(198, 118, 255, 0.23) 0%, rgba(255, 180, 120, 0.09) 42%, transparent 66%),
    radial-gradient(circle 26vmax at 100% 100%, rgba(255, 215, 106, 0.26) 0%, rgba(164, 72, 234, 0.16) 44%, transparent 70%),
    radial-gradient(ellipse 58% 10% at 50% 0%, rgba(255, 236, 180, 0.08), transparent 72%),
    radial-gradient(ellipse 58% 10% at 50% 100%, rgba(196, 160, 255, 0.1), transparent 72%),
    linear-gradient(to right, rgba(12, 2, 24, 0.44), transparent 13%, transparent 87%, rgba(12, 2, 24, 0.44)),
    linear-gradient(to bottom, rgba(12, 2, 24, 0.42), transparent 15%, transparent 76%, rgba(8, 1, 16, 0.5));
}

/* Splash particle wash runs vignette-to-edge; only the title core stays clear */

#splash .dust::before {
  mask-image: radial-gradient(ellipse at 50% 48%, transparent 12%, #000 24%, #000 98%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, transparent 12%, #000 24%, #000 98%);
}

.splash-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.85rem 1rem max(0.8rem, env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: linear-gradient(to top, rgba(2, 0, 8, 0.94) 34%, rgba(6, 1, 14, 0.5) 74%, rgba(2, 0, 8, 0));
  pointer-events: none;
}

.splash-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 180, 0.6), transparent);
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.55));
}

.splash-foot .fine,
.splash-foot .link {
  display: block;
  width: 100%;
  margin: 0.22rem 0;
  font-family: Cinzel, serif;
  font-size: 11.5px;
  line-height: 1.45;
  text-decoration: none;
  pointer-events: auto;
}

.splash-foot .fine {
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(240, 228, 200, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

.splash-foot .link {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd76a;
  text-shadow:
    0 0 10px rgba(255, 215, 106, 0.45),
    0 1px 6px rgba(0, 0, 0, 0.9);
}

.splash-foot .link:hover,
.splash-foot .link:focus-visible {
  color: #fff6da;
  text-shadow: 0 0 14px rgba(255, 236, 180, 0.75);
}

/* Tetris-02 weight: ~half-frame octagon, 5.5px near-white, real glow */

.sigil-wrap {
  position: absolute;
  z-index: 1;
  width: min(76vmin, 86vh, 840px);
  height: min(76vmin, 86vh, 840px);
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
  animation: sigil-breathe 7s ease-in-out infinite;
}

/* Aura OUTSIDE the octagon — halo + rays bridging medallion to mid-field */

#splash .sigil-wrap::before {
  content: "";
  position: absolute;
  inset: -32%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 11deg at 50% 50%, rgba(255, 233, 168, 0.08) 0deg 1.6deg, transparent 1.6deg 9deg),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(255, 215, 106, 0.05) 46%, transparent 48%, transparent 55%, rgba(196, 160, 255, 0.05) 56%, transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 37%, rgba(255, 215, 106, 0.11) 44%, rgba(155, 92, 255, 0.09) 51%, rgba(255, 180, 120, 0.06) 59%, transparent 73%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 31%, #000 36%, #000 66%, rgba(0, 0, 0, 0.35) 74%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 31%, #000 36%, #000 66%, rgba(0, 0, 0, 0.35) 74%, transparent 86%);
}

/* Opaque well INSIDE the octagon — Tetris-02 dark playfield, not glow-on-grid */
.sigil-well {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: var(--octagon);
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 215, 106, 0.22), transparent 30%),
    repeating-conic-gradient(from 3deg at 50% 48%, rgba(255, 236, 180, 0.07) 0deg 3.5deg, transparent 3.5deg 15deg),
    repeating-radial-gradient(circle at 50% 48%, transparent 0 5.5%, rgba(255, 215, 106, 0.1) 6.5%, rgba(196, 160, 255, 0.05) 7.5%, transparent 9.2%),
    radial-gradient(ellipse 64% 64% at 50% 48%, rgba(155, 92, 255, 0.17), transparent 72%),
    #020006;
  mix-blend-mode: normal;
  isolation: isolate;
  filter:
    drop-shadow(0 0 18px rgba(255, 215, 106, 0.28))
    drop-shadow(0 0 64px rgba(155, 92, 255, 0.3))
    drop-shadow(0 0 140px rgba(255, 180, 120, 0.14));
}

.sigil-well .facet {
  position: absolute;
  clip-path: var(--octagon);
  mix-blend-mode: normal;
}

.sigil-well .facet.f1 {
  inset: 6.5%;
  background: #080414;
  box-shadow: none;
}

.sigil-well .facet.f2 {
  inset: 14.5%;
  background: #0e0820;
}

.sigil-well .core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 46%,
      #fff6d0 0%,
      #ffd76a 14%,
      #eda14b 30%,
      #9b5cff 54%,
      #3a1668 74%,
      #0c0520 90%,
      transparent 100%);
  box-shadow:
    inset 0 0 26px rgba(255, 215, 106, 0.32),
    0 0 44px rgba(255, 205, 95, 0.3),
    0 0 120px rgba(155, 92, 255, 0.26);
}

.sigil-well .petals {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 11.25deg,
    rgba(255, 215, 106, 0.22) 0deg 7deg,
    rgba(8, 2, 16, 0) 7deg 22.5deg,
    rgba(155, 92, 255, 0.18) 22.5deg 29deg,
    rgba(8, 2, 16, 0) 29deg 45deg
  );
  mask-image: radial-gradient(circle, transparent 36%, #000 46%, #000 68%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle, transparent 36%, #000 46%, #000 68%, transparent 82%);
  animation: well-spin 96s linear infinite;
  mix-blend-mode: normal;
  opacity: 0.9;
}

.sigil-well .petals-b {
  inset: 16%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 236, 180, 0.16) 0deg 3.2deg,
    transparent 3.2deg 22.5deg
  );
  mask-image: radial-gradient(circle, transparent 40%, #000 50%, #000 70%, transparent 84%);
  -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 50%, #000 70%, transparent 84%);
  animation: well-spin 140s linear infinite reverse;
  opacity: 0.75;
}

.sigil-well .band {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  mix-blend-mode: normal;
}

.sigil-well .band.b1 {
  width: 78%;
  height: 78%;
  border: 9px solid #1a0c32;
  box-shadow:
    0 0 0 1.5px rgba(255, 233, 168, 0.55),
    inset 0 0 0 1px rgba(224, 179, 255, 0.35);
}

.sigil-well .band.b2 {
  width: 58%;
  height: 58%;
  border: 7px solid #221044;
  box-shadow:
    0 0 0 1px rgba(255, 215, 106, 0.5),
    inset 0 0 0 1px rgba(180, 140, 255, 0.28);
}

.sigil-well .band.b3 {
  width: 38%;
  height: 38%;
  border: 5px solid #1a102c;
  box-shadow:
    0 0 0 1px rgba(255, 236, 180, 0.42),
    inset 0 0 12px rgba(8, 2, 16, 0.85);
}

.sigil-well .in-spoke {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 22.5deg,
    transparent 0deg 42.7deg,
    rgba(255, 233, 168, 0.42) 42.7deg 45deg
  );
  mask-image: radial-gradient(circle, transparent 40%, #000 50%, #000 70%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 50%, #000 70%, transparent 86%);
  animation: well-spin 72s linear infinite;
  mix-blend-mode: normal;
  opacity: 0.8;
}

.sigil-well .in-spoke-b {
  inset: 18%;
  background: repeating-conic-gradient(
    from 7.5deg,
    transparent 0deg 14.4deg,
    rgba(196, 160, 255, 0.32) 14.4deg 15deg
  );
  mask-image: radial-gradient(circle, transparent 38%, #000 48%, #000 72%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 48%, #000 72%, transparent 88%);
  animation: well-spin 110s linear infinite reverse;
  opacity: 0.65;
}

.sigil-well .in-dust {
  position: absolute;
  inset: 8%;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255, 236, 180, 0.95), transparent),
    radial-gradient(1.2px 1.2px at 32% 62%, rgba(224, 179, 255, 0.8), transparent),
    radial-gradient(1.8px 1.8px at 48% 18%, rgba(255, 215, 106, 0.9), transparent),
    radial-gradient(1.1px 1.1px at 64% 44%, rgba(255, 248, 228, 0.85), transparent),
    radial-gradient(1.6px 1.6px at 78% 28%, rgba(180, 140, 255, 0.75), transparent),
    radial-gradient(1.3px 1.3px at 22% 78%, rgba(255, 215, 106, 0.8), transparent),
    radial-gradient(1.4px 1.4px at 56% 72%, rgba(255, 236, 180, 0.7), transparent),
    radial-gradient(1.2px 1.2px at 84% 66%, rgba(224, 179, 255, 0.7), transparent),
    radial-gradient(1.7px 1.7px at 40% 40%, rgba(255, 233, 168, 0.75), transparent),
    radial-gradient(1.1px 1.1px at 70% 82%, rgba(255, 215, 106, 0.65), transparent),
    radial-gradient(1.4px 1.4px at 12% 48%, rgba(255, 248, 228, 0.7), transparent),
    radial-gradient(1.3px 1.3px at 88% 42%, rgba(196, 160, 255, 0.65), transparent),
    radial-gradient(2px 2px at 36% 86%, rgba(255, 215, 106, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 52% 8%, rgba(255, 236, 180, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 8% 32%, rgba(180, 140, 255, 0.6), transparent);
  mix-blend-mode: normal;
  opacity: 0.9;
  pointer-events: none;
}

.sigil-still {
  width: min(78vmin, 90vh, 860px);
  height: min(78vmin, 90vh, 860px);
  top: 50%;
}

#pause .sigil-well .petals,
#pause .sigil-well .in-spoke {
  opacity: 0.32;
  mask-image: radial-gradient(circle, transparent 52%, #000 60%, #000 72%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 60%, #000 72%, transparent 86%);
}

.sigil-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 3px rgba(255, 248, 228, 1))
    drop-shadow(0 0 12px rgba(255, 215, 106, 0.9))
    drop-shadow(0 0 36px rgba(255, 215, 106, 0.5))
    drop-shadow(0 0 72px rgba(155, 92, 255, 0.32));
}

.sigil-frame.sigil-glow {
  filter: blur(7px);
  opacity: 0.72;
}

.sigil-wrap .vtx {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  background: #fffaf0;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(255, 215, 106, 0.95);
}

.sigil-wrap .axis {
  position: absolute;
  z-index: 2;
  background: #ffe9a8;
  box-shadow: 0 0 8px rgba(255, 215, 106, 0.75);
}

.sigil-wrap .axis.n,
.sigil-wrap .axis.s {
  left: 50%;
  width: 2px;
  height: 12px;
  transform: translateX(-50%);
}

.sigil-wrap .axis.n { top: 1.6%; }
.sigil-wrap .axis.s { bottom: 1.6%; }

.sigil-wrap .axis.e,
.sigil-wrap .axis.w {
  top: 50%;
  width: 12px;
  height: 2px;
  transform: translateY(-50%);
}

.sigil-wrap .axis.w { left: 1.6%; }
.sigil-wrap .axis.e { right: 1.6%; }

.sigil-crash {
  width: min(64vmin, 76vh, 700px);
  height: min(64vmin, 76vh, 700px);
}

#death .sigil-well { background: #0a0108; }
#death .sigil-well .facet.f1 { background: #180610; }
#death .sigil-well .facet.f2 { background: #240a14; }
#death .sigil-well .core {
  box-shadow: none;
  background:
    radial-gradient(circle at 50% 46%,
      #2a1018 0%,
      #14080e 48%,
      #0a0108 100%);
}
#death .sigil-well .band.b1 { border-color: #2a1018; box-shadow: 0 0 0 1.5px rgba(255, 140, 170, 0.5), inset 0 0 0 1px rgba(255, 215, 106, 0.25); }
#death .sigil-well .band.b2 { border-color: #321018; }
#death .sigil-well .petals {
  background: repeating-conic-gradient(
    from 11.25deg,
    rgba(255, 107, 157, 0.32) 0deg 7deg,
    transparent 7deg 22.5deg,
    rgba(255, 215, 106, 0.2) 22.5deg 29deg,
    transparent 29deg 45deg
  );
}

.sigil-crash .sigil-frame {
  filter:
    drop-shadow(0 0 4px rgba(255, 180, 200, 0.95))
    drop-shadow(0 0 16px rgba(255, 107, 157, 0.7))
    drop-shadow(0 0 40px rgba(255, 80, 130, 0.35));
}

.seed {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin: 0.15rem auto 1.05rem;
  background: var(--gold-hot);
  transform: rotate(45deg);
  box-shadow:
    0 0 12px rgba(255, 248, 228, 1),
    0 0 28px rgba(255, 215, 106, 0.95),
    0 0 48px rgba(180, 80, 255, 0.45);
  animation: gold-pulse 5.2s ease-in-out infinite;
}

.title {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 1.02;
}

.title .yen {
  display: block;
  position: relative;
  font-family: "UnifrakturMaguntia", "UnifrakturCook", fantasy;
  font-size: clamp(4.6rem, 20vw, 8.75rem);
  letter-spacing: 0.05em;
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: 2px rgba(62, 20, 4, 0.85);
  background: linear-gradient(168deg, #fffdf6 0%, #ffedb0 30%, #ffc851 55%, #d97a26 76%, #6e2a0c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 2px rgba(46, 10, 0, 0.9))
    drop-shadow(0 3px 12px rgba(1, 0, 4, 0.85))
    drop-shadow(0 0 7px rgba(255, 244, 214, 0.65))
    drop-shadow(0 0 26px rgba(212, 140, 255, 0.68))
    drop-shadow(0 0 62px rgba(255, 215, 106, 0.45));
  animation: yen-breathe 5.8s ease-in-out infinite;
}

.title .yen::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: none;
  color: #ffd76a;
  opacity: 0.35;
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.title .sub {
  display: block;
  margin-top: 0.7rem;
  font-family: "UnifrakturMaguntia", "UnifrakturCook", fantasy;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.2rem, 4.4vw, 1.85rem);
  letter-spacing: 0.08em;
  color: #33110a;
  text-shadow:
    0 1px 0 rgba(255, 224, 160, 0.85),
    0 -1px 1px rgba(255, 236, 190, 0.5),
    0 2px 12px rgba(30, 4, 0, 0.65),
    0 0 26px rgba(255, 190, 90, 0.45);
}

.rule {
  position: relative;
  z-index: 1;
  width: min(14rem, 58%);
  height: 2px;
  margin: 1.15rem auto 1.25rem;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 180, 0.95), transparent);
  box-shadow: 0 0 10px rgba(255, 215, 106, 0.55);
}

.rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold-hot);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 12px var(--gold);
}

.rule-crash {
  background: linear-gradient(90deg, transparent, rgba(255, 140, 170, 0.95), transparent);
}

.rule-crash::before { background: var(--danger-hot); box-shadow: 0 0 12px var(--danger); }

.epigraph {
  position: relative;
  z-index: 1;
  color: #3a1508;
  font-style: italic;
  font-size: clamp(1.08rem, 2.6vw, 1.24rem);
  line-height: 1.62;
  letter-spacing: 0.018em;
  margin: 0 auto 1.7rem;
  max-width: 26rem;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 228, 170, 0.75),
    0 2px 14px rgba(30, 4, 0, 0.6),
    0 0 24px rgba(255, 190, 90, 0.35);
}

.actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.hint {
  position: relative;
  z-index: 1;
  margin: 1.35rem 0 0;
  font-size: 0.92rem;
  color: #f8f0dc;
  letter-spacing: 0.08em;
  line-height: 1.5;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  text-shadow:
    0 0 10px rgba(5, 1, 10, 1),
    0 0 18px rgba(5, 1, 10, 1),
    0 1px 4px #000,
    0 2px 14px rgba(0, 0, 0, 0.95);
}

/* ── Buttons: luminous HUD locks, not web chrome ── */

button {
  font-family: Cinzel, serif;
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fffaf0;
  padding: 1rem 1.9rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background:
    linear-gradient(180deg,
      rgba(255, 242, 214, 0.62) 0%,
      rgba(212, 150, 48, 0.55) 22%,
      rgba(48, 18, 8, 0.98) 58%,
      rgba(12, 4, 10, 1) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 250, 235, 0.95),
    inset 0 10px 16px rgba(255, 226, 160, 0.28),
    inset 0 0 0 1.5px rgba(255, 236, 180, 0.95),
    inset 0 -16px 26px rgba(0, 0, 0, 0.7),
    inset 0 -2px 0 rgba(120, 50, 10, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(255, 215, 106, 0.5);
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0 calc(100% - var(--cut)), 0 var(--cut)
  );
  filter: drop-shadow(0 0 12px rgba(255, 215, 106, 0.55));
  text-shadow: 0 0 12px rgba(255, 215, 106, 0.7), 0 1px 8px rgba(0, 0, 0, 0.9);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

button:hover {
  color: #fffaf0;
  background:
    linear-gradient(180deg,
      rgba(255, 248, 228, 0.85) 0%,
      rgba(255, 215, 106, 0.7) 24%,
      rgba(80, 32, 12, 1) 62%,
      rgba(16, 6, 10, 1) 100%);
  box-shadow:
    inset 0 1px 0 #fffaf0,
    inset 0 0 0 1.5px #fff8e4,
    inset 0 -14px 22px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(255, 215, 106, 0.7);
  filter: drop-shadow(0 0 18px rgba(255, 215, 106, 0.75));
}

button:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--gold-hot),
    0 0 0 2px rgba(5, 1, 10, 0.8),
    0 0 0 3px var(--gold);
}

button:disabled {
  opacity: 0.72;
  cursor: default;
  color: #f0e2c4;
  background:
    linear-gradient(180deg,
      rgba(255, 233, 168, 0.22) 0%,
      rgba(40, 18, 10, 0.9) 45%,
      rgba(8, 2, 12, 1) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 215, 106, 0.5);
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.2));
}

button.ghost {
  margin-top: 0;
  background:
    linear-gradient(180deg,
      rgba(255, 233, 168, 0.28) 0%,
      rgba(80, 40, 16, 0.7) 30%,
      rgba(10, 4, 16, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 180, 0.45),
    inset 0 0 0 1.5px rgba(255, 242, 214, 0.88),
    inset 0 -12px 18px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(255, 215, 106, 0.35);
  color: #fffaf0;
  filter: drop-shadow(0 0 10px rgba(255, 215, 106, 0.42));
}

button.ghost:hover {
  background:
    linear-gradient(180deg,
      rgba(255, 236, 180, 0.5) 0%,
      rgba(120, 64, 20, 0.75) 32%,
      rgba(12, 4, 16, 1) 100%);
  box-shadow:
    inset 0 0 0 1.5px #fff8e4,
    0 0 18px rgba(255, 215, 106, 0.5);
  filter: drop-shadow(0 0 16px rgba(255, 215, 106, 0.6));
}

#start-btn::before,
#start-btn::after,
#reincarnate-btn::before,
#reincarnate-btn::after {
  content: "◆";
  font-size: 0.52em;
  opacity: 0.9;
  margin: 0 0.55em;
  color: var(--gold-hot);
}

#reincarnate-btn {
  margin-top: 0.35rem;
}

/* ── Pause / death: open type + gold ticks in space, never a modal card ── */

.panel-shell,
.death-shell {
  background: none;
  clip-path: none;
  padding: 0;
  min-width: min(92vw, 26rem);
  max-width: 28rem;
}

.panel {
  position: relative;
  isolation: isolate;
  background: none;
  clip-path: none;
  padding: 2.5rem 2.15rem 1.95rem;
  text-align: center;
  min-width: min(92vw, 22rem);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.death-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  clip-path: none;
  padding: 2.7rem 2.2rem 2.1rem;
}

.open-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.open-frame .bracket {
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: #fff1c4;
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.9));
}

.open-frame .bracket.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.open-frame .bracket.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.open-frame .bracket.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.open-frame .bracket.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.open-frame .tick {
  position: absolute;
  background: #fff1c4;
  box-shadow: 0 0 8px rgba(255, 215, 106, 0.85);
}

.open-frame .tick.n,
.open-frame .tick.s {
  left: 50%;
  width: 2px;
  height: 14px;
  transform: translateX(-50%);
}

.open-frame .tick.n { top: 0; }
.open-frame .tick.s { bottom: 0; }

.open-frame .tick.e,
.open-frame .tick.w {
  top: 50%;
  width: 14px;
  height: 2px;
  transform: translateY(-50%);
}

.open-frame .tick.w { left: 0; }
.open-frame .tick.e { right: 0; }

.crash-frame .bracket { border-color: #ffc1d4; filter: drop-shadow(0 0 6px rgba(255, 107, 157, 0.85)); }
.crash-frame .tick { background: #ffc1d4; box-shadow: 0 0 8px rgba(255, 107, 157, 0.8); }

.panel h2 {
  position: relative;
  z-index: 1;
  font-family: "UnifrakturMaguntia", Cinzel, serif;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: clamp(1.85rem, 5.4vw, 2.4rem);
  font-weight: 400;
  font-synthesis: none;
  margin: 0;
  background: linear-gradient(120deg, #fff 10%, #e0b3ff 50%, #ffd76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(180, 100, 255, 0.45)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}

.death-panel h2 {
  background: linear-gradient(120deg, #ffe9a8 0%, #ff6b9d 48%, #ffd76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 80, 130, 0.55)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}

.muted {
  position: relative;
  z-index: 1;
  color: #fff6e8;
  margin: 0 0 0.55rem;
  font-style: italic;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 10px rgba(5, 1, 10, 1),
    0 0 18px rgba(0, 0, 0, 1),
    0 1px 4px #000;
}

.big-score {
  position: relative;
  z-index: 1;
  font-family: Cinzel, serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ead9b0;
  margin: 0.2rem 0 0.85rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
}

.big-score span {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(2.6rem, 10vw, 4rem);
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--gold-hot);
  text-shadow:
    0 0 18px rgba(255, 215, 106, 0.5),
    0 0 48px rgba(255, 80, 140, 0.28),
    0 2px 12px rgba(0, 0, 0, 0.9);
  animation: gold-pulse 4.2s ease-in-out infinite;
}

.slider,
.check {
  position: relative;
  z-index: 1;
  display: block;
  text-align: left;
  margin: 0.95rem 0;
  font-size: 0.96rem;
  color: #f3eadc;
  font-family: "Cormorant Garamond", Georgia, serif;
  text-shadow:
    0 0 8px rgba(5, 1, 10, 1),
    0 1px 10px rgba(0, 0, 0, 0.9);
}

.slider span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  letter-spacing: 0.04em;
}

.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, rgba(255, 215, 106, 0.35), rgba(255, 236, 180, 0.95) 48%, rgba(196, 160, 255, 0.7));
  border-radius: 0;
  outline: none;
  accent-color: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 215, 106, 0.35);
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--gold-hot);
  border: 0;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(255, 215, 106, 0.95);
  cursor: pointer;
}

.slider input[type="range"]::-moz-range-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 215, 106, 0.35), rgba(255, 236, 180, 0.95) 48%, rgba(196, 160, 255, 0.7));
  border: 0;
}

.slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--gold-hot);
  border: 0;
  border-radius: 0;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(255, 215, 106, 0.95);
  cursor: pointer;
}

.slider b,
.check { color: #f7f0e4; }

.slider b {
  font-family: Cinzel, serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold-hot);
  text-shadow: 0 0 10px rgba(255, 215, 106, 0.55);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  margin: 0.75rem 0;
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin: 0;
  border: 1.5px solid rgba(255, 233, 168, 0.85);
  background: transparent;
  transform: rotate(45deg);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 215, 106, 0.35);
}

.check input:checked {
  background: var(--gold-hot);
  box-shadow: 0 0 12px rgba(255, 215, 106, 0.85);
}

.check input:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.muted-inline {
  color: #d9cbb0;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: "Cormorant Garamond", Georgia, serif;
}

.attr {
  position: relative;
  z-index: 1;
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #f0e4c8;
  letter-spacing: 0.02em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  text-shadow:
    0 0 10px rgba(5, 1, 10, 1),
    0 1px 10px rgba(0, 0, 0, 0.95);
}

.row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.row button { margin-top: 0; }

/* ── Motion ── */

@keyframes veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes well-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dust-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-3.5%, -2.5%, 0); }
}

@keyframes ring-breathe {
  0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes orb-breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes sigil-breathe {
  0%, 100% {
    filter: none;
    opacity: 1;
  }
  50% {
    filter: brightness(1.12);
    opacity: 1;
  }
}

@keyframes yen-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 16px rgba(200, 120, 255, 0.38))
      drop-shadow(0 0 36px rgba(255, 215, 106, 0.16));
  }
  50% {
    filter:
      drop-shadow(0 0 28px rgba(255, 215, 106, 0.55))
      drop-shadow(0 0 64px rgba(155, 92, 255, 0.32));
  }
}

@keyframes gold-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

@keyframes lock-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay:not(.hidden),
  .dust, .dust::before, .dust::after,
  .motes, .spoke, .ring, .sigil-wrap, .seed,
  .sigil-well .petals, .sigil-well .in-spoke,
  .title .yen, #score, .longing-lock, .big-score span {
    animation: none !important;
  }
}

/* ── Compact viewports ── */

@media (max-height: 680px) {
  .splash-foot .fine,
  .splash-foot .link { font-size: 11px; }
  .splash-inner { padding: 1.8rem 1.2rem 1.2rem; }
  .title .yen { font-size: clamp(3rem, 12vw, 4.6rem); }
  .epigraph { font-size: 0.98rem; margin-bottom: 1.1rem; }
  .hint { display: none; }
  .ring.r3 { display: none; }
  .sigil-wrap {
    width: min(72vmin, 88vh, 640px);
    height: min(72vmin, 88vh, 640px);
  }
  .panel { padding: 1.7rem 1.4rem 1.3rem; }
  .slider { margin: 0.55rem 0; }
}

@media (max-width: 420px) {
  .splash-inner { padding: 2rem 0.9rem 1.2rem; }
  .title .sub { font-size: 1.15rem; }
  button { letter-spacing: 0.12em; padding: 0.85rem 1.2rem; font-size: 0.8rem; }
  #score { font-size: 2.05rem; }
  .longing-lock { width: 4.6rem; height: 4.6rem; }
  .sigil-wrap {
    width: min(88vw, 78vh);
    height: min(88vw, 78vh);
  }
}