/*
  Qızıl Top Hara Getdi? — Stage 3 / JavaScript müqaviləsi

  JavaScript-in idarə etdiyi CSS dəyişənləri:
  --slot-x          .cup və .bar üzərində üfüqi mövqe (faiz, məsələn 23%).
  --lift            .cup üzərində yuxarı qaldırma məsafəsi (uzunluq, məsələn 48px).
  --swap            .cup üzərində əlavə üfüqi sürüşmə (uzunluq, məsələn -120px).
  --ball-x          #ball üçün sol mövqe (faiz).
  --ball-y          #ball üçün yuxarı mövqe (faiz).
  --vote-pct        .bar üzərində səs faizi (0%–100%).
  --timer-progress  #timer halqası üçün doluluq (0%–100%).
  --spot-x, --spot-y  #fx .fx-spot üçün fokus mərkəzi (faiz).

  CSS-in özü --sh və --sw ölçü dəyişənlərini 100dvh əsasında hesablayır.
  JS-in dəyişə biləcəyi mərhələ: body[data-phase] = intro|show|shuffle|vote|
  reveal|result|leaderboard. Aktiv qab sayı body[data-cups] = 3|4|5.
  JS sinifləri: .is-lit, .is-lifted, .is-winner, .is-fake-lift, .is-slow,
  .is-zoom, .is-double; rejim sinifləri: body.is-lite və body.is-obs.
  Qablar və səs sütunları data-cup="1"..."5" ilə uyğunlaşdırılır.
*/

:root {
  --sh: min(100dvh, 177.7778vw);
  --sw: min(100vw, 56.25dvh);

  --ink: #f4f7ff;
  --muted: #9aa8c9;
  --navy-950: #050817;
  --navy-900: #080d22;
  --navy-800: #101833;
  --gold: #ffd65a;
  --gold-bright: #fff1a1;
  --cyan: #35e7ff;
  --pink: #ff4fc8;
  --violet: #a875ff;
  --lime: #b8ff54;
  --orange: #ff9d45;
  --cup-color-1: var(--cyan);
  --cup-color-2: var(--pink);
  --cup-color-3: var(--violet);
  --cup-color-4: var(--lime);
  --cup-color-5: var(--orange);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  min-height: 100%;
  background: var(--navy-950);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(34, 54, 112, .34), transparent 43%),
    linear-gradient(180deg, #080b1c 0%, #090f27 48%, #050716 100%);
  color: var(--ink);
  font-family: "SF Pro Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea { font: inherit; }
button { color: inherit; }

button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

#stage {
  position: relative;
  isolation: isolate;
  width: min(100vw, var(--sw));
  height: var(--sh);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  container-type: size;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(29, 57, 123, .35), transparent 43%),
    linear-gradient(180deg, #080d23 0%, #0a1530 48%, #080b1d 100%);
  box-shadow: 0 0 6cqw rgba(0, 0, 0, .56);
}

#stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(110, 155, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 155, 255, .07) 1px, transparent 1px);
  background-size: 8cqw 8cqw;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 95%);
}

#bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 26%, rgba(53, 231, 255, .11), transparent 24%),
    radial-gradient(ellipse at 88% 30%, rgba(168, 117, 255, .13), transparent 25%),
    radial-gradient(ellipse at 50% 73%, rgba(255, 214, 90, .07), transparent 26%);
}

#bg::before, #bg::after {
  position: absolute;
  content: "";
  width: 42cqw;
  aspect-ratio: 1;
  border: 1px solid rgba(108, 152, 255, .11);
  border-radius: 50%;
  box-shadow:
    0 0 0 4cqw rgba(108, 152, 255, .025),
    0 0 0 9cqw rgba(108, 152, 255, .02),
    inset 0 0 4cqw rgba(108, 152, 255, .04);
}

#bg::before { top: 25%; left: -25%; }
#bg::after { top: 40%; right: -29%; border-color: rgba(255, 214, 90, .10); }

