/* app-desktop.css: powloka trojkolumnowa, nowa warstwa wizualna (fala 1).
 *
 * Kontrakt: .planning/design/MAKIETA-DESKTOP-2026-09-02.md (szkielet z sekcji 1,
 * korekty K1..K10, sloty z sekcji 4) na tle DECYZJA-NOWA-POWLOKA-2026-09-02.md
 * i MAKIETA-APP-2026-08-31.md sekcja 3.3. Plik napisany od zera 02.09.2026;
 * z poprzedniej wersji przeniesione sa DOSLOWNIE tylko reguly geometrii
 * planszy (.play-layout, .board-column, .board-stack, --ctx-w), bo pilnuje ich
 * test/e2e/planszaKotwica.spec.js i kotwica planszy (D-10) nie jest czescia
 * tej fali.
 *
 * SZYNA MIESZKA W css/rail.css. Reguly `.rail*` wyprowadzono stad 02.09.2026,
 * bo ten plik laduje wylacznie powloka aplikacji, a szyna stoi teraz takze na
 * 292 stronach tresci. Przeniesienie bylo doslowne, a arkusz szyny laduje sie
 * bezposrednio PRZED tym plikiem, wiec kaskada w aplikacji jest ta sama.
 * Zostaja tu reguly, ktore opisuja POWLOKE reagujaca na szyne (szerokosc
 * kolumny w `.app-shell`, marka w `.app-bar`), a nie sama szyne.
 *
 * PLIK JEST LADOWANY JAKO OSTATNI i to jest celowe: normalizuje uklad, ktory
 * osiem widokow opisuje kazdy po swojemu. Przy rownej specyficznosci wygrywa
 * plik pozniejszy, wiec te reguly nie potrzebuja `!important`.
 *
 * JEDEN PUNKT LAMANIA: 900 px (D-13, D-14). Ponizej zostaje uklad mobilny
 * z 31.08 z JEDNA zmiana (03.09.2026, audyt Z2): zadanie dnia jest widoczne
 * takze na telefonie i ma wlasny uklad w css/app-start.css. Pozostale
 * elementy desktopowe (rzad dni, karta bledow, strzalki w liscie Dzis) sa
 * tam nadal schowane w pierwszym bloku tego pliku. Pasmo 900-1179 px zwiera szyne do
 * samych ikon; to JEDYNY drugi prog i ma uzasadnienie w pomiarze: przy
 * 1180 px szyna z etykietami, plansza i kolumna kontekstowa przestaja sie
 * miescic bez sciskania planszy ponizej 480 px.
 *
 * Zaden token nie jest tu literalem koloru. Wymiary kolumn sa literalami
 * swiadomie: to geometria powloki, a nie skala projektu.
 */

/* ============ PONIZEJ 900 PX: JEDEN WYJATEK, ZADANIE DNIA ============ */

/* Elementy, ktore istnieja tylko dla ukladu desktopowego.
 *
 * ⚠️ `.start-hero` (zadanie dnia) ZESZLO Z TEJ LISTY 03.09.2026, audyt Z2.
 * Karta z grywalna plansza jest najmocniejszym haczykiem Startu, a byla
 * wylaczona dla ruchu mobilnego, czyli dla wiekszosci. Jej uklad mobilny
 * opisuje css/app-start.css (sekcja „zadanie dnia"), bo to arkusz mobilnego
 * Startu; tutaj zostaje wylacznie wariant desktopowy w bloku od 900 px. */
/* Od 05.09.2026 (Start z makiety) rzad dni i szewrony wierszy celu sa
   widoczne takze na telefonie, bo obraz je ma; schowana zostaje sama karta
   bledow (kontrakt 2.12 jej nie wymienia). */
.start-errors { display: none; }

