:root {
  color-scheme: dark;
  --bg: #070611;
  --bg-soft: #100a25;
  --card: rgba(31, 25, 55, .88);
  --card-solid: #211a3d;
  --line: rgba(255, 255, 255, .14);
  --text: #fbf7ff;
  --muted: #c3b8e5;
  --gold: #ffd166;
  --gold2: #ff9f1c;
  --pink: #ef476f;
  --blue: #118ab2;
  --green: #06d6a0;
  --purple: #9b5de5;
  --shadow: 0 26px 80px rgba(0, 0, 0, .38);
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 209, 102, .20), transparent 26rem),
    radial-gradient(circle at 86% 0%, rgba(155, 93, 229, .22), transparent 30rem),
    linear-gradient(180deg, #120b2a 0%, #070611 64%);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow {
  margin: 0 0 .65rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 900;
  font-size: .75rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(280px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px clamp(18px, 4vw, 48px);
  background: rgba(7, 6, 17, .82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-kicker { color: var(--gold); font-weight: 950; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }
.brand-title { font-weight: 950; letter-spacing: -.04em; font-size: clamp(1.45rem, 2.4vw, 2.3rem); }
.nav-links { justify-self: center; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.06); }
.nav-links a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 17px; color: var(--muted); border-radius: 999px; font-weight: 850; }
.nav-links a.active, .nav-links a:hover { color: var(--text); background: rgba(255,255,255,.12); }
.top-actions { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }

.primary-button, .secondary-button, .ghost-button, .tiny-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 950;
  border-radius: 15px;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.primary-button:hover, .secondary-button:hover, .ghost-button:hover, .tiny-button:hover, .icon-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.primary-button { padding: 14px 18px; color: #1b102a; background: linear-gradient(135deg, var(--gold), var(--gold2)); box-shadow: 0 14px 34px rgba(255,159,28,.25); }
.primary-button.small { padding: 10px 14px; }
.secondary-button { padding: 14px 18px; color: var(--text); background: rgba(255,255,255,.09); border: 1px solid var(--line); }
.ghost-button { padding: 10px 14px; color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.tiny-button { padding: 7px 10px; font-size: .82rem; color: var(--text); background: rgba(255,255,255,.10); border: 1px solid var(--line); }
.icon-button { width: 38px; height: 38px; padding: 0; color: var(--text); background: rgba(255,255,255,.10); border: 1px solid var(--line); font-size: 1.25rem; }
.full { width: 100%; }
.profile-pill { max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.07); }
#profile-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
#watcher-pill { color: var(--gold); padding: 5px 8px; background: rgba(255,209,102,.12); border-radius: 999px; }

.spectate-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  display: none;
  padding: 13px 16px;
  border-radius: 999px;
  color: #1b102a;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow: var(--shadow);
  font-weight: 950;
  cursor: pointer;
}

.site-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 46px 0 74px; }
.view { display: none !important; }
.view.active { display: block !important; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr); gap: 28px; align-items: stretch; }
.hero-card, .login-card, .wheel-card, .status-card, .log-card, .game-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)), var(--card);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.hero-card { min-height: 430px; padding: clamp(34px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.hero-card h1, .wheel-card h1, .log-card h1 { margin: 0; font-size: clamp(2.65rem, 7vw, 5.65rem); line-height: .88; letter-spacing: -.07em; }
.intro { color: var(--muted); font-size: 1.08rem; line-height: 1.55; max-width: 720px; }
.intro.centered { margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.login-card { padding: 30px; }
.login-card h2, .status-card h2, .section-head h2 { margin: 0 0 10px; font-size: 2rem; letter-spacing: -.04em; }
.stack-form { display: grid; gap: 12px; margin-top: 18px; }
label { display: block; color: var(--muted); font-weight: 850; text-align: left; }
input { width: 100%; padding: 15px 16px; color: var(--text); border-radius: 15px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.24); outline: none; }
input:focus { border-color: rgba(255,209,102,.6); box-shadow: 0 0 0 4px rgba(255,209,102,.08); }
.message { min-height: 1.5rem; margin-top: 12px; font-weight: 850; color: var(--muted); }
.message.ok { color: var(--green); }
.message.error { color: var(--pink); }

.games-section { margin-top: 34px; }
.section-head { margin-bottom: 18px; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.game-card { display: block; min-height: 220px; padding: 25px; position: relative; overflow: hidden; }
.game-card::after { content: ""; position: absolute; inset: auto -30% -55% -30%; height: 150px; background: radial-gradient(circle, rgba(255,209,102,.20), transparent 70%); pointer-events: none; }
.game-icon { font-size: 2.4rem; }
.game-card h3 { margin: 18px 0 8px; font-size: 1.55rem; }
.game-card p { color: var(--muted); line-height: 1.45; }
.card-cta { display: inline-block; margin-top: 12px; color: var(--gold); font-weight: 950; }
.game-card.locked { opacity: .65; }

.game-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.status-card { padding: 24px; position: sticky; top: 104px; }
.stat-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); }
.stat-row strong { color: var(--text); }
.wheel-card { min-height: 620px; padding: clamp(26px, 5vw, 50px); text-align: center; }
.wheel-wrap { position: relative; width: min(370px, 80vw); aspect-ratio: 1; margin: 28px auto 28px; }
.pointer { position: absolute; top: -9px; 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, var(--purple) 144deg 180deg, var(--pink) 180deg 216deg, var(--gold) 216deg 252deg, var(--green) 252deg 288deg, var(--blue) 288deg 324deg, var(--purple) 324deg 360deg); box-shadow: inset 0 0 42px rgba(0,0,0,.4), 0 20px 70px rgba(0,0,0,.38); transition: transform 1.8s cubic-bezier(.14,.88,.18,1); position: relative; }
.wheel::after { content: "🎯"; font-size: 3.2rem; 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: 950; font-size: 1.35rem; text-shadow: 0 2px 4px rgba(0,0,0,.5); transform: rotate(calc((var(--i) - 1) * 36deg)) translateY(-142px) 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}
.spin-button { min-width: min(420px, 100%); }
.spectating-count { color: var(--gold); font-weight: 900; min-height: 1.4rem; }
.result { max-width: 580px; margin: 24px auto 0; padding: 18px; border-radius: 18px; border: 1px solid var(--line); }
.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; }
.balance { color: var(--gold); }

