:root {
  --navy: #0f1941;
  --blue: #2175d9;
  --cyan: #00c8ff;
  --mint: #46e673;
  --lime: #e6ff00;
  --orange: #ff8c42;
  --pink: #ff5fa2;
  --purple: #7b61ff;
  --paper: #f7f8fc;
  --ink: #0f1941;
  --shadow: 0 28px 70px rgba(15, 25, 65, 0.22);
  --bg-radial-a: rgba(0, 200, 255, 0.24);
  --bg-radial-b: rgba(230, 255, 0, 0.20);
  --bg-base-a: #eef8ff;
  --bg-base-b: #f7f8fc;
  --bg-base-c: #eef0ff;
  --result-start: #15215a;
  --result-end: #0f1941;
  --result-accent: #e6ff00;
  --glow: rgba(0, 200, 255, 0.18);
  --button-top: #182a6a;
  --button-bottom: #0f1941;
}

body[data-theme="fantasy"] {
  --navy: #243228;
  --blue: #668e5b;
  --cyan: #9fd1ab;
  --mint: #a2d76b;
  --lime: #f4dc83;
  --orange: #d59c52;
  --pink: #c88979;
  --purple: #8c7fcf;
  --paper: #f8f5ec;
  --ink: #223126;
  --shadow: 0 28px 70px rgba(36, 50, 40, 0.22);
  --bg-radial-a: rgba(159, 209, 171, 0.28);
  --bg-radial-b: rgba(244, 220, 131, 0.22);
  --bg-base-a: #f4f8ef;
  --bg-base-b: #f9f5ea;
  --bg-base-c: #eef3e6;
  --result-start: #304531;
  --result-end: #223126;
  --result-accent: #f4dc83;
  --glow: rgba(162, 215, 107, 0.16);
  --button-top: #4a6b41;
  --button-bottom: #243228;
}

body[data-theme="brainrot"] {
  --navy: #2c1244;
  --blue: #ff3e96;
  --cyan: #00f0ff;
  --mint: #74ff7b;
  --lime: #d9ff00;
  --orange: #ff7a00;
  --pink: #ff66cc;
  --purple: #8b3dff;
  --paper: #fbf7ff;
  --ink: #240d39;
  --shadow: 0 28px 70px rgba(44, 18, 68, 0.24);
  --bg-radial-a: rgba(0, 240, 255, 0.24);
  --bg-radial-b: rgba(255, 62, 150, 0.18);
  --bg-base-a: #f8f0ff;
  --bg-base-b: #fff8fb;
  --bg-base-c: #f1fbff;
  --result-start: #4a196b;
  --result-end: #2c1244;
  --result-accent: #d9ff00;
  --glow: rgba(255, 62, 150, 0.18);
  --button-top: #5b1b89;
  --button-bottom: #2c1244;
}

body[data-theme="gameshow"] {
  --navy: #22194d;
  --blue: #7847ff;
  --cyan: #6fd9ff;
  --mint: #ffd166;
  --lime: #ffe97a;
  --orange: #ff9f1c;
  --pink: #ff4f81;
  --purple: #9b5cff;
  --paper: #faf8ff;
  --ink: #1f1741;
  --shadow: 0 28px 70px rgba(34, 25, 77, 0.24);
  --bg-radial-a: rgba(255, 209, 102, 0.24);
  --bg-radial-b: rgba(111, 217, 255, 0.20);
  --bg-base-a: #f7f0ff;
  --bg-base-b: #fffaf2;
  --bg-base-c: #eef6ff;
  --result-start: #41257e;
  --result-end: #22194d;
  --result-accent: #ffe97a;
  --glow: rgba(255, 209, 102, 0.22);
  --button-top: #6c42e5;
  --button-bottom: #22194d;
}

body[data-theme="halloween"] {
  --navy: #211027;
  --blue: #ff7a00;
  --cyan: #00d8ff;
  --mint: #00f2a6;
  --lime: #d6ff3f;
  --orange: #ff8c1a;
  --pink: #ff4fa3;
  --purple: #9b3dff;
  --paper: #fff7f0;
  --ink: #201228;
  --shadow: 0 28px 70px rgba(33, 16, 39, 0.26);
  --bg-radial-a: rgba(255, 122, 0, 0.22);
  --bg-radial-b: rgba(155, 61, 255, 0.18);
  --bg-base-a: #190f22;
  --bg-base-b: #251235;
  --bg-base-c: #100817;
  --result-start: #3a164a;
  --result-end: #1b0d22;
  --result-accent: #ffb703;
  --glow: rgba(255, 122, 0, 0.20);
  --button-top: #5d2282;
  --button-bottom: #211027;
}

body[data-theme="christmas"] {
  --navy: #14252a;
  --blue: #2a9d4b;
  --cyan: #7bdff2;
  --mint: #70e000;
  --lime: #f1fa8c;
  --orange: #ff7f50;
  --pink: #e63946;
  --purple: #c77dff;
  --paper: #f8fffd;
  --ink: #13313a;
  --shadow: 0 28px 70px rgba(20, 37, 42, 0.22);
  --bg-radial-a: rgba(123, 223, 242, 0.20);
  --bg-radial-b: rgba(230, 57, 70, 0.16);
  --bg-base-a: #f4fff9;
  --bg-base-b: #f7fbff;
  --bg-base-c: #eef7f1;
  --result-start: #1c5144;
  --result-end: #14252a;
  --result-accent: #f1fa8c;
  --glow: rgba(42, 157, 75, 0.18);
  --button-top: #267a45;
  --button-bottom: #14252a;
}

body[data-theme="valentine"] {
  --navy: #34152c;
  --blue: #ff4fa3;
  --cyan: #7bdff2;
  --mint: #ff8fab;
  --lime: #ffd166;
  --orange: #ffb703;
  --pink: #ff006e;
  --purple: #c77dff;
  --paper: #fff8fc;
  --ink: #311528;
  --shadow: 0 28px 70px rgba(52, 21, 44, 0.22);
  --bg-radial-a: rgba(255, 79, 163, 0.20);
  --bg-radial-b: rgba(255, 202, 212, 0.22);
  --bg-base-a: #fff0f7;
  --bg-base-b: #fff7fb;
  --bg-base-c: #fdf1f6;
  --result-start: #6d2050;
  --result-end: #34152c;
  --result-accent: #ffd166;
  --glow: rgba(255, 79, 163, 0.18);
  --button-top: #cf2f82;
  --button-bottom: #34152c;
}