@media (min-width: 900px) {
  :root {
    /* Kolumna kontekstowa (D-11). Jedna wartosc dla wszystkich ekranow, bo od
       niej zalezy polozenie planszy: gdyby analiza miala inna, plansza
       skakalaby przy przejsciu z partii do analizy. */
    --ctx-w: 340px;
    /* Pas nad plansza. Karta gracza w partii, naglowek w zadaniu i pusty pas
       w analizie maja te sama wysokosc, wiec plansza stoi w tym samym miejscu
       na kazdym ekranie (D-10). */
    --board-head: 46px;
    /* Plansza liczona z WYSOKOSCI okna, nigdy z zawartosci widoku. */
    --board-size: var(--board-w);
    /* Pas oceny jest zarezerwowany takze tam, gdzie go nie ma. Inaczej
       plansza w zadaniu stalaby o pol paska w lewo wzgledem partii. */
    --eval-w: 22px;
    /* Pole tresci: odstep od krawedzi i szerokosc, przy ktorej trzy kolumny
       Startu (kontrakt: ~1180 px) i para plansza + kolumna kontekstowa
       w partii czytaja sie jako jedna siatka. */
    --content-pad: var(--sp-5);
    --content-max: 1180px;
  }

  /* Pasek przewijania zawsze zajmuje swoje miejsce. Bez tego plansza
     przesuwa sie o polowe jego szerokosci przy kazdym przejsciu miedzy
     ekranem, ktory przewija sie w pionie, a takim, ktory nie. */
  html { scrollbar-gutter: stable; }

  .app-shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    align-items: start;
  }

  /* ⚠️ Pole tresci ma SUFIT. Bez niego rosnie bez konca: zmierzone przy
     2200 px karta rozdzialu w Nauce mila 1541 px przy trzywyrazowym tytule,
     czyli polowa kazdego wiersza byla pusta. Dotyczylo kazdego ekranu z lista.
     Zgloszone przez szlif 5 (03.09).

     Wartosc 1320 px dobrana tak, zeby ponizej 1441 px NIC sie nie zmienilo:
     przy 1440 px pole ma naturalnie 1193 px, wiec sufit jeszcze nie dziala
     i kotwica planszy (x=342) zostaje nietknieta. Powyzej pole przestaje
     rosnac i centruje sie, wiec na szerokim ekranie zostaja rowne marginesy
     zamiast rozciagnietych wierszy. Srodkowa kolumna i tak niesie plansze
     o stalej szerokosci, wiec nadmiar miejsca nic tam nie daje. */
  .app-shell__content { min-width: 0; max-width: 1320px; margin-inline: auto; }


  .app-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    width: var(--rail-w);
    min-height: 64px;
    padding: 0 var(--sp-4);
    gap: 0;
    border-bottom: 0;
    box-shadow: none;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .app-bar > .icon-btn {
    position: fixed;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-dim);
  }

  .app-bar > .icon-btn:hover { color: var(--text); border-color: var(--accent); }

  /* Kolejnosc z kontraktu: motyw, potem ustawienia, oba przy prawej krawedzi
     tresci. Odstep od krawedzi rowny wcieciu pola tresci, zeby ikony staly
     w jednej linii z prawa krawedzia kolumny kontekstowej. */
  #themeToggle { right: calc(var(--content-pad) + 40px + var(--sp-2)); }
  #settingsToggle { right: var(--content-pad); }

  /* Pusta szyna (brak JavaScriptu) nie moze zabierac kolumny; sam warunek
     `:empty` mieszka w css/rail.css razem z reszta regul szyny. */
  .app-shell:has(> .rail:empty) { grid-template-columns: minmax(0, 1fr); }

  /* ================= POLE TRESCI ================= */

  /* Pas 52 px u gory pola tresci nalezy do dwoch ikon w prawym gornym rogu.
     Powitanie i kolumna kontekstowa zaczynaja sie pod nim, na tej samej
     wysokosci, wiec ikony nie nachodza na zadna karte. */
  .app-main { padding: 52px var(--content-pad) var(--sp-6); }

  /* ================= TRZY KOLUMNY (geometria planszy, D-10) =================
     Przeniesione DOSLOWNIE z poprzedniej wersji pliku. Pilnuje ich
     test/e2e/planszaKotwica.spec.js: plansza stoi w tym samym miejscu
     w partii, zadaniu i analizie (1440x900: x=342 y=118 w=640). */

  .play-layout,
  .lessons-player.play-layout,
  .analysis-play-layout {
    grid-template-columns: minmax(0, 1fr) var(--ctx-w);
    gap: var(--sp-5);
    max-width: none;
  }

  .play-layout > .board-column,
  .lessons-player > .board-column { grid-column: 1; }
  .play-layout > .side-panel,
  .lessons-player > .side-panel { grid-column: 2; }

  /* Odtwarzacz lekcji ma wlasna kolumne konspektu: czwarta kolumna powloki
     i jedyny ekran, na ktorym plansza stoi gdzie indziej. Prog 1401, nie 900:
     konspekt miesci sie dopiero, gdy pole tresci ma swoje ~1180 px. */
  @media (min-width: 1401px) {
    .play-layout.play-layout:has(> .lesson-outline) { grid-template-columns: minmax(200px, 232px) minmax(0, 1fr) var(--ctx-w); }
    .play-layout.play-layout:has(> .lesson-outline) > .board-column { grid-column: 2; }
    .play-layout.play-layout:has(> .lesson-outline) > .side-panel { grid-column: 3; }
  }

  /* Kolumna planszy: dwa slupki o STALEJ szerokosci: pas oceny i plansza.
     Rezerwacja pasa oceny takze tam, gdzie paska nie ma, jest cala tajemnica
     tego, ze plansza nie skacze w poziomie. */
  .play-layout .board-column {
    display: grid;
    grid-template-columns: var(--eval-w) minmax(0, var(--board-size));
    gap: var(--sp-2);
    justify-content: center;
    align-content: start;
  }

  .play-layout .board-column > * { grid-column: 2; }
  .play-layout .board-column > .eval-bar { grid-column: 1; grid-row: 1 / -1; }

  .play-layout .board-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: 100%;
    max-width: var(--board-size);
    margin-inline: 0;
  }

  /* Pas nad plansza ma STALA wysokosc na kazdym ekranie. */
  .board-stack > .player-strip:first-child,
  .board-stack > .lesson-header { min-height: var(--board-head); height: var(--board-head); margin: 0; }

  /* Analiza nie ma nad plansza niczego, wiec pas zostaje pusty, ale
     zarezerwowany. */
  .board-stack > .board-wrap:first-child { margin-top: calc(var(--board-head) + var(--sp-2)); }

  .play-layout .side-panel { position: sticky; top: 78px; }

  .lessons-player .board-stack { width: 100%; max-width: var(--board-size); gap: var(--sp-2); margin-inline: 0; }
  .analysis-play-layout .board-stack { gap: var(--sp-2); }
  .analysis-play-layout .board-column { position: static; }

  /* Karty widokow poza Startem dostaja promien i obwodke z kontraktu, ale
     ich wnetrze czeka na wlasne makiety (sekcja 5 kontraktu). */

  /* ================= START (kontrakt K1..K10) =================
     Siatka: srodek (powitanie, zadanie dnia, droga, narzedzia) i kolumna
     kontekstowa 340 px (Dzis, Najczestsze bledy, Poziom). DOM zostaje
     w kolejnosci mobilnej, a `.start`, `.play-now` i wiodacy przycisk
     przestaja byc pudelkami (`display: contents`), wiec ich dzieci wchodza
     prosto w obszary siatki. Kolumna kontekstowa ma szerokosc --ctx-w, te sama
     co panel boczny w partii, wiec prawa krawedz tresci nie skacze. */
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ctx-w);
    grid-template-areas:
      "greet  today"
      "hero   today"
      "hero   streak"
      "hero   level"
      "hero   errors"
      "road   note"
      "label  ."
      "tools  .";
    grid-template-rows: auto auto auto auto 1fr auto auto auto;
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
    max-width: var(--content-max);
    margin: 0;
  }

  .home > .start,
  .home > [data-role="home-next-step"],
  .home > .start > [data-role="home-next-step"] { display: contents; }

  /* ---- powitanie (K1): „Czesc" albo imie, bez wykrzyknika ---- */
  /* Powitanie w jednym wierszu z podpisem: przy planszy 640 px i oknie
     900 px kazdy dodatkowy wiersz nad karta zadania spycha przycisk pod
     zgiecie. Kolumna kontekstowa zaczyna sie rowno z tym wierszem. */
  .start-greet { grid-area: greet; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-3); margin: 0; min-height: 34px; }
  .start-greet__hi { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
  .start-greet__sub { margin: 0; font-size: 14px; }

  /* ---- zadanie dnia: bohater Startu (K2, K3) ---- */
  .start-hero {
    grid-area: hero;
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 14px var(--sp-5);
  }

  .start-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sp-4);
  }

  .start-hero__copy { display: grid; gap: 2px; min-width: 0; }

  /* Kategoria i odznaka trudnosci w jednym wierszu: obie mowia „co to za
     zadanie", wiec stoja obok siebie, nad tytulem. */
  .start-hero__kicker-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-height: 15px;
  }

  .start-hero__kicker {
    margin: 0;
    color: var(--accent);
    font: 600 var(--fs-label) var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .start-hero__title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
  .start-hero__lead { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.4; }

  .start-hero__progress {
    display: grid;
    justify-items: end;
    gap: 6px;
    min-width: 132px;
    padding-top: 4px;
  }

  .start-hero__count {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
  }

  .start-hero__count strong { color: var(--text); font-weight: 700; }

  /* Pasek postepu zadan dnia: natywny <progress>, zielen tylko na postepie. */
  .start-hero__bar {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 132px;
    height: 6px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--accent);
  }

  .start-hero__bar::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--bg-sunken); }
  .start-hero__bar::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--accent); }
  .start-hero__bar::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--accent); }

  /* Plansza: kwadrat o rozmiarze kotwicy (640 px przy 1440x900), wysrodkowany
     w karcie. Koordynaty (K10) sa juz czescia planszy (css/board.css). */
  .start-hero__board {
    width: min(100%, var(--board-size));
    margin-inline: auto;
  }

  .start-hero__board .board {
    border-width: 0;
    border-radius: var(--radius-xs);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--bg-sunken) 60%, transparent);
  }

  /* Zadanie oczekujace na doladowanie: plansza jest pusta, wiec zostaje
     jako cicha plama w kolorach pol; zaden tekst nie udaje zadania. */
  .start-hero[data-state="loading"] .start-hero__board { opacity: .55; }

  .start-hero__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: min(100%, var(--board-size));
    min-height: 40px;
    margin-inline: auto;
  }

  .start-hero__status {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }

  .start-hero[data-state="solved"] .start-hero__status { color: var(--accent); }
  .start-hero[data-state="revealed"] .start-hero__status,
  .start-hero[data-state="miss"] .start-hero__status { color: var(--text-dim); }

  .start-hero__actions { display: flex; gap: var(--sp-2); }

  /* Przycisk drugorzedny z obramowaniem (K3). Zielony pojawia sie dopiero po
     rozwiazaniu i jest jedynym zielonym przyciskiem na Starcie. */
  .start-hero__reveal,
  .start-hero__next { min-height: 40px; padding-block: 8px; padding-inline: var(--sp-4); font-weight: 600; }
  .start-hero__reveal[hidden],
  .start-hero__next[hidden] { display: none; }

  /* ---- dogrywka do mata ----
     Akcja drugoplanowa: ten sam ksztalt co „Pokaż rozwiązanie", nigdy zielen.
     Zielony jest tylko „Następne zadanie" (K3). */
  .start-hero__playout-btn { min-height: 40px; padding-block: 8px; padding-inline: var(--sp-4); font-weight: 600; }
  .start-hero__playout-btn[hidden] { display: none; }

  /* Panel dogrywki stoi W MIEJSCU zdania o zadaniu, wewnatrz stopki karty.
     Nie moze byc osobnym wierszem: plansza jest liczona z wysokosci okna
     (--board-size), wiec kazdy dodatkowy wiersz spycha stopke pod zgiecie.
     Dwa drobne wiersze mieszcza sie w tych samych 40 px co jedno zdanie. */
  .start-hero__playout {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .start-hero__playout[hidden] { display: none; }

  .start-hero__playout-lines { display: grid; gap: 1px; min-width: 0; }

  .start-hero__playout-status { font-size: 15px; font-weight: 600; line-height: 1.2; }

  /* Notka i komunikat konca partii bywaja dlugie. Zamiast rosnac, przycinaja
     sie wielokropkiem; pelna tresc zostaje w atrybucie `title`. */
  .start-hero__playout-note {
    color: var(--text-dim);
    font-size: var(--fs-label);
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .start-hero__playout-mascot { display: block; flex: 0 0 auto; width: 30px; }
  .start-hero__playout-mascot[hidden] { display: none; }

  /* ---- kolumna kontekstowa: Cel na dzis, Seria, Poziom, Bledy (K4, START 2.2) ----
     Wyglad kart jest WSPOLNY z telefonem (css/app-start.css, sekcja „karty
     Startu z makiety"): tutaj kazda karta dostaje tylko obszar siatki.
     Do 05.09.2026 ten blok rysowal wlasna wersje karty „Dzis" (rzad dni jako
     kolka w stopce, tytul w innym brzmieniu niz na telefonie), a telefon
     swoja, i byly to dwa rozne produkty. Korekta K4: seria wychodzi z karty
     celu do wlasnej karty, spojnie z obrazem telefonu z 03.09. */
  .start-goal { grid-area: today; }
  .start-streak-card { grid-area: streak; }

  /* ---- karta „Najczestsze bledy" (K5) ---- */
  .start-errors {
    grid-area: errors;
    display: grid;
    gap: 10px;
  }

  .start-errors__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .start-errors__title { margin: 0; font-size: 15px; font-weight: 650; }
  .start-errors__meta { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-micro); }

  .start-errors__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .start-errors__list[hidden] { display: none; }

  .start-errors__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--sp-2);
    align-items: baseline;
  }

  .start-errors__name { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .start-errors__count { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }

  /* Pasek udzialu: natywny <progress>, wartosc przez wlasciwosc, nie styl. */
  .start-errors__share {
    -webkit-appearance: none;
    appearance: none;
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--text-dim);
  }

  .start-errors__share::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--bg-sunken); }
  .start-errors__share::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--text-dim); }
  .start-errors__share::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--text-dim); }

  .start-errors__cta { justify-self: start; min-height: 40px; font-weight: 600; }
  .start-errors__cta[hidden] { display: none; }

  .start-errors__empty {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "mascot text" "mascot cta";
    align-items: center;
    gap: 6px var(--sp-3);
  }

  .start-errors__empty[hidden] { display: none; }
  .start-errors__mascot { grid-area: mascot; display: block; width: 72px; }
  .start-errors__mascot .mascot { display: block; width: 100%; height: auto; }
  .start-errors__empty-text { grid-area: text; margin: 0; color: var(--text-dim); font-size: var(--fs-body-sm); line-height: 1.45; }
  .start-errors__pgn { grid-area: cta; justify-self: start; min-height: 38px; font-weight: 600; }

  /* ---- karta „Poziom": wyglad wspolny z telefonem, tu tylko obszar ---- */
  .start-level { grid-area: level; }

  /* ---- przycisk wiodacy telefonu i blok „Zagraj teraz" ----
     Na desktopie jedyna akcja pierwszoplanowa jest ruch na planszy (K3).
     Zielony przycisk kariery, wyjscie do podstaw i podglad planszy z kartka
     przeciwnika zostaja w DOM dla telefonu i wyszukiwarki. Kariera jest
     osiagalna ze strzalki „Partia z botem" i z karty „Nastepny krok". */
  .start-cta,
  .start-secondary,
  .home > .play-now { display: none; }

  /* Wybor celu jest ukryty globalnie (css/journey.css); zostaje poza siatka. */
  .goal-choice-grid { grid-column: 1; }

  /* ---- twoja droga: pod zadaniem dnia ---- */
  .start-road { grid-area: road; }

  .start-road__name,
  .start-road__step.is-current .start-road__name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
  }

  .start-road__step.is-current .start-road__name { color: var(--text); font-weight: 600; }

  .start-note { grid-area: note; align-self: start; margin: 0; text-align: left; }

  /* ---- wszystkie narzedzia: zwarta lista ---- */
  .home-section-label {
    grid-area: label;
    margin: var(--sp-2) 0 0;
    color: var(--text);
    font: 650 15px var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
  }

  .home-grid {
    grid-area: tools;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none;
    gap: var(--sp-1) var(--sp-3);
    margin-top: calc(-1 * var(--sp-3));
  }

  .home-grid > * { animation: none; }
  .home-card[data-view] { grid-area: auto; }

  .home-card,
  .home-card--main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    transition: background-color var(--dur-base) var(--ease);
  }

  .home-card:hover:not(.is-locked),
  .home-card--main:hover:not(.is-locked) {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--text) 7%, transparent);
  }

  .home-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .home-card::before { content: none; }

  .home-card > *,
  .home-card--main > *,
  .home-card--main .home-card-title { margin: 0; align-self: center; }
  .home-card--main::after { content: none; }
  .home-card-icon,
  .home-card--main .home-card-icon { width: 20px; height: 20px; margin: 0; line-height: 0; }
  .home-card-icon svg,
  .home-card--main .home-card-icon svg { width: 20px; height: 20px; }
  .home-card:hover:not(.is-locked) .home-card-icon { transform: none; }

  .home-card-title,
  .home-card--main .home-card-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.25; }

  .home-card-desc,
  .home-card-tag,
  .home-card-action { display: none; }
}

/* ================= PASMO POSREDNIE 900-1179 PX (D-13) ================= */

@media (min-width: 900px) and (max-width: 1179px) {
  :root { --ctx-w: 300px; }

  .app-shell { grid-template-columns: var(--rail-compact-w) minmax(0, 1fr); }

  /* Marka zwarta do samego znaku; pasek NIE wystaje poza kolumne szyny. */
  .app-bar { width: var(--rail-compact-w); padding: 0; justify-content: center; }
  .brand-name { display: none; }

  /* Start w pasmie posrednim: te same obszary, wezsza kolumna kontekstowa. */
  .start-hero { padding-inline: var(--sp-4); }
  /* Karta poziomu w kolumnie 300 px: ciasniejszy portfel, zeby licznik XP
     zostal w jednej linii (pomiar 05.09: „XP" lamalo sie przy 1000 px). */
  .start-level { gap: var(--sp-3); }
  .start-level__wallet { min-width: 60px; padding-left: var(--sp-3); }
}