:root { color-scheme: dark; --ink:#f0f4ff; --muted:#9aa6c8; --cyan:#4cecff; --pink:#fa62ca; --panel:rgba(13,18,49,.72); }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 12% 13%,#3d257f88,transparent 28rem),radial-gradient(circle at 90% 85%,#005d7777,transparent 29rem),linear-gradient(130deg,#050611,#0b1030 55%,#06101e); user-select:none; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:42px 42px; }
.app { min-height:100vh; display:grid; place-items:center; padding:clamp(14px,4vw,52px); }
.game-card { width:min(1080px,100%); padding:clamp(18px,3.2vw,34px); border:1px solid #b5d7ff2b; border-radius:28px; background:linear-gradient(135deg,#192656bd,#060a22bb); box-shadow:0 28px 90px #0008,inset 0 1px #fff2; backdrop-filter:blur(18px); }
.header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }.eyebrow { margin:0 0 5px; color:var(--cyan); font-size:.69rem; font-weight:800; letter-spacing:.2em; }.header h1 { margin:0; font-size:clamp(2rem,5vw,3.1rem); line-height:.9; letter-spacing:-.08em; }.connection { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.75rem; font-weight:700; }.connection i { width:9px; height:9px; border-radius:50%; background:#eeb55c; box-shadow:0 0 10px currentColor; }.connection.online { color:#5bffbf; }.connection.online i { background:#5bffbf; }.connection.offline { color:#ff789e; }.connection.offline i { background:#ff789e; }
.lobby { display:grid; grid-template-columns:1fr minmax(280px,.8fr); gap:clamp(28px,7vw,80px); align-items:center; min-height:410px; padding:clamp(22px,5vw,64px); border:1px solid #b5d7ff22; border-radius:19px; background:#050a21a6; box-shadow:inset 0 0 50px #1f52a222; }.lobby h2 { max-width:480px; margin:0; font-size:clamp(2rem,5vw,3.6rem); line-height:.95; letter-spacing:-.07em; }.lobby-copy>p:last-child { max-width:440px; color:var(--muted); line-height:1.7; }.lobby-actions { display:grid; gap:12px; }.name-field { display:grid; gap:6px; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.name-field input { min-height:48px; width:100%; border:1px solid #b8ddff2e; border-radius:10px; padding:0 12px; color:var(--ink); background:#030719aa; font:800 .9rem inherit; letter-spacing:.06em; outline:none; }.name-field input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #4cecff18; }.button { min-height:48px; padding:10px 15px; border:1px solid #b8ddff2e; border-radius:11px; color:var(--ink); font:700 .85rem inherit; cursor:pointer; transition:transform .18s,filter .18s; }.button:hover { transform:translateY(-2px); filter:brightness(1.15); }.primary { border:0; background:linear-gradient(110deg,#08cce8,#9a68ff); box-shadow:0 10px 24px #4569da66; }.secondary { background:#ffffff0d; }.join-form { display:grid; gap:6px; margin-top:7px; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.join-form>div { display:flex; gap:8px; }.join-form input { min-width:0; flex:1; border:1px solid #b8ddff2e; border-radius:10px; padding:0 12px; color:var(--ink); background:#030719aa; font:800 .9rem inherit; letter-spacing:.11em; outline:none; text-transform:uppercase; }.join-form input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #4cecff18; }
.hidden { display:none!important; }.game-view { display:grid; gap:16px; }.scoreboard { display:flex; justify-content:center; align-items:end; gap:clamp(18px,6vw,70px); text-align:center; }.scoreboard div { display:grid; gap:2px; min-width:92px; }.scoreboard span { color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.12em; }.scoreboard strong { font-size:clamp(2.5rem,7vw,4.5rem); line-height:.82; letter-spacing:-.09em; }.scoreboard b { padding-bottom:5px; color:#ffffff55; font-size:2.2rem; }.arena-wrap { position:relative; overflow:hidden; border:1px solid #b5d7ff33; border-radius:18px; background:#04081c; box-shadow:inset 0 0 45px #327af333,0 18px 38px #0004; touch-action:none; }.arena-wrap canvas { display:block; width:100%; height:auto; aspect-ratio:5/3; cursor:none; }.arena-status { position:absolute; inset:0; display:grid; place-content:center; gap:6px; padding:20px; text-align:center; pointer-events:none; background:#03061c70; }.arena-status.hidden { opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; }.arena-status span { color:var(--cyan); font-size:.7rem; font-weight:800; letter-spacing:.18em; }.arena-status strong { font-size:clamp(1.5rem,4vw,2.5rem); letter-spacing:-.06em; text-shadow:0 0 24px #9664ff; }.arena-status small,.game-footer { color:var(--muted); font-size:.75rem; }.game-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; }.text-button { border:0; color:var(--cyan); background:none; font:700 .75rem inherit; cursor:pointer; }.text-button:hover { color:#fff; }kbd { display:inline-block; min-width:18px; padding:1px 4px; border:1px solid #d6e6ff38; border-radius:4px; color:#ecf5ff; background:#ffffff12; font:inherit; font-size:.7rem; text-align:center; }
.repo-link { justify-self:center; color:var(--muted); font-size:.72rem; text-decoration:none; transition:color .18s ease, text-shadow .18s ease; }
.repo-link:hover { color:var(--cyan); text-shadow:0 0 12px #4cecff99; }
.lobby-copy .repo-link { display:inline-block; margin-top:16px; }
@media (max-width:680px) { .header { margin-bottom:20px; }.lobby { grid-template-columns:1fr; min-height:0; }.game-footer { align-items:center; flex-direction:column; text-align:center; }.connection { font-size:.68rem; } }

.arena-wrap canvas { cursor:auto; }
.arena-wrap.playing canvas { cursor:none; }