:root {
  --bg: #04130f;
  --bg2: #08261d;
  --panel: rgba(8, 39, 29, .70);
  --panel-strong: rgba(6, 31, 24, .93);
  --line: rgba(214, 255, 229, .12);
  --text: #f7fff9;
  --muted: #9fbbb0;
  --green: #45f190;
  --green2: #16b868;
  --gold: #ffd969;
  --gold2: #dca72c;
  --red: #ff4a58;
  --blue: #64b8ff;
  --shadow: 0 24px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(37, 182, 107, .26), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(255, 217, 105, .13), transparent 30%),
    linear-gradient(145deg, #03100d 0%, #062319 52%, #03100d 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(255,217,105,.72); outline-offset: 3px; }

.ambient { position: fixed; border-radius: 999px; filter: blur(80px); opacity: .28; pointer-events: none; }
.ambient-a { width: 420px; height: 420px; background: #23d374; top: 8%; left: -180px; }
.ambient-b { width: 380px; height: 380px; background: #ffcf50; right: -200px; top: 38%; opacity: .13; }
.clover-field span { position: fixed; color: rgba(86, 255, 151, .06); font-size: 70px; pointer-events: none; animation: float 14s ease-in-out infinite; }
.clover-field span:nth-child(1) { left: 4%; top: 22%; }
.clover-field span:nth-child(2) { left: 32%; top: 68%; animation-delay: -5s; }
.clover-field span:nth-child(3) { right: 6%; top: 15%; animation-delay: -9s; }
.clover-field span:nth-child(4) { right: 12%; top: 73%; animation-delay: -3s; }
.clover-field span:nth-child(5) { left: 68%; top: 49%; animation-delay: -7s; }
.clover-field span:nth-child(6) { left: 12%; top: 85%; animation-delay: -11s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-24px) rotate(8deg); } }

.glass, .glass-strong {
  background: linear-gradient(145deg, rgba(12, 53, 39, .78), rgba(4, 24, 19, .72));
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.glass-strong { background: linear-gradient(145deg, rgba(10, 51, 37, .97), rgba(3, 24, 18, .98)); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 82px; padding: 10px clamp(16px, 3vw, 42px);
  border-width: 0 0 1px; box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.brand-wrap { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 76px; height: 62px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(0,0,0,.35)); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 18px; letter-spacing: .2px; }
.brand-copy span { color: var(--muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.stat-chip { display: grid; min-width: 72px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.stat-chip span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; }
.stat-chip strong { font-size: 16px; color: var(--gold); }
.icon-btn { width: 42px; height: 42px; border: 1px solid var(--line); color: #fff; background: rgba(255,255,255,.045); border-radius: 13px; cursor: pointer; transition: .2s ease; }
.icon-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.085); }

.app-shell { width: min(1480px, calc(100% - 28px)); margin: 22px auto 64px; }
.hero { border-radius: 26px; min-height: 210px; padding: clamp(24px,4vw,46px); display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.hero::after { content:""; position:absolute; width:420px; height:420px; right:-80px; top:-100px; border:1px solid rgba(255,217,105,.18); border-radius:50%; box-shadow: 0 0 0 52px rgba(255,217,105,.035), 0 0 0 104px rgba(66,240,143,.025); }
.hero-copy { max-width: 760px; position: relative; z-index: 2; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.hero h1 { font-size: clamp(32px, 4.7vw, 64px); line-height: .98; margin: 9px 0 16px; letter-spacing: -2px; }
.hero h1 em { color: var(--green); font-style: normal; text-shadow: 0 0 28px rgba(69,241,144,.18); }
.hero p { color: #c2d7cf; max-width: 700px; line-height: 1.6; margin: 0; }
.hero-badge { position: relative; z-index: 3; width: 150px; height: 150px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, #70ffab, #15955d 55%, #073d2a 100%); border: 4px solid rgba(255,217,105,.82); box-shadow: 0 18px 38px rgba(0,0,0,.4), inset 0 4px 12px rgba(255,255,255,.28), 0 0 36px rgba(60,241,139,.18); transform: rotate(4deg); }
.hero-badge .badge-core { font-size: 50px; filter: drop-shadow(0 5px 4px rgba(0,0,0,.25)); transform: translateY(-10px); }
.hero-badge > span { position:absolute; bottom:27px; font-size:24px; font-weight:900; color:#fff; }
.hero-badge small { position:absolute; bottom:14px; font-size:8px; letter-spacing:1.6px; font-weight:800; color:#d7ffe6; }
.badge-orbit { position:absolute; inset:-12px; border:1px dashed rgba(255,217,105,.52); border-radius:50%; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.setup { margin-top: 18px; padding: 22px; border-radius: 22px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-title h2, .section-title h3 { margin: 3px 0 0; }
.section-title h2 { font-size: 22px; }
.section-title h3 { font-size: 17px; }
.section-title.compact { margin-bottom: 12px; }
.rule-mini { color: var(--muted); font-size: 12px; }
.selector-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selector-label { color: #d4e7df; font-weight: 700; font-size: 13px; }
.segmented { display: flex; padding: 4px; border: 1px solid var(--line); background: rgba(0,0,0,.18); border-radius: 15px; }
.segmented button { width: 43px; height: 37px; border:0; border-radius: 11px; color:#c8dcd4; background:transparent; cursor:pointer; font-weight:800; transition:.2s; }
.segmented button.active { color:#062718; background: linear-gradient(145deg, #79ffae, #38cf7b); box-shadow: 0 5px 20px rgba(53,222,126,.25); }
.btn { border: 1px solid transparent; border-radius: 14px; min-height: 46px; padding: 0 18px; font-weight: 800; letter-spacing: .15px; cursor: pointer; transition: transform .18s ease, filter .18s ease, opacity .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:disabled { opacity:.48; cursor:not-allowed; transform:none; }
.btn-primary { color:#092216; background: linear-gradient(145deg, #ffe994, #f3bd37); box-shadow: 0 11px 28px rgba(242,187,52,.20), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-ghost { color:#eafff2; background:rgba(255,255,255,.05); border-color:var(--line); }
.btn-wide { width: 100%; margin-top: 18px; }

.game-layout { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 324px; gap: 18px; align-items:start; }
.play-column { min-width: 0; display:grid; gap:18px; align-content:start; }
.side-column { display:grid; align-content:start; gap:12px; }
.draw-stage, .cards-panel, .ai-panel, .number-board { border-radius:22px; padding:22px; }
.side-column .draw-stage { position:sticky; top:94px; z-index:22; }
.side-column .draw-stage .machine-scene { height: 222px; margin:-8px 0 -4px; }
.side-column .draw-stage .machine { transform:scale(.73) rotateX(2deg); }
.side-column .draw-stage .prize-track { grid-template-columns:repeat(3,1fr); gap:6px; }
.side-column .draw-stage .prize-card { min-height:50px; padding:8px 7px; display:grid; place-items:center; text-align:center; gap:2px; }
.side-column .draw-stage .prize-card span { font-size:8px; }
.side-column .draw-stage .prize-card strong { font-size:9px; }
.side-column .draw-stage .history-wrap { margin-top:10px; }
.side-column .draw-stage .history-label { margin-bottom:6px; }
.side-column .draw-stage .ball-history { min-height:34px; gap:5px; flex-wrap:nowrap; overflow:hidden; }
.side-column .draw-stage .history-ball { width:31px; height:31px; flex:0 0 31px; font-size:9px; }
.draw-title { margin-bottom: 0; }
.draw-counter { display:flex; align-items:baseline; gap:4px; color:var(--muted); }
.draw-counter strong { font-size:30px; color:var(--gold); }
.draw-counter span { font-size:12px; }

.machine-scene { height: 320px; display:grid; place-items:center; perspective:1000px; position:relative; overflow:hidden; }
.machine-scene::before { content:""; position:absolute; width:520px; height:140px; left:50%; bottom:3px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(35,224,120,.18), transparent 66%); filter:blur(8px); }
.machine { width:260px; height:290px; position:relative; transform-style:preserve-3d; transform:rotateX(2deg); }
.machine-top { position:absolute; left:91px; top:2px; width:78px; height:28px; border-radius:22px 22px 8px 8px; background:linear-gradient(#ffe98a,#bd8115); border:2px solid #6f4812; box-shadow:inset 0 4px 4px rgba(255,255,255,.55); }
.machine-dome { position:absolute; left:35px; top:23px; width:190px; height:156px; border-radius:50% 50% 38% 38% / 58% 58% 42% 42%; background:linear-gradient(150deg, rgba(194,255,221,.18), rgba(6,63,42,.18)); border:5px solid #d8b245; box-shadow:inset 18px 8px 26px rgba(255,255,255,.08), inset -16px -12px 24px rgba(0,0,0,.28), 0 16px 35px rgba(0,0,0,.32); overflow:hidden; backdrop-filter:blur(4px); }
.machine-dome::after { content:""; position:absolute; inset:10px 24px auto 24px; height:46px; border-radius:50%; background:linear-gradient(rgba(255,255,255,.18),transparent); transform:rotate(-8deg); }
.swirl { position:absolute; inset:30px; border-radius:50%; border:2px dashed rgba(88,255,159,.25); animation:spin 3.4s linear infinite; }
.swirl-2 { inset:48px; animation-direction:reverse; animation-duration:2.8s; border-color:rgba(255,215,97,.22); }
.mini-ball { position:absolute; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#0e231a; font-size:10px; font-weight:900; background:radial-gradient(circle at 34% 28%, #fff, #ffe66f 25%, #e5a523 66%, #8b5b08 100%); border:1px solid rgba(255,255,255,.6); box-shadow:inset -4px -6px 8px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.18); animation:jiggle 1.6s ease-in-out infinite alternate; }
.mb1{left:33px;top:46px}.mb2{left:76px;top:86px;animation-delay:-.8s}.mb3{left:120px;top:34px;animation-delay:-1.1s}.mb4{left:133px;top:93px;animation-delay:-.4s}.mb5{left:54px;top:20px;animation-delay:-1.4s}
@keyframes jiggle { to { transform:translate(8px,-11px) rotate(18deg); } }
.machine-neck { position:absolute; left:103px; top:168px; width:54px; height:44px; background:linear-gradient(90deg,#9d6c18,#f9d765,#9a6817); border:2px solid #6c4712; }
.current-ball-wrap { position:absolute; left:84px; top:174px; width:92px; height:92px; display:grid; place-items:center; z-index:5; }
.current-ball { width:78px; height:78px; border-radius:50%; display:grid; place-items:center; position:relative; color:#102318; font-size:25px; font-weight:950; background:radial-gradient(circle at 31% 24%, #fff 0 11%, #fff7c3 12%, #ffdc5b 34%, #e49b19 68%, #89510b 100%); border:3px solid rgba(255,255,255,.72); box-shadow:inset -9px -11px 15px rgba(76,42,0,.3), inset 7px 7px 12px rgba(255,255,255,.25), 0 15px 25px rgba(0,0,0,.45); transform-style:preserve-3d; }
.current-ball::after { content:""; position:absolute; inset:16px; border-radius:50%; background:rgba(255,255,255,.93); border:2px solid rgba(124,91,17,.24); box-shadow:inset 0 2px 5px rgba(0,0,0,.1); z-index:-1; }
.current-ball.idle { color:#129654; }
.current-ball.pop { animation:ballPop .68s cubic-bezier(.12,.9,.25,1.25); }
@keyframes ballPop { 0%{transform:translateY(-55px) scale(.4) rotate(-120deg);opacity:.15} 60%{transform:translateY(7px) scale(1.12) rotate(10deg)} 100%{transform:translateY(0) scale(1) rotate(0)} }
.ball-shadow { position:absolute; width:60px; height:15px; bottom:-4px; border-radius:50%; background:rgba(0,0,0,.35); filter:blur(5px); }
.machine-base { position:absolute; left:24px; bottom:1px; width:212px; height:72px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:28px 28px 20px 20px; color:#ffe583; font-size:10px; letter-spacing:1.7px; font-weight:950; background:linear-gradient(#154b34,#092d21); border:3px solid #c69a34; box-shadow:inset 0 5px 8px rgba(255,255,255,.05),0 18px 32px rgba(0,0,0,.34); }
.machine-base b { font-size:31px; color:#54ef91; text-shadow:0 0 18px rgba(84,239,145,.38); }
.countdown { position:absolute; z-index:15; font-size:92px; font-weight:950; color:#ffe06d; text-shadow:0 0 40px rgba(255,216,74,.42),0 10px 22px rgba(0,0,0,.55); animation:countPulse .7s ease both; }
.countdown.hidden { display:none; }
@keyframes countPulse { from{transform:scale(.55);opacity:.2} 60%{transform:scale(1.16)} to{transform:scale(1);opacity:1} }

.prize-track { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.prize-card { position:relative; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:15px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prize-card span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.9px; }
.prize-card strong { font-size:12px; }
.prize-card.jackpot { border-color:rgba(255,217,105,.25); background:linear-gradient(135deg,rgba(255,217,105,.08),rgba(255,255,255,.025)); }
.prize-card.won-player { border-color:rgba(71,255,145,.65); box-shadow:inset 0 0 22px rgba(66,237,138,.11); }
.prize-card.won-player strong { color:var(--green); }
.prize-card.won-ai { border-color:rgba(255,92,103,.55); box-shadow:inset 0 0 22px rgba(255,74,88,.08); }
.prize-card.won-ai strong { color:#ff8390; }
.prize-card.won-tie { border-color:rgba(255,217,105,.58); }
.prize-card.won-tie strong { color:var(--gold); }

.history-wrap { margin-top:15px; }
.history-label { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; }
.ball-history { min-height:46px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.history-empty { color:#6e8c80; font-size:12px; }
.history-ball { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; color:#13271d; background:radial-gradient(circle at 32% 27%, #fff, #fff4ad 22%, #f1c847 64%, #b87a18 100%); border:1px solid rgba(255,255,255,.66); box-shadow:inset -4px -5px 8px rgba(75,45,0,.18),0 6px 12px rgba(0,0,0,.2); animation:historyIn .32s ease both; }
@keyframes historyIn { from{opacity:0;transform:translateX(16px) scale(.7)} }

.duel-grid { display:grid; grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr); gap:14px; align-items:start; }
.duel-side { min-width:0; padding:15px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.026); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.player-duel { background:linear-gradient(145deg,rgba(46,221,125,.065),rgba(255,255,255,.018)); }
.ai-duel { background:linear-gradient(145deg,rgba(255,217,105,.065),rgba(255,255,255,.018)); }
.duel-side-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.duel-side-head > div:first-child { display:grid; gap:2px; }
.duel-side-head strong { font-size:15px; }
.duel-kicker { font-size:9px; font-weight:900; letter-spacing:1.4px; color:var(--green); }
.duel-kicker.ai-kicker { color:var(--gold); }
.duel-divider { min-height:100%; display:grid; place-items:center; position:relative; }
.duel-divider::before { content:""; position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(transparent,rgba(255,217,105,.35),rgba(80,244,145,.30),transparent); }
.duel-divider span { position:sticky; top:108px; z-index:2; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#082116; font-size:12px; font-weight:950; background:linear-gradient(145deg,#fff0a4,#52ee93); border:2px solid rgba(255,255,255,.65); box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 24px rgba(255,220,90,.15); }
.cards-grid { display:grid; grid-template-columns:1fr; gap:14px; perspective:900px; }
.bingo-card { border-radius:18px; padding:12px; background:linear-gradient(145deg,#effff5,#c7f3d6); color:#0b2f20; border:3px solid rgba(255,216,90,.8); box-shadow:0 15px 35px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.95); transform-style:preserve-3d; transition:transform .2s ease,box-shadow .2s ease; position:relative; overflow:hidden; }
.bingo-card::before { content:"☘"; position:absolute; right:-10px; bottom:-26px; font-size:120px; color:rgba(20,148,83,.08); transform:rotate(-14deg); }
.bingo-card.ai-card { background:linear-gradient(145deg,#fff8e8,#f1dfab); color:#3a2b0c; border-color:rgba(255,208,74,.95); box-shadow:0 15px 35px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(255,238,177,.28); }
.bingo-card.ai-card::before { color:rgba(184,126,18,.08); }
.bingo-card.ai-card .card-head span { color:#8a6a23; }
.bingo-card.ai-card .card-cell { background:rgba(255,255,255,.80); border-color:rgba(137,97,17,.14); }
.bingo-card.ai-card .card-cell.blank { background:rgba(129,89,11,.075); border-color:transparent; }
.bingo-card.ai-card .card-cell.marked { color:#fff; background:radial-gradient(circle at 30% 25%,#ffe998,#f1b93d 53%,#b9780d 100%); border-color:#9b650d; box-shadow:inset -3px -4px 7px rgba(0,0,0,.18),0 0 0 2px rgba(70,231,140,.48),0 0 18px rgba(244,188,55,.30); }
.bingo-card:hover { transform:translateY(-3px) rotateX(1.5deg); box-shadow:0 20px 42px rgba(0,0,0,.34); }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:2px 3px 9px; }
.card-head strong { font-size:12px; letter-spacing:.6px; }
.card-head span { font-size:10px; color:#377257; font-weight:800; }
.card-table { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; position:relative; z-index:2; }
.card-cell { aspect-ratio:1.1; min-height:28px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.78); border:1px solid rgba(31,120,71,.12); font-size:clamp(10px,1.4vw,14px); font-weight:900; position:relative; transition:.22s ease; }
.card-cell.blank { background:rgba(14,76,50,.08); border-color:transparent; }
.card-cell.marked { color:#fff; background:radial-gradient(circle at 30% 25%, #7affad,#1dc86f 56%,#0d7b48 100%); border-color:#0b7745; box-shadow:inset -3px -4px 7px rgba(0,0,0,.18),0 0 0 2px rgba(255,216,90,.62),0 0 18px rgba(24,211,113,.3); transform:scale(.93); }
.card-cell.marked::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:white; top:5px; left:6px; opacity:.75; }
.card-row.complete .card-cell:not(.blank) { animation:rowWin .8s ease-in-out 2 alternate; }
@keyframes rowWin { to { box-shadow:0 0 0 3px #ffe06b,0 0 20px rgba(255,224,107,.52); transform:scale(.96); } }
.bingo-card.bingo-win { animation:cardBingo 1s ease-in-out infinite alternate; }
@keyframes cardBingo { to{transform:translateY(-3px) scale(1.015);box-shadow:0 0 0 3px #ffe570,0 0 40px rgba(255,218,79,.38),0 24px 48px rgba(0,0,0,.32)} }
.progress-pill { min-width:70px; text-align:center; color:#0c2b1e; background:linear-gradient(#86ffb6,#3ed47e); border-radius:999px; padding:7px 12px; font-size:11px; font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.ai-progress-pill { color:#3c2b06; background:linear-gradient(#fff0a0,#e9b73d); }

.ai-head { display:flex; gap:12px; align-items:center; }
.ai-head h3 { margin:3px 0 1px; font-size:20px; }
.ai-head p { margin:0; color:var(--muted); font-size:11px; }
.ai-avatar { width:58px; height:58px; flex:0 0 auto; border-radius:18px; display:grid; place-items:center; position:relative; overflow:hidden; color:#092116; font-weight:950; background:linear-gradient(145deg,#8dffba,#31cb75); box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 24px rgba(31,202,111,.18); }
.ai-avatar i { position:absolute; width:10px; height:10px; border-radius:50%; background:#fff6a7; right:5px; top:5px; box-shadow:0 0 12px #fff6a7; animation:blink 1.2s ease infinite; }
@keyframes blink { 50%{opacity:.3} }
.ai-status { margin:18px 0 10px; display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--muted); }
.ai-status strong { color:#fff; font-size:14px; }
.ai-live-note { display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.ai-live-note > span { flex:0 0 auto; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:19px; color:#092116; background:linear-gradient(145deg,#fff0a1,#45df84); box-shadow:inset 0 1px 0 rgba(255,255,255,.65); }
.ai-live-note p { margin:0; color:#bed2c9; font-size:11px; line-height:1.45; }
.ai-meter { height:6px; border-radius:999px; background:rgba(255,255,255,.07); margin-top:12px; overflow:hidden; }
.ai-meter span { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#34dd7e,#ffe068); transition:width .4s ease; }
.number-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.number-cell { aspect-ratio:1; min-height:24px; display:grid; place-items:center; border-radius:6px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.045); color:#7e9c90; font-size:9px; font-weight:850; transition:.25s ease; }
.number-cell.drawn { color:#0b2b1c; background:linear-gradient(#9bffc2,#49d986); border-color:#7af0a9; box-shadow:0 0 10px rgba(73,217,134,.2); transform:scale(.92); }


/* v1.3 — compact premium right rail */
.premium-draw-dock {
  padding: 15px !important;
  overflow: hidden;
  border-color: rgba(255,217,105,.23);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,218,92,.09), transparent 34%),
    linear-gradient(155deg, rgba(10,55,39,.94), rgba(3,26,20,.94));
  box-shadow: 0 24px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(52,230,132,.025);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.premium-draw-dock::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 10%, rgba(255,255,255,.045) 34%, transparent 54%);
  transform:translateX(-120%);
}
.premium-draw-dock.is-live {
  border-color: rgba(79,242,148,.42);
  box-shadow: 0 26px 70px rgba(0,0,0,.46), 0 0 34px rgba(62,229,133,.09), inset 0 1px 0 rgba(255,255,255,.07);
}
.premium-draw-dock.is-live::before { animation:dockSweep 4.8s ease-in-out infinite; }
@keyframes dockSweep { 0%,64%{transform:translateX(-125%)} 82%,100%{transform:translateX(125%)} }
.draw-live-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; padding:7px 9px; border-radius:11px; background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.055); }
.live-state { display:flex; align-items:center; gap:7px; color:#dcebe5; font-size:9px; letter-spacing:1px; }
.live-state strong { font-size:9px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#81998e; box-shadow:0 0 0 4px rgba(129,153,142,.08); }
.is-live .live-dot { background:#48ee91; box-shadow:0 0 0 4px rgba(72,238,145,.10),0 0 15px rgba(72,238,145,.65); animation:livePulse 1.4s ease-in-out infinite; }
.is-live .live-state strong { color:#7dffb1; }
@keyframes livePulse { 50%{transform:scale(.72);opacity:.55} }
.draw-speed { color:#78988b; font-size:8px; white-space:nowrap; }
.premium-draw-dock .section-title { margin-bottom:4px; }
.premium-draw-dock .section-title h2 { font-size:16px; max-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.premium-draw-dock .draw-counter strong { font-size:24px; }
.premium-draw-dock .draw-counter span { font-size:10px; }

.compact-ai-panel { padding:13px 14px !important; }
.compact-ai-panel .ai-head { gap:9px; }
.compact-ai-panel .ai-avatar { width:43px; height:43px; border-radius:13px; font-size:12px; }
.compact-ai-panel .ai-head h3 { font-size:16px; margin:1px 0; }
.compact-ai-panel .ai-head p { font-size:9px; }
.compact-ai-panel .eyebrow { font-size:8px; }
.compact-ai-panel .ai-status { margin:10px 0 7px; }
.compact-ai-panel .compact-note { padding:8px; align-items:center; }
.compact-ai-panel .compact-note > span { width:27px; height:27px; border-radius:9px; font-size:14px; }
.compact-ai-panel .compact-note p { font-size:9px; }
.compact-ai-panel .ai-meter { margin-top:8px; height:5px; }

.collapsible-board { padding:13px 14px !important; overflow:hidden; }
.board-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.board-toggle-row h3 { margin:2px 0 0; font-size:14px; }
.board-toggle { height:34px; min-width:91px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; border:1px solid rgba(255,217,105,.18); color:#f2df9b; background:rgba(255,217,105,.055); cursor:pointer; font-size:9px; font-weight:850; transition:.22s ease; }
.board-toggle:hover { background:rgba(255,217,105,.10); transform:translateY(-1px); }
.board-toggle b { font-size:15px; line-height:1; transition:transform .28s ease; }
.collapsible-board:not(.is-collapsed) .board-toggle b { transform:rotate(180deg); }
.number-board-content { max-height:420px; opacity:1; margin-top:10px; overflow:hidden; transition:max-height .36s ease, opacity .22s ease, margin .3s ease; }
.collapsible-board.is-collapsed .number-board-content { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
.board-summary { display:flex; align-items:baseline; gap:5px; margin-bottom:8px; color:#b7cec4; font-size:10px; }
.board-summary > span { color:#45eb8a; }
.board-summary strong { color:#fff; }
.board-summary small { color:#78998b; }
.collapsible-board .number-grid { grid-template-columns:repeat(10,1fr); gap:3px; }
.collapsible-board .number-cell { min-height:21px; border-radius:5px; font-size:8px; }

.toast { position:fixed; left:50%; bottom:28px; z-index:80; transform:translate(-50%,20px); opacity:0; pointer-events:none; max-width:min(92vw,540px); padding:13px 18px; color:#082318; background:linear-gradient(145deg,#fff4b4,#f7ce53); border:1px solid rgba(255,255,255,.6); border-radius:14px; box-shadow:0 16px 38px rgba(0,0,0,.38); font-size:13px; font-weight:850; transition:.28s ease; text-align:center; }
.toast.show { transform:translate(-50%,0); opacity:1; }

.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(1,10,7,.74); backdrop-filter:blur(9px); opacity:0; pointer-events:none; transition:.25s ease; }
.modal.open { opacity:1; pointer-events:auto; }
.modal-card { width:min(520px,100%); border-radius:26px; padding:32px; text-align:center; position:relative; transform:translateY(14px) scale(.97); transition:.25s ease; }
.modal.open .modal-card { transform:none; }
.modal-close { position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:#fff; cursor:pointer; font-size:24px; }
.result-icon { width:90px; height:90px; margin:0 auto 13px; display:grid; place-items:center; border-radius:50%; font-size:52px; background:radial-gradient(circle at 35% 30%,#7bffad,#18a95f 68%,#0b623d); border:3px solid #f4cf5c; box-shadow:0 0 34px rgba(53,232,128,.23); }
.modal-card h2 { font-size:34px; margin:7px 0 8px; }
.modal-card > p { color:#bad0c6; line-height:1.55; }
.result-stats { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.result-stats div { padding:12px 8px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.result-stats span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.result-stats strong { display:block; margin-top:3px; color:var(--gold); }
.rules-card { text-align:left; }
.rules-card h2 { font-size:28px; }
.rules-list { display:grid; gap:9px; margin:18px 0; }
.rules-list p { margin:0; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#d2e3dc; font-size:13px; line-height:1.5; }
.rules-list b { color:var(--gold); margin-right:4px; }
.rules-note { font-size:11px; color:#8ba89b !important; }

.confetti { position:fixed; width:9px; height:15px; z-index:120; top:-20px; border-radius:2px; pointer-events:none; animation:confettiFall var(--dur) linear forwards; }
@keyframes confettiFall { to { transform:translate3d(var(--drift),110vh,0) rotate(900deg); opacity:.9; } }

.locked .segmented, .locked #regenerateBtn { opacity:.42; pointer-events:none; }

@media (max-width: 1120px) {
  .game-layout { grid-template-columns:1fr; }
  .side-column { grid-template-columns:1fr 1fr; }
  .side-column .draw-stage { position:relative; top:auto; }
}
@media (max-width: 900px) {
  .duel-grid { grid-template-columns:1fr; }
  .duel-divider { min-height:42px; }
  .duel-divider::before { left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg,transparent,rgba(255,217,105,.35),rgba(80,244,145,.30),transparent); }
  .duel-divider span { position:relative; top:auto; width:42px; height:42px; }
}

@media (max-width: 760px) {
  .topbar { min-height:70px; padding:8px 12px; }
  .brand-logo { width:58px; height:50px; }
  .brand-copy span, .stat-chip { display:none; }
  .brand-copy strong { font-size:15px; }
  .app-shell { width:min(100% - 16px,1480px); margin-top:10px; }
  .hero { min-height:unset; padding:24px 20px; }
  .hero h1 { font-size:36px; letter-spacing:-1.3px; }
  .hero-badge { display:none; }
  .setup, .draw-stage, .cards-panel, .ai-panel, .number-board { padding:16px; border-radius:18px; }
  .premium-draw-dock { padding:14px !important; }
  .side-column .draw-stage .machine-scene { height:250px; }
  .side-column .draw-stage .machine { transform:scale(.84) rotateX(2deg); }
  .side-column .draw-stage .prize-track { grid-template-columns:repeat(3,1fr); }
  .selector-row { align-items:stretch; }
  .selector-label { width:100%; }
  .segmented { flex:1; }
  .segmented button { flex:1; width:auto; }
  .selector-row .btn { flex:1 1 46%; padding:0 11px; font-size:12px; }
  .machine-scene { height:292px; transform:scale(.92); margin:-10px 0; }
  .prize-track { grid-template-columns:1fr; }
  .cards-grid { grid-template-columns:1fr; }
  .duel-side { padding:11px; border-radius:16px; }
  .duel-side-head { align-items:flex-start; }
  .card-cell { min-height:30px; font-size:12px; }
  .side-column { grid-template-columns:1fr; }
  .number-grid { grid-template-columns:repeat(10,1fr); }
  .result-stats { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
  .top-actions { gap:5px; }
  .icon-btn { width:38px;height:38px; }
  .hero h1 { font-size:31px; }
  .hero p { font-size:13px; }
  .section-title h2 { font-size:19px; }
  .rule-mini { display:none; }
  .selector-row .btn { flex-basis:100%; }
  .machine-scene { transform:scale(.84); margin:-25px -20px; }
}

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