body[data-theme="easter"] {
  --navy: #243042;
  --blue: #7bdff2;
  --cyan: #aed9e0;
  --mint: #b8f2e6;
  --lime: #70e000;
  --orange: #ffd166;
  --pink: #ffa69e;
  --purple: #c77dff;
  --paper: #fffef8;
  --ink: #243042;
  --shadow: 0 28px 70px rgba(36, 48, 66, 0.18);
  --bg-radial-a: rgba(184, 242, 230, 0.24);
  --bg-radial-b: rgba(255, 166, 158, 0.20);
  --bg-base-a: #f7fff8;
  --bg-base-b: #fffdf5;
  --bg-base-c: #f0f7ff;
  --result-start: #4b6f73;
  --result-end: #243042;
  --result-accent: #ffd166;
  --glow: rgba(123, 223, 242, 0.18);
  --button-top: #6fbad1;
  --button-bottom: #243042;
}

body[data-theme="summer"] {
  --navy: #12314a;
  --blue: #00c8ff;
  --cyan: #7bdff2;
  --mint: #70e000;
  --lime: #f1fa8c;
  --orange: #ff7f50;
  --pink: #ff4fa3;
  --purple: #9b5cff;
  --paper: #f8fdff;
  --ink: #12314a;
  --shadow: 0 28px 70px rgba(18, 49, 74, 0.20);
  --bg-radial-a: rgba(0, 200, 255, 0.22);
  --bg-radial-b: rgba(255, 209, 102, 0.20);
  --bg-base-a: #f1fbff;
  --bg-base-b: #fff8ef;
  --bg-base-c: #f8fff4;
  --result-start: #1d6f8a;
  --result-end: #12314a;
  --result-accent: #ffd166;
  --glow: rgba(0, 200, 255, 0.18);
  --button-top: #1f8ed1;
  --button-bottom: #12314a;
}


body[data-theme="halloween"]::before,
body[data-theme="christmas"]::before,
body[data-theme="valentine"]::before,
body[data-theme="easter"]::before,
body[data-theme="summer"]::before,
body[data-theme="halloween"]::after,
body[data-theme="christmas"]::after,
body[data-theme="valentine"]::after,
body[data-theme="easter"]::after,
body[data-theme="summer"]::after {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  font-weight: 700;
  letter-spacing: .2em;
  white-space: pre-wrap;
  line-height: 1.45;
  text-shadow: 0 0 10px rgba(255,255,255,.15), 0 0 24px currentColor;
}

body[data-theme="halloween"]::before {
  content: "☠   🧙   🐈   ☠   🕸   🎃   🧪\A🎃   ☠   🐈   🧙   ✦   🎃   ☠";
  top: 18px;
  left: 18px;
  color: #ff9f1c;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="halloween"]::after {
  content: "🕸   ☠   🎃   🐈   🧙   ✦\A☠   🎃   🧪   🧙   🐈   ☠";
  right: 18px;
  bottom: 18px;
  text-align: right;
  color: #c77dff;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="christmas"]::before {
  content: "☃   🎄   🎁   ✦   ☃   🎄   ❄\A🎁   ☃   🎄   ✦   🎁   ❄   ☃";
  top: 18px;
  left: 18px;
  color: #2a9d4b;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="christmas"]::after {
  content: "❄   🎁   ☃   🎄   ✦   ❄\A🎄   ☃   🎁   ✦   🎄   ☃";
  right: 18px;
  bottom: 18px;
  text-align: right;
  color: #e63946;
  font-size: clamp(18px, 1.8vw, 26px);
}


body[data-theme="valentine"]::before {
  content: "♥   💘   🌹   ✦   🍬   ♥   🌹\A💘   ♥   ✦   🌹   🍬   ♥";
  top: 18px;
  left: 18px;
  color: #ff4fa3;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="valentine"]::after {
  content: "🌹   ♥   🍬   ✦   💘   🌹\A♥   💘   ✦   🍬   ♥   🌹";
  right: 18px;
  bottom: 18px;
  text-align: right;
  color: #c77dff;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="easter"]::before {
  content: "🐰   🥚   🌼   ✦   🐣   🥚   🌷\A🥚   🐰   ✦   🌼   🐣   🥚";
  top: 18px;
  left: 18px;
  color: #7bdff2;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="easter"]::after {
  content: "🌷   🥚   🐣   ✦   🐰   🌼\A🥚   🐰   ✦   🌼   🥚   🐣";
  right: 18px;
  bottom: 18px;
  text-align: right;
  color: #ffa69e;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="summer"]::before {
  content: "☀   🕶   🌴   ✦   🍉   🌊   🏖\A🌴   ☀   ✦   🍉   🕶   🌊";
  top: 18px;
  left: 18px;
  color: #00c8ff;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="summer"]::after {
  content: "🌊   🍉   🕶   ✦   ☀   🌴\A🏖   🌴   ✦   ☀   🍉   🌊";
  right: 18px;
  bottom: 18px;
  text-align: right;
  color: #ff7f50;
  font-size: clamp(18px, 1.8vw, 26px);
}

body[data-theme="halloween"] .stage,
body[data-theme="christmas"] .stage,
body[data-theme="valentine"] .stage,
body[data-theme="easter"] .stage,
body[data-theme="summer"] .stage {
  border-width: 2px;
}

body[data-theme="halloween"] .stage {
  box-shadow: 0 0 0 1px rgba(255,183,3,.12), 0 28px 70px rgba(33, 16, 39, 0.30);
}

body[data-theme="christmas"] .stage {
  box-shadow: 0 0 0 1px rgba(42,157,75,.10), 0 28px 70px rgba(20, 37, 42, 0.24);
}