#fx {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#fx > i {
  position: absolute;
  display: block;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.fx-spot {
  z-index: 2;
  background:
    radial-gradient(ellipse at var(--spot-x, 50%) var(--spot-y, 50%),
      rgba(255, 239, 157, .28) 0%,
      rgba(255, 215, 91, .12) 12%,
      rgba(255, 215, 91, .035) 26%,
      transparent 48%);
  transition: opacity 350ms ease;
}

body[data-phase="reveal"] .fx-spot,
body[data-phase="result"] .fx-spot,
#stage.is-zoom .fx-spot { opacity: 1; }

body[data-phase="reveal"] .fx-spot::before,
body[data-phase="result"] .fx-spot::before {
  position: absolute;
  top: 29%;
  left: var(--spot-x, 50%);
  width: 1px;
  height: 40%;
  content: "";
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 241, 161, .24), transparent);
  box-shadow: 0 0 16cqw 5cqw rgba(255, 214, 90, .06);
  clip-path: polygon(0 0, 100% 0, 9000% 100%, -9000% 100%);
}

.fx-vignette {
  z-index: 7;
  opacity: .72 !important;
  background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .62) 115%);
}

.fx-confetti {
  z-index: 5;
  background-image:
    radial-gradient(circle, #fff1a1 0 1.2px, transparent 1.8px),
    radial-gradient(circle, #35e7ff 0 1.2px, transparent 1.8px),
    radial-gradient(circle, #ff4fc8 0 1.2px, transparent 1.8px),
    radial-gradient(circle, #b8ff54 0 1.2px, transparent 1.8px);
  background-size: 13cqw 17cqw, 17cqw 21cqw, 19cqw 14cqw, 23cqw 19cqw;
  background-position: 2cqw 3cqw, 8cqw 12cqw, 15cqw 6cqw, 20cqw 14cqw;
}

body[data-phase="result"] .fx-confetti,
body[data-phase="leaderboard"] .fx-confetti,
#stage.is-double .fx-confetti {
  opacity: .78;
  animation: confetti-drift 2.2s linear infinite;
}

.fx-flash {
  z-index: 6;
  background: radial-gradient(ellipse at 50% 51%, rgba(255, 236, 141, .7), rgba(255, 214, 90, .18) 24%, transparent 61%);
}

#stage.is-double .fx-flash,
#stage.is-flash .fx-flash { animation: gold-flash 750ms ease-out both; }

.fx-zoom {
  z-index: 1;
  background: radial-gradient(ellipse at 50% 51%, transparent 36%, rgba(53, 231, 255, .055) 50%, transparent 69%);
  transition: opacity 250ms ease;
}

#stage.is-zoom .fx-zoom { opacity: 1; }

#hud { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

.hud-top {
  position: absolute;
  top: 3.3%;
  left: 5%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 90%;
  gap: 2cqw;
}

#round, #streak {
  margin: 0;
  color: #dbe6ff;
  font-size: 2.6cqw;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.2;
  text-shadow: 0 0 2cqw rgba(53, 231, 255, .32);
}

#round { justify-self: start; }

#streak {
  justify-self: end;
  color: var(--gold-bright);
  text-align: right;
  text-shadow: 0 0 2cqw rgba(255, 214, 90, .32);
}

#timer {
  --timer-progress: 100%;
  position: relative;
  display: grid;
  place-items: center;
  width: 12cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 var(--timer-progress), rgba(126, 148, 194, .22) var(--timer-progress) 100%);
  filter: drop-shadow(0 0 1.5cqw rgba(255, 214, 90, .18));
}

#timer::before {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255, 234, 148, .18);
  border-radius: 50%;
  background: #0b1229;
  content: "";
}

.timer-value {
  position: relative;
  z-index: 1;
  color: #fff7cf;
  font-size: 3.3cqw;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

#title {
  position: absolute;
  top: 11.3%;
  left: 5%;
  width: 90%;
  margin: 0;
  color: #fff5c9;
  font-size: 5.2cqw;
  font-weight: 950;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 0 1.3cqw rgba(255, 214, 90, .63),
    0 0 4.5cqw rgba(255, 168, 51, .25),
    0 2px 0 rgba(0, 0, 0, .5);
}

