:root {
  color-scheme: dark;
  --bg: #07050a;
  --panel: rgba(25, 10, 31, .90);
  --panel2: rgba(18, 7, 24, .97);
  --text: #fff6e9;
  --muted: #b9a9bd;
  --line: rgba(255, 154, 47, .18);
  --accent: #ff7a18;
  --accent2: #b5ff3d;
  --purple: #7a35c9;
  --danger: #ff3d6e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 82% 5%, rgba(255,122,24,.18), transparent 22%), radial-gradient(circle at 12% 12%, rgba(122,53,201,.24), transparent 26%), linear-gradient(180deg, #1b0a25 0%, #09050f 52%, #030205 100%); color: var(--text); }
body { min-height: 100vh; padding: 24px; overflow-x: hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(circle at 20% 10%, rgba(255,255,255,.08) 0 1px, transparent 2px),radial-gradient(circle at 70% 20%, rgba(181,255,61,.08) 0 1px, transparent 2px); background-size:90px 90px,120px 120px; }
body::after { content:"🎃        🦇              👻          🦇        🎃"; position:fixed; left:0; right:0; bottom:8px; pointer-events:none; text-align:center; font-size:clamp(18px,2vw,30px); letter-spacing:2vw; opacity:.11; }
button,input { font: inherit; }
button { color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.055); border-radius:12px; padding:10px 15px; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
button:hover { transform:translateY(-1px); background:rgba(255,122,24,.12); border-color:rgba(255,154,47,.35); }
.primary { border:0; font-weight:900; color:#24100a; background:linear-gradient(135deg,#ff7a18,#ffc04d); box-shadow:0 10px 34px rgba(255,122,24,.3); }
.shell { width:min(1360px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:20px; }
.game-card,.leader-card { border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(18px); border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.025); }
.game-card { padding:22px; }
.leader-card { padding:22px; align-self:start; }
.topbar,.leader-head,.actions,.stats { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eyebrow { color:var(--accent2); font-size:.72rem; font-weight:900; letter-spacing:.18em; margin:0 0 5px; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(1.7rem,4vw,3rem); line-height:.9; letter-spacing:-.06em; text-shadow:0 0 28px rgba(255,122,24,.26); }
h2 { margin-bottom:0; }
.subtitle { margin:8px 0 0; color:#ffad55; font-weight:800; letter-spacing:.03em; }
.badges { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.season-badge,.discord-badge { padding:8px 12px; border-radius:999px; font-weight:800; font-size:.76rem; }
.season-badge { border:1px solid rgba(255,122,24,.45); background:rgba(255,122,24,.12); color:#ffc783; box-shadow:0 0 24px rgba(255,122,24,.08); }
.discord-badge { border:1px solid rgba(122,53,201,.55); background:rgba(122,53,201,.16); color:#dec8ff; }
.stats { margin:20px 0 14px; justify-content:flex-start; flex-wrap:wrap; }
.stats div { min-width:105px; border:1px solid var(--line); background:rgba(0,0,0,.18); padding:10px 14px; border-radius:14px; }
.stats span { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.stats strong { display:block; font-size:1.25rem; margin-top:2px; }
.canvas-wrap { position:relative; border-radius:20px; overflow:hidden; border:2px solid rgba(255,122,24,.42); background:#050208; aspect-ratio:16 / 10; box-shadow:inset 0 0 100px rgba(122,53,201,.13),0 0 55px rgba(255,122,24,.12); }
.canvas-wrap::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border:10px solid transparent; border-image:linear-gradient(135deg,rgba(255,122,24,.65),rgba(122,53,201,.6),rgba(181,255,61,.35),rgba(255,122,24,.65)) 1; opacity:.4; }
canvas { position:relative; z-index:1; display:block; width:100%; height:100%; touch-action:none; }
.halloween-decor { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.decor-moon { position:absolute; right:3.5%; top:3%; font-size:clamp(44px,6vw,82px); filter:drop-shadow(0 0 22px rgba(255,186,95,.75)); opacity:.92; transform:rotate(-10deg); }
.decor-bat { position:absolute; font-size:clamp(22px,3vw,36px); filter:drop-shadow(0 0 8px rgba(0,0,0,.9)); opacity:.92; animation:batFloat 3.8s ease-in-out infinite; }
.bat-one { top:8%; left:10%; }
.bat-two { top:18%; right:18%; animation-delay:.7s; transform:scale(.8); }
.bat-three { top:28%; left:44%; animation-delay:1.4s; transform:scale(.65); }
.decor-web { position:absolute; top:-8px; font-size:clamp(56px,9vw,120px); opacity:.55; filter:grayscale(.4) drop-shadow(0 0 12px rgba(255,255,255,.15)); }
.web-left { left:-10px; }
.web-right { right:-10px; transform:scaleX(-1); }
.decor-pumpkin { position:absolute; bottom:2.5%; font-size:clamp(42px,6vw,76px); filter:drop-shadow(0 0 18px rgba(255,122,24,.72)); animation:pumpkinGlow 2.4s ease-in-out infinite; }
.pumpkin-left { left:2.2%; }
.pumpkin-right { right:2.2%; animation-delay:1.1s; }
.decor-ghost { position:absolute; bottom:12%; font-size:clamp(28px,4vw,48px); opacity:.62; filter:drop-shadow(0 0 15px rgba(255,255,255,.28)); animation:ghostFloat 4.2s ease-in-out infinite; }
.ghost-left { left:13%; }
.ghost-right { right:13%; animation-delay:1.5s; }
.graveyard { position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); width:82%; text-align:center; font-size:clamp(30px,5vw,70px); letter-spacing:.02em; opacity:.28; filter:grayscale(1) brightness(.42) drop-shadow(0 -7px 18px rgba(122,53,201,.4)); white-space:nowrap; }
@keyframes batFloat { 0%,100%{ transform:translateY(0) rotate(-5deg) } 50%{ transform:translateY(-10px) rotate(5deg) } }
@keyframes ghostFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
@keyframes pumpkinGlow { 0%,100%{ filter:drop-shadow(0 0 12px rgba(255,122,24,.5)) } 50%{ filter:drop-shadow(0 0 28px rgba(255,122,24,.95)) } }
.overlay { position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:20px; background:rgba(7,2,10,.48); backdrop-filter:blur(3px); }
.overlay[hidden] { display:none; }
.panel { width:min(440px,100%); padding:27px; border-radius:20px; border:1px solid rgba(255,122,24,.32); background:rgba(18,7,24,.91); text-align:center; box-shadow:0 20px 70px rgba(0,0,0,.48),0 0 55px rgba(122,53,201,.18),0 0 35px rgba(255,122,24,.11); }
.panel h2 { margin:0 0 8px; font-size:1.8rem; }
.panel p:not(.eyebrow) { color:var(--muted); }
.panel input { width:100%; margin:12px 0; border:1px solid rgba(255,154,47,.19); background:#0b0610; color:var(--text); border-radius:12px; padding:13px 14px; outline:none; }
.panel input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,24,.13); }
.panel .primary { width:100%; padding:13px; }
.help { margin:14px 0 0 !important; font-size:.78rem; }
.actions { margin-top:14px; justify-content:flex-start; flex-wrap:wrap; }
.leader-head { margin-bottom:16px; }
.leaderboard { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.leaderboard li { display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; padding:10px; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:13px; }
.rank { color:var(--accent2); font-weight:900; }
.player { min-width:0; }
.player b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.player small { color:var(--muted); }
.points { font-weight:900; font-variant-numeric:tabular-nums; color:#ffc783; }
.empty { color:var(--muted); text-align:center; padding:24px 8px !important; display:block !important; }
.leader-note { color:var(--muted); font-size:.76rem; margin:14px 0 0; }
.bonus-tip { margin-top:18px; padding:14px; border:1px solid rgba(255,122,24,.25); border-radius:15px; background:linear-gradient(135deg,rgba(255,122,24,.1),rgba(122,53,201,.09)); }
.bonus-tip strong { color:#ffbd6e; }
.bonus-tip p { margin:7px 0 0; color:var(--muted); font-size:.8rem; line-height:1.45; }
@media (max-width:980px) { .shell { grid-template-columns:1fr; } .leader-card { width:100%; } }
@media (max-width:600px) { body{padding:10px}.game-card,.leader-card{border-radius:18px;padding:12px}.topbar{align-items:flex-start}.badges{max-width:130px}.stats div{min-width:calc(50% - 6px);flex:1}.actions button{flex:1}.discord-badge{display:none!important}.season-badge{font-size:.67rem;padding:7px 9px}.graveyard{font-size:34px;width:94%}.decor-moon{font-size:48px}.decor-pumpkin{font-size:42px}.decor-web{font-size:62px} }