.spectate-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw); transform: translateX(105%); transition: transform .22s ease; background: rgba(13, 10, 28, .985); border-left: 1px solid var(--line); box-shadow: -24px 0 80px rgba(0,0,0,.45); z-index: 90; padding: 24px; overflow-y: auto; }
.spectate-sidebar.open { transform: translateX(0); }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.38); }
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sidebar-head h2 { margin: 0; font-size: 2rem; }
.sidebar-help { color: var(--muted); line-height: 1.45; }
.spectate-list { display: grid; gap: 10px; margin-top: 18px; }
.spectate-user { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line); text-align: left; box-shadow: none; cursor: pointer; }
.spectate-user:hover { background: rgba(255,255,255,.12); }
.spectate-user strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spectate-user small { display: block; color: var(--muted); margin-top: 3px; }
.spectate-user em { font-style: normal; color: var(--gold); font-weight: 950; flex: 0 0 auto; }

.login-dialog { width: min(500px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 26px; padding: 30px; background: rgba(24,20,43,.98); color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.login-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(5px); }
.dialog-close-form { position: absolute; top: 14px; right: 14px; }
.login-dialog h2 { margin: 0 0 8px; font-size: 2rem; }

.log-card { padding: clamp(26px, 5vw, 50px); }
.log-list { display: grid; gap: 12px; margin-top: 22px; }
.log-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.06); }
.log-entry div { min-width: 0; }
.log-entry strong { display: block; }
.log-entry span { display: block; color: var(--muted); font-size: .9rem; margin-top: 3px; }
.log-entry p { margin: 0; font-weight: 900; color: var(--gold); }
.log-entry em { color: var(--muted); font-style: normal; }

@media (max-width: 940px) {
  .topbar { grid-template-columns: 1fr; align-items: stretch; }
  .nav-links { justify-self: start; overflow-x: auto; max-width: 100%; }
  .top-actions { justify-self: start; justify-content: flex-start; flex-wrap: wrap; }
  .hero-grid, .game-layout { grid-template-columns: 1fr; }
  .status-card { position: static; }
  .game-grid { grid-template-columns: 1fr; }
  .spectate-float { display: inline-flex; }
}
@media (max-width: 540px) {
  .site-shell { width: min(100% - 20px, 1180px); padding-top: 24px; }
  .hero-card, .login-card, .wheel-card, .status-card, .log-card { border-radius: 22px; padding: 22px; }
  .hero-card { min-height: auto; }
  .hero-card h1, .wheel-card h1, .log-card h1 { font-size: 2.85rem; }
  .wheel span { transform: rotate(calc((var(--i) - 1) * 36deg)) translateY(-115px) rotate(calc((var(--i) - 1) * -36deg)); }
  .log-entry { align-items: flex-start; flex-direction: column; }
}


