/* ================================================================
   WeHo Bar Wheel of Fate — shared styles
   ================================================================ */

:root {
  --bg:      #0a0f1e;
  --bg1:     #16192a;
  --bg2:     #1a1d30;
  --ink:     #ffffff;
  --ink2:    rgba(255,255,255,0.72);
  --ink3:    rgba(255,255,255,0.50);
  --ln:      rgba(255,255,255,0.10);
  --ln2:     rgba(255,255,255,0.20);
  --gold:    #FFD24A;
  --goldhi:  #FFE566;
  --goldinv: #180f00;
  --pink:    #E8347C;
  --purple:  #8133D4;

  /* Wheel jewel tones */
  --w1:#D4145A; --w2:#0891B2; --w3:#7C3AED;
  --w4:#2563EB; --w5:#C026D3; --w6:#059669;
  --wc:#2a1550;

  /* Gradient — gold/peach/warm pink, all 7:1+ */
  --grad: linear-gradient(105deg,#FFE566 0%,#ffb86b 30%,#ff8fa5 50%,#ffb86b 70%,#FFE566 100%);

  --font: 'Barlow', system-ui, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100dvh;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}
button, input { font-family: var(--font); cursor: pointer; border: none; background: none; padding: 0; }

/* Respect users who have "Reduce Motion" enabled (iOS Accessibility, etc.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── AMBIENT BACKGROUND ── */
/* Color blobs drift very slowly around the viewport. Kept low-opacity so they
   don't compete with content — they exist to give the dark bg some life. */
.amb {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.amb-b {
  position: absolute;
  width: 55vmin;
  height: 55vmin;
  border-radius: 50%;
  filter: blur(70px);
}
.amb-1 { background: #E8347C; top: -15vmin; left: -15vmin;     opacity: 0.14; animation: amb-1 6s ease-in-out infinite alternate; }
.amb-2 { background: #FFD24A; top: -15vmin; right: -15vmin;    opacity: 0.09; animation: amb-2 8s ease-in-out infinite alternate; }
.amb-3 { background: #8133D4; bottom: -15vmin; right: -15vmin; opacity: 0.17; animation: amb-3 7s ease-in-out infinite alternate; }
.amb-4 { background: #1FA8B8; bottom: -15vmin; left: -15vmin;  opacity: 0.13; animation: amb-4 9s ease-in-out infinite alternate; }
.amb-5 { background: #C026D3; top: 35%; left: 35%;             opacity: 0.09; animation: amb-5 5s ease-in-out infinite alternate; }
@keyframes amb-1 { to { transform: translate(55vw, 45vh) scale(1.4); } }
@keyframes amb-2 { to { transform: translate(-55vw, 50vh) scale(1.5); } }
@keyframes amb-3 { to { transform: translate(-50vw, -45vh) scale(1.6); } }
@keyframes amb-4 { to { transform: translate(55vw, -50vh) scale(1.4); } }
@keyframes amb-5 { to { transform: translate(28vw, -28vh) scale(1.7); } }

/* ── SCREEN ROUTER ── */
/* Hide all screens by default, show the one matching data-screen */
.screen { display: none; position: fixed; inset: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body[data-screen="home"]       .screen-home,
body[data-screen="vote-setup"] .screen-vote-setup,
body[data-screen="voting"]     .screen-voting,
body[data-screen="handoff"]    .screen-handoff,
body[data-screen="wheel"]      .screen-wheel,
body[data-screen="reveal"]     .screen-reveal { display: flex; z-index: 5; }

/* Desktop: constrain each screen's content to a phone-frame width centered in the viewport */
@media (min-width: 600px) {
  .screen { left: 50%; right: auto; width: 100%; max-width: 520px; transform: translateX(-50%); }
  /* Reveal stays full-viewport so the dark backdrop covers everything */
  .screen-reveal { max-width: none; left: 0; transform: none; }
}

/* ── COMMON COMPONENTS ── */
/* Eyebrow pill — used as section labels (e.g., "Vote Mode") */
.eyebrow {
  display: inline-block;
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1.5px solid rgba(255,210,74,0.4);
  border-radius: 22px;
  padding: 7px 18px;
}

/* Circular back button */
.back-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--ln2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink2);
  flex-shrink: 0;
}
.back-btn:active { transform: scale(0.95); }
.back-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Primary gold CTA */
.cta-gold {
  width: 100%;
  height: clamp(64px, 18vw, 76px);
  border-radius: 20px;
  background: linear-gradient(160deg, #FFE566 0%, #FFD24A 55%, #c49a20 100%);
  color: var(--goldinv);
  font-size: clamp(24px, 6.5vw, 28px);
  font-weight: 900;
  font-style: italic;
  box-shadow: 0 6px 24px rgba(255,210,74,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cta-gold:active { transform: scale(0.98); }
.cta-gold svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Compact CTA variant — used on voting screen footer */
.v-done-btn {
  height: clamp(60px, 17vw, 66px);
  border-radius: 16px;
  font-size: clamp(20px, 6vw, 24px);
}

/* Ghost pill — used for secondary actions */
.ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(13px, 3.8vw, 17px) clamp(26px, 7vw, 34px);
  border-radius: 50px;
  border: 2px solid var(--ln2);
  background: transparent;
  color: var(--ink);
  font-size: clamp(20px, 5.5vw, 22px);
  font-weight: 800;
  font-style: italic;
  transition: background 0.15s, transform 0.1s;
}
.ghost-pill:active {
  background: rgba(255,255,255,0.07);
  transform: scale(0.97);
}
.ghost-pill svg {
  width: 22px; height: 22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ================================================================
   SCREEN: HOME
   ================================================================ */
.screen-home {
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 8vw, 44px) clamp(24px, 6vw, 32px);
  text-align: center;
  overflow: hidden;
}
.screen-home::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 58%;
  background:
    radial-gradient(ellipse 100% 80% at 50% 10%, rgba(232,52,124,0.25) 0%, rgba(129,51,212,0.18) 38%, transparent 68%),
    radial-gradient(ellipse 60% 60% at 75% 30%, rgba(255,210,74,0.13) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* Wheel sliver peeking up from the bottom of the home screen — replicates real wheel.
   Sized with min() so it never exceeds 680px on desktop, and the bottom offset
   matches so only the top ~85px peeks up regardless of viewport. */
.home-wheel-peek {
  --peek-size: min(120vw, 120%, 680px);
  --peek-show: 85px;
  position: absolute;
  left: 50%;
  bottom: calc(var(--peek-show) - var(--peek-size));
  width: var(--peek-size);
  height: var(--peek-size);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  filter:
    drop-shadow(0 0 40px rgba(255,210,74,0.45))
    drop-shadow(0 -6px 30px rgba(232,52,124,0.3));
}
.home-wheel-peek-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-wheel-peek-spin {
  transform-origin: 0 0;
  animation: wheel-peek-spin 22s linear infinite;
}
@keyframes wheel-peek-spin {
  to { transform: rotate(360deg); }
}
/* Spinning gradient rim outside the slices */
.home-wheel-peek-rim {
  position: absolute; inset: 0;
  z-index: 2;
  animation: wheel-peek-rim-spin 8s linear infinite;
}
.home-wheel-peek-rim-i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #D4145A 0deg,#0891B2 52deg,#059669 104deg,#2563EB 156deg,
    #7C3AED 208deg,#C026D3 260deg,#D4145A 312deg,#D4145A 360deg);
  -webkit-mask: radial-gradient(circle, transparent 85.5%, black 87%, black 95.5%, transparent 97%);
  mask: radial-gradient(circle, transparent 85.5%, black 87%, black 95.5%, transparent 97%);
  animation: wheel-peek-rim-pulse 2.5s ease-in-out infinite;
  filter: saturate(1.6) brightness(1.2);
}
@keyframes wheel-peek-rim-spin { to { transform: rotate(360deg); } }
@keyframes wheel-peek-rim-pulse {
  0%,100% { filter: saturate(1.4) brightness(1.0) drop-shadow(0 0 4px rgba(255,210,74,.4)); }
  50%      { filter: saturate(2.0) brightness(1.4) drop-shadow(0 0 12px rgba(255,210,74,.8)) drop-shadow(0 0 24px rgba(232,52,124,.5)); }
}
/* Bulb dots layer — positioned with the same math as the real wheel */
.home-wheel-peek-bulbs {
  position: absolute; inset: 0;
  z-index: 3;
}
.home-wheel-peek-bulbs .wh-bulb {
  position: absolute;
  width: 1.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: bulb-blink 1.8s ease-in-out infinite;
}

.home-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-title {
  font-size: clamp(46px, 14vw, 66px);
  font-weight: 900;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: 0.5px;
  margin: 0 0 clamp(18px, 5vw, 28px);
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}
.home-title span { display: block; }
@keyframes shimmer { from { background-position: 0%; } to { background-position: -200%; } }

.home-rule {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 0 clamp(18px, 5vw, 26px);
}

.home-tagline {
  font-size: clamp(24px, 6.5vw, 28px);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 clamp(34px, 9vw, 48px);
}

.home-btns {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 14px);
}

.home-btn {
  width: 100%;
  padding: clamp(22px, 6vw, 28px) clamp(20px, 5vw, 24px);
  border-radius: 22px;
  border: 2px solid var(--ln2);
  background: #16192a;
  color: var(--ink);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 4vw, 20px);
  text-align: left;
  transition: transform 0.12s, background 0.15s;
}
.home-btn:active { transform: scale(0.97); }
.home-btn.primary {
  border-color: rgba(255,210,74,0.55);
  background: #1f1a24;
}
.home-btn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.home-btn-label {
  font-size: clamp(24px, 7.5vw, 30px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.5px;
  line-height: 1;
  display: block;
  margin-bottom: clamp(6px, 2vw, 10px);
  color: var(--ink);
}
.home-btn.primary .home-btn-label { color: var(--goldhi); }
.home-btn-desc {
  font-size: clamp(20px, 5.2vw, 22px);
  font-weight: 700;
  color: var(--ink2);
  line-height: 1.4;
  display: block;
}
.home-btn-chev {
  flex-shrink: 0;
  width: clamp(28px, 8vw, 36px);
  height: clamp(28px, 8vw, 36px);
  color: rgba(255,255,255,0.7);
}
.home-btn.primary .home-btn-chev { color: var(--gold); }
.home-btn-chev svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================
   SCREEN: VOTE SETUP
   ================================================================ */
.screen-vote-setup {
  background: transparent;
  flex-direction: column;
  overflow: hidden;
}
.screen-vote-setup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background:
    radial-gradient(ellipse 100% 80% at 50% 10%, rgba(232,52,124,0.20) 0%, rgba(129,51,212,0.14) 38%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 75% 30%, rgba(255,210,74,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.vs-hdr {
  flex-shrink: 0;
  padding: clamp(16px, 5vw, 22px) clamp(20px, 6vw, 24px) clamp(12px, 3vw, 16px);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 3;
}

.vs-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 8vw, 44px) clamp(24px, 6vw, 28px) clamp(24px, 6vw, 32px);
  position: relative;
  z-index: 3;
  overflow-y: auto;
}

.vs-question {
  font-size: clamp(32px, 9.5vw, 42px);
  font-weight: 900;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 clamp(24px, 7vw, 36px);
  line-height: 0.98;
  letter-spacing: 0.3px;
}

.vs-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 3vw, 14px);
  margin-bottom: clamp(24px, 7vw, 36px);
}

.vs-pill {
  height: clamp(84px, 24vw, 104px);
  border-radius: 20px;
  border: 2px solid var(--ln2);
  background: var(--bg1);
  color: var(--ink2);
  font-size: clamp(38px, 11vw, 48px);
  font-weight: 900;
  font-style: italic;
  transition: transform 0.1s, background 0.15s, border-color 0.15s, color 0.15s;
}
.vs-pill:active { transform: scale(0.95); }
.vs-pill.on {
  background: rgba(255,210,74,0.10);
  border-color: var(--gold);
  color: var(--goldhi);
}

.vs-callout {
  background: rgba(255,210,74,0.10);
  border: 2px solid rgba(255,210,74,0.35);
  border-radius: 22px;
  padding: clamp(26px, 7vw, 34px) clamp(22px, 6vw, 28px);
  margin-bottom: 0;
}
.vs-callout-title {
  font-size: clamp(30px, 9vw, 38px);
  font-weight: 900;
  font-style: italic;
  color: var(--goldhi);
  margin: 0 0 clamp(6px, 2vw, 10px);
  line-height: 1;
  letter-spacing: 0.3px;
}
.vs-callout-sub {
  font-size: clamp(20px, 5.5vw, 23px);
  font-weight: 700;
  color: var(--ink2);
  margin: 0;
  line-height: 1.4;
}

.vs-go { margin-top: clamp(24px, 6vw, 32px); align-self: stretch; }

/* ================================================================
   SCREEN: VOTING
   ================================================================ */
.screen-voting {
  background: transparent;
  flex-direction: column;
  overflow: hidden;
}
.screen-voting::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: radial-gradient(ellipse 100% 80% at 50% 10%, rgba(232,52,124,0.16) 0%, rgba(129,51,212,0.10) 38%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

.v-hdr {
  flex-shrink: 0;
  padding: clamp(16px, 5vw, 22px) clamp(20px, 6vw, 24px) clamp(14px, 4vw, 18px);
  border-bottom: 1px solid var(--ln);
  position: relative;
  z-index: 3;
}

.v-question {
  font-size: clamp(32px, 9.5vw, 42px);
  font-weight: 900;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 clamp(12px, 3.5vw, 16px);
  line-height: 1;
  letter-spacing: 0.3px;
}

.v-instruction {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 800;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

.v-detail {
  font-size: clamp(20px, 5.5vw, 23px);
  font-weight: 700;
  color: var(--ink2);
  margin: 0 0 clamp(18px, 5vw, 22px);
  line-height: 1.4;
}

.pips-row { display: flex; align-items: center; gap: 14px; }
.pips { display: flex; align-items: center; gap: 10px; }
.pip {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,0.32);
  background: var(--bg1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pip svg {
  width: 18px; height: 18px;
  stroke: var(--goldinv);
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.15s;
}
.pip.used {
  background: var(--gold);
  border-color: var(--goldhi);
  box-shadow: 0 0 10px rgba(255,210,74,0.55);
}
.pip.used svg { opacity: 1; }
.pips-count {
  font-size: clamp(20px, 5.8vw, 23px);
  font-weight: 900;
  font-style: italic;
  color: var(--goldhi);
  letter-spacing: 0.2px;
}

.v-scroll-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.v-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(14px, 4vw, 18px) clamp(16px, 4.5vw, 18px) 8px;
  position: relative;
  z-index: 3;
  scrollbar-width: auto;
  scrollbar-color: var(--gold) rgba(255,255,255,0.06);
}
/* Webkit (iOS Safari, Chrome) scrollbar — bold and visible */
.v-scroll::-webkit-scrollbar {
  width: 8px;
}
.v-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  margin: 4px 0;
}
.v-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--goldhi) 0%, var(--gold) 100%);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255,210,74,0.7), 0 0 14px rgba(255,210,74,0.4);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Scroll chevron — right edge of scrollable area, vertically centered */
.scroll-chev {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -22px;
  width: 28px;
  height: 44px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scroll-chev.show { opacity: 1; }
.scroll-chev::before,
.scroll-chev::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 3.5px solid var(--goldhi);
  border-bottom: 3.5px solid var(--goldhi);
  margin-left: -7px;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255,210,74,0.9)) drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.scroll-chev::before {
  top: 6px;
  animation: scroll-chev-bounce 1.3s ease-in-out infinite;
}
.scroll-chev::after {
  top: 20px;
  animation: scroll-chev-bounce 1.3s ease-in-out infinite 0.15s;
}
@keyframes scroll-chev-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.7; }
  50%       { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.bar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(9px, 2.6vw, 12px);
  margin-bottom: 18px;
}

.bar-card {
  position: relative;
  min-height: clamp(88px, 24vw, 104px);
  padding: clamp(18px, 5vw, 24px) clamp(12px, 3.2vw, 16px);
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.22);
  background: var(--bg1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.bar-card:active { transform: scale(0.95); }
.bar-card.on {
  background: linear-gradient(145deg, rgba(232,52,124,0.22) 0%, rgba(129,51,212,0.16) 100%);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255,210,74,0.18);
}
/* Only bump size when controls (X count + minus) appear above the name (multi-vote mode) */
.bar-grid.multi .bar-card.on {
  padding-top: clamp(34px, 9.5vw, 42px);
  min-height: clamp(104px, 28vw, 120px);
}
/* Just-added pulse — gold flash for 1.6s on a newly-added bar */
.bar-card.just-added {
  animation: card-pulse 1.6s ease-out;
}
@keyframes card-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,210,74,0); border-color: var(--goldhi); background: rgba(255,210,74,0.28); }
  30%  { box-shadow: 0 0 24px 4px rgba(255,210,74,0.6), 0 0 0 2px rgba(255,210,74,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(255,210,74,0); }
}
.bar-card.dim {
  opacity: 0.26;
  pointer-events: none;
}
.bar-card.dim.on {
  opacity: 1;
  pointer-events: auto;
}
.bar-nm {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: 0.1px;
}
.bar-spark {
  display: inline-block;
  color: var(--goldhi);
  font-size: 0.7em;
  margin-right: 4px;
  vertical-align: 0.15em;
  filter: drop-shadow(0 0 4px rgba(255,210,74,0.7));
}
.bar-card.on .bar-spark {
  -webkit-text-fill-color: var(--goldhi);
  color: var(--goldhi);
}
.bar-card.on .bar-nm {
  background: linear-gradient(160deg, #FFE566 0%, #FFD24A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bar-ct {
  position: absolute;
  top: 10px; right: 10px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 17px;
  background: var(--gold);
  color: var(--goldinv);
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255,210,74,0.45);
}
.bar-card.on .bar-ct { display: inline-flex; }
.bar-mn {
  position: absolute;
  top: 10px; left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
}
.bar-card.on .bar-mn { display: flex; }
.bar-mn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.add-blk {
  margin-bottom: 18px;
  padding: clamp(18px, 5vw, 22px);
  border-radius: 18px;
  border: 1.5px dashed var(--ln2);
  background: rgba(255,255,255,0.02);
}
.add-blk h3 {
  font-size: clamp(22px, 6vw, 25px);
  font-weight: 900;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 4px;
}
.add-blk p {
  font-size: clamp(20px, 5.5vw, 22px);
  font-weight: 700;
  color: var(--ink2);
  margin: 0 0 16px;
  line-height: 1.4;
}
.add-row { display: flex; gap: 10px; }
.add-inp {
  flex: 1; min-width: 0;
  height: clamp(60px, 16vw, 66px);
  padding: 0 18px;
  background: var(--bg2);
  border: 2px solid var(--ln);
  border-radius: 14px;
  color: var(--ink);
  font-size: clamp(20px, 5.5vw, 22px);
  font-weight: 700;
  outline: none;
}
.add-inp:focus { border-color: var(--gold); }
.add-inp::placeholder { color: var(--ink3); font-weight: 700; }
.add-go {
  width: clamp(60px, 16vw, 66px);
  height: clamp(60px, 16vw, 66px);
  flex-shrink: 0;
  background: var(--gold);
  color: var(--goldinv);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-go:active { transform: scale(0.95); }
.add-go svg { width: 26px; height: 26px; stroke: var(--goldinv); fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.v-foot {
  flex-shrink: 0;
  padding: clamp(14px, 4vw, 18px) clamp(16px, 4.5vw, 18px) clamp(18px, 5vw, 22px);
  border-top: 1px solid var(--ln);
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 3;
  background: rgba(10,15,30,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.scroll-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 48px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(255,210,74,0.14) 0%,
    rgba(255,143,165,0.06) 55%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scroll-hint.show { opacity: 1; }

/* ================================================================
   SCREEN: HANDOFF
   ================================================================ */
.screen-handoff {
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(36px, 9vw, 52px) clamp(20px, 5.5vw, 28px) clamp(40px, 10vw, 56px);
  overflow: hidden;
  text-align: center;
}
.screen-handoff::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(232,52,124,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(255,210,74,0.07) 0%, transparent 55%);
  pointer-events: none;
  z-index: 2;
}

.h-count {
  position: relative; z-index: 3;
  font-size: clamp(20px, 5.2vw, 22px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.h-pass {
  position: relative; z-index: 3;
  width: 100%;
  text-align: center;
}
.h-pass-title {
  font-size: clamp(48px, 14vw, 64px);
  font-weight: 900;
  font-style: italic;
  color: var(--ink);
  line-height: 0.90;
  letter-spacing: -1.5px;
  margin: 0 0 clamp(10px, 3vw, 14px);
}
.h-pass-sub {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 700;
  color: var(--ink2);
  line-height: 1.35;
  margin: 0;
}

.h-tap {
  position: relative; z-index: 3;
  width: 100%;
  min-height: clamp(140px, 40vw, 180px);
  padding: clamp(28px, 8vw, 36px) 0;
  border-radius: 24px;
  border: 3px solid rgba(255,210,74,0.7);
  background: linear-gradient(160deg, #1a1530 0%, #14102a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  transition: transform 0.1s, background 0.15s;
  animation: tap-glow 1.8s ease-in-out infinite;
}
.h-tap:active {
  transform: scale(0.97);
  background: linear-gradient(160deg, #221a3a 0%, #1a1430 100%);
  animation: none;
}
@keyframes tap-glow {
  0%, 100% {
    box-shadow: 0 0 16px rgba(255,210,74,0.14), 0 0 0 0 rgba(255,210,74,0);
    border-color: rgba(255,210,74,0.55);
  }
  50% {
    box-shadow: 0 0 60px rgba(255,210,74,0.45), 0 0 0 6px rgba(255,210,74,0.10), 0 0 100px rgba(255,210,74,0.18);
    border-color: var(--goldhi);
  }
}

.h-chevrons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: clamp(54px, 15vw, 72px);
  justify-content: flex-end;
  padding-right: clamp(4px, 1.2vw, 8px);
}
.h-chevrons.right {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: clamp(4px, 1.2vw, 8px);
}
.h-chevrons svg {
  width: clamp(18px, 5vw, 24px);
  height: clamp(18px, 5vw, 24px);
  stroke: var(--goldhi);
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.h-chevrons.left svg:nth-child(1)  { animation: chev-pulse 1.8s ease-in-out infinite 0.00s; }
.h-chevrons.left svg:nth-child(2)  { animation: chev-pulse 1.8s ease-in-out infinite 0.15s; }
.h-chevrons.left svg:nth-child(3)  { animation: chev-pulse 1.8s ease-in-out infinite 0.30s; }
.h-chevrons.right svg:nth-child(1) { animation: chev-pulse 1.8s ease-in-out infinite 0.30s; }
.h-chevrons.right svg:nth-child(2) { animation: chev-pulse 1.8s ease-in-out infinite 0.15s; }
.h-chevrons.right svg:nth-child(3) { animation: chev-pulse 1.8s ease-in-out infinite 0.00s; }
@keyframes chev-pulse {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 1.0; }
}
.h-tap:active .h-chevrons svg { animation: none; opacity: 0.8; }

.h-tap-center { flex: 1; min-width: 0; padding: 0 clamp(4px, 1.5vw, 8px); }
.h-tap-tag {
  font-size: clamp(20px, 5.2vw, 22px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink2);
  display: block;
  margin-bottom: clamp(6px, 2vw, 10px);
  text-transform: uppercase;
}
.h-tap-label {
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 900;
  font-style: italic;
  color: var(--goldhi);
  display: block;
  line-height: 0.92;
  letter-spacing: -1px;
  margin-bottom: clamp(8px, 2.5vw, 12px);
}
.h-tap-sub {
  font-size: clamp(20px, 5.5vw, 22px);
  font-weight: 700;
  color: var(--ink2);
  display: block;
}

.h-everyone { position: relative; z-index: 3; }

/* ================================================================
   SCREEN: WHEEL
   ================================================================ */
.screen-wheel {
  background: transparent;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.wh-app {
  position: relative;
  z-index: 10;
  max-width: 520px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.wh-hdr {
  flex-shrink: 0;
  text-align: center;
  padding: clamp(10px, 3vw, 16px) 24px 0;
}
.wh-title {
  font-size: clamp(42px, 12vw, 58px);
  font-weight: 900;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -2px;
  margin: 0;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5s linear infinite;
}
.wh-title span { display: block; }

.wh-instruction-wrap {
  flex-shrink: 0;
  text-align: center;
  padding: clamp(6px, 2vw, 10px) 24px 0;
}
.wh-instruction {
  font-size: clamp(36px, 10vw, 46px);
  font-weight: 900;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin: 0;
}

.wh-stage-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  position: relative;
  width: 100%;
}
.wh-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,210,74,0.14) 0%, rgba(232,52,124,0.07) 40%, transparent 68%);
  pointer-events: none;
  animation: glow-breathe 4s ease-in-out infinite;
}
@keyframes glow-breathe { 0%,100%{opacity:.8} 50%{opacity:1} }

.wh-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  cursor: pointer;
  user-select: none;
}
.wh-stage svg { display: block; width: 100%; height: 100%; }

.wh-ptr {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  z-index: 5; pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
}

.wh-wheel {
  width: 100%; height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.wh-wheel canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.wh-rim {
  position: absolute; top: 50%; left: 50%;
  width: 100%; aspect-ratio: 1;
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 5;
  animation: rim-spin 8s linear infinite;
  filter: saturate(1.6) brightness(1.2);
  will-change: transform;
}
.wh-rim-i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    #D4145A 0deg,#0891B2 52deg,#059669 104deg,#2563EB 156deg,
    #7C3AED 208deg,#C026D3 260deg,#D4145A 312deg,#D4145A 360deg);
  -webkit-mask: radial-gradient(circle, transparent 85.5%, black 87%, black 95.5%, transparent 97%);
  mask: radial-gradient(circle, transparent 85.5%, black 87%, black 95.5%, transparent 97%);
  animation: rim-pulse 2.5s ease-in-out infinite;
  will-change: filter;
}
@keyframes rim-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes rim-pulse {
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,210,74,.4));}
  50%{filter:drop-shadow(0 0 12px rgba(255,210,74,.8)) drop-shadow(0 0 24px rgba(232,52,124,.5));}
}

