:root {
  color-scheme: dark;
  --bg: #0d1110;
  --bg-2: #151c19;
  --panel: rgba(17, 21, 18, 0.9);
  --panel-strong: rgba(9, 12, 11, 0.92);
  --line: rgba(231, 186, 86, 0.3);
  --line-soft: rgba(235, 221, 183, 0.14);
  --text: #fff4d8;
  --muted: #c6b889;
  --faint: #857b63;
  --gold: #e8b84d;
  --gold-2: #b87c28;
  --jade: #3ed391;
  --teal: #31b9b7;
  --danger: #e85e3d;
  --ruby: #d84b43;
  --stone: #2b312c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  --radius: 8px;
  --focus: 0 0 0 3px rgba(62, 211, 145, 0.35);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 7, 0.6), rgba(10, 12, 11, 0.92)),
    var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.app {
  min-height: 100vh;
  background-image:
    linear-gradient(90deg, rgba(7, 9, 8, 0.76), rgba(7, 9, 8, 0.16), rgba(7, 9, 8, 0.78)),
    url("./assets/temple-table.png");
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  position: relative;
}

.app::before {
  content: "";
  position: fixed;
  inset: 0;
  border: 0 solid transparent;
  box-shadow: none;
  pointer-events: none;
  z-index: 95;
  transition: border-color 220ms ease, border-width 220ms ease, box-shadow 260ms ease;
}

.app--frame-mine::before {
  border-width: 5px;
  border-color: var(--jade);
  box-shadow: inset 0 0 28px rgba(62, 211, 145, 0.42);
  animation: frameMinePulse 2.4s ease-in-out infinite;
}

.app--frame-retreated::before {
  border-width: 5px;
  border-color: var(--gold);
  box-shadow: inset 0 0 28px rgba(232, 184, 77, 0.38);
}

.app--frame-end::before {
  border-width: 5px;
  border-color: var(--danger);
  box-shadow: inset 0 0 32px rgba(232, 94, 61, 0.42);
}

@keyframes frameMinePulse {
  0%, 100% { box-shadow: inset 0 0 22px rgba(62, 211, 145, 0.32); }
  50%      { box-shadow: inset 0 0 36px rgba(62, 211, 145, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .app--frame-mine::before { animation: none; }
}

/* TREASURE BURST — full-screen gold jackpot moment */

.treasure-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.treasure-burst.is-active { opacity: 1; }

.treasure-burst.is-leaving {
  opacity: 0;
  transition: opacity 240ms ease-in;
}

.treasure-burst__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(255, 245, 200, 0.95) 28%, rgba(255, 215, 107, 0.55) 55%, transparent 80%);
  opacity: 0;
  animation: treasureFlash 0.65s ease-out;
}

@keyframes treasureFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

.treasure-burst__starflash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28vmin;
  height: 28vmin;
  transform: translate(-50%, -50%) scale(0.2);
  background:
    radial-gradient(circle, #ffffff 0%, rgba(255, 250, 220, 0.9) 18%, rgba(255, 215, 107, 0.55) 38%, transparent 70%),
    conic-gradient(from 0deg, transparent 0deg, #ffffff 8deg, transparent 18deg, transparent 80deg, #ffffff 88deg, transparent 100deg, transparent 170deg, #ffffff 178deg, transparent 188deg, transparent 260deg, #ffffff 268deg, transparent 278deg);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: treasureStarflash 0.9s cubic-bezier(0.22, 1.6, 0.32, 1);
}

@keyframes treasureStarflash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(0deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(60deg); }
  60%  { opacity: 0.6; transform: translate(-50%, -50%) scale(2) rotate(120deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(180deg); }
}

.treasure-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 230, 130, 0.55) 0%, rgba(170, 100, 20, 0.6) 32%, rgba(50, 22, 0, 0.86) 78%, rgba(0, 0, 0, 0.92) 100%);
  backdrop-filter: blur(2.5px);
}

.treasure-burst__rays {
  position: absolute;
  inset: -25vmin;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 235, 150, 0.4) 5deg,
      transparent 11deg,
      transparent 22deg,
      rgba(255, 215, 107, 0.32) 27deg,
      transparent 33deg,
      transparent 50deg,
      rgba(255, 245, 200, 0.28) 55deg,
      transparent 60deg);
  animation: treasureRaysSpin 3s linear;
  filter: blur(1.6px);
  mix-blend-mode: screen;
}

.treasure-burst__rays--reverse {
  animation: treasureRaysSpinReverse 3.6s linear;
  opacity: 0.7;
}

@keyframes treasureRaysSpin {
  0%   { transform: rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: rotate(280deg); opacity: 0; }
}

@keyframes treasureRaysSpinReverse {
  0%   { transform: rotate(0deg);    opacity: 0; }
  10%  { opacity: 0.7; }
  88%  { opacity: 0.7; }
  100% { transform: rotate(-220deg); opacity: 0; }
}

.treasure-burst__coins {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.treasure-burst__coin {
  position: absolute;
  width: var(--size, 16px);
  height: var(--size, 16px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fffbe0 0%, #ffe580 32%, #ffd76b 55%, #c98a30 80%, #6b3e0d 100%);
  box-shadow:
    0 0 18px rgba(255, 235, 150, 0.95),
    0 0 32px rgba(255, 215, 107, 0.55),
    inset 0 0 5px rgba(255, 250, 220, 0.7);
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  animation: coinFly var(--dur, 1500ms) cubic-bezier(0.16, 0.72, 0.28, 1) var(--delay, 0ms) forwards;
}

@keyframes coinFly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.25) rotate(0deg); }
  14%  { opacity: 1; transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18)) scale(1.15) rotate(80deg); }
  60%  { opacity: 1; transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(1) rotate(360deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.55) rotate(720deg); }
}

.treasure-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 12px;
}

.treasure-burst__big {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(160px, 44vmin, 420px);
  line-height: 0.92;
  background: linear-gradient(180deg, #ffffff 0%, #fff5b0 22%, #ffd76b 50%, #e8a73a 78%, #8a5c1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 60px rgba(255, 235, 150, 0.85),
    0 0 18px rgba(255, 215, 107, 1),
    0 0 6px rgba(255, 245, 200, 1);
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.6));
  letter-spacing: -0.02em;
  animation: treasureBigPop 2.6s cubic-bezier(0.22, 1.6, 0.32, 1);
}

@keyframes treasureBigPop {
  0%   { transform: scale(0.2) rotate(-14deg); opacity: 0; filter: blur(12px) drop-shadow(0 0 0 transparent); }
  14%  { transform: scale(1.32) rotate(4deg);  opacity: 1; filter: blur(0) drop-shadow(0 8px 28px rgba(0,0,0,0.6)); }
  24%  { transform: scale(0.94) rotate(-2deg); }
  36%  { transform: scale(1.06) rotate(1deg); }
  48%  { transform: scale(1) rotate(0deg); }
  60%  { transform: scale(1.04) rotate(0deg); }
  88%  { transform: scale(1) rotate(0deg);     opacity: 1; }
  100% { transform: scale(1.12) rotate(0deg);  opacity: 0; }
}

.treasure-burst__label {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(20px, 5vmin, 36px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff5b0;
  text-shadow:
    0 0 24px rgba(255, 235, 150, 0.9),
    0 0 6px rgba(232, 184, 77, 0.95);
  animation: treasureLabel 2.6s ease-out;
}

@keyframes treasureLabel {
  0%   { opacity: 0; transform: translateY(36px) scale(0.85); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  88%  { opacity: 1; transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .treasure-burst__rays,
  .treasure-burst__flash,
  .treasure-burst__starflash,
  .treasure-burst__coin { display: none; }
  .treasure-burst__big,
  .treasure-burst__label { animation: none; opacity: 1; }
}

/* HAZARD BURST — red warning fullscreen (first occurrence) */

.hazard-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.hazard-burst.is-active { opacity: 1; }

.hazard-burst.is-leaving {
  opacity: 0;
  transition: opacity 380ms ease-in;
}

.hazard-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 94, 61, 0.55) 0%, rgba(120, 30, 18, 0.78) 38%, rgba(20, 5, 5, 0.92) 80%);
  backdrop-filter: blur(2px);
  animation: hazardDimPulse 1.7s ease-out;
}

@keyframes hazardDimPulse {
  0%, 100% { opacity: 1; }
  10%      { opacity: 1; }
  18%      { opacity: 0.6; }
  26%      { opacity: 1; }
  34%      { opacity: 0.7; }
}

.hazard-burst__rays {
  position: absolute;
  inset: -20vmin;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 90, 60, 0.32) 4deg,
      transparent 14deg,
      transparent 90deg,
      rgba(255, 90, 60, 0.28) 94deg,
      transparent 104deg,
      transparent 180deg,
      rgba(255, 90, 60, 0.32) 184deg,
      transparent 194deg,
      transparent 270deg,
      rgba(255, 90, 60, 0.28) 274deg,
      transparent 284deg);
  animation: hazardRaysSpin 1.7s linear;
  filter: blur(1.8px);
  mix-blend-mode: screen;
}

@keyframes hazardRaysSpin {
  0%   { transform: rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: rotate(120deg); opacity: 0; }
}

.hazard-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 12px;
}

.hazard-burst__shock {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 80, 60, 0.55) 0%, rgba(255, 30, 0, 0.35) 22%, transparent 55%);
  opacity: 0;
  animation: hazardShockPulse 0.9s ease-out;
  mix-blend-mode: screen;
}

@keyframes hazardShockPulse {
  0%   { opacity: 0; transform: scale(0.4); }
  10%  { opacity: 1; transform: scale(1.05); }
  35%  { opacity: 0.6; transform: scale(0.95); }
  55%  { opacity: 0.85; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.2); }
}

.hazard-burst__icon {
  font-size: clamp(160px, 42vmin, 380px);
  color: #ffd9cf;
  filter:
    drop-shadow(0 0 36px rgba(232, 94, 61, 0.95))
    drop-shadow(0 0 12px rgba(255, 200, 180, 1));
  animation: hazardIconShake 2s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.hazard-burst__icon--big {
  font-size: clamp(180px, 50vmin, 460px);
  animation: hazardIconShockZoom 2s cubic-bezier(0.22, 1.4, 0.32, 1);
}

.hazard-burst__icon--big .svg-icon svg {
  stroke-width: 1.8;
}

@keyframes hazardIconShockZoom {
  0%   { opacity: 0; transform: scale(0.2) rotate(-12deg); filter: blur(14px) drop-shadow(0 0 0 transparent); }
  10%  { opacity: 1; transform: scale(1.55) rotate(8deg);  filter: blur(0) drop-shadow(0 0 50px rgba(232, 94, 61, 1)) drop-shadow(0 0 14px rgba(255, 200, 180, 1)); }
  20%  { transform: scale(0.92) rotate(-4deg); }
  30%  { transform: scale(1.18) rotate(3deg); }
  40%  { transform: scale(0.96) rotate(-2deg); }
  50%  { transform: scale(1.08) rotate(1deg); }
  60%  { transform: scale(0.99) rotate(0); }
  70%  { transform: scale(1.04) rotate(0); }
  86%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.12) rotate(0); }
}

.hazard-burst__icon .svg-icon svg {
  stroke-width: 2.4;
  stroke: #ffe9e0;
  fill: rgba(232, 94, 61, 0.18);
}

@keyframes hazardIconShake {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  10%  { transform: scale(1.3) rotate(6deg);  opacity: 1; }
  16%  { transform: scale(1) rotate(-4deg); }
  22%  { transform: scale(1.05) rotate(3deg); }
  28%  { transform: scale(1) rotate(-2deg); }
  34%  { transform: scale(1.02) rotate(1deg); }
  40%, 86% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.06) rotate(0deg); opacity: 0; }
}

.hazard-burst__name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(34px, 9vmin, 72px);
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff5e6 0%, #ffd9cf 36%, #e85e3d 78%, #6a1d12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 28px rgba(232, 94, 61, 0.7),
    0 0 6px rgba(255, 200, 180, 0.95);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  animation: hazardNameSlam 1.7s cubic-bezier(0.22, 1.4, 0.32, 1);
}

@keyframes hazardNameSlam {
  0%   { opacity: 0; transform: translateY(40px) scale(0.7); }
  18%  { opacity: 1; transform: translateY(0) scale(1.08); }
  28%  { transform: translateY(0) scale(1); }
  86%  { opacity: 1; transform: translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.04); }
}

.hazard-burst__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 3.6vmin, 22px);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 200, 0.9);
  text-shadow: 0 0 10px rgba(232, 94, 61, 0.7);
  animation: hazardLabel 1.7s ease-out;
}

@keyframes hazardLabel {
  0%   { opacity: 0; letter-spacing: 0; }
  22%  { opacity: 1; letter-spacing: 0.28em; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hazard-burst__rays { display: none; }
  .hazard-burst__icon,
  .hazard-burst__name,
  .hazard-burst__label,
  .hazard-burst__dim { animation: none; opacity: 1; }
}

/* ARTIFACT BURST — teal mystical fullscreen */

.artifact-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.artifact-burst.is-active { opacity: 1; }

.artifact-burst.is-leaving {
  opacity: 0;
  transition: opacity 460ms ease-in;
}

.artifact-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(49, 185, 183, 0.55) 0%, rgba(15, 70, 70, 0.78) 36%, rgba(2, 14, 14, 0.94) 80%);
  backdrop-filter: blur(2.4px);
}

