:root {
  --bg: #05070b;
  --panel: rgba(11, 16, 25, 0.88);
  --panel-2: rgba(18, 27, 42, 0.86);
  --text: #f6f8ff;
  --muted: #9fb1c8;
  --line: rgba(255,255,255,.14);
  --neon: #20c8ff;
  --green: #2bec74;
  --gold: #ffc83d;
  --red: #ff4d57;
  --purple: #c65cff;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top left, #102033 0, transparent 36rem), radial-gradient(circle at 85% 15%, rgba(255,196,57,.16), transparent 26rem), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; padding: 16px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 1540px; margin: 0 auto 16px; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(18,28,44,.92), rgba(5,7,11,.86)); box-shadow: var(--shadow); position: sticky; top: 8px; z-index: 20; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); background: transparent; border: 0; padding: 4px 10px 4px 4px; text-align: left; }
.brand strong { display:block; letter-spacing:.04em; text-transform:uppercase; }
.brand em { display:block; color:var(--muted); font-style:normal; font-size:.82rem; }
.eight-logo { width: 46px; height: 46px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff 0 7px, #e8e8e8 8px 15px, #111 16px 100%); color: #111; font-weight: 950; font-size: 1.6rem; box-shadow: inset -8px -10px 16px rgba(0,0,0,.6), 0 0 22px rgba(32,200,255,.35); }
.profile-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: var(--muted); font-size:.9rem; }
.profile-pill { border:1px solid var(--line); border-radius:999px; padding:7px 10px; background:rgba(255,255,255,.055); }
.icon-btn { width:46px; height:46px; border-radius:16px; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.07); }
.screen { display: none; max-width: 1540px; margin: 0 auto; }
.active-screen { display: block; }
.hero-panel { min-height: 650px; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 680px); gap: 20px; align-items: stretch; border:1px solid var(--line); border-radius: 32px; padding: clamp(22px, 3vw, 46px); background: linear-gradient(135deg, rgba(17, 29, 48, .94), rgba(8, 10, 15, .88)), url("assets/sheets/eightball-sprites-pool-balls.png") center/cover; box-shadow: var(--shadow); overflow:hidden; position:relative; }
.hero-panel::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 25%, rgba(255, 199, 61, .16), transparent 23rem), radial-gradient(circle at 35% 84%, rgba(32,200,255,.16), transparent 26rem); pointer-events:none; }
.hero-copy, .hero-card-stack { position: relative; z-index: 1; }
.eyebrow { display:inline-block; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:800; font-size:.78rem; }
h1 { font-size: clamp(2.4rem, 6vw, 5.9rem); line-height: .95; letter-spacing: -.06em; margin: 14px 0; text-shadow: 0 8px 30px rgba(0,0,0,.6); }
h2 { margin: 0 0 12px; letter-spacing: -.03em; }
p { color: var(--muted); line-height: 1.55; }
.hero-copy p { max-width: 720px; font-size: 1.13rem; }
.hero-actions { display:grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 14px; margin-top: 30px; }
.primary-btn, .secondary-btn, .gold-btn, .practice-btn, .danger-btn { border:0; border-radius: 16px; color: #fff; padding: 12px 16px; font-weight: 850; letter-spacing:.02em; box-shadow: inset 0 1px rgba(255,255,255,.3), 0 12px 28px rgba(0,0,0,.28); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.primary-btn { background: linear-gradient(180deg, #1ca9ff, #0b4dab); }
.secondary-btn { background: linear-gradient(180deg, #26354e, #111925); border:1px solid rgba(255,255,255,.12); }
.gold-btn { background: linear-gradient(180deg, #ffd358, #ae6c02); }
.practice-btn { background: linear-gradient(180deg, #2ce879, #0b7a2d); }
.danger-btn { background: linear-gradient(180deg, #ff5561, #9d0f19); }
.primary-btn:hover, .secondary-btn:hover, .gold-btn:hover, .practice-btn:hover, .danger-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.xl { min-height: 66px; font-size: 1.05rem; }
.hero-card-stack { min-height: 570px; display:grid; grid-template-columns: repeat(2, minmax(145px, 1fr)); gap: 14px; align-content:center; }
.hero-card-stack img { width:100%; border-radius: 18px; border:1px solid rgba(255,255,255,.23); box-shadow: 0 20px 44px rgba(0,0,0,.42); transform: rotate(var(--rot, 0deg)); }
.hero-card-stack img:nth-child(2n) { margin-top: 34px; }
.home-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; margin-top:16px; }
.panel { border:1px solid var(--line); border-radius: 24px; padding:22px; background: var(--panel); box-shadow: var(--shadow); }
.glass { backdrop-filter: blur(14px); }
.meter, .xp-bar { height: 11px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.meter span, .xp-bar span { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--gold), var(--red)); box-shadow: 0 0 18px rgba(43,236,116,.4); }
.legend-stats { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.legend-stats div { border:1px solid var(--line); background:rgba(255,255,255,.05); padding:12px; border-radius:16px; }
.legend-stats strong { display:block; font-size:1.35rem; }
.spicy-card span { color:#ff76ba; font-size:.9rem; }
.toggle-row { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; }
.toggle-row input { width:18px; height:18px; accent-color: var(--purple); }
.setup-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px; border:1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.setup-head h1 { font-size:clamp(1.8rem, 4vw, 3.6rem); margin: 4px 0 0; }
.setup-progress { display:flex; gap:8px; margin:16px 0; }
.progress-step { flex:1; height: 10px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.progress-step.active { background:linear-gradient(90deg, var(--neon), var(--gold)); }
.setup-content { min-height: 560px; border:1px solid var(--line); border-radius: 28px; background: rgba(4,7,12,.72); padding: 18px; box-shadow: var(--shadow); }
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }
.choice-card { position:relative; border:1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); color: var(--text); text-align:left; min-height: 170px; overflow:hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.choice-card:hover { transform: translateY(-3px); border-color: rgba(32,200,255,.55); box-shadow: 0 14px 35px rgba(0,0,0,.36); }
.choice-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,200,61,.25), 0 18px 42px rgba(0,0,0,.45); }
.choice-card img { width:100%; display:block; border-radius: 14px; object-fit:cover; background:#070a0f; border:1px solid rgba(255,255,255,.11); }
.choice-card.character img { aspect-ratio: 240/465; }
.choice-card.table img { aspect-ratio: 350/560; object-fit:cover; object-position:center; }
.choice-card.cue { min-height: 120px; }
.choice-card.cue img { height: 54px; object-fit: contain; }
.choice-card.chalk img { width:88px; margin:0 auto 8px; }
.choice-card h3 { margin:10px 0 4px; font-size:1rem; }
.choice-card small { color: var(--muted); }
.bracket { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.bracket-card { border:1px solid var(--line); border-radius:18px; padding:14px; background:rgba(255,255,255,.05); display:flex; gap:12px; align-items:center; }
.bracket-card img { width:56px; height:78px; border-radius:12px; object-fit:cover; }
.bracket-card.current { border-color:var(--gold); background:rgba(255,200,61,.09); }
.game-hud { display:grid; grid-template-columns: 260px 1fr 300px; gap:14px; align-items:center; margin-bottom:14px; }
.mini-card { display:flex; align-items:center; gap:12px; min-height:76px; padding:12px; border:1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); }
.mini-card img, .mini-avatar { width:54px; height:54px; object-fit:cover; border-radius:14px; }
.mini-card strong { display:block; }
.mini-card span { color:var(--muted); font-size:.9rem; }
.center-hud { min-height: 76px; border:1px solid var(--line); border-radius:22px; padding:12px 16px; background:linear-gradient(180deg, rgba(17,27,42,.94), rgba(5,7,11,.86)); box-shadow: var(--shadow); text-align:center; }
.turn-lamp { display:inline-block; border-radius:999px; padding:7px 14px; background:rgba(43,236,116,.12); color:#b6ffd0; border:1px solid rgba(43,236,116,.32); font-weight:900; }
.turn-lamp.ai { background:rgba(255,77,87,.12); color:#ffc4c8; border-color:rgba(255,77,87,.32); }
.score-line { margin-top:8px; font-weight:800; }
.shot-help { margin-top:3px; color:var(--muted); font-size:.88rem; }
.game-layout { display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:14px; }
.canvas-panel { border:1px solid var(--line); border-radius:28px; background:linear-gradient(180deg, rgba(12,18,29,.9), rgba(2,4,8,.95)); padding:12px; box-shadow: var(--shadow); position:relative; overflow:hidden; }
#gameCanvas { display:block; width:100%; aspect-ratio: 1200/675; border-radius:20px; background:#06090f; touch-action:none; box-shadow: inset 0 0 38px rgba(0,0,0,.55); }
.floating-text-layer { position:absolute; inset:12px; pointer-events:none; overflow:hidden; border-radius:20px; }
.float-text { position:absolute; color:#fff; font-weight:950; text-shadow: 0 3px 10px #000, 0 0 18px rgba(255,200,61,.65); animation: floatUp 1.3s ease-out forwards; }
@keyframes floatUp { from { transform:translate(-50%, 0) scale(.9); opacity:0; } 10%{opacity:1;} to { transform:translate(-50%, -72px) scale(1.12); opacity:0; } }
.table-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:12px; }
.range-wrap { display:flex; align-items:center; gap:10px; min-width: 220px; color:var(--muted); font-weight:800; }
.range-wrap input { width:160px; accent-color: var(--gold); }
.spin-wrap { display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:800; }
.spin-pad { width:74px; height:74px; border-radius:50%; border:2px solid rgba(255,255,255,.22); background: radial-gradient(circle at 38% 30%, #fff 0, #f2eadb 20%, #c6b99f 92%); box-shadow: inset -8px -10px 15px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.45); position:relative; touch-action:none; }
.spin-pad::before, .spin-pad::after { content:""; position:absolute; background:rgba(0,0,0,.25); }
.spin-pad::before { width:1px; top:8px; bottom:8px; left:50%; }
.spin-pad::after { height:1px; left:8px; right:8px; top:50%; }
#spinDot { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; left:50%; top:50%; background:radial-gradient(circle at 35% 30%, #ffefef, #e60012 50%, #85000b); border:1px solid rgba(255,255,255,.85); box-shadow:0 2px 8px rgba(0,0,0,.5); }
.side-panel { display:flex; flex-direction:column; gap:14px; }
.side-panel > div { border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow: var(--shadow); }
.opponent-box { display:flex; gap:12px; padding:12px; align-items:center; }
.opponent-box img { width:86px; height:122px; border-radius:14px; object-fit:cover; border:1px solid rgba(255,255,255,.2); }
.opponent-box h2 { margin:0 0 6px; }
.gamify-box { padding:16px; }
.gamify-row { display:flex; justify-content:space-between; gap:10px; color:var(--muted); margin:9px 0; }
.gamify-row strong { color:var(--text); }
.tournament-box { padding:14px; max-height:180px; overflow:auto; }
.tournament-box h3 { margin:0 0 8px; }
.tournament-step { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; padding:6px 0; }
.tournament-step.current { color:var(--gold); font-weight:900; }
.tournament-step.done { color:#8fffb3; }
.chat-box { padding:14px; min-height: 310px; display:flex; flex-direction:column; }
.chat-messages { flex:1; min-height:170px; max-height:260px; overflow:auto; padding-right:4px; }
.chat-bubble { margin: 8px 0; padding:10px 12px; border-radius:16px 16px 16px 4px; background:linear-gradient(180deg, rgba(32,200,255,.14), rgba(255,255,255,.055)); border:1px solid rgba(32,200,255,.22); color:#eafaff; font-size:.94rem; }
.chat-bubble.system { border-color:rgba(255,200,61,.24); background:rgba(255,200,61,.08); color:#fff0b7; border-radius:16px; }
.chat-gate { width:100%; border:1px dashed rgba(255,255,255,.28); border-radius:16px; background:rgba(255,255,255,.055); color:var(--text); padding:12px; text-align:left; }
.chat-gate span { float:right; color:var(--gold); font-size:.8rem; text-transform:uppercase; font-weight:900; }
.toast-layer { position: fixed; z-index: 80; right: 18px; bottom: 18px; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { max-width: 360px; border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:12px 14px; background:rgba(8,12,20,.94); box-shadow:var(--shadow); animation: toastIn .25s ease-out, toastOut .25s ease-in 3.4s forwards; }
.toast strong { display:block; color:var(--gold); }
@keyframes toastIn { from { transform:translateY(12px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes toastOut { to { transform:translateY(10px); opacity:0; } }
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.modal.hidden, .hidden { display:none !important; }
.modal-card { position:relative; width:min(560px, 100%); border:1px solid rgba(255,255,255,.2); border-radius:28px; padding:28px; background:linear-gradient(180deg, rgba(20,31,49,.98), rgba(5,8,13,.98)); box-shadow:var(--shadow); }
.modal-close { position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--text); font-size:1.5rem; }
.modal-card form { display:flex; gap:10px; margin:20px 0 10px; }
.modal-card input { flex:1; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:var(--text); border-radius:16px; padding:13px 14px; }
code { background:rgba(255,255,255,.1); padding:2px 5px; border-radius:6px; }
@media (max-width: 1150px) {
  .hero-panel, .game-layout { grid-template-columns: 1fr; }
  .game-hud { grid-template-columns: 1fr; }
  .side-panel { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-box { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .app-shell { padding: 8px; }
  .topbar { position: static; flex-wrap: wrap; }
  .profile-strip { order: 3; width: 100%; justify-content:flex-start; }
  .hero-panel { padding: 18px; min-height: unset; }
  .hero-actions, .home-grid, .side-panel { grid-template-columns: 1fr; }
  .hero-card-stack { grid-template-columns: repeat(2, 1fr); min-height: unset; }
  .setup-head { flex-wrap: wrap; }
  .setup-head > div { order: -1; width: 100%; }
  .game-layout { gap:8px; }
  .table-controls { align-items:stretch; }
  .table-controls button, .range-wrap { flex: 1 1 160px; }
  .modal-card form { flex-direction: column; }
}