/* Wspólny wygląd stron POZA GRĄ: o grze (info/) i ranking (ranking.html).
   Barwy, czcionki, pasek nawigacji u góry, przyciski i stopka — żeby
   z rankingu dało się przejść dalej, a obie strony nie rozjechały się
   przy pierwszej zmianie jednej z nich. Rzeczy właściwe jednej stronie
   zostają w jej własnym <style>. Tu NIE stylujemy gołych `button`,
   `label` ani `header` — ranking ma ich sporo i własny wygląd. */
:root{
  --tlo:#101312;--panel:#171C1A;--panel2:#1B211F;--line:#F1F1EC;--hud-line:#39413F;--dim:#8D9793;--dim2:#6E7A73;
  --yellow:#F5D200;--green:#5BE08C;--purple:#B14FD8;
  --disp:"Chakra Petch",Impact,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
/* `hidden` ma wygrywać z każdym `display` — w grze ta sama pułapka
   chowała przyciski pauzy (docs/interfejs.md), tu stronicowanie rankingu. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tlo);color:var(--line);font-family:var(--disp);font-size:17px;line-height:1.55}
a{color:var(--line)}
a:hover{color:var(--yellow)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* Pasek u góry: logo, skróty, „Zagraj". Bieżąca strona ma `aria-current`. */
.top{position:sticky;top:0;z-index:5;background:rgba(16,19,18,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hud-line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:58px}
.top img{height:38px;width:auto}
.top nav{display:flex;gap:16px;margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.top nav a{color:var(--dim);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--line)}
.top nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--yellow)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:#171A14;text-decoration:none;
  font-weight:700;border-radius:6px;padding:9px 18px;font-size:16px;white-space:nowrap}
.btn:hover{background:#FFE13A;color:#171A14}
.btn.cichy{background:transparent;color:var(--line);border:1px solid var(--hud-line)}
.btn.cichy:hover{border-color:var(--dim);color:var(--line)}
/* FLAGA JĘZYKA (10.10.2026, prośba użytkownika) — pokazuje DRUGI język, klik go
   włącza. Obrazki wpisane w CSS: emoji flag Windows pokazuje jako litery. */
.flaga{display:inline-block;flex:none;width:26px;height:17px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.28);opacity:.85;vertical-align:middle}
.flaga:hover,.flaga:focus-visible{opacity:1;box-shadow:0 0 0 2px #F5D200}
.flaga-pl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23fff' d='M0 0h8v5H0z'/%3E%3Cpath fill='%23dc143c' d='M0 2.5h8V5H0z'/%3E%3C/svg%3E")}
.flaga-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
.top .flaga{margin-left:4px}

h2{margin:0 0 6px;font-size:30px;line-height:1.15}
.pod{margin:0 0 26px;font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.06em}

.stopka{margin:72px 0 0;padding:28px 0 40px;border-top:1px solid var(--hud-line);font-family:var(--mono);font-size:12px;line-height:1.8;color:var(--dim2)}
.stopka a{color:var(--dim)}
.stopka a:hover{color:var(--line)}

@media (max-width:720px){
  body{font-size:16px}
  .top nav{display:none}
  .top .btn{margin-left:auto;padding:7px 14px;font-size:15px}
  h2{font-size:26px}
  .wrap{padding:0 16px}
}