:root{
  --bg:#07061a;
  --bg-2:#150d33;
  --ink:#eae7ff;
  --muted:#9d97c4;
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.045);
  --glow:#7c5cff;
  --no:#ff5f6d;
  --maybe:#ffb340;
  --yes:#3ddc97;
  --shadow:0 30px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
/* Author display rules below would otherwise beat the UA stylesheet's
   [hidden]{display:none}, leaving empty boxes on the page. */
[hidden]{display:none !important}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 50% -10%, #2a1c66 0%, transparent 60%),
    radial-gradient(800px 600px at 12% 100%, #1b1147 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.stars{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 14%, #dfd7ff, transparent),
    radial-gradient(1.2px 1.2px at 33% 71%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 64% 58%, #cbbcff, transparent),
    radial-gradient(1.2px 1.2px at 88% 79%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 45% 33%, #efe9ff, transparent),
    radial-gradient(1.2px 1.2px at 6% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 95% 41%, #d8ccff, transparent);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.30}to{opacity:.7}}

.wrap{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto;
  padding:clamp(28px,6vw,64px) 20px 56px;
  display:flex; flex-direction:column; align-items:center; gap:clamp(20px,4vw,34px);
  text-align:center;
}

.head{display:grid; gap:10px}
.kicker{
  margin:0; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:#b6a6ff; font-weight:700;
}
h1{
  margin:0; font-size:clamp(28px,7vw,44px); line-height:1.1; font-weight:800;
  letter-spacing:-.02em; text-wrap:balance;
}
.sub{margin:0; color:var(--muted); font-size:15px}

/* ---------- the ball ---------- */
.ball-stage{display:grid; justify-items:center; gap:16px}

.ball{
  --size:clamp(230px,68vw,300px);
  position:relative;
  width:var(--size); height:var(--size);
  border:0; padding:0; cursor:pointer;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, #4b4b5c 0%, #1a1a24 38%, #0a0a10 70%, #05050a 100%);
  box-shadow:
    var(--shadow),
    inset -18px -24px 60px rgba(0,0,0,.85),
    inset 12px 14px 40px rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 70px -18px var(--glow);
  display:grid; place-items:center;
  transition:box-shadow .45s ease, transform .2s ease;
  animation:float 6s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.ball:focus-visible{outline:3px solid #b6a6ff; outline-offset:6px}
.ball:hover{transform:translateY(-4px)}
.ball[data-verdict="no"]{--glow:var(--no)}
.ball[data-verdict="maybe"]{--glow:var(--maybe)}
.ball[data-verdict="yes"]{--glow:var(--yes)}
.ball[data-verdict]{box-shadow:
    var(--shadow),
    inset -18px -24px 60px rgba(0,0,0,.85),
    inset 12px 14px 40px rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 110px -10px var(--glow);}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.ball-gloss{
  position:absolute; top:9%; left:16%; width:44%; height:28%;
  border-radius:50%;
  background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  filter:blur(6px); pointer-events:none;
}

.window{
  position:relative;
  width:58%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #ffffff, #e7e4f5 60%, #c9c4e0 100%);
  box-shadow:inset 0 6px 18px rgba(0,0,0,.28), 0 0 0 6px rgba(0,0,0,.35);
  display:grid; place-items:center; overflow:hidden;
}

.triangle{
  position:relative;
  width:84%; aspect-ratio:1/.88;
  clip-path:polygon(50% 4%, 96% 94%, 4% 94%);
  background:linear-gradient(180deg,#3a2f8f,#151046);
  display:grid; place-items:center;
  transition:opacity .35s ease;
}
.triangle-text{
  display:block;
  width:74%;
  padding-top:30%;
  color:#fff;
  font-weight:800;
  font-size:clamp(13px,4.2vw,20px);
  line-height:1.12;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  word-break:break-word;
}

/* shake + reveal */
.ball.shaking{animation:shake .62s cubic-bezier(.36,.07,.19,.97) both}
.ball.shaking .triangle{opacity:0}
@keyframes shake{
  10%,90%{transform:translate(-3px,1px) rotate(-2deg)}
  20%,80%{transform:translate(6px,-3px) rotate(3deg)}
  30%,50%,70%{transform:translate(-9px,4px) rotate(-4deg)}
  40%,60%{transform:translate(9px,-4px) rotate(4deg)}
}
.triangle.revealing{animation:reveal .7s ease both}
@keyframes reveal{
  0%{opacity:0; transform:scale(.72) rotate(-8deg); filter:blur(6px)}
  100%{opacity:1; transform:none; filter:none}
}

.hint{margin:0; color:var(--muted); font-size:13px; letter-spacing:.06em; text-transform:uppercase}

/* ---------- verdict ---------- */
.verdict-card{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px 20px 18px;
  backdrop-filter:blur(10px);
  display:grid; gap:12px; justify-items:center;
  animation:rise .5s ease both;
}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.verdict-badge{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  color:#0d0a20; background:var(--no);
}
.verdict-badge[data-verdict="maybe"]{background:var(--maybe)}
.verdict-badge[data-verdict="yes"]{background:var(--yes)}

.verdict-text{
  margin:0; font-size:clamp(17px,4.4vw,21px); line-height:1.45; font-weight:600;
  text-wrap:pretty;
}

.verdict-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{
  appearance:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  font:inherit; font-size:14px; font-weight:600;
  padding:9px 16px; border-radius:999px;
  transition:background .2s ease, transform .15s ease, border-color .2s ease;
}
.btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3)}
.btn:active{transform:scale(.97)}
.copied{font-size:13px; color:var(--yes); min-height:1em}

/* ---------- stats ---------- */
.stats{
  width:100%;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
}
.stat{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px 12px;
  display:grid; gap:6px; align-content:center;
}
.stat-num{
  font-size:clamp(22px,6vw,30px); font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat-label{font-size:12px; color:var(--muted); line-height:1.35}

@media (max-width:420px){
  .stats{grid-template-columns:1fr}
}

/* ---------- live steam status ---------- */
.live{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(61,220,151,.35);
  background:linear-gradient(180deg, rgba(61,220,151,.16), rgba(61,220,151,.06));
  color:#c9ffe6; font-size:14.5px; font-weight:600; line-height:1.4;
  animation:rise .5s ease both;
}
.live-dot{
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--yes); box-shadow:0 0 0 0 rgba(61,220,151,.6);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}
  70%{box-shadow:0 0 0 12px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}
.live.is-idle{
  border-color:rgba(255,255,255,.12);
  background:var(--card);
  color:var(--muted);
  font-weight:500;
}
.live.is-idle .live-dot{background:#6f699a; animation:none; box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .ball,.stars,.triangle,.verdict-card{animation:none !important}
  .ball.shaking{animation:none}
}