.artifact-burst__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vmin;
  height: 60vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 30%, rgba(49, 185, 183, 0.32) 45%, transparent 60%);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: artifactHaloSpin 2.4s linear;
}

.artifact-burst__halo--reverse {
  width: 80vmin;
  height: 80vmin;
  background:
    radial-gradient(circle, transparent 36%, rgba(168, 255, 244, 0.22) 50%, transparent 64%);
  animation: artifactHaloReverse 3s linear;
}

@keyframes artifactHaloSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.6); opacity: 0; }
  20%  { opacity: 1; transform: translate(-50%, -50%) rotate(60deg) scale(1.05); }
  85%  { opacity: 1; transform: translate(-50%, -50%) rotate(280deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(360deg) scale(1.1); }
}

@keyframes artifactHaloReverse {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.7); opacity: 0; }
  22%  { opacity: 1; transform: translate(-50%, -50%) rotate(-50deg) scale(1.02); }
  85%  { opacity: 1; transform: translate(-50%, -50%) rotate(-260deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-340deg) scale(1.08); }
}

.artifact-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 12px;
}

.artifact-burst__icon {
  font-size: clamp(140px, 36vmin, 320px);
  color: #b9fff6;
  filter:
    drop-shadow(0 0 30px rgba(168, 255, 244, 0.85))
    drop-shadow(0 0 10px rgba(49, 185, 183, 0.95));
  animation: artifactIconRise 2.2s cubic-bezier(0.18, 0.7, 0.28, 1);
}

.artifact-burst__icon .svg-icon svg {
  stroke-width: 2;
  stroke: #d6fff8;
  fill: rgba(49, 185, 183, 0.22);
}

@keyframes artifactIconRise {
  0%   { opacity: 0; transform: translateY(60px) scale(0.5) rotate(-10deg); filter: blur(8px) drop-shadow(0 0 0 transparent); }
  20%  { opacity: 1; transform: translateY(0) scale(1.2) rotate(4deg); filter: blur(0) drop-shadow(0 0 30px rgba(168, 255, 244, 0.85)); }
  32%  { transform: translateY(0) scale(0.96) rotate(-2deg); }
  44%  { transform: translateY(0) scale(1.04) rotate(1deg); }
  56%  { transform: translateY(0) scale(1) rotate(0deg); }
  85%  { opacity: 1; transform: translateY(-4px) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-20px) scale(1.06) rotate(0deg); }
}

.artifact-burst__value {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(56px, 14vmin, 120px);
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #d6fff8 30%, #31b9b7 70%, #114c4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 32px rgba(168, 255, 244, 0.85),
    0 0 8px rgba(49, 185, 183, 0.9);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  letter-spacing: -0.02em;
  animation: artifactValuePop 2.2s cubic-bezier(0.22, 1.6, 0.32, 1);
}

@keyframes artifactValuePop {
  0%   { opacity: 0; transform: scale(0.4); }
  22%  { opacity: 1; transform: scale(1.18); }
  34%  { transform: scale(0.96); }
  46%  { transform: scale(1.04); }
  56%  { transform: scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.06); }
}

.artifact-burst__label {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(16px, 4vmin, 28px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d6fff8;
  text-shadow:
    0 0 18px rgba(168, 255, 244, 0.85),
    0 0 4px rgba(49, 185, 183, 0.8);
  animation: artifactLabel 2.2s ease-out;
}

@keyframes artifactLabel {
  0%   { opacity: 0; transform: translateY(20px); letter-spacing: 0; }
  24%  { opacity: 1; transform: translateY(0); letter-spacing: 0.22em; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-burst__halo { display: none; }
  .artifact-burst__icon,
  .artifact-burst__value,
  .artifact-burst__label,
  .artifact-burst__dim { animation: none; opacity: 1; }
}

/* ARTIFACT LOST — somber teal-fade fullscreen */

.artifact-lost-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.artifact-lost-burst.is-active { opacity: 1; }
.artifact-lost-burst.is-leaving { opacity: 0; transition: opacity 460ms ease-in; }

.artifact-lost-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 60, 60, 0.6) 0%, rgba(8, 18, 22, 0.85) 45%, rgba(0, 0, 0, 0.95) 90%);
  backdrop-filter: blur(2.5px);
}

.artifact-lost-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 12px;
}

.artifact-lost-burst__icon {
  font-size: clamp(110px, 28vmin, 240px);
  color: rgba(130, 200, 196, 0.55);
  filter: drop-shadow(0 0 14px rgba(49, 185, 183, 0.4));
  animation: artifactLostFall 2s cubic-bezier(0.4, 0.05, 0.7, 1);
}

.artifact-lost-burst__icon .svg-icon svg {
  stroke-width: 1.6;
  stroke: rgba(180, 230, 226, 0.7);
  fill: rgba(20, 60, 60, 0.4);
}

@keyframes artifactLostFall {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.95); filter: blur(0) drop-shadow(0 0 18px rgba(49, 185, 183, 0.7)); }
  18%  { opacity: 0.95; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 0 18px rgba(49, 185, 183, 0.7)); }
  60%  { opacity: 0.6; transform: translateY(60px) scale(0.94) rotate(8deg); filter: blur(1.5px) drop-shadow(0 0 6px rgba(49, 185, 183, 0.3)); }
  100% { opacity: 0; transform: translateY(160px) scale(0.7) rotate(20deg); filter: blur(4px) drop-shadow(0 0 0 transparent); }
}

.artifact-lost-burst__name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(28px, 7vmin, 56px);
  letter-spacing: 0.06em;
  color: rgba(180, 230, 226, 0.85);
  text-shadow:
    0 0 18px rgba(49, 185, 183, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.6);
  animation: artifactLostText 2s ease-out;
}

.artifact-lost-burst__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 3.2vmin, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(168, 200, 198, 0.65);
  animation: artifactLostText 2s ease-out;
}

@keyframes artifactLostText {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-lost-burst__icon,
  .artifact-lost-burst__name,
  .artifact-lost-burst__label { animation: none; opacity: 1; }
}

/* ESCAPE BURST — round-survived gold/jade success moment */

.escape-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.escape-burst.is-active { opacity: 1; }
.escape-burst.is-leaving { opacity: 0; transition: opacity 480ms ease-in; }

.escape-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(62, 211, 145, 0.42) 0%, rgba(232, 184, 77, 0.32) 30%, rgba(15, 50, 35, 0.85) 70%, rgba(0, 0, 0, 0.92) 100%);
  backdrop-filter: blur(2px);
}

.escape-burst__rays {
  position: absolute;
  inset: -25vmin;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 235, 150, 0.26) 4deg,
      transparent 12deg,
      transparent 60deg,
      rgba(140, 240, 200, 0.22) 64deg,
      transparent 72deg,
      transparent 180deg,
      rgba(255, 235, 150, 0.22) 184deg,
      transparent 192deg,
      transparent 240deg,
      rgba(140, 240, 200, 0.18) 244deg,
      transparent 252deg);
  animation: escapeRaysSpin 2.4s linear;
  filter: blur(1.6px);
  mix-blend-mode: screen;
}

@keyframes escapeRaysSpin {
  0%   { transform: rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: rotate(180deg); opacity: 0; }
}

.escape-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 16px;
  max-width: min(640px, 92vw);
}

.escape-burst__phew {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(20px, 5vmin, 36px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff5b0 0%, #ffae3a 50%, #c92a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 22px rgba(255, 174, 58, 0.7),
    0 0 6px rgba(255, 90, 30, 0.85);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  animation: escapePhew 2s cubic-bezier(0.22, 1.6, 0.32, 1);
}

@keyframes escapePhew {
  0%   { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  18%  { opacity: 1; transform: scale(1.18) rotate(2deg); }
  30%  { transform: scale(0.96); }
  44%  { transform: scale(1.04); }
  56%  { transform: scale(1) rotate(0); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .escape-burst__phew { animation: none; opacity: 1; }
}

.escape-burst__round {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(40px, 11vmin, 96px);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #fff5b0 22%, #ffd76b 50%, #62d391 80%, #1c5d3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 36px rgba(255, 215, 107, 0.55),
    0 0 8px rgba(140, 240, 200, 0.7);
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
  animation: escapeRoundPop 2s cubic-bezier(0.22, 1.4, 0.32, 1);
}

@keyframes escapeRoundPop {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  20%  { opacity: 1; transform: scale(1.08) translateY(0); }
  32%  { transform: scale(1) translateY(0); }
  86%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.04) translateY(-6px); }
}

.escape-burst__summary {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 3.4vmin, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 245, 220, 0.92);
  text-shadow:
    0 0 14px rgba(232, 184, 77, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.7);
  animation: escapeSummary 2s ease-out 0.18s backwards;
}

@keyframes escapeSummary {
  0%   { opacity: 0; transform: translateY(14px); }
  22%  { opacity: 1; transform: translateY(0); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .escape-burst__rays { display: none; }
  .escape-burst__round,
  .escape-burst__summary { animation: none; opacity: 1; }
}

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, auto) minmax(220px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  background: rgba(9, 12, 11, 0.9);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__right {
  justify-content: flex-end;
}

.brand {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.brand__mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(232, 184, 77, 0.65);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 28%, rgba(232, 184, 77, 0.26), transparent 38%),
    #151611;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.38);
}

.brand h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
  color: #ffe6a3;
  text-shadow: 0 2px 0 #4a2d12, 0 10px 22px rgba(0, 0, 0, 0.42);
}

.brand p {
  margin: 0;
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.stat {
  min-width: 86px;
  border-left: 1px solid var(--line-soft);
  padding-left: 14px;
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat__label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
}

.stat__value {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(232, 184, 77, 0.18);
}

.stat--risk .stat__value {
  color: var(--danger);
}

.stat--online .stat__value {
  color: var(--teal);
}

.stat--scarce .stat__value {
  color: #ff8a3a;
  animation: scarcePulse 0.7s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(255, 138, 58, 0.85);
}

.stat--scarce .stat__label {
  color: #ffae3a;
}

@keyframes scarcePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .stat--scarce .stat__value { animation: none; }
}

.icon-button,
.ghost-button,
.primary-button,
.danger-button,
.choice-button,
.mini-button {
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.icon-button,
.ghost-button,
.mini-button {
  border: 1px solid var(--line-soft);
  background: rgba(255, 244, 216, 0.06);
  color: var(--text);
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
}

.ghost-button,
.primary-button,
.danger-button,
.mini-button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.mini-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.primary-button {
  background: linear-gradient(180deg, #f4ca68, #a46724);
  color: #1b1209;
  border: 1px solid rgba(255, 231, 164, 0.55);
}

.danger-button {
  background: linear-gradient(180deg, #f07c51, #92361f);
  color: #fff5e6;
  border: 1px solid rgba(255, 193, 152, 0.45);
}

.icon-button--mute {
  position: relative;
  color: rgba(255, 244, 216, 0.85);
}

.icon-button--mute.is-muted {
  color: rgba(232, 94, 61, 0.95);
  border-color: rgba(232, 94, 61, 0.5);
  background: rgba(232, 94, 61, 0.14);
}

.icon-button--mute.is-muted::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px rgba(232, 94, 61, 0.8);
}

.ghost-button--rules {
  background: rgba(232, 184, 77, 0.14);
  border-color: rgba(232, 184, 77, 0.5);
  color: var(--gold);
}

.ghost-button--rules:hover,
.ghost-button--rules:focus-visible {
  background: rgba(232, 184, 77, 0.22);
  color: #ffe5a2;
}

.ghost-button--rules .svg-icon {
  color: var(--gold);
}

.icon-button:hover,
.ghost-button:hover,
.mini-button:hover,
.primary-button:hover,
.danger-button:hover,
.choice-button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.svg-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  line-height: 1;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-strip {
  padding: 16px 20px 0;
}

.action-strip .decision-panel {
  max-width: 880px;
  margin: 0 auto;
}

.main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 16px 20px 20px;
}

.board {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  gap: 16px;
}

.temple-strip,
.player-table,
.decision-panel,
.log-panel,
.score-panel,
.setup-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.temple-strip {
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title h2,
.section-title h3 {
  margin: 0;
  color: #ffe5a2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.1;
}

.section-title span,
.section-title small {
  color: var(--muted);
  font-size: 12px;
}

.path {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 4px 2px 8px;
  max-height: min(64vh, 560px);
}

.path::-webkit-scrollbar {
  width: 8px;
}

.path::-webkit-scrollbar-thumb {
  background: rgba(232, 184, 77, 0.34);
  border-radius: 99px;
}

.empty-path {
  width: 100%;
  min-height: 110px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(232, 184, 77, 0.28);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
  text-align: center;
  padding: 18px;
  font-size: 13px;
}

.card {
  flex: 0 0 auto;
  width: 100%;
  height: 104px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 2px solid rgba(255, 229, 162, 0.55);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 229, 162, 0.22);
  border-radius: 6px;
  pointer-events: none;
}

.card__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.card__symbol {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 52px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.card__footer {
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.card__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 229, 162, 0.85);
  font-weight: 800;
}

.card__value {
  display: block;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffe5a2;
  text-shadow: 0 0 18px rgba(232, 184, 77, 0.25);
}

.card__note {
  display: block;
  margin-top: 4px;
  color: rgba(255, 244, 216, 0.7);
  font-size: 12px;
  line-height: 1.25;
}

.card__tag {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 244, 216, 0.85);
}

