/* style.css — Zgrajmy. Duża czcionka, czytelność w słabym świetle. */

:root {
  --tlo: #fafaf7;
  --tekst: #1a1a1a;
  --akord: #b1420a;        /* ciepły pomarańcz na akordy */
  --podtytul: #666;
  --pasek-tlo: #ffffff;
  --pasek-obwodka: #e2e2dc;
  --refren-tlo: #f0ede4;
  --refren-krawedz: #d9b48f;
  --akcent: #b1420a;
  --font-tekst: 1.25rem;    /* sterowane JS-em */
}

/* Tryb nocny (true-black OLED): czyste czarne tło — na ekranach OLED piksele są
   wygaszone, więc nie oślepia przy ognisku i oszczędza baterię. Tekst ciepły
   bursztyn, akordy jaśniejszy pomarańcz. Powierzchnie (pasek, refren) tylko
   minimalnie podniesione nad czerń, żeby były widoczne, ale nie świeciły. */
body.noc {
  --tlo: #000000;
  --tekst: #e0a878;
  --akord: #ff9442;
  --podtytul: #8a6a50;
  --pasek-tlo: #000000;
  --pasek-obwodka: #2a1a0e;
  --refren-tlo: #35210f;
  --refren-krawedz: #85542c;
  --akcent: #ff9442;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
/* Tło TYLKO na body (nie na html): dzięki temu tło body „propaguje" na całe
   płótno okna — także tam, gdzie treść jest krótsza niż ekran (np. bez wybranej
   piosenki) i przy przewinięciu. Inaczej w trybie nocnym spod krótkiego body
   prześwitywało jasne tło html (zmienne CSS nie dziedziczą w górę do html). */
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tlo);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* --- Pasek sterowania --- */
#pasek {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--pasek-tlo);
  border-bottom: 1px solid var(--pasek-obwodka);
}

#pasek .grupa {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
/* `display` powyżej wygrywa z domyślnym [hidden]{display:none}, więc jawnie
   chowamy ukryte grupy (PIN prowadzącego, autoprzewijanie). */
#pasek .grupa[hidden] { display: none; }

#pasek .etykieta {
  font-size: 0.8rem;
  color: var(--podtytul);
}

/* Baner podglądu „Pokój demo" (tylko do odczytu) — pod paskiem narzędzi. */
.demo-baner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.9rem;
  background: var(--refren-tlo);
  border-bottom: 1px solid var(--pasek-obwodka);
  color: var(--tekst);
  font-size: 0.95rem;
  text-align: center;
}
.demo-baner[hidden] { display: none; }
.demo-baner strong { color: var(--akord); }

/* --- Bloki-segmenty w pasku -------------------------------------------------
   Narzędzia pogrupowane w poziome bloki (bez podpisów nad nimi, żeby pasek był
   niski). Delikatny kontur + tło odróżnia blok od białego paska; przyciski w
   środku są „płaskie", a kontener daje im wspólną ramkę. */
#pasek .blok {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--tlo);
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.6rem;
}
#pasek .blok[hidden] { display: none; }
#pasek .blok .grupa { gap: 0.25rem; }
#pasek .blok > .ikona,
#pasek .blok .grupa > .ikona,
#pasek .pop-wrap > .ikona {
  border-color: transparent;
  background: transparent;
}
#pasek .blok > .ikona:hover,
#pasek .blok .grupa > .ikona:hover,
#pasek .pop-wrap > .ikona:hover { background: rgba(127, 127, 127, 0.14); }
#pasek .pop-wrap > .ikona.aktywny { background: rgba(127, 127, 127, 0.18); }

/* --- Panele „▾" (popover) ---------------------------------------------------
   Szczegóły metronomu / przewijania / widoku otwierane z paska jako dropdown. */
.pop-wrap { position: relative; display: inline-flex; align-items: center; gap: 0.1rem; }
.pop-wrap[hidden] { display: none; }
#pasek .pop-wrap > .przewijanie-startstop,
#pasek .pop-wrap > .metronom-startstop {
  min-width: 2.1rem;
  padding: 0.3rem 0.5rem;
}
#pasek .pop-wrap > .przewijanie-startstop.aktywny,
#pasek .pop-wrap > .metronom-startstop.aktywny {
  background: var(--akcent);
  color: #fff;
}
/* Tło i obwódka paneli „▾" (metronom, przewijanie, koło, widok) — wspólne, żeby
   okna nie zlewały się z tłem/tekstem. W ciemnym tryb jaśniejsze niż strona. */
