/* Shared public UI primitives (website + player). Depends on tokens.css */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--hg-sans);color:var(--hg-text);background:var(--hg-navy);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:var(--hg-cyan);text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none}
:focus-visible{outline:2px solid var(--hg-gold);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:14px;font:700 15px var(--hg-sans);border:1px solid var(--hg-line2);background:rgba(14,26,42,.85);color:var(--hg-text);transition:.15s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}.btn:hover{transform:translateY(-1px);border-color:rgba(127,176,255,.6)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.gold{background:var(--hg-gold-grad);color:#1a1200;border-color:rgba(255,224,138,.6);box-shadow:0 10px 28px rgba(242,193,78,.28)}
.btn.yt{background:linear-gradient(90deg,#ff3b4d,#d90429);color:#fff;border-color:rgba(255,120,130,.5);box-shadow:0 10px 28px rgba(255,0,51,.22)}
.btn.blue{background:linear-gradient(90deg,#5a96ff,#3a6fd8);color:#fff;border-color:rgba(127,176,255,.5)}
.btn.ghost{background:transparent}.btn.sm{min-height:40px;padding:0 14px;font-size:13.5px;border-radius:11px}.btn.icon{width:48px;padding:0}.btn.icon.sm{width:40px}
.live{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(46,204,138,.14);color:var(--hg-green2);font:800 11px var(--hg-display);letter-spacing:.1em;box-shadow:inset 0 0 0 1px rgba(46,204,138,.4)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--hg-green);box-shadow:0 0 10px var(--hg-green);animation:hgpulse 1.5s infinite}
.live.soon{background:rgba(255,180,84,.14);color:var(--hg-amber);box-shadow:inset 0 0 0 1px rgba(255,180,84,.4)}.live.soon i{background:var(--hg-amber);box-shadow:none;animation:none}
.live.off{background:rgba(255,255,255,.07);color:var(--hg-muted);box-shadow:inset 0 0 0 1px var(--hg-line2)}.live.off i{background:var(--hg-muted2);box-shadow:none;animation:none}
@keyframes hgpulse{50%{opacity:.35}}
.tag{padding:4px 11px;border-radius:999px;border:1px solid rgba(79,140,255,.35);background:rgba(79,140,255,.12);font:600 12px var(--hg-sans);color:var(--hg-blue2);white-space:nowrap}
.card{background:rgba(10,20,34,.78);border:1px solid var(--hg-line);border-radius:var(--hg-r);box-shadow:var(--hg-shadow);backdrop-filter:blur(10px)}
.eyebrow{font:800 11px var(--hg-display);letter-spacing:.2em;color:var(--hg-gold);text-transform:uppercase;margin:0 0 6px}
h2.sec{margin:0;font:800 clamp(24px,3.4vw,34px)/1.1 var(--hg-display)}
.script{font-family:var(--hg-script);color:var(--hg-gold3);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--hg-text)}.logo img{width:52px;height:52px;object-fit:contain}
.logo b{font:800 15px/1 var(--hg-display);letter-spacing:.06em;color:var(--hg-gold)}.logo small{display:block;font:600 8px/1.3 var(--hg-display);letter-spacing:.22em;color:var(--hg-gold3);opacity:.8}
.meterbars{display:inline-flex;gap:3px;align-items:flex-end;height:26px}.meterbars i{width:3px;background:var(--hg-cyan);border-radius:2px;height:20%}
.meterbars.on i{animation:hgbar 1.1s ease-in-out infinite}.meterbars i:nth-child(2n){animation-delay:.15s}.meterbars i:nth-child(3n){animation-delay:.3s}.meterbars i:nth-child(5n){animation-delay:.45s}
@keyframes hgbar{0%,100%{height:20%}50%{height:100%}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(10,20,34,.96);border:1px solid var(--hg-line2);border-radius:12px;padding:10px 16px;font-size:13.5px;z-index:99;box-shadow:var(--hg-shadow);max-width:calc(100vw - 32px)}