:root{--hbk-navy: #001c3d;--hbk-navy-deep: #00112a;--hbk-blue: #0b3f7a;--hbk-accent: #00b3a4;--hbk-gold: #ffb81c;--text: #f2f6fb;--text-muted: #9fb3cc;--panel: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .12);--radius: 18px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 15% 10%,rgba(0,179,164,.22),transparent 45%),radial-gradient(circle at 85% 85%,rgba(11,63,122,.45),transparent 50%),linear-gradient(160deg,var(--hbk-navy) 0%,var(--hbk-navy-deep) 100%);color:var(--text);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;overflow:hidden}.app{display:grid;grid-template-rows:auto 1fr auto;height:100%;gap:clamp(12px,1.5vh,24px);padding:clamp(16px,2.2vw,40px)}.header{display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:block;height:clamp(36px,4.5vw,72px);width:auto}.header__title{text-align:center;flex:1}.header__title h1{margin:0;font-size:clamp(28px,4.4vw,68px);text-transform:uppercase;letter-spacing:.04em;background:linear-gradient(95deg,#fff 20%,var(--hbk-accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.header__title p{margin:6px 0 0;color:var(--text-muted);font-size:clamp(12px,1.3vw,20px);letter-spacing:.12em;text-transform:uppercase}.status{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel);font-size:clamp(11px,.9vw,15px);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}.status__dot{width:10px;height:10px;border-radius:50%;background:var(--text-muted)}.status--online .status__dot{background:var(--hbk-accent);box-shadow:0 0 #00b3a4b3;animation:pulse 2s infinite}.status--connecting .status__dot{background:var(--hbk-gold)}.status--offline .status__dot{background:#ff5d5d}.status--demo .status__dot{background:var(--hbk-gold)}@keyframes pulse{70%{box-shadow:0 0 0 12px #00b3a400}to{box-shadow:0 0 #00b3a400}}.main{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:clamp(12px,1.5vw,28px);min-height:0}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:clamp(14px,1.6vw,28px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-height:0;display:flex;flex-direction:column}.panel--side{background:none;border:none;padding:0;gap:clamp(12px,1.5vh,24px)}.panel__title{margin:0 0 clamp(8px,1.2vh,20px);font-size:clamp(13px,1.1vw,20px);text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);display:flex;justify-content:space-between}.panel__meta{color:var(--hbk-accent)}.board-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;color:var(--text-muted)}.board-controls button{padding:8px 14px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font:inherit;cursor:pointer}.board-controls button[aria-pressed=true]{background:var(--hbk-blue);border-color:var(--hbk-accent)}.board-error{color:#ff5d5d;margin:0 0 12px}.leaderboard{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,.9vh,14px);flex:1;grid-auto-rows:1fr;min-height:0}.leaderboard--empty{place-content:center;text-align:center;color:var(--text-muted);font-size:clamp(16px,2vw,28px)}.leaderboard__hint{font-size:.6em;letter-spacing:.18em;text-transform:uppercase}.row{position:relative;display:grid;grid-template-columns:clamp(38px,4vw,70px) 1fr auto;align-items:center;gap:clamp(10px,1.4vw,24px);padding:0 clamp(12px,1.4vw,24px);border-radius:12px;overflow:hidden;background:#ffffff0a}.row:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill, 0%);background:linear-gradient(90deg,#0b3f7ad9,#00b3a459)}.row>*{position:relative}.row--top1:before{background:linear-gradient(90deg,#ffb81cd9,#00b3a466)}.row--top1{box-shadow:0 0 0 1px #ffb81c99}.row__rank{font-size:clamp(18px,2.2vw,36px);font-weight:800;color:var(--hbk-gold);text-align:center}.row--top1 .row__rank{color:#fff}.row__name{font-size:clamp(18px,2.4vw,40px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row__score{font-size:clamp(20px,2.6vw,44px);font-weight:800;font-variant-numeric:tabular-nums}.latest{background:linear-gradient(150deg,#00b3a438,#0b3f7a59);border:1px solid var(--panel-border);border-radius:var(--radius);padding:clamp(14px,1.6vw,28px);text-align:center;animation:flash .8s ease}@keyframes flash{0%{transform:scale(.97);box-shadow:0 0 #00b3a499}40%{box-shadow:0 0 40px 4px #00b3a473}}.latest__name{margin:0;font-size:clamp(20px,2.4vw,40px);font-weight:600}.latest__score{margin:4px 0 0;font-size:clamp(40px,6vw,96px);font-weight:800;line-height:1;color:var(--hbk-gold);font-variant-numeric:tabular-nums}.latest__rank,.latest__idle{margin:8px 0 0;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(11px,1vw,16px);color:var(--text-muted);min-height:1.2em}.leaderboard-qr{display:flex;align-items:center;gap:16px;padding:clamp(14px,1.6vw,28px);border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel)}.leaderboard-qr svg{display:block;width:clamp(96px,10vw,144px);height:auto;border-radius:4px}.leaderboard-qr .panel__title{letter-spacing:.1em}.leaderboard-qr p{overflow-wrap:anywhere}.leaderboard-qr a{color:var(--hbk-accent)}body:has(.app--fair){overflow:auto}.app--fair{height:auto;min-height:100%}.app--fair .leaderboard{grid-auto-rows:minmax(64px,auto)}.app--fair .footer{flex-wrap:wrap;gap:12px}.candidate{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#00112aeb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;animation:fade-in .25s ease}.candidate__card{text-align:center;padding:clamp(24px,4vw,64px);border:1px solid var(--panel-border);border-radius:var(--radius);background:linear-gradient(150deg,#00b3a438,#0b3f7a66);min-width:min(80vw,900px)}.candidate__label{margin:0;text-transform:uppercase;letter-spacing:.3em;font-size:clamp(12px,1.1vw,18px);color:var(--text-muted)}.candidate__name{margin:8px 0 0;font-size:clamp(32px,5vw,80px);font-weight:700}.candidate__value{margin:clamp(8px,1.5vh,24px) 0 0;font-size:clamp(72px,16vw,260px);font-weight:800;line-height:1;color:var(--hbk-gold);font-variant-numeric:tabular-nums}.candidate__peak{margin:clamp(8px,1.5vh,20px) 0 0;text-transform:uppercase;letter-spacing:.25em;font-size:clamp(14px,1.6vw,26px);color:var(--hbk-accent);font-variant-numeric:tabular-nums}.ad{flex:1;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:clamp(14px,1.6vw,28px);display:flex;flex-direction:column;min-height:0}.ad__slide{flex:1;animation:fade-in .8s ease}.ad__qr{display:block;width:fit-content;margin-top:16px;background:#fff;border-radius:8px;line-height:0}.ad__qr svg{width:clamp(96px,9vw,160px);height:auto}.ad__headline{margin:0 0 10px;font-size:clamp(18px,1.9vw,32px);font-weight:700;color:var(--hbk-accent)}.ad__body{margin:0;font-size:clamp(13px,1.1vw,20px);line-height:1.5;color:var(--text)}.ad__dots{display:flex;gap:8px;margin:16px 0 10px}.ad__dot{width:8px;height:8px;border-radius:50%;background:#ffffff40}.ad__dot--active{background:var(--hbk-accent)}.ad__url{margin:0;font-size:clamp(14px,1.3vw,22px);font-weight:700;letter-spacing:.12em;text-transform:uppercase}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}}.footer{display:flex;justify-content:space-between;color:var(--text-muted);font-size:clamp(10px,.9vw,15px);letter-spacing:.14em;text-transform:uppercase}@media (max-width: 900px){body{overflow:auto}.app{height:auto}.main{grid-template-columns:1fr}.header{flex-wrap:wrap;justify-content:center}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}