:root { color-scheme: dark; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.glass-panel { background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(2,6,23,.84)); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.glass-card { background: rgba(15,23,42,.68); border: 1px solid rgba(148,163,184,.16); }
.hero-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 8%, rgba(245,158,11,.20), transparent 22%), linear-gradient(180deg, rgba(15,23,42,.86), rgba(2,6,23,.9)); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 18px 60px rgba(0,0,0,.32); }
.hero-panel:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at 50% 20%, black, transparent 70%); pointer-events:none; }
.hero-panel > * { position: relative; }
.shadow-glow { box-shadow: 0 0 32px rgba(168,85,247,.35); }
.nav-pill { border-radius: .9rem; padding: .75rem 1rem; transition: .18s ease; }
.nav-pill:hover, .nav-pill.active { background: linear-gradient(180deg, rgba(126,34,206,.9), rgba(76,29,149,.55)); color: white; box-shadow: 0 0 26px rgba(168,85,247,.30); }
.count-box { border-radius: 1rem; background: rgba(15,23,42,.78); border: 1px solid rgba(148,163,184,.14); padding: .8rem .4rem; }
.count-box strong { display:block; font-size:1.7rem; line-height:1; color: rgb(216,180,254); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.count-box span { display:block; margin-top:.4rem; font-size:.65rem; text-transform:uppercase; color: rgb(148,163,184); }
.prediction-card { cursor:pointer; border-radius:1rem; border:1px solid rgba(168,85,247,.42); background: linear-gradient(180deg, rgba(88,28,135,.33), rgba(15,23,42,.72)); padding:1rem; transition:.18s ease; }
.prediction-card:hover, .prediction-card.selected { transform: translateY(-2px); border-color: rgb(250,204,21); box-shadow:0 0 30px rgba(168,85,247,.36); }
.award-card { border-radius:1rem; border:1px solid rgba(148,163,184,.16); background: rgba(15,23,42,.62); padding:1rem; text-align:center; }
.player-card { position:relative; overflow:hidden; min-height:178px; border-radius:1rem; border:1px solid rgba(168,85,247,.35); background: radial-gradient(circle at 50% 0%, rgba(168,85,247,.36), transparent 45%), rgba(15,23,42,.78); padding:1rem; }
.card-rarity-Icon { border-color: rgba(251,191,36,.9); box-shadow:0 0 26px rgba(251,191,36,.18); }
.card-rarity-Legendary { border-color: rgba(217,70,239,.9); }
.card-rarity-Epic { border-color: rgba(34,211,238,.8); }
.card-rarity-Rare { border-color: rgba(59,130,246,.8); }
.booster-pack { width:120px; min-width:120px; height:160px; display:grid; place-items:center; text-align:center; font-weight:900; text-transform:uppercase; border-radius:1rem; background: linear-gradient(135deg, #581c87, #111827 55%, #7e22ce); border:1px solid rgba(216,180,254,.6); box-shadow:0 0 32px rgba(168,85,247,.26); }