html { height:100%; height:-webkit-fill-available; }
body {
  min-height:100dvh; min-height:-webkit-fill-available;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  display:flex; justify-content:center; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
#app {
  width:100%; max-width:min(100%,36rem); min-height:100dvh; display:flex; flex-direction:column;
  overflow-x:hidden;
  padding:
    calc(var(--safe-top) + clamp(10px,3vh,40px))
    calc(var(--safe-right) + clamp(16px,4vw,48px))
    calc(var(--safe-bottom) + clamp(10px,3vh,40px))
    calc(var(--safe-left) + clamp(16px,4vw,48px));
}
/* Telefon (≤640px) zostaje bez zmian. Powyżej — stopniowo więcej miejsca:
   tablet/wąski desktop dostaje szerszą pojedynczą kolumnę, od 900px ekrany
   startowy i gry przechodzą na realny układ dwukolumnowy (patrz protocols-game.css). */
@media (min-width:641px) { #app { max-width:min(92vw,46rem); } }
@media (min-width:900px) { #app { max-width:min(90vw,74rem); } }

/* topbar */
.topbar { display:flex; align-items:center; gap:10px; margin-bottom:clamp(10px,4vh,36px); }
.logo-badge {
  width:clamp(32px,5vw,42px); height:clamp(32px,5vw,42px);
  background:var(--accent); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(13px,2vw,17px); font-weight:900; color:#06130a;
  flex-shrink:0; font-family:var(--mono); letter-spacing:-1px;
}
.logo-text {
  font-family:var(--mono); font-size:clamp(10px,1.5vw,12px); font-weight:700;
  letter-spacing:1.5px; color:var(--muted);
}
.topbar-nav { display:flex; gap:clamp(10px,2vw,16px); margin-left:clamp(12px,3vw,24px); flex-wrap:wrap; min-width:0; }
.topbar-nav a {
  font-family:var(--mono); font-size:clamp(10px,1.4vw,12px); font-weight:700; letter-spacing:0.5px;
  color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center;
}
.topbar-nav a::before { content:'/'; color:var(--border); }
@media (hover:hover) { .topbar-nav a:hover { color:var(--accent); } }

/* przycisk rozwijający nawigację — widoczny tylko na mobile (patrz media query niżej) */
.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0; background:var(--bg2); border:1px solid var(--border);
  border-radius:4px; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.nav-toggle-icon { position:relative; width:15px; height:2px; background:currentColor; border-radius:1px; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content:''; position:absolute; left:0; width:15px; height:2px; background:currentColor; border-radius:1px; transition:transform 0.15s ease, opacity 0.15s ease; }
.nav-toggle-icon::before { top:-5px; }
.nav-toggle-icon::after { top:5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top:0; transform:rotate(-45deg); }

/* auth */
.auth-slot { margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; }
.auth-btn {
  background:var(--bg2); border:1px solid var(--border); border-radius:3px; padding:6px 14px;
  font-family:var(--mono); font-size:clamp(11px,1.3vw,12px); font-weight:700; color:var(--muted);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background 0.12s,color 0.12s;
}
@media (hover:hover) { .auth-btn:hover { background:var(--accent); color:#06130a; border-color:var(--accent); } }
.auth-btn:active { background:var(--accent-h); color:#06130a; }
.auth-profile-btn {
  display:flex; align-items:center; gap:7px; background:var(--bg2); border:1px solid var(--border);
  border-radius:3px; padding:4px 12px 4px 4px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
@media (hover:hover) { .auth-profile-btn:hover { border-color:var(--accent); } }
.auth-avatar {
  width:clamp(20px,3.2vw,26px); height:clamp(20px,3.2vw,26px); border-radius:3px; background:var(--accent); color:#06130a;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:clamp(10px,1.4vw,12px); font-weight:800; font-family:var(--mono); letter-spacing:0;
}
.auth-username { font-family:var(--mono); font-size:clamp(10px,1.2vw,12px); font-weight:700; color:var(--muted); max-width:clamp(80px,15vw,130px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-badge { font-family:var(--mono); font-size:clamp(9px,1.1vw,11px); font-weight:800; color:var(--accent); flex-shrink:0; }
#auth-modal, #manual-modal, #password-modal, #bugreport-modal { display:none; position:fixed; inset:0; z-index:9998; background:rgba(8,8,12,0.78); align-items:center; justify-content:center; padding:20px; }
#auth-modal.show, #manual-modal.show, #password-modal.show, #bugreport-modal.show { display:flex; }
.auth-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(20px,4vw,32px); width:100%; max-width:min(100%,22.5rem); display:flex; flex-direction:column; gap:14px; }
.auth-card h2 { font-family:var(--mono); font-weight:600; font-size:clamp(15px,2.3vw,18px); color:var(--text); }
.auth-hint { font-size:12px; color:var(--muted); line-height:1.5; margin-top:-6px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); }
.auth-field label::after { content:':'; }
.auth-field input, .auth-field textarea { background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:10px 12px; color:var(--text); font-size:14px; font-family:var(--mono); }
.auth-field input:focus, .auth-field textarea:focus { outline:none; border-color:var(--accent); }
.auth-field textarea { resize:vertical; min-height:90px; }
.pw-strength { display:none; align-items:center; gap:8px; margin-top:2px; }
.pw-strength.visible { display:flex; }
.pw-strength-track { flex:1; height:4px; border-radius:2px; background:var(--bg3); overflow:hidden; }
.pw-strength-fill { height:100%; width:0%; border-radius:2px; background:var(--wrong-t); transition:width 0.18s ease, background 0.18s ease; }
.pw-strength-label { font-size:10px; font-weight:700; letter-spacing:0.5px; color:var(--muted); white-space:nowrap; }
.auth-error { font-family:var(--mono); font-size:12px; color:var(--wrong-t); min-height:16px; }
.auth-error:not(:empty)::before { content:'✗ '; }
.auth-success { font-family:var(--mono); font-size:12px; color:var(--correct-t); min-height:16px; }
.auth-success:not(:empty)::before { content:'✓ '; }
.auth-submit { background:var(--accent); color:#06130a; border:none; border-radius:4px; padding:12px 16px; font-family:var(--mono); font-size:14px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.auth-submit:active { background:var(--accent-h); }
.auth-switch { font-size:12px; color:var(--muted); text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.auth-switch b { font-family:var(--mono); color:var(--accent); }

/* topbar mobile: logo + przycisk [menu] + konto w jednym rzędzie; /ports /ladder /rank
   chowają się w rozwijanej liście pod przyciskiem (patrz #nav-toggle w common.js),
   zamiast ściskać wszystko w jedną linię lub zrzucać stały drugi rząd. */
@media (max-width:640px) {
  .topbar { position:relative; flex-wrap:wrap; }
  .back-btn-plain { min-width:0; }
  .logo-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-toggle { display:inline-flex; order:2; }
  .auth-slot { order:3; }
  .topbar-nav {
    display:none; order:4; flex-direction:column; gap:2px;
    position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
    margin-left:0; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
    padding:6px; box-shadow:0 10px 28px rgba(0,0,0,0.45);
  }
  .topbar-nav.open { display:flex; }
  .topbar-nav a { min-height:44px; padding:0 10px; border-radius:4px; }
  @media (hover:hover) { .topbar-nav a:hover { background:var(--bg3); } }
  .auth-btn, .auth-profile-btn { min-height:44px; }
}

/* pwa banner */
#pwa-banner {
  display:none; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(8px,1.8vh,12px) 14px; margin-bottom:clamp(8px,2vh,16px); font-size:clamp(12px,1.5vw,13px); color:var(--muted);
}
#pwa-banner.visible { display:flex; }
#pwa-install-btn {
  background:var(--accent); color:#06130a; border:none; border-radius:4px;
  font-family:var(--mono); padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap;
}

/* płaski przycisk/link — [graj], [reset] itd. — współdzielony przez wszystkie strony */
.mode-btn {
  display:inline-block; background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  padding:clamp(7px,1.6vh,9px) 14px; font-family:var(--mono); font-size:clamp(11px,1.4vw,13px); font-weight:600;
  color:var(--muted); text-decoration:none; text-align:center; cursor:pointer;
  transition:background 0.12s, color 0.12s, border-color 0.12s; -webkit-tap-highlight-color:transparent;
}
@media (hover:hover) { .mode-btn:hover { background:var(--accent); border-color:var(--accent); color:#06130a; } }
.mode-btn:active { background:var(--accent-h); border-color:var(--accent-h); color:#06130a; }
.mode-btn.danger { color:var(--wrong-t); }
@media (hover:hover) { .mode-btn.danger:hover { background:var(--wrong-t); border-color:var(--wrong-t); color:#1a0505; } }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* footer */
.footer { margin-top:clamp(10px,4vh,40px); font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--muted); opacity:0.75; }
.footer-version { color:inherit; text-decoration:none; }
@media (hover:hover) { .footer-version:hover { color:var(--accent); text-decoration:underline; } }
.bugreport-trigger { display:inline-block; margin-left:8px; background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (hover:hover) { .bugreport-trigger:hover { color:var(--accent); } }