.wh-bulbs {
  position: absolute; top: 50%; left: 50%;
  width: 100%; aspect-ratio: 1;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 6;
}
.wh-bulb {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: bulb-blink 1.8s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes bulb-blink {
  0%,100% { opacity: 0.28; transform: translate(-50%,-50%) scale(0.78); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.22); }
}

.wh-hub {
  position: absolute; top: 50%; left: 50%;
  width: 16%; height: 16%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5.5px #FFD24A,
    0 0 0 8.5px var(--bg),
    0 0 0 10px rgba(255,210,74,0.4);
}
.wh-hub-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,210,74,0.9) 0%,
    rgba(255,210,74,0.5) 30%,
    rgba(232,52,124,0.25) 55%,
    transparent 72%);
  opacity: 0;
  animation: hub-glow-pulse 5s ease-in-out infinite;
}
@keyframes hub-glow-pulse {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}
.wh-hub-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #1e2a3e 0%, #111828 60%, #080d18 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.06), inset 0 -2px 6px rgba(0,0,0,.5);
}
.wh-hub-lbl {
  position: relative;
  font-size: clamp(16px, 5vw, 24px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--goldhi);
  opacity: 1;
}
.wh-hub-lbl::before {
  content: 'SPIN';
  position: absolute;
  inset: -6px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(16px, 5vw, 24px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1.5px;
  color: transparent;
  text-shadow: 0 0 12px rgba(255,210,74,1), 0 0 24px rgba(255,210,74,0.8), 0 0 40px rgba(255,210,74,0.5);
  opacity: 0;
  animation: hub-glow-pulse 5s ease-in-out infinite;
  pointer-events: none;
}

.wh-controls {
  flex-shrink: 0;
  padding: clamp(8px, 2.5vw, 12px) 24px clamp(20px, 5.5vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 10;
}
.wh-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.wh-sec-btn {
  display: inline-flex;
  align-items: center;
  padding: clamp(10px, 2.8vw, 13px) clamp(16px, 4.5vw, 22px);
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.45);
  background: #14182a;
  color: rgba(255,255,255,0.9);
  font-size: clamp(17px, 4.5vw, 19px);
  font-weight: 800;
  font-style: italic;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  position: relative;
  z-index: 10;
}
.wh-sec-btn:active {
  background: #1d2238;
  transform: scale(0.97);
}

/* Body shake while spinning */
body.spinning .wh-app { animation: shake 0.35s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  25%       { transform: translate(-1px, 1px); }
  50%       { transform: translate(1px,-1px); }
  75%       { transform: translate(-1px,-1px); }
}

/* ================================================================
   SCREEN: REVEAL (overlay)
   ================================================================ */
.screen-reveal {
  z-index: 50;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.rev-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5,8,18,0.97);
  z-index: 0;
  pointer-events: none;
}
body[data-screen="reveal"] .screen-reveal { opacity: 1; pointer-events: auto; }