.card--danger .card__tag {
  background: rgba(232, 94, 61, 0.22);
  border-color: rgba(232, 94, 61, 0.6);
  color: #ffd9cf;
}

.card--treasure {
  background:
    radial-gradient(circle at 50% 42%, rgba(62, 211, 145, 0.28), transparent 42%),
    linear-gradient(160deg, #183625, #102019 55%, #07100d);
  border-color: rgba(62, 211, 145, 0.75);
}

.card--hazard {
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 94, 61, 0.25), transparent 42%),
    linear-gradient(160deg, #3b1712, #1c1110 58%, #090807);
  border-color: rgba(232, 94, 61, 0.78);
}

.card--artifact {
  background:
    radial-gradient(circle at 50% 42%, rgba(49, 185, 183, 0.32), transparent 42%),
    linear-gradient(160deg, #0f3b3b, #102223 56%, #070d0d);
  border-color: rgba(49, 185, 183, 0.78);
}

.player-table {
  overflow: hidden;
  position: relative;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.player-row {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 244, 216, 0.08);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.player-row.is-active {
  background: rgba(62, 211, 145, 0.1);
  border-color: rgba(62, 211, 145, 0.32);
}

.player-row.is-out {
  color: rgba(255, 244, 216, 0.55);
}

.player-row.is-me {
  outline: 1px solid rgba(232, 184, 77, 0.55);
  outline-offset: -1px;
}

.player-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.player-row__status {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.player-row__status strong {
  color: var(--jade);
}

.player-row__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.player-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 244, 216, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  min-width: 0;
}

.player-stat__label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-stat__value {
  font-size: 20px;
  font-weight: 900;
  color: #fff5d7;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.player-stat__value.gem-stack {
  color: var(--jade);
}

.player-stat__value--banked {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(232, 184, 77, 0.2);
}

.player-stat__value--artifacts {
  font-size: 14px;
  color: rgba(255, 244, 216, 0.85);
  flex-wrap: wrap;
  gap: 4px 6px;
}

.player-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.26);
}

.player-label {
  min-width: 0;
}

.player-label strong {
  display: block;
  overflow: hidden;
  color: #fff3d6;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(255, 244, 216, 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.number-cell {
  font-size: 20px;
  font-weight: 900;
  color: #fff5d7;
}

.gem-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--jade);
  font-weight: 900;
}

.status-cell {
  color: var(--muted);
  font-size: 13px;
}

.status-cell strong {
  color: var(--jade);
}

.side {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(220px, 1fr);
  gap: 14px;
}

.decision-panel,
.log-panel,
.score-panel {
  padding: 14px;
}

.decision-panel {
  position: relative;
  overflow: hidden;
}

.decision-panel::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 77, 0.65), transparent);
  pointer-events: none;
}

.decision-panel--handoff {
  background:
    radial-gradient(circle at 18% 0%, rgba(49, 185, 183, 0.18), transparent 36%),
    var(--panel-strong);
}

.choice-stage {
  display: grid;
  gap: 12px;
}

.voter-card {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  background: rgba(255, 244, 216, 0.06);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.privacy-card {
  min-height: 156px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(255, 244, 216, 0.03)),
    rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.privacy-card span,
.leave-preview span,
.intel-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leave-preview__lose {
  background: linear-gradient(180deg, rgba(232, 60, 40, 0.18), rgba(80, 18, 12, 0.32));
  border-color: rgba(232, 60, 40, 0.55) !important;
  box-shadow: 0 0 14px rgba(232, 60, 40, 0.32);
  animation: lossPreviewPulse 1.6s ease-in-out infinite;
  grid-column: 1 / -1;
}

.leave-preview__lose span {
  color: #ffd9cf !important;
}

.leave-preview__lose strong {
  color: #ff5a3d !important;
  text-shadow: 0 0 12px rgba(255, 90, 61, 0.8);
}

@keyframes lossPreviewPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(232, 60, 40, 0.28); }
  50%      { box-shadow: 0 0 22px rgba(232, 60, 40, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .leave-preview__lose { animation: none; }
}

.privacy-card strong {
  color: #fff5d7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1;
}

.privacy-card p,
.leave-preview p {
  margin: 0;
  color: rgba(255, 244, 216, 0.76);
  font-size: 13px;
  line-height: 1.5;
}

.voter-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.voter-card strong {
  font-size: 24px;
  line-height: 1;
  color: #fff5d7;
}

.choice-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.intel-grid,
.leave-preview {
  display: grid;
  gap: 8px;
}

.intel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intel-grid div,
.leave-preview div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}

.intel-grid strong,
.leave-preview strong {
  display: block;
  margin-top: 4px;
  color: #fff5d7;
  font-size: 23px;
  line-height: 1;
}

.leave-preview {
  grid-template-columns: 1fr 1fr;
}

.leave-preview p {
  grid-column: 1 / -1;
  padding: 0 2px;
}

.choice-button {
  min-height: 78px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  color: var(--text);
  border: 1px solid rgba(255, 244, 216, 0.16);
}

.choice-button strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: 1;
}

.choice-button span {
  color: rgba(255, 244, 216, 0.72);
  font-size: 12px;
}

.choice-button--stay {
  background:
    radial-gradient(circle at 22% 18%, rgba(62, 211, 145, 0.22), transparent 34%),
    linear-gradient(180deg, #1d754f, #0d3327);
}

.choice-button--leave {
  background:
    radial-gradient(circle at 22% 18%, rgba(232, 184, 77, 0.18), transparent 34%),
    linear-gradient(180deg, #9a3f24, #4b1c15);
}

.decision-meta {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.choice-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 244, 216, 0.08);
  border-radius: var(--radius);
  font-size: 13px;
}

.choice-list b {
  color: #fff5d7;
}

.log-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 6px;
}

.log-panel.is-closed {
  grid-template-rows: auto;
}

.log-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffe5a2;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.log-toggle:hover,
.log-toggle:focus-visible {
  background: rgba(232, 184, 77, 0.08);
  outline: none;
}

.log-toggle__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.log-toggle__main .svg-icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.log-toggle__count {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid rgba(255, 244, 216, 0.16);
  border-radius: 99px;
}

.log-toggle__caret {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 180ms ease;
}

.log-toggle__caret.is-open {
  transform: rotate(180deg);
}

.log-list {
  margin: 8px 6px 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  max-height: 220px;
}

.log-list li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 244, 216, 0.06);
  color: rgba(255, 244, 216, 0.62);
  font-size: 12px;
  line-height: 1.3;
}

.log-list li:first-child {
  color: #fff5d7;
  font-weight: 600;
}

.log-more {
  margin: 6px 6px 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.06em;
}

.rules-panel ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 244, 216, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.score-panel {
  display: grid;
  gap: 10px;
}

.winner {
  padding: 12px;
  border: 1px solid rgba(62, 211, 145, 0.42);
  border-radius: var(--radius);
  background: rgba(62, 211, 145, 0.12);
}

.winner strong {
  color: #a8ffd4;
}

.setup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
}

.setup-panel {
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
}

.setup-copy {
  margin: -2px 0 14px;
  color: rgba(255, 244, 216, 0.74);
  font-size: 14px;
  line-height: 1.45;
}

.setup-grid {
  display: grid;
  gap: 12px;
}

.setup-control {
  display: grid;
  gap: 6px;
}

.setup-control label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.setup-control input {
  width: 100%;
  min-height: 42px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
  padding: 0 12px;
}

.setup-player {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.15);
}

.toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.hidden {
  display: none !important;
}

@media (max-width: 1120px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .side {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .log-panel.is-open {
    min-height: 220px;
  }
}

@media (max-width: 820px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .topbar__left,
  .topbar__right {
    justify-content: center;
  }

  .brand {
    order: -1;
  }

  .action-strip {
    padding: 12px 12px 0;
  }

  .main-grid {
    padding: 8px 12px 12px;
  }

  .side {
    grid-template-columns: 1fr;
  }

  .player-stat__value {
    font-size: 18px;
  }

  .player-stat__label {
    font-size: 9px;
  }

  .path {
    max-height: min(56vh, 480px);
  }

  .card {
    height: 92px;
    grid-template-columns: 84px 1fr auto;
    padding: 8px 12px 8px 8px;
  }

  .card__symbol {
    width: 76px;
    height: 76px;
    font-size: 44px;
  }

  .card__value {
    font-size: 32px;
  }

  .choice-stage {
    gap: 8px;
  }

  .voter-card {
    min-height: 56px;
    padding: 10px 14px;
  }

  .privacy-card {
    min-height: 96px;
    padding: 12px 14px;
    gap: 4px;
  }

  .privacy-card strong {
    font-size: 26px;
  }

  .privacy-card p,
  .leave-preview p {
    font-size: 12px;
    line-height: 1.35;
  }

  .choice-button {
    min-height: 64px;
  }

  .choice-button strong {
    font-size: 22px;
  }

  .choice-button span {
    font-size: 11px;
  }

  .intel-grid div,
  .leave-preview div {
    padding: 6px 8px;
  }

  .intel-grid strong,
  .leave-preview strong {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .brand h1 {
    font-size: 24px;
  }

  .topbar__left,
  .topbar__right {
    flex-wrap: wrap;
  }

  .stat {
    min-width: 74px;
  }

  .choice-button strong {
    font-size: 24px;
  }
}

/* Card flip animation */
@keyframes cardReveal {
  0% { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  60% { transform: rotateY(-8deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

.card--latest {
  animation: cardReveal 0.42s ease-out;
}

.card--lost {
  opacity: 0.4;
  filter: grayscale(1);
}

/* Hazard flash */
@keyframes hazardFlash {
  0%, 100% { box-shadow: none; }
  20% { box-shadow: inset 0 0 0 4px rgba(232, 94, 61, 0.72); }
  40% { box-shadow: none; }
  60% { box-shadow: inset 0 0 0 4px rgba(232, 94, 61, 0.72); }
  80% { box-shadow: none; }
}

.app--hazard-flash {
  animation: hazardFlash 0.7s ease-in-out;
}

/* Game-over full-screen overlay */
.gameover-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.gameover-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 28px 24px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}

.gameover-title {
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  color: #ffe5a2;
}

.gameover-winner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(62, 211, 145, 0.42);
  border-radius: var(--radius);
  background: rgba(62, 211, 145, 0.1);
}

.gameover-winner__label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gameover-winner__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1;
  color: #a8ffd4;
}

.gameover-winner__score {
  font-size: 22px;
  font-weight: 900;
  color: #fff5d7;
}

@keyframes pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(168, 255, 212, 0.4); }
  50% { text-shadow: 0 0 24px rgba(168, 255, 212, 0.95), 0 0 40px rgba(62, 211, 145, 0.5); }
}

.gameover-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.gameover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Rules list (used in modal and onboarding) */
.rules-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding-left: 20px;
  color: rgba(255, 244, 216, 0.82);
  font-size: 14px;
  line-height: 1.45;
}

/* First-run onboarding */
.onboarding-rules {
  margin-bottom: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.18);
}

.onboarding-rules summary {
  cursor: pointer;
  color: var(--gold);
  font-weight: 900;
  font-size: 14px;
  user-select: none;
}

/* ==================================================
   Cinematic upgrade — ceremony + card spotlight +
   catastrophe overlay. Pure additions.
   ================================================== */

/* GAME-OVER CEREMONY */
.gameover-overlay { perspective: 1200px; }

.gameover-panel {
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 184, 77, 0.12), transparent 60%),
    linear-gradient(180deg, #2e2924 0%, #1c1814 50%, #110e0b 100%);
  border: 2px solid rgba(232, 184, 77, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(232, 184, 77, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.55),
    0 32px 80px rgba(0, 0, 0, 0.85);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  );
  animation: tabletRise 1300ms cubic-bezier(0.22, 1.04, 0.36, 1) 100ms backwards;
}
.gameover-panel::before, .gameover-panel::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold-2, #b87c28);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.gameover-panel::before { top: 14px; left: 14px; }
.gameover-panel::after  { bottom: 14px; right: 14px; }

@keyframes tabletRise {
  0%   { transform: translateY(120%) rotateX(8deg); opacity: 0; }
  70%  { transform: translateY(-2%)  rotateX(0deg); opacity: 1; }
  85%  { transform: translateY(1.2%); }
  100% { transform: translateY(0); opacity: 1; }
}