* { box-sizing: border-box; }
html, body {
  min-height: 100%;
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 15%, var(--bg-radial-a), transparent 28rem),
    radial-gradient(circle at 85% 10%, var(--bg-radial-b), transparent 24rem),
    linear-gradient(145deg, var(--bg-base-a), var(--bg-base-b) 55%, var(--bg-base-c));
}
button, textarea, input, select { font: inherit; }
button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
button:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 4px solid var(--lime);
  outline-offset: 4px;
}
body.presenter .app-shell { width: min(1800px, 100%); }
body.presenter .stage { padding: clamp(24px, 4vw, 64px); }
body.presenter .game-layout { grid-template-columns: minmax(420px, 1.4fr) minmax(320px, .75fr); gap: clamp(32px, 4vw, 72px); }
body.presenter .wheel-button { width: min(74vw, 820px); }
body.presenter .result-card h2 { font-size: clamp(3rem, 6vw, 6.5rem); }
body.presenter .result-label,
body.presenter .result-category,
body.presenter .result-theme,
body.presenter .remaining-counter,
body.presenter .intro,
body.presenter .eyebrow,
body.presenter .top-select-wrap span { font-size: clamp(1rem, 1.7vw, 1.35rem); }
.app-shell { width: min(1500px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 42px); }
.stage {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(15,25,65,0.10);
  border-radius: 36px;
  padding: clamp(22px, 4vw, 52px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 16%, rgba(255,255,255,.45) 34%, transparent 52%);
  transform: translateX(-120%);
  animation: stage-sheen 13s linear infinite;
  pointer-events: none;
}
body[data-theme="brainrot"] .stage::before { animation-duration: 8s; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.topbar, .category-bar, .game-layout, .settings { position: relative; z-index: 2; }
.topbar { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; }
.eyebrow {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: 0.96; letter-spacing: -0.055em; }
h3 { margin-bottom: 0; font-size: 1.25rem; }
.intro { margin-bottom: 0; font-size: clamp(1rem, 2vw, 1.25rem); }
kbd {
  border: 2px solid rgba(15,25,65,.25);
  border-bottom-width: 4px;
  border-radius: 8px;
  padding: 2px 8px;
  background: white;
}
.top-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: end; }
.top-select-wrap { display: grid; gap: 6px; font-weight: 700; text-transform: lowercase; }
.top-select-wrap span { font-size: 0.9rem; }
.theme-select, .text-input, textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 2px solid rgba(15,25,65,.18);
  border-radius: 18px;
  padding: 14px 16px;
  background: white;
  color: var(--ink);
}
.theme-select.compact { margin-top: 0; min-width: 220px; padding: 10px 14px; border-radius: 14px; }
.range-input { width: 100%; margin-top: 10px; accent-color: var(--blue); }
.secondary {
  background: white;
  color: var(--navy);
  border: 2px solid rgba(15,25,65,0.16);
  padding: 12px 18px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.secondary.small { padding: 9px 14px; }
.secondary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 25, 65, 0.10); }
.secondary.active { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 10px 24px var(--glow); }
.category-bar { margin-top: 24px; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.category-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.category-chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid rgba(15,25,65,0.14);
  background: rgba(255,255,255,.9);
  color: var(--navy);
  font-weight: 700;
}
.category-chip.active { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 10px 24px rgba(15,25,65,.16); }
.category-side-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline-toggle, .check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.inline-toggle input, .check-row input { width: 20px; height: 20px; }
.game-layout { display: grid; grid-template-columns: minmax(320px, 1.35fr) minmax(270px, .65fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(24px, 5vw, 40px); }
.wheel-zone { position: relative; display: grid; justify-items: center; }
.pointer {
  position: absolute; top: -8px; z-index: 4; width: 0; height: 0;
  border-left: clamp(18px, 2.5vw, 32px) solid transparent;
  border-right: clamp(18px, 2.5vw, 32px) solid transparent;
  border-top: clamp(38px, 5vw, 64px) solid var(--navy);
  filter: drop-shadow(0 7px 4px rgba(15,25,65,.18));
  transform-origin: 50% 20%;
}
.pointer.tick { animation: pointer-tick 120ms ease-out; }
.wheel-button {
  position: relative;
  width: min(68vw, 680px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 24px 56px rgba(15,25,65,.28), 0 0 0 1px rgba(255,255,255,.55) inset;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wheel-button::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.36), transparent 32%), radial-gradient(circle at 50% 50%, transparent 64%, rgba(255,255,255,.12) 78%, transparent 82%);
  pointer-events: none;
}
.wheel-button:hover { transform: scale(1.01); box-shadow: 0 30px 64px rgba(15,25,65,.30), 0 0 0 1px rgba(255,255,255,.72) inset; }
.wheel-button:active { transform: scale(.995); }
#wheelCanvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wheel-controls { display: grid; justify-items: center; gap: 12px; }
.remaining-counter { margin-bottom: 0; font-weight: 700; color: var(--navy); }
.spin-btn {
  margin-top: 24px;
  min-width: 190px;
  padding: 15px 30px;
  background: linear-gradient(180deg, var(--button-top) 0%, var(--button-bottom) 100%);
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 12px 26px rgba(15,25,65,.26), 0 0 24px var(--glow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.spin-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(15,25,65,.26), 0 0 30px var(--glow); }
.spin-btn[disabled], .wheel-button[disabled] { cursor: not-allowed; opacity: .72; }
.result-card {
  position: relative; overflow: hidden; min-height: 330px; display: flex; flex-direction: column; justify-content: center;
  border-radius: 30px; padding: clamp(26px, 4vw, 46px);
  background: linear-gradient(160deg, var(--result-start) 0%, var(--result-end) 100%);
  color: white; box-shadow: 0 24px 50px rgba(15,25,65,.25), inset 0 0 0 1px rgba(255,255,255,.05);
}
.result-card::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 22%, rgba(255,255,255,.16) 42%, transparent 60%);
  transform: translateX(-120%); opacity: .6; pointer-events: none;
}
.result-card.winner::after { animation: shine-pass 900ms ease-out; }
.result-card.winner { animation: winner-pop 520ms ease-out; }
.result-label { margin-bottom: 6px; color: var(--result-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.result-category, .result-theme { margin-bottom: 6px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.result-card h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.04em; }
.result-card p:last-child { margin-bottom: 0; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.settings { margin-top: 24px; background: white; border-radius: 28px; padding: clamp(24px, 4vw, 42px); box-shadow: var(--shadow); }
.settings-head { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; }
.compact-head { margin-bottom: 8px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; }
.settings-grid-tight { align-items: end; }
.stacked-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.align-end { justify-content: flex-start; align-self: end; }
.field-note, .settings-note { max-width: 760px; margin-top: 10px; font-size: 0.92rem; color: rgba(15,25,65,.72); }
.no-top { margin-top: 0; }
.settings label, .settings legend { font-weight: 700; }
textarea { resize: vertical; line-height: 1.45; }
.settings-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.settings-actions button:first-child { background: var(--blue); color: white; padding: 13px 20px; }
fieldset { margin-top: 22px; border: 2px solid rgba(15,25,65,.12); border-radius: 16px; padding: 16px; }
.check-row { margin-top: 10px; }
.custom-theme-card { margin-top: 24px; border: 2px solid rgba(15,25,65,.10); border-radius: 24px; padding: 22px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,248,252,.95)); }
.palette-editor { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 14px; }
.palette-swatch { display: grid; gap: 6px; }
.palette-swatch input[type="color"] { width: 100%; height: 48px; border: 0; border-radius: 12px; background: transparent; padding: 0; }
.palette-swatch span { font-size: 0.9rem; font-weight: 700; color: rgba(15,25,65,.72); }
.intro-overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(180deg, rgba(15,25,65,.72), rgba(15,25,65,.84)); backdrop-filter: blur(12px); z-index: 50;
}
.intro-overlay.visible { display: flex; }
.intro-card { width: min(760px, 100%); padding: clamp(30px, 5vw, 56px); border-radius: 32px; background: rgba(255,255,255,.94); box-shadow: 0 28px 70px rgba(0,0,0,.24); text-align: center; }
.intro-overlay-copy { max-width: 620px; margin: 0 auto; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.intro-theme-label { margin-top: 16px; color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.intro-actions { margin-top: 26px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
@keyframes stage-sheen { 0%, 82%, 100% { transform: translateX(-120%); } 90% { transform: translateX(120%); } }
@keyframes shine-pass { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes winner-pop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes pointer-tick { 0% { transform: rotate(0deg); } 42% { transform: rotate(12deg); } 100% { transform: rotate(0deg); } }
@media (max-width: 1100px) {
  .topbar, .settings-head, .settings-grid { flex-direction: column; grid-template-columns: 1fr; }
  .top-actions { justify-content: flex-start; }
  .palette-editor { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (max-width: 980px) {
  .game-layout { grid-template-columns: 1fr; }
  .wheel-button, body.presenter .wheel-button { width: min(88vw, 700px); }
  .result-card { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .stage::before, .result-card::after { display: none; }
}


.custom-audio-card {
  margin-top: 24px;
  border: 2px solid rgba(15,25,65,.10);
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.96));
}

.audio-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.audio-slot {
  border: 2px solid rgba(15,25,65,.10);
  border-radius: 18px;
  padding: 16px;
  background: white;
}

.audio-slot-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.audio-slot h4 {
  margin: 0;
  font-size: 1rem;
}

.audio-slot p {
  margin: 5px 0 0;
  font-size: .9rem;
  color: rgba(15,25,65,.70);
}

.audio-slot-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.audio-slot-controls input[type="file"] {
  width: 100%;
  border: 2px dashed rgba(15,25,65,.18);
  border-radius: 14px;
  padding: 10px;
  background: #fbfcff;
}

.audio-slot-controls button {
  padding: 9px 13px;
}

.audio-file-name {
  margin-top: 10px;
  font-weight: 700;
  word-break: break-word;
}

.audio-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(15,25,65,.08);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.audio-status.loaded {
  background: rgba(70,230,115,.18);
}

@media (max-width: 900px) {
  .audio-upload-grid {
    grid-template-columns: 1fr;
  }
}

.audio-timing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  width: 100%;
}

.audio-timing-grid label {
  display: grid;
  gap: 5px;
  font-size: .82rem;
  color: rgba(15,25,65,.72);
}

.audio-timing-grid input {
  width: 100%;
  border: 2px solid rgba(15,25,65,.12);
  border-radius: 10px;
  padding: 8px 10px;
}


.event-branding { position: relative; z-index: 3; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:54px; margin-bottom:18px; }
.brand-logo { max-width:150px; max-height:64px; object-fit:contain; background:rgba(255,255,255,.84); border-radius:14px; padding:8px; }
.event-branding-copy { flex:1; text-align:center; }
.event-name { margin:0; font-weight:700; font-size:clamp(1.05rem,2vw,1.55rem); }
.event-date { margin:4px 0 0; opacity:.72; font-weight:700; }
.selected-person { margin:0 0 12px; color:var(--result-accent); font-size:clamp(1.15rem,2vw,1.65rem); font-weight:700; }
.custom-background-layer { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.20; pointer-events:none; }
.feature-card { margin-top:24px; border:2px solid rgba(15,25,65,.10); border-radius:24px; padding:22px; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,248,252,.96)); }
.preset-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.preset-item { display:flex; gap:8px; align-items:center; padding:8px; border-radius:999px; background:rgba(15,25,65,.06); }
.preset-item button { padding:8px 12px; }
.asset-clear { margin-top:8px; }
body[data-environment="arcadeRoom"] { background-color:#080d24; background-image:repeating-linear-gradient(90deg,rgba(0,200,255,.08) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,95,162,.06) 0 1px,transparent 1px 44px),radial-gradient(circle at 50% 20%,rgba(123,97,255,.35),transparent 42rem); }
body[data-environment="fantasyForest"] { background-color:#14251a; background-image:radial-gradient(ellipse at 15% 100%,rgba(76,122,68,.65),transparent 35rem),radial-gradient(ellipse at 85% 100%,rgba(42,91,51,.70),transparent 38rem),linear-gradient(#162d26,#334a2d); }
body[data-environment="televisionStudio"] { background-color:#15122c; background-image:radial-gradient(circle at 15% 15%,rgba(255,209,102,.30),transparent 22rem),radial-gradient(circle at 85% 12%,rgba(111,217,255,.32),transparent 24rem),linear-gradient(135deg,#21184a,#100e22); }
body[data-environment="neonChaos"] { background-color:#190824; background-image:linear-gradient(45deg,rgba(255,62,150,.14) 25%,transparent 25% 75%,rgba(0,240,255,.12) 75%),linear-gradient(-45deg,rgba(217,255,0,.10) 25%,transparent 25% 75%,rgba(139,61,255,.14) 75%); background-size:80px 80px; }
body[data-environment="corporateEvent"] { background-color:#eef2f7; background-image:radial-gradient(circle at 12% 18%,rgba(33,117,217,.14),transparent 28rem),linear-gradient(145deg,#f8fafc,#e7edf5); }
body[data-environment="retroTerminal"] { background-color:#03150d; background-image:repeating-linear-gradient(0deg,rgba(68,255,142,.07) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 40%,rgba(20,120,65,.24),transparent 38rem); color:#08351f; }
body[data-environment="retroTerminal"] .stage { box-shadow:0 0 40px rgba(68,255,142,.20); }
@media(max-width:800px){ .event-branding{flex-wrap:wrap;justify-content:center}.event-branding-copy{order:3;flex-basis:100%}.brand-logo{max-width:120px} }


.show-ui-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 8;
  padding: 10px 14px;
  background: rgba(15,25,65,.78);
  color: white;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 18px rgba(15,25,65,.20);
  opacity: .22;
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.show-ui-btn:hover,
.show-ui-btn:focus-visible {
  opacity: .95;
  transform: translateY(-1px);
}
body.ui-hidden .show-ui-btn[hidden] { display: inline-flex !important; }
body.ui-hidden .top-actions,
body.ui-hidden .category-bar,
body.ui-hidden #settingsPanel,
body.ui-hidden .intro {
  display: none !important;
}
body.ui-hidden .topbar {
  align-items: center;
  margin-bottom: 4px;
}
body.ui-hidden .topbar h1 {
  margin-bottom: 0;
}
body.ui-hidden .stage {
  padding-bottom: clamp(34px, 5vw, 58px);
}
body.ui-hidden .game-layout {
  margin-top: clamp(8px, 2vw, 18px);
}
body.ui-hidden .remaining-counter {
  opacity: .88;
}
body.ui-hidden.presenter .wheel-button {
  width: min(78vw, 900px);
}


/* Fit-to-screen play layout for Presenter Mode and browser Full Screen */
html.play-fit,
html.play-fit body,
body.presenter,
body.is-fullscreen {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body.presenter .app-shell,
body.is-fullscreen .app-shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(10px, 1.4vw, 22px);
  overflow: hidden;
}

body.presenter .stage,
body.is-fullscreen .stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(14px, 1.7vw, 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.presenter .event-branding,
body.is-fullscreen .event-branding {
  flex: 0 0 auto;
  margin-bottom: clamp(4px, .7vh, 10px);
}

body.presenter .topbar,
body.is-fullscreen .topbar {
  flex: 0 0 auto;
}

body.presenter.ui-hidden .topbar,
body.is-fullscreen.ui-hidden .topbar {
  min-height: 0;
  margin: 0;
}

body.presenter.ui-hidden .topbar h1,
body.is-fullscreen.ui-hidden .topbar h1 {
  font-size: clamp(1.65rem, 3.1vh, 2.8rem);
  line-height: .96;
}

body.presenter .game-layout,
body.is-fullscreen .game-layout {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-top: clamp(6px, 1.1vh, 14px);
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(18px, 2.3vw, 42px);
  align-items: center;
  overflow: hidden;
}

body.presenter .wheel-zone,
body.is-fullscreen .wheel-zone {
  width: 100%;
  height: 100%;
  min-height: 0;
  align-content: center;
}

body.presenter .wheel-button,
body.is-fullscreen .wheel-button,
body.presenter.ui-hidden .wheel-button,
body.is-fullscreen.ui-hidden .wheel-button {
  width: min(66vh, 52vw, 760px);
  max-width: 100%;
  max-height: 66vh;
}

body.presenter .wheel-controls,
body.is-fullscreen .wheel-controls {
  gap: clamp(4px, .6vh, 8px);
}

body.presenter .spin-btn,
body.is-fullscreen .spin-btn {
  margin-top: clamp(6px, 1vh, 12px);
  padding: clamp(10px, 1.2vh, 14px) 28px;
}

body.presenter .remaining-counter,
body.is-fullscreen .remaining-counter {
  font-size: clamp(.85rem, 1.5vh, 1rem);
}

body.presenter .result-card,
body.is-fullscreen .result-card {
  min-height: 0;
  max-height: 72vh;
  padding: clamp(20px, 2.4vw, 40px);
  overflow: hidden;
}

body.presenter .result-card h2,
body.is-fullscreen .result-card h2 {
  font-size: clamp(2rem, 5.2vh, 5rem);
  max-height: 45vh;
  overflow-wrap: anywhere;
}

body.presenter .show-ui-btn,
body.is-fullscreen .show-ui-btn {
  position: fixed;
  right: 14px;
  bottom: 14px;
}

/* Short displays need an even tighter layout. */
@media (max-height: 760px) {
  body.presenter .event-branding,
  body.is-fullscreen .event-branding {
    transform: scale(.88);
    transform-origin: center top;
    margin-bottom: -6px;
  }
  body.presenter.ui-hidden .topbar h1,
  body.is-fullscreen.ui-hidden .topbar h1 {
    font-size: 1.55rem;
  }
  body.presenter .wheel-button,
  body.is-fullscreen .wheel-button,
  body.presenter.ui-hidden .wheel-button,
  body.is-fullscreen.ui-hidden .wheel-button {
    width: min(60vh, 50vw, 650px);
    max-height: 60vh;
  }
  body.presenter .result-card,
  body.is-fullscreen .result-card {
    max-height: 66vh;
  }
}

@media (max-width: 900px) {
  body.presenter .game-layout,
  body.is-fullscreen .game-layout {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .62fr);
    gap: 14px;
  }
  body.presenter .wheel-button,
  body.is-fullscreen .wheel-button,
  body.presenter.ui-hidden .wheel-button,
  body.is-fullscreen.ui-hidden .wheel-button {
    width: min(59vh, 58vw, 620px);
  }
}


.result-card.minimal .result-category,
.result-card.minimal .result-theme,
.result-card.minimal #resultHint {
  display: none !important;
}

.result-card.minimal h2 {
  margin-bottom: 0;
}


/* final stage polish */
.ambient-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .62;
}
.ambient-layer::before,
.ambient-layer::after {
  position: absolute;
  inset: -10%;
  display: block;
  white-space: pre-wrap;
  font-size: clamp(18px, 2.2vw, 34px);
  letter-spacing: 1.2em;
  line-height: 3.5;
  opacity: .16;
  filter: drop-shadow(0 0 10px currentColor);
  animation: ambient-float 18s linear infinite;
}
body[data-theme="arcade"] .ambient-layer::before { content: "✦  ▪  ✧  ▪  ✦\A▪  ✧  ▪  ✦  ▪"; color: var(--cyan); }
body[data-theme="fantasy"] .ambient-layer::before { content: "✦  ❖  ✧  ❖  ✦\A❖  ✦  ❖  ✧  ❖"; color: var(--lime); }
body[data-theme="brainrot"] .ambient-layer::before { content: "✦  ★  ✧  ★  ✦\A★  ✦  ★  ✧  ★"; color: var(--pink); animation-duration: 10s; }
body[data-theme="gameshow"] .ambient-layer::before { content: "★  ✦  ★  ✦  ★\A✦  ★  ✦  ★  ✦"; color: var(--result-accent); }
body[data-theme="halloween"] .ambient-layer::before { content: "🦇   ☠   🕸   🐈   🦇\A🎃   🦇   ☠   🕸   🎃"; color: #ff9f1c; }
body[data-theme="christmas"] .ambient-layer::before { content: "❄   ✦   ❄   ☃   ❄\A✦   ❄   🎄   ❄   ✦"; color: #ffffff; animation-name: ambient-snow; }
body[data-theme="valentine"] .ambient-layer::before { content: "♥   ✦   ♥   ✧   ♥\A✦   ♥   ✧   ♥   ✦"; color: #ff4fa3; }
body[data-theme="easter"] .ambient-layer::before { content: "✿   ✦   🥚   ✧   ✿\A✦   🐣   ✧   ✿   ✦"; color: #7bdff2; }
body[data-theme="summer"] .ambient-layer::before { content: "☀   ✦   🌴   ✧   ☀\A🌊   ✦   ☀   ✧   🌴"; color: #00c8ff; }
body.presenter .ambient-layer,
body.is-fullscreen .ambient-layer { opacity: .48; }

.wheel-button {
  isolation: isolate;
  box-shadow:
    0 34px 70px rgba(15,25,65,.30),
    0 0 0 3px rgba(255,255,255,.62),
    0 0 0 10px rgba(15,25,65,.08),
    inset 0 0 35px rgba(255,255,255,.16);
}
.wheel-button::before {
  content: "";
  position: absolute;
  inset: 2.2%;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 16px 24px rgba(255,255,255,.20), inset 0 -18px 30px rgba(15,25,65,.14);
}
body.wheel-spinning .wheel-button {
  box-shadow:
    0 34px 70px rgba(15,25,65,.30),
    0 0 0 3px rgba(255,255,255,.70),
    0 0 36px var(--glow),
    inset 0 0 35px rgba(255,255,255,.16);
}
body.wheel-spinning .pointer {
  filter: drop-shadow(0 7px 4px rgba(15,25,65,.18)) drop-shadow(0 0 14px var(--result-accent));
  animation: pointer-pulse 720ms ease-in-out infinite alternate;
}

.result-card.reveal-prep {
  transform: scale(.995);
  filter: none;
}
.result-card.reveal-prep .result-label {
  opacity: 1;
  transform: none;
}
.result-card.reveal-live .result-label {
  animation: reveal-label 320ms ease-out both;
}
.result-card.reveal-live .selected-person {
  animation: reveal-person 340ms 80ms ease-out both;
}
.result-card.reveal-live h2:not(:empty) {
  animation: reveal-answer 460ms cubic-bezier(.2,.9,.2,1.15) both;
}
.result-card h2 {
  text-wrap: balance;
  font-size: clamp(2.1rem, 4.4vw, 4.8rem);
}
.result-card .selected-person {
  margin: 4px 0 12px;
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.intro-overlay { background: rgba(8, 12, 34, .86); }
.intro-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.30);
}
.intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--glow), transparent 45%);
}
.intro-event-meta { position: relative; z-index: 1; margin-top: 18px; }
.intro-event-name { margin-bottom: 4px; color: var(--navy); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.5rem); }
.intro-event-date { margin-bottom: 0; color: rgba(15,25,65,.64); font-weight: 700; }
.intro-ready-line { position: relative; z-index: 1; margin: 22px 0 0; font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.intro-theme-label { display: none !important; }

body.ui-hidden .show-ui-btn { opacity: .12; }
body.ui-hidden .show-ui-btn:hover,
body.ui-hidden .show-ui-btn:focus-visible { opacity: .92; }

@keyframes ambient-float { from { transform: translate3d(-2%, -3%, 0) rotate(-2deg); } to { transform: translate3d(4%, 5%, 0) rotate(2deg); } }
@keyframes ambient-snow { from { transform: translate3d(0, -12%, 0); } to { transform: translate3d(2%, 12%, 0); } }
@keyframes pointer-pulse { from { transform: translateY(0) scale(1); } to { transform: translateY(2px) scale(1.04); } }
@keyframes reveal-label { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes reveal-person { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes reveal-answer { from { opacity:0; transform:scale(.86) translateY(16px); filter:blur(4px); } to { opacity:1; transform:scale(1) translateY(0); filter:blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .ambient-layer::before, .ambient-layer::after, body.wheel-spinning .pointer { animation: none !important; }
  .result-card.reveal-live .result-label,
  .result-card.reveal-live .selected-person,
  .result-card.reveal-live h2:not(:empty) { animation-duration: .01ms !important; }
}


/* premium lighting and 3D polish */
.lighting-layer {
  position: absolute;
  inset: -8%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}
.lighting-layer::before,
.lighting-layer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
  transform: translateZ(0);
}
.lighting-layer::before {
  width: 42%;
  height: 42%;
  top: 5%;
  left: -5%;
  background: radial-gradient(circle, var(--glow) 0%, rgba(255,255,255,0) 68%);
}
.lighting-layer::after {
  width: 48%;
  height: 48%;
  right: -6%;
  bottom: -2%;
  background: radial-gradient(circle, var(--bg-radial-a) 0%, rgba(255,255,255,0) 72%);
}
body.wheel-spinning .lighting-layer {
  opacity: .95;
  animation: lighting-pulse 1.35s ease-in-out infinite alternate;
}
body.wheel-spinning .lighting-layer::before {
  animation: lighting-sweep-a 2.8s ease-in-out infinite;
}
body.wheel-spinning .lighting-layer::after {
  animation: lighting-sweep-b 3.6s ease-in-out infinite;
}
body.winner-active .lighting-layer {
  opacity: .82;
}
body.winner-active .lighting-layer::after {
  animation: winner-spotlight 900ms ease-out both;
}

body.winner-active .result-card {
  box-shadow: 0 28px 62px rgba(15,25,65,.30), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 42px var(--glow);
}

body.winner-active .wheel-button {
  box-shadow:
    0 36px 78px rgba(15,25,65,.34),
    0 0 0 3px rgba(255,255,255,.72),
    0 0 46px var(--glow),
    inset 0 0 35px rgba(255,255,255,.18);
}

body[data-theme="gameshow"] .lighting-layer::before,
body[data-theme="gameshow"] .lighting-layer::after {
  filter: blur(52px);
}

@keyframes lighting-pulse {
  from { transform: scale(1); opacity: .65; }
  to { transform: scale(1.04); opacity: 1; }
}
@keyframes lighting-sweep-a {
  0% { transform: translate3d(-6%, -4%, 0) scale(1); }
  50% { transform: translate3d(6%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 8%, 0) scale(1.02); }
}
@keyframes lighting-sweep-b {
  0% { transform: translate3d(8%, 2%, 0) scale(1); }
  50% { transform: translate3d(-4%, -5%, 0) scale(1.06); }
  100% { transform: translate3d(5%, -1%, 0) scale(1.01); }
}
@keyframes winner-spotlight {
  0% { transform: scale(.88); opacity: .2; }
  55% { transform: scale(1.06); opacity: .95; }
  100% { transform: scale(1); opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
  .lighting-layer,
  .lighting-layer::before,
  .lighting-layer::after { animation: none !important; }
}


/* arcade cabinet frame and marquee */
.stage {
  border-width: 2px;
  box-shadow: var(--shadow), 0 0 0 2px rgba(255,255,255,.12) inset;
}

.arcade-frame {
  position: absolute;
  inset: 10px;
  z-index: 1;
  pointer-events: none;
  border-radius: 30px;
}
.arcade-frame::before,
.arcade-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.arcade-frame::before {
  border: 3px solid rgba(255,255,255,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 18px var(--glow),
    0 0 38px color-mix(in srgb, var(--cyan) 28%, transparent),
    inset 0 0 26px rgba(255,255,255,.08);
  opacity: .92;
}
.arcade-frame::after {
  inset: 8px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 24px rgba(255,255,255,.04);
}

.corner-node {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), color-mix(in srgb, var(--result-accent) 85%, white) 35%, color-mix(in srgb, var(--blue) 70%, black) 100%);
  border: 2px solid rgba(255,255,255,.68);
  box-shadow: 0 0 10px var(--glow), 0 0 24px color-mix(in srgb, var(--cyan) 38%, transparent), inset 0 -3px 5px rgba(0,0,0,.25);
  z-index: 2;
}
.corner-node.top-left { top: 10px; left: 10px; }
.corner-node.top-right { top: 10px; right: 10px; }
.corner-node.bottom-left { bottom: 10px; left: 10px; }
.corner-node.bottom-right { bottom: 10px; right: 10px; }

.marquee-strip {
  position: absolute;
  z-index: 1;
  opacity: .78;
  filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 32%, transparent));
}
.marquee-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(255,255,255,.98) 0 20%, color-mix(in srgb, var(--result-accent) 78%, white) 24%, rgba(255,255,255,.08) 38%, transparent 54%);
}
.marquee-top, .marquee-bottom {
  left: 28px;
  right: 28px;
  height: 14px;
}
.marquee-top { top: 10px; }
.marquee-bottom { bottom: 10px; }
.marquee-top::before, .marquee-bottom::before {
  background-size: 20px 14px;
  background-repeat: repeat-x;
  animation: marquee-x 1.55s linear infinite;
}
.marquee-right, .marquee-left {
  top: 28px;
  bottom: 28px;
  width: 14px;
}
.marquee-left { left: 10px; }
.marquee-right { right: 10px; }
.marquee-left::before, .marquee-right::before {
  background-size: 14px 20px;
  background-repeat: repeat-y;
  animation: marquee-y 1.8s linear infinite;
}
.marquee-bottom::before { animation-direction: reverse; }
.marquee-left::before { animation-direction: reverse; }

body.wheel-spinning .marquee-top::before,
body.wheel-spinning .marquee-bottom::before { animation-duration: .38s; }
body.wheel-spinning .marquee-left::before,
body.wheel-spinning .marquee-right::before { animation-duration: .42s; }
body.wheel-spinning .arcade-frame::before {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 28px var(--glow),
    0 0 56px color-mix(in srgb, var(--result-accent) 24%, transparent),
    inset 0 0 28px rgba(255,255,255,.10);
}
body.winner-active .marquee-strip::before,
body.arcade-winner-react .marquee-strip::before {
  animation-duration: .10s !important;
  filter: brightness(1.85);
}
body.arcade-winner-react .arcade-frame::before {
  animation: border-jackpot 760ms ease-out both;
}
body.arcade-confetti-react .arcade-frame::after {
  animation: confetti-border 560ms ease-out both;
}


.wheel-zone::before,
.wheel-zone::after {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.wheel-zone::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0, rgba(255,255,255,.05) 36%, rgba(255,255,255,0) 72%);
}
.wheel-zone::after {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--result-accent) 62%, white) 0, color-mix(in srgb, var(--cyan) 40%, white) 12%, var(--glow) 32%, rgba(255,255,255,0) 68%);
  mix-blend-mode: screen;
}
body.arcade-winner-react .wheel-zone::after {
  animation: wheel-burst 920ms cubic-bezier(.18,.82,.2,1) both;
}
body.arcade-winner-react .wheel-zone::before {
  animation: jackpot-core-glow 760ms ease-out both;
}
body.arcade-confetti-react .wheel-zone::before {
  animation: confetti-burst 620ms ease-out both;
}
body.arcade-ui-react .wheel-zone::before,
body.arcade-spin-react .wheel-zone::before {
  animation: ui-burst 260ms ease-out both;
}

/* stronger arcade button */
.wheel-button {
  transform-style: preserve-3d;
  box-shadow:
    0 36px 74px rgba(15,25,65,.32),
    0 0 0 4px rgba(255,255,255,.72),
    0 0 0 10px rgba(255,255,255,.12),
    0 0 28px color-mix(in srgb, var(--cyan) 18%, transparent),
    inset 0 16px 30px rgba(255,255,255,.14),
    inset 0 -22px 34px rgba(5,14,36,.20);
  animation: button-idle-glow 2.8s ease-in-out infinite alternate;
}
.wheel-button::before {
  inset: 2%;
  box-shadow:
    inset 0 18px 28px rgba(255,255,255,.25),
    inset 0 -22px 32px rgba(15,25,65,.18),
    0 0 0 4px rgba(255,255,255,.07);
}
.wheel-button::after {
  inset: 4%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.42), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,0) 58%, rgba(255,255,255,.14) 74%, rgba(255,255,255,0) 82%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 62%, rgba(15,25,65,.08) 92%, rgba(15,25,65,0) 100%);
}
.wheel-button:hover {
  transform: translateY(-2px) scale(1.008);
}
.wheel-button:active,
body.arcade-ui-react .wheel-button,
body.arcade-spin-react .wheel-button {
  transform: translateY(2px) scale(.992);
  box-shadow:
    0 18px 40px rgba(15,25,65,.28),
    0 0 0 4px rgba(255,255,255,.72),
    0 0 24px color-mix(in srgb, var(--result-accent) 30%, transparent),
    inset 0 8px 16px rgba(255,255,255,.12),
    inset 0 -18px 30px rgba(5,14,36,.26);
}
body.wheel-spinning .wheel-button {
  animation-duration: .75s;
  transform: translateY(0) scale(1.006);
  box-shadow:
    0 38px 82px rgba(15,25,65,.34),
    0 0 0 4px rgba(255,255,255,.82),
    0 0 22px rgba(255,255,255,.24),
    0 0 48px var(--glow),
    0 0 88px color-mix(in srgb, var(--result-accent) 22%, transparent),
    inset 0 18px 28px rgba(255,255,255,.18),
    inset 0 -20px 32px rgba(5,14,36,.18);
}
body.arcade-winner-react .wheel-button {
  animation: button-jackpot 680ms cubic-bezier(.22,.84,.23,1) both;
  box-shadow:
    0 40px 84px rgba(15,25,65,.36),
    0 0 0 4px rgba(255,255,255,.86),
    0 0 28px rgba(255,255,255,.26),
    0 0 62px var(--glow),
    0 0 110px color-mix(in srgb, var(--result-accent) 30%, transparent),
    inset 0 18px 28px rgba(255,255,255,.18),
    inset 0 -20px 32px rgba(5,14,36,.18);
}