body[data-phase="intro"] #title {
  top: 12.2%;
  font-size: 5.6cqw;
  animation: title-arrive 650ms cubic-bezier(.18, .8, .25, 1) both;
}

#banner {
  position: absolute;
  z-index: 11;
  top: 21.5%;
  left: 8%;
  display: block;
  width: 84%;
  padding: 2.1cqw 3cqw;
  border: 1px solid rgba(255, 225, 130, .62);
  border-radius: 3cqw;
  background: linear-gradient(110deg, rgba(56, 35, 10, .94), rgba(95, 61, 12, .90), rgba(38, 28, 12, .94));
  box-shadow: 0 0 4cqw rgba(255, 190, 55, .22), inset 0 1px rgba(255, 247, 201, .24);
  color: #fff1aa;
  font-size: 3.4cqw;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 0 1.2cqw rgba(255, 214, 90, .55);
  overflow-wrap: anywhere;
}

#banner:empty, #result:empty { display: none; }

#result {
  position: absolute;
  top: 23.4%;
  left: 8%;
  width: 84%;
  color: #eaf0ff;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.result-text {
  margin: 0;
  font-size: 3.4cqw;
  font-weight: 800;
  line-height: 1.15;
}

.seed-code {
  margin: 1.3cqw 0 0;
  color: #b7c3e2;
  font-size: 2.25cqw;
  font-weight: 650;
  letter-spacing: .035em;
}

.seed-value {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}

body[data-phase="intro"] #result .seed-code,
body[data-phase="show"] #result .seed-code,
body[data-phase="shuffle"] #result .seed-code,
body[data-phase="vote"] #result .seed-code { display: none; }

body[data-phase="intro"] #result .result-text {
  color: #aebcdd;
  font-size: 2.7cqw;
}

#board {
  position: absolute;
  z-index: 12;
  top: 24%;
  left: 10%;
  width: 80%;
  padding: 2.1cqw 3cqw 2.4cqw;
  border: 1px solid rgba(255, 214, 90, .34);
  border-radius: 3cqw;
  background: linear-gradient(150deg, rgba(14, 24, 53, .96), rgba(6, 10, 27, .97));
  box-shadow: 0 1cqw 5cqw rgba(0, 0, 0, .32), inset 0 0 3cqw rgba(53, 231, 255, .035);
}

#board h2 {
  margin: 0 0 1cqw;
  color: var(--gold-bright);
  font-size: 3.2cqw;
  font-weight: 900;
  text-align: center;
}

#board ol {
  display: grid;
  gap: .7cqw;
  margin: 0;
  padding-left: 6cqw;
  color: #eff4ff;
  font-size: 2.55cqw;
  font-variant-numeric: tabular-nums;
}

#board li { padding-left: .8cqw; line-height: 1.25; }

body[data-phase="leaderboard"] #board {
  display: block;
  animation: board-enter 320ms ease-out both;
}

body[data-phase="leaderboard"] #result,
body[data-phase="leaderboard"] #banner { display: none; }

#table {
  position: absolute;
  z-index: 3;
  top: 33.5%;
  left: 0;
  width: 100%;
  height: 36%;
  pointer-events: none;
}

#table::before {
  position: absolute;
  right: -10%;
  bottom: 0;
  left: -10%;
  height: 22%;
  border-top: 1px solid rgba(95, 166, 255, .18);
  border-radius: 50% 50% 0 0 / 45% 45% 0 0;
  background:
    linear-gradient(180deg, rgba(43, 72, 129, .12), rgba(5, 8, 23, .84)),
    radial-gradient(ellipse at 50% 0%, rgba(84, 156, 255, .2), transparent 63%);
  content: "";
}