.gameover-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--gold, #e8b84d);
  text-align: center;
  margin: 0 0 12px;
  animation: fadeUpCinematic 500ms ease-out 1500ms backwards;
}

.gameover-pulse,
.gameover-winner__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: linear-gradient(180deg, #ffe6a3 0%, #e8b84d 50%, #b87c28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #4a2d12);
  animation: carveIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 1700ms backwards;
}

@keyframes carveIn {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(4px) drop-shadow(0 2px 0 #4a2d12); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0) drop-shadow(0 2px 0 #4a2d12); }
}
@keyframes fadeUpCinematic {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gameover-winner__score {
  font-family: Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-align: center;
  display: block;
  color: var(--gold-bright, #ffe6a3);
  animation: fadeUpCinematic 500ms ease-out 2100ms backwards;
}

.gameover-overlay .choice-list li {
  animation: rowSlide 500ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.gameover-overlay .choice-list li:nth-child(1) { animation-delay: 2300ms; }
.gameover-overlay .choice-list li:nth-child(2) { animation-delay: 2400ms; }
.gameover-overlay .choice-list li:nth-child(3) { animation-delay: 2500ms; }
.gameover-overlay .choice-list li:nth-child(4) { animation-delay: 2600ms; }
.gameover-overlay .choice-list li:nth-child(5) { animation-delay: 2700ms; }
.gameover-overlay .choice-list li:nth-child(6) { animation-delay: 2800ms; }
.gameover-overlay .choice-list li:nth-child(7) { animation-delay: 2900ms; }
.gameover-overlay .choice-list li:nth-child(8) { animation-delay: 3000ms; }

@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gameover-actions { animation: fadeUpCinematic 500ms ease-out 3100ms backwards; }

.dust-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 61;
}

/* CARD SPOTLIGHT + ENHANCED REVEAL (override existing .card--latest) */
.card-spot {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 229, 162, 0.32) 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.card--latest {
  animation: cardRiseEnhanced 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card--latest .card-spot {
  animation: spotFade 1100ms ease-out;
}

@keyframes cardRiseEnhanced {
  0%   { transform: translateY(48px) scale(0.78); opacity: 0; filter: blur(2px); }
  45%  { transform: translateY(-8px) scale(1.05); opacity: 1; filter: blur(0); }
  70%  { transform: translateY(2px)  scale(1); }
  100% { transform: translateY(0)    scale(1); }
}
@keyframes spotFade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* CATASTROPHE OVERLAY — hazard 2x cinematic moment */
.catastrophe-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.catastrophe-overlay .flash-white {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  z-index: 10;
  mix-blend-mode: screen;
}
.catastrophe-overlay.is-active .flash-white {
  animation: catFlash 420ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}
@keyframes catFlash {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  18%  { opacity: 0.85; }
  45%  { opacity: 0.18; }
  100% { opacity: 0; }
}

.catastrophe-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: scale(0.94);
  transform-origin: 50% 50%;
}
.catastrophe-overlay.is-active .catastrophe-zoom {
  animation: catZoom 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes catZoom {
  0%   { transform: scale(0.94); filter: blur(2px); }
  15%  { transform: scale(1.02); filter: blur(0.5px); }
  55%  { transform: scale(1.10); filter: blur(0); }
  100% { transform: scale(1.05); filter: blur(0); }
}

.catastrophe-overlay .crack-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.catastrophe-overlay .crack {
  stroke: rgba(255, 244, 216, 0.55);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(232, 94, 61, 0.6));
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}
.catastrophe-overlay.is-active .crack { animation: crackDraw 900ms cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards; }
.catastrophe-overlay.is-active .crack-2 { animation-delay: 180ms; }
.catastrophe-overlay.is-active .crack-3 { animation-delay: 240ms; }
.catastrophe-overlay.is-active .crack-4 { animation-delay: 320ms; }

@keyframes crackDraw {
  from { stroke-dashoffset: 800; opacity: 0; }
  20%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 0.85; }
}

.catastrophe-overlay .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(232, 94, 61, 0.35) 70%, rgba(108, 28, 14, 0.7) 100%);
  opacity: 0;
}
.catastrophe-overlay.is-active .vignette {
  animation: catVignette 1400ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes catVignette {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  70%  { opacity: 0.55; }
  100% { opacity: 0.18; }
}

.catastrophe-content {
  text-align: center;
  opacity: 0;
  transform: scale(0.7);
  z-index: 4;
}
.catastrophe-overlay.is-active .catastrophe-content {
  animation: catTextIn 500ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}
@keyframes catTextIn {
  0%   { opacity: 0; transform: scale(0.7); filter: blur(8px); }
  50%  { opacity: 1; transform: scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.catastrophe-eyebrow {
  font-family: Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--ruby, #d84b43);
  margin-bottom: 16px;
}
.catastrophe-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 11vw, 120px);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  background: linear-gradient(180deg, #ffd5b3 0%, #e85e3d 50%, #6b1a0e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(232, 94, 61, 0.4);
  letter-spacing: 0.05em;
}
.catastrophe-subtext {
  margin-top: 16px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 244, 216, 0.85);
}

.app--shaking { animation: appShake 700ms steps(14) 1; }
@keyframes appShake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4px, 2px); }
  20%  { transform: translate(3px, -2px); }
  30%  { transform: translate(-2px, 3px); }
  40%  { transform: translate(2px, 1px); }
  50%  { transform: translate(-1px, -2px); }
  60%  { transform: translate(1px, 2px); }
  70%  { transform: translate(-1px, 0); }
  85%  { transform: translate(0.5px, -0.5px); }
  100% { transform: translate(0, 0); }
}

.app--shaking-violent { animation: appShakeViolent 1.1s steps(28) 1; }
@keyframes appShakeViolent {
  0%   { transform: translate(0, 0) rotate(0deg); }
  6%   { transform: translate(-10px, 6px) rotate(-0.6deg); }
  12%  { transform: translate(9px, -7px) rotate(0.6deg); }
  18%  { transform: translate(-8px, 5px) rotate(-0.5deg); }
  24%  { transform: translate(7px, -6px) rotate(0.5deg); }
  30%  { transform: translate(-6px, 4px) rotate(-0.4deg); }
  36%  { transform: translate(5px, -5px) rotate(0.4deg); }
  44%  { transform: translate(-4px, 3px) rotate(-0.3deg); }
  52%  { transform: translate(4px, -3px) rotate(0.3deg); }
  62%  { transform: translate(-3px, 2px) rotate(-0.2deg); }
  72%  { transform: translate(2px, -2px) rotate(0.2deg); }
  82%  { transform: translate(-1.5px, 1.5px) rotate(-0.1deg); }
  92%  { transform: translate(1px, -1px) rotate(0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app--shaking,
  .app--shaking-violent { animation: none; }
}

/* GEM FLY — banked gems flying to player tent on retreat */

.gem-fly {
  position: fixed;
  width: 32px;
  height: 32px;
  z-index: 105;
  pointer-events: none;
  color: var(--jade);
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(62, 211, 145, 0.85)) drop-shadow(0 0 4px rgba(255, 245, 200, 0.7));
  animation: gemFly 1.2s cubic-bezier(0.5, -0.3, 0.4, 1.2) var(--delay, 0ms) forwards;
}

.gem-fly .svg-icon {
  width: 100%;
  height: 100%;
  color: inherit;
}

.gem-fly .svg-icon svg {
  stroke: #b9ffd6;
  stroke-width: 2;
  fill: rgba(62, 211, 145, 0.4);
}

@keyframes gemFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(40deg); }
  60%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.55), calc(-50% + var(--dy) * 0.55)) scale(1.1) rotate(220deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4) rotate(540deg); }
}

.player-stat__value--banked.is-receiving {
  animation: bankedPulse 1.2s ease-out;
}

@keyframes bankedPulse {
  0%, 70% { transform: scale(1); color: var(--gold); text-shadow: 0 0 12px rgba(232, 184, 77, 0.2); }
  82%     { transform: scale(1.28); color: #fff5b0; text-shadow: 0 0 28px rgba(255, 235, 150, 0.95), 0 0 8px rgba(232, 184, 77, 1); }
  100%    { transform: scale(1); color: var(--gold); text-shadow: 0 0 12px rgba(232, 184, 77, 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .gem-fly { display: none; }
  .player-stat__value--banked.is-receiving { animation: none; }
}

/* GAME OVER BURST — fullscreen victory celebration with confetti */

.gameover-burst {
  position: fixed;
  inset: 0;
  z-index: 115;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.gameover-burst.is-active { opacity: 1; }
.gameover-burst.is-leaving { opacity: 0; transition: opacity 580ms ease-in; }

.gameover-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 215, 107, 0.45) 0%, rgba(62, 211, 145, 0.22) 32%, rgba(15, 35, 25, 0.75) 70%, rgba(0, 0, 0, 0.92) 100%);
  backdrop-filter: blur(2.5px);
}

.gameover-burst__rays {
  position: absolute;
  inset: -25vmin;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 235, 150, 0.32) 4deg,
      transparent 12deg,
      transparent 60deg,
      rgba(140, 240, 200, 0.26) 64deg,
      transparent 72deg,
      transparent 130deg,
      rgba(255, 235, 150, 0.26) 134deg,
      transparent 142deg,
      transparent 200deg,
      rgba(140, 240, 200, 0.22) 204deg,
      transparent 212deg,
      transparent 280deg,
      rgba(255, 235, 150, 0.26) 284deg,
      transparent 292deg);
  animation: gameoverRaysSpin 6s linear;
  filter: blur(1.8px);
  mix-blend-mode: screen;
}

@keyframes gameoverRaysSpin {
  0%   { transform: rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0; }
}

.gameover-burst__confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gameover-burst__confetti {
  position: absolute;
  top: -20px;
  left: var(--left, 50%);
  width: var(--size, 8px);
  height: calc(var(--size, 8px) * 1.6);
  background: var(--color, #ffd76b);
  opacity: 0;
  border-radius: 1px;
  animation: confettiFall var(--dur, 2800ms) cubic-bezier(0.4, 0.05, 0.6, 1) var(--delay, 0ms) forwards;
}

@keyframes confettiFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--drift, 0px), 110vh) rotate(var(--rot, 360deg)); }
}

.gameover-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 16px;
  max-width: min(640px, 92vw);
}

.gameover-burst__title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(18px, 4.4vmin, 28px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 245, 220, 0.9);
  text-shadow: 0 0 18px rgba(232, 184, 77, 0.6);
  animation: gameoverTitle 3.4s ease-out;
}

.gameover-burst__crown {
  font-size: clamp(70px, 18vmin, 140px);
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #fff5b0 30%, #ffd76b 60%, #c98a30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(255, 215, 107, 0.85), 0 0 8px rgba(255, 245, 200, 1);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
  margin-top: 4px;
  animation: gameoverCrown 3.4s cubic-bezier(0.22, 1.4, 0.32, 1);
}

.gameover-burst__winner {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(36px, 9vmin, 68px);
  line-height: 1.05;
  text-shadow: 0 0 24px currentColor, 0 4px 16px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  animation: gameoverWinner 3.4s cubic-bezier(0.22, 1.4, 0.32, 1) 0.15s backwards;
}

.gameover-burst__score {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(72px, 22vmin, 200px);
  line-height: 0.95;
  background: linear-gradient(180deg, #ffffff 0%, #fff5b0 22%, #ffd76b 50%, #62d391 80%, #1c5d3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 50px rgba(255, 215, 107, 0.65), 0 0 12px rgba(140, 240, 200, 0.7);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
  letter-spacing: -0.02em;
  margin-top: 4px;
  animation: gameoverScore 3.4s cubic-bezier(0.22, 1.6, 0.32, 1) 0.3s backwards;
}

.gameover-burst__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 3vmin, 18px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 235, 200, 0.75);
  margin-top: 4px;
  animation: gameoverLabel 3.4s ease-out 0.5s backwards;
}