body.arcade-winner-react .result-card {
  box-shadow: 0 30px 68px rgba(15,25,65,.32), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 72px color-mix(in srgb, var(--result-accent) 28%, transparent);
}

body.arcade-tick-react .pointer {
  filter: drop-shadow(0 7px 4px rgba(15,25,65,.18)) drop-shadow(0 0 18px color-mix(in srgb, var(--result-accent) 72%, white));
  animation: pointer-hit 140ms ease-out;
}
body.arcade-tick-react .arcade-frame::before {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 22px color-mix(in srgb, var(--result-accent) 32%, transparent),
    0 0 42px color-mix(in srgb, var(--cyan) 16%, transparent),
    inset 0 0 24px rgba(255,255,255,.08);
}
body.arcade-ui-react .arcade-frame::before,
body.arcade-spin-react .arcade-frame::before {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 22px color-mix(in srgb, var(--blue) 28%, transparent),
    0 0 38px color-mix(in srgb, var(--result-accent) 16%, transparent),
    inset 0 0 18px rgba(255,255,255,.08);
}
body.arcade-confetti-react .result-card {
  box-shadow: 0 28px 62px rgba(15,25,65,.30), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 56px color-mix(in srgb, var(--result-accent) 26%, transparent);
}

@keyframes marquee-x { from { background-position: 0 0; } to { background-position: 20px 0; } }
@keyframes marquee-y { from { background-position: 0 0; } to { background-position: 0 20px; } }
@keyframes border-jackpot {
  0% { transform: scale(1); opacity: .9; }
  35% { transform: scale(1.008); opacity: 1; }
  100% { transform: scale(1.002); opacity: .94; }
}
@keyframes wheel-burst {
  0% { opacity: 0; transform: scale(.68); filter: blur(2px); }
  22% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; transform: scale(1.34); filter: blur(2px); }
}
@keyframes jackpot-core-glow {
  0% { opacity: 0; transform: scale(.84); }
  30% { opacity: .42; }
  100% { opacity: 0; transform: scale(1.16); }
}
@keyframes ui-burst {
  0% { opacity: 0; transform: scale(.92); }
  42% { opacity: .34; }
  100% { opacity: 0; transform: scale(1.02); }
}
@keyframes confetti-burst {
  0% { opacity: 0; transform: scale(.92); }
  35% { opacity: .5; }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes confetti-border {
  0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .75; }
}
@keyframes button-idle-glow {
  from { box-shadow:
    0 36px 74px rgba(15,25,65,.32),
    0 0 0 4px rgba(255,255,255,.72),
    0 0 0 10px rgba(255,255,255,.12),
    0 0 18px color-mix(in srgb, var(--cyan) 10%, transparent),
    inset 0 16px 30px rgba(255,255,255,.14),
    inset 0 -22px 34px rgba(5,14,36,.20);
  }
  to { box-shadow:
    0 38px 78px rgba(15,25,65,.34),
    0 0 0 4px rgba(255,255,255,.78),
    0 0 0 10px rgba(255,255,255,.14),
    0 0 28px color-mix(in srgb, var(--result-accent) 18%, transparent),
    inset 0 18px 32px rgba(255,255,255,.16),
    inset 0 -22px 34px rgba(5,14,36,.22);
  }
}
@keyframes button-jackpot {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-2px) scale(1.03); }
  56% { transform: translateY(1px) scale(.992); }
  100% { transform: translateY(0) scale(1.008); }
}
@keyframes pointer-hit {
  0% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(14deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-strip::before,
  .wheel-button,
  .wheel-zone::before,
  .wheel-zone::after { animation: none !important; }
}


/* winner effect safety: glow only, never screen-clearing */
body.arcade-winner-react .wheel-zone::after {
  z-index: 0;
  opacity: 0;
  animation: wheel-burst 920ms cubic-bezier(.18,.82,.2,1) both;
}
body.arcade-winner-react .wheel-zone::before {
  z-index: 0;
  animation: jackpot-core-glow 760ms ease-out both;
}
body.arcade-winner-react .arcade-frame::before {
  animation: border-jackpot 760ms ease-out both;
}
body.arcade-winner-react .marquee-strip::before {
  animation-duration: .10s !important;
  filter: brightness(1.85);
}


.round-transition {
  position: absolute;
  left: 50%;
  top: clamp(76px, 11vh, 120px);
  transform: translateX(-50%) scale(.96);
  z-index: 7;
  width: min(620px, calc(100% - 56px));
  padding: 18px 22px 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(11,20,50,.94), rgba(18,35,86,.92));
  color: white;
  text-align: center;
  box-shadow: 0 20px 56px rgba(15,25,65,.32), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 44px color-mix(in srgb, var(--result-accent) 18%, transparent);
  opacity: 0;
  pointer-events: none;
}
.round-transition.show {
  animation: round-transition-in 780ms cubic-bezier(.2,.84,.2,1) both;
}
.round-transition-eyebrow {
  margin: 0 0 8px;
  color: var(--result-accent);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: .95rem;
}
.round-transition-text {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.hub-pulse-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hub-pulse-layer::before,
.hub-pulse-layer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.28);
  border: 4px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 2px rgba(255,255,255,.10) inset, 0 0 16px var(--glow), 0 0 28px color-mix(in srgb, var(--result-accent) 22%, transparent);
  opacity: 0;
}
.hub-pulse-layer::after {
  width: 22%;
  border-width: 3px;
  opacity: 0;
}
body.arcade-ui-react .hub-pulse-layer::before {
  animation: hub-wave-small 260ms ease-out;
}
body.arcade-spin-react .hub-pulse-layer::before {
  animation: hub-wave-medium 460ms ease-out;
}
body.arcade-winner-react .hub-pulse-layer::before,
body.arcade-winner-react .hub-pulse-layer::after {
  animation: hub-wave-large 860ms cubic-bezier(.18,.84,.2,1) both;
}
body.arcade-winner-react .hub-pulse-layer::after {
  animation-delay: 90ms;
}
body.arcade-confetti-react .hub-pulse-layer::before,
body.arcade-confetti-react .hub-pulse-layer::after {
  animation: hub-wave-confetti 620ms ease-out both;
}
body.arcade-confetti-react .hub-pulse-layer::after {
  animation-delay: 80ms;
}