#table::after {
  position: absolute;
  right: 0;
  bottom: 3%;
  left: 0;
  height: 20%;
  content: "";
  opacity: .75;
  background: radial-gradient(ellipse at 50% 50%, rgba(69, 130, 236, .15), rgba(69, 130, 236, .035) 42%, transparent 70%);
  filter: blur(2cqw);
}

#cups {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-origin: 50% 58%;
  transition: filter 250ms ease;
}

#cups.is-zoom, #table.is-zoom, #stage.is-zoom #table { transform: scale(1.065); }

.cup {
  --slot-x: 50%;
  --lift: 0px;
  --swap: 0px;
  --cup-color: var(--cup-color-1);
  position: absolute;
  top: 45%;
  left: var(--slot-x);
  width: 16.2cqw;
  height: 20.2cqw;
  transform: translate3d(calc(-50% + var(--swap)), calc(-50% - var(--lift)), 0);
  transform-origin: 50% 88%;
  border: 0;
  border-radius: 2cqw;
  opacity: 1;
  pointer-events: none;
  will-change: auto;
  filter: drop-shadow(0 1.8cqw 1.3cqw rgba(0, 0, 0, .38));
}

.cup[data-cup="1"] { --cup-color: var(--cup-color-1); --slot-x: 23%; }
.cup[data-cup="2"] { --cup-color: var(--cup-color-2); --slot-x: 50%; }
.cup[data-cup="3"] { --cup-color: var(--cup-color-3); --slot-x: 77%; }
.cup[data-cup="4"] { --cup-color: var(--cup-color-4); --slot-x: 50%; }
.cup[data-cup="5"] { --cup-color: var(--cup-color-5); --slot-x: 50%; }

body[data-cups="3"] .cup[data-cup="4"],
body[data-cups="3"] .cup[data-cup="5"],
body[data-cups="4"] .cup[data-cup="5"] {
  visibility: hidden;
  opacity: 0;
}

body[data-cups="4"] .cup[data-cup="1"] { --slot-x: 16.7%; }
body[data-cups="4"] .cup[data-cup="2"] { --slot-x: 38.9%; }
body[data-cups="4"] .cup[data-cup="3"] { --slot-x: 61.1%; }
body[data-cups="4"] .cup[data-cup="4"] { --slot-x: 83.3%; }

body[data-cups="5"] .cup[data-cup="1"] { --slot-x: 10%; }
body[data-cups="5"] .cup[data-cup="2"] { --slot-x: 30%; }
body[data-cups="5"] .cup[data-cup="3"] { --slot-x: 50%; }
body[data-cups="5"] .cup[data-cup="4"] { --slot-x: 70%; }
body[data-cups="5"] .cup[data-cup="5"] { --slot-x: 90%; }

.cup::before {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 9%;
  width: 82%;
  height: 7%;
  border: 1px solid color-mix(in srgb, var(--cup-color) 72%, white);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), color-mix(in srgb, var(--cup-color) 48%, transparent));
  box-shadow: 0 0 1.8cqw var(--cup-color), inset 0 -1px 2px rgba(0, 0, 0, .35);
  content: "";
}

.cup::after {
  position: absolute;
  z-index: 4;
  inset: 5% -3% -5%;
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: translateX(-15%) scaleX(.8);
  background: linear-gradient(90deg, transparent, rgba(230, 249, 255, .25), transparent);
  pointer-events: none;
}

.cup-body {
  position: absolute;
  inset: 2% 1% 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cup-color) 78%, white);
  border-radius: 3.4cqw 3.4cqw 2.3cqw 2.3cqw;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .035) 19%, transparent 32%, rgba(255, 255, 255, .11) 70%, rgba(255, 255, 255, .035) 84%, rgba(0, 0, 0, .16) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--cup-color) 24%, rgba(255, 255, 255, .23)), rgba(20, 33, 64, .83) 40%, rgba(9, 15, 35, .98) 100%);
  box-shadow: inset 0 0 2.2cqw rgba(255, 255, 255, .12), inset 0 -1cqw 1.7cqw rgba(0, 0, 0, .38);
  backdrop-filter: blur(3px);
}