@keyframes gameoverTitle {
  0%   { opacity: 0; transform: translateY(-12px); letter-spacing: 0; }
  10%  { opacity: 1; transform: translateY(0); letter-spacing: 0.2em; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gameoverCrown {
  0%   { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  14%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
  24%  { transform: scale(0.96) rotate(-3deg); }
  36%  { transform: scale(1.04) rotate(2deg); }
  48%  { transform: scale(1) rotate(0); }
  92%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.08) rotate(0); }
}
@keyframes gameoverWinner {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  18%  { opacity: 1; transform: translateY(0) scale(1.06); }
  28%  { transform: translateY(0) scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gameoverScore {
  0%   { opacity: 0; transform: scale(0.4); }
  18%  { opacity: 1; transform: scale(1.18); }
  30%  { transform: scale(0.96); }
  42%  { transform: scale(1.04); }
  54%  { transform: scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes gameoverLabel {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gameover-burst__rays,
  .gameover-burst__confetti { display: none; }
  .gameover-burst__title,
  .gameover-burst__crown,
  .gameover-burst__winner,
  .gameover-burst__score,
  .gameover-burst__label { animation: none; opacity: 1; }
}

/* MONEY TIME — solo-explorer dramatic loot moment */

.money-time {
  position: fixed;
  inset: 0;
  z-index: 116;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.money-time.is-active { opacity: 1; }
.money-time.is-leaving { opacity: 0; transition: opacity 540ms ease-in; }

.money-time__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, rgba(255, 245, 200, 0.95) 22%, rgba(255, 215, 107, 0.7) 45%, transparent 78%);
  opacity: 0;
  animation: moneyFlash 0.7s ease-out;
}

@keyframes moneyFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

.money-time__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 215, 107, 0.5) 0%, rgba(184, 124, 40, 0.55) 28%, rgba(60, 30, 5, 0.85) 65%, rgba(0, 0, 0, 0.94) 100%);
  backdrop-filter: blur(2.5px);
}

.money-time__rays {
  position: absolute;
  inset: -25vmin;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 235, 150, 0.42) 4deg,
      transparent 12deg,
      transparent 36deg,
      rgba(255, 215, 107, 0.36) 40deg,
      transparent 48deg,
      transparent 90deg,
      rgba(255, 245, 200, 0.4) 94deg,
      transparent 102deg,
      transparent 144deg,
      rgba(255, 215, 107, 0.34) 148deg,
      transparent 156deg);
  animation: moneyRaysSpin 3s linear;
  filter: blur(1.6px);
  mix-blend-mode: screen;
}

.money-time__rays--reverse {
  animation: moneyRaysReverse 4s linear;
  opacity: 0.7;
}

@keyframes moneyRaysSpin {
  0%   { transform: rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: rotate(280deg); opacity: 0; }
}

@keyframes moneyRaysReverse {
  0%   { transform: rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  88%  { opacity: 0.7; }
  100% { transform: rotate(-220deg); opacity: 0; }
}

.money-time__rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.money-time__coin {
  position: absolute;
  top: -40px;
  left: var(--left, 50%);
  width: var(--size, 24px);
  height: var(--size, 24px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fffbe0 0%, #ffe580 28%, #ffd76b 50%, #c98a30 78%, #6b3e0d 100%);
  box-shadow:
    0 0 16px rgba(255, 215, 107, 0.95),
    0 0 28px rgba(255, 174, 58, 0.55),
    inset 0 0 5px rgba(255, 250, 220, 0.7);
  opacity: 0;
  transform-origin: center;
  animation:
    moneyCoinFall var(--dur, 3000ms) cubic-bezier(0.4, 0.05, 0.6, 1) var(--delay, 0ms) forwards,
    moneyCoinSpin var(--spin, 1100ms) linear var(--delay, 0ms) infinite;
}

@keyframes moneyCoinFall {
  0%   { opacity: 0; translate: 0 0; }
  6%   { opacity: 1; }
  100% { opacity: 1; translate: var(--drift, 0px) 110vh; }
}

@keyframes moneyCoinSpin {
  0%   { scale: 1 1; }
  50%  { scale: 0.15 1; }
  100% { scale: 1 1; }
}

.money-time__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 16px;
  max-width: min(680px, 92vw);
}

.money-time__sub {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(13px, 3.4vmin, 22px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 245, 200, 0.85);
  text-shadow: 0 0 14px rgba(232, 184, 77, 0.7);
  animation: moneySub 2.8s ease-out;
}

.money-time__title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 18vmin, 168px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #fff5b0 18%,
      #ffd76b 42%,
      #f4a13a 70%,
      #8a5c1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 60px rgba(255, 235, 150, 0.85),
    0 0 18px rgba(255, 215, 107, 1),
    0 0 6px rgba(255, 245, 200, 1);
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.6));
  animation: moneyTitle 2.8s cubic-bezier(0.22, 1.6, 0.32, 1);
}

.money-time__player {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(28px, 7vmin, 56px);
  line-height: 1.1;
  text-shadow: 0 0 24px currentColor, 0 4px 14px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  animation: moneyPlayer 2.8s cubic-bezier(0.22, 1.4, 0.32, 1) 0.18s backwards;
}

.money-time__hint {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 3vmin, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 235, 200, 0.85);
  text-shadow: 0 0 12px rgba(232, 184, 77, 0.6);
  margin-top: 4px;
  animation: moneyHint 2.8s ease-out 0.32s backwards;
}

@keyframes moneySub {
  0%   { opacity: 0; transform: translateY(-12px); letter-spacing: 0; }
  16%  { opacity: 1; transform: translateY(0); letter-spacing: 0.28em; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes moneyTitle {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); filter: blur(14px) drop-shadow(0 0 0 transparent); }
  14%  { opacity: 1; transform: scale(1.3) rotate(3deg);  filter: blur(0) drop-shadow(0 8px 28px rgba(0, 0, 0, 0.6)); }
  24%  { transform: scale(0.94) rotate(-1deg); }
  36%  { transform: scale(1.06) rotate(1deg); }
  48%  { transform: scale(1) rotate(0); }
  62%  { transform: scale(1.04) rotate(0); }
  90%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.1) rotate(0); }
}

@keyframes moneyPlayer {
  0%   { opacity: 0; transform: translateY(28px) scale(0.7); }
  20%  { opacity: 1; transform: translateY(0) scale(1.08); }
  32%  { transform: translateY(0) scale(1); }
  90%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(1.02); }
}

@keyframes moneyHint {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .money-time__rays,
  .money-time__flash,
  .money-time__coin { display: none; }
  .money-time__sub,
  .money-time__title,
  .money-time__player,
  .money-time__hint { animation: none; opacity: 1; }
}

/* REJOINING PANEL — auto-reconnect splash */

.app--rejoining {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(7, 9, 8, 0.92), rgba(15, 25, 22, 0.95)),
    url("./assets/temple-table.png");
  background-position: center;
  background-size: cover;
}

.rejoining-panel {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 36px 32px;
  min-width: min(360px, 90vw);
  border-radius: 18px;
  background: rgba(13, 17, 16, 0.92);
  border: 1px solid rgba(232, 184, 77, 0.32);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  text-align: center;
}

.rejoining-panel h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 5vmin, 28px);
  color: #ffe5a2;
  letter-spacing: 0.08em;
}

.rejoining-panel p {
  margin: 0;
  font-size: clamp(14px, 3.4vmin, 16px);
  color: rgba(255, 244, 216, 0.78);
}

.rejoining-panel__name {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rejoining-panel small {
  font-size: clamp(11px, 2.6vmin, 13px);
  color: rgba(255, 244, 216, 0.55);
}

.rejoining-panel__spinner {
  display: flex;
  gap: 8px;
}

.rejoining-panel__spinner span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(232, 184, 77, 0.7);
  animation: rejoinSpinner 1.2s ease-in-out infinite;
}

.rejoining-panel__spinner span:nth-child(2) { animation-delay: 0.18s; }
.rejoining-panel__spinner span:nth-child(3) { animation-delay: 0.36s; }

@keyframes rejoinSpinner {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .rejoining-panel__spinner span { animation: none; opacity: 0.7; }
}

/* EMOJI REACTIONS — quick taunt buttons + flying emoji */

.emoji-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.emoji-bar__btn {
  appearance: none;
  border: 1px solid rgba(255, 244, 216, 0.18);
  background: rgba(0, 0, 0, 0.32);
  border-radius: 99px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.emoji-bar__btn:hover,
.emoji-bar__btn:focus-visible {
  background: rgba(232, 184, 77, 0.18);
  border-color: rgba(232, 184, 77, 0.55);
  outline: none;
  transform: scale(1.08);
}

.emoji-bar__btn:active {
  transform: scale(0.92);
}

.emoji-float {
  position: fixed;
  bottom: 20vh;
  left: var(--left, 50%);
  transform: translate(-50%, 0);
  z-index: 109;
  pointer-events: none;
  font-size: clamp(80px, 22vmin, 180px);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
  animation: emojiFloat 1.8s cubic-bezier(0.22, 1.6, 0.32, 1) forwards;
}

@keyframes emojiFloat {
  0%   { opacity: 0; transform: translate(-50%, 100px) scale(0.4) rotate(0); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.2) rotate(var(--rot, 0)); }
  30%  { transform: translate(-50%, 10px) scale(1) rotate(0); }
  82%  { opacity: 1; transform: translate(calc(-50% + var(--drift, 0px) * 0.5), -50vh) scale(1.05) rotate(var(--rot, 0)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -90vh) scale(0.8) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-float { animation-duration: 600ms; }
}

/* HIGHLIGHT REEL — round-end best-of replay */

.highlight-reel {
  position: fixed;
  inset: 0;
  z-index: 113;
  pointer-events: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  opacity: 0;
  transition: opacity 320ms ease-out;
  padding: 24px 16px;
}

.highlight-reel.is-active { opacity: 1; }
.highlight-reel.is-leaving { opacity: 0; transition: opacity 460ms ease-in; }

.highlight-reel__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 30, 35, 0.78) 0%, rgba(8, 12, 14, 0.92) 60%, rgba(0, 0, 0, 0.96) 100%);
  backdrop-filter: blur(3px);
}

.highlight-reel__title {
  position: relative;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(18px, 4.4vmin, 28px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffe5a2;
  text-shadow: 0 0 20px rgba(232, 184, 77, 0.6);
  text-align: center;
  animation: highlightReelTitle 600ms cubic-bezier(0.22, 1.4, 0.32, 1);
}

@keyframes highlightReelTitle {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.9); letter-spacing: 0; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.16em; }
}

.highlight-reel__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: min(640px, 92vw);
}

.highlight-reel__card {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 14px 12px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255, 244, 216, 0.32);
  width: clamp(96px, 26vw, 130px);
  background: linear-gradient(180deg, rgba(40, 32, 22, 0.7), rgba(20, 16, 10, 0.8));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(40px) scale(0.6) rotate(-6deg);
  animation: highlightCardIn 700ms cubic-bezier(0.22, 1.6, 0.32, 1) calc(700ms + var(--i, 0) * 260ms) forwards;
}

.highlight-reel__card--treasure {
  background: linear-gradient(180deg, rgba(28, 70, 48, 0.82), rgba(12, 28, 20, 0.88));
  border-color: rgba(62, 211, 145, 0.62);
}

.highlight-reel__card--hazard {
  background: linear-gradient(180deg, rgba(80, 30, 22, 0.82), rgba(28, 14, 10, 0.9));
  border-color: rgba(232, 94, 61, 0.62);
}