/* Roulette + Games update */
.roulette-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr); gap: 24px; align-items: start; }
.cardish, .roulette-table { background: linear-gradient(180deg, rgba(35,29,63,.94), rgba(18,14,35,.94)); border: 1px solid rgba(255,255,255,.14); border-radius: 30px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); }
.roulette-table { overflow: hidden; position: relative; }
.roulette-table::before { content: ""; position: absolute; inset: -120px -80px auto auto; width: 320px; height: 320px; border-radius: 999px; background: radial-gradient(circle, rgba(255,209,102,.20), transparent 68%); pointer-events: none; }
.roulette-stage { position: relative; display: grid; place-items: center; padding: clamp(18px,3vw,34px) 0 18px; }
.premium-roulette-wheel { --wheel-rotation: 0deg; position: relative; width: min(620px, 88vw); aspect-ratio: 1; border-radius: 50%; transform: rotate(var(--wheel-rotation)); transition: transform 6.6s cubic-bezier(.10,.72,.08,1); will-change: transform; filter: drop-shadow(0 34px 54px rgba(0,0,0,.52)); }
.premium-roulette-wheel.is-betting { animation: rouletteIdle 13s linear infinite; }
.premium-roulette-wheel.is-spinning { transition-duration: 7.8s; }
.roulette-track { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,0,0,.15) 55%, transparent 56%), conic-gradient(from -90deg, #0aa060 0deg 9.7297deg, #ab1824 9.7297deg 19.4594deg, #101014 19.4594deg 29.1891deg, #ab1824 29.1891deg 38.9188deg, #101014 38.9188deg 48.6485deg, #ab1824 48.6485deg 58.3782deg, #101014 58.3782deg 68.1079deg, #ab1824 68.1079deg 77.8376deg, #101014 77.8376deg 87.5673deg, #ab1824 87.5673deg 97.297deg, #101014 97.297deg 107.0267deg, #101014 107.0267deg 116.7564deg, #ab1824 116.7564deg 126.4861deg, #101014 126.4861deg 136.2158deg, #ab1824 136.2158deg 145.9455deg, #101014 145.9455deg 155.6752deg, #ab1824 155.6752deg 165.4049deg, #101014 165.4049deg 175.1346deg, #ab1824 175.1346deg 184.8643deg, #ab1824 184.8643deg 194.594deg, #101014 194.594deg 204.3237deg, #ab1824 204.3237deg 214.0534deg, #101014 214.0534deg 223.7831deg, #ab1824 223.7831deg 233.5128deg, #101014 233.5128deg 243.2425deg, #ab1824 243.2425deg 252.9722deg, #101014 252.9722deg 262.7019deg, #ab1824 262.7019deg 272.4316deg, #101014 272.4316deg 282.1613deg, #101014 282.1613deg 291.891deg, #ab1824 291.891deg 301.6207deg, #101014 301.6207deg 311.3504deg, #ab1824 311.3504deg 321.0801deg, #101014 321.0801deg 330.8098deg, #ab1824 330.8098deg 340.5395deg, #101014 340.5395deg 350.2692deg, #ab1824 350.2692deg 360deg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.10), inset 0 0 0 16px rgba(0,0,0,.34), inset 0 0 70px rgba(0,0,0,.78); }
.roulette-metal-ring { position: absolute; inset: -2%; border-radius: 50%; background: radial-gradient(circle, transparent 64%, rgba(255,255,255,.24) 65%, rgba(255,209,102,.56) 66.2%, #5b4520 68%, #121219 72%, transparent 73%); box-shadow: inset 0 0 22px rgba(255,255,255,.16); pointer-events: none; }
.roulette-bowl { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 50% 44%, #31220f 0 12%, #8e6325 13% 17%, #24180c 18% 31%, #0c0c10 32% 63%, rgba(255,255,255,.08) 64%, transparent 66%); box-shadow: inset 0 0 52px rgba(0,0,0,.88), 0 0 0 1px rgba(255,255,255,.10); }
.roulette-pocket-ring { position: absolute; inset: 5.5%; border-radius: 50%; pointer-events: none; }
.roulette-pocket-ring span { position: absolute; left: 50%; top: 50%; width: 38px; height: 24px; margin: -12px 0 0 -19px; transform: rotate(var(--angle)) translateY(calc(-1 * min(262px, 37vw))) rotate(calc(-1 * var(--angle))); display: grid; place-items: center; font-weight: 950; font-size: clamp(.60rem, 1.35vw, .86rem); line-height: 1; color: #fff; text-shadow: 0 1px 4px #000; border-radius: 6px; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.roulette-pocket-ring span.red { color: #ffd7d7; }
.roulette-pocket-ring span.black { color: #f4f4f7; }
.roulette-pocket-ring span.green { color: #caffdf; }
.roulette-inner-ring { position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff8d4 0 5%, #d7a84e 6% 11%, #5f421c 12% 22%, #141318 23% 61%, #09090c 62%); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 40px rgba(0,0,0,.75), 0 0 28px rgba(255,209,102,.08); }
.roulette-hub { position: absolute; inset: 39%; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.16), rgba(255,255,255,.04) 32%, rgba(0,0,0,.56) 70%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 26px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.16); transform: rotate(calc(-1 * var(--wheel-rotation))); transition: transform 6.6s cubic-bezier(.10,.72,.08,1); }
.roulette-hub span { font-size: clamp(3rem, 9vw, 6.3rem); font-weight: 950; line-height: .9; color: #fff; text-shadow: 0 10px 28px rgba(0,0,0,.64); }
.roulette-hub small { color: var(--gold); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.58rem, 1.2vw, .78rem); }
.roulette-ball { --ball-rotation: 28deg; position: absolute; left: 50%; top: 50%; width: clamp(18px, 3vw, 26px); height: clamp(18px, 3vw, 26px); margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 22%, #d8d8d8 43%, #8f8f8f 70%, #fff 100%); box-shadow: 0 7px 18px rgba(0,0,0,.62), inset -4px -5px 8px rgba(0,0,0,.26); transform: rotate(var(--ball-rotation)) translateY(calc(-1 * min(234px, 33vw))); transition: transform 7.8s cubic-bezier(.12,.84,.07,1); z-index: 6; }
.premium-roulette-wheel.is-betting .roulette-ball { animation: ballOrbit 1.4s linear infinite; }
.roulette-pointer { position: absolute; top: 10px; z-index: 8; width: 54px; height: 64px; display: grid; place-items: start center; filter: drop-shadow(0 12px 16px rgba(0,0,0,.48)); }
.roulette-pointer span { width: 0; height: 0; border-left: 19px solid transparent; border-right: 19px solid transparent; border-top: 46px solid var(--gold); }
.roulette-status-strip { width: min(660px, 100%); margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.roulette-status-strip div { padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.07); }
.roulette-status-strip span { display: block; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.roulette-status-strip strong { display: block; margin-top: 4px; font-size: 1rem; }
.roulette-actions { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.bet-panel { margin-top: 24px; display: grid; gap: 18px; }
.stake-row { display: grid; gap: 10px; }
.stake-row label { font-weight: 900; }
.stake-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.stake-buttons button { cursor: pointer; color: #1b102a; background: linear-gradient(135deg, var(--gold), var(--gold2)); border-radius: 999px; padding: 8px 12px; font-weight: 950; }
.bet-panel input[type=range] { width: 100%; accent-color: var(--gold); }
.quick-bets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-bets button, .number-bet button { cursor: pointer; color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); border: 1px solid var(--line); border-radius: 16px; padding: 13px 12px; font-weight: 950; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.quick-bets button span, .number-bet button span { color: var(--gold); }
.quick-bets button:hover, .number-bet button:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.quick-bets .red-bet { background: linear-gradient(135deg, rgba(171,24,36,.92), rgba(83,12,20,.90)); }
.quick-bets .black-bet { background: linear-gradient(135deg, rgba(20,20,24,.95), rgba(0,0,0,.88)); }
.number-bet { display: flex; gap: 10px; }
.number-bet input { max-width: 120px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.08); }
.roulette-side { display: grid; gap: 18px; }
.feed { max-height: 300px; overflow-y: auto; display: grid; gap: 10px; padding-right: 6px; }
.chat-feed { max-height: 260px; }
.feed-row { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 4px; }
.feed-row span { color: var(--muted); }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); }
.small-note { font-size: .86rem; margin-bottom: 0; }
@keyframes rouletteIdle { from { transform: rotate(var(--wheel-rotation)); } to { transform: rotate(calc(var(--wheel-rotation) + 360deg)); } }
@keyframes ballOrbit { from { transform: rotate(var(--ball-rotation)) translateY(calc(-1 * min(234px, 33vw))); } to { transform: rotate(calc(var(--ball-rotation) - 360deg)) translateY(calc(-1 * min(234px, 33vw))); } }
@media (max-width: 940px) { .roulette-layout { grid-template-columns: 1fr; } .quick-bets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roulette-status-strip { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .roulette-pocket-ring span { transform: rotate(var(--angle)) translateY(-40vw) rotate(calc(-1 * var(--angle))); width: 28px; font-size: .58rem; } .roulette-ball { transform: rotate(var(--ball-rotation)) translateY(-36vw); } .number-bet { flex-direction: column; } .number-bet input { max-width: none; } }

/* Final roulette layout refinements */
.roulette-table { text-align: center; }
.roulette-state-banner {
  width: min(660px, 100%);
  margin: 18px auto 10px;
  padding: 13px 18px;
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.25);
}
.roulette-state-banner.open { color: #021910; background: linear-gradient(135deg, #41f7a9, #06d6a0); }
.roulette-state-banner.closed { color: #fff; background: linear-gradient(135deg, #d62335, #7a0e18); }
.roulette-actions.top-bribe { margin: 12px auto 8px; justify-content: center; }
.roulette-stage { justify-items: center; place-items: center; padding: 18px 0 18px; overflow: visible; }
.premium-roulette-wheel {
  --ball-radius: min(198px, 30vw);
  width: min(520px, 78vw);
  margin: 0 auto;
  transform-origin: 50% 50%;
}
.premium-roulette-wheel.is-betting { animation: none; }
.premium-roulette-wheel.idle-tick { animation: rouletteIdleTick 3.8s cubic-bezier(.18,.72,.12,1) 1; }
.roulette-pocket-ring span { transform: rotate(var(--angle)) translateY(calc(-1 * min(222px, 34vw))) rotate(calc(-1 * var(--angle))); }
.roulette-ball { transform: rotate(var(--ball-rotation)) translateY(calc(-1 * var(--ball-radius))); }
.premium-roulette-wheel.is-betting .roulette-ball { animation: none; }
.roulette-hub span { font-size: clamp(2.7rem, 7vw, 5.3rem); }
.roulette-pointer { top: 6px; left: 50%; transform: translateX(-50%); }
.roulette-status-strip { width: min(660px, 100%); margin-left: auto; margin-right: auto; }
.log-entry.log-win p { color: var(--green); }
.log-entry.log-loss p { color: var(--pink); }
@keyframes rouletteIdleTick { from { transform: rotate(var(--wheel-rotation)); } to { transform: rotate(calc(var(--wheel-rotation) + 360deg)); } }
@media (max-width: 540px) {
  .premium-roulette-wheel { --ball-radius: 35vw; width: min(92vw, 520px); }
  .roulette-pocket-ring span { transform: rotate(var(--angle)) translateY(-39vw) rotate(calc(-1 * var(--angle))); }
}


/* Stats page */
.stats-shell { display: grid; gap: 24px; }
.stats-hero, .stats-panel { padding: clamp(24px, 4vw, 42px); }
.stats-hero h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .9; letter-spacing: -.07em; }
.stats-live-panel { order: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stats-toggle-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; flex-wrap: wrap; }
.stats-period-toggle { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.06); }
.stats-period-toggle button { cursor: pointer; border: 0; border-radius: 999px; padding: 10px 15px; color: var(--muted); background: transparent; font-weight: 950; }
.stats-period-toggle button.active, .stats-period-toggle button:hover { color: var(--text); background: rgba(255,255,255,.13); }
.stat-tile { min-height: 126px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.stat-tile > span:first-child { color: var(--muted); font-weight: 900; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.stat-tile strong { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.04em; }
.stat-tile span:not(:first-child) { color: var(--muted); font-weight: 750; }
.current-stats .stat-tile { min-height: 112px; }
@media (max-width: 1050px){ .stats-toggle-head { align-items: stretch; } .stats-period-toggle { width: 100%; justify-content: center; } }

/* Stats toggle refinements */
.stats-toggle-head { align-items: flex-start; }
.stats-period-toggle { display: flex; align-items: center; gap: 8px; width: auto; padding: 7px; border-radius: 18px; }
.stats-period-toggle button { appearance: none; min-width: 92px; border: 1px solid transparent; border-radius: 14px; }
.stats-period-toggle button.active { color: #1b102a; background: linear-gradient(135deg, var(--gold), var(--gold2)); }
.stat-tile span:nth-child(3) { color: var(--text); font-weight: 900; }
@media (max-width: 700px){ .stats-period-toggle { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 18px; } .stats-period-toggle button { min-width: 0; padding-left: 8px; padding-right: 8px; } }