:root { --pop-tlo: #ffffff; --pop-obwodka: #cfc9bd; }
body.noc { --pop-tlo: #2a1a0d; --pop-obwodka: #7a5531; }

.pop-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 14rem;
  padding: 0.6rem 0.7rem;
  background: var(--pop-tlo);
  border: 1px solid var(--pop-obwodka);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pop-panel[hidden] { display: none; }
#pasek .pop-panel .grupa { flex-wrap: wrap; }
/* W panelu przyciski znów dostają własną ramkę (nie ma tła bloku pod nimi). */
#pasek .pop-panel .ikona { border-color: var(--pasek-obwodka); }
/* Ostatni blok (Sesja) dosunięty w prawo — bez osobnego spacera (flex:1), który
   przy ciasnym pasku zawijał się do własnego rzędu i podbijał wysokość. */
#pasek .blok:last-of-type { margin-left: auto; }
/* Przy prawej krawędzi (blok Sesja) panel otwiera się w lewo, żeby nie uciekał. */
.blok:last-of-type .pop-panel { left: auto; right: 0; }

/* Poza bardzo szerokim ekranem chowamy słowne etykiety triggerów
   („przewijanie / metronom / koło / widok") — zostają ikony z ▾. Pełny pasek
   prowadzącego z etykietami jest szeroki; bez nich mieści się w jednej linii
   zamiast zawijać blok Sesji do drugiego rzędu. Etykiety wracają dopiero, gdy
   ekran jest na tyle szeroki, że i tak się zmieszczą. */
@media (max-width: 1700px) {
  #pasek .trig-txt { display: none; }
}

/* --- Chowane menu na telefonie --------------------------------------------
   Na szerokim ekranie #pasek-wiecej jest „przezroczysty" (display:contents):
   jego dzieci układają się bezpośrednio w pasku jak dotąd, a przycisk „⚙ opcje"
   jest zbędny. Na wąskim ekranie reszta paska chowa się pod „⚙ opcje", żeby na
   telefonie nie zjadała pół ekranu. */
#pasek-wiecej { display: contents; }
#btn-menu { display: none; }

@media (max-width: 760px) {
  /* :not([hidden]) — żeby gating JS (hidden) w trybie Gościa wygrywał nad tą regułą. */
  #btn-menu:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
  #pasek.menu-otwarte #btn-menu { background: var(--pasek-aktywny, rgba(127,127,127,0.18)); }
  /* Domyślnie zwinięte; po rozwinięciu — własny rząd pod paskiem podstawowym. */
  #pasek-wiecej { display: none; }
  #pasek.menu-otwarte #pasek-wiecej {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex-basis: 100%;
    margin-top: 0.1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pasek-obwodka);
  }
  /* Ciaśniej na telefonie: mniejsze odstępy i brak dosuwania Sesji w prawo
     (na wąskim ekranie margin-left:auto tylko rozpychał układ na osobne rzędy).
     Bloki rozciągają się do szerokości rzędu (flex:1) z wyśrodkowaną treścią —
     krawędzie są równe i nic nie „pływa" samotnie przy lewej. */
  #pasek.menu-otwarte .blok { gap: 0.15rem; padding: 0.2rem; flex: 1 1 auto; justify-content: center; }
  #pasek.menu-otwarte .blok:last-of-type { margin-left: 0; }
  /* Krótsza etykieta „Transpozycja" na telefonie — węższy blok „Utwór", więc
     „Widok" pakuje się obok zamiast lądować w osobnym rzędzie. */
  #pasek.menu-otwarte #trans-etykieta { display: none; }
}

.ikona {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 1rem;
  background: transparent;
  color: var(--tekst);
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.5rem;
  cursor: pointer;
}
.ikona:active { transform: translateY(1px); }

/* Link do panelu admina (⚙️) — wyśrodkowanie ikony. W CSS, a nie inline, żeby
   atrybut [hidden] (ukrywanie dla uczestnika) nie przegrywał ze stylem inline. */
#link-admin { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
#link-admin[hidden] { display: none; }

.przelacznik {
  font-size: 0.9rem;
  cursor: pointer;
}

.wartosc {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* --- Panel z listą (wysuwany z lewej) --- */
#panel-lista {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  width: min(85vw, 22rem);
  padding: 1rem;
  background: var(--pasek-tlo);
  border-right: 1px solid var(--pasek-obwodka);
  overflow-y: auto;
}
#panel-lista[hidden] { display: none; }

.szukaj-wiersz {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#szukaj {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.5rem;
  background: var(--tlo);
  color: var(--tekst);
}

#lista-piosenek {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
#lista-piosenek li {
  padding: 0.7rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
#lista-piosenek li:hover { background: var(--refren-tlo); }
#lista-piosenek .li-tytul { font-weight: 600; }
#lista-piosenek .li-artysta { font-size: 0.85rem; color: var(--podtytul); }

#zaslona {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0,0,0,0.35);
}
#zaslona[hidden] { display: none; }

/* --- Widok piosenki --- */
#piosenka {
  padding: 1rem 1rem 6rem;
  /* Szerokość kolumny skaluje się z czcionką tekstu: ~40 znaków w linii
     niezależnie od rozmiaru. Dzięki temu powiększenie czcionki (A+) poszerza
     kolumnę, zamiast wymuszać zawijanie długich linii na szerokim ekranie.
     Przy domyślnym 1.25rem daje 50rem (jak dotąd); min(…,100%) chroni telefon. */
  max-width: min(calc(var(--font-tekst, 1.25rem) * 40), 100%);
  margin: 0 auto;
}

.placeholder {
  color: var(--podtytul);
  padding: 2rem 0;
  text-align: center;
}

/* Ekran powitalny pokoju (#6) — gdy w pokoju nie wybrano jeszcze piosenki. */
.powitanie { text-align: center; padding: 2.5rem 0 1rem; }
.powitanie-tytul { margin: 0; font-size: 1.8rem; }
.powitanie-podtytul { color: var(--podtytul); margin: 0.4rem 0 1.6rem; }
.powitanie-kafelki {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
}
.kafelek {
  flex: 1 1 220px; max-width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 1.3rem 1rem;
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  border-radius: 14px;
  color: var(--tekst); font: inherit; cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.kafelek:hover { transform: translateY(-2px); border-color: var(--akcent); }
.kafelek:active { transform: translateY(0); }
.kafelek:disabled { opacity: 0.45; cursor: default; transform: none; }
.kafelek-ikona { font-size: 2rem; line-height: 1; }
.kafelek-tytul { font-weight: 700; font-size: 1.1rem; }
.kafelek-opis { color: var(--podtytul); font-size: 0.9rem; }

.piosenka-naglowek { margin-bottom: 1rem; }
.piosenka-tytul { margin: 0; font-size: 1.6rem; }
.piosenka-podtytul { color: var(--podtytul); margin-top: 0.2rem; }

.blok { margin: 0 0 1.1rem; }
/* Jawny odstęp z nadmiarowych pustych linii (każda dodatkowa pusta linia
   = ok. jednej pustej linii tekstu). */
.blok-odstep { height: 1rem; }
.blok-chorus {
  padding: 0.5rem 0.8rem;
  background: var(--refren-tlo);
  border-left: 4px solid var(--refren-krawedz);
  border-radius: 0 0.4rem 0.4rem 0;
}
.blok-etykieta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--podtytul);
  margin-bottom: 0.2rem;
}
.blok-komentarz {
  font-style: italic;
  color: var(--podtytul);
  margin: 0.6rem 0;
}

