/* ===================== PALETA — "żywy" ciemny motyw w stylu telewizyjnego
game-show, spójny z tablicą (patrz sekcja TABLICA niżej) i z drugą naszą
grą warsztatową ("Gra edukacyjna"), skąd wzięliśmy inspirację kolorem.
Wszystkie kontrasty tekst/tło poniżej zweryfikowane ręcznie wg WCAG 2.1
(min. 4.5:1 dla tekstu, min. 3:1 dla obwódek komponentów UI — 1.4.11)
względem WSZYSTKICH trzech powierzchni (--tlo/--karta/--karta-2), nie
tylko jednej — stąd nieco jaśniejsze odcienie niż w pierwszym skojarzeniu
(np. --tekst-przygaszony, --pole-ramka, --blad). ===================== */
:root {
--tlo: #1c1f26;
--karta: #242938;
--karta-2: #2c3244;
--tekst: #f2efe9;
--tekst-przygaszony: #a9b1c2;
--akcent: #ffb627;
--akcent-ciemny: #e6a200;
--akcent2: #2bb3a3;
--granica: #3a4156;
/* Osobna, wyraźniejsza ramka dla pól formularzy — --granica ginie na
ciemnym tle karty, przez co pola tekstowe są praktycznie niewidoczne.
~3,2–4,1:1 na --karta/--karta-2 (WCAG 1.4.11 dla obwódek komponentów
UI, próg 3:1). */
--pole-ramka: #7d89a6;
--blad: #ff6b4a;
--sukces: #22c55e;
/* Ciemny tekst na WYPEŁNIONYCH akcentem przyciskach/plakietkach —
biały tekst na --akcent/--blad/--akcent2/--sukces ma kontrast tylko
~1,7–2,8:1 (za blisko, te kolory są za jasne), ten ciemny odcień daje
6,5–10,5:1 na każdym z nich. */
--buton-tekst: #1a1300;
--radius: 10px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
background: var(--tlo);
color: var(--tekst);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: "Oswald", "Segoe UI", sans-serif;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Domyślny kolor linku przeglądarki (a tym bardziej "odwiedzony" — ciemny
fiolet) ginie na ciemnym tle appki. Bez tej reguły dotyczyło to wszystkich
zwykłych bez własnej klasy — np. "Szczegóły"/"Panel na żywo" w tabeli
"Moje gry", "Archiwizuj"/"Przywróć" w banku pytań, "Dezaktywuj"/"Resetuj
hasło" w panelu admina. Bardziej specyficzne reguły niżej (.topbar-nav a,
.link-button, .regulamin-corner itd.) nadal wygrywają tam, gdzie mają
swój własny kolor.
:not(.button) jest tu konieczne, nie kosmetyczne — pseudoklasa (:visited,
:hover) liczy się do specyficzności tak samo jak klasa, więc SAMO
":visited" (0,1,1) bije zwykłe ".button" (0,1,0) mimo że wygląda na
"niżej" w pliku. Bez tego wykluczenia odwiedzone linki-przyciski (np.
"+ Nowe pytanie", ) dostawały turkusowy tekst zamiast
ciemnego z reguły `button, .button` — nieczytelne na bursztynowym tle. */
a:not(.button) { color: var(--akcent2); }
a:visited:not(.button) { color: var(--akcent2); }
a:hover:not(.button) { color: var(--akcent); }
/* Kod gry / hasło prowadzącego — technicznie wyglądający, wyróżniony akcentem,
żeby od razu rzucał się w oczy jako "specjalna" informacja. */
code {
font-family: "IBM Plex Mono", "Courier New", monospace;
background: var(--tlo);
color: var(--akcent);
padding: 2px 8px;
border-radius: 6px;
font-size: 0.95em;
letter-spacing: 0.04em;
}
.topbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px 16px;
padding: 12px 16px;
background: var(--karta);
border-bottom: 1px solid var(--granica);
}
.topbar-brand {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 9px;
}
.brand-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--akcent);
flex-shrink: 0;
box-shadow: 0 0 8px rgba(255, 182, 39, 0.7);
}
.topbar-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.topbar-nav a { color: var(--tekst); text-decoration: none; }
.topbar-nav a:hover { color: var(--akcent); }
.regulamin-nav { font-weight: 700; }
.content {
max-width: 900px;
margin: 32px auto;
padding: 0 16px;
}
/* Strony z szerszymi tabelami (np. lista użytkowników panelu admina — Login
+ E-mail + Rola + Status + Gry + Utworzono + akcje w jednym wierszu)
ciasno mieściły się w domyślnych 900px i wymuszały poziomy scroll
wewnątrz .tabela-wrap nawet na zwykłym ekranie biurkowym. Więcej miejsca
zamiast scrolla tam, gdzie i tak jest go pod dostatkiem. */
.content.content-szeroka { max-width: 1200px; }
/* Tablica ma wypełniać CAŁY ekran (rzutnik) — bez tego dziedziczyła
max-width:900px/margin:32px auto z .content, więc tło i cała plansza
były ściśnięte do wąskiego paska na środku, a wokół widać było zwykłe
tło strony (--tlo). */
.content.content-tablica { max-width: none; margin: 0; padding: 0; }
.card {
background: var(--karta);
border: 1px solid var(--granica);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 24px;
}
.card-narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.card-header-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px 16px;
margin-bottom: 16px;
}
h1 { margin-top: 0; }
form label {
display: block;
margin-bottom: 14px;
font-weight: 600;
font-size: 0.9rem;
color: var(--tekst-przygaszony);
text-transform: none;
}
/* Pola formularzy celowo "wpuszczone" (tło --tlo, najciemniejsze z trzech
powierzchni) względem karty, na której leżą (--karta) — daje wyraźną
głębię zamiast płaskiego, jednolitego prostokąta. */
form input, form select, form textarea {
display: block;
width: 100%;
margin-top: 6px;
padding: 8px 10px;
border: 1.5px solid var(--pole-ramka);
border-radius: 6px;
font-size: 1rem;
font-weight: normal;
font-family: inherit;
color: var(--tekst);
background: var(--tlo);
}
form input:focus, form select:focus, form textarea:focus {
outline: none;
border-color: var(--akcent2);
box-shadow: 0 0 0 3px rgba(43, 179, 163, 0.22);
}
form textarea { min-height: 70px; resize: vertical; }
button, .button {
display: inline-block;
background: var(--akcent);
color: var(--buton-tekst);
border: none;
padding: 9px 16px;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: filter 0.12s ease, transform 0.08s ease;
}
button:hover, .button:hover { filter: brightness(1.08); }
button:active, .button:active { transform: scale(0.98); }
button:disabled { background: var(--granica); color: var(--tekst-przygaszony); cursor: not-allowed; filter: none; }
.link-button {
background: none;
border: none;
color: var(--akcent2);
padding: 0;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.inline-form { display: inline; }
.blad { color: var(--blad); font-weight: 600; }
.sukces { color: var(--sukces); font-weight: 600; }
.hint { color: var(--tekst-przygaszony); font-size: 0.9rem; }
.flash {
max-width: 900px;
margin: 0 auto 16px;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
}
.flash-blad { background: rgba(255, 107, 74, 0.14); color: var(--blad); border: 1px solid rgba(255, 107, 74, 0.4); }
.flash-sukces { background: rgba(34, 197, 94, 0.14); color: var(--sukces); border: 1px solid rgba(34, 197, 94, 0.4); }
/* Widoczny wskaźnik utraty połączenia (panel/tablica) — audyt UX/UI H1.
Nie zajmuje miejsca, dopóki nie jest potrzebny (`hidden`), więc nie
psuje ścieśnionego układu panelu, gdy połączenie działa normalnie. */
.polaczenie-blad {
background: rgba(255, 107, 74, 0.16);
color: var(--blad);
border: 1px solid rgba(255, 107, 74, 0.4);
font-weight: 600;
text-align: center;
padding: 10px 16px;
border-radius: 8px;
margin: 0 0 12px;
}
.site-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 24px;
border-top: 1px solid var(--granica);
color: var(--tekst-przygaszony);
font-size: 0.82rem;
}
.footer-logo { height: 20px; width: 20px; border-radius: 4px; display: block; }
/* Chip w prawym górnym rogu, na WSZYSTKICH stronach (position: fixed, poza
przepływem dokumentu) — także tam, gdzie nie ma zalogowanego topbara
(login, tablica). Własne tło + ciemny tekst na hover (akcent jest zbyt
jasny na biały tekst), żeby było czytelne zarówno na appce, jak i na
ciemnej tablicy na rzutnik. */
.regulamin-corner {
position: fixed;
top: 12px;
right: 16px;
z-index: 1000;
background: rgba(28, 31, 38, 0.9);
border: 1px solid var(--granica);
color: #fff;
font-weight: 700;
font-size: 0.8rem;
padding: 7px 14px;
border-radius: 999px;
text-decoration: none;
}
.regulamin-corner:hover { background: var(--akcent); border-color: var(--akcent); color: var(--buton-tekst); }
.regulamin-tresc h1 { font-size: 1.5rem; margin-top: 0; }
.regulamin-tresc em { color: var(--tekst-przygaszony); font-style: normal; display: block; margin-bottom: 20px; }
.regulamin-tresc h2 {
font-size: 1.1rem;
margin: 28px 0 10px;
padding-top: 16px;
border-top: 1px solid var(--granica);
}
.regulamin-tresc h2:first-of-type { border-top: none; padding-top: 0; }
.regulamin-tresc p, .regulamin-tresc ol, .regulamin-tresc ul { line-height: 1.6; margin: 0 0 12px; }
.regulamin-tresc ol, .regulamin-tresc ul { padding-left: 22px; }
.regulamin-tresc li { margin-bottom: 8px; }
.regulamin-tresc strong { color: var(--akcent); }
/* Owija tabele, żeby na wąskich ekranach (telefon) ewentualne przewijanie
w poziomie zostawało wewnątrz samej tabeli, a nie rozciągało/przewijało
całą stronę. */
.tabela-wrap { width: 100%; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--granica);
}
.tabela th { color: var(--tekst-przygaszony); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.akcje { display: flex; gap: 10px; }
.status {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
}
.status-przygotowanie { background: rgba(255, 182, 39, 0.16); color: var(--akcent); }
.status-aktywna { background: rgba(34, 197, 94, 0.16); color: var(--sukces); }
.status-zakonczona { background: rgba(169, 177, 194, 0.14); color: var(--tekst-przygaszony); }
.dashboard-karty {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.dashboard-karta {
flex: 1;
min-width: 160px;
background: var(--karta-2);
border: 1px solid var(--granica);
border-radius: var(--radius);
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dashboard-karta-liczba { font-family: "IBM Plex Mono", monospace; font-size: 2rem; font-weight: 700; color: var(--akcent); line-height: 1; }
.dashboard-karta-razem { font-size: 1.2rem; font-weight: 600; color: var(--tekst-przygaszony); }
.dashboard-karta-etykieta { font-size: 0.85rem; color: var(--tekst-przygaszony); }
.lista-checkboxow {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
max-height: 260px;
overflow-y: auto;
background: var(--tlo);
border: 1px solid var(--granica);
border-radius: 6px;
padding: 10px;
}
.checkbox-row { display: flex; gap: 8px; align-items: center; font-weight: normal; }
.checkbox-row input { width: auto; margin: 0; }
.druzyna-wiersz { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.druzyna-wiersz label { flex: 1; margin-bottom: 0; }
.usun-druzyne {
flex-shrink: 0;
background: none;
border: 1.5px solid var(--pole-ramka);
color: var(--blad);
width: 38px;
height: 38px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
}
.usun-druzyne:hover:not(:disabled) { background: rgba(255, 107, 74, 0.16); border-color: var(--blad); }
.usun-druzyne:disabled { color: var(--tekst-przygaszony); border-color: var(--granica); cursor: not-allowed; }
.haslo-podglad {
font-family: "IBM Plex Mono", monospace;
letter-spacing: 2px;
color: var(--akcent);
/* Hasła bez spacji (pojedynczy "zlepiony" wyraz, np. nazwa własna) inaczej
potrafiły wypchnąć wąską kartę bocznika poza jej ramkę — zwykłe
zawijanie tekstu łamie tylko na granicy spacji, a monospace + duże
odstępy między literami (letter-spacing) tym bardziej zachęcają
przeglądarkę, żeby wolała przepełnienie niż złamanie w środku wyrazu. */
overflow-wrap: anywhere;
}
/* Podgląd zamaskowanego hasła w panelu (odpowiednik .tablica-haslo na
tablicy, ale bez jej dużej, responsywnej czcionki — to tylko mały podgląd
dla prowadzącego). zamaskuj_haslo() celowo rozdziela litery W OBRĘBIE
JEDNEGO SŁOWA spacją NIEROZDZIELAJĄCĄ (NBSP), żeby słowo nigdy nie złamało
się w środku (patrz game_logic.py:zamaskuj_haslo) — dla haseł BEZ spacji
(jeden długi "zlepiony" wyraz, np. nazwa własna) to jednak oznacza, że
CAŁA maska staje się jednym, nierozdzielnym ciągiem znaków, szerszym niż
wąska karta bocznika. overflow-wrap:anywhere łamie w razie potrzeby MIMO
NBSP (to świadomy wyjątek od "nigdy nie łam w środku słowa" — przy tej
szerokości karty priorytetem jest pozostanie w ramce, nie estetyka
pojedynczego bardzo długiego słowa). */
.tablica-podglad { overflow-wrap: anywhere; }
.pytanie-tresc { font-size: 1.1rem; font-weight: 600; margin: 4px 0; overflow-wrap: anywhere; }
/* ===================== PANEL PROWADZĄCEGO — układ ścieśniony pod ekrany
15" i większe, żeby sekcja zarządzania grą mieściła się bez scrolla. ===== */
/* .content ma domyślnie margin:32px auto i max-width:900px (dobre dla
zwykłych podstron z tekstem) — panel to ekran ROBOCZY używany żywo,
godzinami, na szerokim monitorze/rzutniku obok tablicy, więc oba te
ograniczenia szkodzą: max-width:900px marnował >1000px w poziomie na
typowym ekranie 1920px, a duży margines pionowy zjadał miejsce, które
akurat tu ma bezpośrednie przełożenie na to, czy sekcja zarządzania
grą mieści się bez scrolla. Ten sam wzorzec co już .content-tablica
(pełna szerokość) i .content-szeroka (tabela administratora) — patrz
base.html: blok content_class. */
.content.panel-content {
max-width: none;
margin-top: 4px;
margin-bottom: 4px;
padding-left: clamp(16px, 3vw, 48px);
padding-right: clamp(16px, 3vw, 48px);
}
/* Karta panelu prowadzącego celowo wyróżnia się z reszty appki — to ekran
używany żywo, godzinami, na którym toczy się gra "na żywo". Delikatny
gradient między dwiema powierzchniami + akcentowy pasek na górze (kolor
"trwającej transmisji") jednoznacznie odróżnia "tryb pracy" od zwykłych
podstron (bank pytań, lista gier itp.), bez potrzeby osobnego koloru tła
jak w pierwszej (jasnej) wersji tego motywu. */
.panel-card {
/* Ta sama zmienna użyta niżej jako column-gap w .panel-layout — odstęp
"karta Pytanie/Czas <-> środek" musi być identyczny jak odstęp
"karta Pytanie/Czas <-> krawędź panelu" (zgłoszone przez użytkownika
ze zrzutem ekranu: te dwie odległości wyglądały różnie), więc obie
reguły muszą czytać dokładnie tę samą wartość, nie dwie osobne liczby,
które przypadkiem miałyby się zgadzać. */
--panel-poziomy-odstep: clamp(20px, 4vw, 48px);
padding: 8px var(--panel-poziomy-odstep);
background: linear-gradient(180deg, var(--karta-2), var(--karta));
border-top: 3px solid var(--akcent2);
/* panel.html jawnie zeruje {% block chrome_bottom %} — po tej karcie nie
ma już żadnej stopki, więc domyślny .card margin-bottom:24px (pomyślany
jako odstęp OD KOLEJNEGO elementu niżej) tu jest czystą, niczym
nieuzasadnioną pustą przestrzenią na dole strony. Na ekranie, gdzie
liczy się każdy piksel wysokości (żeby zmieścić się bez przewijania),
to najtańsza możliwa oszczędność. */
margin-bottom: 0;
}
.panel-card .card-header-row { margin-bottom: 6px; }
/* h1 { margin-top: 0 } (globalna reguła) zeruje tylko górny margines —
domyślny, spory dolny margines przeglądarki (~0.67em) zostawał i, mimo że
wizualnie niewidoczny (h1 leży w .card-header-row z align-items:center),
nadal liczył się do wysokości tego wiersza flex, bo margines to część
"zewnętrznego" rozmiaru elementu. Zero tylko tutaj (nie globalnie dla h1)
— inne strony (Moje gry, Bank pytań...) mają zwykły, szerszy odstęp pod
tytułem i nie ma powodu go zabierać tam, gdzie wysokość nie jest wąskim
gardłem. */
.panel-card h1 { margin-bottom: 0; }
.panel-header-akcje { display: flex; align-items: center; gap: 12px; }
#panel-komunikat { margin: 4px 0 0; min-height: 1.2em; }
.panel-aktywacja {
text-align: center;
background: rgba(255, 182, 39, 0.12);
border: 1.5px solid rgba(255, 182, 39, 0.45);
border-radius: var(--radius);
padding: 12px 16px;
margin: 0 auto 12px;
max-width: 700px;
}
.panel-aktywacja p { margin: 0 0 8px; color: var(--akcent); }
.panel-aktywacja button { font-size: 1rem; padding: 9px 22px; }
/* Trzecia iteracja tego układu. Wcześniejsze wersje: jedna szeroka kolumna
(marnowała szerokość pełnoekranowego panelu), potem wąski sidebar z lewej
(pytanie+zegar razem) obok szerokiej kolumny głównej. Teraz: symetryczne
TRZY kolumny — pytanie z lewej, zegar z prawej, każda TEJ SAMEJ szerokości
(ten sam minmax(...)), kolumna główna (karty drużyn/formularze/sterowanie)
pośrodku. Karty boczne to teraz bezpośrednio dzieci .panel-layout (jedna
karta = jedna kolumna), bez dodatkowego wrappera .panel-sidebar, który
miał sens tylko gdy dwie karty dzieliły jedną kolumnę. */
.panel-layout {
display: grid;
grid-template-columns: minmax(200px, 280px) 1fr minmax(200px, 280px);
gap: 10px var(--panel-poziomy-odstep);
/* center (nie start) — karty "Pytanie" i "Pozostały czas" są krótsze niż
środkowa kolumna (karty drużyn + zgłoszenia + sterowanie), więc bez
tego "wisiały" przy górnej krawędzi zamiast być wyśrodkowane względem
niej. Środkowej kolumnie to nie przeszkadza — to ona wyznacza
wysokość wiersza, więc jej wyśrodkowanie względem samej siebie nic
nie zmienia. */
align-items: center;
}
.panel-sidebar-karta {
background: var(--karta-2);
border: 1px solid var(--granica);
border-radius: var(--radius);
padding: 14px 16px;
/* Bez tego siatka/flex nie pozwala karcie skurczyć się poniżej
"naturalnej" szerokości jej treści — a to właśnie ta naturalna
szerokość długiego, niełamiącego się słowa (patrz .haslo-podglad)
wypychała kartę poza jej własną ramkę. */
min-width: 0;
}
.panel-sidebar-karta p { margin: 4px 0; }
.panel-sidebar-etykieta {
color: var(--tekst-przygaszony);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
margin: 0 0 6px;
}
/* Kołowy wskaźnik pozostałego czasu — conic-gradient zamiast SVG/canvasu,
bo sam procent wystarczy do narysowania łuku, bez dodatkowej biblioteki.
--procent to UŁAMEK, który już minął (0 = pełne koło akcentu / cały czas
jeszcze przed drużyną, 100 = koło w całości "wypalone" do koloru tła) —
ustawiane z panel.js przy każdym odświeżeniu stanu. Pierścień (nie
wypełnione koło) przez ::before z tłem karty na wierzchu — prościej niż
mieszać dwa zagnieżdżone elementy. */
.panel-timer-karta { text-align: center; }
.panel-timer {
--procent: 0;
position: relative;
width: 88px;
height: 88px;
margin: 4px auto 0;
border-radius: 50%;
background: conic-gradient(var(--granica) calc(var(--procent) * 1%), var(--akcent) 0);
transition: background 0.3s linear;
}
.panel-timer::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
background: var(--karta-2);
}
.panel-timer span {
position: relative;
display: inline-block;
line-height: 88px;
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
font-size: 1.5rem;
color: var(--tekst);
}
.panel-timer-jednostka { font-size: 0.9rem !important; color: var(--tekst-przygaszony); margin-left: 2px; }
/* Ostatnie sekundy — pierścień i cyfry przechodzą na kolor błędu, żeby było
to widoczne kątem oka, nie tylko po przeczytaniu liczby. */
.panel-timer.panel-timer-malo { background-image: conic-gradient(var(--granica) calc(var(--procent) * 1%), var(--blad) 0); }
.panel-timer.panel-timer-malo span { color: var(--blad); }
.panel-glowna {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
min-width: 0;
}
@media (max-width: 900px) {
/* Poniżej 900px trzy kolumny nie mieszczą się wygodnie obok siebie —
wraca kolejność z dokumentu: karta pytania, potem główna treść, na
końcu karta zegara. */
.panel-layout { grid-template-columns: 1fr; }
}
/* Wyniki drużyn jako pozioma listwa kart (jak .tablica-druzyna na tablicy,
ten sam pomysł, tylko w kolorach panelu) zamiast pionowej tabeli-sidebara
— patrz uzasadnienie przy .panel-layout wyżej. Owija się na kilka
wierszy same, bez osobnego breakpointu, jeśli drużyn jest dużo. */
.panel-druzyny {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
width: 100%;
}
.panel-druzyna {
background: var(--karta-2);
border: 2px solid var(--granica);
border-radius: var(--radius);
padding: 7px 22px;
min-width: 140px;
text-align: center;
}
.panel-druzyna.aktywna { border-color: var(--akcent2); box-shadow: 0 0 0 1px var(--akcent2) inset; }
.panel-druzyna .nazwa { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.panel-druzyna .punkty {
display: block;
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
font-size: 1.7rem;
color: var(--akcent);
}
/* Konsola zgłoszeń na żywo — GŁÓWNY, najczęściej używany element całego
panelu podczas gry (dosłownie każda odpowiedź drużyny przechodzi przez
tę sekcję), więc dostała wyraźnie większe wymiary i większe wszystkie
elementy wewnątrz (pola, przyciski, etykiety — patrz reguły niżej) niż
reszta panelu. */
.panel-formularze-centrum {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0;
padding: 18px 32px;
background: var(--tlo);
border-radius: var(--radius);
width: 100%;
max-width: 760px;
}
.panel-formularze-centrum .formularz-panelu { max-width: 680px; }
.panel-formularze-centrum .formularz-panelu label { font-size: 1.05rem; }
.panel-formularze-centrum .hint { font-size: 1rem; }
.panel-formularze-centrum .input-litera,
.panel-formularze-centrum .input-haslo {
padding: 12px 22px;
font-size: 2.1rem;
border-width: 2.5px;
}
.panel-formularze-centrum .input-litera { width: 110px; }
.panel-formularze-centrum button { padding: 11px 28px; font-size: 1.15rem; }
/* Sekcja sterowania przebiegiem gry ("Następne pytanie"/"Zakończ grę",
"Powtórz grę") — POD konsolą zgłoszeń, jawnie odseparowana od niej
(kreskowana linia + własny odstęp), bo to inny rodzaj akcji: nie
sprawdzanie odpowiedzi, tylko sterowanie tym, co dzieje się z całą grą
dalej. */
.panel-sterowanie {
width: 100%;
margin-top: 2px;
padding-top: 8px;
border-top: 2px dashed var(--granica);
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.button-powtorz {
background: none;
border: 2px solid var(--akcent);
color: var(--akcent);
}
.button-powtorz:hover:not(:disabled) { background: var(--akcent); color: var(--buton-tekst); }
.button-powtorz:disabled { border-color: var(--granica); color: var(--tekst-przygaszony); }
/* Popup potwierdzenia w stylu appki (patrz panel.js: pokazPotwierdzenie) —
zamiast natywnego confirm() przeglądarki, żeby wyglądał spójnie z resztą
interfejsu zamiast jak systemowy komunikat. */
.modal-nakladka {
position: fixed;
inset: 0;
background: rgba(10, 12, 18, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
padding: 16px;
}
/* Reguły autora zawsze biją domyślny UA-owy `[hidden] { display: none }`
niezależnie od specyficzności — bez tej reguły `display: flex` powyżej
wygrywa i nakładka jest widoczna (i blokuje kliknięcia w całą stronę)
od razu po wczytaniu strony, zanim ktokolwiek kliknie "Powtórz grę". */
.modal-nakladka[hidden] {
display: none;
}
.modal-okno {
background: var(--karta-2);
border: 1px solid var(--granica);
border-radius: var(--radius);
padding: 24px;
max-width: 420px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-okno p { margin: 0 0 20px; font-size: 1.05rem; color: var(--tekst); }
.modal-przyciski { display: flex; justify-content: flex-end; gap: 10px; }
/* Okienko "Co nowego" po zalogowaniu (patrz base.html) — natywny