.rev-rays {
  position: fixed;
  top: 50%; left: 50%;
  width: 6000px; height: 6000px;
  margin-top: -3000px; margin-left: -3000px;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255,210,74,.18) 5deg, transparent 10deg,
    transparent 30deg, rgba(232,52,124,.13) 35deg, transparent 40deg,
    transparent 60deg, rgba(34,181,200,.13) 65deg, transparent 70deg,
    transparent 90deg, rgba(255,210,74,.18) 95deg, transparent 100deg,
    transparent 120deg, rgba(192,38,211,.13) 125deg, transparent 130deg,
    transparent 150deg, rgba(34,197,94,.13) 155deg, transparent 160deg,
    transparent 180deg, rgba(255,210,74,.18) 185deg, transparent 190deg,
    transparent 210deg, rgba(232,52,124,.13) 215deg, transparent 220deg,
    transparent 240deg, rgba(34,181,200,.13) 245deg, transparent 250deg,
    transparent 270deg, rgba(255,210,74,.18) 275deg, transparent 280deg,
    transparent 300deg, rgba(192,38,211,.13) 305deg, transparent 310deg,
    transparent 330deg, rgba(34,197,94,.13) 335deg, transparent 340deg,
    transparent 360deg);
  opacity: 0;
  animation: rays-spin 14s linear infinite;
}
body[data-screen="reveal"] .rev-rays {
  animation: rays-spin 14s linear infinite, rays-in 0.7s ease-out 0.2s forwards;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes rays-in { to { opacity: 1; } }

.rev-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(20px, 5vw, 28px) clamp(16px, 4vw, 24px) clamp(24px, 6vw, 32px);
  max-width: 560px;
  width: 100%;
  transform: scale(0.92);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body[data-screen="reveal"] .rev-inner { transform: scale(1); }

.rev-lbl {
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 800;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
body[data-screen="reveal"] .rev-lbl { opacity: 1; transform: translateY(0); }

.rev-rule {
  width: 88px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 28px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s ease 0.4s;
}
body[data-screen="reveal"] .rev-rule { transform: scaleX(1); }

.rev-name {
  font-size: clamp(80px, 22vw, 130px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -2px;
  line-height: 0.95;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 28px;
  padding: 0.12em 0.05em 0.18em;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  opacity: 0;
  max-width: 100%;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
}
body[data-screen="reveal"] .rev-name {
  animation: rev-kick 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards, rev-shine 5s linear 1.3s infinite;
}
@keyframes rev-shine { from { background-position: 0%; } to { background-position: -200%; } }
@keyframes rev-kick {
  0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; filter: blur(8px); }
  40%  { transform: scale(1.2) rotate(2deg);  opacity: 1; filter: blur(0); }
  65%  { transform: scale(0.94) rotate(-1deg); opacity: 1; }
  85%  { transform: scale(1.04) rotate(0.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* Variants only kick in for unbreakable single words that won't wrap */
.rev-name.long  { font-size: clamp(54px, 14vw, 88px); letter-spacing: -1.5px; }
.rev-name.xlong { font-size: clamp(42px, 11vw, 72px); letter-spacing: -1px; }

.rev-prompt {
  font-size: clamp(28px, 7.5vw, 34px);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 auto 32px;
  max-width: 440px;
  opacity: 0;
  transition: opacity 0.5s ease 0.7s;
}
.rev-prompt:empty { display: none; }
body[data-screen="reveal"] .rev-prompt { opacity: 1; }

.rev-acts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;
}
body[data-screen="reveal"] .rev-acts { opacity: 1; transform: translateY(0); }

.rev-go {
  width: 100%;
  height: clamp(80px, 22vw, 96px);
  border-radius: 24px;
  background: linear-gradient(160deg, #FFE566 0%, #FFD24A 55%, #c49a20 100%);
  color: var(--goldinv);
  font-size: clamp(32px, 9vw, 38px);
  font-weight: 900;
  font-style: italic;
  box-shadow: 0 8px 28px rgba(255,210,74,0.38);
  animation: go-pulse 2s ease-in-out infinite;
}
@keyframes go-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(255,210,74,0.38), 0 0 0 0 rgba(232,52,124,0); }
  50%       { box-shadow: 0 8px 36px rgba(255,210,74,0.65), 0 0 0 8px rgba(232,52,124,0.14), 0 0 48px rgba(255,210,74,0.4); }
}
.rev-again {
  width: 100%;
  height: clamp(80px, 22vw, 96px);
  border-radius: 24px;
  background: linear-gradient(160deg, #FFE566 0%, #FFD24A 55%, #c49a20 100%);
  color: var(--goldinv);
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 900;
  font-style: italic;
  box-shadow: 0 8px 28px rgba(255,210,74,0.38);
  animation: go-pulse 2s ease-in-out infinite;
  line-height: 1.1;
  padding: 0 18px;
}
.rev-go:active, .rev-again:active { transform: scale(0.98); }

/* ================================================================
   FX OVERLAYS — confetti canvas, lightning, word bursts, big flash
   ================================================================ */
.fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 120; contain: strict; }

.fx-storm { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; contain: strict; }
.sball {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #e2dff0 18%, #aeaac8 50%, #6a6688 100%);
  box-shadow:
    inset -4px -6px 8px rgba(0,0,0,0.4),
    inset 4px 4px 8px rgba(255,255,255,0.3),
    0 0 12px rgba(255,210,74,0.5),
    0 0 26px rgba(232,52,124,0.35);
  top: -50px;
  animation: ball-fall linear forwards;
}
.sball::before, .sball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.sball::before {
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.14) 0deg 8deg, transparent 8deg 16deg);
  mix-blend-mode: overlay;
}
.sball::after {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0px 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0px 4px, transparent 4px 8px);
  mix-blend-mode: multiply;
}
@keyframes ball-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}
.cktl { position: absolute; top: -40px; font-size: 28px; animation: cktl-fall linear forwards; }
@keyframes cktl-fall {
  0%   { transform: translateY(0) rotate(-20deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.7; }
}

.fx-words { position: fixed; inset: 0; pointer-events: none; z-index: 110; overflow: hidden; contain: strict; }
.wd {
  position: absolute;
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  text-shadow:
    0 0 16px rgba(255,210,74,0.95),
    0 0 32px rgba(232,52,124,0.7),
    2px 2px 0 rgba(0,0,0,0.4);
  animation: wd-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform: translate(-50%,-50%) scale(0);
  color: #FFE566;
}
.wd.p { color: #FF5FAD; }
.wd.c { color: #3CD8EA; }
.wd.l { color: #7DDD3A; }
@keyframes wd-pop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(var(--r,-8deg));   opacity: 0; }
  20%  { transform: translate(-50%,-50%) scale(1.3) rotate(var(--r,-8deg)); opacity: 1; }
  70%  { transform: translate(-50%,-50%) scale(1) rotate(var(--r,-8deg));   opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.4) rotate(var(--r,-8deg)); opacity: 0; }
}

.fx-lightning { position: fixed; inset: 0; pointer-events: none; z-index: 115; background: transparent; transition: background 0.05s ease-out; }
.lfw { background: rgba(255,255,255,0.48); }
.lfp { background: rgba(232,52,124,0.28);  }
.lfc { background: rgba(34,181,200,0.38);  }
.lfg { background: rgba(255,210,74,0.48);  }
.lfv { background: rgba(124,58,237,0.38);  }
.lfl { background: rgba(34,197,94,0.34);   }
.lft { background: rgba(249,115,22,0.4);   }

.fx-bigflash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 130;
  background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,224,102,0.95) 30%, rgba(232,52,124,0.4) 60%, transparent 100%);
  opacity: 0;
}
.fx-bigflash.boom { animation: bf-pop 0.7s ease-out forwards; }
@keyframes bf-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  15%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2); }
}