/* Linia tekstu z akordami nad spójnikami */
.linia {
  font-size: var(--font-tekst);
  line-height: 1.15;
  margin: 0.15rem 0;
}

/* „Słowo" = niełamliwy boks grupujący kawałki jednego wyrazu (także gdy akord
   wstawiono w środku słowa). Zawija się jako całość na spacjach między słowami,
   ale nigdy w środku — bo cały wyraz jest jednym atomowym boksem inline. */
.slowo {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end;
  vertical-align: bottom;
}

.seg {
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom;
}

.akord {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--akord);
  line-height: 1.1;
  white-space: pre;
  min-height: 1.1em;
}
.akord.pusty { visibility: hidden; }
/* Minimalny odstęp po każdym akordzie, by sąsiednie akordy nigdy się nie
   stykały. Pusty (ukryty) akord odstępu nie dostaje, żeby nie rozsuwać liter
   słowa dzielonego akordem (np. "won[C]der[D]ful" => "wonderful"). */
.akord:not(.pusty) { padding-right: 0.35em; }
/* Akord nad samą spacją/pustką (np. "[G] [F] [E]") — wyraźny odstęp, żeby
   akordy były czytelnie rozsunięte nad pustym miejscem. */
.akord.nad-spacja { padding-right: 1.4em; }

/* Rezerwuj wysokość wiersza tekstu nawet dla pustego segmentu, żeby akord na
   końcu linii (np. ostatnie [E] bez tekstu) został w linii akordów, a nie
   opadł do poziomu tekstu (przez vertical-align: bottom pustego segmentu). */
.tekst { white-space: pre; min-height: 1.15em; }

/* Linia bez akordów nie rezerwuje pustego pasa nad tekstem */
.linia.bez-pasa-akordow .akord { display: none; }

.linia-tab {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre;
  font-size: calc(var(--font-tekst) * 0.8);
}

/* Tryb „tylko akordy" — chowamy warstwę tekstu */
#piosenka.bez-akordow .akord { display: none; }
#piosenka.bez-tekstu .tekst { opacity: 0.25; }

/* --- Diagramy chwytów pod tekstem --- */
.diagramy {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pasek-obwodka, rgba(128, 128, 128, 0.3));
}
.diagramy-naglowek {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.8;
  margin: 0 0 0.75rem;
}
.diagramy-siatka {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
}
.diagram { width: 72px; }
.diagram-svg { display: block; width: 72px; height: auto; }
.diagram-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram-nazwa { fill: var(--akord); font-size: 12px; font-weight: 700; }
.diagram-prog { fill: var(--tekst); font-size: 8px; opacity: 0.75; }
.diagram-linia { stroke: var(--tekst); stroke-width: 1; opacity: 0.5; }
.diagram-siodelko { stroke-width: 3; opacity: 0.9; }
.diagram-kropka { fill: var(--akord); }
.diagram-otwarta { fill: none; stroke: var(--tekst); stroke-width: 1.2; opacity: 0.75; }
.diagram-znak { fill: var(--tekst); font-size: 10px; opacity: 0.65; }
.diagram-brak {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 94px;
}
.diagram-nazwa-txt { color: var(--akord); font-weight: 700; }

/* Podręczny diagram chwytu na najechanie/tapnięcie akordu */
.akord:not(.pusty) { cursor: help; }
#chord-popup {
  position: fixed;
  z-index: 1000;
  background: var(--pop-tlo);
  border: 1px solid var(--pop-obwodka);
  border-radius: 0.6rem;
  padding: 0.4rem 0.5rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none; /* nie przechwytuj klików — zamykanie przez klik w tło */
  text-align: center;
}
#chord-popup .diagram-svg { width: 84px; height: auto; }
#chord-popup .chord-popup-sklad {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--pop-obwodka);
  font-size: 0.72rem;
  color: var(--tekst);
  opacity: 0.9;
  max-width: 150px;
  line-height: 1.35;
}
.chord-popup-brak {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
  color: var(--tekst);
}

/* --- Synchronizacja / rola / status --- */

/* Przycisk prowadzącego aktywny.
   Wyższa specyficzność (#pasek …) niż reguła zerująca tło ikon w pasku
   (#pasek .blok > .ikona { background: transparent }) — bez tego różowe
   wypełnienie nie wchodziło i napis „prowadzę" ginął na jasnym tle. */
#pasek #btn-prowadzacy.aktywny {
  background: var(--akcent);
  color: #fff;
  border-color: var(--akcent);
}

/* Przycisk podążania: odpięty = wyróżniony */
#btn-sync.odpiety {
  background: var(--refren-tlo);
  border-color: var(--refren-krawedz);
  font-weight: 700;
}

