@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700;800&display=swap');
:root { color-scheme: dark; --ink:#07131e; --paper:#e8f4f4; --muted:#8eabb8; --accent:#c5ed80; --line:#a8c8d62a; font-family:Barlow,Arial,sans-serif; color:var(--paper); background:var(--ink); }
.mode-buttons { display:grid; grid-template-columns:1.1fr 1fr; gap:10px; }
.online-button { background:#112534; border:1px solid #a0bdcc55; color:#d6e9ef; font-size:10px; font-weight:700; letter-spacing:1px; }
.online-button:hover { border-color:var(--accent); color:var(--accent); }
.mode-hint { color:#7f9aa9; font-size:10px; margin:9px 0 0; }
* { box-sizing:border-box; } body { margin:0; overflow:hidden; } button,input { font:inherit; } button,a,input { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; } [hidden] { display:none!important; }
#game { position:fixed; inset:0; } canvas { display:block; width:100%; height:100%; } .vignette { position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,#07131ef5 0%,#07131eb8 27%,#07131e00 65%),linear-gradient(0deg,#07131ed9 0%,transparent 20%,transparent 75%,#07131e91); transition:opacity .5s; } body.playing .vignette { opacity:.2; }
.topbar { position:absolute; top:0; left:0; width:100%; padding:30px 38px; display:flex; align-items:center; gap:20px; } .brand { display:flex; align-items:center; text-decoration:none; color:var(--paper); font-size:31px; font-weight:800; letter-spacing:-1.6px; gap:12px; } .brand-mark { color:var(--accent); font-size:32px; letter-spacing:-7px; transform:skewX(-12deg); margin-right:9px; } .brand-sub { font-size:9px; letter-spacing:2px; font-weight:600; border-left:1px solid var(--line); padding-left:17px; margin-left:8px; max-width:85px; line-height:1.7; } .live-tag { margin-left:auto; display:flex; align-items:center; gap:9px; color:#b8cbd4; font-size:10px; letter-spacing:1.8px; } .live-tag>span:first-child,.status-dot { background:var(--accent); width:5px; height:5px; border-radius:50%; display:inline-block; box-shadow:0 0 9px #c5ed8055; } .icon-button { border:1px solid #b7d7e34a; background:#0c1d2a77; color:var(--paper); width:30px; height:30px; border-radius:50%; margin-left:8px; }
.scoreboard { position:absolute; top:27px; left:50%; transform:translateX(-50%); display:flex; height:68px; background:#0c1d2ae6; border:1px solid #91b1c233; box-shadow:0 8px 35px #0003; backdrop-filter:blur(12px); } .team { display:flex; align-items:center; gap:18px; padding:0 21px; min-width:126px; border-bottom:3px solid #80c5ed; } .team.away { border-color:#ef8c7f; } .team-code { font-size:10px; font-weight:700; letter-spacing:1.6px; } .team strong { font-family:'Barlow Condensed',Impact,sans-serif; font-size:36px; font-weight:600; line-height:1; } .clock { min-width:106px; text-align:center; display:flex; flex-direction:column; justify-content:center; border-inline:1px solid var(--line); } .clock>span { color:var(--accent); font-size:8px; letter-spacing:1.5px; font-weight:600; } .clock>strong { font-family:'Barlow Condensed',Impact,sans-serif; font-size:27px; letter-spacing:1px; line-height:1.15; font-variant-numeric:tabular-nums; } .clock>small { color:#829ba8; font-size:7px; letter-spacing:1.8px; }
.lobby { position:absolute; top:50%; left:7%; width:360px; transform:translateY(-44%); } .eyebrow { display:flex; align-items:center; gap:11px; font-size:9px; letter-spacing:2px; color:var(--accent); font-weight:600; } .tiny-line { width:23px; height:1px; background:var(--accent); } h1 { font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; font-size:clamp(54px,5.7vw,88px); text-transform:uppercase; font-weight:700; letter-spacing:-1.7px; line-height:.97; margin:24px 0; } h1 span { color:#92adb9; } .intro { color:#9ab2bf; font-size:14px; line-height:1.65; margin:0 0 30px; } form>label:first-child { font-size:9px; font-weight:700; letter-spacing:1.6px; display:flex; justify-content:space-between; align-items:center; } form>label>span { color:#6f8a99; font-size:9px; font-weight:400; letter-spacing:0; text-transform:none; } .room-field { display:flex; align-items:center; gap:12px; border-bottom:1px solid #90aab657; background:#b0d3e008; padding:12px 14px; margin:8px 0 12px; } .room-field>span { color:#658291; font-size:20px; } .room-field input { border:0; outline:none; background:transparent; color:#e5f1f7; width:100%; font-size:15px; letter-spacing:1px; } .checkbox { display:flex; align-items:center; gap:6px; margin:15px 0 20px; font-size:11px; } .checkbox>span { font-size:11px; color:#a6bac6; } input[type=checkbox] { accent-color:var(--accent); width:12px; height:12px; } .checkbox small { margin-left:auto; color:#66818f; font-size:9px; } .primary-button,.secondary-button { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; padding:17px 21px; letter-spacing:1.4px; font-size:11px; font-weight:700; } .primary-button { background:var(--accent); color:#17251c; transition:background .2s,transform .2s; } .primary-button:hover { background:#dbffa0; transform:translateY(-1px); } .primary-button span:last-child { font-size:20px; line-height:12px; } button:disabled { opacity:.4; cursor:wait; } .secondary-button { background:transparent; color:#b2c6d1; padding:17px 0; font-size:11px; font-weight:500; letter-spacing:.2px; border-bottom:1px solid var(--line); } .secondary-button:hover { color:var(--accent); } .lobby-footnote { display:flex; align-items:center; gap:8px; font-size:9px; color:#6c8998; margin-top:21px; } .footnote-divider { opacity:.5; margin:0 4px; } .error { color:#ffafa2; font-size:12px; line-height:1.4; margin:10px 0 0; min-height:0; } .error:empty { display:none; }
.arena-label { position:absolute; right:5%; bottom:130px; display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:2px; color:#85a5b7; } .arena-label strong { color:#cedfe7; font-weight:500; } .arena-label-sub { position:absolute; right:0; top:23px; font-size:8px; letter-spacing:1.8px; color:#587887; } body.playing .arena-label { display:none; } .bottom-bar { position:absolute; inset:auto 38px 0; height:66px; border-top:1px solid var(--line); display:flex; align-items:center; gap:20px; font-size:9px; color:#86a5b6; letter-spacing:1px; } .room-info { display:flex; align-items:center; gap:12px; } .label { color:#547482; font-size:8px; } .room-info strong { color:#b4ccd8; font-size:10px; font-weight:500; } .separator { height:12px; width:1px; background:var(--line); margin:0 3px; } .debug-control { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:8px; white-space:nowrap; } #ping { color:#b5d898; padding-left:18px; } .play-controls { display:flex; align-items:center; gap:9px; letter-spacing:0; font-size:10px; } #team-direction { color:var(--accent); margin-right:10px; } kbd { font:9px Barlow,Arial,sans-serif; border:1px solid #9cb4c04a; padding:3px 5px; color:#d2e2ea; border-radius:2px; } #leave-button { border:0; border-left:1px solid var(--line); padding-left:15px; margin-left:6px; background:none; color:#b0c5d0; font-size:10px; }
.help-panel { position:absolute; z-index:4; right:35px; top:100px; width:340px; padding:24px; border:1px solid #65859855; background:#0a1b29f5; box-shadow:0 20px 100px #0008; backdrop-filter:blur(20px); } .help-panel h2 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:25px; font-weight:500; margin:0 0 24px; } dl { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px 10px; font-size:11px; } dt { color:#b6cbd5; } dd { color:#789aaa; margin:0; text-align:right; } .help-panel p { border-top:1px solid var(--line); padding-top:15px; margin-bottom:0; font-size:11px; line-height:1.7; color:#86a6b8; } .fatal-error { position:absolute; top:45%; left:25%; right:25%; padding:25px; background:#301c24f5; color:#ffb7a9; border:1px solid #9f5050; }
.playing .topbar { background:linear-gradient(#07131eaa,transparent); }
.playing .bottom-bar { background:#091b2bef; inset-inline:20px; bottom:14px; height:50px; padding:0 18px; border:1px solid #9fbdd633; }
@media(max-width:1000px) { .topbar { padding:20px; } .brand-sub { display:none; } .scoreboard { top:22px; } .team { min-width:90px; padding:0 13px; gap:12px; } .clock { min-width:90px; } .lobby { left:5%; width:310px; } .bottom-bar { inset-inline:20px; } .play-controls { gap:5px; } .room-info .label,.play-controls>kbd { display:none; } }
@media(max-width:650px) { .scoreboard { top:78px; height:57px; } .team { min-width:92px; } .live-tag { font-size:8px; letter-spacing:1px; } .lobby { top:53%; left:7%; width:86%; max-width:340px; transform:translateY(-36%); } h1 { font-size:57px; margin:17px 0; } .intro { font-size:12px; margin-bottom:18px; } .eyebrow { font-size:8px; } .arena-label,.lobby-footnote,.debug-control,.play-controls>kbd,.room-info .separator,#player-count { display:none; } .bottom-bar { height:52px; font-size:8px; justify-content:space-between; } .room-info { gap:5px; } .help-panel { right:5%; top:145px; width:90%; max-width:340px; } .vignette { background:linear-gradient(90deg,#07131eea,#07131e85 65%,#07131e30); } #team-direction { font-size:9px; } .fatal-error { left:5%; right:5%; } }
@media(max-height:720px) and (min-width:651px) { .lobby { top:54%; transform:translateY(-44%); } h1 { font-size:62px; margin:15px 0; } .intro { margin-bottom:16px; } .lobby-footnote { margin-top:12px; } .checkbox { margin:10px 0 14px; } }