:root {
    --bg: #010a13;
    --panel: #0a1428;
    --panel2: #0d1f33;
    --gold: #c8aa6e;
    --gold-bright: #f0e6d2;
    --blue: #0ac8b9;
    --blue-dim: #005a82;
    --red: #e84057;
    --text: #a09b8c;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
  body {
    background: var(--bg);
    color: var(--gold-bright);
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  canvas { display: block; cursor: crosshair; }
  body.crosshair-active #game { cursor: none; }

  /* Celownik jest warstwą ekranu, więc zachowuje stały rozmiar niezależnie od
     rozdzielczości, skalowania mapy i kamery. Ciemny obrys oraz jasny środek
     utrzymują kontrast na śniegu, ogniu i ciemnym tle. */
  #game-crosshair {
    position: fixed; left: 0; top: 0; width: 34px; height: 34px; z-index: 58;
    display: none; transform: translate(-50%,-50%); pointer-events: none;
    filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(0,0,0,.95));
  }
  #game-crosshair.active { display: block; }
  #game-crosshair i, .crosshair-preview i { position:absolute; display:block; background:#f7fbff; border-radius:2px; box-shadow:0 0 0 1px #03111d,0 0 5px #20e7df; }
  #game-crosshair i:nth-child(1), .crosshair-preview i:nth-child(1) { width:2px;height:7px;left:16px;top:1px; }
  #game-crosshair i:nth-child(2), .crosshair-preview i:nth-child(2) { width:2px;height:7px;left:16px;bottom:1px; }
  #game-crosshair i:nth-child(3), .crosshair-preview i:nth-child(3) { width:7px;height:2px;left:1px;top:16px; }
  #game-crosshair i:nth-child(4), .crosshair-preview i:nth-child(4) { width:7px;height:2px;right:1px;top:16px; }
  #game-crosshair b, .crosshair-preview b { position:absolute;left:15px;top:15px;width:4px;height:4px;border-radius:50%;background:#ffdf72;box-shadow:0 0 0 1px #071018,0 0 6px #ffbd35; }
  #game-crosshair[data-style="ring"]::after, .crosshair-preview[data-style="ring"]::after { content:'';position:absolute;inset:9px;border:2px solid #54f5ec;border-radius:50%;box-shadow:0 0 0 1px #03111d,inset 0 0 0 1px #03111d,0 0 5px #0ac8b9; }
  #game-crosshair[data-style="precision"] i:nth-child(1), .crosshair-preview[data-style="precision"] i:nth-child(1) { top:5px;height:8px; }
  #game-crosshair[data-style="precision"] i:nth-child(2), .crosshair-preview[data-style="precision"] i:nth-child(2) { bottom:5px;height:8px; }
  #game-crosshair[data-style="precision"] i:nth-child(3), .crosshair-preview[data-style="precision"] i:nth-child(3) { left:5px;width:8px; }
  #game-crosshair[data-style="precision"] i:nth-child(4), .crosshair-preview[data-style="precision"] i:nth-child(4) { right:5px;width:8px; }
  #game-crosshair[data-style="dot"] i, .crosshair-preview[data-style="dot"] i { display:none; }
  #game-crosshair[data-style="dot"] b, .crosshair-preview[data-style="dot"] b { left:12px;top:12px;width:10px;height:10px;background:#fff;border:2px solid #071018;box-shadow:0 0 0 2px #20e7df,0 0 9px #20e7df; }
  #game-crosshair[data-style="classic"] b, .crosshair-preview[data-style="classic"] b { background:#fff; }

  .screen {
    position: fixed; inset: 0;
    display: flex; justify-content: center;
    /* Treść wyższa niż okno musi dać się przewinąć — na laptopie 1366x768
       dół lobby (Start gry, Opuść lobby) był wcześniej nieosiągalny. */
    overflow-y: auto;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(10,200,185,0.08), transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(200,170,110,0.06), transparent 50%),
      var(--bg);
    z-index: 10;
  }
  /* Wyśrodkowanie marginesem, a nie align-items: przy przewijaniu nie ucina góry treści. */
  .screen > * { margin: auto; }
  .hidden { display: none !important; }

  .panel {
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--gold);
    box-shadow: 0 0 40px rgba(200,170,110,0.15), inset 0 0 60px rgba(0,0,0,0.5);
    padding: 40px 50px;
    min-width: 420px;
    max-width: 520px;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  }
  h1 {
    font-size: 42px; letter-spacing: 8px; text-align: center;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 6px;
  }
  .subtitle { text-align: center; color: var(--blue); font-size: 12px; letter-spacing: 4px; margin-bottom: 30px; text-transform: uppercase; }
  label { display: block; color: var(--text); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 16px 0 6px; }
  input, select {
    width: 100%; padding: 12px 14px;
    background: rgba(1,10,19,0.8);
    border: 1px solid var(--blue-dim);
    color: var(--gold-bright);
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
  }
  input:focus, select:focus { border-color: var(--blue); }
  select option { background: var(--panel); }

  .btn {
    display: block; width: 100%;
    margin-top: 14px; padding: 13px;
    font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    background: linear-gradient(180deg, #1e2328, #0a1015);
    border: 1px solid var(--gold);
    color: var(--gold-bright);
    cursor: pointer;
    transition: all .2s;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  }
  .btn:hover { background: linear-gradient(180deg, #2e3d47, #12202b); box-shadow: 0 0 20px rgba(200,170,110,0.3); }
  .btn.primary { border-color: var(--blue); color: var(--blue); }
  .btn.primary:hover { box-shadow: 0 0 20px rgba(10,200,185,0.4); color: #fff; }
  .btn:disabled { opacity: .4; cursor: not-allowed; }

  .champ-info {
    margin-top: 10px; padding: 12px;
    background: rgba(0,90,130,0.12);
    border-left: 3px solid var(--blue);
    font-size: 13px; color: var(--text); line-height: 1.5;
  }
  .champ-info b { color: var(--gold-bright); }
  .error { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; }

  .lobby-code {
    text-align: center; font-size: 34px; letter-spacing: 12px;
    color: var(--blue); margin: 10px 0 4px;
    text-shadow: 0 0 20px rgba(10,200,185,0.5);
    cursor: pointer;
  }
  .lobby-hint { text-align: center; font-size: 11px; color: var(--text); margin-bottom: 20px; }
  .player-list { margin: 10px 0 20px; }
  .player-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 6px;
    background: rgba(1,10,19,0.6);
    border: 1px solid rgba(200,170,110,0.2);
  }
  .player-row .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
  .player-row .nick { flex: 1; font-size: 15px; }
  .player-row .champ-tag { font-size: 12px; color: var(--text); text-transform: uppercase; letter-spacing: 1px; }
  .player-row .host-tag { font-size: 11px; color: var(--gold); border: 1px solid var(--gold); padding: 2px 8px; }
  .kick-btn {
    background: none; border: 1px solid var(--red); color: var(--red);
    width: 24px; height: 24px; font-size: 13px; cursor: pointer;
    line-height: 1; transition: all .15s;
  }
  .kick-btn:hover { background: var(--red); color: #fff; }

  /* ===== KOMUNIKAT PO ZALOGOWANIU =====
     Zwykłe okno modalne: przyciemnione tło, panel na środku, krzyżyk w rogu.
     Wysokość ograniczona do 82% ekranu, treść przewijalna — na niskich
     oknach nic nie wypada poza ekran. */
  #komunikat-tlo {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2,7,14,0.72); backdrop-filter: blur(2px);
    padding: 16px;
  }
  #komunikat-okno {
    position: relative; width: min(560px, 100%); max-height: 82vh;
    display: flex; flex-direction: column; gap: 12px;
    padding: 22px 24px 20px;
    background: linear-gradient(180deg, #0e1a28 0%, #0a1420 100%);
    border: 1px solid rgba(73,182,255,0.30); border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.65);
  }
  #komunikat-naglowek { display: flex; align-items: flex-start; gap: 10px; padding-right: 28px; }
  #komunikat-tytul {
    font-size: 16px; font-weight: 800; letter-spacing: 1.2px; line-height: 1.25;
    color: #eaf4ff; text-transform: uppercase;
  }
  #komunikat-wersja {
    flex: none; margin-top: 2px; padding: 2px 6px;
    font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px;
    color: #ffd27a; background: rgba(255,180,60,0.13);
    border: 1px solid rgba(255,180,60,0.42); border-radius: 4px; white-space: nowrap;
  }
  #komunikat-tresc {
    overflow-y: auto; font-size: 13px; line-height: 1.55; color: #b9cbdd;
  }
  #komunikat-tresc p { margin: 0 0 10px; }
  #komunikat-tresc ul { margin: 0 0 10px; padding-left: 18px; }
  #komunikat-tresc li { margin-bottom: 7px; }
  #komunikat-tresc b { color: #eaf4ff; }
  #komunikat-tresc .komunikat-stopka { color: #8fb2d0; }
  #komunikat-x {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; padding: 0;
    font-size: 14px; line-height: 1; color: #9fb6cd;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 8px;
    cursor: pointer; transition: background .15s, color .15s;
  }
  #komunikat-x:hover { background: rgba(232,64,87,0.18); color: #ffd9de; border-color: rgba(232,64,87,0.5); }
  #komunikat-ok { align-self: flex-end; padding: 9px 22px; font-size: 12px; }

  /* ============ DOBROWOLNE WSPARCIE ============
     Świadomie NIE wprowadza nowego design systemu: tło, panel, krzyżyk i
     przyciski to te same wzorce co #komunikat-*, a kolory pochodzą z tych
     samych zmiennych co reszta gry. Motyw serca to wyłącznie delikatny
     akcent (czerwień --red), nie osobna paleta. */

  /* Przycisk na ekranie wyników. CELOWO SŁABSZY niż .btn.primary: bez
     złotej ramki, mniejszy, przygaszony — ma być opcją, nie wezwaniem do
     działania konkurującym z „ZAGRAJ PONOWNIE". */
  .kon-wsparcie {
    margin-top: 10px; padding: 10px;
    font-size: 12px; letter-spacing: 2px;
    background: linear-gradient(180deg, #1a1418, #0f0a0d);
    border-color: rgba(232,64,87,0.38);
    color: #e9a8b3;
  }
  .kon-wsparcie:hover {
    background: linear-gradient(180deg, #2a1a20, #160e12);
    box-shadow: 0 0 18px rgba(232,64,87,0.22);
    color: #ffd9de;
  }
  .kon-wsparcie:active { transform: translateY(1px); }

  #wsparcie-tlo {
    position: fixed; inset: 0; z-index: 61;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2,7,14,0.72); backdrop-filter: blur(2px);
    padding: 16px;
  }
  #wsparcie-okno {
    /* Wysokość, odstępy i wyściółka skalują się PŁYNNIE z viewportem przez
       clamp(vh), zamiast przeskakiwać na progu @media. Powód nie jest
       kosmetyczny: istniejący test „progi wysokości nie skalują całej
       aplikacji" pilnuje, żeby bloki @media(max-height) dotyczyły wyłącznie
       lobby — a ten modal lobby nie jest. clamp() daje ten sam efekt na
       telefonie w poziomie (panel się zwęża, nie wychodzi poza ekran) i nie
       narusza tamtej zasady. */
    position: relative; width: min(460px, 100%); max-height: min(88vh, 640px);
    display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 12px);
    padding: clamp(14px, 3vh, 22px) clamp(16px, 4vw, 24px) clamp(12px, 2.6vh, 20px);
    background: linear-gradient(180deg, #0e1a28 0%, #0a1420 100%);
    border: 1px solid rgba(232,64,87,0.30); border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.65);
    overflow-y: auto;                 /* mały ekran: panel się przewija */
  }
  #wsparcie-tytul {
    font-size: 16px; font-weight: 800; letter-spacing: 1.2px; line-height: 1.25;
    color: #eaf4ff; text-transform: uppercase; padding-right: 34px;
  }
  #wsparcie-tresc { font-size: 13px; line-height: 1.55; color: #b9cbdd; }
  #wsparcie-tresc p { margin: 0 0 8px; }
  #wsparcie-tresc .wsparcie-zastrzezenie { margin: 0; color: #8fb2d0; font-size: 12px; }
  #wsparcie-x {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; padding: 0;
    font-size: 14px; line-height: 1; color: #9fb6cd;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 8px;
    cursor: pointer; transition: background .15s, color .15s;
  }
  #wsparcie-x:hover { background: rgba(232,64,87,0.18); color: #ffd9de; border-color: rgba(232,64,87,0.5); }

  /* Siatka kwot: 3 w rzędzie na desktopie -> [5][15][25] / [35][50].
     `auto-fit` z minimum 96px sam schodzi do 2 kolumn na wąskim ekranie,
     więc nie potrzeba osobnego breakpointu dla portretu. */
  #wsparcie-kwoty {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px;
  }
  .wsparcie-kwota {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: clamp(46px, 7vh, 52px);   /* wygodny cel dotyku, niższy na płaskim ekranie */
    padding: 10px 8px;
    font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 1px;
    background: linear-gradient(180deg, #1e2328, #0a1015);
    border: 1px solid var(--gold); color: var(--gold-bright);
    cursor: pointer; transition: all .18s;
  }
  .wsparcie-kwota:hover {
    background: linear-gradient(180deg, #2e3d47, #12202b);
    box-shadow: 0 0 16px rgba(200,170,110,0.28);
  }
  .wsparcie-kwota:active { transform: translateY(1px); }
  .wsparcie-kwota.popularna { border-color: rgba(232,64,87,0.65); color: #ffd9de; }
  .wsparcie-kwota.popularna:hover { box-shadow: 0 0 18px rgba(232,64,87,0.30); }
  .wsparcie-znacznik {
    font-size: 8px; font-weight: 700; letter-spacing: 1.4px;
    color: #ffb3c0; text-transform: uppercase;
  }
  /* Etykieta nad siatką kwot — ta sama typografia co .ui-karta-tyt, żeby
     modal czytał się jak reszta interfejsu, a nie jak formularz płatności. */
  .wsparcie-etyk {
    font-size: 9.5px; letter-spacing: 2.6px; text-transform: uppercase;
    color: #5f8ab5; margin: 0;
  }
  /* Zdanie o dobrowolności stoi TUŻ POD kwotami, a nie w stopce razem z
     informacją o Stripe — to jest obietnica wobec gracza, nie techniczny
     przypis, i ma być pierwszą rzeczą czytaną po zobaczeniu cen. */
  #wsparcie-dobrowolne {
    margin: 0; font-size: 11.5px; line-height: 1.5; color: #8fb2d0; text-align: center;
  }
  #wsparcie-stopka {
    margin: 0; font-size: 11px; line-height: 1.5; color: #7f9ab5; text-align: center;
  }
  #wsparcie-pozniej { margin-top: 0; padding: 10px; font-size: 12px; }


  /* Etykieta wersji w trakcie gry — mała, w prawym dolnym rogu, nie zasłania
     pola walki ani paska ulty. */
  #wersja-gry {
    position: fixed; right: 12px; bottom: 8px; z-index: 5;
    font-size: 10px; letter-spacing: 1.6px; font-weight: 700;
    color: rgba(255,210,122,0.55); text-transform: uppercase;
    pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }
  /* ============ TEAM HUD — CZYTELNOŚĆ 120% ============

     QA w prawdziwej grze: panel drużyny był za mały — nick, HP, POZ. i ULTA
     wymagały wpatrywania się, a paski były włoskowate.

     Powiększone są PRAWDZIWE WARTOŚCI: szerokość, wysokość, fonty, grubości
     pasków, odstępy. NIE ma tu `transform: scale(1.2)` ani zmiany zoomu — to
     rozmyłoby tekst i i tak nie poprawiło czytelności, bo skalowanie powiększa
     również rozmycie antyaliasingu, zamiast dać przeglądarce więcej pikseli
     na literę. Wartości bazowe siedzą w zmiennych, więc jeden przelicznik
     opisuje cały komponent i nic nie zostaje w tyle.

     Priorytet czytelności (nick > HP > ULTA > POZ. > reszta) widać w mnożnikach:
     nick i HP dostają +18-20%, drobne statystyki +20% od bardzo małej bazy. */
  #hud {
    --hud-w:        216px;   /* 180 -> 216 */
    --hud-w-max:    252px;   /* 210 -> 252 */
    --hud-pad-y:    5px;     /* 4   -> 5   */
    --hud-pad-x:   10px;     /* 8   -> 10  */
    --hud-gap:      5px;     /* 4   -> 5   */
    --hud-nick:    13px;     /* 11  -> 13  (+18%) */
    --hud-hp-bar:  11px;     /* 9   -> 11  (+22%) */
    --hud-xp-bar:  3.6px;    /* 3   -> 3.6 (+20%) */
    --hud-ult-bar:  7.2px;   /* 6   -> 7.2 (+20%) */
    --hud-hp-txt:   9.6px;   /* 8   -> 9.6 (+20%) */
    --hud-ult-txt:  9px;     /* 7.5 -> 9   (+20%) */
    --hud-stat:    10.2px;   /* 8.5 -> 10.2(+20%) */
    --hud-super:   13px;     /* 11  -> 13  */
    --hud-relic:   31px;     /* 26  -> 31  (+19%) */
    position: fixed; left: 12px; top: 12px; z-index: 5;
    display: flex; flex-direction: column; gap: var(--hud-gap);
    pointer-events: none;
  }
  .hud-player {
    background: rgba(1,10,19,0.40);
    border: 1px solid rgba(200,170,110,0.20);
    padding: var(--hud-pad-y) var(--hud-pad-x);
    min-width: var(--hud-w); max-width: var(--hud-w-max);
  }
  .hud-top { display: flex; justify-content: space-between; font-size: var(--hud-nick); margin-bottom: 3px; text-shadow: 0 1px 2px rgba(0,0,0,0.85); }
  .hud-top .lvl { color: var(--gold); font-weight: 700; }
  .bar { height: var(--hud-hp-bar); background: rgba(20,20,20,0.6); border: 1px solid rgba(0,0,0,0.5); position: relative; margin-bottom: 2.5px; }
  .bar .fill { height: 100%; transition: width .15s; }
  .bar.hp .fill { background: linear-gradient(180deg, #2bb35a, #157a38); }
  .bar.hp.low .fill { background: linear-gradient(180deg, #e84057, #8a1f2e); }
  .bar.xp { height: var(--hud-xp-bar); }
  .bar.xp .fill { background: linear-gradient(90deg, var(--blue-dim), var(--blue)); }
  .bar.ult { height: var(--hud-ult-bar); }
  .bar.ult .fill { background: linear-gradient(90deg, #6b4d9e, #b44dff); transition: width .1s; }
  .bar.ult.full .fill {
    background: linear-gradient(90deg, #ffd84f, #fff3b0, #ffd84f);
    animation: ultPulse .8s ease-in-out infinite;
  }
  .bar.ult.full { border-color: #ffd84f; box-shadow: 0 0 8px rgba(255,216,79,0.6); }
  @keyframes ultPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
  .bar.ult .bar-text { font-size: var(--hud-ult-txt); letter-spacing: 1px; }
  .bar .bar-text {
    position: absolute; inset: 0; font-size: var(--hud-hp-txt);
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-shadow: 0 1px 2px #000;
  }
  .hud-stats { font-size: var(--hud-stat); color: var(--text); margin-top: 1.5px; letter-spacing: .3px; }
  .hud-supers { font-size: var(--hud-super); margin-top: 1.5px; }
  /* ---------- Pasek konta ---------- */
  #acc-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(10,200,185,0.08); border: 1px solid var(--blue-dim);
    padding: 7px 12px; margin-bottom: 4px; font-size: 12px; color: var(--text);
  }
  #acc-bar b { color: var(--blue); }
  #logout-btn {
    background: none; border: 1px solid rgba(200,170,110,0.4);
    color: var(--text); font-size: 10px; padding: 3px 9px; cursor: pointer;
  }
  #logout-btn:hover { border-color: var(--red); color: var(--red); }

  /* ---------- Profil w menu ---------- */
  #profile-box {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(200,170,110,0.25);
  }
  .prof-title { font-size: 11px; letter-spacing: 3px; color: var(--gold); text-align: center; margin-bottom: 8px; }
  .prof-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px;
  }
  .prof-stat { text-align: center; background: rgba(1,10,19,0.6); padding: 6px 2px; }
  .prof-stat b { display: block; font-size: 16px; color: var(--gold-bright); }
  .prof-stat span { font-size: 9px; color: var(--text); letter-spacing: .5px; }
  .prof-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
  .badge {
    width: 28px; height: 28px; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200,170,110,0.3); border-radius: 4px;
    background: rgba(1,10,19,0.6);
  }
  .badge.got { border-color: var(--gold); box-shadow: 0 0 8px rgba(200,170,110,0.4); }
  .badge.locked { opacity: .28; filter: grayscale(1); }
  .relic-row { display: flex; gap: 4px; margin-top: 3.5px; }
  .relic-slot {
    position: relative; width: var(--hud-relic); height: var(--hud-relic);
    background: rgba(30,10,50,0.7); border: 1px solid #b44dff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; border-radius: 4px;
  }
  .relic-slot.ready { border-color: #ffd84f; box-shadow: 0 0 7px rgba(255,216,79,0.65); }
  .relic-slot.cooling { opacity: .5; }
  .relic-slot .key {
    position: absolute; top: -4px; left: -3px;
    font-size: 9.5px; background: #b44dff; color: #fff;
    width: 13px; height: 13px; border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
  }
  .relic-slot .cd {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #fff; font-weight: 500;
  }

  /* 1366x768 — przy czterech graczach stos 120% dotyka dolnej krawędzi.
     Cofamy się do ~110%, a NIE do stanu sprzed poprawki: to nadal wyraźnie
     więcej niż baseline, a panel mieści się w całości. Próg dotyczy wyłącznie
     zmiennych #hud, więc reszta interfejsu jest nietknięta. */
  @media (max-height: 800px) {
    #hud {
      --hud-w:       198px; --hud-w-max: 231px;
      --hud-nick:     12px; --hud-hp-bar: 10px;
      --hud-ult-bar: 6.6px; --hud-hp-txt: 8.8px;
      --hud-ult-txt: 8.3px; --hud-stat:   9.4px;
      --hud-relic:    28px; --hud-gap:    4px;
    }
  }

  /* INFINITY, 5. GRACZ — piąty panel na niskim viewporcie (mały laptop,
     telefon w poziomie) przesuwał stos poza dolną krawędź (zmierzone modelem
     tools/hud-druzyny.js: 110% wysokości przy 600 px). Kurczymy WYŁĄCZNIE
     gdy piąty panel faktycznie istnieje — 1-4 graczy w każdym trybie mają
     dokładnie ten sam wygląd co dotąd. */
  @media (max-height: 700px) {
    #hud:has(.hud-player:nth-child(5)) {
      --hud-w:       176px; --hud-w-max: 205px;
      --hud-nick:   10.5px; --hud-hp-bar:  8.5px;
      --hud-xp-bar:   2.8px; --hud-ult-bar: 5.6px;
      --hud-hp-txt:   7.6px; --hud-ult-txt: 7.1px;
      --hud-stat:     8.1px; --hud-relic:  22px; --hud-gap: 3px;
    }
  }

  #wave-banner {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    font-size: 28px; letter-spacing: 6px; color: var(--gold);
    text-shadow: 0 0 30px rgba(200,170,110,0.6);
    z-index: 5; pointer-events: none; opacity: 0; transition: opacity .4s;
  }
  #wave-banner.show { opacity: 1; }
  #wave-indicator {
    position: fixed; top: 16px; right: 16px; z-index: 5;
    background: rgba(1,10,19,0.75); border: 1px solid rgba(200,170,110,0.35);
    padding: 8px 18px; font-size: 15px; letter-spacing: 2px; color: var(--gold);
    pointer-events: none; text-align: right;
  }
  #wave-indicator .sub { font-size: 11px; color: var(--text); letter-spacing: 1px; }
  #waves-briefing { position:fixed;right:184px;bottom:100px;z-index:5;pointer-events:none;
    width:236px;max-width:calc(100vw - 32px);padding:13px 15px;border:1px solid #355061;
    border-left:2px solid #c9ab70;border-radius:6px;background:rgba(3,14,25,.91);
    color:#aebfce;font:12px/1.45 'Segoe UI',sans-serif;box-shadow:0 8px 24px #0004; }
  #waves-briefing.waves-break {right:292px;}
  #waves-kicker {font-size:10px;letter-spacing:1.7px;color:#7e9caf;margin-bottom:5px;}
  #waves-title {display:block;font-size:15px;color:#efe0ba;line-height:1.25;margin-bottom:5px;}
  #waves-weather {font-size:11px;color:#88b6c8;margin-top:7px;}
  #waves-arrival {font-size:11px;color:#d8c48e;margin-top:3px;}
  #waves-event,#waves-tactic {font-size:11px;color:#c8b4ed;margin-top:5px;}
  #waves-next-boss {font-size:10px;color:#8ca3b7;margin-top:7px;}
  #waves-event:empty,#waves-tactic:empty,#waves-next-boss:empty {display:none;}
  #infinity-reward {position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;
    padding:24px;background:rgba(2,8,18,.78);backdrop-filter:blur(5px);font-family:'Segoe UI',sans-serif;}
  .infinity-reward-card {width:720px;max-width:100%;max-height:calc(100vh - 48px);overflow:auto;padding:32px;
    border:1px solid #42647c;border-radius:14px;background:linear-gradient(145deg,#142c3d,#07121f 70%);box-shadow:0 24px 100px #0008;}
  .infinity-reward-eyebrow {color:#67d5cf;letter-spacing:3px;font-size:10px;}
  #infinity-reward-title {margin:12px 0;color:#efe0ba;font-size:24px;letter-spacing:1px;}
  #infinity-reward-help {color:#aabecd;font-size:13px;margin:0 0 24px;}
  .infinity-reward-options {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .infinity-reward-options button {display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:180px;
    border:1px solid #344e62;border-radius:9px;padding:20px;text-align:left;white-space:normal;text-transform:none;
    background:#0b1d2c;color:#b8c9d6;font:12px/1.5 'Segoe UI',sans-serif;cursor:pointer;transition:background .15s,border-color .15s;}
  .infinity-reward-options button:hover,.infinity-reward-options button:focus-visible {background:#173349;border-color:#66c6cb;outline:2px solid #66c6cb;outline-offset:3px;}
  .infinity-reward-options button.selected {border-color:#e8c275;background:#263629;box-shadow:inset 0 0 0 1px #e8c275;}
  .inf-reward-icon {font-size:25px;color:#e8c275;line-height:1;}
  .infinity-reward-options strong {font-size:16px;color:#f2e5c8;}
  .infinity-reward-options small {margin-top:auto;color:#70d5ce;}
  .infinity-reward-footer {display:flex;gap:16px;justify-content:space-between;margin-top:22px;color:#809bb0;font-size:11px;}
  #infinity-reward-time {color:#eed6a0;white-space:nowrap;}
  @media(max-width:600px){.infinity-reward-card{padding:20px;}.infinity-reward-options{grid-template-columns:1fr;}.infinity-reward-options button{min-height:100px;padding:14px;gap:5px;}.inf-reward-icon{display:none;}.infinity-reward-footer{flex-direction:column;gap:8px;}}
  #waves-objective {margin-top:11px;padding-top:10px;border-top:1px solid #ffffff19;}
  #waves-objective-name {color:#f2cc79;} #waves-objective-info {font-size:11px;margin-top:4px;}
  .waves-objective-track {height:4px;background:#ffffff12;margin:7px 0;border-radius:2px;overflow:hidden;}
  #waves-objective-progress {display:block;height:100%;background:#e6c27b;width:0;transition:width .1s linear;}
  #waves-objective-help {font-size:10px;color:#8da6b9;}
  @media(max-width:850px) {#waves-briefing,#waves-briefing.waves-break{left:12px;right:auto;bottom:100px;width:190px;padding:10px;}#waves-hint{display:none;}}
  @media(max-height:560px) {#waves-briefing{bottom:80px;}#waves-hint,#waves-weather{display:none;}}
  #break-timer {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    z-index: 5; pointer-events: none; text-align: center;
  }
  #break-timer .big {
    font-size: 40px; color: var(--blue); letter-spacing: 4px;
    text-shadow: 0 0 30px rgba(10,200,185,0.6);
  }
  #break-timer .small { font-size: 13px; color: var(--text); letter-spacing: 3px; text-transform: uppercase; }
  #skip-box {
    margin-top: 10px; pointer-events: auto;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  #skip-btn {
    padding: 8px 22px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    background: rgba(1,10,19,0.85); border: 1px solid var(--gold);
    color: var(--gold-bright); cursor: pointer; transition: all .15s;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  }
  #skip-btn:hover { box-shadow: 0 0 16px rgba(200,170,110,0.45); }
  #skip-btn.voted { border-color: #2bb35a; color: #6dffa0; box-shadow: 0 0 16px rgba(43,179,90,0.45); }
  #skip-count { font-size: 12px; color: var(--text); letter-spacing: 1px; }

  /* ---------- Sklep ---------- */
  #shop-panel {
    position: fixed; right: 16px; top: 70px; z-index: 6;
    width: 250px;
    background: rgba(1,10,19,0.88);
    border: 1px solid var(--gold);
    padding: 12px;
    backdrop-filter: blur(4px);
  }
  #shop-panel h3 {
    font-size: 14px; letter-spacing: 3px; color: var(--gold);
    text-align: center; margin-bottom: 4px;
  }
  #shop-gold { text-align: center; font-size: 15px; color: #ffd84f; margin-bottom: 10px; }
  .shop-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; margin-bottom: 5px;
    background: rgba(13,31,51,0.7);
    border: 1px solid var(--blue-dim);
    cursor: pointer; transition: all .15s;
  }
  .shop-item:hover { border-color: var(--gold); background: rgba(13,31,51,1); }
  .shop-item.cant { opacity: .45; cursor: not-allowed; }
  .shop-item .si-icon { font-size: 20px; }
  .shop-item .si-body { flex: 1; }
  .shop-item .si-name { font-size: 12px; color: var(--gold-bright); }
  .shop-item .si-desc { font-size: 10px; color: var(--text); }
  .shop-item .si-price { font-size: 12px; color: #ffd84f; font-weight: 700; white-space: nowrap; }
  .shop-item .si-count { font-size: 10px; color: var(--blue); }

  /* ---------- Czat ---------- */
  /* z-index ponad ekranami (.screen ma 10), inaczej czat w lobby chowałby się pod nim */
  #chat-box {
    position: fixed; left: 16px; bottom: 56px; z-index: 20;
    display: flex; flex-direction: column; gap: 3px;
    pointer-events: none; max-width: 380px;
  }
  .chat-msg {
    font-size: 13px; color: var(--gold-bright);
    background: rgba(1,10,19,0.7); padding: 3px 9px;
    border-left: 2px solid var(--blue);
    animation: chatFade 9s forwards;
  }
  @keyframes chatFade { 0%,80% { opacity: 1; } 100% { opacity: 0; } }

  /* ---------- Koło emotek (T) ---------- */
  #emotki-kolo {
    position: fixed; left: 50%; top: 50%; z-index: 22;
    width: 300px; height: 300px; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1,10,19,0.55) 0 38%, rgba(1,10,19,0.78) 39% 100%);
    border: 1px solid rgba(200,170,110,0.45);
    box-shadow: 0 0 28px rgba(0,0,0,0.55);
    user-select: none;
  }
  .emk-srodek {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 120px; text-align: center; font-size: 11px; letter-spacing: 1px;
    color: var(--gold-bright); text-transform: uppercase; pointer-events: none;
  }
  .emk-slot {
    position: absolute; width: 58px; height: 58px; transform: translate(-50%, -50%);
    border-radius: 50%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    background: rgba(1,10,19,0.9); border: 1px solid rgba(200,170,110,0.35);
    transition: width .08s, height .08s, border-color .08s, background .08s;
  }
  .emk-slot .emk-ik { font-size: 28px; line-height: 1.2; }
  .emk-slot.tekst .emk-ik { font-size: 18px; font-weight: 700; color: #f0c75e; }
  .emk-slot.wybrana { width: 66px; height: 66px; border-color: var(--gold-bright); background: rgba(10,40,60,0.95); }
  .emk-slot.zablok .emk-ik { filter: grayscale(1) brightness(0.55); }
  .emk-slot.zablok.tekst .emk-ik { color: #6d6a62; }
  .emk-lvl { font-size: 8px; letter-spacing: .3px; color: #a09b8c; margin-top: 2px; white-space: nowrap; }
  #chat-input {
    position: fixed; left: 16px; bottom: 56px; z-index: 21;
    width: 320px; padding: 8px 12px;
    background: rgba(1,10,19,0.95);
    border: 1px solid var(--blue);
    color: var(--gold-bright); font-size: 14px; outline: none;
  }
  #record-note { color: #ffd84f; font-size: 14px; letter-spacing: 2px; text-align: center; margin: 6px 0 10px; }
  .hs-row { display: flex; justify-content: space-between; padding: 4px 12px; font-size: 12px; color: var(--text); }
  .hs-row b { color: var(--gold-bright); }

  /* ---------- Generator i budowa ---------- */
  #core-bar {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
    width: min(620px, 74vw); z-index: 5; pointer-events: none; text-align: center;
  }
  #core-bar .core-name {
    font-size: 14px; letter-spacing: 4px; color: #0ac8b9;
    text-shadow: 0 0 14px rgba(10,200,185,0.6); margin-bottom: 3px;
  }
  #core-bar .core-track {
    height: 18px; background: #041016; border: 1px solid #0ac8b9;
    box-shadow: 0 0 18px rgba(10,200,185,0.3); position: relative;
  }
  #core-bar .core-fill {
    height: 100%; background: linear-gradient(180deg, #2ee6d2, #067a70); transition: width .25s;
  }
  #core-bar.low .core-name { color: #ff5a5a; text-shadow: 0 0 14px rgba(255,60,60,0.7); }
  #core-bar.low .core-track { border-color: #ff2d2d; box-shadow: 0 0 22px rgba(255,45,45,0.5); }
  #core-bar.low .core-fill { background: linear-gradient(180deg, #ff5a5a, #8a1420); }

  #build-panel {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 22; width: min(440px, 90vw); max-height: 85vh; overflow-y: auto; padding: 20px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--gold); box-shadow: 0 0 40px rgba(0,0,0,0.6);
  }
  .bp-title { text-align: center; font-size: 13px; letter-spacing: 3px; color: var(--gold); margin-bottom: 10px; }
  .bp-item {
    display: flex; align-items: center; gap: 9px; padding: 8px;
    margin-bottom: 5px; background: rgba(13,31,51,0.7);
    border: 1px solid var(--blue-dim); cursor: pointer; transition: all .15s;
  }
  .bp-item:hover { border-color: var(--gold); }
  .bp-item:focus-visible { outline: 2px solid #45e4ef; outline-offset: 2px; }
  .bp-item.cant { opacity: .4; cursor: not-allowed; }
  .bp-item .bi-ico { font-size: 21px; }
  .bp-item .bi-b { flex: 1; }
  .bp-item .bi-n { font-size: 12.5px; color: var(--gold-bright); }
  .bp-item .bi-d { font-size: 11px; line-height: 1.6; color: var(--text); }
  .bp-item .bi-c { font-size: 12px; color: #ffd84f; font-weight: 500; }
  /* PASEK BOSSA — GÓRA EKRANU.

     Był przyklejony do dołu (bottom: 26px), gdzie w ferworze walki po prostu
     ginął: wzrok gracza jest przy postaci na środku, a dolna krawędź to
     obszar, w który się nie patrzy. Idzie na górę, na oś ekranu.

     top: 54px, a nie 14px, bo w pasie 20–52 px pojawia się komunikat fali
     (#wave-banner, „BOSS 3 — FALA 30"). Postawienie paska wyżej dawałoby
     dwie nakładające się czerwone linijki przez pierwsze dwie sekundy walki. */
  #boss-bar {
    position: fixed; top: 54px; left: 50%; transform: translateX(-50%);
    width: min(600px, 88vw); z-index: 5; pointer-events: none;
    text-align: center;
  }
  #boss-bar .boss-name {
    font-size: 20px; font-weight: 700; letter-spacing: 5px; color: #ff6b6b;
    text-shadow: 0 0 18px rgba(255,45,45,0.8), 0 2px 6px rgba(0,0,0,0.9);
    margin-bottom: 6px;
  }
  #boss-bar .boss-track {
    height: 22px; background: #1a0a0d; border: 2px solid #ff2d2d;
    box-shadow: 0 0 26px rgba(255,45,45,0.45), inset 0 0 14px rgba(0,0,0,0.6);
    border-radius: 3px;
  }
  /* Liczby pod paskiem. Tabularne cyfry, żeby przy szybkim spadku HP tekst
     nie drgał na boki przy każdej zmianie cyfry. */
  #boss-bar .boss-hp {
    margin-top: 5px; font-size: 14px; letter-spacing: 2px;
    color: #ffd9d9; text-shadow: 0 0 10px rgba(255,45,45,0.6), 0 1px 4px rgba(0,0,0,0.9);
    font-variant-numeric: tabular-nums;
  }
  @media (max-height: 800px) {
    #boss-bar { top: 46px; width: min(520px, 88vw); }
    #boss-bar .boss-name { font-size: 17px; letter-spacing: 4px; margin-bottom: 4px; }
    #boss-bar .boss-track { height: 18px; }
    #boss-bar .boss-hp { font-size: 12.5px; margin-top: 4px; }
  }
  #boss-bar .boss-fill {
    height: 100%; background: linear-gradient(180deg, #ff5a5a, #8a1420);
    transition: width .2s;
  }
  /* Pasek podpowiedzi sterowania (WASD — ruch · LPM — atak · …) został usunięty
     z gry: zasłaniał dolną krawędź areny, a jego treść jest w menu i w opisach
     umiejętności. Element, reguła i przełączanie widoczności zniknęły w całości —
     nie zostawiamy ukrytego śmiecia w DOM. */
  .sprint-ready { color: var(--blue); }
  .sprint-active { color: #fff; }
  .sprint-used { color: #5a5548; }
  /* ---------- Ustawienia ---------- */
  #settings-btn {
    position: fixed; bottom: 16px; right: 68px; z-index: 15;
    width: 44px; height: 44px; font-size: 20px;
    background: rgba(1,10,19,0.8); border: 1px solid var(--gold);
    color: var(--gold-bright); cursor: pointer;
  }
  #settings-panel {
    position: fixed; right: 16px; bottom: 70px; z-index: 21;
    width: 260px; max-width: calc(100vw - 32px); padding: 14px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--gold); box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  .set-title { text-align: center; font-size: 12px; letter-spacing: 3px; color: var(--gold); margin-bottom: 12px; }
  .set-row { margin-bottom: 12px; }
  .set-row label { display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--text); letter-spacing: 1px; margin: 0 0 5px; text-transform: none; }
  .set-row label span { color: var(--gold-bright); }
  .set-row input[type=range] { width: 100%; accent-color: var(--blue); cursor: pointer; }
  /* JAKOŚĆ GRAFIKI — trzy przyciski w rzędzie.
     PRZYCZYNA UCIECZKI „WYSOKA" POZA PANEL: .btn ma `display:block; width:100%`
     (myślany jako pojedynczy, pełnowidokowy przycisk). Wewnątrz wiersza flex
     bez własnego `flex-basis` przeglądarka liczy flex-basis Z WŁAŚCIWOŚCI
     width, czyli KAŻDY z trzech przycisków chciał 100% szerokości wiersza —
     przy trzech takich żądaniach naraz i domyślnym `min-width:auto` (nie może
     skurczyć się poniżej szerokości własnego tekstu) trzeci przycisk nie miał
     się gdzie zmieścić i wychodził poza kartę. Naprawa: `flex:1 1 0` dzieli
     dostępną szerokość po równo NIEZALEŻNIE od width odziedziczonego z .btn,
     a `min-width:0` pozwala się skurczyć zamiast wypychać sąsiada na zewnątrz. */
  .q-btns { display: flex; gap: 6px; }
  .q-btn {
    flex: 1 1 0; min-width: 0; width: auto;
    margin-top: 0; padding: 9px 4px;
    font-size: 10px; letter-spacing: .5px;
    text-align: center;
  }
  .q-btn.sel { border-color: var(--blue) !important; color: var(--blue) !important; }
  .crosshair-options { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
  .crosshair-option { min-width:0;height:64px;padding:5px 2px;background:#071421;border:1px solid rgba(120,155,185,.28);color:#8fa8bd;cursor:pointer;font:inherit; }
  .crosshair-option:hover { border-color:#5e91bb;color:#e8f6ff; }
  .crosshair-option.sel { border-color:var(--blue);color:#45eee3;background:rgba(10,200,185,.09);box-shadow:inset 0 -2px 0 var(--blue); }
  .crosshair-option em { display:block;font-size:8px;font-style:normal;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .crosshair-preview { position:relative;display:block;width:34px;height:34px;margin:0 auto;transform:scale(.72); }
  #crosshair-desc { font-size:9px;color:#7892aa;margin-top:6px;line-height:1.35; }

  /* ---------- FRIENDS 1.0 — rozwijana lista w nawigacji ---------- */
  #friends-panel {
    position: static; transform: none;
    z-index: auto; width: 100%; max-height: min(42vh, 420px);
    box-sizing: border-box;
    display: flex; flex-direction: column;
    padding: 11px; gap: 8px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid rgba(73,182,255,.55); border-radius: 6px;
    box-shadow: inset 3px 0 0 #49b6ff, 0 8px 24px rgba(0,0,0,.32);
    overflow-y: auto;
  }
  .fr-head { display: flex; align-items: center; justify-content: space-between; }
  .fr-title { font-size: 13px; letter-spacing: 2px; color: var(--gold); }
  .fr-title span { color: var(--text); font-size: 10px; letter-spacing: 1px; margin-left: 6px; }
  #friends-close {
    width: 26px; height: 26px; padding: 0; font-size: 12px; line-height: 1;
    color: var(--text); background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; cursor: pointer;
  }
  #friends-close:hover { color: var(--red); border-color: var(--red); }
  .fr-search { display: flex; gap: 6px; }
  .fr-search input {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 12px;
    background: rgba(1,10,19,0.8); border: 1px solid var(--blue-dim); color: var(--gold-bright);
  }
  .fr-search button {
    flex: none; padding: 8px 10px; font-size: 10px; letter-spacing: 1px;
    background: linear-gradient(180deg, #1e2328, #0a1015); border: 1px solid var(--gold);
    color: var(--gold-bright); cursor: pointer;
  }
  .fr-sub-tyt { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-top: 2px; }
  .fr-list { display: flex; flex-direction: column; gap: 5px; }
  .fr-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; background: rgba(1,10,19,0.55); border: 1px solid rgba(200,170,110,0.18);
  }
  .fr-row .fr-nick { flex: 1; min-width: 0; font-size: 12.5px; color: var(--gold-bright);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-row .ui-kropka { flex: none; }
  .fr-row button {
    flex: none; padding: 4px 8px; font-size: 9.5px; letter-spacing: .5px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16);
    color: var(--text); cursor: pointer; white-space: nowrap;
  }
  .fr-row button:hover { color: var(--gold-bright); border-color: var(--gold); }
  .fr-row button.fr-accept:hover { color: #6dffa0; border-color: #2bb35a; }
  .fr-row button.fr-reject:hover, .fr-row button.fr-remove:hover { color: #ff8a8a; border-color: var(--red); }
  .fr-row button.fr-invite { color: var(--blue); border-color: var(--blue-dim); }
  .fr-row button.fr-invite:hover { color: #fff; border-color: var(--blue); box-shadow: 0 0 10px rgba(10,200,185,0.3); }
  .fr-empty { font-size: 11px; color: var(--text); text-align: center; padding: 10px 0; }
  .fr-error { font-size: 11px; color: var(--red); min-height: 14px; text-align: center; }

  /* ---------- FRIENDS 1.0 / PHASE C — prompt zaproszenia do lobby ----------
     Krótki, samoznikający prompt (serwerowe TTL) — nie modal na cały ekran,
     bo nie ma blokować tego, co gracz akurat robi. */
  #lobby-invite-toast {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 40; width: min(320px, 90vw); padding: 12px 14px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--blue); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    text-align: center;
  }
  #lobby-invite-text { font-size: 12.5px; color: var(--gold-bright); margin-bottom: 10px; line-height: 1.4; }
  #lobby-invite-text b { color: var(--blue); }
  .li-akcje { display: flex; gap: 8px; }
  .li-akcje .btn { margin-top: 0; font-size: 11px; padding: 9px; }

  #mute-btn {
    position: fixed; bottom: 16px; right: 16px; z-index: 15;
    width: 44px; height: 44px; font-size: 20px;
    background: rgba(1,10,19,0.8); border: 1px solid var(--gold);
    color: var(--gold-bright); cursor: pointer;
  }

  #augment-overlay {
    position: fixed; inset: 0; z-index: 20;
    background: rgba(1,10,19,0.82);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
  }
  #augment-overlay h2 {
    font-size: 30px; letter-spacing: 6px; color: var(--gold);
    text-shadow: 0 0 30px rgba(200,170,110,0.6); margin-bottom: 8px;
  }
  #augment-overlay h2.super { color: var(--red); text-shadow: 0 0 30px rgba(232,64,87,0.7); }
  #augment-overlay .sub { color: var(--blue); font-size: 13px; letter-spacing: 3px; margin-bottom: 30px; text-transform: uppercase; }
  .augment-cards { display: flex; gap: 24px; }
  #aug-tutorial-help {
    width: min(738px, 90vw); box-sizing: border-box; margin: -12px 0 20px;
    padding: 14px 18px; border-left: 2px solid var(--blue);
    background: rgba(10, 35, 49, .9); color: #c5d7e2; line-height: 1.5;
    font-size: 14px;
  }
  #aug-tutorial-help strong { color: var(--gold); font-size: 16px; }
  #aug-tutorial-help p { margin: 7px 0; }
  #aug-tutorial-help small { color: #93adbf; }
  .aug-card {
    width: 230px; padding: 26px 18px;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--blue-dim);
    text-align: center; cursor: pointer;
    transition: all .2s;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  }
  .aug-card.super-card { border-color: rgba(232,64,87,0.5); }
  .aug-card:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 10px 40px rgba(10,200,185,0.25);
  }
  .aug-card .icon { font-size: 44px; margin-bottom: 12px; }
  .aug-card .name { font-size: 16px; color: var(--gold-bright); margin-bottom: 8px; letter-spacing: 1px; }
  .aug-card .lvl-tag { font-size: 11px; color: var(--gold); margin-bottom: 8px; }
  .aug-card .desc { font-size: 12.5px; color: var(--text); line-height: 1.5; }

  #gameover-screen .score-row {
    display: flex; justify-content: space-between;
    padding: 8px 14px; margin-bottom: 4px;
    background: rgba(1,10,19,0.6); font-size: 14px;
  }
  /* Odliczanie do powrotu do gry.
     Wcześniej wisiało 30 px nad dolną krawędzią, czyli dokładnie za paskiem
     umiejętności i podpowiedzią sterowania — najważniejsza informacja („kiedy
     wracam do walki") była najgorzej widoczną rzeczą na ekranie. Teraz siedzi
     na środku, w miejscu, na które gracz i tak patrzy.
     Tło jest półprzezroczyste, a element nie łapie myszy, więc nie przeszkadza
     w obserwowaniu areny podczas oczekiwania. */
  #death-note {
    /* 28% zamiast 50% (prośba właściciela 27.09): środek ekranu to miejsce,
       na które patrzy się w trybie obserwatora — napis zasłaniał walkę.
       Poniżej banerów ulty i licznika zabójstw (~13% wysokości). */
    position: fixed; top: 28%; left: 50%; transform: translate(-50%, -50%);
    color: var(--red); font-size: 34px; letter-spacing: 6px; z-index: 5;
    text-align: center; padding: 20px 42px; border-radius: 14px;
    background: rgba(4,10,19,0.55);
    border: 1px solid rgba(232,64,87,0.32);
    box-shadow: 0 0 50px rgba(0,0,0,0.45);
    text-shadow: 0 0 24px rgba(232,64,87,0.65);
    pointer-events: none;
  }
  /* na niskich oknach zmniejszamy, żeby panel nie zajął pół ekranu */
  @media (max-height: 700px) {
    #death-note { font-size: 26px; padding: 14px 30px; }
  }

  /* ============ NOWY UKŁAD MENU I LOBBY ============ */
  .ui-ramka {
    display: grid;
    /* Prawa szyna (profil/sezon/aktualności) skaluje się z szerokością okna
       zamiast sztywnych 300 px na każdej rozdzielczości: ~400 px na dużych
       desktopach, schodzi do ~325 px przy 1366×768, żeby środek (1fr) nie
       ścieśniał się bardziej niż trzeba. Poniżej ~1253 px trzyma dolny
       próg 325 px — pełne złożenie w jedną kolumnę i tak włącza się niżej,
       przy @media (max-width: 1000px).
       Poszerzone o ~25% (było: 260-320 px, clamp(260px, 147px + 9vw, 320px)) —
       cały wzór przeskalowany razy 1,25, więc granica między „przypięte do
       minimum" a „płynne" zostaje na tym samym viewporcie co dotąd. */
    grid-template-columns: 236px minmax(360px, 1fr) clamp(325px, 184px + 11.25vw, 400px);
    /* Wiersz musi mieć minmax(0, 1fr), inaczej rośnie do wysokości najdłuższej
       kolumny i wychodzi poza ramkę mimo max-height. */
    grid-template-rows: minmax(0, 1fr);
    gap: 16px; width: min(1180px, 96vw); max-height: 94vh;
    padding: 16px; box-sizing: border-box;
    background: linear-gradient(160deg, rgba(13,31,51,0.92), rgba(4,10,20,0.96));
    border: 1px solid rgba(47,127,208,0.45);
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(0,0,0,0.7), inset 0 0 90px rgba(10,60,110,0.18);
  }
  /* min-height: 0 jest tu konieczne. Element siatki ma domyślnie min-height: auto,
     czyli nie kurczy się poniżej swojej treści — a wtedy overflow-y: auto nic nie
     robi i kolumna wylewa się poza ramkę zamiast się przewijać. Wyszło to dopiero,
     gdy panel sezonu wydłużył prawą kolumnę i aktualności zaczęły uciekać na zewnątrz. */
  .ui-ramka aside, .ui-ramka main { min-width: 0; min-height: 0; overflow-y: auto; }
  .ui-ramka::-webkit-scrollbar, .ui-ramka *::-webkit-scrollbar { width: 8px; height: 8px; }
  .ui-ramka *::-webkit-scrollbar-thumb { background: rgba(47,127,208,0.35); border-radius: 4px; }

  .ui-logo { display: flex; align-items: center; gap: 11px; padding: 4px 2px 14px; }
  .ui-logo-1 { font-size: 21px; font-weight: 800; letter-spacing: 3px; color: #eaf4ff; line-height: 1; }
  .ui-logo-2 { font-size: 21px; font-weight: 800; letter-spacing: 3px; color: #49b6ff; line-height: 1.15; }
  /* Plakietka BETA przy logo w panelu bocznym. Wyrównana do linii bazowej
     napisu ATTACK, nie zwiększa wysokości wiersza logo. */
  .ui-beta {
    display: inline-block; vertical-align: middle;
    margin-left: 8px; padding: 2px 6px;
    font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px;
    color: #ffd27a; background: rgba(255,180,60,0.13);
    border: 1px solid rgba(255,180,60,0.42); border-radius: 4px;
    text-transform: uppercase; line-height: 1; white-space: nowrap;
  }
  .ui-logo-3 { font-size: 8.5px; letter-spacing: 2.4px; color: #5c7fa6; text-transform: uppercase; margin-top: 3px; }

  .ui-nav { display: flex; flex-direction: column; gap: 5px; }
  .ui-nav-poz {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 13px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
    color: #9fb6cd; background: rgba(255,255,255,0.02);
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    font-family: inherit; text-align: left; transition: background .15s, color .15s, border-color .15s;
  }
  .ui-nav-poz span { width: 18px; text-align: center; opacity: .85; }
  .ui-nav-poz:hover { background: rgba(47,127,208,0.13); color: #dff0ff; }
  .ui-nav-poz.aktywna {
    background: linear-gradient(90deg, rgba(30,110,200,0.45), rgba(30,110,200,0.06));
    border-color: rgba(73,182,255,0.55); color: #eaf4ff;
    box-shadow: inset 3px 0 0 #49b6ff;
  }
  /* ===== CZAT GLOBALNY w panelu bocznym =====
     Rośnie do wolnej wysokości paska (flex: 1), ale nigdy nie wypycha stopki
     ze statusem serwera — lista wiadomości przewija się w środku. */
  .ui-czat {
    flex: 1 1 auto; min-height: 120px; margin-top: 14px;
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(4,14,26,0.5);
    border: 1px solid rgba(47,127,208,0.22); border-radius: 10px;
    padding: 9px 10px 8px;
  }
  .ui-czat-tyt {
    font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
    color: #5c7fa6; text-transform: uppercase;
  }
  .ui-czat-lista {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 5px;
    font-size: 11.5px; line-height: 1.4; color: #9fb6cd;
    scrollbar-width: thin;
  }
  .ui-czat-lista::-webkit-scrollbar { width: 6px; }
  .ui-czat-lista::-webkit-scrollbar-thumb { background: rgba(73,182,255,0.25); border-radius: 3px; }
  .ui-czat-poz { word-break: break-word; }
  .ui-czat-nick { color: #49b6ff; font-weight: 700; }
  .ui-czat-nick.ja { color: #ffd27a; }
  .ui-czat-czas { color: #4c637d; }
  .ui-czat-pusto { color: #4d6379; font-style: italic; }
  .ui-czat-dol { display: flex; gap: 6px; }
  .ui-czat-pole {
    flex: 1 1 auto; min-width: 0;
    padding: 7px 9px; font-size: 11.5px; font-family: inherit;
    color: #eaf4ff; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 7px;
  }
  .ui-czat-pole:focus { outline: none; border-color: rgba(73,182,255,0.55); }
  .ui-czat-pole:disabled { color: #5c7fa6; cursor: not-allowed; }
  .ui-czat-slij {
    flex: none; width: 32px; padding: 0; font-size: 12px; color: #9fb6cd;
    background: rgba(73,182,255,0.10); border: 1px solid rgba(73,182,255,0.28);
    border-radius: 7px; cursor: pointer;
  }
  .ui-czat-slij:hover { background: rgba(73,182,255,0.22); color: #eaf4ff; }
  .ui-czat-slij:disabled { opacity: .45; cursor: not-allowed; }
  .ui-czat-info { font-size: 10px; color: #7e8fa3; min-height: 12px; }
  .ui-czat-info.blad { color: #ff9aa8; }

  .ui-bok-stopka { margin-top: auto; padding-top: 14px; }
  .ui-serwer { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #6d8aa8; letter-spacing: 1px; }
  .ui-kropka { width: 8px; height: 8px; border-radius: 50%; background: #6d8aa8; box-shadow: 0 0 8px currentColor; }
  .ui-kropka.on { background: #35d07f; color: #35d07f; }
  .ui-bok { display: flex; flex-direction: column; }

  .ui-srodek { display: flex; flex-direction: column; gap: 12px; }
  .ui-karta {
    background: linear-gradient(180deg, rgba(16,38,63,0.75), rgba(8,20,36,0.75));
    border: 1px solid rgba(47,127,208,0.28); border-radius: 10px; padding: 14px 16px;
  }
  .ui-karta-tyt {
    font-size: 9.5px; letter-spacing: 2.6px; text-transform: uppercase;
    color: #5f8ab5; margin-bottom: 9px;
  }
  .ui-karta input, .ui-karta select { margin-bottom: 0; }
  .ui-ukryta-etykieta { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .ui-konto {
    display: flex; align-items: center; gap: 11px;
    background: linear-gradient(90deg, rgba(20,60,110,0.55), rgba(10,25,45,0.4));
    border: 1px solid rgba(73,182,255,0.3); border-radius: 10px; padding: 10px 14px;
  }
  .ui-konto b { color: #49b6ff; font-size: 15px; }
  .ui-etyk { font-size: 8.5px; letter-spacing: 2px; color: #5f8ab5; text-transform: uppercase; }
  .ui-konto button {
    margin-left: auto; background: rgba(255,255,255,0.05); color: #9fb6cd;
    border: 1px solid rgba(120,150,180,0.3); border-radius: 6px;
    padding: 6px 12px; font-size: 10px; letter-spacing: 1.4px; cursor: pointer; font-family: inherit;
  }
  .ui-konto button:hover { color: #fff; border-color: #49b6ff; }

  /* auto-fit: siatka sama dobiera liczbę kolumn do dostępnej szerokości, więc
     karty nigdy nie wychodzą poza ekran ani nie robią poziomego paska */
  .ui-postacie { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
                 gap: 7px; margin-bottom: 10px; }
  .ui-postac {
    position: relative; padding: 9px 4px 8px; cursor: pointer; text-align: center;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px; transition: border-color .15s, background .15s, transform .1s;
  }
  .ui-postac:hover { transform: translateY(-2px); background: rgba(255,255,255,0.06); }
  .ui-postac .ui-p-nazwa { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; margin-top: 6px; }
  .ui-postac .ui-p-bron { font-size: 8.5px; color: #6d8aa8; margin-top: 2px; }
  .ui-postac.wybrana { background: rgba(30,110,200,0.16); }
  .ui-znak { width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
             display: flex; align-items: center; justify-content: center; font-size: 15px; }

  .ui-karta-akcja .btn { margin-top: 0; }
  .ui-lub { display: flex; align-items: center; gap: 10px; margin: 11px 0; }
  .ui-lub::before, .ui-lub::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
  .ui-lub span { font-size: 9px; letter-spacing: 2px; color: #5f8ab5; text-transform: uppercase; }
  .ui-dolacz { display: flex; gap: 8px; }
  .ui-dolacz input { flex: 1; margin-bottom: 0; }
  .ui-dolacz .btn { width: auto; padding-left: 20px; padding-right: 20px; }
  .ui-skroty { display: flex; gap: 8px; margin-top: 10px; }
  .ui-skroty .btn { font-size: 11px; margin-top: 0; }

  .ui-prawa { display: flex; flex-direction: column; gap: 12px; }
  .ui-ulubiona { font-size: 10.5px; color: #7d99b5; margin-top: 10px; line-height: 1.6; }
  .ui-ulubiona b { color: #eaf4ff; }

  @media (max-width: 1000px) {
    /* Jedna kolumna = trzy wiersze. grid-template-rows: minmax(0,1fr) z układu
       szerokiego zgniatało wtedy PIERWSZY wiersz do zera i pasek boczny znikał
       (zmierzone: .ui-bok miał 0 px wysokości przy 390 px). Na wąskim ekranie
       wiersze mają się układać do treści, a przewija się cała ramka. */
    .ui-ramka { grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto; }
    .ui-ramka aside, .ui-ramka main { overflow-y: visible; }
    .ui-bok { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
    .ui-nav { flex-direction: row; flex-wrap: wrap; }
    .ui-nav-poz { width: auto; }
    .ui-bok-stopka { margin: 0; padding: 0; }
  }

  .ui-ramka-lobby { grid-template-columns: 260px minmax(380px, 1fr); }
  .ui-lobby-naglowek { text-align: center; padding: 4px 0 2px; }
  .ui-lobby-naglowek .lobby-code { margin: 4px 0 2px; }
  .ui-kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ui-kafle-4 { grid-template-columns: repeat(4, 1fr); }
  .ui-kafel {
    padding: 12px 6px 10px; text-align: center; cursor: pointer; border-radius: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    transition: transform .1s, background .15s, border-color .15s;
  }
  .ui-kafel:hover { transform: translateY(-2px); background: rgba(255,255,255,0.06); }
  .ui-kafel .ui-k-ikona { font-size: 21px; line-height: 1; }
  .ui-kafel .ui-k-nazwa { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; margin-top: 7px; }
  .ui-kafel .ui-k-pod { font-size: 8.5px; color: #6d8aa8; margin-top: 3px; }
  .ui-opis { font-size: 11px; color: #8ea6bd; text-align: center; margin-top: 10px; min-height: 30px; line-height: 1.5; }
  .ui-start { font-size: 15px !important; padding: 14px !important; margin-top: 2px !important; }
  #lobby-leave { font-size: 11px; margin-top: 8px; }

  /* Podgląd diagnostyczny (F2) — szukanie przyczyny przycinek podczas gry. */
  #diag {
    position: fixed; top: 8px; left: 8px; z-index: 60;
    background: rgba(2,10,20,0.82); border: 1px solid rgba(47,127,208,0.45);
    border-radius: 6px; padding: 8px 10px; pointer-events: none;
    font: 11px/1.55 ui-monospace, Consolas, monospace; color: #cfe6ff; white-space: pre;
  }
  #diag b { color: #7ee6ff; font-weight: 600; }
  #diag .zle { color: #ff6b6b; }
  #diag .uwaga { color: #ffd84f; }
  #lobby-licznik { color: #49b6ff; }

  .ui-akt { display: flex; flex-direction: column; gap: 9px; max-height: 320px; overflow-y: auto; }
  .ui-akt-poz {
    display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  }
  .ui-akt-ikona { font-size: 17px; line-height: 1.2; }
  .ui-akt-tyt { font-size: 11.5px; font-weight: 700; color: #dff0ff; letter-spacing: .4px; }
  .ui-akt-tresc { font-size: 10px; color: #8ea6bd; line-height: 1.5; margin-top: 3px; }
  .ui-akt-data { font-size: 9px; color: #5f8ab5; margin-top: 4px; letter-spacing: 1px; }

  /* ============ EKRAN LOGOWANIA ============ */
  .log-karta {
    width: min(430px, 92vw); padding: 34px 38px 26px; text-align: center;
    background: linear-gradient(170deg, rgba(13,33,58,0.96), rgba(4,12,24,0.98));
    border: 1px solid rgba(47,127,208,0.4); border-radius: 14px;
    box-shadow: 0 0 70px rgba(0,0,0,0.75), inset 0 0 90px rgba(10,60,110,0.15);
    position: relative;
  }
  /* złote narożniki jak na makiecie */
  .log-karta::before, .log-karta::after {
    content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none;
    border: 2px solid var(--gold);
  }
  .log-karta::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
  .log-karta::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

  .log-godlo { display: block; margin: 0 auto 12px; filter: drop-shadow(0 0 22px rgba(60,170,255,0.5)); }
  .log-tytul {
    font-size: 30px; letter-spacing: 7px; font-weight: 800; margin: 0;
    background: linear-gradient(180deg, #ffffff, #9fd8ff 55%, #3f9ae0);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #cfe9ff;
  }
  .log-pod { display: flex; align-items: center; gap: 10px; margin: 10px 0 22px; }
  .log-pod::before, .log-pod::after { content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,170,110,0.55), transparent); }
  .log-pod span { font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

  .log-etyk {
    display: block; text-align: left; font-size: 9px; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--gold); margin: 0 0 6px;
  }
  .log-pole {
    display: flex; align-items: center; gap: 9px; margin-bottom: 15px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(47,127,208,0.35);
    border-radius: 8px; padding: 0 11px; transition: border-color .15s, box-shadow .15s;
  }
  .log-pole:focus-within { border-color: #49b6ff; box-shadow: 0 0 16px rgba(73,182,255,0.25); }
  .log-ikona { font-size: 13px; opacity: .65; }
  .log-pole input {
    flex: 1; margin: 0; border: 0; background: transparent; padding: 12px 0;
    color: #eaf4ff; font-size: 13px; font-family: inherit;
  }
  .log-pole input:focus { outline: none; box-shadow: none; }
  /* Chrome przy zapamiętanym haśle wstawia własne jasne tło i czarny tekst,
     co rozwalało ciemny motyw. Zasłaniamy je cieniem wewnętrznym. */
  .log-pole input:-webkit-autofill,
  .log-pole input:-webkit-autofill:hover,
  .log-pole input:-webkit-autofill:focus,
  .log-pole input:-webkit-autofill:active {
    -webkit-text-fill-color: #eaf4ff;
    -webkit-box-shadow: 0 0 0 40px #111e2d inset;
    caret-color: #eaf4ff;
    transition: background-color 100000s ease 0s;
  }
  .log-oko {
    background: none; border: 0; cursor: pointer; font-size: 14px; opacity: .55;
    padding: 4px; color: inherit;
  }
  .log-oko:hover { opacity: 1; }

  .log-zapamietaj {
    display: flex; align-items: center; gap: 8px; margin: 2px 0 18px;
    font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: #9fb6cd; cursor: pointer; text-align: left;
  }
  .log-zapamietaj input { width: auto; margin: 0; accent-color: #49b6ff; }

  .log-glowny { margin-top: 0 !important; font-size: 14px !important; padding: 14px !important; }
  .log-karta .ui-lub { margin: 13px 0; }
  .log-gosc { margin-top: 18px; font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: #5f7c99; }
  .log-gosc a { display: block; color: #7fb2dd; font-size: 11px; letter-spacing: 2px; text-decoration: none; margin-bottom: 4px; }
  .log-gosc a:hover { color: #bfe3ff; }
  /* Stopka prawna (logowanie i strona główna) + jednorazowa informacja o cookies */
  .stopka-prawna { margin-top: 12px; font-size: 10px; letter-spacing: .5px; color: #5f7c99; }
  .stopka-prawna a { color: #7fb2dd; text-decoration: none; }
  .stopka-prawna a:hover { color: #bfe3ff; text-decoration: underline; }
  .cookie-info { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9000;
    width: min(620px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px;
    background: #0a1428f2; border: 1px solid #c8aa6e66; border-radius: 8px; padding: 12px 16px;
    color: #d8d2c4; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 24px #000a; }
  .cookie-info a { color: #68dcff; }
  .cookie-info > span { flex: 1 1 auto; min-width: 0; }
  .cookie-info .cookie-ok { flex: none; width: auto; margin: 0; padding: 8px 18px; min-width: 64px; cursor: pointer;
    background: #c8aa6e; color: #010a13; border: 0; border-radius: 6px; font: 700 13px/1 inherit; letter-spacing: 1px; clip-path: none; }
  .cookie-info .cookie-ok:hover { background: #e2c98f; }

  /* AUTH 2.0 — komunikat walidacji PRZY konkretnym polu (brief "AUTH UX":
     błędy mają być widoczne obok pola, nie tylko w jednym wspólnym pasku na
     dole). Puste domyślnie i bez wysokości, żeby nie rozpychały formularza,
     gdy akurat nie ma błędu. */
  .log-pole-err {
    color: var(--red); font-size: 11px; letter-spacing: .2px;
    margin: -10px 0 10px; min-height: 0; text-align: left;
  }
  .log-przelacz {
    margin-top: 14px; font-size: 11px; letter-spacing: .4px;
    color: #9fb6cd; text-align: center;
  }
  .log-przelacz a {
    color: #7fb2dd; text-decoration: none; font-weight: 600;
    letter-spacing: 1.6px; margin-left: 6px;
  }
  .log-przelacz a:hover { color: #bfe3ff; }

/* ---------- Sezon i wyzwania dzienne ---------- */
.sez-glowa { display: flex; align-items: center; gap: 12px; }
.sez-poziom { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sez-poziom b { font-size: 26px; color: var(--gold-bright); }
.sez-poziom span { font-size: 9px; color: var(--text); text-transform: uppercase; letter-spacing: 1px; }
.sez-pasek { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.sez-pasek i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .4s; }
.sez-info { display: flex; justify-content: space-between; font-size: 10px; color: var(--text); margin-top: 4px; }
.sez-wyz { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sez-wyz-tresc { flex: 1; min-width: 0; }
.sez-wyz-opis { font-size: 11px; color: var(--gold-bright); }
.sez-wyz-pasek { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.sez-wyz-pasek i { display: block; height: 100%; background: var(--blue); }
.sez-wyz-licz { font-size: 10px; color: var(--text); white-space: nowrap; }
.sez-wyz.gotowe .sez-wyz-opis { color: #7cff9e; }
.sez-wyz.gotowe .sez-wyz-pasek i { background: #7cff9e; }
.sez-nagrody { display: flex; flex-wrap: wrap; gap: 6px; }
.sez-nagroda { display: flex; align-items: center; gap: 5px; font-size: 10px;
  padding: 4px 7px; border: 1px solid rgba(47,127,208,0.3); border-radius: 6px;
  color: var(--text); opacity: .45; }
.sez-nagroda.zdobyta { opacity: 1; color: var(--gold-bright); border-color: var(--gold); }
.ui-tytul { font-size: 10px; color: var(--gold); margin-left: 6px; }
#sezon-podsumowanie { margin: 10px 0 4px; text-align: center; }
.sez-koniec-pkt { font-size: 13px; color: var(--gold-bright); margin-bottom: 4px; }
.sez-koniec-niezal { font-size: 13px; color: #ffcf7a; margin-bottom: 4px; }
.sez-koniec-niezal-info { font-size: 11px; color: #a9bfd3; }
.sez-koniec-poz { font-size: 11px; color: #7cff9e; }
.sez-koniec-tytul { font-size: 12px; color: var(--gold); margin-top: 4px; }

/* ---------- Ekran końca meczu ---------- */
/* 5 kafli statystyk ma zmieścić się w jednym rzędzie: panel ma 100 px paddingu,
   więc przy 520 px zostaje 420 px na 5x72 + 4x7 odstępu = 388 px. */
.kon-panel { min-width: 520px; max-width: 560px; }
.kon-tytul {
  font-size: 40px; letter-spacing: 4px; margin: 0 0 2px;
  color: var(--red); -webkit-text-fill-color: var(--red);
}
.kon-tytul.wygrana { color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright); }
/* kafle ze statystykami — czytelne jednym rzutem oka, bez formularzowego układu */
.kon-staty {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 7px; margin: 14px 0 10px;
}
.kon-stat {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(47,127,208,0.28);
  border-radius: 7px; padding: 8px 4px; text-align: center;
}
.kon-stat b { display: block; font-size: 18px; color: var(--gold-bright); line-height: 1.2; white-space: nowrap; }
.kon-stat span { font-size: 9px; color: var(--text); text-transform: uppercase; letter-spacing: 1px; }
.kon-mvp {
  margin: 2px 0 10px; padding: 7px 10px; text-align: center; font-size: 12px;
  border: 1px solid var(--gold); border-radius: 7px;
  background: linear-gradient(90deg, rgba(200,170,110,0.10), rgba(200,170,110,0.02));
  color: var(--gold-bright); letter-spacing: 1px;
}
.kon-akcje { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.kon-akcje .btn { margin-top: 0; }
.kon-rewanz { font-size: 16px; letter-spacing: 2px; padding: 13px; }
.kon-czekanie { text-align: center; font-size: 11px; color: var(--text); margin-top: 12px; letter-spacing: 1px; }
.kon-wyjscie {
  display: block; text-align: center; margin-top: 12px; font-size: 10px;
  color: var(--text); text-decoration: none; letter-spacing: 1px; opacity: .75;
}
.kon-wyjscie:hover { opacity: 1; color: var(--gold); }

/* ---------- Karty wyboru czempiona ---------- */
.karta-post {
  position: relative; text-align: left; padding: 10px 11px 11px;
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.karta-post:hover { border-color: var(--kol); }
.karta-post.wybrana { background: rgba(30,110,200,0.16); }
.kp-ptaszek {
  position: absolute; top: 7px; right: 8px; font-size: 11px;
  color: var(--kol); text-shadow: 0 0 8px var(--kol);
}
.kp-glowa { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* .ui-znak ma z dawnego, wyśrodkowanego kafla margin: 0 auto — w rzędzie flex
   zjadałby całą wolną przestrzeń i spychał nazwę na prawą krawędź karty. */
.karta-post .ui-znak { margin: 0; flex: none; }
.kp-tyt { min-width: 0; flex: 1; text-align: left; }
.karta-post .ui-p-nazwa { margin-top: 0; }
.karta-post .ui-p-bron { margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-staty { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-staty span {
  font-size: 10px; color: #cfe0f0; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; padding: 2px 6px;
  white-space: nowrap;
}
.kp-haslo { font-size: 9.5px; color: #7f97ae; line-height: 1.45; }
.kp-umiej { display: flex; flex-direction: column; gap: 2px; }
.kp-umiej span {
  font-size: 9px; color: #8ea6bd; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* wąskie ekrany: jedna karta na rząd, ale bez rozjeżdżania się treści */
@media (max-width: 560px) {
  .ui-postacie { grid-template-columns: 1fr; }
  .kp-haslo { font-size: 10px; }
}

/* Bohaterowie 2.0 — galeria po lewej, dossier wybranej postaci po prawej. */
.boh-ramka{width:min(1400px,96vw);margin:18px auto;padding:0 4px 28px}
.boh-naglowek{margin-bottom:14px}
.boh-prezentacja{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;align-items:start}
.boh-lista{display:grid;grid-template-columns:1fr;gap:7px;position:sticky;top:14px}
.boh-portret{position:relative;height:82px;padding:0;overflow:hidden;border:1px solid rgba(142,166,189,.25);border-radius:6px;background:#071526;cursor:pointer;text-align:left;color:#fff;transition:border-color .18s,transform .18s,box-shadow .18s}
.boh-portret img{position:absolute;left:0;top:0;width:62%;height:100%;object-fit:contain;object-position:left center;filter:saturate(.72) brightness(.62);transition:filter .18s}
.boh-portret-cien{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,10,19,.15),rgba(2,10,19,.38) 44%,#020a13 100%)}
.boh-portret-tekst{position:absolute;right:9px;bottom:9px;text-align:right;display:flex;flex-direction:column;max-width:65%}
.boh-portret-tekst b{font-size:14px;letter-spacing:2px;color:#dfeaf4}
.boh-portret-tekst small{font-size:8px;color:#91a9bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boh-portret:hover,.boh-portret:focus-visible{transform:translateX(3px);border-color:var(--boh-kolor)}
.boh-portret:hover img,.boh-portret.wybrana img{filter:saturate(1.08) brightness(.9)}
.boh-portret.wybrana{border-color:var(--boh-kolor);box-shadow:inset 3px 0 var(--boh-kolor),0 0 18px color-mix(in srgb,var(--boh-kolor) 25%,transparent)}
.boh-portret.wybrana .boh-portret-tekst b{color:var(--boh-kolor)}
.boh-lock{position:absolute;left:5px;top:5px;padding:2px 5px;background:#020a13d9;border:1px solid #b99b5b66;color:#dbc482;font-size:7px;letter-spacing:.6px}
.boh-szczegoly{min-width:0}
.boh-karta{cursor:default;border-radius:6px;background:linear-gradient(145deg,rgba(12,31,49,.94),rgba(3,13,25,.96));overflow:hidden;box-shadow:0 18px 55px #0007}
.boh-karta:hover{transform:none;box-shadow:0 18px 55px #0007}
.boh-wizytowka{display:grid;grid-template-columns:minmax(300px,42%) minmax(0,1fr);min-height:340px;border-bottom:1px solid rgba(255,255,255,.08)}
.boh-art{position:relative;overflow:hidden;background-color:#020a13;background-size:cover;background-position:center}
.boh-art:before{content:"";position:absolute;inset:-18px;background:rgba(2,10,19,.5);backdrop-filter:blur(12px);z-index:1}
.boh-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,10,19,.2),transparent 50%,rgba(5,18,31,.88) 100%),linear-gradient(0deg,rgba(5,18,31,.45),transparent 38%);z-index:3;pointer-events:none}
.boh-art img{width:100%;height:100%;position:absolute;z-index:2;object-fit:contain;object-position:center;filter:saturate(1.08) contrast(1.04);padding:5px;box-sizing:border-box}
.boh-glowa{display:block;padding:34px 34px 26px;background:radial-gradient(circle at 10% 15%,color-mix(in srgb,var(--boh-kolor) 15%,transparent),transparent 48%)}
.boh-kicker{font-size:9px;letter-spacing:2.2px;color:var(--blue);margin-bottom:10px}
.boh-nazwa{font-size:42px;letter-spacing:7px;line-height:1;margin:0 0 9px;text-shadow:0 0 28px color-mix(in srgb,var(--boh-kolor) 40%,transparent)}
.boh-rola{font-size:11px;letter-spacing:1px;text-transform:uppercase}.boh-rola i{display:inline-block;width:18px;height:1px;background:var(--boh-kolor);vertical-align:middle;margin:0 8px}
.boh-haslo{max-width:620px;min-height:40px;margin:20px 0;color:#c9d8e5;font-size:14px;line-height:1.55}
.boh-staty{margin:0 0 25px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}
.boh-staty div{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:9px 10px;background:#020a137d;border:1px solid rgba(255,255,255,.08)}
.boh-staty span{font-size:8px;letter-spacing:1.3px;color:#829ab0}.boh-staty b{font-size:18px;color:#ecd49c}.boh-staty em{grid-column:1/-1;display:block;height:2px;background:var(--boh-kolor);opacity:.8}
.boh-wybierz{width:100%;margin:0;font-size:10px}.boh-wybierz.wybrana{border-color:#38d89a;color:#38d89a}
.boh-plusy{padding:14px 24px;gap:24px;background:rgba(0,0,0,.15)}
.boh-plusy li{font-size:10px;line-height:1.55}
.boh-zdolnosci{padding:16px 24px 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.boh-zdol{padding:10px;background:rgba(2,10,19,.38);border:1px solid rgba(255,255,255,.055)}
.boh-zdol:last-child{grid-column:1/-1;border-color:rgba(255,216,79,.22)}
.boh-zdol-opis{font-size:10px;line-height:1.48}.boh-zdol-tyt{font-size:12px}
#heroes-back{width:190px;margin:12px 0 0;font-size:10px}
@media(max-width:1050px){.boh-prezentacja{grid-template-columns:1fr}.boh-lista{position:static;grid-template-columns:repeat(7,minmax(105px,1fr));overflow-x:auto}.boh-portret{height:105px}.boh-portret-tekst{max-width:90%}.boh-wizytowka{grid-template-columns:minmax(260px,38%) 1fr}.boh-glowa{padding:25px}.boh-nazwa{font-size:34px}.boh-role{display:none}#heroes-back{width:100%}}
@media(max-height:760px) and (min-width:1051px){.boh-portret{height:66px}.boh-wizytowka{min-height:295px}.boh-glowa{padding:24px 30px}.boh-haslo{margin:12px 0}.boh-plusy{padding:10px 20px}.boh-zdolnosci{padding:12px 20px}}

/* ---------- Lobby: kod, skład, podsumowanie ustawień ---------- */
.lob-kod-rzad { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lob-kod-rzad .lobby-code { margin: 6px 0 2px; }
.lob-kopiuj {
  background: rgba(10,200,185,0.10); border: 1px solid var(--blue); color: var(--blue);
  font-size: 10px; font-weight: 700; letter-spacing: 2px; padding: 7px 13px;
  cursor: pointer; border-radius: 5px; transition: all .15s; white-space: nowrap;
}
.lob-kopiuj:hover { background: rgba(10,200,185,0.22); color: #fff; }
.lob-kopiuj.ok { border-color: #7cff9e; color: #7cff9e; background: rgba(124,255,158,0.12); }
/* FRIENDS — PHASE C: kompaktowa lista zaproszeń wprost z lobby. Ten sam
   wzorzec co #friends-panel (patrz tam), ale jako mała rozwijana karta pod
   przyciskiem, nie pełnoekranowa nakładka — "kompaktowo", nie przeprojektowanie
   lobby. Wiersze/przyciski to te same klasy .fr-row/.fr-nick/.ui-kropka co w
   panelu znajomych, więc styl zostaje spójny bez nowego CSS na wiersz. */
.lob-invite-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px; z-index: 25; width: min(280px, 88vw); max-height: 260px;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--gold); box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  overflow-y: auto; text-align: left;
}
.lob-invite-drop .fr-list { display: flex; flex-direction: column; gap: 5px; }
.lob-invite-drop .fr-offline { font-size: 9.5px; letter-spacing: .5px; color: var(--text); flex: none; }
/* wybrany tryb, trudność i postać widoczne bez przewijania w dół */
.lob-ustawienia { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.lob-znacznik {
  font-size: 10px; letter-spacing: 1px; padding: 4px 9px;
  border: 1px solid; border-radius: 5px; background: rgba(255,255,255,0.03); white-space: nowrap;
}
.player-row.ja { border-color: var(--blue); background: rgba(10,200,185,0.07); }
.lob-ty { font-size: 10px; color: var(--blue); letter-spacing: 1px; }
.player-row.pusty { opacity: .45; border-style: dashed; }
.player-row.pusty .nick { font-size: 12px; letter-spacing: 1px; color: var(--text); }
.pusty-dot { background: transparent !important; border: 1px dashed var(--text); box-shadow: none !important; }
.lob-info { font-size: 10px; color: var(--text); margin-top: 8px; letter-spacing: .4px; }

/* ---------- TŁO I UKŁAD NA CAŁE OKNO ----------
   Ramka menu przestaje być wyśrodkowanym panelem 1180 px — wypełnia okno,
   a pod nią leży grafika areny. Dotyczy ekranów menu: STRONA GŁÓWNA, GRAJ,
   LOBBY, BOHATEROWIE i przeglądarka. Ekran gry (canvas) jest nietknięty. */
.screen.z-tlem {
  background:
    linear-gradient(180deg, rgba(1,10,19,0.62), rgba(1,10,19,0.86)),
    url('/tlo-menu.jpg') center / cover no-repeat fixed,
    var(--bg);
  padding: 0;
}
/* delikatna ramka HUD po brzegach ekranu — jak na referencji, ale cienka */
.screen.z-tlem::before {
  content: ''; position: fixed; inset: 10px; pointer-events: none; z-index: 1;
  border: 1px solid rgba(73,182,255,0.22); border-radius: 10px;
  box-shadow: inset 0 0 90px rgba(4,12,26,0.75);
}
/* narożniki: krótkie jaśniejsze kreski, żeby ramka nie wyglądała jak zwykły box */
.screen.z-tlem::after {
  content: ''; position: fixed; inset: 10px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, #49b6ff, transparent) left  top    / 90px 2px no-repeat,
    linear-gradient(90deg, transparent, #49b6ff) right top    / 90px 2px no-repeat,
    linear-gradient(90deg, #49b6ff, transparent) left  bottom / 90px 2px no-repeat,
    linear-gradient(90deg, transparent, #49b6ff) right bottom / 90px 2px no-repeat,
    linear-gradient(180deg, #49b6ff, transparent) left  top    / 2px 90px no-repeat,
    linear-gradient(180deg, #49b6ff, transparent) right top    / 2px 90px no-repeat,
    linear-gradient(0deg,   #49b6ff, transparent) left  bottom / 2px 90px no-repeat,
    linear-gradient(0deg,   #49b6ff, transparent) right bottom / 2px 90px no-repeat;
  opacity: .5;
}
/* Ramka treści rozciąga się na całe okno; tło ma prześwitywać, więc panel
   jest znacznie bardziej przezroczysty niż dotąd. */
.screen.z-tlem .ui-ramka {
  width: 100%; max-width: none; max-height: none;
  height: 100vh; height: 100dvh;
  margin: 0; border: 0; border-radius: 0;
  padding: 26px 30px;
  background: transparent; box-shadow: none;
  position: relative; z-index: 2;
  gap: 20px;
}
/* Kolumny dostają własne, półprzezroczyste tło — inaczej tekst gubi się na grafice */
.screen.z-tlem .ui-bok,
.screen.z-tlem .ui-prawa {
  background: linear-gradient(180deg, rgba(8,20,38,0.82), rgba(4,11,22,0.88));
  border: 1px solid rgba(47,127,208,0.3); border-radius: 12px;
  padding: 16px 14px;
  backdrop-filter: blur(3px);
}
.screen.z-tlem .ui-srodek { padding-right: 4px; }

/* Menu bliżej referencji: wyższe pozycje, wyraźniejszy stan aktywny */
.screen.z-tlem .ui-nav-poz {
  padding: 14px 15px; font-size: 12.5px; letter-spacing: 2px; border-radius: 10px;
}
.screen.z-tlem .ui-nav-poz span { font-size: 15px; width: 22px; }
.screen.z-tlem .ui-nav-poz.aktywna {
  background: linear-gradient(90deg, rgba(30,120,215,0.5), rgba(30,110,200,0.08));
  border-color: rgba(73,182,255,0.7);
  box-shadow: inset 3px 0 0 #49b6ff, 0 0 18px rgba(73,182,255,0.18);
}
.screen.z-tlem .ui-logo { padding: 6px 2px 18px; }

@media (max-width: 1000px) {
  .screen.z-tlem .ui-ramka { height: auto; min-height: 100vh; padding: 14px; }
  .screen.z-tlem::before, .screen.z-tlem::after { inset: 4px; }
  /* na telefonach `fixed` potrafi rozciągnąć tło do rozmiaru dokumentu
     i mocno je przybliżyć — tam grafika ma się po prostu przewijać */
  .screen.z-tlem { background-attachment: scroll, scroll, scroll; }
}

/* ---------- STRONA GŁÓWNA ----------
   Korzysta z istniejącej ramki (.ui-ramka), kart (.ui-karta) i przycisków (.btn).
   Nowe są tylko: panel powitalny z tłem HUD, dwie karty skrótów i pasek na dole.
   Kolory wyłącznie z palety gry — żadnych obrazów, wszystko w CSS. */
.ui-ramka-2 { grid-template-columns: 236px minmax(360px, 1fr); }

/* ---------- PASEK WSPARCIA I SPOŁECZNOŚCI (strona główna) ----------
   Ma wyglądać jak element dashboardu, a nie jak baner reklamowy, więc
   korzysta z tych samych wartości co .ui-karta i .ui-konto: to samo
   zaokrąglenie 10 px, ta sama rodzina obramowań rgba(47,127,208,·) i ta
   sama skala tekstu (etykieta ~9-10 px z dużym trackingiem, opis ~11 px).

   ŚWIADOME OGRANICZENIA:
   · brak animacji własnej — jedyne pulsowanie na tym ekranie należy do
     .hm-cta (ZAGRAJ TERAZ) i nie wolno z nim konkurować,
   · glow tylko na :hover i tylko przy krawędzi,
   · wysokość ~76 px na desktopie, ~66 px na 1366x768.

   DLACZEGO clamp(vh), A NIE @media(max-height): w arkuszu obowiązuje
   inwariant (test „progi wysokości nie skalują całej aplikacji ani strony
   głównej"), który zabrania wciągania klas strony głównej do progów
   wysokości — te progi należą do kompaktu lobby. Pasek oddycha więc
   płynnie przez clamp na paddingu i odstępie, zamiast przeskakiwać na
   progu. Efekt na 768 px wysokości jest ten sam, a strażnik zostaje
   nietknięty. */
.hm-wsp {
  display: flex; align-items: center; gap: clamp(10px, 1.4vh, 14px); flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(20,60,110,0.42), rgba(8,20,36,0.62));
  border: 1px solid rgba(47,127,208,0.3); border-radius: 10px;
  padding: clamp(9px, 1.3vh, 12px) 16px;
}
.hm-wsp-serce {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #ff6b81;
  background: rgba(232,64,87,0.1); border: 1px solid rgba(232,64,87,0.3);
}
/* UKŁAD PASKA: [ WSPARCIE + DISCORD ] po lewej, [ REKLAMA ] po prawej.

   BUDŻET SZEROKOŚCI — LICZONY, NIE ZGADNIĘTY.
   .ui-ramka to 236px + 1fr + ~400px (prawa szyna, po poszerzeniu o ~25%;
   było ~300px), gap 16, padding 16, szerokość min(1180px, 96vw). Środkowa
   kolumna ma więc ~480px i JEST PRAKTYCZNIE TAKA SAMA na 1920, 1440 i 1366
   (ramka wcześniej dobija do 1180px). Lewa grupa (serce 40 + tekst od 140 +
   dwa przyciski po 164 + odstępy) potrzebuje ~560px, czyli WIĘCEJ niż ma
   kolumna — dokładnie jak przed poszerzeniem szyny. Slot reklamowy
   ZEJDZIE WIĘC NA DESKTOPIE DO DRUGIEGO WIERSZA i będzie paskiem na całą
   szerokość — to jest zamierzone, a nie awaria układu: pełnowymiarowy
   baner czyta się lepiej niż wciśnięty pasek 100 px. Na szerszych
   układach (gdy kolumna ma ponad ~820px) usiądzie po prawej, tak jak na
   makiecie. Obie sytuacje wyglądają celowo, bo obie są celowe.

   KTO ROŚNIE, A KTO NIE — to jest tu cała sztuczka. Lewa grupa i blok
   tekstu mają `flex: 0 1 auto`, czyli biorą tyle, ile naprawdę potrzebują,
   i ANI PIKSELA więcej. Rośnie WYŁĄCZNIE slot reklamowy. Gdyby tekst miał
   `flex: 1`, zjadałby całe wolne miejsce i spychał przyciski na środek
   paska — dokładnie tak wyglądała pierwsza wersja.

   Podpis jest ograniczony do 250px i łamie się na dwa wiersze. Puszczony
   w jedną linię ma ~330px i sam odbierał reklamie jedną czwartą miejsca,
   a pasek i tak ma wysokość na dwa wiersze. */
.hm-wsp-lewa {
  display: flex; align-items: center; gap: clamp(8px, 1.2vh, 12px);
  flex: 0 1 auto; flex-wrap: wrap; min-width: 0;
}
.hm-wsp-tekst { min-width: 130px; max-width: 250px; flex: 0 1 auto; }

/* Slot reklamowy. Nie ma animacji, nie ma poświaty na hover — nie jest
   klikalny, dopóki nie zostanie sprzedany. Złoto (--gold) zamiast czystej
   żółci: ten sam odcień, którym gra oznacza rzeczy „poza rozgrywką"
   (przyciski .btn, kwoty wsparcia), więc slot czyta się jak część
   interfejsu, a nie jak wklejka z zewnątrz. */
.hm-reklama {
  /* JEDYNY element paska z `flex-grow: 1` — całe wolne miejsce należy do
     reklamy, bo za nie się płaci. Baza 320px, żeby przy średnich
     szerokościach reklama wygrywała walkę o przełamanie wiersza z lewą
     grupą, a nie odwrotnie. */
  flex: 1 1 320px; min-width: 220px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 14px; text-align: center;
  border: 1px dashed rgba(200,170,110,0.55); border-radius: 9px;
  background: rgba(200,170,110,0.05);
}
.hm-reklama-tyt {
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--gold);
}
.hm-reklama-pod { font-size: 9.5px; color: #7f9bb8; letter-spacing: 0.6px; }
/* Stan „sprzedane": ramka przestaje być przerywana, znika wyściółka, a
   wstawiony obrazek albo link wypełnia slot w całości. */
.hm-reklama.zajete { padding: 0; border-style: solid; border-color: rgba(200,170,110,0.35); overflow: hidden; }
.hm-reklama.zajete img, .hm-reklama.zajete a { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============ BANER PARTNERA — ProfitNexus.pl ============

   WYSOKOŚĆ. Grafika ma proporcję 3:1 (2172 × 724). Slot na desktopie
   dostaje ~548px szerokości, więc baner w pełnej proporcji miałby 183px
   i sam byłby wyższy niż CAŁY dzisiejszy pasek wsparcia — zepchnąłby
   „ZAGRAJ TERAZ" poniżej krawędzi ekranu na 1366×768. Dlatego slot ma
   ograniczoną wysokość, a grafika `contain`: baner jest widoczny w
   CAŁOŚCI (logo, hasło i CTA „SPRAWDŹ"), tylko mniejszy, i nigdy nie
   zostaje rozciągnięty ani przycięty.

   DLACZEGO `contain`, A NIE `cover`. `cover` wypełniłby slot bez pustych
   pasów, ale przy proporcji 3:1 wciśniętej w pas 4,7:1 obciąłby górę i
   dół grafiki — razem z ramką i częścią przycisku CTA. Właściciel prosił
   wprost, żeby baner nie był przycinany.

   TŁO. Krawędzie grafiki mają kolor #000b16 (zmierzony z pliku), więc
   slot dostaje dokładnie ten kolor. Dopełnienie po bokach zlewa się
   z banerem i nie widać, że obraz jest węższy od slotu.

   Klasa `zajete` ustawia `object-fit: cover` dla ogólnego przypadku
   wstawki — tu ją świadomie nadpisujemy, razem z `display:block` zamiast
   odziedziczonej kolumny flex, bo plakietka „PARTNER GRY" jest
   pozycjonowana absolutnie względem slotu. */
.hm-reklama.hm-partner {
  display: block; position: relative;
  /* PASEK NA PLAKIETKĘ — 22px u góry, na KAŻDEJ szerokości.
     Wcześniej plakietka leżała na ciemnym marginesie, który `contain`
     zostawiał po bokach grafiki. Przy jednej kreacji to działało; przy
     dwóch przestało: promocyjna ma proporcję 4,07:1, wypełnia slot znacznie
     szerzej i przy 1920×1080 plakietka wchodziła 89px na nagłówek
     „Promocje, bonusy i okazje" (zmierzone w pliku: jasność do 244/255 pod
     plakietką). Zamiast dobierać róg pod konkretną grafikę — co i tak
     rozsypałoby się przy trzeciej kreacji — plakietka dostaje własny pasek
     NAD obrazkiem. Kosztuje 22px wysokości paska i jest odporne na każdą
     przyszłą kreację, bo nie zakłada niczego o jej treści. */
  padding-top: 22px;
  background: #000b16; border-color: rgba(200,170,110,0.42);
  /* min-height 56px zostaje po .hm-reklama: gdyby plik banera kiedyś
     zniknął, slot nie zapadnie się do zera i pasek nie podskoczy. */
  line-height: 0;
  transition: border-color .15s, box-shadow .15s;
}
/* WYSOKOŚĆ SIEDZI NA KONTENERZE, NIE NA OBRAZKU — to jest sedno rotacji.
   Kreacje mają różne proporcje (główna 3:1, promocyjna 4,07:1). Gdyby
   wysokość brała się z obrazka, każda podmiana zmieniałaby wysokość slotu,
   pasek by podskakiwał, a „ZAGRAJ TERAZ" pod nim przesuwałoby się co
   45 sekund. Kontener trzyma proporcję banera GŁÓWNEGO i jest jedynym
   źródłem wysokości; obrazki tylko wpasowują się w gotowe pudełko.

   PEŁNA PROPORCJA 3:1 ZJADŁABY 183px, więc tniemy wysokość, nie grafikę.
   Liczba wzięta z pomiaru w przeglądarce, nie z sufitu — przy tej wartości
   pasek rośnie o 52-79px względem pustego slotu, a „ZAGRAJ TERAZ" zostaje
   widoczne bez przewijania na 1920×1080, 1440×900 i 1366×768. TU SIĘ KRĘCI
   GAŁKĄ, gdyby partner miał być większy: podniesienie 132px powiększa baner,
   ale każdy piksel idzie prosto w wysokość paska.

   Selektory są celowo trzyczłonowe: `.hm-reklama.zajete a` i
   `.hm-reklama.zajete img` (0,2,1) to reguły ogólnej wstawki reklamowej,
   które ustawiają `height: 100%` i `object-fit: cover`. Krótszy selektor
   przegrałby z nimi specyficznością i baner zostałby przycięty. */
.hm-reklama.hm-partner .hm-partner-link {
  display: block; position: relative; width: 100%; text-decoration: none;
  aspect-ratio: 2172 / 724;
  /* ===== WYSOKOŚĆ SCENY — TU SIEDZI CAŁA WIELKOŚĆ BANERA =====

     Scena ma proporcję kreacji głównej (3:1) i pełną szerokość slotu, więc
     jej wysokość CHCE być szerokość/3. Ten limit ją przycina — i to on,
     a nie rotacja, decyduje o tym, jak duży jest baner.

     RUNDA 4 (2026-09-13) — SLOT WRACA DO SZCZUPŁEJ WYSOKOŚCI Z RUNDY 2.
     Runda 3 podniosła sufit sceny, żeby kreacja urosła — ale to podniosło
     CAŁY SLOT z powrotem, co właściciel odrzucił. Poprawna diagnoza: runda 3
     zakładała, że `object-fit: contain` już zużywa 100% wysokości sceny, więc
     jedynym sposobem na większą kreację jest większa scena. To było błędne
     założenie — PRAWDZIWĄ przyczyną małej kreacji były puste marginesy
     UPIECZONE W SAMYM PLIKU PNG (zmierzone poniżej, patrz reguła
     `.hm-partner-kreacja` niżej), które `contain` skaluje razem z treścią,
     zamiast pomijać. Rozwiązanie: scena wraca do wysokości z rundy 2, a
     kreacja dostaje własne, większe pudełko (patrz reguła niżej), które
     dolicza tylko treść, nie marginesy.

     RUNDA 5 (2026-09-14) — KOREKTA W GÓRĘ, UMIARKOWANIE. Po rundzie 4
     marginesy w PLIKU są już całkowicie wycięte (kreacja wypełnia 100%
     wysokości sceny — patrz reguła `.hm-partner-kreacja` niżej), więc nie
     zostało nic więcej do przycięcia. Mimo to baner dalej wyglądał za mały
     wizualnie — 68-48px SCENY to po prostu za mało pikseli na czytelne
     logo+hasło+CTA, niezależnie od tego, jak dokładnie je wypełnia. Jedyny
     pozostały dźwignia to sama scena, więc sufit rośnie umiarkowanie
     (~38% wyżej niż runda 4), świadomie NIE wracając do sufitu rundy 3
     (113px), który właściciel odrzucił jako zbyt gruby pasek sponsorski:
       1920×1080  scena 94px + 22px plakietki ≈ 118px łącznie (było 92px)
       1440×900   scena 78px + 22px plakietki ≈ 102px łącznie (było 81px)
       1366×768   scena 67px + 22px plakietki ≈  91px łącznie (było 72px)
     (wyliczone z formuły clamp, nie zmierzone w przeglądarce — do
     zweryfikowania na oko przy najbliższej okazji). Wciąż daleko poniżej
     rundy 3 (137/119/105) i rundy 1 sprzed odchudzenia (162/139/122) —
     zauważalnie większy baner, nie gruby pas. Zamek w teście 13b rośnie
     z 70px do 96px razem z tą zmianą.

     RUNDA 6 (2026-09-14) — DELIKATNA DOKŁADKA. Właściciel poprosił o
     jeszcze odrobinę większy baner po rundzie 5. Sufit i środek clampa
     idą w górę o ~9% (nie kolejny duży skok jak runda 4->5) — celowo
     zostawiając wyraźny margines poniżej odrzuconej rundy 3 (137/119/105),
     żeby nie zbliżyć się z powrotem do „grubego paska sponsorskiego":
       1920×1080  scena 104px + 22px plakietki ≈ 128px łącznie (było 118px)
       1440×900   scena  86px + 22px plakietki ≈ 110px łącznie (było 102px)
       1366×768   scena  74px + 22px plakietki ≈  98px łącznie (było  91px)
     Zamek w teście 13b rośnie z 96px do 105px razem z tą zmianą. */
  max-height: clamp(61px, 9.6vh, 105px);
  overflow: hidden;   /* przycina TU, a nie na zewnętrznym <aside>, żeby powiększona
                         kreacja (patrz reguła niżej) nigdy nie weszła na 22px
                         pasek plakietki ani poza dolną krawędź slotu */
}
/* ===== KREACJE: PRZYCIĘCIE PUSTYCH MARGINESÓW Z PLIKU (2026-09-13, runda 4) =====

   DIAGNOZA. Oba pliki PNG są NIETKNIĘTE (bajt w bajt, jak zawsze — patrz
   komentarz o rotacji wyżej) i mają WŁASNE, upieczone w obrazie puste tło
   wokół treści:
     - profitnexus.png (główna, 2172×724): treść (logo, „ProfitNexus.pl",
       hasło, prezent+monety, CTA „SPRAWDŹ") zajmuje wiersze 74-617 z 724,
       czyli 75% wysokości — 10% pustego tła u góry, 15% u dołu.
     - profitnexus-promocje.png (promocyjna, 931×229): treść zajmuje wiersze
       31-215 z 229, czyli 81% wysokości — 14% pustego tła u góry, 6% u dołu.
   Zmierzone programowo (gęstość pikseli różnych od tła #000b16 na wiersz,
   próg >2% szerokości), nie na oko.

   `object-fit: contain` skaluje CAŁY plik do wysokości sceny — łącznie
   z tymi marginesami — więc scena musiała być wyższa niż potrzeba, żeby
   sama TREŚĆ wyglądała czytelnie. Naprawa: `contain` zostaje (nadal
   gwarantuje brak zniekształcenia i poprawne centrowanie), a KAŻDA kreacja
   z osobna dostaje własne, większe pudełko (width/height powyżej 100%,
   wyśrodkowane przez ujemne top/left — WSZYSTKO w procentach, żeby dalej
   skalowało się płynnie z sceną, tak jak zawsze). `contain` wewnątrz tego
   większego pudełka powiększa obraz dokładnie o współczynnik (pełna
   wysokość / wysokość treści), a top/left przesuwają go tak, żeby środek
   TREŚCI, a nie środek CAŁEGO PLIKU, wylądował na środku sceny.
   `overflow: hidden` na scenie (wyżej) obcina to, co wystaje poza pudełko —
   czyli dokładnie puste marginesy, nic z logo/tekstu/CTA/monet. Skalowanie
   jest jednolite w obu osiach (ten sam mnożnik na width i height), więc
   proporcja się nie zmienia; pliki źródłowe i rozmiar sceny zostają
   nietknięte.

   ŚWIADOMIE BEZ `transform: scale()`. To dałoby dokładnie ten sam efekt
   wizualny prościej, ale w tym arkuszu obowiązuje twardy, ogólnoplikowy
   zakaz `transform: scale`/`zoom` (test/klient.test.js: „lobby mieści się
   układem, a nie globalnym skalowaniem" — brief zabraniał rozwiązywania
   układu globalnym skalowaniem, strażnik nie rozróżnia zastosowania,
   sprawdza CAŁY plik). Stąd rozwiązanie przez zwykłe pudełko (width/height/
   top/left), które daje ten sam wynik bez dotykania `transform`.

   KRUCHOŚĆ DO ZAPAMIĘTANIA: te cztery liczby na kreację są dobrane pod
   KONKRETNE piksele TYCH DWÓCH plików. Podmiana kreacji na inną grafikę
   (inny układ, inne marginesy) wymaga przeliczenia width/height/top/left od
   nowa — inaczej nowa kreacja albo zostanie ucięta, albo wróci pusty
   margines. Wzór: height = width = 100 × pełnaWysokość/wysokośćTreści (%);
   top = -100 × górnyMargines/wysokośćTreści (%);
   left = -(height% − 100) / 2 (wyśrodkowanie poziome, treść nie jest
   przycinana w poziomie — oba pliki mają znikomy margines boczny). */
.hm-reklama.hm-partner .hm-partner-kreacja {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .28s ease;
}
/* main: treść w wierszach 74-618/724 (75,1% wysokości) */
#hm-partner-main.hm-partner-kreacja {
  width: 133.09%; height: 133.09%; top: -13.60%; left: -16.54%; right: auto; bottom: auto;
}
/* promo: treść w wierszach 31-216/229 (80,8% wysokości) */
#hm-partner-promo.hm-partner-kreacja {
  width: 123.78%; height: 123.78%; top: -16.76%; left: -11.89%; right: auto; bottom: auto;
}
.hm-reklama.hm-partner .hm-partner-kreacja.jest { opacity: 1; }
/* Przy „ogranicz animacje" kreacja nadal się zmienia — po prostu od razu,
   bez przenikania. Zmiana treści to informacja, nie ozdoba. */
@media (prefers-reduced-motion: reduce) {
  .hm-reklama.hm-partner .hm-partner-kreacja { transition: none; }
}
/* Plakietka „PARTNER GRY" — element UI Flock Attack, nie część grafiki.
   Złoto (--gold) i te same litery rozstrzelone co w reszcie dashboardu,
   własne tło i ramka, żeby nikt nie wziął jej za napis wydrukowany na
   banerze. Siedzi w lewym górnym rogu, nad ciemnym marginesem grafiki,
   więc nie zasłania ani logo ProfitNexus, ani przycisku „SPRAWDŹ".
   `pointer-events: none` — plakietka nie może przechwycić kliknięcia,
   bo klikalny ma być CAŁY baner. */
.hm-partner-plakietka {
  position: absolute; top: 4px; left: 8px; z-index: 2; pointer-events: none;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px; line-height: 1;
  text-transform: uppercase; color: var(--gold);
  padding: 4px 7px; border-radius: 5px;
  background: rgba(4,10,20,0.82); border: 1px solid rgba(200,170,110,0.45);
}
/* HOVER — TYLKO POŚWIATA, ŚWIADOMIE BEZ `transform: scale`.
   Brief dopuszczał albo mikroskalę do 1,01, albo delikatną poświatę. Wybrana
   jest poświata, bo w tym arkuszu obowiązuje starszy, twardy zakaz: układ ma
   się mieścić SAM, a nie przez skalowanie (pilnuje go asercja „lobby mieści
   się układem, a nie globalnym skalowaniem" w test/klient.test.js). Nawet
   scale(1.006) na jednym elemencie zapalałoby ten strażnik, a rozluźnianie
   go dla efektu hover na reklamie byłoby złym interesem: strażnik broni
   decyzji, która kosztowała osobną rundę pracy nad lobby.
   Reszta paska rozjaśnia na hover ramkę i dokłada poświatę — baner robi
   dokładnie to samo, tylko w złocie, więc czyta się jak część interfejsu.
   BEZ animacji ciągłej: reklama nie ma konkurować z pulsującym „ZAGRAJ
   TERAZ", które jest głównym CTA tej strony. */
@media (hover: hover) {
  .hm-reklama.hm-partner:hover {
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(200,170,110,0.28);
  }
}
.hm-partner-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hm-reklama.hm-partner { transition: none; }
}
.hm-wsp-tyt {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: #eaf4ff; line-height: 1.2;
}
.hm-wsp-tyt span { color: #49b6ff; }
.hm-wsp-pod { margin: 4px 0 0; font-size: 11px; color: #9fb6cd; line-height: 1.5; }

/* Przyciski ściśnięte do naturalnej szerokości podpisu (Discord ~167px,
   Stripe ~149px). min-width 150px wyrównuje je optycznie, a każdy zbity
   piksel idzie do slotu reklamowego — o to prosił właściciel. Niżej już
   nie schodzę: „Dołącz do społeczności" przy 9,5px zaczyna się łamać. */
.hm-wsp-akcje { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-wsp-btn {
  display: flex; align-items: center; gap: 8px; min-width: 150px;
  font-family: inherit; text-align: left; text-decoration: none; cursor: pointer;
  color: #eaf4ff; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(47,127,208,0.34); border-radius: 9px;
  padding: 8px 11px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.hm-wsp-ikona { font-size: 16px; flex: none; }
.hm-wsp-opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-wsp-opis b {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.hm-wsp-opis i { font-style: normal; font-size: 9.5px; color: #7f9bb8; letter-spacing: 0.6px; }
.hm-wsp-zew { margin-left: auto; font-size: 12px; color: #6d8aa8; flex: none; }
.hm-wsp-btn:hover  { border-color: var(--blue); background: rgba(10,200,185,0.08);
                     box-shadow: 0 0 14px rgba(10,200,185,0.16); }
.hm-wsp-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Discord dostaje tylko delikatny fiolet na krawędzi i ikonie — pełny
   #5865F2 na całym bloku gryzłby się z niebiesko-cyanową paletą gry. */
.hm-wsp-discord .hm-wsp-ikona { color: #8f9bf0; }
.hm-wsp-discord:hover { border-color: #7c8cf0; background: rgba(124,140,240,0.1);
                        box-shadow: 0 0 14px rgba(124,140,240,0.18); }

@media (max-width: 760px) {
  .hm-wsp { gap: 10px; padding: 11px 13px; }
  .hm-wsp-lewa { gap: 10px; }
  .hm-wsp-tekst { flex: 1 1 100%; }
  .hm-wsp-akcje { width: 100%; }
  /* na wąskim slot zawsze zajmuje własny wiersz — inaczej zostałby z niego
     pasek kilkudziesięciu pikseli, w którym nic się nie mieści */
  .hm-reklama { flex: 1 1 100%; min-width: 0; }
  /* dwa przyciski dzielą wiersz po połowie, a gdy zabraknie miejsca —
     zawijają się jeden pod drugi; min-width musi tu zniknąć, inaczej
     wymusiłby poziome przewijanie */
  .hm-wsp-btn { flex: 1 1 190px; min-width: 0; }
}
.hm-hero {
  position: relative; overflow: hidden;
  border: 1px solid rgba(47,127,208,0.35); border-radius: 12px;
  background: linear-gradient(165deg, rgba(16,44,78,0.72), rgba(5,12,24,0.86));
  padding: 26px 20px 22px; text-align: center;
}
/* tło: radialna poświata + siatka HUD + powolny przesuw — sam CSS, zero obrazów */
.hm-hero-tlo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10,200,185,0.14), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(47,127,208,0.18), transparent 65%),
    repeating-linear-gradient(90deg, rgba(47,127,208,0.06) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(47,127,208,0.06) 0 1px, transparent 1px 42px);
  animation: hm-przesuw 22s linear infinite;
}
@keyframes hm-przesuw { from { background-position: 0 0, 0 0, 0 0, 0 0; }
                        to   { background-position: 0 0, 0 0, 42px 0, 0 42px; } }
.hm-hero-tresc { position: relative; }
.hm-logo-1, .hm-logo-2 { font-size: 34px; font-weight: 800; letter-spacing: 9px; line-height: 1.05; }
.hm-logo-1 { color: #eaf4ff; }
.hm-logo-2 { color: #49b6ff; text-shadow: 0 0 26px rgba(73,182,255,0.45); }
.hm-logo-3 { font-size: 9px; letter-spacing: 4px; color: #5c7fa6; text-transform: uppercase; margin-top: 6px; }
.hm-haslo { font-size: 12.5px; color: #9fb6cd; line-height: 1.9; margin: 16px 0 18px; }
.hm-cta {
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: #eaf4ff; background: linear-gradient(180deg, rgba(10,200,185,0.25), rgba(10,120,140,0.2));
  border: 1px solid var(--blue); border-radius: 10px;
  padding: 15px 34px; cursor: pointer; width: min(340px, 100%);
  box-shadow: 0 0 22px rgba(10,200,185,0.18);
  animation: hm-puls 3.2s ease-in-out infinite;
  transition: background .15s, box-shadow .15s, transform .12s;
}
@keyframes hm-puls {
  0%, 100% { box-shadow: 0 0 18px rgba(10,200,185,0.16); }
  50%      { box-shadow: 0 0 30px rgba(10,200,185,0.34); }
}
.hm-cta:hover { background: linear-gradient(180deg, rgba(10,200,185,0.38), rgba(10,120,140,0.28));
                box-shadow: 0 0 34px rgba(10,200,185,0.4); transform: translateY(-1px); }
.hm-hero-akcje { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.hm-hero-akcje .btn { margin-top: 0; width: auto; min-width: 160px; }

.hm-dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-dwie .ui-karta { display: flex; flex-direction: column; }
.hm-pusto { font-size: 12px; color: #9fb6cd; }
.hm-pusto-info { font-size: 10px; color: var(--text); margin-top: 4px; line-height: 1.5; }
.hm-liczba { font-size: 28px; font-weight: 800; color: var(--blue); line-height: 1; }
.hm-ost-glowa { display: flex; align-items: center; gap: 10px; }
.hm-ost-znak {
  width: 38px; height: 38px; flex: none; border: 1px solid rgba(47,127,208,0.4);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: rgba(0,0,0,0.3);
}
.hm-ost-nazwa { font-size: 14px; color: var(--gold-bright); letter-spacing: 1px; }
.hm-ost-pod { font-size: 10px; color: var(--text); }
.hm-ost-staty { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 6px; font-size: 10.5px; color: #9fb6cd; }
.hm-ost-staty b { color: #eaf4ff; }
.hm-lobby { flex: 1; }
.hm-dwie .btn { margin-top: 10px; }

.hm-skroty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hm-skrot {
  font-family: inherit; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #9fb6cd; background: rgba(255,255,255,0.02);
  border: 1px solid rgba(47,127,208,0.28); border-radius: 9px;
  padding: 12px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: color .15s, border-color .15s, background .15s;
}
.hm-skrot span { font-size: 17px; }
.hm-skrot:hover { color: #eaf4ff; border-color: var(--blue); background: rgba(10,200,185,0.08); }
/* krótkie rozświetlenie karty, na którą wskazał skrót */
.hm-blysk { animation: hm-blysk 0.9s ease-out; }
@keyframes hm-blysk {
  0%   { box-shadow: 0 0 0 0 rgba(10,200,185,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(10,200,185,0); }
}

@media (max-width: 1000px) {
  .ui-ramka-2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hm-dwie { grid-template-columns: 1fr; }
  .hm-skroty { grid-template-columns: 1fr 1fr; }
  .hm-logo-1, .hm-logo-2 { font-size: 26px; letter-spacing: 5px; }
  .hm-hero { padding: 20px 14px 18px; }
  .hm-hero-akcje .btn { min-width: 0; flex: 1 1 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-tlo, .hm-cta { animation: none; }
}

/* ============ HOME 2.0 — CENTRUM DOWODZENIA ============ */
#home-screen {
  align-items: center;
  justify-content: center;
  min-width: 1180px;
  min-height: 700px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 110%, rgba(0,111,183,.24), transparent 44%),
    linear-gradient(rgba(2,10,21,.91), rgba(1,7,15,.97)),
    repeating-linear-gradient(90deg, rgba(44,152,221,.045) 0 1px, transparent 1px 48px);
}
#home-screen .ui-ramka {
  grid-template-columns: 14.5vw minmax(650px, 1fr) 20.8vw;
  gap: 10px;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  max-height: none;
  padding: 9px;
  border-radius: 3px;
  border-color: rgba(27,139,222,.72);
  background: rgba(2,12,25,.94);
  box-shadow: 0 0 50px rgba(0,0,0,.8), inset 0 0 70px rgba(5,85,150,.12);
}
#home-screen .ui-bok,
#home-screen .ui-prawa {
  border: 1px solid rgba(33,126,201,.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(5,25,48,.96), rgba(2,12,25,.96));
  padding: 10px;
}
#home-screen .ui-srodek { gap: 8px; overflow: hidden; }
/* Zachowaj dawny układ także w węższym oknie, bez ucinania prawej szyny. */
@media (max-width: 1179px) {
  #home-screen { min-width: 0; }
  #home-screen .ui-ramka { grid-template-columns: 180px minmax(0, 1fr) 220px; }
  #home-screen .ui-srodek { overflow-y: auto; }
}
#home-screen .ui-logo { justify-content: center; padding: 2px 0 11px; }
#home-screen .ui-logo img { width: 46px; height: 46px; }
#home-screen .ui-logo-1,
#home-screen .ui-logo-2 { font-size: 22px; letter-spacing: 3px; }
#home-screen .ui-logo-3 { font-size: 9px; letter-spacing: 2px; }
#home-screen .ui-beta { display: block; width: max-content; margin: 4px 0 0; }
#home-screen .ui-bok .ui-konto {
  margin: 0 0 8px;
  padding: 8px;
  gap: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(20,72,126,.7), rgba(5,27,49,.82));
}
#home-screen .ui-bok .ui-konto img { width: 28px; height: 28px; }
#home-screen .ui-bok .ui-konto b { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
#home-screen .ui-bok .ui-etyk { font-size: 9px; letter-spacing: 1.6px; }
#home-screen .ui-nav { gap: 3px; }
#home-screen .ui-nav-poz { padding: 11px 10px; font-size: 12.5px; letter-spacing: 1.25px; border-radius: 6px; }
#home-screen .ui-czat-tyt { font-size: 11px; }
#home-screen .ui-czat-lista,
#home-screen .ui-czat-pole { font-size: 12px; }
#home-screen .ui-czat { margin-top: 8px; padding: 8px; border-radius: 6px; }
#home-screen .ui-czat-lista { font-size: 10px; }

#home-screen .hm-hero {
  flex: 1 1 390px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 28px 20px 22px;
  background: #031326;
  border-color: rgba(33,151,231,.66);
  isolation: isolate;
}
#home-screen .hm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(1,9,19,.34), transparent 32%, transparent 68%, rgba(1,9,19,.34)),
              linear-gradient(0deg, rgba(0,8,19,.48), transparent 42%);
}
#home-screen .hm-hero-tlo {
  z-index: -2;
  background: url('/assety/strona-startowa/arena-command-center.png') center 55% / cover no-repeat;
  animation: none;
  filter: saturate(1.08) contrast(1.04);
}
#home-screen .hm-hero-tresc { width: 100%; padding-top: 32px; }
#home-screen .hm-kicker {
  position: absolute;
  left: 0;
  top: -64px;
  margin: 0;
  width: 190px;
  text-align: left;
  color: #eef8ff;
  font-size: clamp(21px, 1.6vw, 31px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 5px;
  text-transform: uppercase;
}
#home-screen .hm-kicker::after {
  content: 'KOOPERACJA  •  PRZETRWANIE  •  POSTĘP';
  display: block;
  margin-top: 8px;
  color: #9eb8d2;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 2px;
}
#home-screen .hm-logo-1,
#home-screen .hm-logo-2 { font-size: clamp(44px, 3.5vw, 68px); letter-spacing: 11px; text-shadow: 0 3px 18px #001; }
#home-screen .hm-logo-2 { color: #56caff; text-shadow: 0 0 24px rgba(39,177,255,.72), 0 3px 18px #001; }
#home-screen .hm-logo-3 { color: #80dcf4; font-size: 11px; letter-spacing: 5px; }
#home-screen .hm-haslo { display: none; }
#home-screen .hm-cta {
  margin-top: 24px;
  width: min(340px, 76%);
  padding: 15px 28px;
  border-radius: 7px;
  font-size: 17px;
  color: white;
  background: linear-gradient(180deg, rgba(13,221,236,.88), rgba(0,139,193,.88));
  border-color: #4ff4ff;
  box-shadow: 0 0 30px rgba(0,222,255,.58), inset 0 0 18px rgba(255,255,255,.2);
}

#home-screen .hm-tryby {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: clamp(118px, 15vh, 160px);
}
#home-screen .hm-tryb {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 18px 8px 11px;
  color: #fff;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(46,163,235,.7);
  border-radius: 7px;
  background-image: linear-gradient(0deg, rgba(2,10,22,.96) 0%, rgba(2,10,22,.15) 78%),
                    url('/assety/strona-startowa/arena-command-center.png');
  background-size: auto, 760px auto;
  box-shadow: inset 0 -44px 30px rgba(2,9,20,.7);
}
#home-screen .hm-tryb-coop { background-position: center, 16% 69%; }
#home-screen .hm-tryb-survival { background-position: center, 43% 59%; filter: hue-rotate(35deg); }
#home-screen .hm-tryb-ranked { background-position: center, 63% 65%; }
#home-screen .hm-tryb-team { background-position: center, 86% 59%; }
#home-screen .hm-tryb:hover { border-color: #66e7ff; box-shadow: inset 0 -44px 30px rgba(2,9,20,.7), 0 0 16px rgba(0,184,255,.25); }
#home-screen .hm-tryb-ikona { font-size: 22px; line-height: 1; text-shadow: 0 0 12px #43cfff; }
#home-screen .hm-tryb b { font-size: 14px; letter-spacing: 1.2px; }
#home-screen .hm-tryb small { color: #d2e1ef; font-size: 10.5px; letter-spacing: 1.1px; }

#home-screen .hm-akcje-glowne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 52px; }
#home-screen .hm-akcja {
  color: #e9f8ff;
  font: 700 10px/1 inherit;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(30,152,225,.72);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(8,47,79,.9), rgba(3,24,44,.96));
}
#home-screen .hm-akcja span { margin-right: 9px; color: #3de4ff; font-size: 19px; vertical-align: middle; }
#home-screen .hm-akcja:hover { border-color: #58ebff; background: linear-gradient(180deg, rgba(10,75,112,.96), rgba(3,32,57,.98)); }
#home-screen .hm-dane-pomocnicze { display: none; }

#home-screen .ui-prawa { gap: 8px; }
#home-screen .ui-prawa .ui-karta { padding: 11px 12px; border-radius: 7px; }
#home-screen #akt-karta { flex: 1 1 auto; min-height: 0; }
#home-screen .ui-akt { max-height: none; }

/* ---------- Ekran BOHATEROWIE ----------
   Jedna kolumna kart na wąskich ekranach, dwie na szerokich. Karta sama się
   przewija razem z ekranem — żadnych zagnieżdżonych pasków przewijania. */
.boh-ramka {
  width: min(1180px, 96vw);
  margin: 24px auto;
  padding: 0 4px 24px;
}
.boh-naglowek { text-align: center; margin-bottom: 18px; }
.boh-tytul {
  font-size: 30px; letter-spacing: 6px; color: var(--gold-bright);
  margin: 0 0 6px; text-shadow: 0 0 22px rgba(200,170,110,0.35);
}
.boh-podtyt { font-size: 12px; color: var(--text); letter-spacing: .6px; }
.boh-role { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.boh-plakietka {
  font-size: 10px; letter-spacing: 1px; padding: 4px 9px;
  border: 1px solid; border-radius: 5px; background: rgba(255,255,255,0.03); white-space: nowrap;
}
.boh-lista { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .boh-lista { grid-template-columns: 1fr 1fr; } }
.boh-karta {
  border: 1px solid rgba(200,170,110,0.3);
  background: rgba(10,20,40,0.62);
  border-radius: 8px; overflow: hidden;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.boh-karta:hover, .boh-karta:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(0,0,0,0.45); }
.boh-karta.wybrana { box-shadow: 0 0 0 2px var(--blue) inset; }
.boh-glowa { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.boh-znak {
  width: 46px; height: 46px; flex: none; border: 2px solid; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: rgba(0,0,0,0.35);
}
.boh-nazwa { font-size: 20px; letter-spacing: 3px; margin: 0; }
.boh-rola { font-size: 11px; color: var(--text); letter-spacing: .5px; }
.boh-staty { margin-left: auto; display: flex; gap: 12px; text-align: center; }
.boh-staty div { display: flex; flex-direction: column; }
.boh-staty b { font-size: 15px; color: var(--gold-bright); }
.boh-staty span { font-size: 9px; color: var(--text); letter-spacing: .5px; }
.boh-plusy {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.boh-etyk { font-size: 9px; letter-spacing: 1.4px; margin-bottom: 4px; }
.boh-etyk.dobre { color: #2bd07a; }
.boh-etyk.zle { color: #e0724f; }
.boh-plusy ul { margin: 0; padding-left: 16px; }
.boh-plusy li { font-size: 11px; color: #c3d4e6; line-height: 1.5; }
.boh-zdolnosci { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.boh-zdol { display: flex; gap: 10px; align-items: flex-start; }
.boh-klaw {
  flex: none; min-width: 38px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--gold-bright);
  border: 1px solid rgba(200,170,110,0.35); border-radius: 5px; padding: 4px 5px;
  background: rgba(0,0,0,0.3);
}
.boh-zdol-tyt { font-size: 13px; color: var(--gold-bright); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.boh-cd {
  font-size: 9px; letter-spacing: .8px; color: #8ea6bd;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.boh-cd.ulta { color: #ffd84f; border-color: rgba(255,216,79,0.4); }
.boh-cd.staly { color: var(--text); border-style: dashed; }
.boh-zdol-opis { font-size: 11px; color: #a9bdd2; line-height: 1.55; margin-top: 2px; }
@media (max-width: 560px) {
  .boh-tytul { font-size: 22px; letter-spacing: 3px; }
  .boh-staty { width: 100%; margin: 8px 0 0; justify-content: space-between; }
  .boh-glowa { flex-wrap: wrap; }
  .boh-plusy { grid-template-columns: 1fr; }
}

/* Ostateczne nadpisania po dawnych regułach kart — zachowujemy stare klasy,
   bo korzystają z nich testy treści, ale prezentacja ma już nowy układ. */
#heroes-screen .boh-ramka{width:min(1400px,96vw);margin:18px auto;padding:0 4px 28px}
#heroes-screen .boh-naglowek{margin-bottom:14px}
#heroes-screen .boh-lista{display:grid;grid-template-columns:1fr;gap:7px;position:sticky;top:14px}
#heroes-screen .boh-karta{cursor:default;border-radius:6px;background:linear-gradient(145deg,rgba(12,31,49,.94),rgba(3,13,25,.96));overflow:hidden;box-shadow:0 18px 55px #0007}
#heroes-screen .boh-karta:hover{transform:none;box-shadow:0 18px 55px #0007}
#heroes-screen .boh-glowa{display:block;align-items:initial;gap:0;padding:34px 34px 26px;background:radial-gradient(circle at 10% 15%,color-mix(in srgb,var(--boh-kolor) 15%,transparent),transparent 48%)}
#heroes-screen .boh-staty{margin:0 0 25px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}
#heroes-screen .boh-staty div{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:9px 10px;background:#020a137d;border:1px solid rgba(255,255,255,.08)}
#heroes-screen .boh-staty span{font-size:8px;letter-spacing:1.3px;color:#829ab0}
#heroes-screen .boh-staty b{font-size:18px;color:#ecd49c}
#heroes-screen .boh-plusy{display:grid;grid-template-columns:1fr 1fr;padding:14px 24px;gap:24px;background:rgba(0,0,0,.15)}
#heroes-screen .boh-zdolnosci{padding:16px 24px 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
#heroes-screen .boh-zdol{display:flex;padding:10px;gap:10px;background:rgba(2,10,19,.38);border:1px solid rgba(255,255,255,.055)}
#heroes-screen .boh-zdol:last-child{grid-column:1/-1;border-color:rgba(255,216,79,.22)}
@media(max-width:1050px){#heroes-screen .boh-lista{position:static;grid-template-columns:repeat(7,minmax(105px,1fr));overflow-x:auto}#heroes-screen .boh-glowa{padding:25px}}
@media(max-height:760px) and (min-width:1051px){#heroes-screen .boh-glowa{padding:24px 30px}#heroes-screen .boh-plusy{padding:10px 20px}#heroes-screen .boh-zdolnosci{padding:12px 20px}}

/* ---------- Gotowość w lobby ----------
   Stan każdego gracza czytelny z jednego rzutu oka, bez wchodzenia w szczegóły.
   Gotowość niczego nie blokuje — start nadal należy do hosta. */
.lob-gotowi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.lob-gotowi-licz {
  font-size: 11px; letter-spacing: 1.4px; font-weight: 700; color: #d9a441;
  border: 1px solid rgba(217,164,65,0.45); border-radius: 5px; padding: 3px 9px;
  background: rgba(217,164,65,0.08); white-space: nowrap;
}
.lob-gotowi-licz.pelna {
  color: #2bd07a; border-color: rgba(43,208,122,0.55); background: rgba(43,208,122,0.1);
}
.lob-gotowi-info { font-size: 10px; letter-spacing: .8px; color: #2bd07a; }
.player-row .lob-stan {
  font-size: 10px; letter-spacing: 1px; font-weight: 700; padding: 2px 7px;
  border: 1px solid; border-radius: 4px; white-space: nowrap;
}
.player-row .lob-stan.tak   { color: #2bd07a; border-color: rgba(43,208,122,0.5); background: rgba(43,208,122,0.1); }
.player-row .lob-stan.nie   { color: #d9a441; border-color: rgba(217,164,65,0.4); background: rgba(217,164,65,0.07); }
.player-row .lob-stan.wolny { color: var(--text); border-color: rgba(255,255,255,0.14); border-style: dashed; }
.player-row.gotowy { border-color: rgba(43,208,122,0.4); }
/* Pasek boczny lobby ma ~300 px, a wiersz niesie kropkę, nick, postać, status,
   HOST i krzyżyk. Bez tego nick nie kurczy się poniżej swojej treści (flex:1 nie
   zmniejsza elementu poniżej min-content) i wypycha status z HOST-em poza kartę —
   zmierzone: nadmiar do 137 px przy 1366 px. Zawijanie jest wentylem bezpieczeństwa,
   gdy nawet skrócony nick nie wystarcza. */
.player-row { flex-wrap: wrap; }
.player-row .nick {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lob-gotowy-btn { border-color: rgba(217,164,65,0.5); }
.lob-gotowy-btn.wlaczony {
  border-color: #2bd07a; color: #2bd07a; background: rgba(43,208,122,0.12);
  box-shadow: 0 0 14px rgba(43,208,122,0.25);
}

@media (max-width: 560px) {
  .lob-kod-rzad .lobby-code { font-size: 26px; letter-spacing: 8px; }
  /* wąski ekran: nick zostaje w wierszu, nazwa postaci schodzi pod spód,
     żeby status gotowości nie wypychał wiersza poza kartę */
  .player-row { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .player-row .nick { font-size: 13px; }
  .player-row .champ-tag { font-size: 10px; order: 3; flex-basis: 100%; }
  .player-row .lob-stan { font-size: 9px; padding: 2px 5px; }
}

/* ---------- Pasek umiejętności Q / E / R ----------
   Dół na środku: lewy dolny róg zajmuje podpowiedź sterowania i czat.
   Pasek tylko pokazuje dane z serwera — nie liczy odnowień samodzielnie. */
#skills {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 6; display: flex; gap: 8px; pointer-events: none;
}
.sk-kafel {
  width: 74px; padding: 6px 4px 5px; text-align: center;
  background: rgba(1,10,19,0.62); border: 1px solid rgba(200,170,110,0.28);
  border-radius: 6px;
}
.sk-klaw {
  font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--gold-bright); line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.sk-nazwa {
  font-size: 8px; color: #8ea6bd; margin-top: 3px; letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.sk-stan { font-size: 12px; font-weight: 700; margin-top: 3px; line-height: 1; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,0.85); }
.sk-kafel.gotowa { border-color: var(--blue); }
.sk-kafel.gotowa .sk-stan { color: var(--blue); }
.sk-kafel.odnowienie .sk-stan { color: #d9a441; }
/* postać nie ma jeszcze tego slotu — wyraźnie wygaszone, bez udawania odnowienia */
.sk-kafel.zablokowana { opacity: .32; border-style: dashed; }
.sk-kafel.zablokowana .sk-stan { color: var(--text); font-size: 10px; font-weight: 400; }
/* R jest najważniejsze — większy kafel i podświetlenie przy pełnym ładowaniu */
.sk-kafel.ulta { width: 92px; padding-top: 8px; border-color: rgba(200,170,110,0.5); }
.sk-kafel.ulta .sk-klaw { font-size: 16px; }
.sk-kafel.ulta .sk-stan { font-size: 14px; }
.sk-kafel.ulta.gotowa {
  border-color: #ffd84f; box-shadow: 0 0 14px rgba(255,216,79,0.45);
  background: rgba(60,45,10,0.55);
}
.sk-kafel.ulta.gotowa .sk-stan { color: #ffd84f; }
/* pasek ładowania ulty pod stanem */
.sk-pasek { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.sk-pasek i { display: block; height: 100%; background: linear-gradient(90deg, #6b4d9e, #ffd84f); }
@media (max-width: 560px) {
  #skills { gap: 5px; bottom: 8px; }
  .sk-kafel { width: 56px; padding: 4px 2px; }
  .sk-kafel.ulta { width: 68px; }
  .sk-nazwa { display: none; }
}

/* ---------- PAUZA W GRZE ----------
   Przyciemnienie całego pola gry + panel na środku. Świat pod spodem stoi
   (zamraża go serwer), więc nakładka może być spokojna i czytelna. */
#pauza-oslona {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(3px);
}
#pauza-oslona.hidden { display: none; }
.pau-box {
  text-align: center; padding: 26px 40px;
  background: rgba(10, 18, 30, 0.94);
  border: 1px solid rgba(120, 180, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  min-width: 280px;
}
.pau-tyt { font-size: 26px; font-weight: 700; letter-spacing: 8px; color: #eaf4ff; }
.pau-kto { margin-top: 8px; font-size: 13px; color: #8fb6da; }
.pau-czas { margin: 14px 0 18px; font-size: 34px; font-weight: 700; color: #49b6ff; line-height: 1; }
.pau-info { margin-top: 12px; font-size: 11px; letter-spacing: 1px; color: #5c7fa6; }

/* ============================================================================
   LOBBY — DOPASOWANIE DO 100% ZOOMU

   PROBLEM: lobby mieściło się dopiero przy 75% powiększenia przeglądarki.
   Zmierzone modelem (tools/wysokosc-lobby.js): kolumna główna potrzebowała
   1090 px, a przy `max-height: 94vh` dostawała 1015 px na 1080p i tylko
   846 px na ekranie 900 px. Panel miał `overflow-y: auto`, więc strona się
   nie przewijała — treść była ucinana WEWNĄTRZ karty i do przycisku START
   trzeba było doscrollować. Przy 75% zoomu widok w pikselach CSS jest o
   1/3 wyższy, stąd wrażenie, że „tylko tam działa".

   DWIE NAJDROŻSZE RZECZY BYŁY STRUKTURALNE, NIE KOSMETYCZNE:
   1. sześć postaci nie mieściło się w rzędzie (minmax 148 px przy 844 px
      kolumny daje 5 kolumn) i łamało się na DWA rzędy — 86 px,
   2. cztery tryby w siatce 3-kolumnowej też dawały dwa rzędy — 87 px.
   Naprawa tych dwóch odzyskuje 173 px bez dotykania czegokolwiek innego.

   Reszta to stopniowe zagęszczanie sterowane WYSOKOŚCIĄ okna. Zero
   transform: scale, zero zoom, zero skalowania body — układ liczy się sam. */

/* --- struktura: jeden rząd postaci i jeden rząd trybów --- */
.ui-ramka-lobby .ui-postacie {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.ui-ramka-lobby .ui-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Poniżej 1100 px szerokości kolumna główna jest za wąska na sześć kart —
   wracamy do automatycznego zawijania, żeby nie ścisnąć ich do nieczytelnych
   pasków. To jedyne miejsce, gdzie rząd wolno złamać. */
@media (max-width: 1100px) {
  .ui-ramka-lobby .ui-postacie { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .ui-ramka-lobby .ui-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- KROK 1: okna poniżej 1000 px wysokości --- */
@media (max-height: 1000px) {
  .ui-ramka-lobby { max-height: 96vh; }
  .ui-ramka-lobby .ui-srodek { gap: 8px; }
  .ui-ramka-lobby .ui-karta { padding: 10px 14px; }
  .ui-ramka-lobby .ui-karta-tyt { margin-bottom: 6px; }
  .ui-ramka-lobby .ui-opis { min-height: 24px; margin-top: 7px; }
  .ui-ramka-lobby .champ-info { margin-top: 7px; padding: 9px 10px; }
  .ui-ramka-lobby .btn { margin-top: 9px; padding: 11px; }
  .ui-ramka-lobby .ui-start { padding: 12px !important; margin-top: 4px !important; }
  .ui-ramka-lobby .lobby-code { font-size: 28px; letter-spacing: 10px; margin: 4px 0 2px; }
  .ui-ramka-lobby .error { margin-top: 7px; min-height: 15px; }
}

/* --- KROK 2: 900 px i niżej (1600x900, 1536x864, 1728x858) --- */
@media (max-height: 900px) {
  .ui-ramka-lobby .ui-srodek { gap: 6px; }
  .ui-ramka-lobby .ui-karta { padding: 8px 12px; }
  .ui-ramka-lobby .ui-karta-tyt { margin-bottom: 5px; letter-spacing: 2.2px; }
  .ui-ramka-lobby .ui-postac { padding: 6px 4px 6px; }
  .ui-ramka-lobby .ui-znak { width: 26px; height: 26px; font-size: 13px; }
  .ui-ramka-lobby .ui-postac .ui-p-nazwa { margin-top: 4px; }
  .ui-ramka-lobby .ui-kafel { padding: 8px 5px 7px; }
  .ui-ramka-lobby .ui-kafel .ui-k-nazwa { margin-top: 5px; }
  .ui-ramka-lobby .ui-opis { min-height: 20px; margin-top: 5px; }
  .ui-ramka-lobby .champ-info { margin-top: 5px; padding: 7px 9px; }
  .ui-ramka-lobby .btn { margin-top: 6px; padding: 9px; }
  .ui-ramka-lobby .ui-start { padding: 10px !important; }
  .ui-ramka-lobby .lobby-code { font-size: 24px; letter-spacing: 8px; }
  .ui-ramka-lobby .lobby-hint { margin-bottom: 0; }
  .ui-ramka-lobby .ui-lobby-naglowek { padding: 2px 0 0; }
  .ui-ramka-lobby .lob-ustawienia { margin-top: 6px; }
}

/* --- KROK 3: 800 px i niżej (1366x768 i okna z paskami przeglądarki) --- */
@media (max-height: 800px) {
  .ui-ramka-lobby { max-height: 98vh; padding: 10px; }
  .ui-ramka-lobby .ui-srodek { gap: 5px; }
  .ui-ramka-lobby .ui-karta { padding: 6px 11px; }
  .ui-ramka-lobby .ui-postac { padding: 4px 3px; }
  .ui-ramka-lobby .ui-znak { width: 22px; height: 22px; font-size: 12px; }
  .ui-ramka-lobby .ui-kafel { padding: 6px 4px 5px; }
  .ui-ramka-lobby .ui-kafel .ui-k-ikona { font-size: 17px; }
  .ui-ramka-lobby .ui-opis { min-height: 16px; margin-top: 4px; }
  .ui-ramka-lobby .champ-info { margin-top: 4px; padding: 6px 8px; line-height: 1.4; }
  .ui-ramka-lobby .btn { margin-top: 4px; padding: 8px; }
  .ui-ramka-lobby .ui-start { padding: 9px !important; font-size: 14px !important; }
  .ui-ramka-lobby .lobby-code { font-size: 21px; letter-spacing: 6px; }
  .ui-ramka-lobby .error { margin-top: 4px; min-height: 0; }
}

/* --- PASEK BOCZNY: ta sama logika progów. Nie dostaje własnego przewijania,
       dopóki okno nie zrobi się naprawdę niskie — wtedy i tak ma je z
       .ui-ramka aside. Zmniejszamy wyłącznie oddechy, nic nie znika. --- */
@media (max-height: 900px) {
  .ui-ramka-lobby .ui-bok { padding: 11px 11px; }
  .ui-ramka-lobby .ui-logo { padding: 2px 2px 10px; }
  .ui-ramka-lobby .ui-bok-stopka { padding-top: 8px; }
}
@media (max-height: 800px) {
  .ui-ramka-lobby .ui-bok { padding: 8px 10px; }
  .ui-ramka-lobby .ui-logo { padding: 0 2px 7px; }
  .ui-ramka-lobby .ui-logo img { width: 36px; height: 36px; }
  .ui-ramka-lobby .ui-logo-1 { font-size: 17px; letter-spacing: 2px; }
}

/* --- KROK 4: bardzo niskie okna. Dopiero TU pozwalamy panelowi się przewijać,
       bo dalsze ściskanie zrobiłoby z opisów nieczytelną kaszę. --- */
@media (max-height: 700px) {
  .ui-ramka-lobby .ui-karta { padding: 5px 10px; }
  .ui-ramka-lobby .champ-info { display: none; }
  .ui-ramka-lobby .ui-opis { min-height: 0; }
}

/* ============================================================================
   OG UI — ODZYSKANIE CZYTELNOŚCI NA DESKTOPIE (100% ZOOM)

   USTALENIE Z AUDYTU, KTÓRE ZMIENIA DIAGNOZĘ: żadna z reguł dodanych w
   „LOBBY — 100% viewport fit" nie wychodzi poza `.ui-ramka-lobby` (sprawdzone:
   zero deklaracji spoza tego zakresu w czterech blokach @media). Aktualności
   miały `font-size: 10px` treści i 9 px daty ZANIM ten commit powstał — to nie
   jest regresja po nim, tylko zastany rozmiar, który przy 100% zoomu po prostu
   jest za mały. Naprawiamy go niezależnie od lobby.

   SKALA JAKO ZMIENNE, NIE LICZBY W 40 MIEJSCACH. Dzięki temu następny etap
   walczący o wysokość nie zrobi znowu mikroskopijnego tekstu przez przypadek:
   żeby zejść poniżej tych progów, trzeba świadomie ruszyć skalę, a tego
   pilnuje test. */
:root {
  --ui-txt-xs: 10.5px;   /* daty, metadane — wolno im być najmniejsze */
  --ui-txt-sm: 11.5px;   /* podpisy pod nazwami, liczniki */
  --ui-txt-md: 12.5px;   /* opisy czytane wzrokiem, nie skanowane */
  --ui-txt-lg: 14px;     /* tytuły pozycji na liście */
  --ui-etyk:   10.5px;   /* etykiety sekcji: wersaliki z dużym trackingiem */
}

/* --- AKTUALNOŚCI — priorytet tego etapu ---
   Treść newsa przestaje być traktowana jak podpis. Lista MA JUŻ własne
   przewijanie (max-height: 320px, overflow-y: auto), więc powiększenie tekstu
   nie wydłuża prawej kolumny ani o piksel — rośnie tylko zawartość scrolla.
   To jest dokładnie ta zamiana, o którą chodzi: czytelny tekst zamiast
   upychania wszystkiego bez paska. */
.ui-akt-tyt   { font-size: var(--ui-txt-lg); letter-spacing: .3px; line-height: 1.3; }
.ui-akt-tresc { font-size: var(--ui-txt-md); line-height: 1.55; margin-top: 4px; color: #9db5cc; }
/* akapity z \n w aktualnościach i klikalne linki (aktLinki w gra-1-menu.js) */
.ui-akt-tresc { white-space: pre-line; overflow-wrap: anywhere; }
.ui-akt-tresc a { color: #68dcff; }
.ui-akt-tresc a:hover { color: #bfe3ff; }
.ui-akt-data  { font-size: var(--ui-txt-xs); margin-top: 5px; letter-spacing: .8px; }
.ui-akt-ikona { font-size: 19px; }
.ui-akt-poz   { padding: 10px 11px; }
.ui-akt       { max-height: 340px; gap: 8px; }

/* --- PRAWY SIDEBAR: profil, sezon, wyzwania, nagrody ---
   Nie powiększamy panelu, tylko przestajemy pisać drugorzędne informacje
   rozmiarem, przy którym trzeba się pochylić do ekranu. */
.prof-stat span   { font-size: var(--ui-txt-xs); }
.prof-title       { font-size: var(--ui-txt-sm); }
.sez-poziom span  { font-size: var(--ui-txt-xs); }
.sez-info         { font-size: var(--ui-txt-sm); }
.sez-wyz-opis     { font-size: var(--ui-txt-md); }
.sez-wyz-licz     { font-size: var(--ui-txt-sm); }
.sez-nagroda      { font-size: var(--ui-txt-sm); }
.ui-ulubiona      { font-size: var(--ui-txt-md); line-height: 1.65; }

/* --- ETYKIETY SEKCJI --- */
.ui-karta-tyt { font-size: var(--ui-etyk); letter-spacing: 2.4px; }

/* --- STRONA GŁÓWNA: skróty i ostatni mecz --- */
.hm-pusto-info  { font-size: var(--ui-txt-sm); }
.hm-ost-pod     { font-size: var(--ui-txt-sm); }
.hm-ost-staty   { font-size: var(--ui-txt-md); }
.hm-haslo       { font-size: 13.5px; }

/* --- EKRAN GRAJ I LOBBY: karty postaci, kafle, opisy ---
   Sześć kart nadal mieści się w rzędzie — nazwy postaci mają po kilka liter,
   a kolumna ma 136 px. Rośnie tekst, nie liczba rzędów. */
.ui-postac .ui-p-nazwa      { font-size: var(--ui-txt-md); letter-spacing: 1.2px; }
.ui-postac .ui-p-bron       { font-size: var(--ui-txt-xs); }
.ui-kafel .ui-k-nazwa       { font-size: var(--ui-txt-md); letter-spacing: 1.3px; }
.ui-kafel .ui-k-pod         { font-size: var(--ui-txt-xs); }
.ui-opis                    { font-size: var(--ui-txt-md); line-height: 1.5; }
.champ-info                 { font-size: 13.5px; }

/* --- KOMPENSACJA WYSOKOŚCI W LOBBY ---
   Tekst urósł, więc lobby musi oddać te piksele gdzie indziej. Zgodnie z
   zasadą „oszczędzaj na oddechach, nie na literach" zabieramy je wyłącznie
   z paddingów i odstępów. Czcionki w lobby zostają takie same jak wszędzie
   indziej — 1728x858 ma czytać się jak 1920x1080. */
@media (max-height: 1000px) {
  .ui-ramka-lobby .ui-karta { padding: 9px 13px; }
  .ui-ramka-lobby .ui-opis { min-height: 20px; margin-top: 6px; }
  .ui-ramka-lobby .ui-postac { padding: 7px 4px 6px; }
  .ui-ramka-lobby .ui-kafel { padding: 9px 5px 8px; }
}
@media (max-height: 900px) {
  .ui-ramka-lobby .ui-karta { padding: 7px 12px; }
  .ui-ramka-lobby .ui-opis { min-height: 18px; margin-top: 4px; }
  .ui-ramka-lobby .ui-postac { padding: 5px 3px; }
  .ui-ramka-lobby .ui-kafel { padding: 7px 4px 6px; }
  .ui-ramka-lobby .champ-info { padding: 6px 9px; line-height: 1.45; }
}
@media (max-height: 800px) {
  .ui-ramka-lobby .ui-karta { padding: 5px 10px; }
  .ui-ramka-lobby .ui-opis { min-height: 0; margin-top: 3px; }
  .ui-ramka-lobby .ui-postac { padding: 4px 3px; }
  .ui-ramka-lobby .ui-kafel { padding: 5px 4px; }
  .ui-ramka-lobby .champ-info { padding: 5px 8px; }
}

/* Ranking — sala sławy w stylistyce centrum dowodzenia. */
.rank-intro, .rank-guide { display: none; }
#browse-screen:is(.ranking-view, .lobbies-view) { padding: 32px 24px; }
#browse-screen:is(.ranking-view, .lobbies-view) > .panel {
  width: min(1120px, 100%); min-width: 0 !important; max-width: 1120px !important;
  padding: clamp(24px, 4vw, 52px); position: relative;
  background: radial-gradient(ellipse at 90% 35%, #0b41474d, transparent 55%), linear-gradient(135deg, #102438f5, #060f1df7 75%);
  border-color: #b99b5f77; box-shadow: 0 24px 100px #0009, inset 0 1px #ead5a529;
}
:is(.ranking-view, .lobbies-view) #browse-title { text-align: left; font-size: clamp(25px, 4vw, 42px) !important; letter-spacing: 5px; margin: 20px 0 10px; }
:is(.ranking-view, .lobbies-view) .rank-intro { display: block; margin-bottom: 34px; }
.rank-intro > span { position: absolute; top: 22px; font-size: 10px; letter-spacing: 3px; color: #72b5c4; }
.rank-intro p { font-size: 15px; color: #9cabbc; }
.rank-intro b { position: absolute; right: 52px; top: 52px; font-size: 12px; letter-spacing: 2px; color: #d4bc83; }
.rank-intro em { display: inline-block; font-style: normal; padding: 9px; margin-left: 8px; border: 1px solid #c8aa6e66; background: #c8aa6e12; }
.ranking-view #rank-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px !important; margin-bottom: 22px !important; }
.ranking-view #rank-tabs .btn { min-width: 0; min-height: 58px; padding: 12px 8px; font-size: 12px !important; letter-spacing: 1.5px; clip-path: none; border: 1px solid #6c84943d; background: #061322b3; color: #a7bacd; }
.ranking-view #rank-tabs .btn.sel { background: linear-gradient(135deg, #c8aa6e26, #c8aa6e09); box-shadow: inset 0 -2px #c8aa6e; border-color: #c8aa6e99; color: #f0e6d2; }
.ranking-view #rank-tabs .btn:hover { border-color: #0ac8b9; background-color: #123037; }
:is(.ranking-view, .lobbies-view) .btn:focus-visible { outline: 2px solid #5ce6dc; outline-offset: 3px; }
:is(.ranking-view, .lobbies-view) #browse-list { max-height: none !important; overflow: visible !important; min-height: 260px !important; }
.rank-launch { display: grid; grid-template-columns: 0.8fr 1.5fr; align-items: center; min-height: 330px; border: 1px solid #789aad2b; background: radial-gradient(ellipse at 22% 50%, #08798424, transparent 55%), #030c1680; padding: 32px; gap: 36px; }
.rank-emblem { width: 170px; height: 170px; display: grid; place-items: center; justify-self: center; font-size: 104px; color: #ddc38b; border: 1px solid #c8aa6e66; transform: rotate(-8deg); background: linear-gradient(145deg,#c8aa6e1a,#031925); box-shadow: 0 0 0 12px #c8aa6e06, 0 0 70px #0ac8b915; }
.rank-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: #53d9d0; }
.rank-launch h2, .rank-empty h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.2; font-weight: 650; margin: 14px 0; letter-spacing: -.5px; }
.rank-launch h2 span { color: #d4bb82; }
.rank-launch p, .rank-empty p { max-width: 480px; font-size: 14px; line-height: 1.8; color: #9aafc1; }
.rank-date { margin-top: 24px; border-left: 2px solid #c8aa6e; padding-left: 16px; display: grid; gap: 6px; }
.rank-date > span { color: #899cb1; font-size: 9px; letter-spacing: 2px; }
.rank-date strong { font-size: 17px; letter-spacing: 1px; }
.rank-date small { font-size: 12px; color: #9aafc1; }
.rank-notice { padding: 16px 20px; font-size: 12px; line-height: 1.6; color: #8fa9bd; background: #0b203080; border: 1px solid #789aad20; border-top: 0; }
.rank-notice span { color: #0ac8b9; margin-right: 8px; }
:is(.ranking-view, .lobbies-view) .rank-guide { display: flex; justify-content: space-between; gap: 16px; margin: 22px 0; color: #72899f; font-size: 9px; letter-spacing: 1.5px; }
:is(.ranking-view, .lobbies-view) #browse-refresh, :is(.ranking-view, .lobbies-view) #browse-back { display: inline-block; width: auto; min-width: 180px; min-height: 44px; margin: 0 12px 0 0; font-size: 11px !important; }
.rank-empty { padding: 70px 24px; text-align: center; }
.rank-empty p { margin: auto; }
.ranking-view .player-row { min-height: 66px; padding: 16px 20px; gap: 16px; border: 1px solid #789aad30; background: #081726cc; margin-bottom: 8px; }
.ranking-view .rank-place-1 { background: linear-gradient(90deg,#c8aa6e20,#081726); border-color: #c8aa6e77; }
.ranking-view .rank-place-2, .ranking-view .rank-place-3 { border-left: 3px solid #839faf; }
@media (max-height: 800px) and (min-width: 900px) {
  #browse-screen:is(.ranking-view, .lobbies-view) { padding: 20px; }
  #browse-screen:is(.ranking-view, .lobbies-view) > .panel { padding: 24px 36px; }
  :is(.ranking-view, .lobbies-view) #browse-title { margin-top: 22px; font-size: 32px !important; }
  :is(.ranking-view, .lobbies-view) .rank-intro { margin-bottom: 22px; }
  .rank-intro b { right: 36px; top: 40px; }
  .rank-launch { min-height: 280px; padding: 24px 32px; }
  .rank-launch h2 { font-size: 30px; }
  .rank-date { margin-top: 16px; }
  :is(.ranking-view, .lobbies-view) .rank-guide { margin: 16px 0; }
}
/* Odświeżenie zachowuje zawartość i wysokość, także przy wolnej odpowiedzi. */
:is(.ranking-view, .lobbies-view) #browse-list { min-height: max(260px, var(--rank-height, 0px)) !important; }
.ranking-view #rank-tabs .btn { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
@media (prefers-reduced-motion: reduce) {
  .ranking-view #rank-tabs .btn { transition: none; }
}

.lobbies-view .rank-intro b, .lobbies-view .rank-guide span:last-child { display: none; }
.lobbies-view .rank-intro { margin-bottom: 30px; }
.lobby-emblem { color: #5bded2; border-color: #48bcb866; }
.lobby-empty-tip { display: flex; gap: 20px; margin-top: 28px; font-size: 9px; letter-spacing: 1.2px; color: #c8aa6e; }
.lobbies-view .lobby-item { width: 100%; text-align: left; font-family: inherit; color: var(--gold-bright); display: flex; align-items: center; gap: 24px; min-height: 90px; padding: 20px 24px; border: 1px solid #789aad40; background: linear-gradient(110deg,#123044a6,#081421); margin-bottom: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.lobbies-view .lobby-item:hover { border-color: #0ac8b9; background: #123039; }
.lobbies-view .lobby-item:focus-visible { outline: 2px solid #5ce6dc; outline-offset: 3px; }
.lobbies-view .lobby-item > div:first-child > div:first-child { font-size: 18px !important; margin-bottom: 8px; }
.lobbies-view .lobby-item > div:first-child > div:last-child { font-size: 12px !important; }
.lobby-capacity { font-size: 24px; color: #ead5a5; white-space: nowrap; }
.lobby-capacity span { font-size: 10px; color: #91aabc; }
.lobby-join { padding: 12px 18px; border: 1px solid #0ac8b950; color: #4de0d2; font-size: 11px; letter-spacing: 1.5px; }

/* GRAJ — wybór bohatera, desktop i laptop. */
#menu-screen .ui-ramka { width: 100%; max-width: 1920px; grid-template-columns: 160px minmax(0,1fr); padding: 20px; gap: 20px; }
#menu-screen .play-main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; overflow: visible; position: relative; }
.play-heading { grid-column: 1 / -1; padding: 8px 220px 8px 0; }
.play-heading > span { color: #7dbacb; font-size: 10px; letter-spacing: 2px; }
.play-heading h1 { font-size: clamp(24px,2.6vw,44px); letter-spacing: 3px; text-align: left; margin-top: 10px; }
#menu-screen .play-nick { position: absolute; top: 5px; right: 0; width: 190px; padding: 8px 12px; }
#menu-screen .play-nick input { padding: 7px; font-size: 13px; }
#menu-screen #acc-bar, #menu-screen .play-spacer { display: none !important; }
#menu-screen .play-selection { padding: 0; background: none; border: 0; display: flex; flex-direction: column; min-height: 0; }
#menu-screen .play-selection > .ui-karta-tyt { display: none; }
#menu-screen #menu-champs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 12px; flex: 1; min-height: 0; }
#menu-screen .play-card { position: relative; overflow: hidden; padding: 0; border: 1px solid #bca36b88; border-radius: 0; background: #071322; min-height: 0; cursor: pointer; font-family: inherit; transition: border-color .16s, box-shadow .16s; }
.play-card img { position: absolute; width: 100%; height: 128%; object-fit: cover; left: 0; bottom: 0; }
#menu-screen .play-card.wybrana { border: 2px solid var(--hero-color); box-shadow: 0 0 18px color-mix(in srgb,var(--hero-color) 30%,transparent); }
#menu-screen .play-card:hover, #menu-screen .play-card:focus-visible { border-color: #74e3db; outline: 1px solid #74e3db; outline-offset: 2px; }
.play-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 5px 10px; background: linear-gradient(transparent,#04101bef 45%); text-align: center; }
.play-card-label strong { display: block; color: #e6cf9b; font-size: 20px; letter-spacing: 2px; }
.play-card-label small { display: block; color: #a4c9de; font-size: 11px; margin-top: 3px; }
.play-check { display: none; position: absolute; top: 8px; right: 10px; color: var(--hero-color); font-size: 23px; }
.wybrana .play-check { display: block; }
.play-preview { min-height: 0; border: 1px solid #bca36b88; background: #051221dd; display: flex; flex-direction: column; }
#play-portrait { flex: 1; min-height: 160px; position: relative; background-size: cover; background-position: center 43%; }
#play-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#04111bb0,transparent 55%),linear-gradient(0deg,#051221,transparent 30%); }
.play-hero-title { position: absolute; top: 20px; left: 22px; z-index: 1; text-shadow: 0 2px 8px #000; }
.play-hero-title h2 { color: #ead2a0; font-size: 34px; letter-spacing: 4px; }
.play-hero-title p { font-size: 13px; color: #a8d0e6; margin-top: 6px; }
.play-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 10px; border-top: 1px solid #c8aa6e44; }
.play-stats span { text-align: center; color: #a8c5d9; font-size: 10px; letter-spacing: 1px; border-right: 1px solid #c8aa6e33; }
.play-stats strong { display: block; font-size: 22px; color: #f0e6d2; margin-top: 3px; }
.play-skills { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0 12px 12px; }
.play-skills > div { position: relative; padding: 10px 6px; border: 1px solid #c8aa6e66; font-size: 11px; display: flex; gap: 7px; align-items: center; }
.play-skills b { color: #e6cf9b; border: 1px solid #c8aa6e66; padding: 4px; }
.play-skills p { display: none; position: absolute; bottom: 100%; right: 0; width: 260px; padding: 16px; line-height: 1.5; background: #071725; border: 1px solid #c8aa6e; z-index: 4; }
.play-skills > div:hover p, .play-skills > div:focus p { display: block; }
#menu-screen #champ-info { margin: 0; padding: 8px 12px; font-size: 11px; line-height: 1.4; max-height: 90px; overflow: auto; }
#menu-screen .ui-karta-akcja { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px 18px; padding: 16px; border-color: #c8aa6e77; }
#menu-screen .ui-karta-akcja > .ui-karta-tyt { grid-column: 1 / -1; color: #e6cf9b; font-size: 16px; }
#menu-screen .ui-karta-akcja .btn { margin: 0; font-size: 11px; min-height: 42px; }
#menu-screen .ui-lub { display: none; }
#menu-screen .ui-dolacz { margin: 0; }
#menu-screen .ui-skroty { margin: 0; gap: 8px; }
#menu-screen #menu-error { grid-column: 1 / -1; margin: 0; }
#menu-screen #menu-error:empty { display: none; }
@media (max-height: 800px) {
 #menu-screen .ui-ramka { padding: 14px; gap: 14px; min-height: 700px; }
 #menu-screen .play-main { gap: 12px; }
 #menu-screen #champ-info { max-height: 64px; font-size: 10px; }
 #menu-screen .ui-karta-akcja { padding: 12px; }
 .play-card-label strong { font-size: 17px; }
 .play-heading h1 { margin-top: 5px; }
}
#menu-screen .ui-logo { flex-wrap: wrap; gap: 8px; }
#menu-screen .ui-logo img { width: 30px; height: 30px; }
#menu-screen .ui-logo-1, #menu-screen .ui-logo-2 { font-size: 18px; letter-spacing: 2px; }
#menu-screen .ui-logo-3 { font-size: 8px; letter-spacing: 1px; }
#menu-screen .ui-nav-poz { padding: 10px 8px; font-size: 11px; letter-spacing: .7px; }
#menu-screen .ui-beta { display: block; width: max-content; margin: 4px 0 0; }   /* jak na stronie głównej (1.10) */
#play-portrait { background-size: auto 126%; background-position: right bottom; background-repeat: no-repeat; background-color: #070e17; }
.play-hero-title { max-width: 40%; }
#menu-screen .ui-karta-akcja { grid-template-columns: .9fr 1.15fr 1.1fr; }
#menu-screen .ui-skroty .btn { letter-spacing: 1px; font-size: 10px; }
#menu-screen .play-card-label { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
 #menu-screen .play-card { transition: none; }
}
.play-hero-summary { margin-top: 28px; color: #b3c7d8; font-size: 13px; line-height: 1.7; max-width: 190px; }

/* GRAJ dopasowuje się do okna tak samo jak strona główna. */
#menu-screen .ui-ramka {
 width: calc(100vw - 20px); max-width: none; height: calc(100dvh - 20px);
 min-height: 0; margin: 10px; padding: 9px; gap: 10px;
 grid-template-columns: 14.5vw minmax(0,1fr);
}
#menu-screen .ui-bok { padding: 10px; }
#menu-screen .ui-logo { justify-content: center; flex-wrap: nowrap; padding: 2px 0 11px; }
#menu-screen .ui-logo img { width: 46px; height: 46px; }
#menu-screen .ui-logo-1, #menu-screen .ui-logo-2 { font-size: 22px; letter-spacing: 3px; }
#menu-screen .ui-logo-3 { font-size: 9px; letter-spacing: 2px; }
#menu-screen .ui-nav-poz { padding: 11px 10px; font-size: 12.5px; letter-spacing: 1.25px; border-radius: 6px; }
#menu-screen .play-main { gap: clamp(10px,1.1vh,18px); grid-template-rows: auto minmax(0,1fr) auto; }
#menu-screen .play-heading { padding-top: 4px; padding-bottom: 6px; }
#menu-screen .play-heading h1 { font-size: clamp(26px,2.5vw,54px); }
#menu-screen .play-card img { object-fit: contain; object-position: center bottom; background: #060c14; }
#menu-screen .play-card-label strong { font-size: clamp(17px,1.3vw,28px); }
#menu-screen .play-card-label small { font-size: clamp(11px,.8vw,16px); }
#menu-screen #play-portrait { min-height: 0; background-size: auto 126%; }
#menu-screen .play-hero-title h2 { font-size: clamp(28px,2.2vw,48px); }
#menu-screen .play-hero-title p { font-size: clamp(13px,.9vw,19px); }
#menu-screen .play-hero-summary { font-size: clamp(12px,.85vw,18px); max-width: none; }
#menu-screen .play-stats span { font-size: clamp(10px,.75vw,16px); }
#menu-screen .play-stats strong { font-size: clamp(20px,1.5vw,32px); }
#menu-screen .play-skills > div { font-size: clamp(11px,.8vw,17px); }
#menu-screen #champ-info { font-size: clamp(11px,.8vw,16px); max-height: 76px; }
#menu-screen .ui-karta-akcja .btn { font-size: clamp(11px,.75vw,16px); letter-spacing: 1px; }
@media (max-height: 740px) {
 #menu-screen .ui-ramka { min-height: 580px; }
 #menu-screen .play-hero-summary { margin-top: 12px; line-height: 1.4; }
 #menu-screen .play-stats { padding: 6px; }
 #menu-screen .play-skills { padding-bottom: 6px; }
 #menu-screen .ui-karta-akcja { padding: 8px 12px; gap: 6px 12px; }
 #menu-screen .ui-karta-akcja > .ui-karta-tyt { font-size: 13px; }
}

/* Lobby drużyny — wspólna skala i portrety z ekranu Graj. */
#lobby-screen .ui-ramka-lobby { width: calc(100vw - 20px); height: calc(100dvh - 20px); margin: 10px; padding: 9px; gap: 10px; grid-template-columns: 14.5vw minmax(0,1fr); }
#lobby-screen .ui-srodek { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(240px,1fr) auto auto; gap: clamp(10px,1.2vh,18px); overflow: visible; }
#lobby-screen .ui-lobby-naglowek { grid-column: 1 / -1; position: relative; text-align: right; min-height: 90px; padding: 4px 0; }
.lobby-heading { position: absolute; left: 0; top: 8px; text-align: left; }
.lobby-heading > span { font-size: 10px; letter-spacing: 2px; color: #79b7cb; }
.lobby-heading h1 { font-size: clamp(24px,2.4vw,46px); text-align: left; letter-spacing: 3px; margin-top: 10px; }
#lobby-screen .lob-kod-rzad { justify-content: flex-end; }
#lobby-screen .lob-ustawienia { justify-content: flex-end; }
#lobby-screen .lobby-code { font-size: clamp(22px,1.8vw,36px); }
#lobby-screen .lobby-heroes { grid-column: 1 / -1; display: flex; flex-direction: column; min-height: 0; padding: 14px; border-color: #c8aa6e66; background: #061321b8; }
#lobby-screen #lobby-champs { flex: 1; min-height: 130px; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
#lobby-screen .lobby-hero-card { position: relative; min-height: 0; overflow: hidden; padding: 0; border: 1px solid #c8aa6e77; border-radius: 0; background: #050d18; font-family: inherit; cursor: pointer; }
.lobby-hero-card img { position: absolute; left: 0; bottom: 0; width: 100%; height: 128%; object-fit: cover; object-position: center bottom; }
#lobby-screen .lobby-hero-card.wybrana { border: 2px solid var(--hero-color); box-shadow: 0 0 16px color-mix(in srgb,var(--hero-color) 30%,transparent); }
#lobby-screen .lobby-hero-card:focus-visible { outline: 2px solid #60e4da; outline-offset: 2px; }
#lobby-screen #lobby-champ-info { display: block; height: 78px; min-height: 78px; overflow: auto; margin-top: 10px; font-size: clamp(11px,.75vw,15px); line-height: 1.5; padding: 8px 12px; }
#lobby-screen .lobby-modes, #lobby-screen .lobby-difficulty { padding: 12px; background: #061321d9; border-color: #c8aa6e55; }
#lobby-screen .ui-kafle { grid-template-columns: repeat(4,minmax(0,1fr)); }
#lobby-screen .ui-kafel { padding: 10px 5px; }
#lobby-screen .ui-k-nazwa { font-size: clamp(11px,.8vw,16px); }
#lobby-screen .ui-k-pod { font-size: 10px; }
#lobby-screen .ui-opis { min-height: 36px; font-size: 12px; margin-top: 8px; }
.lobby-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.5fr .8fr auto; gap: 12px; padding: 12px; border: 1px solid #c8aa6e66; background: #071725e6; }
#lobby-screen .lobby-actions .btn { margin: 0; font-size: 12px; min-height: 44px; letter-spacing: 1.5px; }
.lobby-tools { display: flex; align-items: stretch; gap: 6px; }
.lobby-tools button { min-width: 38px; padding: 6px 9px; border: 1px solid #3b6475; border-radius: 6px; background: #0b202e; color: #c3d4e6; cursor: pointer; white-space: nowrap; font-size: 12px; }
.lobby-tools button:hover, .lobby-tools button:focus-visible { border-color: #65dfef; color: #fff; }
body:has(#lobby-screen:not(.hidden)) > :is(#tester-btn, #settings-btn) { display: none; }
/* Menu ma już Ustawienia w bocznej nawigacji; pływająca kopia zasłania Ranking. */
body:has(#menu-screen:not(.hidden)) > #settings-btn { display: none; }
#lobby-screen #lobby-error { grid-column: 1 / -1; margin: 0; }
#lobby-screen #lobby-error:empty { display: none; }
@media (max-height: 800px) {
 #lobby-screen .ui-ramka-lobby { min-height: 680px; }
 #lobby-screen .ui-ramka-lobby .ui-srodek { grid-template-rows: auto minmax(220px,1fr) auto auto; gap: 10px; }
 #lobby-screen .ui-ramka-lobby .ui-lobby-naglowek { min-height: 94px; }
 #lobby-screen .ui-ramka-lobby .lobby-heading h1 { font-size: 25px; }
 #lobby-screen .ui-ramka-lobby .lobby-heading > span { font-size: 8px; letter-spacing: 1px; }
 #lobby-screen .ui-ramka-lobby .lobby-heroes { padding: 10px; }
 #lobby-screen .ui-ramka-lobby .play-card-label strong { font-size: 16px; }
 #lobby-screen .ui-ramka-lobby .play-card-label small { font-size: 10px; }
 #lobby-screen .ui-ramka-lobby .ui-kafel { padding: 6px 3px; }
 #lobby-screen .ui-ramka-lobby .ui-k-ikona { font-size: 20px; }
 #lobby-screen .ui-ramka-lobby .ui-k-pod { display: none; }
}

#lobby-screen .mode-coming-soon { font-family: inherit; color: #8292a7; border: 1px dashed #64788c66; background: #07111c99; cursor: not-allowed; opacity: .6; box-shadow: none; }
#lobby-screen .mode-coming-soon:hover { border-color: #64788c66; background: #07111c99; box-shadow: none; }
#lobby-screen .mode-coming-soon .ui-k-nazwa { color: #8292a7; font-size: clamp(10px,.75vw,15px); }
#settlement-status {
  position: fixed; bottom: 14px; left: 14px; z-index: 10000;
  max-width: 360px; padding: 12px 16px; border: 1px solid #c5a66a;
  background: #091625; color: #efd9a8; font-size: 13px; pointer-events: none;
}

/* Dziesięciu bohaterów: pełne portrety i osobne podpisy również przed premierą. */
#menu-screen #menu-champs { grid-template-columns: repeat(5,minmax(0,1fr)); }
#lobby-screen #lobby-champs { grid-template-columns: repeat(10,minmax(125px,1fr)); overflow-x: auto; padding-bottom: 4px; }
#lobby-screen .lobby-hero-card .play-card-label strong { font-size: clamp(13px,1.2vw,20px); }
.play-card:disabled, .lobby-hero-card:disabled { cursor: not-allowed; opacity: .65; border-color: #bba27177; }
.play-card:disabled img, .lobby-hero-card:disabled img { filter: saturate(.45); }

/* Cały portret w wydzielonym polu, podpis pod grafiką. Proporcje obrazu
   pozostają stałe przy zmianie okna, zoomie i wybraniu innego bohatera. */
#menu-screen .play-card,
#lobby-screen .lobby-hero-card {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch;
  border-width: 2px;
}
#menu-screen .play-card img,
#lobby-screen .lobby-hero-card img {
  position: static; display: block; width: 100%; height: 100%; min-height: 0; min-width: 0;
  object-fit: contain; object-position: center; background: #060c14;
  transform: none;
}
#menu-screen .play-card-label,
#lobby-screen .lobby-hero-card .play-card-label {
  position: static; padding: 6px 4px 8px; background: #04101b;
}
#menu-screen .play-card .play-card-label strong { font-size: clamp(12px, 1.15vw, 22px); }
#lobby-screen #lobby-champs {
  scrollbar-width: thin; scrollbar-color: #568aa5 #0a1a29;
  scroll-padding-inline: 6px; overscroll-behavior-x: contain;
}
@media (min-width: 1001px) and (max-width: 1650px) {
  #lobby-screen .lobby-heroes > .ui-karta-tyt::after {
    content: ' · przewiń w bok, aby zobaczyć wszystkich →';
    color: #a2bfd0; letter-spacing: .6px; text-transform: none;
  }
  html[lang="en"] #lobby-screen .lobby-heroes > .ui-karta-tyt::after { content: ' · scroll sideways to see all heroes →'; }
}
@media (max-width: 1000px) {
  /* Dziesięć postaci w dwóch rzędach, a przyciski meczu stale pod ręką. */
  #lobby-screen .ui-ramka-lobby { grid-template-columns: 180px minmax(0, 1fr); min-height: 0; }
  #lobby-screen .ui-ramka-lobby .ui-bok { flex-direction: column; flex-wrap: nowrap; align-items: stretch; overflow-y: auto; }
  #lobby-screen .ui-ramka-lobby .ui-srodek { grid-template-rows: repeat(4, max-content); align-content: start; overflow-y: auto; scroll-padding-block: 20px 90px; }
  #lobby-screen .ui-ramka-lobby .lobby-heading { position: static; }
  #lobby-screen .ui-ramka-lobby .lobby-heading h1 { font-size: 22px; }
  #lobby-screen #lobby-champs { flex: none; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 8px; }
  #lobby-screen .lobby-hero-card .play-card-label strong { font-size: 12px; letter-spacing: 1px; }
  #lobby-screen .lobby-hero-card .play-card-label small { font-size: 9px; }
  #lobby-screen .lobby-actions {
    position: sticky; bottom: 0; z-index: 5; background: #071725;
    grid-template-columns: 1fr 1.5fr 1fr auto; gap: 6px; padding: 8px;
    box-shadow: 0 -8px 18px #020a14b3;
  }
  #lobby-screen .lobby-actions .btn { font-size: 10px; letter-spacing: .7px; }
  #menu-screen #menu-champs { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: 180px; overflow-y: auto; }
  #menu-screen .play-hero-summary { display: none; }
  #menu-screen .play-selection::after {
    content: 'Przewiń listę, aby zobaczyć wszystkich ↓';
    flex: none; padding-top: 6px; font-size: 10px; color: #a2bfd0;
  }
  html[lang="en"] #menu-screen .play-selection::after { content: 'Scroll the list to see all heroes ↓'; }
  #heroes-screen .boh-lista { grid-template-columns: repeat(10,minmax(105px,1fr)); }
}

/* Partner challenge — compact desktop card, no flashing or layout animation. */
.partner-challenge{padding:12px 16px;border:1px solid #b99b6066;background:linear-gradient(110deg,#123344,#091422);color:#bdd0dd;font:12px/1.5 system-ui,sans-serif;margin:8px 0 14px;text-align:left}
.partner-challenge[hidden]{display:none}
.partner-challenge strong{display:block;color:#ead099;font-size:14px;margin-bottom:4px}
.partner-challenge span{display:block}
.partner-challenge a{display:inline-block;color:#61dded;margin-top:5px}
#partner-registration{max-height:160px;overflow:auto}

/* ===== TYLKO PC — komunikat na telefonie / tablecie ===== */
#tylko-pc {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(2, 8, 18, 0.96);
}
#tylko-pc.hidden { display: none; }
.tylko-pc-karta {
    max-width: 420px; width: 100%; text-align: center;
    padding: 28px 22px; border: 1px solid var(--gold); border-radius: 10px;
    background: #071a2e; color: var(--gold-bright); line-height: 1.5;
}
.tylko-pc-ikona { font-size: 48px; margin-bottom: 8px; }
.tylko-pc-karta h2 { margin: 0 0 12px; color: var(--gold); font-size: 22px; }
.tylko-pc-karta p { margin: 0 0 10px; font-size: 15px; }
.tylko-pc-karta .btn { margin-top: 10px; width: 100%; }

/* Desktop training panel, separate from the shop on the right. */
#tutorial-panel{position:fixed;left:22px;top:var(--tutorial-top,170px);width:300px;max-height:calc(100vh - var(--tutorial-top,170px) - 24px);overflow:auto;z-index:15;padding:20px;background:rgba(5,19,32,.96);border:1px solid #a58b55;box-shadow:0 12px 40px #0008;color:#c5d7e6}
#tutorial-progress{color:#00dbd0;font-size:10px;letter-spacing:2px}
#tutorial-panel h2{font-size:22px;color:#dfc18a;margin:14px 0 10px}
#tutorial-text{font-size:14px;line-height:1.65;min-height:96px}
#tutorial-panel small{display:block;color:#8299ac;font-size:10px;line-height:1.5}
#tutorial-meter{width:100%;height:4px;margin-top:12px;accent-color:#00dbd0}
#tutorial-exit{width:100%;margin-top:16px;font-size:10px}
#tutorial-error:empty{display:none}#tutorial-error{position:fixed;bottom:25px;left:30%;z-index:100;background:#091727;padding:12px;color:#ffb68f}
body.tutorial-active #wave-indicator,body.tutorial-active #break-timer{display:none!important}
body.tutorial-complete #tutorial-panel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 80px));max-height:calc(100vh - 80px);text-align:center;padding:34px;border-color:#d5b56f;box-shadow:0 0 0 100vmax rgba(1,10,19,.72),0 20px 70px #000}
body.tutorial-complete #tutorial-panel h2{font-size:30px;letter-spacing:4px}
body.tutorial-complete #tutorial-text{min-height:0;font-size:15px}
body.tutorial-complete #tutorial-goal{font-size:13px}
body.tutorial-complete #tutorial-play-now,body.tutorial-complete #tutorial-repeat{width:calc(50% - 8px);display:inline-block;margin-top:16px}
body.tutorial-complete #tutorial-exit{margin-top:10px}
@media(max-height:780px){#tutorial-panel{padding:14px;width:265px}#tutorial-text{min-height:0;font-size:13px}}

#tutorial-reward{border-left:2px solid #00dbd0;padding:10px;background:#102938;font-size:13px;line-height:1.6;margin:12px 0;color:#e6d2a6}
#tutorial-relics{font-size:12px;line-height:1.5;margin:12px 0}#tutorial-relics summary{cursor:pointer;color:#00dbd0}#tutorial-relic-list p{margin:10px 0}

/* ===== GŁOSOWANIE NA NOWEGO BOHATERA (gra-10-glosowanie.js) =====
   Kafel na stronie głównej: złota ramka + trzy mini-zbiorniki kandydatów.
   Okno: ten sam wzorzec co #wsparcie-tlo (tło + panel + krzyżyk). Rozmiary
   przez clamp(), bez nowych progów @media(max-height). */
#home-screen .hm-tryb-glos {
  background-position: center, 63% 65%;
  border-color: rgba(255,206,92,.85);
  box-shadow: inset 0 -44px 30px rgba(2,9,20,.7), 0 0 14px rgba(255,190,70,.22);
  animation: hm-glos-puls 3.2s ease-in-out infinite;
}
#home-screen .hm-tryb-glos:hover { border-color: #ffe08a; box-shadow: inset 0 -44px 30px rgba(2,9,20,.7), 0 0 20px rgba(255,190,70,.4); }
#home-screen .hm-tryb-glos b { color: #ffe39a; }
@keyframes hm-glos-puls { 50% { box-shadow: inset 0 -44px 30px rgba(2,9,20,.7), 0 0 22px rgba(255,190,70,.38); } }
.hm-glos-mini { display: flex; gap: 7px; align-items: flex-end; height: 46px; margin-bottom: 2px; }
.hm-glos-zb {
  position: relative; width: 17px; height: 44px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--kol) 70%, transparent);
  background: rgba(3,10,20,.75); overflow: hidden;
}
.hm-glos-zb i {
  position: absolute; left: 0; right: 0; bottom: 0; transition: height .6s ease;
  background: linear-gradient(0deg, var(--kol), color-mix(in srgb, var(--kol) 45%, #fff));
  box-shadow: 0 0 10px var(--kol);
}
.hm-glos-zb em { position: absolute; left: 0; right: 0; top: 2px; font-size: 10px; font-style: normal; text-align: center; }
.hm-glos-odznaka {
  position: absolute; top: 7px; right: 8px; min-width: 22px; padding: 2px 6px; border-radius: 10px;
  font-size: 11px; font-weight: 800; color: #1b1203; background: #ffd84f; box-shadow: 0 0 10px rgba(255,216,79,.7);
}
.hm-glos-odznaka.hidden { display: none; }

.kon-glos {
  border-color: rgba(255,206,92,.8) !important; color: #ffe39a !important;
  background: linear-gradient(180deg, rgba(255,190,70,.16), rgba(255,190,70,.06)) !important;
  animation: hm-glos-puls 2.4s ease-in-out infinite;
}
.kon-glos.hidden { display: none; }

#glos-tlo {
  position: fixed; inset: 0; z-index: 62;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,7,14,0.76); backdrop-filter: blur(2px); padding: 16px;
}
#glos-tlo.hidden { display: none; }
#glos-okno {
  position: relative; width: min(940px, 100%); max-height: min(92vh, 780px); overflow-y: auto;
  display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 12px);
  padding: clamp(14px, 2.6vh, 24px) clamp(16px, 3vw, 28px);
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,190,70,.10), transparent 60%), linear-gradient(180deg, #0e1a28 0%, #0a1420 100%);
  border: 1px solid rgba(255,206,92,.35); border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.65);
}
#glos-tytul { font-size: 18px; font-weight: 800; letter-spacing: 1.6px; color: #ffe39a; padding-right: 34px; }
#glos-x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0;
  font-size: 14px; color: #9fb6cd; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px; cursor: pointer;
}
#glos-x:hover { color: #fff; border-color: rgba(255,206,92,.6); }
#glos-status { font-size: 13px; color: #c9d8e7; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.glos-st { padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); font-weight: 700; letter-spacing: .6px; }
.glos-st.trwa { border-color: rgba(43,179,90,.7); color: #8ff0b0; }
.glos-st.przed { border-color: rgba(255,206,92,.6); color: #ffe39a; }
.glos-st.koniec { border-color: rgba(200,79,255,.6); color: #e2b8ff; }
.glos-za { color: #9fb6cd; }
#glos-zasady { font-size: 12.5px; line-height: 1.5; color: #9fb6cd; }
#glos-moje { font-size: 14px; color: #e9f3ff; min-height: 20px; }
.glos-pkt { font-size: 20px; color: #ffd84f; margin-right: 4px; }
#glos-kandydaci { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.glos-kand {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 14px 12px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--kol) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kol) 12%, transparent), rgba(3,10,20,.4));
}
.glos-kand.wygrana { box-shadow: 0 0 0 2px var(--kol), 0 0 26px color-mix(in srgb, var(--kol) 55%, transparent); }
.glos-kand.blysk { animation: glos-blysk .7s ease-out; }
@keyframes glos-blysk { 0% { box-shadow: 0 0 0 3px var(--kol), 0 0 40px var(--kol); } 100% { box-shadow: none; } }
/* scena kandydata: portret + zbiornik po prawej + mały emblemat */
.glos-scena {
  position: relative; width: 100%; height: clamp(200px, 32vh, 280px); margin-bottom: 4px;
  border-radius: 8px; overflow: hidden;
  background: radial-gradient(80% 70% at 40% 45%, color-mix(in srgb, var(--kol) 22%, transparent), rgba(2,8,16,.6) 75%);
}
.glos-portret { position: absolute; left: 0; right: 64px; top: 0; bottom: 0; width: calc(100% - 64px); height: 100%; object-fit: contain; object-position: center bottom; }
.glos-scena.z-karta .glos-emblemat { display: none; }   /* karta ma własne logo z ikoną */
.glos-bez { display: grid; place-items: center; font-size: 72px; }
.glos-scena .glos-emblemat { position: absolute; top: 8px; left: 8px; width: 34px; height: 34px; font-size: 17px; border-width: 1.5px; }
.glos-scena .glos-zbiornik { position: absolute; right: 10px; top: 10px; bottom: 10px; width: 46px; height: auto; margin: 0; border-radius: 23px; }
.glos-scena .glos-liczba b { font-size: 19px; }
.glos-scena .glos-liczba small { font-size: 9.5px; }
.glos-umiej { width: 100%; text-align: left; font-size: 12px; color: #b9cbdd; }
.glos-umiej summary { cursor: pointer; text-align: center; color: var(--kol); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; padding: 4px 0; }
.glos-umiej ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.glos-umiej li { display: grid; grid-template-columns: 68px 1fr; gap: 6px; line-height: 1.4; }
.glos-umiej li b { color: var(--kol); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; padding-top: 1px; }
.glos-emblemat {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 32px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kol) 55%, transparent), rgba(3,10,20,.8) 70%);
  border: 2px solid var(--kol); box-shadow: 0 0 18px color-mix(in srgb, var(--kol) 60%, transparent);
}
.glos-nazwa { font-size: 19px; font-weight: 800; letter-spacing: 2px; color: var(--kol); }
.glos-tyt { font-size: 12.5px; color: #e9f3ff; }
.glos-rola { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #9fb6cd; }
.glos-zbiornik {
  position: relative; width: 74px; height: clamp(120px, 20vh, 170px); margin: 8px 0 4px;
  border-radius: 37px; border: 2px solid color-mix(in srgb, var(--kol) 75%, transparent);
  background: rgba(2,8,16,.85); overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0,0,0,.8);
}
.glos-plyn {
  position: absolute; left: 0; right: 0; bottom: 0; transition: height .8s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(0deg, var(--kol), color-mix(in srgb, var(--kol) 50%, #fff));
  box-shadow: 0 0 18px var(--kol);
}
.glos-plyn span {
  position: absolute; left: -10%; right: -10%; top: -5px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--kol) 40%, #fff); opacity: .7; animation: glos-fala 2.6s ease-in-out infinite;
}
@keyframes glos-fala { 50% { transform: translateX(6%) scaleY(.6); } }
.glos-liczba {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-shadow: 0 1px 4px #000, 0 0 8px #000;
}
.glos-liczba b { font-size: 24px; color: #fff; }
.glos-liczba small { font-size: 10.5px; color: #e9f3ff; }
.glos-opis { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: #b9cbdd; min-height: 52px; }
.glos-twoje { font-size: 11.5px; color: #ffe39a; min-height: 15px; margin-top: 4px; }
.glos-btn { width: 100%; margin-top: auto; }   /* przyciski w jednej linii także przy rozwiniętych umiejętnościach */
.glos-btn:disabled { opacity: .45; cursor: default; }
#glos-blad { font-size: 13px; color: #ffd9a0; min-height: 18px; text-align: center; }

/* ===== KOLEKCJA → PLECAK (gra-7-pass.js, kartaPlecaka) ===== */
.kol-plecak-licz { min-width: 20px; padding: 1px 6px; border-radius: 9px; background: #ffd84f; color: #1b1203 !important; font-weight: 800; text-align: center; }
.kol-plecak { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; align-items: start !important; align-content: start !important; }
.kol-przedmiot { position: relative; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px !important; text-align: center; }
.kol-przedmiot-ikona { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255,216,79,.45)); }
.kol-przedmiot-ilosc { position: absolute; top: 8px; right: 10px; font-size: 15px; font-weight: 800; color: #ffd84f; }
.kol-przedmiot-waznosc { color: #ffe39a !important; }
.kol-uzyj { width: 100%; margin-top: 4px; }
.kol-plecak-pusty { text-align: center; padding: 22px 18px; color: #9fb6cd; }

/* ===== MECZ PRÓBNY BEZ KONTA (gra-11-proba.js) ===== */
.log-proba { margin-top: 6px; }
.log-proba.hidden, .kon-proba.hidden, .log-proba-postacie.hidden, .log-proba-btn.hidden { display: none; }
.log-proba-btn { width: 100%; border-color: rgba(255,206,92,.75) !important; color: #ffe39a !important; letter-spacing: 2px; }
.log-proba-opis { margin-top: 6px; font-size: 10px; letter-spacing: 1px; color: #7f9bb7; }
.log-proba-postacie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.proba-postac {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  background: rgba(10,20,34,.75); border: 1px solid color-mix(in srgb, var(--hero-color, #49b6ff) 55%, transparent);
  border-radius: 8px; color: #dbe9f7; cursor: pointer; font: inherit;
}
.proba-postac:hover { border-color: var(--hero-color, #49b6ff); box-shadow: 0 0 12px color-mix(in srgb, var(--hero-color, #49b6ff) 45%, transparent); }
.proba-postac img { width: 54px; height: 54px; object-fit: cover; object-position: top; border-radius: 6px; }
.proba-postac b { font-size: 11px; letter-spacing: 1.5px; color: var(--hero-color, #fff); }
.proba-postac small { font-size: 9px; color: #8ea7c0; }
.kon-proba {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0 4px; padding: 12px;
  border: 1px solid rgba(255,206,92,.6); border-radius: 10px; background: rgba(255,190,70,.08); text-align: center;
}
.kon-proba b { color: #ffe39a; letter-spacing: 2px; }
.kon-proba span { font-size: 12.5px; color: #cfe0f0; }
.kon-proba-akcje { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ===== WYZWANIE DNIA (gra-12-wyzwanie.js) ===== */
#home-screen .hm-tryb-wyzw { border-color: rgba(255,159,67,.75); }
#home-screen .hm-tryb-wyzw .hm-tryb-ikona { text-shadow: 0 0 12px #ff9f43; letter-spacing: 2px; }
#wyz-tlo { position: fixed; inset: 0; z-index: 62; display: flex; align-items: center; justify-content: center; background: rgba(2,6,14,.78); padding: 16px; }
#wyz-tlo.hidden { display: none; }
#wyz-okno {
  position: relative; width: min(640px, 100%); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 22px; border-radius: 12px; border: 1px solid rgba(255,159,67,.6);
  background: linear-gradient(180deg, #0d1828, #070e1a); box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#wyz-tytul { font-size: 18px; font-weight: 800; letter-spacing: 1.6px; color: #ffc48a; padding-right: 34px; }
#wyz-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #c9d8e7; cursor: pointer; }
#wyz-x:hover { color: #fff; border-color: rgba(255,159,67,.6); }
#wyz-status { font-size: 13px; color: #c9d8e7; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#wyz-mutatory { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.wyz-mut { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,90,90,.55); background: rgba(255,90,90,.08); }
.wyz-mut.zwrot { border-color: rgba(43,179,90,.6); background: rgba(43,179,90,.08); }
.wyz-mut span { grid-row: span 2; font-size: 26px; }
.wyz-mut b { color: #ffe0c2; letter-spacing: .8px; }
.wyz-mut.zwrot b { color: #b8f5cb; }
.wyz-mut small { color: #b6c8da; font-size: 12px; }
#wyz-zasady { font-size: 12.5px; line-height: 1.5; color: #9fb6cd; }
#wyz-moje { font-size: 14px; color: #e9f3ff; }
#wyz-moje b { color: #ffc48a; }
#wyz-graj { align-self: center; padding: 12px 26px; }
#wyz-blad { min-height: 0; color: #ff8f8f; font-size: 12.5px; }
.wyz-r-tyt { font-size: 12px; letter-spacing: 2px; color: #ffc48a; margin-bottom: 4px; }
.wyz-r-tyt small { color: #7f9bb7; letter-spacing: .5px; }
.wyz-r { display: grid; grid-template-columns: 28px 1fr auto auto 46px; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; font-size: 13px; color: #d7e4f2; }
.wyz-r:nth-child(odd) { background: rgba(255,255,255,.03); }
.wyz-r.ja { outline: 1px solid rgba(255,159,67,.7); }
.wyz-r em { font-style: normal; font-size: 11px; color: #8ea7c0; }
.wyz-r small { color: #8ea7c0; text-align: right; }
.wyz-r-pusto { font-size: 12.5px; color: #8ea7c0; }
.kon-wyzwanie { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,159,67,.6); background: rgba(255,159,67,.08); color: #ffe0c2; font-size: 13px; text-align: center; }
.kon-wyzwanie.hidden { display: none; }
.diff-zablokowany { filter: grayscale(.8); }

/* ===== BOTY W LOBBY (gameplay/boty.js) ===== */
.bot-dodaj { margin-left: auto; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(73,182,255,.6); background: rgba(73,182,255,.1); color: #bfe3ff; font: inherit; font-size: 11px; letter-spacing: 1.2px; cursor: pointer; }
.bot-dodaj:hover { border-color: #66e7ff; color: #fff; }
.player-row.bot .nick { color: #9fd6ff; }
/* lobby: pięć trybów (Fale, Generator, Baśniowy Chaos, Wyzwanie dnia, Infinity) w jednym rzędzie */
#lobby-screen #mode-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { #lobby-screen #mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tryb zapowiedziany, jeszcze niedostępny (Baśniowy Chaos, 11.10) */
#lobby-screen .mode-wkrotce { opacity: .7; color: #e6c4f5; cursor: not-allowed; filter: saturate(.6); }
#lobby-screen .mode-wkrotce .ui-k-nazwa { color: #e6c4f5; }
#lobby-screen .mode-wkrotce .ui-k-pod { color: #ff9ee3; letter-spacing: 2px; }

/* ===== TESTER (gra-13-tester.js) — przycisk zgłoszeń i okno ===== */
.tester-btn { position: fixed; right: 124px; bottom: 22px; z-index: 61; padding: 7px 12px; border-radius: 8px;
  border: 1px solid rgba(125,255,170,.7); background: rgba(6,22,16,.88); color: #b9ffd0; font: 700 11px/1 inherit; letter-spacing: 1.5px; cursor: pointer; }
.tester-btn:hover { border-color: #7dffaa; color: #fff; }
.tester-btn.hidden, #tester-tlo.hidden { display: none; }
#tester-tlo { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(2,6,14,.75); padding: 16px; }
#tester-okno { position: relative; width: min(520px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 12px;
  border: 1px solid rgba(125,255,170,.6); background: linear-gradient(180deg, #0c1a22, #070e16); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#tester-tytul { font-weight: 800; letter-spacing: 1.6px; color: #b9ffd0; padding-right: 34px; }
#tester-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #c9d8e7; cursor: pointer; }
.tester-opis, .tester-kontekst { font-size: 12.5px; color: #9fb6cd; line-height: 1.45; }
.tester-kontekst { color: #7fb39a; }
#tester-tresc { min-height: 110px; resize: vertical; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: #e9f3ff; font: inherit; }
.tester-akcje { display: flex; justify-content: flex-end; }
#tester-stan { font-size: 12.5px; color: #ffd9a0; min-height: 16px; }

/* Zatwierdzone menu: sekcje, wiersze 34 px, profil w prawej kolumnie.
   Zakres wyłącznie HOME/GRAJ — lobby i ekran meczu zachowują swój układ. */
#home-screen .ui-ramka { grid-template-columns: 190px minmax(0, 1fr) 20.8vw; }
#menu-screen .ui-ramka { grid-template-columns: 190px minmax(0, 1fr); }
:is(#home-screen, #menu-screen).screen .ui-bok {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
  padding: 14px 10px 10px; background: #0b1a24;
  border: 1px solid #30424f; border-radius: 7px; backdrop-filter: none;
}
:is(#home-screen, #menu-screen) .ui-bok .ui-konto[hidden] { display: none; }
:is(#home-screen, #menu-screen) .ui-logo { flex: 0 0 auto; padding-bottom: 18px; }
:is(#home-screen, #menu-screen) .ui-logo img { width: 34px; height: 40px; }
:is(#home-screen, #menu-screen) .ui-logo-1,
:is(#home-screen, #menu-screen) .ui-logo-2 { font-size: 20px; letter-spacing: 2px; }
:is(#home-screen, #menu-screen) .ui-logo-3 { font-size: 7px; letter-spacing: 1.5px; }
:is(#home-screen, #menu-screen) .ui-nav {
  flex: 0 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 16px;
}
.ui-nav-grupa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-nav-tytul {
  padding: 0 10px 5px; font-size: 9px; line-height: 14px; letter-spacing: 1.8px;
  font-weight: 400; text-transform: uppercase; color: #73a7c0;
}
.ui-nav-pomoc { border-top: 1px solid #28414f; padding-top: 12px; }
:is(#home-screen, #menu-screen).screen .ui-nav-poz {
  flex: 0 0 auto; width: 100%; height: 34px; min-height: 34px; box-sizing: border-box;
  padding: 0 10px; gap: 10px; border-radius: 5px; background: transparent;
  border: 1px solid transparent; box-shadow: none; text-transform: none;
  font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: #c3ddea;
}
:is(#home-screen, #menu-screen).screen .ui-nav-poz > span:first-child {
  flex: 0 0 16px; width: 16px; font-size: 13px; color: #8da5b3;
  filter: grayscale(1); opacity: .85;
}
:is(#home-screen, #menu-screen).screen .ui-nav-poz:hover { background: #122b37; color: #edfaff; }
:is(#home-screen, #menu-screen).screen .ui-nav-poz.aktywna {
  background: #193b47; border-color: #366476; color: #effcff; box-shadow: none;
}
:is(#home-screen, #menu-screen) .ui-nav-poz:focus-visible { outline: 2px solid #81d4eb; outline-offset: 1px; }
:is(#home-screen, #menu-screen) .ui-czat {
  min-height: 130px; margin-top: 16px; background: #071520; border: 1px solid #243d4d;
  padding: 9px 8px; border-radius: 5px;
}
:is(#home-screen, #menu-screen) .ui-czat-pole { min-width: 0; font-size: 11px; }
:is(#home-screen, #menu-screen) .ui-czat-slij { flex: 0 0 28px; width: 28px; padding: 5px; }
:is(#home-screen, #menu-screen) .ui-bok-stopka { font-size: 9px; padding-top: 10px; }
@media (max-width: 1179px) {
  #home-screen .ui-ramka { grid-template-columns: 180px minmax(0, 1fr) 220px; }
  #menu-screen .ui-ramka { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-height: 800px) {
  :is(#home-screen, #menu-screen) .ui-logo { padding-bottom: 12px; }
  :is(#home-screen, #menu-screen) .ui-nav { gap: 10px; }
  :is(#home-screen, #menu-screen) .ui-czat { min-height: 110px; margin-top: 10px; }
}
@media (pointer: coarse) {
  :is(#home-screen, #menu-screen).screen .ui-nav-poz { height: 44px; min-height: 44px; }
}

/* Strona główna: postęp w zakładkach, niezależna lista aktualności pod spodem.
   Przewija się cała prawa kolumna; karty nie kurczą się pod swoją treść. */
#home-screen #home-prawa {
  padding: 0; gap: 14px; background: transparent; border: 0; border-radius: 0;
  backdrop-filter: none; overflow-y: auto; scrollbar-gutter: stable;
}
#home-screen #home-prawa > .ui-karta {
  flex: 0 0 auto; min-width: 0; padding: 0; border-radius: 8px;
  border: 1px solid #254359; background: #091927; box-shadow: none;
}
#home-prawa .hm-postep-glowa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 22px 20px 18px;
}
#home-prawa .hm-postep-glowa h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.3px; color: #e4edf4; }
#home-prawa .hm-postep-glowa > span { font-size: 12px; color: #98aebe; white-space: nowrap; }
#home-prawa .hm-postep-zakladki { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid #233d51; }
#home-prawa .hm-postep-zakladki button {
  flex: 1; min-width: 0; padding: 12px 5px; margin: 0; background: transparent;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: #98aebe; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
}
#home-prawa .hm-postep-zakladki button[aria-selected="true"] { color: #64dce5; border-bottom-color: #64dce5; }
#home-prawa .hm-postep-zakladki button:hover { color: #defaff; background: #102a3b; }
#home-prawa button:focus-visible, #home-prawa summary:focus-visible { outline: 2px solid #81d4eb; outline-offset: 2px; }
#home-prawa .hm-postep-tresc { padding: 22px 20px; min-height: 258px; box-sizing: border-box; }
#home-prawa .hm-postep-tresc[hidden] { display: none !important; }
#home-prawa .hm-postep-tresc h3 { margin: 0; color: #e4edf4; font-size: 14px; line-height: 1.5; }
#home-prawa .hm-misje-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#home-prawa #home-misje-licznik { font-size: 12px; color: #98aebe; white-space: nowrap; font-variant-numeric: tabular-nums; }
#home-prawa .hm-postep-opis { margin: 8px 0 15px; font-size: 12px; line-height: 1.7; color: #98aebe; }
#home-prawa .sez-wyz { padding: 11px 0; margin: 0; gap: 12px; }
#home-prawa .sez-wyz-opis { font-size: 13px; line-height: 1.5; color: #d6e6f4; }
#home-prawa .sez-wyz-pasek { margin-top: 8px; height: 4px; background: #21374a; }
#home-prawa .sez-wyz-licz { font-size: 12px; color: #98aebe; font-variant-numeric: tabular-nums; }
#home-prawa .sez-wyz.gotowe .sez-wyz-opis { color: #7cff9e; }
#home-prawa .sez-glowa { align-items: flex-start; margin-bottom: 20px; }
#home-prawa .sez-poziom b { font-size: 36px; color: #dec58c; }
#home-prawa .sez-info { flex-direction: column; gap: 5px; font-size: 12px; line-height: 1.6; color: #98aebe; }
#home-prawa .sez-nagrody { flex-direction: column; gap: 0; }
#home-prawa .sez-nagroda { padding: 12px 0; border: 0; border-top: 1px solid #203a4d; border-radius: 0; font-size: 12px; line-height: 1.5; }
#home-prawa #fa-pass-btn-karta { padding: 11px 8px; margin-top: 16px; font-size: 12px; }
#home-prawa #profile-box { margin: 18px 0 12px; padding: 0; border: 0; }
#home-prawa #prof-stats, #home-prawa #prof-wiz, #home-prawa #ui-ulubiona { display: none; }
#home-prawa .prof-badges { justify-content: flex-start; gap: 9px; }
#home-prawa .badge { width: 36px; height: 36px; font-size: 20px; border: 0; border-radius: 6px; background: #11283a; box-shadow: none; }
#home-prawa .prof-badges > div:last-child:not(.badge) { text-align: left !important; font-size: 12px !important; line-height: 1.7; }
#home-prawa .hm-postep-link { border: 0; background: transparent; color: #64dce5; padding: 10px 0; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
#home-prawa .hm-postep-stopka { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid #233d51; }
#home-prawa .hm-postep-stopka button { border: 0; background: transparent; padding: 6px 0; color: #98aebe; font: inherit; font-size: 12px; cursor: pointer; }
#home-prawa .hm-postep-stopka button:hover { color: #defaff; }
#home-prawa #home-ustawienia { margin-left: auto; }
#home-prawa .hm-postep-stopka button span { margin-right: 4px; filter: grayscale(1); }
#home-prawa #akt-karta .hm-postep-glowa { border-bottom: 1px solid #233d51; }
#home-prawa #akt-lista { display: block; max-height: none; overflow: visible; }
#home-prawa .ui-akt-poz { display: block; padding: 20px; background: transparent; border: 0; border-radius: 0; }
#home-prawa .ui-akt-poz + .ui-akt-poz { border-top: 1px solid #233d51; }
#home-prawa .ui-akt-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #98aebe; }
#home-prawa .ui-akt-data { margin: 0; font-size: 11px; letter-spacing: .2px; }
#home-prawa .ui-akt-ikona { color: #64dce5; font-size: 15px; }
#home-prawa .ui-akt-tyt { margin: 0 0 10px; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: #e4edf4; }
#home-prawa .ui-akt-skrot, #home-prawa .ui-akt-tresc { margin: 0; font-size: 13px; line-height: 1.7; color: #98aebe; overflow-wrap: anywhere; }
#home-prawa .ui-akt-szczegoly summary { padding: 14px 0 4px; font-size: 12px; color: #64dce5; cursor: pointer; }
#home-prawa .ui-akt-szczegoly .ui-akt-tresc { margin-top: 12px; }
#home-prawa .akt-mniej, #home-prawa details[open] .akt-wiecej { display: none; }
#home-prawa details[open] .akt-mniej { display: inline; }
body:has(#home-screen:not(.hidden) #home-postep:not(.hidden)) > :is(#tester-btn, #settings-btn) { display: none; }
@media (max-width: 1179px) {
  #home-screen .ui-ramka { grid-template-columns: 180px minmax(0, 1fr) 278px; }
  #home-prawa .hm-postep-glowa { padding: 18px 16px 16px; }
  #home-prawa .hm-postep-tresc, #home-prawa .ui-akt-poz { padding: 18px 16px; }
  #home-prawa .hm-postep-stopka { padding: 11px 16px; }
}
@media (max-width: 800px) {
  #home-screen .ui-ramka { grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: auto; overflow-y: auto; }
  #home-screen #home-prawa { grid-column: 2; overflow-y: visible; scrollbar-gutter: auto; }
}
@media (max-width: 540px) {
  #home-screen .ui-ramka { grid-template-columns: minmax(0, 1fr); }
  #home-screen #home-prawa { grid-column: 1; }
}
@media (pointer: coarse) {
  #home-prawa .hm-postep-zakladki button, #home-prawa .hm-postep-stopka button, #home-prawa .hm-postep-link, #home-prawa summary { min-height: 44px; }
}