.highlight-reel__card--hazard.is-danger {
  background: linear-gradient(180deg, rgba(120, 40, 28, 0.85), rgba(40, 16, 10, 0.95));
  border-color: rgba(255, 90, 60, 0.85);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 90, 60, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.highlight-reel__card--artifact {
  background: linear-gradient(180deg, rgba(20, 70, 70, 0.82), rgba(10, 30, 30, 0.9));
  border-color: rgba(49, 185, 183, 0.62);
}

@keyframes highlightCardIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(2deg); }
  80%  { transform: translateY(0) scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.highlight-reel__icon {
  font-size: clamp(36px, 9vmin, 56px);
  color: #ffe5a2;
  filter: drop-shadow(0 0 10px rgba(232, 184, 77, 0.5));
}

.highlight-reel__card--treasure .highlight-reel__icon { color: #b9ffd6; filter: drop-shadow(0 0 10px rgba(62, 211, 145, 0.6)); }
.highlight-reel__card--hazard .highlight-reel__icon { color: #ffd9cf; filter: drop-shadow(0 0 10px rgba(232, 94, 61, 0.6)); }
.highlight-reel__card--artifact .highlight-reel__icon { color: #b9fff6; filter: drop-shadow(0 0 10px rgba(49, 185, 183, 0.6)); }

.highlight-reel__value {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(22px, 5.4vmin, 32px);
  line-height: 1;
  color: #fff5d7;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.highlight-reel__card--treasure .highlight-reel__value { color: #d6ffe7; }
.highlight-reel__card--hazard .highlight-reel__value { color: #ffe5d8; }
.highlight-reel__card--artifact .highlight-reel__value { color: #d6fff8; }

.highlight-reel__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 2.4vmin, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 244, 216, 0.78);
  text-align: center;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .highlight-reel__card,
  .highlight-reel__title { animation: none; opacity: 1; transform: none; }
}

/* TIER C — NEAR-MISS CALLOUT in highlight reel */

.near-miss-callout {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(120, 40, 28, 0.78), rgba(40, 16, 10, 0.92));
  border: 2px solid rgba(255, 90, 60, 0.78);
  box-shadow: 0 0 32px rgba(255, 90, 60, 0.55), 0 12px 28px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: nearMissIn 720ms cubic-bezier(0.22, 1.6, 0.32, 1) calc(700ms + var(--items, 0) * 260ms) backwards;
  max-width: min(560px, 92vw);
}

.near-miss-callout__title {
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: clamp(14px, 3.6vmin, 20px);
  letter-spacing: 0.22em;
  color: #ffe5a2;
  text-shadow: 0 0 16px rgba(255, 138, 58, 0.8);
}

.near-miss-callout__icon {
  font-size: clamp(36px, 9vmin, 56px);
  color: #ffd9cf;
  filter: drop-shadow(0 0 14px rgba(232, 94, 61, 0.9));
  animation: nearMissIconShake 0.6s ease-in-out infinite alternate;
}

.near-miss-callout__detail {
  font-family: Georgia, serif;
  font-size: clamp(12px, 3vmin, 15px);
  color: rgba(255, 244, 216, 0.92);
  line-height: 1.4;
  max-width: 480px;
}

@keyframes nearMissIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nearMissIconShake {
  0%   { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .near-miss-callout, .near-miss-callout__icon { animation: none; }
}

/* TIER F — ACHIEVEMENT TOAST */

.achievement-toast {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 118;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  min-width: min(340px, 88vw);
  max-width: 92vw;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 32, 22, 0.96), rgba(20, 16, 10, 0.98));
  border: 2px solid var(--gold);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(232, 184, 77, 0.7),
    0 0 56px rgba(232, 184, 77, 0.32);
  animation: achievementIn 540ms cubic-bezier(0.22, 1.6, 0.32, 1);
}

.achievement-toast.is-leaving {
  animation: achievementOut 580ms ease-in forwards;
}

.achievement-toast__emoji {
  font-size: clamp(38px, 8.4vmin, 52px);
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(232, 184, 77, 0.85));
}

.achievement-toast__body {
  display: grid;
  gap: 2px;
}

.achievement-toast__pre {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(232, 184, 77, 0.7);
}

.achievement-toast__name {
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: clamp(18px, 4.4vmin, 24px);
  color: #ffe5a2;
  text-shadow: 0 0 14px rgba(232, 184, 77, 0.6);
}

.achievement-toast__desc {
  font-size: clamp(12px, 2.8vmin, 14px);
  color: rgba(255, 244, 216, 0.78);
  letter-spacing: 0.02em;
}

@keyframes achievementIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(8px) scale(1.06); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes achievementOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-toast { animation: none; opacity: 1; }
}

/* TIER A — MEGA / ULTRA jackpot variants */

.treasure-burst--mega .treasure-burst__big {
  animation: treasureMegaPop 2.6s cubic-bezier(0.22, 1.6, 0.32, 1);
  font-size: clamp(180px, 50vmin, 480px);
  background: linear-gradient(180deg, #fff 0%, #fff5b0 18%, #ffd76b 38%, #f4a13a 60%, #c92a14 88%, #6a1d12 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.treasure-burst--mega__mega-label,
.treasure-burst__mega-label {
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: clamp(20px, 5vmin, 32px);
  letter-spacing: 0.32em;
  color: #ffe5a2;
  text-shadow: 0 0 20px rgba(255, 215, 107, 0.85);
  margin-bottom: 6px;
  animation: megaLabelPulse 0.6s ease-in-out infinite alternate;
}

@keyframes treasureMegaPop {
  0%   { transform: scale(0.2) rotate(-16deg); opacity: 0; filter: blur(16px); }
  12%  { transform: scale(1.45) rotate(6deg);  opacity: 1; filter: blur(0); }
  24%  { transform: scale(0.92) rotate(-3deg); }
  36%  { transform: scale(1.12) rotate(2deg); }
  48%  { transform: scale(0.98) rotate(0); }
  60%  { transform: scale(1.06); }
  88%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

@keyframes megaLabelPulse {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.06); opacity: 1; }
}

.treasure-burst--ultra .treasure-burst__dim {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 245, 200, 0.55) 0%,
      rgba(255, 100, 200, 0.35) 18%,
      rgba(140, 80, 255, 0.32) 38%,
      rgba(40, 60, 200, 0.45) 58%,
      rgba(0, 0, 0, 0.85) 90%);
  animation: ultraDimRainbow 2.5s linear infinite;
}

@keyframes ultraDimRainbow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.treasure-burst--ultra .treasure-burst__big {
  font-size: clamp(220px, 56vmin, 540px);
  background: linear-gradient(180deg, #ffffff 0%, #fff5b0 18%, #ffd76b 42%, #ffa72e 70%, #8a5c1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: ultraBigPop 3.2s cubic-bezier(0.22, 1.6, 0.32, 1);
  text-shadow:
    0 0 80px rgba(255, 235, 150, 0.95),
    0 0 30px rgba(255, 235, 150, 0.85),
    0 0 8px rgba(255, 255, 255, 1);
}

.treasure-burst__ultra-label {
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: clamp(22px, 6vmin, 38px);
  letter-spacing: 0.28em;
  background: linear-gradient(90deg, #ffd76b, #ff64c8, #8a50ff, #28b0ff, #ffd76b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255, 100, 200, 0.7);
  margin-bottom: 8px;
  animation: ultraLabelShimmer 1.8s linear infinite, ultraLabelPulse 0.8s ease-in-out infinite alternate;
}

@keyframes ultraBigPop {
  0%   { transform: scale(0.15) rotate(-20deg); opacity: 0; filter: blur(20px); }
  12%  { transform: scale(1.5) rotate(8deg);    opacity: 1; filter: blur(0); }
  24%  { transform: scale(0.88) rotate(-4deg); }
  36%  { transform: scale(1.18) rotate(3deg); }
  48%  { transform: scale(0.95) rotate(-1deg); }
  60%  { transform: scale(1.08); }
  72%  { transform: scale(0.98); }
  84%  { transform: scale(1.04); }
  92%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes ultraLabelShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes ultraLabelPulse {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .treasure-burst--mega .treasure-burst__big,
  .treasure-burst--ultra .treasure-burst__big { animation: none; opacity: 1; }
  .treasure-burst--ultra .treasure-burst__dim { animation: none; }
  .treasure-burst__mega-label,
  .treasure-burst__ultra-label { animation: none; opacity: 1; }
}

/* TIER B — CARRY-WEIGHT AURA on player rows */

.player-row.is-loaded-carry {
  box-shadow: 0 0 12px rgba(232, 184, 77, 0.3);
}

.player-row.is-heavy-carry {
  box-shadow: 0 0 18px rgba(232, 184, 77, 0.55);
  animation: carryAuraFlicker 1.4s ease-in-out infinite alternate;
}

.player-row.is-mega-carry {
  box-shadow: 0 0 28px rgba(255, 138, 58, 0.7), 0 0 48px rgba(232, 60, 40, 0.42);
  animation: carryAuraMega 0.9s ease-in-out infinite alternate;
  position: relative;
  overflow: visible;
}

.player-row.is-mega-carry::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: linear-gradient(45deg, transparent 0%, rgba(255, 215, 107, 0.32) 30%, transparent 50%, rgba(255, 138, 58, 0.32) 70%, transparent 100%);
  background-size: 200% 200%;
  animation: carryAuraSheen 2.5s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes carryAuraFlicker {
  0%   { box-shadow: 0 0 14px rgba(232, 184, 77, 0.4); }
  100% { box-shadow: 0 0 22px rgba(232, 184, 77, 0.7); }
}

@keyframes carryAuraMega {
  0%   { box-shadow: 0 0 22px rgba(255, 138, 58, 0.55), 0 0 38px rgba(232, 60, 40, 0.32); }
  100% { box-shadow: 0 0 36px rgba(255, 138, 58, 0.85), 0 0 60px rgba(232, 60, 40, 0.55); }
}

@keyframes carryAuraSheen {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

@media (prefers-reduced-motion: reduce) {
  .player-row.is-heavy-carry,
  .player-row.is-mega-carry,
  .player-row.is-mega-carry::before { animation: none; }
}

/* TIER D — EXTENDED SUSPENSE for mega/ultra cards */

.suspense-flash--extended {
  animation-duration: 1600ms;
}

/* TIER E — STREAK BADGE TIERS */

.streak-badge--tier2 {
  background: linear-gradient(180deg, #ffae3a 0%, #ff5a1f 60%, #8a3a14 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 28px rgba(255, 90, 31, 0.7);
}

.streak-badge--tier3 {
  background: linear-gradient(180deg, #ff8a3a 0%, #ff3a1f 50%, #6a1d12 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 36px rgba(255, 60, 31, 0.85);
  font-size: clamp(18px, 4.6vmin, 26px);
  animation: streakBadgeFire 0.6s ease-in-out infinite alternate;
}

.streak-badge--tier4 {
  background: linear-gradient(180deg, #ffff80 0%, #ff6a3a 40%, #ff1a1a 80%, #4a0a0a 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 60px rgba(255, 30, 30, 1), 0 0 100px rgba(255, 215, 107, 0.6);
  font-size: clamp(20px, 5.4vmin, 30px);
  animation: streakBadgeFire 0.4s ease-in-out infinite alternate;
}

@keyframes streakBadgeFire {
  0%   { transform: translateX(-50%) translateY(0) scale(1) rotate(-1deg); }
  100% { transform: translateX(-50%) translateY(-3px) scale(1.04) rotate(1deg); }
}

/* GOLD RAIN — triggered on streak ≥10 */

.gold-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 117;
  overflow: hidden;
}

.gold-rain__coin {
  position: absolute;
  top: -40px;
  left: var(--left, 50%);
  width: var(--size, 14px);
  height: var(--size, 14px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffbe0 0%, #ffe580 30%, #ffd76b 55%, #c98a30 80%, #6b3e0d 100%);
  box-shadow:
    0 0 16px rgba(255, 215, 107, 0.95),
    0 0 28px rgba(255, 174, 58, 0.55);
  opacity: 0;
  animation: goldRainFall var(--dur, 2400ms) cubic-bezier(0.4, 0.05, 0.6, 1) var(--delay, 0ms) forwards;
}

@keyframes goldRainFall {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--drift, 0px), 110vh); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-badge--tier3,
  .streak-badge--tier4 { animation: none; }
  .gold-rain__coin { display: none; }
}

/* FTUE MODAL — first-time user 3-step tutorial */

.ftue-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.ftue-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.ftue-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(440px, 92vw);
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, #18211c 0%, #0d1311 100%);
  border: 2px solid rgba(232, 184, 77, 0.42);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(232, 184, 77, 0.18);
  text-align: center;
  animation: ftueIn 360ms cubic-bezier(0.22, 1.4, 0.32, 1);
}

@keyframes ftueIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ftue-modal__progress {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ftue-modal__dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 244, 216, 0.18);
  transition: background 220ms ease;
}

.ftue-modal__dot.is-done { background: rgba(232, 184, 77, 0.5); }
.ftue-modal__dot.is-active { background: var(--gold); box-shadow: 0 0 8px rgba(232, 184, 77, 0.7); }

.ftue-modal__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 4px auto 0;
  border-radius: 50%;
  font-size: 56px;
  background: rgba(232, 184, 77, 0.12);
  border: 2px solid rgba(232, 184, 77, 0.4);
}

.ftue-modal__icon .svg-icon {
  width: 56px;
  height: 56px;
}

.ftue-modal__icon--treasure {
  background: rgba(62, 211, 145, 0.14);
  border-color: rgba(62, 211, 145, 0.55);
  color: #b9ffd6;
  box-shadow: 0 0 28px rgba(62, 211, 145, 0.35);
}

.ftue-modal__icon--hazard {
  background: rgba(232, 94, 61, 0.16);
  border-color: rgba(232, 94, 61, 0.6);
  color: #ffd9cf;
  box-shadow: 0 0 28px rgba(232, 94, 61, 0.4);
}

.ftue-modal__icon--choice {
  background: rgba(232, 184, 77, 0.16);
  border-color: rgba(232, 184, 77, 0.6);
  color: #ffe5a2;
  box-shadow: 0 0 28px rgba(232, 184, 77, 0.4);
}

.ftue-modal__title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(20px, 5vmin, 26px);
  color: #ffe5a2;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.ftue-modal__body {
  margin: 0;
  font-size: clamp(13px, 3.4vmin, 15px);
  line-height: 1.55;
  color: rgba(255, 244, 216, 0.85);
  text-align: left;
}

.ftue-modal__step {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.ftue-modal__actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 4px;
}

.ftue-modal__actions .ghost-button:first-child {
  grid-column: 1;
}

.ftue-modal__actions .primary-button {
  grid-column: 2;
}

.ftue-modal__actions .ghost-button + .ghost-button {
  grid-column: 1;
  grid-row: 2;
}

.ftue-modal__actions .ghost-button + .ghost-button + .primary-button {
  grid-column: 2;
  grid-row: 2;
}

@media (prefers-reduced-motion: reduce) {
  .ftue-modal__panel { animation: none; }
}

/* COMPACT TREASURE BURST — for routine reveals (value < 8) */

.treasure-burst--compact .treasure-burst__big {
  font-size: clamp(80px, 22vmin, 180px);
  animation: treasureCompactPop 800ms cubic-bezier(0.22, 1.4, 0.32, 1);
}

.treasure-burst--compact .treasure-burst__label {
  font-size: clamp(14px, 3vmin, 20px);
  animation: treasureCompactLabel 800ms ease-out;
}

.treasure-burst--compact .treasure-burst__dim {
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 107, 0.32) 0%, rgba(60, 30, 5, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%);
}