.cup-body::before {
  position: absolute;
  top: 5%;
  bottom: 7%;
  left: 15%;
  width: 11%;
  border-radius: 50%;
  content: "";
  opacity: .75;
  transform: skewY(-6deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .04));
  filter: blur(.25cqw);
}

.cup-body::after {
  position: absolute;
  right: 11%;
  bottom: 4%;
  left: 11%;
  height: 9%;
  border-radius: 50%;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
}

.cup-glow {
  position: absolute;
  z-index: 0;
  inset: 14% -12% -10%;
  display: block;
  border-radius: 50%;
  opacity: .35;
  background: radial-gradient(ellipse at 50% 60%, var(--cup-color), transparent 65%);
  filter: blur(2.2cqw);
  transition: opacity 180ms ease, filter 180ms ease;
}

.cup-label {
  position: absolute;
  z-index: 5;
  top: 37%;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  color: #f8fbff;
  font-size: 7cqw;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.06em;
  text-shadow:
    0 0 .7cqw white,
    0 0 1.8cqw var(--cup-color),
    0 0 4cqw var(--cup-color),
    0 2px 3px rgba(0, 0, 0, .8);
}

.cup.is-lit .cup-glow { opacity: .95; filter: blur(2.8cqw); }

.cup.is-lit .cup-body {
  border-color: #fff1a1;
  box-shadow: inset 0 0 2.8cqw rgba(255, 241, 161, .4), 0 0 3cqw rgba(255, 214, 90, .5);
}

.cup.is-lifted {
  --lift: 6cqw;
  filter: drop-shadow(0 .8cqw .8cqw rgba(0, 0, 0, .25));
}

.cup.is-fake-lift {
  --lift: 2.2cqw;
  filter: drop-shadow(0 1.1cqw 1cqw rgba(0, 0, 0, .35));
}

.cup.is-winner {
  z-index: 7;
  --lift: 7cqw;
  filter: drop-shadow(0 0 2.2cqw rgba(255, 214, 90, .9));
}

.cup.is-winner .cup-body {
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 2cqw rgba(255, 241, 161, .32), 0 0 2.5cqw rgba(255, 214, 90, .55);
}

body[data-phase="shuffle"] .cup { will-change: transform; }

body[data-phase="shuffle"] .cup::after {
  opacity: .72;
  animation: cup-trail 260ms linear infinite alternate;
}

body.is-slow[data-phase="shuffle"] .cup::after,
#stage.is-slow .cup::after { animation-duration: 520ms; }

body[data-phase="intro"] .cup { filter: drop-shadow(0 1cqw .7cqw rgba(0, 0, 0, .3)); }

#ball {
  --ball-x: 50%;
  --ball-y: 59%;
  position: absolute;
  z-index: 6;
  top: var(--ball-y);
  left: var(--ball-x);
  width: 6.2cqw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 248, 190, .95);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  background: radial-gradient(circle at 30% 24%, #fffde1 0%, #fff0a0 12%, #ffc92c 34%, #e18a08 67%, #8e4600 100%);
  box-shadow:
    0 0 1cqw #fff3ac,
    0 0 2.5cqw rgba(255, 209, 56, .95),
    0 0 6cqw rgba(255, 165, 0, .62),
    inset -1cqw -1cqw 1.2cqw rgba(113, 52, 0, .5),
    inset .7cqw .7cqw 1cqw rgba(255, 255, 220, .95);
  pointer-events: none;
  transition: opacity 220ms ease, filter 220ms ease;
}

#ball::before {
  position: absolute;
  top: 7%;
  left: 18%;
  width: 37%;
  height: 23%;
  border-radius: 50%;
  content: "";
  transform: rotate(-28deg);
  background: rgba(255, 255, 242, .92);
  filter: blur(.2cqw);
}