/* Kropka statusu połączenia */
.kropka {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #b33;            /* rozłączony */
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
.kropka.polaczony { background: #3a9d3a; }
.kropka.laczenie { background: #d9a400; }

#pin-input {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  font-size: 1rem;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.5rem;
  background: var(--tlo);
  color: var(--tekst);
}
#pin-input.blad {
  border-color: #c0392b;
  color: #c0392b;
}

/* --- Panel admina --- */
#pasek strong { font-size: 1rem; }

.pasek-spacer { flex: 1; }

.plakietka-tryb {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 1rem;
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  color: var(--akord);
  vertical-align: middle;
  margin-left: 0.35rem;
}

.btn-akcent {
  background: var(--akcent);
  color: #fff;
  border-color: var(--akcent);
  font-weight: 600;
}
.btn-akcent:hover { opacity: 0.92; }

/* Ekran logowania PIN przy wejściu do panelu admina */
.logowanie-wrap {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.logowanie-wrap[hidden] { display: none; }

.logowanie-karta {
  width: 100%;
  max-width: 24rem;
  background: var(--pasek-tlo);
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.85rem;
  padding: 2rem 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.logowanie-ikona {
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.logowanie-karta h1 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
}

.logowanie-karta p {
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
  color: var(--podtytul);
}

.pin-pole-duze {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.35em;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.6rem;
  background: var(--tlo);
  color: var(--tekst);
  margin-bottom: 0.9rem;
  outline: none;
}
.pin-pole-duze:focus {
  border-color: var(--akcent);
}

.logowanie-blad {
  color: #c0392b;
  font-size: 0.88rem;
  margin-bottom: 0.85rem;
  font-weight: 600;
}

@keyframes drgniecie {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.drgnij { animation: drgniecie 0.25s ease-in-out 2; }

.admin {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}
.admin[hidden] { display: none; }

.admin-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.karta {
  background: var(--pasek-tlo);
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.75rem;
  padding: 1.15rem;
  margin-bottom: 1rem;
}
.admin-siatka .karta { margin-bottom: 0; }
.karta[hidden] { display: none; }
.karta h2 { margin: 0 0 0.75rem; font-size: 1.08rem; }

.karta-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.karta-naglowek h2 { margin: 0; }

.karta-narzedzia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

#szukaj-admin {
  max-width: 18rem;
  margin-bottom: 0;
}

.pole {
  width: 100%;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.5rem;
  background: var(--tlo);
  color: var(--tekst);
  font-family: inherit;
}
.pole:focus {
  outline: none;
  border-color: var(--akcent);
}
textarea.pole {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  resize: vertical;
  line-height: 1.4;
}

/* Okno „Wklej tekst z akordami": wejście i podgląd obok siebie. */
.wklej-kolumny {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0;
}
.wklej-kolumna {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wklej-etykieta {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--tekst-przygaszony, inherit);
}
.wklej-kolumna textarea.pole {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
@media (max-width: 48rem) {
  .wklej-kolumny { grid-template-columns: 1fr; }
}

.plik-wybor {
  display: block;
  width: 100%;
  padding: 0.65rem;
  margin-bottom: 0.65rem;
  border: 1px dashed var(--refren-krawedz);
  border-radius: 0.5rem;
  background: var(--tlo);
  color: var(--tekst);
  font-size: 0.9rem;
  cursor: pointer;
}

.lista-admin { list-style: none; margin: 0; padding: 0; }
.lista-admin li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
.lista-admin li:last-child { border-bottom: none; }
.lista-admin .li-tytul { font-weight: 600; }
.lista-admin .li-artysta { font-size: 0.85rem; color: var(--podtytul); margin-top: 0.1rem; }
.lista-admin .akcje { display: flex; gap: 0.4rem; flex-shrink: 0; }
.ikona.groznie { border-color: #c0392b; color: #c0392b; }
.ikona.groznie.pelny { background: #c0392b; color: #fff; font-weight: 600; }

.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  margin-bottom: 1rem;
  border-radius: 0.6rem;
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  font-weight: 500;
}
.status[hidden] { display: none; }
.status.blad { border-color: #c0392b; color: #c0392b; }

/* --- Własne oprogramowane okna modalne --- */
.modal-tlo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-tlo[hidden] { display: none; }

.modal-okno {
  width: 100%;
  max-width: 28rem;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--pasek-tlo);
  color: var(--tekst);
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.85rem;
  padding: 1.35rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.modal-okno.modal-szeroki {
  max-width: 46rem;
}

/* Edytor ChordPro: większe, ręcznie zmienialne okno.
   Domyślnie duże, a użytkownik może je rozciągnąć za prawy dolny róg.
   Podwójna klasa (.modal-okno.modal-edytor-okno) bije specyficznością
   regułę .modal-okno.modal-szeroki, która inaczej zacisnęłaby max-width. */
.modal-okno.modal-edytor-okno {
  width: min(80rem, 96vw);
  max-width: 96vw;
  height: min(85vh, 52rem);
  max-height: 92vh;
  resize: both;
  overflow: auto;
  min-width: 22rem;
  min-height: 24rem;
  display: flex;
  flex-direction: column;
}
/* Obszar edycji wypełnia dostępną wysokość okna. */
.modal-edytor-okno .wklej-kolumny {
  flex: 1 1 auto;
  min-height: 0;
}
.modal-edytor-okno .wklej-kolumna {
  min-height: 0;
}
.modal-edytor-okno .wklej-kolumna textarea.pole,
.modal-edytor-okno .edytor-podglad {
  flex: 1 1 auto;
  height: auto;
  min-height: 12rem;
}

.modal-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.modal-naglowek h3 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-tresc {
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--tekst);
  margin-bottom: 1.2rem;
}

.modal-stopka {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.szybkie-tagi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.szybkie-tagi button {
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  min-height: 1.8rem;
}

/* --- Kolejka życzeń --- */
.badge {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 1rem;
  background: var(--akcent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.badge[hidden] { display: none; }

/* Pozycja listy piosenek: tytuł (klik = wybór) + przycisk „Zgłoś" */
#lista-piosenek li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#lista-piosenek .li-info { flex: 1; min-width: 0; cursor: pointer; }
.li-zglos { flex-shrink: 0; }

/* Nagłówek grupy (kategorii) na liście piosenek */
.grupa-naglowek {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--podtytul);
  background: var(--pasek-tlo);
  padding: 0.6rem 0.4rem 0.2rem;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}
.grupa-naglowek:hover { color: var(--tekst); }

/* Pasek filtrów kategorii (chipy) nad listą piosenek */
.kategorie-filtr {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}
.kategorie-filtr[hidden] { display: none; }
.chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
}
.chip.aktywny {
  background: var(--akcent);
  border-color: var(--akcent);
  color: #fff;
}

/* Suwak prędkości autoprzewijania w pasku */
#scroll-speed { width: 92px; accent-color: var(--akcent); vertical-align: middle; }

/* Pole opóźnienia startu przewijania */
.scroll-delay-pole { display: inline-flex; align-items: center; gap: 0.2rem; }
#scroll-delay {
  width: 3rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.9rem;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.4rem;
  background: var(--tlo);
  color: var(--tekst);
}

.hint { font-size: 0.85rem; color: var(--podtytul); margin: 0.4rem 0 0; }

#panel-zyczenia {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 40;
  width: min(85vw, 22rem);
  padding: 1rem;
  background: var(--pasek-tlo);
  border-left: 1px solid var(--pasek-obwodka);
  overflow-y: auto;
}
#panel-zyczenia[hidden] { display: none; }
#panel-zyczenia h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }

.zyczenia-dodaj { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
#zyczenie-text {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.5rem;
  background: var(--tlo);
  color: var(--tekst);
  font-size: 1rem;
}

#lista-zyczenia { list-style: none; margin: 0; padding: 0; }
#lista-zyczenia li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
#lista-zyczenia .akcje { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* Gdy nie jesteśmy prowadzącym, globalna transpozycja jest „czyjaś" — subtelna wskazówka */
#trans-etykieta small { color: var(--podtytul); }

/* --- Setlisty koncertowe --- */

/* Plakietka z nazwą aktywnej setlisty przy przycisku 📋 */
.plakietka-setlista {
  display: inline-block;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  color: var(--akord);
  font-size: 0.75rem;
  font-weight: 600;
}
.plakietka-setlista[hidden] { display: none; }

/* Pasek nawigacji po setliście (prowadzący) */
#setlista-nav button:disabled { opacity: 0.35; cursor: default; }

/* Panel setlist (wysuwany z prawej, jak życzenia) */
#panel-setlisty {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 40;
  width: min(85vw, 24rem);
  padding: 1rem;
  background: var(--pasek-tlo);
  border-left: 1px solid var(--pasek-obwodka);
  overflow-y: auto;
}
#panel-setlisty[hidden] { display: none; }
#panel-setlisty h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
#setlista-nowa { margin-bottom: 0.75rem; }
.setlista-sep { border: none; border-top: 1px solid var(--pasek-obwodka); margin: 1rem 0; }

/* Lista wszystkich setlist (zarządzanie) */
.lista-setlisty { list-style: none; margin: 0; padding: 0; }
.lista-setlisty li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
.lista-setlisty .li-info { flex: 1; min-width: 0; }
.lista-setlisty .li-tytul { font-weight: 600; }
.lista-setlisty .li-artysta { font-size: 0.82rem; color: var(--podtytul); }
.lista-setlisty .akcje { display: flex; gap: 0.3rem; flex-shrink: 0; }

/* Nagłówek aktywnej setlisty w panelu */
.setlista-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
  color: var(--akord);
}
.setlista-naglowek.pusty { display: block; color: var(--podtytul); font-weight: 400; font-size: 0.9rem; }
.setlista-od-poczatku { font-size: 0.8rem; font-weight: 600; flex-shrink: 0; }

/* Lista utworów aktywnej setlisty (uporządkowana) */
.lista-setlista-utwory { list-style: decimal inside; margin: 0; padding: 0; }
.lista-setlista-utwory li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.4rem;
  border-radius: 0.4rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
.lista-setlista-utwory li.klik { cursor: pointer; }
.lista-setlista-utwory li.klik:hover { background: var(--refren-tlo); }
.lista-setlista-utwory li.teraz {
  background: var(--refren-tlo);
  border-left: 4px solid var(--akcent);
  font-weight: 700;
}
.lista-setlista-utwory li.nastepny { border-left: 4px solid var(--refren-krawedz); }
.su-tytul { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.su-znacznik {
  flex-shrink: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--akord);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--refren-krawedz);
  border-radius: 1rem;
}

/* Edytor setlisty (modal): obie kolumny */
.lista-edit { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.lista-edit li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
.lista-edit li.klik { cursor: pointer; }
.lista-edit li.klik:hover { background: var(--refren-tlo); }
.lista-edit .akcje { display: flex; gap: 0.25rem; flex-shrink: 0; }
.lista-edit .ikona { min-width: 1.9rem; min-height: 1.9rem; padding: 0.15rem 0.35rem; }

/* --- Selektor instrumentu (Gitara / Ukulele) --- */
.sel-instrument {
  padding: 0.25rem 0.45rem;
  font-size: 0.9rem;
  background: var(--tlo);
}

/* --- Przycisk głosowania w kolejce życzeń --- */
.btn-glos {
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  min-height: 2rem;
  font-variant-numeric: tabular-nums;
}

/* --- Modal z kodem QR --- */
.qr-modal-okno {
  max-width: 34rem;
  text-align: center;
}
.qr-siatka {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 0.5rem 0;
}
.qr-karta {
  flex: 1 1 13rem;
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  border-radius: 0.75rem;
  padding: 0.85rem;
}
.qr-karta[hidden] { display: none; }
.qr-etykieta {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.55rem;
  color: var(--akord);
}
.qr-box {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0 0.5rem;
}
.qr-svg {
  display: block;
  width: 190px;
  height: 190px;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.qr-adres {
  font-size: 0.82rem;
  color: var(--podtytul);
  word-break: break-all;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* --- Podgląd na żywo w edytorze ChordPro (panel admina) --- */
.edytor-podglad {
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.5rem;
  background: var(--tlo);
  padding: 0.75rem 0.9rem;
  height: 22.5rem;
  overflow-y: auto;
  margin-bottom: 0.65rem;
  --font-tekst: 1rem;
}
.edytor-podglad .piosenka-tytul { font-size: 1.25rem; }

/* --- Ekran Powitalny / Lobby Pokoi --- */
.lobby-okno {
  max-width: 52rem;
}
.lobby-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.lobby-karta {
  background: var(--refren-tlo);
  border: 1px solid var(--refren-krawedz);
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
}
.lobby-karta h4 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  color: var(--akord);
}
.lobby-stopka-prawna {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--podtytul);
  border-top: 1px solid var(--pasek-obwodka);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

/* --- Metronom: pasek menu mruga w takt -------------------------------------
   Pulsuje górny pasek (#pasek), a nie cały ekran — mniej rozprasza. Na każde
   uderzenie JS restartuje animację (usuń klasę → reflow → dodaj). Mrugamy
   box-shadow (bez zmiany układu); akcent („raz") mocniejszy. Kolor ciepły
   (bursztyn), żeby nie oślepiał w trybie nocnym w ciemności. */
#pasek.puls-takt { animation: pasek-blysk 150ms ease-out; }
#pasek.puls-akcent { animation: pasek-blysk-akcent 180ms ease-out; }
@keyframes pasek-blysk {
  0%   { box-shadow: inset 0 0 0 2px rgba(255, 178, 77, 0.9), 0 0 10px 0 rgba(255, 178, 77, 0.5); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 178, 77, 0), 0 0 0 0 rgba(255, 178, 77, 0); }
}
@keyframes pasek-blysk-akcent {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 138, 61, 1), 0 0 16px 0 rgba(255, 138, 61, 0.7); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 138, 61, 0), 0 0 0 0 rgba(255, 138, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #pasek.puls-takt, #pasek.puls-akcent { animation: none; }
}

/* --- Wizualny metronom (#8): pływające odliczanie taktu ---------------------
   Zawsze widoczne, gdy metronom gra (position:fixed, niezależne od zwinięcia
   paska). Jedna kropka na uderzenie; „raz" (akcent) większy i w kolorze akcentu.
   Nie przechwytuje kliknięć (pointer-events:none). */
.metronom-wizual {
  position: fixed;
  left: 50%;
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  background: var(--pop-tlo);
  border: 1px solid var(--pop-obwodka);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.metronom-wizual .beat-kropka {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--podtytul);
  opacity: 0.35;
  transition: opacity 90ms ease-out, transform 90ms ease-out, background 90ms;
}
.metronom-wizual .beat-kropka.akcent { width: 1.25rem; height: 1.25rem; }
.metronom-wizual .beat-kropka.teraz {
  opacity: 1;
  transform: scale(1.25);
  background: var(--akord);
}
.metronom-wizual .beat-kropka.akcent.teraz {
  background: var(--akcent);
  box-shadow: 0 0 10px 1px var(--akord);
}
@media (prefers-reduced-motion: reduce) {
  .metronom-wizual .beat-kropka,
  .metronom-wizual .beat-kropka.teraz { transition: opacity 90ms; transform: none; }
}

/* --- Panel metronomu (w popoverze „▾") --------------------------------------
   Opcje w czytelnych rzędach zamiast jednego zawijanego paska: nagłówek ze
   start/stopem, duży licznik BPM z przyciskami ±, na dole tap / klik / zapisz. */
#metronom-grupa.metronom-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 11rem;
}
.metronom-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
.metronom-naglowek .etykieta { font-size: 0.9rem; font-weight: 600; }
.metronom-startstop { font-size: 1.05rem; padding: 0.2rem 0.55rem; }