.attract-prompt {
  margin: 6px 0 0;
  color: var(--result-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .9rem;
  opacity: 0;
}
body.idle-attract .attract-prompt {
  display: block !important;
  animation: attract-blink 1.45s ease-in-out infinite;
}
body.idle-attract .wheel-button {
  animation-duration: 1.9s, 5.8s;
}
body.idle-attract .wheel-button canvas {
  animation: idle-wheel-nudge 6.2s ease-in-out infinite;
}
body.idle-attract .pointer {
  animation: pointer-idle-glow 2.2s ease-in-out infinite;
}
body.idle-attract .marquee-top::before,
body.idle-attract .marquee-bottom::before { animation-duration: 2.8s; }
body.idle-attract .marquee-left::before,
body.idle-attract .marquee-right::before { animation-duration: 3.1s; }

@keyframes round-transition-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.94); }
  14% { opacity: 1; }
  72% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(1.01); }
}
@keyframes hub-wave-small {
  0% { opacity: .70; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes hub-wave-medium {
  0% { opacity: .84; transform: translate(-50%, -50%) scale(.38); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}
@keyframes hub-wave-large {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.30); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}
@keyframes hub-wave-confetti {
  0% { opacity: .72; transform: translate(-50%, -50%) scale(.42); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@keyframes attract-blink {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}
@keyframes idle-wheel-nudge {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.01); }
}
@keyframes pointer-idle-glow {
  0%, 100% { filter: drop-shadow(0 7px 4px rgba(15,25,65,.18)) drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 7px 4px rgba(15,25,65,.18)) drop-shadow(0 0 16px color-mix(in srgb, var(--result-accent) 72%, white)); }
}

@media (prefers-reduced-motion: reduce) {
  .round-transition,
  .hub-pulse-layer::before,
  .hub-pulse-layer::after,
  .attract-prompt,
  body.idle-attract .wheel-button canvas,
  body.idle-attract .pointer { animation: none !important; }
}