#ball::after {
  position: absolute;
  top: 11%;
  left: -130%;
  width: 155%;
  height: 78%;
  border-radius: 50%;
  content: "";
  opacity: .65;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 202, 48, .18), rgba(255, 237, 145, .72));
  filter: blur(1.3cqw);
}

body[data-phase="show"] #ball,
body[data-phase="reveal"] #ball,
body[data-phase="result"] #ball {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

body[data-phase="show"] #ball { animation: ball-drop 600ms cubic-bezier(.15, .72, .28, 1) both; }

body[data-phase="reveal"] #ball,
body[data-phase="result"] #ball,
#ball.is-double {
  filter: brightness(1.15) saturate(1.2);
  box-shadow:
    0 0 1.4cqw #fff9d0,
    0 0 3.2cqw rgba(255, 231, 99, 1),
    0 0 8cqw rgba(255, 165, 0, .85),
    0 0 13cqw rgba(255, 214, 90, .32),
    inset -1cqw -1cqw 1.2cqw rgba(113, 52, 0, .5),
    inset .7cqw .7cqw 1cqw rgba(255, 255, 220, .95);
}

#stage.is-double #ball,
body.is-double #ball {
  box-shadow:
    0 0 1.4cqw #fff9d0,
    0 0 3.2cqw rgba(255, 231, 99, 1),
    0 0 9cqw rgba(255, 165, 0, .95),
    0 0 16cqw rgba(255, 214, 90, .5),
    inset -1cqw -1cqw 1.2cqw rgba(113, 52, 0, .5),
    inset .7cqw .7cqw 1cqw rgba(255, 255, 220, .95);
}

#bars {
  position: absolute;
  z-index: 4;
  top: 65.7%;
  left: 0;
  width: 100%;
  height: 9.6%;
  pointer-events: none;
}

.bar {
  --slot-x: 50%;
  --vote-pct: 0%;
  position: absolute;
  top: 0;
  left: var(--slot-x);
  width: 10.5cqw;
  height: 100%;
  transform: translateX(-50%);
  opacity: .93;
}

.bar[data-cup="1"] { --slot-x: 23%; }
.bar[data-cup="2"] { --slot-x: 50%; }
.bar[data-cup="3"] { --slot-x: 77%; }
.bar[data-cup="4"] { --slot-x: 50%; }
.bar[data-cup="5"] { --slot-x: 50%; }

body[data-cups="3"] .bar[data-cup="4"],
body[data-cups="3"] .bar[data-cup="5"],
body[data-cups="4"] .bar[data-cup="5"] {
  visibility: hidden;
  opacity: 0;
}

body[data-cups="4"] .bar[data-cup="1"] { --slot-x: 16.7%; }
body[data-cups="4"] .bar[data-cup="2"] { --slot-x: 38.9%; }
body[data-cups="4"] .bar[data-cup="3"] { --slot-x: 61.1%; }
body[data-cups="4"] .bar[data-cup="4"] { --slot-x: 83.3%; }

body[data-cups="5"] .bar[data-cup="1"] { --slot-x: 10%; }
body[data-cups="5"] .bar[data-cup="2"] { --slot-x: 30%; }
body[data-cups="5"] .bar[data-cup="3"] { --slot-x: 50%; }
body[data-cups="5"] .bar[data-cup="4"] { --slot-x: 70%; }
body[data-cups="5"] .bar[data-cup="5"] { --slot-x: 90%; }

.bar::before {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(144, 173, 235, .18);
  border-radius: 1.3cqw;
  content: "";
  background: rgba(5, 10, 28, .34);
  box-shadow: inset 0 0 1.4cqw rgba(0, 0, 0, .2);
}