@keyframes treasureCompactPop {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.1); }
  60%  { transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

@keyframes treasureCompactLabel {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* HIGHLIGHT REEL OUTCOMES — per-player banked/bust/out delta rows */

.highlight-reel__outcomes {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  display: grid;
  gap: 6px;
  width: min(560px, 92vw);
}

.highlight-reel__outcome {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 244, 216, 0.12);
  opacity: 0;
  transform: translateX(-20px);
  animation: outcomeRowIn 480ms cubic-bezier(0.22, 1.4, 0.32, 1) calc(700ms + var(--j, 0) * 140ms) forwards;
}

.highlight-reel__outcome--banked {
  border-color: rgba(62, 211, 145, 0.5);
  background: linear-gradient(180deg, rgba(28, 70, 48, 0.55), rgba(12, 28, 20, 0.65));
}

.highlight-reel__outcome--bust {
  border-color: rgba(232, 60, 40, 0.55);
  background: linear-gradient(180deg, rgba(80, 18, 12, 0.6), rgba(28, 10, 8, 0.7));
}

.highlight-reel__avatar {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 8px currentColor;
}

.highlight-reel__player-name {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: clamp(14px, 3.4vmin, 18px);
  text-shadow: 0 0 6px currentColor;
}

.highlight-reel__delta {
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: clamp(16px, 4vmin, 22px);
  font-variant-numeric: tabular-nums;
}

.highlight-reel__outcome--banked .highlight-reel__delta {
  color: #b9ffd6;
  text-shadow: 0 0 10px rgba(62, 211, 145, 0.65);
}

.highlight-reel__outcome--bust .highlight-reel__delta {
  color: #ffd9cf;
  text-shadow: 0 0 10px rgba(232, 60, 40, 0.65);
}

.highlight-reel__outcome--out .highlight-reel__delta {
  color: rgba(255, 244, 216, 0.4);
}

@keyframes outcomeRowIn {
  0%   { opacity: 0; transform: translateX(-20px); }
  60%  { opacity: 1; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .highlight-reel__outcome { animation: none; opacity: 1; transform: none; }
  .treasure-burst--compact .treasure-burst__big,
  .treasure-burst--compact .treasure-burst__label { animation: none; opacity: 1; }
}

/* HAZARDS-SEEN TRACKER — chip row in intel-grid */

.hazard-tracker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 244, 216, 0.08);
}

.hazard-tracker__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.hazard-tracker__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 99px;
  border: 1px solid rgba(255, 244, 216, 0.12);
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 244, 216, 0.45);
  font-size: 13px;
  font-weight: 800;
  transition: all 200ms ease;
}

.hazard-tracker__chip .svg-icon {
  width: 16px;
  height: 16px;
}

.hazard-tracker__chip.is-seen {
  color: #ffd9cf;
  border-color: rgba(232, 94, 61, 0.42);
  background: rgba(232, 94, 61, 0.18);
  box-shadow: 0 0 10px rgba(232, 94, 61, 0.2);
}

.hazard-tracker__chip.is-danger {
  color: #fff5b0;
  border-color: rgba(255, 60, 30, 0.85);
  background: linear-gradient(180deg, rgba(255, 90, 30, 0.32), rgba(120, 30, 18, 0.45));
  box-shadow: 0 0 16px rgba(255, 60, 30, 0.65);
  animation: hazardChipDanger 0.7s ease-in-out infinite alternate;
}

.hazard-tracker__count {
  font-variant-numeric: tabular-nums;
}

.hazard-tracker__warn {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 800;
  color: #ff8a3a;
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-shadow: 0 0 8px rgba(255, 138, 58, 0.5);
}

@keyframes hazardChipDanger {
  0%   { box-shadow: 0 0 12px rgba(255, 60, 30, 0.45); }
  100% { box-shadow: 0 0 22px rgba(255, 60, 30, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .hazard-tracker__chip.is-danger { animation: none; }
}

/* CHOICE LOCKED — undo-until-lock view (3s grace period) */

.choice-locked {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid rgba(255, 244, 216, 0.32);
  background: linear-gradient(180deg, rgba(40, 32, 22, 0.7), rgba(20, 16, 10, 0.85));
  position: relative;
  overflow: hidden;
}

.choice-locked--stay {
  border-color: rgba(62, 211, 145, 0.72);
  background: linear-gradient(180deg, rgba(28, 70, 48, 0.72), rgba(12, 28, 20, 0.88));
}

.choice-locked--leave {
  border-color: rgba(232, 184, 77, 0.72);
  background: linear-gradient(180deg, rgba(80, 60, 22, 0.72), rgba(40, 28, 10, 0.88));
}

.choice-locked__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.choice-locked__pill {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(16px, 4.4vmin, 22px);
  letter-spacing: 0.06em;
  color: #fff5d7;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.choice-locked--stay .choice-locked__pill {
  color: #b9ffd6;
  text-shadow: 0 0 12px rgba(62, 211, 145, 0.7);
}

.choice-locked--leave .choice-locked__pill {
  color: #ffe5a2;
  text-shadow: 0 0 12px rgba(232, 184, 77, 0.7);
}

.choice-locked__countdown {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 200, 0.85));
  transform-origin: right center;
  animation: lockCountdown 3000ms linear forwards;
}

.choice-locked--stay .choice-locked__countdown {
  background: linear-gradient(90deg, transparent, rgba(62, 211, 145, 0.85));
}

.choice-locked--leave .choice-locked__countdown {
  background: linear-gradient(90deg, transparent, rgba(232, 184, 77, 0.85));
}

@keyframes lockCountdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.choice-locked__hint {
  margin: 0;
  font-size: clamp(11px, 2.8vmin, 13px);
  color: rgba(255, 244, 216, 0.72);
  letter-spacing: 0.04em;
}

.choice-locked__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .choice-locked__countdown { animation: none; transform: scaleX(0); }
}

/* AVATAR PICKER — emoji avatar selection in setup */

.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 244, 216, 0.08);
}

.avatar-picker__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.avatar-picker__btn {
  appearance: none;
  width: 38px;
  height: 38px;
  font-size: 22px;
  line-height: 1;
  border: 1.5px solid transparent;
  background: rgba(255, 244, 216, 0.05);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.avatar-picker__btn:hover {
  transform: scale(1.08);
  background: rgba(232, 184, 77, 0.14);
}

.avatar-picker__btn.is-selected {
  border-color: var(--gold);
  background: rgba(232, 184, 77, 0.22);
  box-shadow: 0 0 10px rgba(232, 184, 77, 0.45);
}

/* RECENT ROOMS — chip row of past rooms */

.recent-rooms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 244, 216, 0.08);
}

.recent-rooms__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.recent-rooms__chip {
  appearance: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(232, 184, 77, 0.42);
  background: rgba(232, 184, 77, 0.12);
  color: var(--gold);
  border-radius: 99px;
  cursor: pointer;
  transition: all 120ms ease;
}

.recent-rooms__chip:hover {
  background: rgba(232, 184, 77, 0.24);
  transform: translateY(-1px);
}

/* SUSPENSE FLASH — pre-burst dim + bass swell hint */

.suspense-flash {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.78) 100%);
  opacity: 0;
  animation: suspenseFlash 700ms cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes suspenseFlash {
  0%   { opacity: 0; transform: scale(0.85); }
  20%  { opacity: 0.95; transform: scale(1); }
  60%  { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .suspense-flash { animation-duration: 200ms; }
}

/* TENSION SCALING — viewport vignette + heartbeat as deck risk grows */

.app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 94;
  pointer-events: none;
  background: transparent;
  transition: background 0.6s ease;
}

.app--tension-low::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(232, 94, 61, 0.18) 100%);
}

.app--tension-mid::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(232, 60, 40, 0.36) 100%);
  animation: tensionPulseSlow 1.5s ease-in-out infinite;
}

.app--tension-high::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 22%, rgba(232, 30, 18, 0.55) 100%);
  animation: tensionPulseFast 0.7s ease-in-out infinite;
}

@keyframes tensionPulseSlow {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

@keyframes tensionPulseFast {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .app--tension-mid::after,
  .app--tension-high::after { animation: none; opacity: 0.85; }
}

/* STREAK BADGE — treasure / survivor combo */

.streak-badge {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 108;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(16px, 4vmin, 24px);
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 215, 107, 0.6);
  animation: streakBadgeIn 480ms cubic-bezier(0.22, 1.6, 0.32, 1);
}

.streak-badge.is-leaving {
  animation: streakBadgeOut 500ms ease-in forwards;
}

.streak-badge__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
}

.streak-badge--treasure {
  background: linear-gradient(180deg, #fff5b0 0%, #ffd76b 45%, #c98a30 100%);
  color: #1b1209;
  border: 2px solid rgba(255, 245, 200, 0.8);
}

.streak-badge--survivor {
  background: linear-gradient(180deg, #ffd9a0 0%, #f08a3a 50%, #8a3a14 100%);
  color: #1b1209;
  border: 2px solid rgba(255, 200, 150, 0.8);
}

@keyframes streakBadgeIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.08); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes streakBadgeOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-badge { animation: none; opacity: 1; }
}

/* CASH-OUT BANNER — announces a player retreating to all viewers */

.cashout-banner {
  position: fixed;
  top: 16vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 109;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(40, 32, 18, 0.95), rgba(20, 16, 8, 0.98));
  border: 2px solid var(--accent, #ffd76b);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.6),
    0 0 28px var(--accent, #ffd76b),
    0 0 56px rgba(255, 215, 107, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  white-space: nowrap;
  animation: cashOutBannerIn 580ms cubic-bezier(0.22, 1.6, 0.32, 1);
}

.cashout-banner.is-leaving {
  animation: cashOutBannerOut 480ms ease-in forwards;
}

.cashout-banner__icon {
  font-size: clamp(28px, 6.4vmin, 38px);
  color: var(--accent, #ffd76b);
  filter: drop-shadow(0 0 10px var(--accent, #ffd76b));
}

.cashout-banner__body {
  display: grid;
  gap: 2px;
}

.cashout-banner__name {
  font-weight: 900;
  font-size: clamp(18px, 4.4vmin, 26px);
  color: var(--accent, #ffd76b);
  text-shadow: 0 0 14px currentColor;
  line-height: 1;
}

.cashout-banner__action {
  font-weight: 800;
  font-size: clamp(11px, 2.6vmin, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 244, 216, 0.78);
}

.cashout-banner__amount {
  font-weight: 900;
  font-size: clamp(28px, 6.6vmin, 42px);
  background: linear-gradient(180deg, #fff5b0 0%, #ffd76b 50%, #c98a30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(232, 184, 77, 0.8);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  letter-spacing: -0.02em;
  line-height: 1;
}

@keyframes cashOutBannerIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(6px) scale(1.06); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes cashOutBannerOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .cashout-banner { animation: none; opacity: 1; }
}

/* RECORD BADGE — personal best floats above player row */

.record-badge {
  position: fixed;
  z-index: 107;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--accent, #ffd76b) 0%, rgba(0, 0, 0, 0.72) 100%);
  border: 1.5px solid rgba(255, 250, 220, 0.85);
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 2px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(255, 215, 107, 0.7);
  animation: recordBadge 2.4s cubic-bezier(0.22, 1.4, 0.32, 1);
}

.record-badge__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 2.6vmin, 13px);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff5b0;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
}

.record-badge__value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 5vmin, 30px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px var(--accent, #ffd76b), 0 2px 4px rgba(0, 0, 0, 0.7);
  line-height: 1;
}

.record-badge__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 2.4vmin, 13px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes recordBadge {
  0%   { opacity: 0; transform: translate(-50%, -80%) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  30%  { transform: translate(-50%, -100%) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .record-badge { animation: none; opacity: 1; }
}

/* HAZARD-SPECIFIC DIM TINTS — override the default red dim per hazard */

.hazard-burst--spiders .hazard-burst__dim,
.catastrophe-overlay--spiders .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(40, 30, 60, 0.55) 0%, rgba(15, 10, 22, 0.85) 45%, rgba(0, 0, 0, 0.95) 90%);
}
.hazard-burst--snakes .hazard-burst__dim,
.catastrophe-overlay--snakes .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(50, 130, 70, 0.45) 0%, rgba(20, 50, 25, 0.85) 45%, rgba(2, 12, 4, 0.95) 90%);
}
.hazard-burst--rocks .hazard-burst__dim,
.catastrophe-overlay--rocks .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(110, 90, 70, 0.5) 0%, rgba(50, 38, 28, 0.85) 45%, rgba(15, 10, 6, 0.95) 90%);
}
.hazard-burst--mummy .hazard-burst__dim,
.catastrophe-overlay--mummy .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(120, 130, 60, 0.42) 0%, rgba(50, 60, 35, 0.85) 38%, rgba(15, 18, 12, 0.95) 80%);
}

/* SPIDERS — descending on threads + corner webs */

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

.spiders__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55) 100%);
}

