*{margin:0;padding:0;box-sizing:border-box}
/* Golden ratio spacing scale — każda wartość ≈ φ × poprzedniej (φ ≈ 1.618).
Używane konsekwentnie w paddingach, gap'ach i marginesach dla spójnego rytmu UI. */
:root{
--sp-1: 4px; /* micro — kick-link, badge */
--sp-2: 6px; /* small — audio-controls gap, compact padding */
--sp-3: 10px; /* medium — standard button padding, card inner */
--sp-4: 16px; /* large — lobby input, section margin */
--sp-5: 26px; /* xl — hero button padding, body outer */
--sp-6: 42px; /* xxl — major section gaps */
}
body{background:var(--bg);min-height:100dvh;font-family:'Orbitron','Segoe UI',sans-serif;color:var(--text)}
body.game-active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100dvh;min-height:0;overflow:hidden;touch-action:none;user-select:none}
canvas{border:1px solid var(--border-strong);border-radius:8px;display:block;cursor:none;width:min(1080px,100vw,calc((100dvh - 380px) * 2));height:auto;aspect-ratio:2/1}
/* Preview canvasy w panelu ustawień mają naturalny rozmiar z atrybutów width/height.
Bez override dziedziczą globalne style canvasa gry (100vw aspect-ratio 2/1), co rozdyma je do szerokości ekranu.
Użytkownik ma jeszcze setProperty('width','...','important') per tile w JS — to nadpisuje zarówno globalny canvas jak i ten override. */
#settings-modal canvas{aspect-ratio:auto!important;border:none!important;cursor:pointer!important;display:inline-block!important;border-radius:4px;background:rgba(15,17,23,0.9);outline-offset:-2px}
.settings-tab-btn{background:transparent;border:none;color:var(--text-muted);padding:var(--sp-2) var(--sp-3);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.settings-tab-btn:hover{color:var(--text)}
.settings-tab-btn.active{color:var(--warn);border-bottom-color:var(--warn)}
.settings-tab-pane{display:none}
.settings-tab-pane.active{display:block}
.lobby{text-align:center;padding:var(--sp-4);width:100%}
.lobby h1{font-size:48px;font-weight:300;letter-spacing:.05em;margin-bottom:var(--sp-5)}
.lobby-logo{max-width:320px;width:90%;height:auto;display:block;margin:0 auto var(--sp-5)}
.lobby input{background:rgba(15,17,23,0.8);border:1px solid rgba(56,189,248,0.5);color:var(--text);padding:var(--sp-3) var(--sp-4);border-radius:3px;font-size:16px;font-family:inherit;width:260px;text-align:center;outline:none;box-shadow:0 0 10px rgba(56,189,248,0.15),inset 0 0 8px rgba(56,189,248,0.05);transition:all 150ms}
.lobby .field-label{display:block;font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--text-subtle);text-transform:uppercase;margin-bottom:var(--sp-3);text-align:center}
.lobby input:focus{border-color:var(--accent);box-shadow:0 0 18px rgba(56,189,248,0.55),inset 0 0 10px rgba(56,189,248,0.15)}
.lobby button:not(.btn){display:block;margin:var(--sp-4) auto 0;padding:var(--sp-3) var(--sp-6);background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:3px;font-size:16px;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:0.12em;font-weight:500;box-shadow:0 0 12px rgba(56,189,248,0.35);transition:all 150ms}
.lobby button:not(.btn):hover{background:rgba(56,189,248,0.12);box-shadow:0 0 22px rgba(56,189,248,0.7);text-shadow:0 0 6px rgba(56,189,248,0.8)}
.lobby-divider{margin:var(--sp-4) auto var(--sp-3);font-size:11px;color:var(--text-subtle);letter-spacing:.2em;text-transform:uppercase}
.lobby-actions{display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}
.lobby button.secondary,.lobby a.secondary{color:var(--text-subtle);border-color:var(--border-secondary);font-size:13px;padding:var(--sp-3) var(--sp-5);margin:0;box-shadow:none;font-weight:400}
.lobby a.secondary{display:inline-block;text-align:center;text-decoration:none;background:transparent;border:1px solid var(--border-secondary);border-radius:3px;font-family:inherit;text-transform:uppercase;letter-spacing:.12em}
.lobby button.secondary:hover,.lobby a.secondary:hover{color:var(--text-muted);border-color:var(--text-subtle);background:rgba(107,112,128,0.08);box-shadow:0 0 8px rgba(107,112,128,0.25);text-shadow:none}
#kick-msg{display:none;color:var(--bad);font-size:13px;margin:0 auto var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--bad);border-radius:3px;max-width:320px;background:rgba(248,113,113,0.08);box-shadow:0 0 10px rgba(248,113,113,0.25);text-shadow:0 0 4px rgba(248,113,113,0.6);text-align:center}
.hud-spectators-label{font-size:10px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--sp-3);margin-bottom:var(--sp-1);padding:0 var(--sp-1)}
.hud-spectator{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-1) var(--sp-2);font-size:11px;background:rgba(30,35,47,0.3);border-radius:2px;margin-bottom:2px}
#lobby-id .host-hint{display:block;font-size:9px;color:var(--warn);margin-top:2px;letter-spacing:.06em;text-shadow:0 0 4px rgba(251,191,36,0.5)}
#host-bot-controls{display:none;margin-top:var(--sp-1);font-size:10px;color:var(--text-subtle);letter-spacing:.06em;text-transform:uppercase}
#host-bot-controls.visible{display:block}
#host-bot-controls button{background:transparent;border:1px solid var(--text-muted);color:var(--text-muted);font-size:11px;padding:1px var(--sp-2);border-radius:3px;cursor:pointer;font-family:'Orbitron',sans-serif;margin-left:var(--sp-1);box-shadow:0 0 4px rgba(156,163,175,0.3)}
#host-bot-controls button:hover{background:rgba(156,163,175,0.15);color:#fff;box-shadow:0 0 8px rgba(156,163,175,0.6)}
.lobby .hint{color:var(--text-subtle);font-size:12px;margin-top:var(--sp-6);line-height:1.8}
.lobby .hint span{color:var(--text);background:var(--bg-code);padding:1px var(--sp-2);border-radius:3px;font-family:monospace;font-size:11px;border:1px solid var(--border-strong)}
/* 2-kolumnowy układ kroków lobby + lista sterowania */
.step-layout{display:flex;gap:var(--sp-6);align-items:center;justify-content:center;flex-wrap:wrap;max-width:860px;margin:0 auto}
.step-content{flex:0 1 360px;min-width:280px;text-align:center}
.step-content h2{font-size:20px;font-weight:400;letter-spacing:.05em;color:var(--text-strong);margin-bottom:var(--sp-4);text-transform:uppercase}
.step-content .welcome{font-size:24px;font-weight:300;letter-spacing:.04em;color:var(--text);margin-bottom:var(--sp-5)}
.step-content .welcome .user{color:var(--accent);text-shadow:0 0 6px rgba(56,189,248,0.5)}
.step-content .back-link{display:inline-block;margin-top:var(--sp-4);font-size:11px;color:var(--text-subtle);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.step-content .back-link:hover{color:var(--text-muted);text-decoration:underline}
.lobby-account-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5)}
.step-controls{flex:0 1 280px;min-width:240px;text-align:left;padding-top:var(--sp-2)}
.step-controls h3{font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--text-subtle);text-transform:uppercase;margin-bottom:var(--sp-4);border-bottom:1px solid var(--border-strong);padding-bottom:var(--sp-3)}
.controls-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.controls-list li{display:flex;align-items:center;gap:var(--sp-3);font-size:12px;color:var(--text-muted);line-height:1.4}
.controls-list .key{display:inline-block;color:var(--text);background:var(--bg-code);padding:var(--sp-1) var(--sp-3);border-radius:3px;font-family:monospace;font-size:11px;border:1px solid var(--border-strong);min-width:68px;text-align:center;flex-shrink:0;letter-spacing:.03em}
.controls-list .desc{color:var(--text-muted)}
.creators{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.creators-label{font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--text-subtle);text-transform:uppercase;margin-bottom:var(--sp-3)}
.creators-names{font-size:12px;color:var(--text-muted);line-height:1.5}
/* Primary CTA + secondary buttons w kroku 2 */
.step-content button.primary{background:transparent;color:var(--accent);border:2px solid var(--accent);padding:var(--sp-3) var(--sp-6);font-size:16px;letter-spacing:.14em;box-shadow:0 0 18px rgba(56,189,248,0.45);margin-bottom:var(--sp-4)}
.step-content button.primary:hover{background:rgba(56,189,248,0.18);box-shadow:0 0 28px rgba(56,189,248,0.8)}
#register-btn:hover{background:rgba(251,191,36,0.14)!important;box-shadow:0 0 18px rgba(251,191,36,0.6)!important}
/* Inline formularz dołączania do znajomego */
.inline-form{margin-top:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border-strong);border-radius:4px;background:rgba(15,17,23,0.6)}
.inline-form .inline-form-title{font-size:11px;color:var(--text-subtle);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--sp-3)}
.inline-form input{width:200px!important;padding:var(--sp-3) var(--sp-3)!important;font-size:14px!important}
.inline-form .actions{display:flex;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-3)}
.inline-form .actions button{margin:0!important;padding:var(--sp-2) var(--sp-4)!important;font-size:12px!important}
.inline-form .form-error{font-size:11px;color:var(--bad);margin-top:var(--sp-3);min-height:14px;text-align:center}
/* Stopka lobby + gra */
.site-footer{width:100%;align-self:stretch;display:flex;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-4) var(--sp-4);margin-top:var(--sp-5);border-top:1px solid var(--border);font-size:11px;color:var(--text-subtle);letter-spacing:.06em}
.site-footer a{color:var(--text-subtle);text-decoration:none;transition:color 120ms}
.site-footer a:hover{color:var(--text-muted);text-decoration:underline}
.copyright-bar{width:100%;align-self:stretch;text-align:center;padding:var(--sp-3) var(--sp-4);font-size:10px;letter-spacing:.08em;color:var(--text-faint);background:var(--bg-elev);border-top:1px solid var(--border-subtle)}
/* Nagłówek strony (widoczny na ekranie gry) */
.site-header{position:sticky;top:0;z-index:50;width:100%;padding:var(--sp-3) var(--sp-3);background:rgba(11,15,26,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
/* Width zsynchronizowana z .top-bar (1080px) — logo po lewej i nav po prawej są na pionowych
liniach krawędzi canvas (1080px). Wcześniej 1000px → niespójne wyrównanie z polem gry. */
.site-header-inner{width:min(1080px,100%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4)}
#game-header{align-self:stretch;display:flex;width:100%}
.site-header .hdr-logo-link{display:flex;align-items:center;text-decoration:none;cursor:pointer}
.site-header .hdr-logo{height:64px;width:auto;opacity:.9;transition:opacity 150ms}
.site-header .hdr-logo-link:hover .hdr-logo{opacity:1}
.site-header .hdr-url{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:500;letter-spacing:.14em;color:var(--accent);text-transform:lowercase;text-shadow:0 0 8px rgba(56,189,248,0.5)}
.site-header .hdr-url .dot{color:var(--text-subtle);text-shadow:none}
/* Podczas gry wyłączamy backdrop-filter na stickym headerze — kompozytor inaczej
re-blurował obszar canvasa pod nim w każdej klatce, co cappuje FPS do 30. */
body.game-active .site-header{backdrop-filter:none;background:var(--bg)}
/* Branding przygaszony w trybie gry — to jest gra, nie homepage. Logo z 64→36px,
URL ukryty (zwalnia ~120px w nav-barze, mieści się więcej akcji bez wrap'u). */
body.game-active .site-header .hdr-logo{height:36px}
body.game-active .site-header .hdr-url{display:none}
#game .site-footer{margin-top:var(--sp-4)}
@media (max-width: 700px){
.step-layout{flex-direction:column;gap:var(--sp-4)}
.step-controls{border-top:1px solid var(--border-strong);padding-top:var(--sp-4);margin-top:var(--sp-3);text-align:center}
.site-header{padding:var(--sp-3) var(--sp-3)}
.site-header .hdr-logo{height:22px}
.site-header .hdr-url{font-size:12px}
}
#game{display:none;position:relative}
.top-bar{display:flex;justify-content:space-between;align-items:center;width:min(1080px,100vw,calc((100dvh - 380px) * 2));padding:var(--sp-2) var(--sp-1);flex-wrap:wrap;gap:var(--sp-3)}
#lobby-id{font-size:11px;color:var(--text-subtle);letter-spacing:.12em;text-transform:uppercase;font-family:'Orbitron',sans-serif;display:inline-flex;align-items:center;gap:var(--sp-3)}
#lobby-id .val{color:var(--accent);font-weight:600;text-shadow:0 0 4px rgba(56,189,248,0.5);margin-left:var(--sp-1)}
#lobby-id .lobby-copy-btn{margin-left:var(--sp-1)}
#stats-bar{display:flex;justify-content:center;gap:var(--sp-5);width:min(1080px,100vw,calc((100dvh - 380px) * 2));padding:var(--sp-1) 0;font-size:13px;color:var(--text-subtle);letter-spacing:.05em}
#stats-bar .stat{display:flex;align-items:baseline;gap:var(--sp-2)}
#stats-bar .stat .num{font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 0 6px currentColor}
#stats-bar .stat.kills .num{color:var(--ok)}
#stats-bar .stat.deaths .num{color:var(--bad)}
#stats-bar .label{text-transform:uppercase;font-size:11px}
.hud{display:flex;flex-wrap:wrap;gap:var(--sp-3);flex:1}
.hud-player{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3);font-size:11px;padding:var(--sp-2) 0;border-bottom:1px solid rgba(56,189,248,0.1);min-height:46px}
.hud-player:last-child{border-bottom:none}
.hud-player-empty{justify-content:center;align-items:center;color:var(--border-secondary);font-size:10px;font-style:italic;letter-spacing:.06em}
.add-bot-picker{display:flex;gap:var(--sp-1);justify-content:center;align-items:center;flex-wrap:wrap}
.add-bot-btn{background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:3px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;font-family:'Orbitron',sans-serif;font-size:9px;border-width:1px;border-style:solid}
.add-bot-btn.noob{border-color:var(--info);color:var(--info);box-shadow:0 0 4px rgba(96,165,250,0.25)}
.add-bot-btn.noob:hover{background:rgba(96,165,250,0.15);box-shadow:0 0 8px rgba(96,165,250,0.55)}
.add-bot-btn.easy{border-color:var(--ok);color:var(--ok);box-shadow:0 0 4px rgba(52,211,153,0.25)}
.add-bot-btn.easy:hover{background:rgba(52,211,153,0.15);box-shadow:0 0 8px rgba(52,211,153,0.55)}
.add-bot-btn.medium{border-color:var(--warn);color:var(--warn);box-shadow:0 0 4px rgba(251,191,36,0.25)}
.add-bot-btn.medium:hover{background:rgba(251,191,36,0.15);box-shadow:0 0 8px rgba(251,191,36,0.55)}
.add-bot-btn.hard{border-color:var(--bad);color:var(--bad);box-shadow:0 0 4px rgba(248,113,113,0.25)}
.add-bot-btn.hard:hover{background:rgba(248,113,113,0.15);box-shadow:0 0 8px rgba(248,113,113,0.55)}
.add-bot-btn.cancel{border-color:var(--text-subtle);color:var(--text-subtle);font-size:12px;padding:1px var(--sp-2)}
.add-bot-btn.cancel:hover{border-color:var(--text-muted);color:var(--text-muted)}
.hud-player .hud-rank{flex:0 0 auto;font-size:15px;color:var(--text-subtle);font-family:monospace;min-width:24px;text-align:center;letter-spacing:.04em}
/* Top 3 — analogicznie do rankingu (ranking.html): poziomy gradient na wiersz + medal zamiast numeru. */
.hud-player--top1{background:linear-gradient(90deg,rgba(251,191,36,0.10),transparent 60%)}
.hud-player--top2{background:linear-gradient(90deg,rgba(203,209,224,0.06),transparent 60%)}
.hud-player--top3{background:linear-gradient(90deg,rgba(217,119,6,0.08),transparent 60%)}
.hud-rank--top1,.hud-rank--top2,.hud-rank--top3{position:relative;font-size:0}
.hud-rank--top1::before,.hud-rank--top2::before,.hud-rank--top3::before{content:'';display:inline-block;width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:contain;vertical-align:middle}
.hud-rank--top1::before{background-image:url("data:image/svg+xml;utf8,")}
.hud-rank--top2::before{background-image:url("data:image/svg+xml;utf8,")}
.hud-rank--top3::before{background-image:url("data:image/svg+xml;utf8,")}
.hud-player .hud-player-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.hud-player-name-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);min-width:0}
.hud-player-name-row .hud-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.hud-player-name-row .hud-actions{display:flex;gap:4px;flex:0 0 auto;align-items:center}
.hud-player-stats-row{display:flex;align-items:center;gap:var(--sp-2);margin-top:2px;min-width:0}
.hud-player-stats-row .hud-hp-half{flex:0 0 50%;width:auto;margin-left:auto}
.hud-player-stats-row .kd-stat{font-size:10px;font-family:monospace;letter-spacing:.04em;white-space:nowrap}
.hp-bar{width:60px;height:8px;background:rgba(15,17,23,0.8);border-radius:2px;border:1px solid rgba(56,189,248,0.3);overflow:hidden;box-shadow:0 0 4px rgba(56,189,248,0.15)}
.hp-fill{height:100%;border-radius:3px;transition:width .1s}
#killfeed{position:absolute;top:8px;right:8px;font-size:11px;text-align:right;pointer-events:none;z-index:10}
.kill-msg{opacity:0;animation:fadeKill 3s forwards;margin-bottom:var(--sp-1);text-shadow:0 0 4px currentColor}
@keyframes fadeKill{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
#dead-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,17,23,.78);align-items:center;justify-content:center;flex-direction:column;z-index:20;padding:var(--sp-4)}
#dead-overlay .msg{font-size:32px;font-weight:300;color:var(--bad);margin-bottom:var(--sp-4)}
#dead-overlay button{padding:var(--sp-3) var(--sp-5);background:transparent;color:var(--accent);border:2px solid var(--accent);border-radius:3px;font-size:14px;cursor:pointer;font-family:inherit;margin-top:var(--sp-3);text-transform:uppercase;letter-spacing:0.12em;box-shadow:0 0 20px rgba(56,189,248,0.5)}
#dead-overlay button:hover{background:rgba(56,189,248,0.15);box-shadow:0 0 28px rgba(56,189,248,0.8);text-shadow:0 0 6px rgba(56,189,248,0.9)}
/* Secondary button — używany przez Replay i HUD przyciski (Odtwórz/Zakończ).
Wyciszony vs primary CTA (Jeszcze raz): brak glow, szary kontur, niskoprofilowy. */
.btn-secondary{padding:var(--sp-2) var(--sp-3);background:transparent;color:var(--slate-fg);border:1px solid var(--slate-border);border-radius:3px;font-size:12px;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:0.10em;box-shadow:none;margin-top:0}
.btn-secondary:hover{background:rgba(148,163,184,0.10);color:var(--slate-fg-hover);border-color:var(--slate-fg)}
#dead-overlay button.btn-secondary{margin-top:var(--sp-3);box-shadow:none;color:var(--slate-fg);border:1px solid var(--slate-border)}
#dead-overlay button.btn-secondary:hover{background:rgba(148,163,184,0.10);color:var(--slate-fg-hover);border-color:var(--slate-fg);box-shadow:none;text-shadow:none}
/* REPLAY mruganie 0.8 Hz. Po dodaniu .frozen na #replay-text — animacja zatrzymana. */
@keyframes replayBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
#replay-text.replay-blink{animation:replayBlink 1.2s steps(1,end) infinite}
#replay-text.frozen{animation:none;opacity:1}
#dead-taunt{text-align:center;max-width:600px;margin-bottom:var(--sp-4)}
#dead-overlay .death-logo{max-width:220px;width:60%;height:auto;margin-bottom:var(--sp-4);opacity:.85}
#dead-taunt .who{font-size:12px;color:var(--text-subtle);margin-bottom:var(--sp-3);letter-spacing:.05em;text-transform:uppercase}
#dead-taunt .txt{font-size:26px;font-weight:400;line-height:1.3}
#countdown-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background:rgba(15,17,23,.35);z-index:22;pointer-events:none}
#countdown-overlay.visible{display:flex}
#countdown-num{font-size:128px;font-weight:300;color:var(--info-strong);text-shadow:0 0 40px rgba(79,142,247,.7);animation:cdPop .7s ease-out both}
#countdown-num.go{color:var(--ok);text-shadow:0 0 40px rgba(52,211,153,.8);font-size:96px}
@keyframes cdPop{0%{transform:scale(2.2);opacity:0}20%{transform:scale(1);opacity:1}100%{transform:scale(.6);opacity:0}}
.ammo{font-size:9px;color:var(--text-subtle);font-family:monospace;letter-spacing:1px}
.admin-toggle{position:fixed;bottom:8px;right:8px;background:var(--bg-code);border:1px solid var(--border-strong);color:var(--text-subtle);padding:var(--sp-1) var(--sp-3);border-radius:4px;font-size:10px;cursor:pointer;z-index:30}
#chat-box{width:min(1080px,100vw,calc((100dvh - 380px) * 2));height:220px;margin-top:var(--sp-3);background:var(--bg);border:1px solid rgba(56,189,248,0.35);border-radius:3px;display:flex;flex-direction:row;overflow:hidden;box-shadow:0 0 14px rgba(56,189,248,0.15)}
#chat-pane{flex:0 0 70%;display:flex;flex-direction:column;border-right:1px solid rgba(56,189,248,0.2)}
#players-pane{flex:1;display:flex;flex-direction:column;padding:var(--sp-2) var(--sp-3);overflow-y:auto;min-width:0}
#players-pane-header{font-size:10px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-1);text-align:center}
#players-pane::-webkit-scrollbar{width:6px}
#players-pane::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
#chat-messages{flex:1;min-height:140px;overflow-y:auto;padding:var(--sp-2) var(--sp-3);font-size:12px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
#chat-messages::-webkit-scrollbar{width:6px}
#chat-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.chat-msg{color:var(--text);word-wrap:break-word}
.chat-msg .who{font-weight:600;margin-right:var(--sp-2)}
.chat-msg .sys{color:var(--text-subtle);font-style:italic}
#chat-input-row{display:flex;border-top:1px solid var(--border-strong);background:var(--bg)}
#chat-input{flex:1;background:transparent;border:none;color:var(--text);padding:var(--sp-2) var(--sp-3);font-size:12px;font-family:inherit;outline:none}
#chat-input::placeholder{color:var(--text-subtle)}
#chat-send{background:transparent;color:var(--accent);border:none;border-left:1px solid rgba(56,189,248,0.3);padding:0 var(--sp-4);font-size:10px;cursor:pointer;font-family:inherit;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all 120ms;line-height:1}
#chat-send:hover{background:rgba(56,189,248,0.12);color:var(--accent-hover);text-shadow:0 0 6px rgba(56,189,248,0.7)}
/* Przyciski top-left w grze — offset od górnej krawędzi 16px+ żeby uniknąć gestu systemowego
(iOS Control Center / Android notification pulldown rezerwują górny pasek ~15-20 px). */
#chat-toggle,#players-toggle,#menu-toggle,#settings-toggle-game,#leave-toggle-game{display:none;position:fixed;top:var(--sp-4);background:rgba(15,17,23,0.9);border:1px solid var(--accent);color:var(--accent);padding:var(--sp-2) var(--sp-3);border-radius:3px;cursor:pointer;z-index:40;font-size:18px;line-height:1;touch-action:manipulation;box-shadow:0 0 10px rgba(56,189,248,0.3);font-family:inherit}
#chat-toggle{left:var(--sp-4)}
#players-toggle{left:68px}
#menu-toggle{left:120px}
#settings-toggle-game{left:172px;border-color:var(--warn);color:var(--warn);box-shadow:0 0 10px rgba(251,191,36,0.3)}
#leave-toggle-game{left:224px;border-color:rgba(248,113,113,.7);color:var(--bad);box-shadow:0 0 10px rgba(248,113,113,0.3)}
#audio-controls{display:none;align-items:center;gap:var(--sp-2);font-family:inherit}
body.game-active #audio-controls{display:inline-flex}
#audio-controls button{background:transparent;border:none;color:var(--accent);cursor:pointer;padding:var(--sp-1);line-height:0;opacity:0.95;display:inline-flex;align-items:center;justify-content:center;height:22px;width:22px;transition:color 120ms,filter 120ms;filter:drop-shadow(0 0 3px rgba(56,189,248,.35))}
#audio-controls button:hover{color:var(--warn);filter:drop-shadow(0 0 5px rgba(251,191,36,.55))}
#audio-controls button.muted{color:var(--text-subtle);opacity:0.55;filter:none}
#audio-controls button svg{width:18px;height:18px;display:block}
#audio-controls input[type=range]{width:60px;accent-color:var(--accent);margin:0 2px}
#audio-controls .sep{color:#374151;margin:0 2px}
#music-title{display:flex;align-items:center;gap:var(--sp-2);width:160px;height:22px;background:rgba(11,15,26,0.85);border:1px solid rgba(56,189,248,.35);border-radius:2px;padding:0 var(--sp-2);font-size:10px;font-family:'Orbitron','Segoe UI',sans-serif;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;box-shadow:inset 0 0 8px rgba(56,189,248,.12)}
#music-title .nowplaying-dots{flex:0 0 12px;width:12px;height:12px;fill:var(--accent);filter:drop-shadow(0 0 3px rgba(56,189,248,.5))}
#music-title .nowplaying-dots rect{transform-origin:center;animation:npBounce 900ms ease-in-out infinite}
#music-title .nowplaying-dots .d2{animation-delay:150ms}
#music-title .nowplaying-dots .d3{animation-delay:300ms}
#music-title.paused .nowplaying-dots rect{animation-play-state:paused;opacity:.35}
#music-title .mt-viewport{flex:1;overflow:hidden;white-space:nowrap;line-height:22px}
#music-title .mt-text{display:inline-block;will-change:transform;animation:mtMarquee var(--mt-dur,14s) linear infinite}
@keyframes npBounce{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.15)}}
/* Tekst duplikowany w JS ("A • A • ") — scroll od 0 do -50% daje gładką pętlę (druga kopia
zaczyna się dokładnie tam gdzie skończył się wyświetlany fragment pierwszej). */
@keyframes mtMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#chat-toggle .badge{display:none;position:absolute;top:-4px;right:-4px;background:var(--bad);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;padding:0 var(--sp-1);line-height:16px;text-align:center}
#chat-toggle.has-unread .badge{display:block}
@media (max-width: 768px){
#c, .top-bar{width:min(1080px,100vw,calc((100dvh - 220px) * 2))}
body.game-active{padding-top:72px}
.site-header{padding:var(--sp-2) var(--sp-3)}
.site-header .hdr-logo{height:48px}
.site-header .hdr-url{font-size:13px}
#chat-toggle,#players-toggle,#menu-toggle,#leave-toggle-game{display:block}
#settings-toggle-game.visible{display:block}
#chat-box{display:none;position:fixed;top:56px;left:8px;right:8px;width:auto;max-height:55vh;margin-top:0;z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#chat-box.open{display:flex}
#chat-messages{height:calc(55vh - 48px);max-height:45vh}
}
/* Tooltip "Jesteś tu sam? Dodaj bota." — styling baseline (poza media query).
Stosowany domyślnie; nadpisywany przez @media (min-width:769px) na desktopie.
Pozycja (top/left) i strzałka (--alone-arrow-left) ustawiane przez JS
(positionAloneTooltip w client-render.js) na podstawie getBoundingClientRect
#players-toggle — odporne na orientację, safe-area-inset, badge widths. */
/* Replay HUD na mobile musi być pod paskiem ikon (top:14 + height:34 = 48). */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape){
#replay-hud{top:56px!important}
}
body.game-active #aloneTooltip.show{display:block;position:fixed;z-index:43;background:rgba(15,17,23,.96);border:1px solid rgba(251,191,36,.8);border-radius:6px;padding:8px 12px;color:var(--warn);font-family:'Orbitron','Segoe UI',sans-serif;font-size:12px;letter-spacing:.02em;line-height:1.3;box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 12px rgba(251,191,36,.35);max-width:220px;cursor:pointer;animation:aloneTipPulse 2s ease-in-out infinite}
body.game-active #aloneTooltip.show::before{content:'';position:absolute;top:-7px;left:var(--alone-arrow-left, calc(50% - 6px));width:12px;height:12px;background:rgba(15,17,23,.96);border-top:1px solid rgba(251,191,36,.8);border-left:1px solid rgba(251,191,36,.8);transform:rotate(45deg)}
@keyframes aloneTipPulse{0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 8px rgba(251,191,36,.3)}50%{box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 18px rgba(251,191,36,.65)}}
/* Mobile-dedicated responsive tweaks (<=600px) — większe tap targets, input font-size 16px
żeby iOS Safari nie robił zoom przy focus (native behavior dla font<16). */
@media (max-width: 600px){
.step-content input[type=text],.step-content input[type=password]{min-height:48px;font-size:16px;padding:var(--sp-3) var(--sp-4)}
.step-content button{min-height:48px;padding:var(--sp-4) var(--sp-5);font-size:15px}
.step-content button.primary{font-size:17px;padding:var(--sp-4) var(--sp-6);min-height:56px}
.step-content .welcome{font-size:20px;margin-bottom:var(--sp-4)}
.step-layout{gap:var(--sp-4);padding:var(--sp-4) var(--sp-4)}
.step-content{min-width:0;flex:1 1 auto}
.step-controls{display:none}
/* Modal rejestracji full-screen na mobile */
#register-modal{padding:0}
#register-modal-box{max-width:none;border-radius:0;padding:var(--sp-5) var(--sp-4);min-height:100vh;box-shadow:none}
/* Cookie banner kompaktowy */
#cookieBanner{padding:var(--sp-3) var(--sp-3);font-size:12px}
/* Register hint box nie może się rozszerzać za bardzo */
.register-hint{padding:var(--sp-3) var(--sp-4)!important;margin:var(--sp-1) auto var(--sp-4)!important;max-width:100%!important}
/* Ukryj game-header na mobile (używa chat-toggle jako nawigacji) */
body.game-active .site-header{display:none}
/* Mniejsze joysticki — 100 px zamiast 140 px (więcej ekranu na grę). */
.touch-stick{width:100px;height:100px}
.stick-base{width:100px;height:100px}
.stick-thumb{width:40px;height:40px}
/* Mniejsze action buttony (aby pasowały do smaller joysticków). */
.mobile-action-btn{width:52px;height:52px;font-size:22px}
#btn-dash,#btn-build{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
/* Hamburger menu — bazowo ukryty, pokazywany w landscape mobile media query. */
/* Top/right offset uwzględnia env(safe-area-inset-*) — iPhone z notch i ekrany z zaokrąglonymi
rogami nie ucinają przycisku. Fallback 0px dla browserów nie wspierających env(). */
.hamburger-btn{display:none;position:fixed;top:calc(var(--sp-3) + env(safe-area-inset-top,0px));right:calc(var(--sp-4) + env(safe-area-inset-right,0px));z-index:60;background:rgba(15,17,23,.85);border:1px solid rgba(56,189,248,.5);color:var(--accent);width:36px;height:36px;padding:0;border-radius:3px;cursor:pointer;font-family:inherit;align-items:center;justify-content:center}
/* SVG ikona hamburgera — flex center gwarantuje pixel-perfect alignment */
.hamburger-btn svg{display:block;flex-shrink:0}
.hamburger-btn:hover{background:rgba(56,189,248,.12);box-shadow:0 0 10px rgba(56,189,248,.5)}
.hamburger-menu{display:none;position:fixed;top:calc(40px + env(safe-area-inset-top,0px));right:calc(var(--sp-4) + env(safe-area-inset-right,0px));z-index:60;background:rgba(15,17,23,.96);border:1px solid rgba(56,189,248,.5);border-radius:3px;padding:var(--sp-1) 0;min-width:180px;box-shadow:0 4px 14px rgba(0,0,0,.55)}
.hamburger-menu.open{display:block}
.hamburger-menu a{display:block;padding:var(--sp-3) var(--sp-4);color:var(--text-muted);text-decoration:none;font-size:12px;letter-spacing:.05em}
.hamburger-menu a:hover{background:rgba(56,189,248,.1);color:var(--accent)}
/* Wyloguj/Zmień login w hamburgerze — czerwony akcent przy zalogowanych. Hover na czerwone tło. */
.hamburger-menu a.hm-account-action{color:var(--bad)}
.hamburger-menu a.hm-account-action:hover{background:rgba(248,113,113,.1);color:var(--bad)}
/* W trybie gry chowamy "Wyloguj" w hamburgerze — gracz najpierw musi zrobić Wyjdź */
body.game-active .hamburger-menu a.hm-account-action{display:none}
/* Mobile landscape — oba ekrany lobby (logowanie + menu) muszą mieścić się bez scrolla.
Kryterium: krótki ekran (<=500 px wysokości) + orientacja pozioma. */
@media (max-height: 500px) and (orientation: landscape){
.lobby{padding:var(--sp-2) var(--sp-3)}
/* Logo wraca do natural flow nad menu — wycentrowane, większe + przestrzeń pod */
.lobby-logo{position:static;max-width:104px;width:auto;margin:var(--sp-2) auto var(--sp-4);display:block}
.step-layout{gap:var(--sp-5);padding:0 var(--sp-3);align-items:center;max-width:720px}
.step-content{flex:1 1 50%;min-width:0;text-align:left}
.step-content .welcome{font-size:15px;margin-bottom:var(--sp-2);text-align:left}
.step-content h2{font-size:14px;margin-bottom:var(--sp-2)}
.step-content .field-label{margin-bottom:var(--sp-1)}
.step-content input[type=text],.step-content input[type=password]{min-height:38px;padding:var(--sp-2) var(--sp-3)}
.step-content button{min-height:38px;padding:var(--sp-2) var(--sp-4);font-size:13px;margin:var(--sp-2) auto 0}
/* PRIMARY "Graj" — pełna szerokość lewej kolumny, generous tap target */
.step-content button.primary{display:block;width:100%;min-height:42px;font-size:15px;padding:var(--sp-2) 0;margin:0 0 var(--sp-2) 0}
.step-content .back-link{margin-top:var(--sp-2)}
/* SECONDARY akcje (Dołącz do znajomych, Prywatny pokój, Ranking) → kompaktowy ghost styl.
Border + tekst neutralnym kolorem. Wąskie 32px wysokości — touch target acceptable
dla rzadko klikanych akcji (HIG min 44 dla critical, 32 dla secondary OK z paddingiem). */
.lobby-actions{gap:var(--sp-2);align-items:stretch}
.lobby-actions button.secondary,.lobby-actions a.secondary{
width:100%;min-height:32px;padding:var(--sp-2) var(--sp-4);font-size:12px;
background:transparent;color:var(--text-subtle);
border:1px solid var(--text-subtle);border-radius:3px;box-shadow:none;
text-transform:uppercase;letter-spacing:.06em;text-align:center;
display:flex;align-items:center;justify-content:center;text-decoration:none;
font-family:inherit;cursor:pointer;transition:all 120ms
}
.lobby-actions button.secondary:hover,.lobby-actions a.secondary:hover{
color:var(--text-muted);border-color:var(--text-muted);
background:rgba(107,112,128,0.1);box-shadow:0 0 8px rgba(107,112,128,0.25)
}
/* Ustawienia + Wyloguj migrują do hamburgera — chowamy block na ekranie startowym */
.lobby-account-actions{display:none}
/* Prawa kolumna: ukryj sterowanie, pokaż creators/register-hint */
.step-controls{display:block;flex:1 1 50%;min-width:0;padding-top:0;margin-top:0;border-top:none;text-align:center;font-size:11px}
.step-controls h3,.controls-list{display:none}
/* Twórcy wycentrowani na mobile landscape (cała prawa kolumna) */
.step-controls .creators{text-align:center;margin:0 auto}
.creators{margin-top:var(--sp-2);padding-top:var(--sp-2)}
.creators-label{margin-bottom:var(--sp-1);font-size:10px}
.creators-names{font-size:11px}
/* Zasady gry link — kompaktowy w landscape */
.rules-link{margin-top:var(--sp-2)!important;font-size:11px!important;padding:var(--sp-1) var(--sp-3)!important}
/* Stopka → hamburger (linki), copyright zostaje ale kompaktowy */
.site-footer{display:none}
.copyright-bar{padding:0 var(--sp-3);font-size:8px;letter-spacing:.06em;line-height:1.4}
.hamburger-btn{display:flex}
/* Register-hint — kompaktowy wariant (działa też gdy JS go przeniesie do prawej kolumny) */
.register-hint{padding:var(--sp-3) var(--sp-3)!important;margin:0 auto var(--sp-3)!important;font-size:11px;max-width:100%!important;line-height:1.35}
.register-hint>div{font-size:12px!important;margin-bottom:var(--sp-3)!important}
.register-hint strong{font-size:13px!important}
.register-hint button{padding:var(--sp-2) var(--sp-4)!important;font-size:11px!important;min-height:32px!important;margin:0 auto!important}
#kick-msg{font-size:11px;padding:var(--sp-2) var(--sp-3);margin:0 auto var(--sp-2);max-width:300px}
/* Input pass-row odstęp kompaktowy */
#pass-row{margin-top:var(--sp-2)!important}
#lobby-msg{margin-top:var(--sp-1)!important}
/* === Ekran gry (body.game-active) na mobile landscape === */
/* Canvas wyśrodkowany z marginesem 32px na górze/dole. Top-bar/stopka ukryte. */
body.game-active{padding:0!important;justify-content:center}
body.game-active .site-header{display:none!important}
body.game-active .top-bar,body.game-active #stats-bar,body.game-active #diagPanel,body.game-active #game .site-footer,body.game-active #game .copyright-bar{display:none!important}
body.game-active #game{width:100vw;height:100dvh;padding:0;margin:0;align-items:center;justify-content:center;overflow:hidden}
/* Canvas: constraint min(dostępna wysokość, dostępna szerokość / 2) — zostawiamy ~88 px na każdy bok
na joystick (80 px + 6 px margines + ~2 px luzu). Wcześniej było 110 px → marnowane miejsce. */
body.game-active #canvas-wrap{display:block!important;height:min(calc(100dvh - 64px), calc((100vw - 176px) / 2));width:auto;margin:var(--sp-5) auto}
body.game-active canvas{height:min(calc(100dvh - 64px), calc((100vw - 176px) / 2))!important;width:auto!important;max-width:calc(100vw - 176px);aspect-ratio:2/1;border:none;border-radius:0;display:block}
/* Slot na lobby-id w panelu chat (aktywny gdy JS go wypełnia) */
#chat-lobby-slot{padding:var(--sp-3) var(--sp-3);border-bottom:1px solid rgba(56,189,248,.2);background:rgba(15,17,23,.6);font-size:11px;color:var(--text-subtle);letter-spacing:.08em;text-transform:uppercase}
/* Panel czatu — pełna wysokość, slide z lewej, zawiera chat + sloty + lobby-id */
/* Chat-box w grze na mobile landscape — ukryty domyślnie (wcześniej wyświetlał się jako
wide blue stripe pod canvasem bo base CSS ma display:flex a 768px media query nie łapał
landscape mobile ≥ 768 px wide jak iPhone 14 landscape 932 px). */
body.game-active #chat-box{display:none!important}
body.game-active #chat-box.open{display:flex!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;width:min(340px,85vw)!important;max-height:none!important;height:100dvh!important;border-radius:0!important;flex-direction:column!important;border-right:1px solid rgba(56,189,248,.35);box-shadow:4px 0 20px rgba(0,0,0,.55)!important}
body.game-active #chat-pane{flex:1 1 auto;min-height:0;border-right:none!important;border-bottom:1px solid rgba(56,189,248,.2)}
body.game-active #players-pane{flex:0 0 auto;max-height:45%;overflow-y:auto;border-right:none!important;padding:var(--sp-2) var(--sp-3)}
body.game-active #chat-messages{height:auto!important;flex:1 1 auto;max-height:none!important;min-height:0}
/* HUD top w grze mobile: music-controls po LEWEJ, przyciski (chat/players/menu/settings/leave)
po PRAWEJ — wszystko w jednej linii top:14, height:34 (iOS safe gesture zone ~15-20 px).
Kolejność (od prawej krawędzi): leave, settings, menu, players, chat. */
body.game-active #chat-toggle,body.game-active #players-toggle,body.game-active #menu-toggle,body.game-active #settings-toggle-game.visible,body.game-active #leave-toggle-game{display:block!important;top:14px!important;background:rgba(15,17,23,.9)!important;border:1px solid rgba(56,189,248,.7)!important;color:var(--accent)!important;padding:var(--sp-2) var(--sp-3)!important;font-size:16px!important;z-index:42!important;height:34px;line-height:20px;left:auto!important}
body.game-active #chat-toggle{right:216px!important}
body.game-active #players-toggle{right:166px!important}
body.game-active #menu-toggle{right:116px!important}
body.game-active #settings-toggle-game.visible{right:66px!important;border-color:rgba(251,191,36,.7)!important;color:var(--warn)!important}
body.game-active #leave-toggle-game{right:16px!important;border-color:rgba(248,113,113,.7)!important;color:var(--bad)!important}
/* "Jesteś tu sam? Dodaj bota." — styling tylko; pozycja (top/left) i pozycja strzałki
(--alone-arrow-left) ustawiane przez JS (positionAloneTooltip) na podstawie
getBoundingClientRect #players-toggle. Patrz client-render.js. */
/* Audio-controls — ta sama linia (top:14) po lewej. Zmniejszamy szerokość music-title
i volume slider, żeby zmieściło się na ekranach ~360 px obok 4 buttons po prawej. */
body.game-active #audio-controls{display:inline-flex!important;position:fixed!important;top:14px!important;left:16px!important;right:auto!important;z-index:42!important;padding:0!important;font-size:13px!important;background:transparent!important;border:none!important;height:34px!important;align-items:center!important}
body.game-active #audio-controls #music-title{width:90px!important;height:22px!important;font-size:9px!important}
body.game-active #audio-controls input[type=range]{width:42px!important}
/* Lobby ID na środku HUD-a (między audio-controls po lewej a buttons po prawej). */
body.game-active #lobby-id{display:flex!important;position:fixed!important;top:14px!important;left:50%!important;transform:translateX(-50%)!important;z-index:42!important;height:34px!important;align-items:center!important;gap:var(--sp-2)!important;font-size:11px!important;letter-spacing:.04em!important;background:rgba(15,17,23,0.85)!important;border:1px solid rgba(56,189,248,.5)!important;padding:0 var(--sp-3)!important;border-radius:3px!important;white-space:nowrap!important;color:var(--text-muted)!important}
body.game-active #lobby-id .val{color:var(--accent)!important}
body.game-active #lobby-id .btn{font-size:10px!important;padding:2px 6px!important;line-height:1!important;min-height:auto!important}
body.game-active #lobby-id .host-hint{display:none!important} /* "★ Jesteś administratorem" — schowane na wąskim HUD */
/* Admin panel i jego toggle — ukryte na mobile landscape (ustawienia gry są dla
administratora z desktop). */
#admin-panel,.admin-toggle{display:none!important}
/* Czat — mniejszy font na mobile (desktop ma 12 px) */
#chat-modal #chat-messages{font-size:10px;line-height:1.35;padding:var(--sp-2) var(--sp-3)}
#chat-modal .chat-msg{margin-bottom:1px}
#chat-modal #chat-input{font-size:11px;padding:var(--sp-2) var(--sp-3)}
#chat-modal #chat-send{font-size:9px;padding:0 var(--sp-3)}
/* Lista graczy — mniejsze sloty, żeby 4 + admin info się zmieścili w modalu */
#players-modal .hud-player{font-size:10px;min-height:32px;padding:var(--sp-1) 0}
#players-modal .hud-player-name-row>span{font-size:11px}
#players-modal .hud-player-stats-row{gap:var(--sp-1)}
#players-modal .hp-bar{height:6px}
#players-modal .hud-spectators-label{font-size:9px;margin-top:var(--sp-2)}
/* Copy button dla lobby-id w menu-modal */
#menu-modal-lobby .copy-btn-modal{margin-left:var(--sp-3);background:transparent;border:1px solid var(--accent);color:var(--accent);font-size:10px;padding:2px var(--sp-3);border-radius:3px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;font-family:inherit;vertical-align:middle}
#menu-modal-lobby .copy-btn-modal:hover{background:rgba(56,189,248,.14);box-shadow:0 0 8px rgba(56,189,248,.4)}
/* Dead overlay na pełny ekran (było inside canvas-wrap, teraz canvas-wrap wypełnia) */
body.game-active #dead-overlay{border-radius:0}
/* Joystick ruchu (lewy, 80 px) i aim (prawy, 80 px) DOKLEJONE do bocznych krawędzi — env(safe-area-inset-*)
zostawia margines tylko tam gdzie jest notch/zaokrąglenie. Canvas zostawia 88 px na każdy bok. */
body.game-active #stick-move{width:80px!important;height:80px!important;bottom:calc(20px + env(safe-area-inset-bottom,0))!important;left:env(safe-area-inset-left,0)!important}
body.game-active #stick-move .stick-base{width:80px;height:80px;background:rgba(255,255,255,.06);border-color:rgba(56,189,248,.35)}
body.game-active #stick-move .stick-thumb{width:34px;height:34px;top:23px;left:23px;background:rgba(56,189,248,.4)}
body.game-active #stick-aim{width:80px!important;height:80px!important;bottom:calc(20px + env(safe-area-inset-bottom,0))!important;right:env(safe-area-inset-right,0)!important}
body.game-active #stick-aim .stick-base{width:80px;height:80px;background:rgba(255,255,255,.06);border-color:rgba(248,113,113,.35)}
body.game-active #stick-aim .stick-thumb{width:34px;height:34px;top:23px;left:23px;background:rgba(248,113,113,.4)}
body.game-active #stick-move .stick-label,body.game-active #stick-aim .stick-label{display:none}
/* Reload progress ring wokół joystika strzelania (pasek ładowania reloadu).
Conic-gradient masked do pierścienia. Pokazujemy tylko gdy .reloading (klasa toggle'owana w updateHUD). */
body.game-active #stick-aim .stick-ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(rgba(248,113,113,.9) calc(var(--reload,0) * 1%), rgba(248,113,113,.12) 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);pointer-events:none;opacity:0;transition:opacity 120ms linear,background 60ms linear}
body.game-active #stick-aim.reloading .stick-ring{opacity:1}
/* Dash + build — nad aim-joystickiem (stacked vertically), wycentrowane nad nim.
Aim joystick: bottom:20 right:0, 80×80 → środek na right:40. Buttons 48×48 → right: 40-24 = 16. */
body.game-active #btn-dash{left:auto!important;right:calc(16px + env(safe-area-inset-right,0))!important;bottom:calc(108px + env(safe-area-inset-bottom,0))!important;width:48px;height:48px}
body.game-active #btn-build{right:calc(16px + env(safe-area-inset-right,0))!important;bottom:calc(162px + env(safe-area-inset-bottom,0))!important;width:48px;height:48px}
/* Hamburger (≡) HIDDEN on game screen — #menu-toggle przejmuje dostęp do menu. */
body.game-active .hamburger-btn,body.game-active .hamburger-menu{display:none!important}
}
/* Generyczny modal dla ekranu gry (chat, lista graczy, menu). Centered + backdrop.
Bazowo ukryty — `.open` pokazuje. */
.game-modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);align-items:center;justify-content:center;padding:var(--sp-4);backdrop-filter:blur(4px)}
.game-modal.open{display:flex}
.game-modal .modal-inner{background:rgba(15,17,23,.98);border:1px solid rgba(56,189,248,.5);border-radius:4px;padding:var(--sp-4) var(--sp-4);box-shadow:0 0 40px rgba(56,189,248,.35);max-width:420px;width:100%;max-height:calc(100dvh - 32px);overflow-y:auto;position:relative;color:var(--text);font-family:inherit;display:flex;flex-direction:column}
.game-modal .modal-close{position:absolute;top:6px;right:10px;background:none;border:none;color:var(--text-subtle);font-size:22px;cursor:pointer;padding:0 var(--sp-3);line-height:1;z-index:2}
.game-modal .modal-close:hover{color:var(--text)}
.game-modal .modal-title{font-size:12px;color:var(--text-subtle);letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--sp-3) 0;padding-right:var(--sp-5);border-bottom:1px solid rgba(56,189,248,.15);padding-bottom:var(--sp-3)}
.game-modal .modal-menu a{display:block;padding:var(--sp-3) var(--sp-2);color:var(--text-muted);text-decoration:none;font-size:13px;letter-spacing:.05em;border-radius:2px;border-bottom:1px solid rgba(56,189,248,.08)}
.game-modal .modal-menu a:last-child{border-bottom:none}
.game-modal .modal-menu a:hover{background:rgba(56,189,248,.1);color:var(--accent)}
.game-modal .modal-lobby{font-size:11px;color:var(--text-subtle);letter-spacing:.1em;text-transform:uppercase;padding:var(--sp-2) 0 var(--sp-3);border-bottom:1px solid rgba(56,189,248,.15);margin-bottom:var(--sp-3)}
/* Chat modal — chat pane zajmuje całą wysokość wewnętrzną */
#chat-modal .modal-inner{height:min(500px,calc(100dvh - 32px));padding:var(--sp-3) 0 0}
#chat-modal #chat-pane{flex:1 1 auto;min-height:0;border-right:none!important;display:flex;flex-direction:column}
#chat-modal #chat-messages{flex:1 1 auto;height:auto!important;max-height:none!important;min-height:0}
/* Players modal — lista slotów */
#players-modal #players-pane{border-right:none!important;padding:0}
#players-modal #players-pane-header{display:none}
#admin-panel{display:none;position:fixed;bottom:36px;right:8px;background:rgba(15,17,23,0.95);border:1px solid rgba(56,189,248,0.6);border-radius:3px;padding:var(--sp-4);z-index:30;width:240px;box-shadow:0 0 22px rgba(56,189,248,0.3)}
#admin-panel.collapsed{width:auto;padding:var(--sp-2) var(--sp-3)}
#admin-panel.collapsed #admin-controls{display:none}
#admin-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)}
#admin-panel.collapsed #admin-panel-header{margin-bottom:0}
#admin-panel-header h3{margin-bottom:0}
#admin-collapse{background:none;border:none;color:var(--text-subtle);cursor:pointer;font-size:16px;padding:0 var(--sp-1);width:auto}
#admin-collapse:hover{color:var(--text)}
#admin-panel h3{font-size:12px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.08em}
#admin-panel .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3);font-size:12px}
#admin-panel input[type=range]{width:100px;accent-color:var(--info-strong)}
#admin-panel input[type=password]{background:var(--bg);border:1px solid var(--border-strong);color:var(--text);padding:var(--sp-2) var(--sp-3);border-radius:4px;font-size:12px;width:100%;outline:none;margin-bottom:var(--sp-3)}
#admin-panel button{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:var(--sp-2) var(--sp-3);border-radius:3px;font-size:11px;cursor:pointer;width:100%;text-transform:uppercase;letter-spacing:0.08em;box-shadow:0 0 8px rgba(56,189,248,0.3);transition:all 120ms}
#admin-panel button:hover{background:rgba(56,189,248,0.12);box-shadow:0 0 14px rgba(56,189,248,0.6)}
#admin-panel label{color:var(--text)}
.admin-val{color:var(--info-strong);font-family:monospace;min-width:30px;text-align:right}
/* Touch */
/* Touch sticks + safe-area insets (iPhone notch, home indicator). */
.touch-stick{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:140px;height:140px;z-index:25;touch-action:none}
#stick-move{left:calc(20px + env(safe-area-inset-left,0px))}
#stick-aim{right:calc(20px + env(safe-area-inset-right,0px))}
/* Touch-action none na body gdy w grze — zapobiega accidental scroll/zoom przy tap poza joystick. */
body.game-active{touch-action:none;overscroll-behavior:none}
/* Mobile action buttons — dash (lewy bok, nad move-stick) i build (prawy, nad aim-stick). */
.mobile-action-btn{position:fixed;width:64px;height:64px;border-radius:50%;background:rgba(15,17,23,0.85);border:2px solid rgba(56,189,248,0.6);color:var(--accent);font-size:28px;z-index:26;touch-action:none;cursor:pointer;padding:0;font-family:inherit;box-shadow:0 0 12px rgba(56,189,248,0.35);display:flex;align-items:center;justify-content:center;transition:transform 80ms,background 80ms,opacity 120ms;overflow:hidden}
.mobile-action-btn:active{transform:scale(0.92);background:rgba(56,189,248,0.2)}
.mobile-action-btn .btn-icon{width:58%;height:58%;display:block;pointer-events:none}
/* Dash cooldown: conic-gradient ring + półprzezroczystość gdy nieaktywny.
--cd to procent naładowania (0–100). JS aktualizuje na każdą ramkę. */
#btn-dash{--cd:100}
#btn-dash .btn-ring{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--cd)*1%), rgba(56,189,248,0.12) 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);pointer-events:none;transition:background 60ms linear}
#btn-dash.dash-cooling{opacity:.55}
#btn-dash.dash-ready{opacity:1;box-shadow:0 0 18px rgba(56,189,248,.65)}
#btn-dash{bottom:calc(180px + env(safe-area-inset-bottom,0px));left:calc(20px + env(safe-area-inset-left,0px))}
.mobile-action-btn-right{border-color:rgba(251,146,60,0.6)!important;color:var(--orange)!important;box-shadow:0 0 12px rgba(251,146,60,0.35)!important}
.mobile-action-btn-right:active{background:rgba(251,146,60,0.2)!important}
#btn-build{bottom:calc(180px + env(safe-area-inset-bottom,0px));right:calc(20px + env(safe-area-inset-right,0px))}
.stick-base{width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);position:relative}
.stick-thumb{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.25);position:absolute;top:45px;left:45px;pointer-events:none}
.stick-label{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:10px;color:rgba(255,255,255,.3);pointer-events:none}
/* === First-death tutorial — content-only styling.
Layout/scroll/centering inherited from .modal + .modal-card
(components.css). Outer overflow-y:auto fixes mobile cut-off. */
#tutorial-overlay .tutorial-card { text-align: center; }
#tutorial-overlay .tutorial-eyebrow {
font-size: var(--fs-xs);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--warn);
margin-bottom: var(--sp-3);
}
#tutorial-overlay h3 {
font-size: var(--fs-h3);
font-weight: var(--fw-light);
letter-spacing: var(--ls-tight);
color: var(--accent);
margin-bottom: var(--sp-7);
text-shadow: var(--glow-accent-sm);
}
#tutorial-overlay .tutorial-keys {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-4);
text-align: left;
margin-bottom: var(--sp-7);
}
#tutorial-overlay .tutorial-keys li {
display: flex;
align-items: center;
gap: var(--sp-5);
font-size: var(--fs-md);
color: var(--text-muted);
}
#tutorial-overlay .tutorial-keys .key {
display: inline-block;
background: var(--bg-code);
border: 1px solid var(--border-strong);
color: var(--text);
padding: var(--sp-1) var(--sp-4);
border-radius: var(--radius);
font-family: var(--ff-mono);
font-size: var(--fs-base);
min-width: 92px;
text-align: center;
flex-shrink: 0;
}
#tutorial-overlay .tutorial-tip {
font-size: var(--fs-md);
color: var(--text-muted);
line-height: var(--lh-loose);
margin-bottom: var(--sp-7);
font-family: var(--ff-body);
}
#tutorial-overlay .tutorial-tip strong { color: var(--text); font-weight: var(--fw-medium); }
#tutorial-overlay .btn {
width: 100%;
margin-bottom: var(--sp-4);
}
#tutorial-overlay .tutorial-more {
display: inline-block;
font-size: var(--fs-sm);
color: var(--text-subtle);
text-decoration: none;
letter-spacing: var(--ls-normal);
}
#tutorial-overlay .tutorial-more:hover { color: var(--accent); }
/* === Lobby step-2 — uniform button widths + clean spacing rhythm.
Treat .step-content as a 280px column; all primary actions stretch
to that width. Welcome heading + register-hint also align. */
#lobby-step2 .step-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0; /* explicit margins below for rhythm */
}
#lobby-step2 .step-content > .register-hint,
#lobby-step2 .step-content > .welcome,
#lobby-step2 .step-content > button.primary,
#lobby-step2 .step-content > .lobby-actions {
width: 100%;
max-width: 280px;
}
#lobby-step2 .lobby-actions {
align-items: stretch; /* children full-width */
gap: var(--sp-3); /* 10px between secondary buttons */
}
#lobby-step2 .lobby-actions > button.secondary,
#lobby-step2 .lobby-actions > a.secondary {
width: 100%;
margin: 0; /* override .lobby button auto margins */
text-align: center;
display: block;
}
#lobby-step2 .step-content > button.primary {
margin: 0 auto var(--sp-3); /* 10px below CTA → secondary actions */
}
#lobby-step2 .step-content > .welcome {
margin: 0 auto var(--sp-4); /* 16px below greeting → CTA */
text-align: center;
}
#lobby-step2 .step-content > .register-hint {
margin: 0 auto var(--sp-4); /* 16px below hint → welcome */
padding: var(--sp-3) var(--sp-4);
background: transparent;
border: 1px dashed rgba(251,191,36,0.35);
border-radius: 3px;
text-align: center;
}
#lobby-step2 .register-hint span {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
#lobby-step2 .register-hint strong { color: var(--warn); }
#lobby-step2 .register-hint #register-btn {
background: transparent;
color: var(--warn);
border: none;
cursor: pointer;
font-size: 12px;
font-family: inherit;
text-decoration: underline;
padding: 0;
letter-spacing: normal;
text-transform: none;
}
#lobby-step2 .register-hint #register-btn:hover { color: #fcd34d; }
/* Back-links (Ustawienia, ← zmień login) — sit below action buttons */
#lobby-step2 .back-link {
margin-top: var(--sp-3);
}
#lobby-step2 #auth-action-btn { margin-top: var(--sp-2); }
/* Inline form (Dołącz do znajomych) — also constrained to column width */
#lobby-step2 .inline-form { max-width: 280px; }
/* === Host star marker — CSS-only badge, no per-frame SVG parsing.
Replaces icon('star') calls in HUD updateHUD() which were
regenerating DOM ~30x/sec and tanking FPS. */
.host-star {
display: inline-block;
width: 11px;
height: 11px;
vertical-align: -1px;
margin-right: var(--sp-1);
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
filter: drop-shadow(0 0 3px rgba(251,191,36,0.7));
}
/* Leave button (floating, position:fixed) — używany TYLKO na mobile.
Na desktopie używamy in-flow .leave-btn w site-nav (top-bar), zsynchronizowane
wyrównanie z resztą nav-paska. Mobile zachowuje floating bo site-header jest
ukryty w landscape (display:none na mobile landscape). */
body.game-active #leave-toggle-game { display: block; }
@media (min-width: 769px) {
body.game-active #leave-toggle-game { display: none; }
}
/* "Jesteś tu sam? Dodaj bota." tooltip — wersja desktop/tablet (sidebar players-pane widoczny).
min-height:600 wyklucza telefony w landscape (np. iPhone Pro Max 932×430) — tam baseline
rule + JS pozycjonują tooltip pod #players-toggle ze strzałką w górę. */
@media (min-width: 769px) and (min-height: 600px) {
body.game-active #aloneTooltip.show {
display: block;
position: fixed;
top: 96px;
right: 320px; /* ~= width of chat-box sidebar (300px) + margin */
z-index: 43;
background: rgba(15,17,23,0.96);
border: 1px solid rgba(251,191,36,0.8);
border-radius: 6px;
padding: 10px 14px;
color: var(--warn);
font-family: 'Orbitron','Segoe UI',sans-serif;
font-size: 13px;
letter-spacing: .02em;
line-height: 1.3;
box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(251,191,36,0.35);
max-width: 240px;
cursor: pointer;
animation: aloneTipPulseDesktop 2s ease-in-out infinite;
}
/* Strzałka w prawo wskazująca na sidebar players-pane.
left:auto neutralizuje --alone-arrow-left z baseline rule (mobile używa left:var, desktop right). */
body.game-active #aloneTooltip.show::before {
content: '';
position: absolute;
top: 50%;
left: auto;
right: -7px;
margin-top: -6px;
width: 12px;
height: 12px;
background: rgba(15,17,23,0.96);
border-top: 1px solid rgba(251,191,36,0.8);
border-right: 1px solid rgba(251,191,36,0.8);
border-left: none;
transform: rotate(45deg);
}
@keyframes aloneTipPulseDesktop {
0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 8px rgba(251,191,36,0.3); }
50% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 18px rgba(251,191,36,0.65); }
}
}