.bar-fill {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  display: block;
  height: var(--vote-pct);
  min-height: 0;
  border-radius: 1cqw;
  background: linear-gradient(180deg, #fff1a1 0%, #ffc638 40%, #b76b12 100%);
  box-shadow: 0 0 1.5cqw rgba(255, 214, 90, .48);
  transform-origin: center bottom;
  transition: height 160ms ease-out;
}

.bar-pct {
  position: absolute;
  top: calc(100% + .8cqw);
  left: 50%;
  min-width: 100%;
  color: #f1f5ff;
  font-size: 2.4cqw;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 1cqw rgba(53, 231, 255, .2);
  white-space: nowrap;
  transform: translateX(-50%);
}

body[data-phase="vote"] #bars { opacity: 1; }
body:not([data-phase="vote"]) #bars { opacity: .72; }
body[data-phase="vote"] .bar-fill { box-shadow: 0 0 2cqw rgba(255, 214, 90, .6); }

#panel {
  position: fixed;
  z-index: 100;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: block;
  width: min(440px, calc(100vw - 24px));
  max-height: 72dvh;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(53, 231, 255, .35);
  border-radius: 16px;
  background: rgba(6, 11, 29, .97);
  box-shadow: 0 12px 55px rgba(0, 0, 0, .58), inset 0 0 28px rgba(53, 231, 255, .035);
  backdrop-filter: blur(18px);
  color: var(--ink);
  scrollbar-color: #415481 #0a1026;
}

.panel-header {
  position: sticky;
  z-index: 2;
  top: -16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -16px -16px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(160, 187, 241, .14);
  background: rgba(6, 11, 29, .98);
}

.panel-header h2 { margin: 0; font-size: 18px; font-weight: 900; }

.panel-section {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(155, 181, 232, .13);
}

.panel-section:last-of-type { border-bottom: 0; }

.panel-section h3 {
  margin: 0 0 2px;
  color: var(--gold-bright);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .03em;
}

.panel-section label { color: #c3cde3; font-size: 12px; font-weight: 650; }

.panel-section input, .panel-section textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(151, 176, 228, .22);
  border-radius: 8px;
  background: #0b1430;
  color: var(--ink);
  font-size: 14px;
}

.panel-section textarea { resize: vertical; }

#panel button, #sound-unlock {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(53, 231, 255, .35);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(33, 56, 97, .95), rgba(16, 27, 54, .98));
  color: #eff8ff;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

#panel button:hover, #sound-unlock:hover {
  border-color: rgba(255, 214, 90, .72);
  background: linear-gradient(180deg, rgba(76, 60, 39, .96), rgba(34, 29, 33, .98));
}

#panel button:active, #sound-unlock:active { transform: translateY(1px); }

.panel-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-buttons button { flex: 1 1 54px; min-width: 42px; }
#gift-buttons button { flex: 1 1 130px; text-align: left; }
#panel-close { flex: none; }

#panel-status { min-height: 1.2em; margin: 0; color: #b9e9ff; font-size: 12px; }

#hint {
  position: fixed;
  z-index: 20;
  bottom: max(22dvh, calc(env(safe-area-inset-bottom) + 22dvh));
  left: max(12px, env(safe-area-inset-left));
  max-width: 45vw;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(139, 162, 210, .22);
  border-radius: 999px;
  background: rgba(8, 14, 33, .82);
  color: #b7c5e5;
  font-size: clamp(11px, 1.6cqw, 15px);
  font-weight: 650;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
  pointer-events: none;
}

#sound-unlock {
  position: fixed;
  z-index: 20;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(calc(22dvh + 54px), calc(env(safe-area-inset-bottom) + 22dvh + 54px));
  border-color: rgba(255, 214, 90, .42);
  background: rgba(35, 29, 19, .88);
  color: #fff0b0;
  font-size: clamp(11px, 1.6cqw, 15px);
}

body.is-obs #hint, body.is-obs #sound-unlock { display: none; }

.noscript-message {
  position: fixed;
  z-index: 200;
  top: 18%;
  left: 5%;
  width: 90%;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(255, 214, 90, .5);
  border-radius: 12px;
  background: #111a34;
  color: #fff1bd;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}

body[data-phase="intro"] #banner,
body[data-phase="intro"] #board { display: none; }

body[data-phase="show"] #title,
body[data-phase="shuffle"] #title,
body[data-phase="vote"] #title { opacity: .88; }

body[data-phase="shuffle"] #result .result-text { color: #bfeeff; }
body[data-phase="vote"] #result .result-text { color: #f6e7a4; }
body[data-phase="reveal"] #title,
body[data-phase="result"] #title { color: #fff1a1; }

body[data-phase="reveal"] #result .result-text,
body[data-phase="result"] #result .result-text {
  color: #fff2b2;
  text-shadow: 0 0 2cqw rgba(255, 214, 90, .38);
}

