@font-face { font-family: SUSE; src: url('public/fonts/SUSE-Regular.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; --ink: #f5f0fc; --muted: #bab0c9; --acid: #ddc5ff; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #101719; color: var(--ink); font-family: SUSE, sans-serif; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, #211a3b9c, transparent 24%, transparent 70%, #211a3b9c), radial-gradient(ellipse, transparent 40%, #211a3b40); }
.masthead { position: fixed; inset: 0 0 auto; z-index: 4; height: 106px; margin: 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ecf2dc20; gap: 20px; }
.brand { display: flex; align-items: center; gap: 15px; color: inherit; text-decoration: none; }
.brand-mark { font-family: Arial, sans-serif; font-size: 51px; font-weight: 900; letter-spacing: -5px; line-height: 1; }
.brand-mark > span { display: inline-block; color: var(--acid); font-size: 33px; vertical-align: top; margin: -5px 0 0 4px; }
.brand-name { font-size: 11px; letter-spacing: 2px; line-height: 1.8; }
.brand-name small { color: var(--muted); font-size: 8px; letter-spacing: 1.6px; }
.edition { font-size: 10px; letter-spacing: 1.8px; display: flex; align-items: center; gap: 10px; }
.edition-number { color: var(--muted); margin-left: 10px; }
.live-dot { width: 5px; height: 5px; background: var(--acid); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px #d1f34544; flex-shrink: 0; }
.quiet-button { background: #0c17192e; border: 1px solid #ffffff26; color: var(--ink); padding: 10px 14px; border-radius: 4px; font-size: 11px; }
.quiet-button span { margin-left: 12px; color: var(--acid); }
.quiet-button:hover { background: #ffffff15; }
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.event-title { position: absolute; top: 152px; left: 44px; }
.eyebrow { font-size: 9px; letter-spacing: 2.2px; color: var(--acid); }
h1 { font-family: Arial, sans-serif; font-weight: 800; font-size: clamp(42px, 5vw, 76px); line-height: .98; letter-spacing: -3px; margin: 20px 0 16px; }
h1 em { color: var(--acid); font-style: normal; }
.event-title p { color: var(--ink); font-size: 12px; text-shadow: 0 1px 8px #211a3b; }
.scoreboard { position: absolute; top: 150px; right: 42px; width: 246px; padding: 19px 20px 12px; border: 1px solid #dbece328; border-radius: 5px; background: #0e181dcc; backdrop-filter: blur(12px); }
.round-label { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 1.3px; color: #b5c5c0; }
.round-label > :last-child { margin-left: auto; color: var(--muted); }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
.stats > :last-child { padding-left: 22px; border-left: 1px solid #ffffff20; }
.stat-label { display: block; font-size: 8px; letter-spacing: 1.7px; color: var(--muted); }
.stats strong { display: block; font-size: 43px; font-weight: 400; line-height: 1.3; font-variant-numeric: tabular-nums; }
.unit { font-size: 17px; color: var(--muted); margin-left: 4px; }
.timer-track { height: 2px; background: #ffffff18; margin-top: 14px; }
#timer-bar { height: 100%; width: 100%; background: var(--acid); transition: width .2s linear; }
.scoreboard p { font-size: 9px; color: var(--muted); margin: 12px 0 0; }
.arena-label { position: absolute; left: 44px; bottom: 100px; font-size: 10px; letter-spacing: 2px; display: flex; align-items: center; gap: 9px; }
.arena-label > :last-child { color: var(--muted); margin-left: 15px; font-size: 8px; }
.round-panel { position: absolute; right: 42px; bottom: 99px; width: 272px; pointer-events: auto; padding: 22px; background: #0e181de8; border: 1px solid #dbece328; border-radius: 5px; backdrop-filter: blur(12px); }
.round-panel[hidden] { display: none; }
h2 { font-size: 27px; letter-spacing: -.7px; font-weight: 400; margin: 10px 0; }
.round-panel p { font-size: 12px; color: #aab8b3; line-height: 1.6; margin: 0 0 20px; }
.round-panel .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 15px; border: 0; border-radius: 3px; background: var(--acid); color: #1c2714; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s; }
.primary-button:hover { background: #ecddff; transform: translateY(-1px); }
.primary-button span { font-size: 20px; line-height: 14px; }
.footer { position: fixed; bottom: 0; left: 42px; right: 42px; height: 70px; border-top: 1px solid #ecf2dc20; display: flex; align-items: center; justify-content: space-between; z-index: 3; pointer-events: none; gap: 12px; }
.controls { display: flex; gap: 24px; font-size: 10px; color: #aab8b3; }
kbd { font: inherit; font-size: 8px; color: #d5ded7; border: 1px solid #ffffff25; border-radius: 3px; padding: 4px 6px; margin-right: 7px; }
.footer-note { font-size: 8px; letter-spacing: 1.9px; color: var(--muted); }
.target-label { position: absolute; pointer-events: none; z-index: 2; padding: 7px 11px; background: #101c24e6; border: 1px solid #d1f38380; border-radius: 3px; color: #e2fac0; font: 10px SUSE, sans-serif; letter-spacing: .4px; white-space: nowrap; transform: translate(-50%, -160%); }
#hit-feedback { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); color: var(--acid); font-size: 19px; letter-spacing: 2px; opacity: 0; text-shadow: 0 2px 14px #000; }
#hit-feedback.pop { animation: hit .9s ease-out; }
@keyframes hit { 0% { opacity: 0; translate: 0 12px; } 20%, 60% { opacity: 1; } 100% { opacity: 0; translate: 0 -20px; } }
@media (max-width: 900px) { .edition { display: none; } .event-title { top: 135px; } .scoreboard { top: 135px; width: 215px; } .round-panel { width: 235px; } .footer-note { display: none; } }
@media (max-width: 600px) { .masthead { height: 78px; margin: 0 20px; } .brand-mark { font-size: 42px; } .brand-name { font-size: 9px; } .brand-name small { font-size: 6px; } .quiet-button { font-size: 0; padding: 9px; } .quiet-button span { font-size: 18px; margin: 0; } .event-title { top: 102px; left: 20px; } .event-title .eyebrow { font-size: 7px; letter-spacing: 1.2px; } h1 { font-size: 39px; letter-spacing: -2px; margin-top: 12px; } .event-title p { display: none; } .scoreboard { top: 101px; right: 20px; width: 148px; padding: 12px; } .round-label { font-size: 6px; letter-spacing: .5px; gap: 5px; } .stats { margin-top: 14px; } .stats strong { font-size: 29px; } .stat-label { font-size: 6px; letter-spacing: 1px; } .stats > :last-child { padding-left: 10px; } .scoreboard p { display: none; } .timer-track { margin-top: 8px; } .round-panel { left: 20px; right: 20px; bottom: 77px; width: auto; padding: 16px; } .round-panel h2 { font-size: 22px; margin: 5px 0; } .round-panel p { font-size: 11px; margin-bottom: 12px; } .arena-label { display: none; } .footer { left: 20px; right: 20px; height: 58px; } .controls { width: 100%; justify-content: space-between; gap: 8px; font-size: 8px; } .controls > :last-child { display: none; } kbd { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 600px) { h1 { font-size: 32px; } }