:root { color-scheme: dark; --bg:#090816; --card:#15122b; --text:#f6f1ff; --muted:#b9acd8; --gold:#ffd166; --pink:#ef476f; --blue:#118ab2; --green:#06d6a0; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top, #37256b 0, var(--bg) 55%); color:var(--text); }
.page { min-height:100vh; display:grid; place-items:center; padding:32px 16px; }
.card { width:min(760px, 100%); padding:36px; border:1px solid rgba(255,255,255,.12); border-radius:28px; background:linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), var(--card); box-shadow:0 30px 100px rgba(0,0,0,.45); text-align:center; }
.eyebrow { margin:0; color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:.78rem; }
h1 { margin:.2em 0; font-size:clamp(2.5rem, 8vw, 5.8rem); line-height:.9; }
.intro { max-width:620px; margin:0 auto 28px; color:var(--muted); font-size:1.08rem; }
.wheel-wrap { position:relative; width:min(340px, 82vw); aspect-ratio:1; margin:22px auto 30px; }
.pointer { position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-top:34px solid var(--gold); z-index:2; filter:drop-shadow(0 4px 2px rgba(0,0,0,.35)); }
.wheel { width:100%; height:100%; border-radius:50%; display:grid; place-items:center; border:10px solid rgba(255,255,255,.12); background: conic-gradient(var(--pink) 0 36deg, var(--gold) 36deg 72deg, var(--green) 72deg 108deg, var(--blue) 108deg 144deg, #9b5de5 144deg 180deg, var(--pink) 180deg 216deg, var(--gold) 216deg 252deg, var(--green) 252deg 288deg, var(--blue) 288deg 324deg, #9b5de5 324deg 360deg); box-shadow: inset 0 0 40px rgba(0,0,0,.38), 0 18px 60px rgba(0,0,0,.35); transition: transform 1.8s cubic-bezier(.14,.88,.18,1); position:relative; }
.wheel::after { content:"🎡"; font-size:4rem; width:35%; height:35%; border-radius:50%; display:grid; place-items:center; background:#17142d; border:6px solid rgba(255,255,255,.18); }
.wheel span { position:absolute; font-weight:900; font-size:1.35rem; text-shadow:0 2px 4px rgba(0,0,0,.5); transform: rotate(calc((var(--i) - 1) * 36deg)) translateY(-130px) rotate(calc((var(--i) - 1) * -36deg)); }
.wheel span:nth-child(1){--i:1}.wheel span:nth-child(2){--i:2}.wheel span:nth-child(3){--i:3}.wheel span:nth-child(4){--i:4}.wheel span:nth-child(5){--i:5}.wheel span:nth-child(6){--i:6}.wheel span:nth-child(7){--i:7}.wheel span:nth-child(8){--i:8}.wheel span:nth-child(9){--i:9}.wheel span:nth-child(10){--i:10}
form { display:grid; gap:12px; max-width:460px; margin:0 auto; }
label { text-align:left; color:var(--muted); font-weight:700; }
input { width:100%; padding:16px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:var(--text); font-size:1rem; outline:none; }
button { border:0; border-radius:16px; padding:16px 20px; background:linear-gradient(135deg, var(--gold), #ff9f1c); color:#1b102a; font-weight:900; font-size:1.05rem; cursor:pointer; box-shadow:0 10px 30px rgba(255,209,102,.24); }
.result { max-width:520px; margin:24px auto 0; padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.14); }
.result.win { background:rgba(6,214,160,.14); }
.result.error { background:rgba(239,71,111,.14); }
.result h2 { margin:0 0 6px; }
.result p { margin:6px 0; color:var(--text); }
.balance { color:var(--gold) !important; }
@media (max-width: 480px) { .card { padding:24px 18px; } .wheel span { transform: rotate(calc((var(--i) - 1) * 36deg)) translateY(-105px) rotate(calc((var(--i) - 1) * -36deg)); } }
.hidden { display: none; }
.muted { color: var(--muted); }
.spectate-toggle { position: fixed; top: 18px; right: 18px; z-index: 20; padding: 12px 16px; border-radius: 999px; }
.spectate-sidebar { position: fixed; inset: 0 0 0 auto; width: min(360px, 92vw); transform: translateX(105%); transition: transform .22s ease; background: rgba(16, 13, 34, .98); border-left: 1px solid rgba(255,255,255,.14); box-shadow: -24px 0 80px rgba(0,0,0,.45); z-index: 30; padding: 22px; overflow-y: auto; }
.spectate-sidebar.open { transform: translateX(0); }
.sidebar-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.sidebar-head h2 { margin:.2em 0 0; }
.icon-button { width:38px; height:38px; border-radius:50%; padding:0; display:grid; place-items:center; font-size:1.5rem; }
.sidebar-help { color: var(--muted); margin: 16px 0; }
.spectate-list { display:grid; gap:10px; }
.spectate-user { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.08); color:var(--text); box-shadow:none; text-align:left; }
.spectate-user:hover { background:rgba(255,255,255,.13); }
.user-name { font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-state { color:var(--gold); font-weight:900; flex:0 0 auto; }
@media (max-width: 480px) { .spectate-toggle { top: 10px; right: 10px; padding: 10px 12px; } }

.spectator-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 209, 102, .16);
  border: 1px solid rgba(255, 209, 102, .42);
  color: var(--gold);
  font-weight: 900;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.spectating-count {
  margin: -14px auto 18px;
  color: var(--gold);
  font-weight: 800;
  min-height: 1.4em;
}

.session-panel { max-width:520px; margin:18px auto 8px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(0,0,0,.24); text-align:left; }
.session-panel strong { display:block; color:var(--text); }
.session-panel span { color:var(--muted); font-size:.92rem; }
.spin-pill { white-space:nowrap; padding:10px 14px; border-radius:999px; background:linear-gradient(135deg, var(--gold), #ff9f1c); color:#1b102a; font-weight:900; box-shadow:0 10px 30px rgba(255,209,102,.18); }
.spin-button { display:block; width:min(460px, 100%); margin:12px auto 0; }
.logout-button { display:block; width:min(460px, 100%); margin:10px auto 0; background:rgba(255,255,255,.10); color:var(--text); box-shadow:none; border:1px solid rgba(255,255,255,.16); }
.hidden { display:none !important; }
@media (max-width:560px) { .session-panel { flex-direction:column; align-items:stretch; text-align:center; } .spin-pill { text-align:center; } }