body[data-phase="reveal"] #ball { animation: ball-reveal-glow 1.1s ease-in-out infinite alternate; }
body[data-phase="result"] .cup.is-winner { animation: winner-bob 1.1s ease-in-out infinite alternate; }

body.is-lite #fx .fx-confetti,
body.is-lite #fx .fx-flash,
body.is-lite #fx .fx-zoom { display: none; }

body.is-lite *,
body.is-lite *::before,
body.is-lite *::after {
  backdrop-filter: none !important;
  filter: none;
  box-shadow: none;
}

body.is-lite #ball { box-shadow: 0 0 2cqw rgba(255, 214, 90, .65); }

body.is-lite #cups.is-zoom,
body.is-lite #table.is-zoom,
body.is-lite #stage.is-zoom #table { transform: none; }

body.studio-paused {
  outline: 4px solid #f59e0b;
  filter: grayscale(.35);
}

html.stream-clean #sound-unlock { display: none !important; }

@keyframes title-arrive {
  from { opacity: 0; transform: translateY(1.6cqw) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ball-drop {
  0% { opacity: 0; transform: translate(-50%, -180%) scale(.58); }
  62% { opacity: 1; transform: translate(-50%, -35%) scale(1.08); }
  82% { transform: translate(-50%, -56%) scale(.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ball-reveal-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.35) saturate(1.18); }
}

@keyframes winner-bob {
  from { filter: drop-shadow(0 0 1.2cqw rgba(255, 214, 90, .45)); }
  to { filter: drop-shadow(0 0 3cqw rgba(255, 214, 90, .95)); }
}

@keyframes cup-trail {
  from { opacity: .18; transform: translateX(-20%) scaleX(.75); }
  to { opacity: .75; transform: translateX(12%) scaleX(1.04); }
}

@keyframes confetti-drift {
  from { background-position: 2cqw -15cqw, 8cqw -9cqw, 15cqw -18cqw, 20cqw -12cqw; }
  to { background-position: 4cqw 22cqw, 11cqw 28cqw, 17cqw 19cqw, 24cqw 26cqw; }
}

@keyframes gold-flash {
  0% { opacity: .9; }
  100% { opacity: 0; }
}

@keyframes board-enter {
  from { opacity: 0; transform: translateY(2cqw) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 540px) {
  #panel {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(440px, calc(100vw - 16px));
    max-height: 74dvh;
    padding: 12px;
  }

  .panel-header {
    top: -12px;
    margin: -12px -12px 10px;
    padding: 11px 12px;
  }

  #hint { left: max(8px, env(safe-area-inset-left)); }
  #sound-unlock { right: max(8px, env(safe-area-inset-right)); }

  #round, #streak { font-size: 2.4cqw; letter-spacing: .06em; }
}

@media (orientation: landscape) {
  body { place-items: center; }

  #hint {
    left: calc(50% - var(--sw) / 2 + 12px);
    bottom: calc((100dvh - var(--sh)) / 2 + 22px);
    max-width: calc(var(--sw) * .42);
    font-size: 12px;
  }

  #sound-unlock {
    right: calc(50% - var(--sw) / 2 + 12px);
    bottom: calc((100dvh - var(--sh)) / 2 + 22px);
    font-size: 12px;
  }

  #panel { max-height: min(72dvh, var(--sh)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 80ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
  }

  body[data-phase="shuffle"] .cup::after { animation: none; opacity: .22; }
  body[data-phase="reveal"] #ball,
  body[data-phase="result"] .cup.is-winner { animation: none; }
}