.spiders__web {
  position: absolute;
  width: 26vmin;
  height: 26vmin;
  background:
    repeating-conic-gradient(from 0deg at 0% 0%,
      transparent 0deg, rgba(220, 220, 230, 0.18) 0.4deg, transparent 0.8deg, transparent 22deg),
    radial-gradient(circle at 0% 0%,
      transparent 18%,
      rgba(220, 220, 230, 0.18) 19%,
      transparent 21%,
      transparent 32%,
      rgba(220, 220, 230, 0.16) 33%,
      transparent 35%,
      transparent 48%,
      rgba(220, 220, 230, 0.14) 49%,
      transparent 51%);
  filter: blur(0.5px);
  opacity: 0;
  animation: spidersWebFade 1.6s ease-out forwards;
}
.spiders__web--tl { top: 0; left: 0; }
.spiders__web--tr { top: 0; right: 0; transform: scaleX(-1); }
.spiders__web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.spiders__web--br { bottom: 0; right: 0; transform: scale(-1, -1); }

@keyframes spidersWebFade {
  0%   { opacity: 0; }
  30%  { opacity: 0.9; }
  100% { opacity: 0.6; }
}

.spiders__pack {
  position: absolute;
  inset: 0;
}

.spiders__spider {
  position: absolute;
  top: 0;
  left: var(--left, 50%);
  width: var(--size, 40px);
  margin-left: calc(var(--size, 40px) / -2);
  display: block;
  animation: spiderSway var(--sway, 1000ms) ease-in-out var(--drop-delay, 0ms) infinite alternate;
}

.spiders__thread {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 0;
  margin-left: -0.75px;
  background: rgba(220, 220, 230, 0.65);
  box-shadow: 0 0 4px rgba(220, 220, 230, 0.4);
  animation: spiderThread var(--drop-dur, 800ms) ease-out var(--drop-delay, 0ms) forwards;
}

.spiders__body {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--size, 40px);
  height: var(--size, 40px);
  margin-left: calc(var(--size, 40px) / -2);
  background:
    radial-gradient(circle at 50% 40%, #2a1a2e 0%, #1a0d1c 60%, #08060c 100%);
  border-radius: 45% 45% 50% 50% / 55% 55% 50% 50%;
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.7),
    inset 2px 2px 4px rgba(40, 30, 50, 0.8);
  transform: translateY(-50%);
  opacity: 0;
  animation: spiderDrop var(--drop-dur, 800ms) ease-out var(--drop-delay, 0ms) forwards;
}

.spiders__body::before,
.spiders__body::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 30%;
  top: 30%;
  background: radial-gradient(circle, #ff5a3d 30%, transparent 60%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 90, 61, 0.85);
}
.spiders__body::before { left: 22%; }
.spiders__body::after  { right: 22%; }

@keyframes spiderThread {
  0%   { height: 0; }
  100% { height: var(--final-y, 50vh); }
}
@keyframes spiderDrop {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(-8deg); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, var(--final-y, 50vh)) scale(1) rotate(0); }
}
@keyframes spiderSway {
  0%   { transform: translateX(-3px) rotate(-1deg); }
  100% { transform: translateX(3px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spiders__spider,
  .spiders__web { animation: none; }
}

/* SNAKES — slithering across screen */

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

.snakes__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(60, 140, 80, 0.18) 0%, transparent 60%);
}

.snakes__pack {
  position: absolute;
  inset: 0;
}

.snakes__snake {
  position: absolute;
  top: var(--y, 50vh);
  left: -50vw;
  width: 110vw;
  height: 8vh;
  fill: none;
  stroke: url(#snakeGrad);
  stroke-width: 16;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(60, 200, 90, 0.45));
  opacity: 0;
  animation: snakeSlide var(--dur, 1400ms) cubic-bezier(0.4, 0.05, 0.3, 1) var(--delay, 0ms) forwards;
}

.snakes__snake[style*="--reverse:1"] {
  animation: snakeSlideReverse var(--dur, 1400ms) cubic-bezier(0.4, 0.05, 0.3, 1) var(--delay, 0ms) forwards;
}

.snakes__snake path {
  stroke: #5cd47a;
  stroke-width: 14;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(60, 200, 90, 0.55));
}

@keyframes snakeSlide {
  0%   { opacity: 0; transform: translateX(-30vw) scaleY(1); }
  10%  { opacity: 1; }
  50%  { transform: translateX(20vw) scaleY(1.1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(70vw) scaleY(1); }
}

@keyframes snakeSlideReverse {
  0%   { opacity: 0; transform: translateX(120vw) scaleX(-1) scaleY(1); }
  10%  { opacity: 1; }
  50%  { transform: translateX(70vw) scaleX(-1) scaleY(1.1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(0) scaleX(-1) scaleY(1); }
}

.snakes__hiss {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, rgba(60, 200, 90, 0.06) 80px, transparent 160px);
  animation: snakesHiss 0.6s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.45;
}

@keyframes snakesHiss {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-160px); }
}

@media (prefers-reduced-motion: reduce) {
  .snakes__snake,
  .snakes__hiss { animation: none; }
}

/* ROCKS — falling chunks + impact dust */

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

.rocks__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 28%, transparent 72%, rgba(60, 40, 26, 0.55) 100%);
}

.rocks__pack {
  position: absolute;
  inset: 0;
}

.rocks__rock {
  position: absolute;
  top: -120px;
  left: var(--left, 50%);
  width: var(--size, 50px);
  height: var(--size, 50px);
  margin-left: calc(var(--size, 50px) / -2);
  background:
    radial-gradient(circle at 30% 25%, #8a7a64 0%, #5e4f3a 35%, #3a2f22 75%, #1f180f 100%);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.6),
    inset 2px 2px 4px rgba(180, 160, 130, 0.25),
    inset -2px -2px 5px rgba(0, 0, 0, 0.7);
  opacity: 0;
  animation: rockFall var(--dur, 1100ms) cubic-bezier(0.55, 0, 0.6, 1) var(--delay, 0ms) forwards;
}

.rocks__rock--s0 { clip-path: polygon(20% 0%, 80% 5%, 100% 50%, 75% 100%, 25% 95%, 0% 55%); }
.rocks__rock--s1 { clip-path: polygon(15% 10%, 65% 0%, 100% 35%, 90% 80%, 45% 100%, 0% 65%); }
.rocks__rock--s2 { clip-path: polygon(30% 0%, 95% 25%, 85% 70%, 60% 100%, 10% 90%, 5% 30%); }

@keyframes rockFall {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  6%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(115vh) rotate(var(--rot, 540deg)); }
}

.rocks__dust {
  position: absolute;
  inset: 0;
}

.rocks__puff {
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  width: 80px;
  height: 80px;
  margin-left: -40px;
  background: radial-gradient(circle, rgba(180, 160, 130, 0.7) 0%, rgba(120, 100, 75, 0.4) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0;
  animation: rockPuff 900ms ease-out var(--delay, 0ms) forwards;
}

@keyframes rockPuff {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  20%  { opacity: 0.9; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(2); }
}

@media (prefers-reduced-motion: reduce) {
  .rocks__rock,
  .rocks__puff { animation: none; }
  .rocks__rock { display: none; }
}

/* MUMMY — bandages crawling across + sigils + sickly mist */

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

.mummy__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(120, 130, 60, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(80, 100, 50, 0.18) 0%, transparent 50%);
}

.mummy__mist {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60vh;
  background: radial-gradient(ellipse at 50% 100%, rgba(160, 180, 80, 0.25) 0%, rgba(80, 100, 40, 0.12) 35%, transparent 70%);
  filter: blur(12px);
  animation: mummyMistDrift 3s ease-in-out infinite alternate;
}

@keyframes mummyMistDrift {
  0%   { transform: translateX(-3vw) scaleY(0.94); opacity: 0.85; }
  100% { transform: translateX(3vw) scaleY(1.06); opacity: 1; }
}

.mummy__sigils {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(220, 200, 100, 0.25) 0%, transparent 6%),
    radial-gradient(circle at 82% 28%, rgba(220, 200, 100, 0.22) 0%, transparent 6%),
    radial-gradient(circle at 22% 78%, rgba(220, 200, 100, 0.22) 0%, transparent 6%),
    radial-gradient(circle at 78% 76%, rgba(220, 200, 100, 0.25) 0%, transparent 6%);
  filter: blur(0.5px);
  animation: mummySigilPulse 1.6s ease-in-out infinite alternate;
}

@keyframes mummySigilPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

.mummy__bandages {
  position: absolute;
  inset: 0;
}

.mummy__bandage {
  position: absolute;
  top: var(--top, 50vh);
  height: 14px;
  width: var(--w, 70vw);
  background:
    repeating-linear-gradient(90deg,
      rgba(220, 210, 180, 0.85) 0px,
      rgba(200, 188, 150, 0.9) 8px,
      rgba(160, 145, 110, 0.85) 16px,
      rgba(220, 210, 180, 0.85) 24px),
    rgba(180, 165, 130, 0.7);
  box-shadow:
    0 0 10px rgba(160, 145, 110, 0.45),
    inset 0 1px 0 rgba(255, 250, 220, 0.4),
    inset 0 -1px 0 rgba(80, 65, 40, 0.5);
  filter: blur(0.4px);
  opacity: 0;
  animation: mummyBandage var(--dur, 1200ms) cubic-bezier(0.32, 0.05, 0.32, 1) var(--delay, 0ms) forwards;
}

.mummy__bandage::before,
.mummy__bandage::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 100%;
  background: inherit;
  filter: blur(2px);
  opacity: 0.6;
}
.mummy__bandage::before { left: -8px; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%); }
.mummy__bandage::after  { right: -8px; clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%); }

.mummy__bandage--from-left {
  left: -100vw;
  animation-name: mummyBandageLeft;
}
.mummy__bandage--from-right {
  right: -100vw;
  animation-name: mummyBandageRight;
}

@keyframes mummyBandageLeft {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 0.85; transform: translateX(calc(100vw + 30vw)); }
}

@keyframes mummyBandageRight {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 0.85; transform: translateX(calc(-100vw - 30vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .mummy__bandage,
  .mummy__mist,
  .mummy__sigils { animation: none; }
}

/* SHARED FIRE LAYER — flames + embers + lava glow + heat shimmer */

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

.fire__lava-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10vh;
  height: 50vh;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 180, 60, 0.55) 0%, rgba(255, 120, 30, 0.35) 28%, rgba(232, 60, 30, 0.18) 55%, transparent 80%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: lavaGlowPulse 1.4s ease-in-out infinite alternate;
}

@keyframes lavaGlowPulse {
  0%   { opacity: 0.7; transform: scaleY(0.94); }
  100% { opacity: 1;   transform: scaleY(1.04); }
}

.fire__flames {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 35vh;
}

.fire__flame {
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  width: var(--w, 60px);
  height: var(--h, 110px);
  margin-left: calc(var(--w, 60px) / -2);
  background:
    radial-gradient(ellipse at 50% 100%,
      #fff5d1 0%,
      #ffe27a 12%,
      #ffae3a 28%,
      #ff6a2d 50%,
      #c92a14 70%,
      transparent 88%);
  clip-path: polygon(50% 0%, 70% 18%, 88% 50%, 78% 78%, 65% 100%, 35% 100%, 22% 78%, 12% 50%, 30% 18%);
  filter: blur(2px);
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  animation: flameFlicker var(--dur, 600ms) ease-in-out var(--delay, 0ms) infinite alternate;
}

@keyframes flameFlicker {
  0%   { transform: scale(0.85, 0.92) translateX(-3px) skewX(-2deg); opacity: 0.85; filter: blur(2px) brightness(0.9); }
  30%  { transform: scale(1.08, 1.18) translateX(2px) skewX(3deg); opacity: 1; filter: blur(2.5px) brightness(1.15); }
  65%  { transform: scale(0.95, 1.04) translateX(-1px) skewX(-1deg); opacity: 0.95; filter: blur(2px) brightness(1.05); }
  100% { transform: scale(1.02, 1.1) translateX(3px) skewX(2deg); opacity: 1; filter: blur(2.4px) brightness(1.1); }
}

.fire__embers {
  position: absolute;
  inset: 0;
}

.fire__ember {
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff5b0 0%, #ffae3a 45%, #ff5a1f 75%, transparent 90%);
  box-shadow:
    0 0 8px rgba(255, 174, 58, 0.95),
    0 0 16px rgba(255, 90, 31, 0.55);
  opacity: 0;
  animation: emberRise var(--dur, 1400ms) cubic-bezier(0.25, 0.4, 0.4, 1) var(--delay, 0ms) forwards;
}

@keyframes emberRise {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  10%  { opacity: 1; }
  60%  { opacity: 1; transform: translate(calc(var(--drift, 0px) * 0.6), -55vh) scale(0.85); }
  100% { opacity: 0; transform: translate(var(--drift, 0px), -100vh) scale(0.4); }
}

.fire__heat {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px,
      rgba(255, 200, 120, 0.04) 4px,
      transparent 8px);
  mix-blend-mode: screen;
  animation: heatShimmer 1s linear infinite;
  opacity: 0.5;
}

@keyframes heatShimmer {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .fire__flame,
  .fire__ember,
  .fire__lava-glow,
  .fire__heat { animation: none; }
  .fire__ember { display: none; }
}