@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #070504; color: #fff8e8; font-family: 'DM Sans', Arial, sans-serif; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 9%, rgba(235,157,16,.26), transparent 30rem), linear-gradient(115deg, transparent 49%, rgba(255,255,255,.018) 50%, transparent 51%); }
.app-shell { width: min(100%, 540px); min-height: 100dvh; margin: auto; padding: max(22px, env(safe-area-inset-top)) 20px 24px; overflow: hidden; }
.hero { position: relative; text-align: center; padding-bottom: 21px; }
.glow { position: absolute; width: 180px; height: 180px; top: 8px; left: calc(50% - 90px); background: #d58b14; filter: blur(75px); opacity: .25; }
.logo { position: relative; display: block; width: min(72vw, 275px); margin: -7px auto -4px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.55)); }
.live-pill { display: inline-flex; gap: 7px; align-items: center; padding: 6px 10px; border: 1px solid rgba(255,184,43,.38); border-radius: 99px; color: #ffc54b; background: rgba(104,58,7,.2); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: #f04b32; box-shadow: 0 0 0 4px rgba(240,75,50,.15); }
h1 { margin: 13px 0 5px; font-family: Anton, Impact, sans-serif; font-size: clamp(37px, 10vw, 53px); line-height: .96; letter-spacing: .02em; text-transform: uppercase; }
h1 em { color: #e8a42b; font-style: normal; }
.tagline { margin: 0; color: #b8ad9d; font-size: 14px; }
.player-card, .history-card { border: 1px solid rgba(242,189,79,.23); border-radius: 20px; background: linear-gradient(140deg, rgba(53,38,19,.86), rgba(18,13,10,.94)); box-shadow: 0 16px 35px rgba(0,0,0,.25); }
.player-card { padding: 18px 15px 10px; }
.card-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 9px; }
.eyebrow, .section-title { color: #c89432; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.eyebrow { margin: 0 0 2px; }
h2 { margin: 0; font-size: 19px; }
.equalizer { display: flex; align-items: end; gap: 3px; height: 20px; }.equalizer i { width: 3px; background: #eca92e; border-radius: 3px; }.equalizer i:nth-child(1){height:9px}.equalizer i:nth-child(2){height:18px}.equalizer i:nth-child(3){height:13px}.equalizer i:nth-child(4){height:7px}
iframe { display: block; border-radius: 10px; background: #0c0a09; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 13px 0; }
.stats article { min-height: 113px; padding: 15px; border-radius: 17px; background: #17120e; border: 1px solid rgba(255,255,255,.07); }.stat-icon { color: #e8a42b; font-size: 15px; }.stat-value { margin-top: 9px; color: #fff7e3; font-family: Anton, Impact, sans-serif; font-size: 28px; letter-spacing: .04em; }.stats p { margin: 2px 0 0; color: #9b9082; font-size: 11px; }
.history-card { padding: 17px; }.section-title { display: flex; justify-content: space-between; }.section-title b { color: #6f6353; font-weight: 500; }.history-content { min-height: 46px; padding-top: 12px; color: #d9cdbb; font-size: 13px; line-height: 1.45; }
#sonic_history table { width: 100%; color: inherit; font-family: inherit; font-size: 12px; } #sonic_history td { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
footer { padding: 0 20px max(20px, env(safe-area-inset-bottom)); text-align: center; color: #716655; font-size: 11px; letter-spacing: .06em; } footer span { color: #d49825; padding: 0 4px; }
@media (min-width: 541px) { body { background: #120f0c; }.app-shell { box-shadow: 0 0 80px #000; } }