/* Rząd z tempem: [−]  120 BPM  [+] — wyśrodkowany, duża wartość. */
.metronom-bpm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.metronom-bpm .ikona {
  font-size: 1.25rem;
  line-height: 1;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#metronom-grupa .wartosc {
  min-width: 2.6ch;
  text-align: center;
  font-size: 1.5rem;
}
.metronom-bpm .bpm-jedn {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--podtytul);
  align-self: flex-end;
  padding-bottom: 0.3rem;
}

/* Rząd dolny: tap, przełącznik klika, zapis. */
.metronom-opcje {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.metronom-opcje .przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.metronom-opcje #btn-bpm-zapisz { margin-left: auto; }

/* Podkład perkusyjny (tylko prowadzący) — oddzielony od panelu metronomu. */
.podklad-grupa {
  padding-top: 0.6rem;
  border-top: 1px solid var(--pasek-obwodka);
}
.podklad-wiersz {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.podklad-wiersz .etykieta { font-size: 0.9rem; font-weight: 600; }
.podklad-wiersz .pole-select {
  flex: 1;
  padding: 0.25rem 0.45rem;
  font-size: 0.9rem;
  background: var(--tlo);
  color: inherit;
}

/* --- Panel przewijania (w popoverze „▾") ------------------------------------
   Układ rzędami, spójny z panelem metronomu: nagłówek ze start/stopem, suwak
   tempa z liczbową wartością (px/s), opóźnienie startu, na dole auto-dalej/zapis. */
#autoscroll-grupa.przewijanie-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 14rem;
}
.przewijanie-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pasek-obwodka);
}
.przewijanie-naglowek .etykieta { font-size: 0.9rem; font-weight: 600; }
.przewijanie-startstop { font-size: 1.05rem; padding: 0.2rem 0.55rem; }

/* Rząd z tempem: etykieta, suwak (rozciąga się), liczba, jednostka. */
.przewijanie-predkosc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.przewijanie-predkosc .etykieta { font-size: 0.85rem; }
.przewijanie-predkosc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.przewijanie-predkosc .ikona {
  font-size: 1.25rem;
  line-height: 1;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.przewijanie-predkosc #scroll-speed-val {
  min-width: 2.6ch;
  text-align: center;
  font-size: 1.5rem;
}
.pole-liczba {
  width: 4.6ch;
  min-width: 4.6ch;
  padding: 0.15rem 0.35rem;
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--tekst);
  background: var(--tlo);
  border: 1px solid var(--pasek-obwodka);
  border-radius: 0.45rem;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pole-liczba:focus {
  border-color: var(--akcent);
}
.pole-liczba::-webkit-outer-spin-button,
.pole-liczba::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.przewijanie-predkosc .jedn {
  align-self: flex-end;
  padding-bottom: 0.3rem;
}
#scroll-speed-val {
  min-width: 2.2ch;
  text-align: center;
  font-size: 1.1rem;
}
.jedn {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--podtytul);
}

/* Rząd opóźnienia startu: pełny podpis + pole + „s". */
.przewijanie-start .scroll-delay-pole {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

/* Rząd dolny: auto-dalej po lewej, zapis dosunięty do prawej. */
.przewijanie-opcje {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.przewijanie-opcje .przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.przewijanie-opcje #btn-scroll-zapisz { margin-left: auto; }

/* --- Tryb „na ekran / rzutnik" (uruchamiany przez ?ekran=1; patrz app.js) ------
   Pełnoekranowy, czysty widok tylko do odczytu: chowamy pasek i panele,
   poszerzamy utwór i pokazujemy dyskretny przycisk wyjścia. Rozmiar tekstu
   ustawia app.js (stan.fontPx wg szerokości ekranu). */
body.ekran #pasek,
body.ekran #panel-lista,
body.ekran #panel-zyczenia,
body.ekran #panel-setlisty,
body.ekran #demo-baner { display: none !important; }
body.ekran #piosenka { max-width: none; margin: 0; padding: 3vh 4vw 8vh; }
body.ekran .piosenka-naglowek { text-align: center; }

.ekran-wyjdz { display: none; }
body.ekran .ekran-wyjdz {
  display: inline-block; position: fixed; top: 10px; right: 12px; z-index: 60;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 0.95rem;
  border: 1px solid var(--pasek-obwodka); background: var(--pasek-tlo); color: var(--tekst);
  opacity: 0.28; transition: opacity 0.2s;
}
body.ekran .ekran-wyjdz:hover,
body.ekran .ekran-wyjdz:focus { opacity: 1; }

/* --- Koło kwintowe (moduł nauki) ------------------------------------------- */
/* Kolory funkcji (tonika/subdominanta/dominanta) + akordy molowe w tonacji.
   Wspólne dla pigułek koła i legendy; wariant nocny poniżej. */
:root {
  --rt-fill: #d9efe6; --rt-line: #0f6e56; --rt-txt: #0f6e56;
  --rs-fill: #fae6c8; --rs-line: #b9780f; --rs-txt: #8a5206;
  --rd-fill: #f7ddd3; --rd-line: #c25630; --rd-txt: #a03c1d;
  --ri-fill: #e7e3f7; --ri-line: #6f63c9; --ri-txt: #4b3f93;
  /* pigułki spoza tonacji (nieaktywne) + pierścienie koła */
  --kolo-dim-fill: var(--tlo); --kolo-dim-line: var(--pasek-obwodka);
  --kolo-dim-txt-op: 0.45; --kolo-ring: var(--pasek-obwodka);
}
body.noc {
  --rt-fill: #12463a; --rt-line: #1d9e75; --rt-txt: #7fd9c0;
  --rs-fill: #4a3410; --rs-line: #ba7517; --rs-txt: #f0b968;
  --rd-fill: #4a2518; --rd-line: #d85a30; --rd-txt: #e8a07f;
  --ri-fill: #2c2756; --ri-line: #7f77dd; --ri-txt: #b9b2f0;
  /* W ciemnym: jaśniej niż panel, żeby pigułki nie wtapiały się w tło. */
  --kolo-dim-fill: #33200f; --kolo-dim-line: #6b4a2b;
  --kolo-dim-txt-op: 0.75; --kolo-ring: #4a3220;
}

.kolo-panel { display: flex; flex-direction: column; gap: 0.5rem; min-width: 300px; max-width: 322px; }
.kolo-hint { margin: 0; font-size: 0.9rem; opacity: 0.8; }
.kolo-svg-wrap { width: 100%; }
.kolo-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }

.kolo-ring { stroke: var(--kolo-ring); stroke-width: 1; }
.kolo-pill { cursor: pointer; }
.kolo-pill circle { stroke-width: 1; transition: stroke-width 0.1s; }
.kolo-pill .lbl { font-size: 13.5px; font-weight: 600; }
.kolo-pill[data-ring="minor"] .lbl { font-size: 12px; }
.kolo-pill .lbl-stopien { font-size: 12.5px; }
.kolo-pill[data-ring="minor"] .lbl-stopien { font-size: 11px; }
.kolo-pill .stopien { font-size: 10px; font-weight: 500; opacity: 0.85; }
.kolo-pill:hover circle,
.kolo-pill:focus-visible circle { stroke-width: 2.5; }
.kolo-pill:focus { outline: none; }

/* Pierścień = akord użyty w wyświetlanym utworze — wyraźny pomarańcz, grubszy,
   żeby rzucał się w oczy w obu trybach (nie kolor akcentu, bo w dzień brązowawy).
   Selektor celowo specyficzny, by wygrać z „.rola-* circle" i „.kolo-pill circle". */
.kolo-pill circle.kolo-uzyty-ring { stroke: #ff7a1a; stroke-width: 2.5; }

.rola-t circle { fill: var(--rt-fill); stroke: var(--rt-line); } .rola-t .lbl, .rola-t .stopien { fill: var(--rt-txt); }
.rola-s circle { fill: var(--rs-fill); stroke: var(--rs-line); } .rola-s .lbl, .rola-s .stopien { fill: var(--rs-txt); }
.rola-d circle { fill: var(--rd-fill); stroke: var(--rd-line); } .rola-d .lbl, .rola-d .stopien { fill: var(--rd-txt); }
.rola-i circle { fill: var(--ri-fill); stroke: var(--ri-line); } .rola-i .lbl, .rola-i .stopien { fill: var(--ri-txt); }
.rola-x circle { fill: var(--kolo-dim-fill); stroke: var(--kolo-dim-line); } .rola-x .lbl { fill: var(--tekst); opacity: var(--kolo-dim-txt-op); }

.kolo-hub { fill: var(--pasek-tlo); stroke: var(--pasek-obwodka); stroke-width: 1; }
.kolo-hub-top { font-size: 11px; fill: var(--tekst); opacity: 0.7; }
.kolo-hub-key { font-size: 15.5px; font-weight: 700; fill: var(--akcent); }

.kolo-legenda { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-size: 0.86rem; }
.kolo-leg { display: inline-flex; align-items: center; gap: 0.3rem; }
.kolo-leg::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1px solid; flex: none; }
.kolo-leg.rola-t::before { background: var(--rt-fill); border-color: var(--rt-line); }
.kolo-leg.rola-s::before { background: var(--rs-fill); border-color: var(--rs-line); }
.kolo-leg.rola-d::before { background: var(--rd-fill); border-color: var(--rd-line); }
.kolo-leg.rola-i::before { background: var(--ri-fill); border-color: var(--ri-line); }
.kolo-leg-uzyty::before { background: transparent; border-color: #ff7a1a; border-width: 2px; }
.kolo-stopnie { margin: 0; font-size: 0.9rem; opacity: 0.9; }

/* Panel koła nie może urosnąć poza ekran — przy podglądzie gryfu przewijamy. */
.kolo-panel { max-height: 78vh; overflow-y: auto; }

/* Podgląd składników akordu + dźwięki na gryfie (pod kołem). */
.kolo-podglad { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--pasek-obwodka); }
.kolo-podglad[hidden] { display: none; }
.kolo-podglad-tytul { font-size: 0.92rem; margin-bottom: 0.35rem; }
.gryf-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.84rem; margin-bottom: 0.25rem; }
.gryf-leg { display: inline-flex; align-items: center; gap: 0.3rem; }
.gryf-leg::before { content: ''; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.gryf-leg.gryf-root::before { background: #1d9e75; }
.gryf-leg.gryf-third::before { background: #ba7517; }
.gryf-leg.gryf-fifth::before { background: #c25630; }
.gryf-leg.gryf-ext::before { background: #4a6b8a; }

/* --- Samouczek skal (panel w popoverze) --- */
.skala-panel { display: flex; flex-direction: column; gap: 0.6rem; min-width: 300px; }
.skala-wybor { display: flex; flex-direction: column; gap: 0.5rem; }
.skala-wiersz { display: flex; align-items: center; gap: 0.6rem; }
.skala-wiersz .etykieta { font-size: 0.9rem; font-weight: 600; min-width: 3.2rem; }
.skala-wiersz .pole-select {
  flex: 1; padding: 0.25rem 0.45rem; font-size: 0.9rem;
  background: var(--tlo); color: inherit;
}
.skala-opcje { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.skala-opcje .przelacznik { display: inline-flex; align-items: center; gap: 0.3rem; }
.skala-tytul { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.skala-info { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.95rem; opacity: 0.95; margin-bottom: 0.4rem; }
.skala-info b { font-weight: 600; }
.skala-podglad { display: flex; flex-direction: column; }
.skala-podglad .gryf-svg { max-width: 320px; }

/* --- Duże okna nauki: „Skale" i „Koło kwintowe" (≈3/4 szerokości ekranu) ---
   Zamiast małego panelu przy przycisku — szerokie, wyśrodkowane okno, żeby gryf
   i koło były duże i czytelne. */
#pop-skale, #pop-kolo {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 820px);
  max-width: 820px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 60;
}
@media (max-width: 640px) {
  #pop-skale, #pop-kolo { width: 94vw; }
}
/* Panele wewnętrzne wypełniają szerokie okno (zdejmujemy wąskie ograniczenia). */
#pop-skale .skala-panel, #pop-kolo .kolo-panel { max-width: 100%; max-height: none; overflow: visible; }
/* Koło kwintowe większe (to kwadrat — ograniczamy, by nie było olbrzymie), wyśrodkowane. */
#pop-kolo .kolo-svg { max-width: 400px; margin: 0 auto; }
/* Gryfy w dużych oknach — na pełną szerokość (nazwy dźwięków duże i czytelne). */
#pop-skale .skala-podglad .gryf-svg,
#pop-kolo .kolo-podglad .gryf-svg { max-width: 100%; width: 100%; }
/* Legenda i składniki mogą się rozłożyć poziomo w szerokim oknie. */
#pop-skale .skala-info { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 1.2rem; }

.gryf-svg { display: block; width: 100%; max-width: 320px; height: auto; }
.gryf-struna, .gryf-prog { stroke: var(--kolo-dim-line); stroke-width: 1; }
.gryf-nut { stroke: var(--tekst); stroke-width: 2.5; opacity: 0.55; }
.gryf-prog-nr, .gryf-struna-lbl { fill: var(--tekst); opacity: 0.6; font-size: 11px; }
.gryf-kropka text { fill: #fff; font-size: 11px; font-weight: 600; }
.gryf-root circle { fill: #1d9e75; }
.gryf-third circle { fill: #ba7517; }
.gryf-fifth circle { fill: #c25630; }
/* Pozostałe dźwięki skali (nie-pryma) w samouczku skal — stonowany błękit. */
.gryf-ext circle { fill: #4a6b8a; }