/* public/themes/bingo.css */
:root {
    /* Pastelowy żółto-zielony - jaśniejszy i cieplejszy niż mięta groups,
       żeby oba tryby zabawy dało się rozróżnić na pierwszy rzut oka. */
    --main-color: #e6f0c2;
    --light-color: #fbfdf2;
    /* Biel na tym zielonym daje kontrast 4.9:1, czyli powyżej progu 4.5:1
       dla zwykłego tekstu - podpisy na zajętych polach zostają czytelne. */
    --contrast-color: #4d7c0f;
    /* Ciepły akcent dla zachęty do wysłania linku. 5.9:1 na tle karty. */
    --accent-warm: #b45309;
    /* Własne pole - jasny żółto-zielony z ciemnym tekstem (14:1). Leży
       między prawie białym polem wolnym a ciemnozielonym cudzym, więc
       wszystkie trzy stany różnią się od siebie bez użycia czerwieni. */
    --accent-pick: #d9f99d;
    --accent-pick-text: #1a2e05;
    --accent-pick-border: #84cc16;
    /* Baner "BINGO!" - złoto pod ciemny tekst, kontrast 11:1. */
    --bingo-gold: #fbbf24;
    /* Obwódka pełnej linii. Pełna linia składa się wyłącznie z pól zajętych,
       więc obwódka leży zawsze albo na ciemnej zieleni cudzego pola (2.9:1),
       albo na jasnej zieleni własnego (13:1) - najciemniejsza zieleń palety
       broni się na obu, a plansza zostaje w jednej rodzinie kolorów.
       Złoto jest zarezerwowane dla banera "BINGO!". */
    --bingo-ring: #1a2e05;
}

body {
    background-color: var(--main-color) !important;
}

.quiz-container {
    border: 2px solid var(--main-color);
}

/* Na telefonie każdy piksel szerokości idzie na planszę: wspólna
   .quiz-container ma po 20 px paddingu na boki, a przy ekranie 375 px to
   40 px zjedzone przez marginesy karty. Schodzimy do 8 px i o tyle samo
   poszerzamy kartę, żeby jej zewnętrzna szerokość została bez zmian.
   Na desktopie plansza i tak zatrzymuje się na 460 px, więc tam nie
   ruszamy niczego. Reguła obejmuje wszystkie strony bingo, bo plansza
   jest zarówno na board.html, jak i w kreatorze. */
@media (max-width: 780px) {
    /* !important, bo motyw ładuje się PRZED global.css - przy tej samej
       specyficzności wygrałaby reguła z global.css. Tak samo rozwiązane są
       tu tło body i przyciski. */
    .quiz-container {
        width: calc(100% - 16px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

.btn-secondary,
.second-quiz-title,
.name-highlight {
    color: var(--contrast-color);
}

/* Wyróżnione słowo w nagłówku: zielone, z odręczną kreską pod spodem.
   Kreska to public/underline.png, ale użyty jako MASKA, a nie jako tło -
   plik jest pomarańczowy, a maska bierze z niego tylko kształt i wypełnia
   go kolorem tekstu. Dzięki temu podkreślenie zawsze trzyma kolor słowa
   i nie trzeba trzymać osobnego pliku na każdy kolor.
   Rozmiary w em, nie w px: nagłówek ma różną wielkość na telefonie
   i na desktopie, a kreska ma rosnąć razem z nim. */
/* Imię autora w nagłówku ("Bingo od: Magda") dziedziczy pomarańcz z
   global.css - tu ma być zielone, tak jak wyróżnione słowo obok. Dwie klasy
   biją jednoklasową regułę z global.css niezależnie od kolejności arkuszy. */
.main-quiz-title .name-highlight {
    color: var(--contrast-color);
}

.main-quiz-title .underlined {
    color: var(--contrast-color);
    position: relative;
    padding-bottom: 0.22em;
}

.main-quiz-title .underlined::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 0.3em;
    background-color: currentColor;
    -webkit-mask: url("/underline.png") no-repeat 50% 100% / 100% 100%;
    mask: url("/underline.png") no-repeat 50% 100% / 100% 100%;
}

.btn-small {
    background-color: var(--contrast-color) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--contrast-color), #84cc16) !important;
}

/* --- Pola do wpisania imienia (create.astro / play.astro) --- */
.content-box .styled-input {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid var(--main-color);
    font-size: 1rem;
    transition: border-color 0.15s;
}

.content-box .styled-input:focus {
    outline: none;
    border-color: var(--contrast-color);
}

/* --- Plansza 4x4 ---
   Siatka trzyma stałe cztery kolumny na każdej szerokości ekranu: plansza
   bingo czytelna jest tylko jako kwadrat, więc zwijanie jej do dwóch kolumn
   na telefonie zabrałoby jej sens (linie przestałyby być liniami).
   Zamiast tego kurczą się same komórki, a tekst skaluje się z vw. */
.bingo-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Pola stykają się bokami, jak na papierowej karcie bingo. Zamiast
       odstępów rozdziela je jednopikselowa linia: to po prostu tło planszy
       prześwitujące przez gap. Dzięki temu nic nie marnuje się na przerwy,
       a pola i tak są od siebie odcięte. */
    gap: 2px;
    background: #cbdd99;
    border: 2px solid #cbdd99;
    /* Zaokrąglony jest obrys całej planszy, nie każde pole z osobna -
       overflow przycina narożne komórki do tego kształtu. */
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 460px;
    /* Mniej z góry niż z dołu - nad planszą stoi już nagłówek albo akapit
       ze swoim własnym marginesem dolnym, więc odstępy się sumowały. */
    margin: 0.75rem auto 1.25rem;
}

.bingo-cell {
    /* Współczynnik dobrany do najwęższego realnego ekranu (320 px) - patrz
       komentarz przy .bingo-cell-text. */
    --cell-font: clamp(0.6rem, 3.33vw, 1.25rem);
    /* Mnożnik dobierany osobno dla każdego pola przez fitBoardText()
       w bingo-board.js: krótka cecha dostaje większe pismo, długa zostaje
       przy 1. Wartość bazowa musi być tu, a nie tylko w JS, żeby plansza
       wyglądała poprawnie także zanim skrypt zdąży ją zmierzyć. */
    --cell-scale: 1;
    aspect-ratio: 1;
    /* Punkt odniesienia dla ↻ w rogu (patrz .bingo-cell-reroll). */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    /* Oddech wokół tekstu; wielkość pisma dobiera się do tego, co zostaje
       w środku (patrz fitBoardText w bingo-board.js). */
    padding: 3px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    /* Bez animacji tła: wolne pole jest jasne, zajęte ciemnozielone, a
       płynne przejście między nimi prowadzi przez brudną zieleń.
       Wyróżnienia (najechanie, zaznaczenie, linia bingo) rysujemy cieniem
       wewnętrznym, bo ramka rozpychałaby pole i psuła siatkę. */
    transition: box-shadow 0.15s, transform 0.1s;
}

.bingo-cell-text {
    /* Rozmiar ograniczony najwęższym realnym ekranem (320 px): tam w komórce
       mieści się wiersz z imieniem plus cztery linie cechy dopiero przy 8 px.
       Na szerszych ekranach rośnie proporcjonalnie - przy 375 px to 12,5 px,
       na desktopie 20 px. Podnosząc współczynnik trzeba sprawdzić pulę cech
       na nowo, i to na zajętym polu, bo imię nad cechą zabiera całą linię. */
    font-size: calc(var(--cell-font) * var(--cell-scale));
    font-weight: 600;
    line-height: 1.1;
    /* Pojedyncze długie słowa (niemieckie złożenia, "zaskakującego",
       "ondertiteling") są przy tym rozmiarze pisma szersze niż komórka -
       bez tego wystawałyby poza kafelek i zostawały ucięte w połowie.
       Świadomie bez hyphens: auto - dzieliło słowa dla samego wypełnienia
       wiersza ("Eats pineap-ple on pizza"), choć zmieściłyby się w całości.
       Odkąd fitBoardText() dobiera wielkość pisma tak, żeby słowa mieściły
       się w całości, dzielenie jest już tylko ostatnią deską ratunku dla
       cechy, której nie da się zmieścić nawet w najmniejszym rozmiarze. */
    overflow-wrap: break-word;
    /* Bez tego napis jest elementem flex wyśrodkowanym w kolumnie, więc
       przyjmuje szerokość najdłuższego słowa i wychodzi poza komórkę -
       łamanie nie ma wtedy czego łamać, bo wiersz "mieści się" w samym
       sobie. Ustawienie szerokości na 100% przycina wiersz do kafelka. */
    width: 100%;
    /* Gdyby ktoś dodał dłuższą cechę, obcinamy ją zamiast rozpychać komórkę.
       Celowo bez -webkit-line-clamp: wymaga display: -webkit-box, a w tym
       trybie Chrome ignoruje overflow-wrap i długie słowa wychodziły poza
       kafelek. Zwykły blok z overflow: hidden obcina tak samo, a łamanie
       słów działa. */
    overflow: hidden;
}

.bingo-cell-name {
    font-size: clamp(0.5rem, 2.5vw, 0.72rem);
    font-weight: 700;
    /* Zajęte pole: imię stoi nad cechą i jest jej częścią ("Kasia / ma
       tatuaż"), więc dostaje ten sam rozmiar pisma. Na wolnym polu zostaje
       drobną podpowiedzią pod spodem - stąd rozróżnienie. */
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wolne pole - jasne, z ledwo widoczną ramką; podpis "wolne" przygaszony,
   żeby nie konkurował z samą cechą. */
.bingo-cell.is-free {
    background: var(--light-color);
    color: #1f2937;
}

.bingo-cell.is-free .bingo-cell-name {
    opacity: 0.45;
    font-weight: 500;
}

.bingo-cell.is-taken .bingo-cell-name {
    /* Imię skaluje się razem z cechą - razem tworzą jedno zdanie, więc
       rozjechanie się ich wielkości wyglądałoby przypadkowo. */
    font-size: calc(var(--cell-font) * var(--cell-scale));
    font-weight: 800;
}

/* Zajęte pole - wypełnione kolorem marki, imię nad cechą. */
.bingo-cell.is-taken {
    background: var(--contrast-color);
    color: #ffffff;
    cursor: default;
}

/* Własne pole jaśnieje zamiast ciemnieć: użytkownik znajduje siebie na
   planszy od razu, bez czytania wszystkich imion. */
.bingo-cell.is-mine {
    background: var(--accent-pick);
    color: var(--accent-pick-text);
    box-shadow: inset 0 0 0 2px var(--accent-pick-border);
}

.bingo-cell.is-free[role="button"] {
    cursor: pointer;
}

.bingo-cell.is-free[role="button"]:hover {
    box-shadow: inset 0 0 0 2px var(--contrast-color);
}

/* Obrys do środka - przy overflow: hidden na planszy obrys rysowany na
   zewnątrz zostałby przycięty na skrajnych polach. */
.bingo-cell.is-free[role="button"]:focus-visible {
    outline: 3px solid var(--contrast-color);
    outline-offset: -3px;
}

/* Zaznaczone, ale jeszcze niezatwierdzone - wyraźnie inne niż zajęte,
   bo dopiero przycisk poniżej przypieczętowuje wybór. */
.bingo-cell.is-selected {
    background: var(--accent-pick);
    color: var(--accent-pick-text);
    box-shadow: inset 0 0 0 2px var(--accent-pick-border);
    transform: scale(0.94);
}

.bingo-cell.is-selected .bingo-cell-name {
    opacity: 1;
    font-weight: 700;
}

/* Pełna linia - jedna ramka w jednym kolorze, dokładana do koloru pola:
   "kto tu jest" i "to jest linia" zostają dwiema osobnymi informacjami.
   Grubsza od zwykłej (3px zamiast 2px), bo tylko szerokość, a nie drugi
   kolor, daje jej widoczność na obu tłach zajętego pola. */
.bingo-cell.is-bingo {
    box-shadow: inset 0 0 0 3px var(--bingo-ring);
}

/* ↻ w rogu wolnego pola: wymienia jedną cechę, bez ruszania pozostałych.
   Leży NAD tekstem zamiast obok niego - komórka ma na telefonie niecałe
   90 px, więc każdy piksel oddany przyciskowi zabierałby go samej cesze.
   Tekst jest wyśrodkowany, czyli w rogu i tak zwykle nic nie stoi. */
.bingo-cell-reroll {
    position: absolute;
    top: 3px;
    /* inset-inline-end, nie right - po arabsku róg "na początku" jest z
       drugiej strony i przycisk sam przechodzi tam, gdzie trzeba. */
    inset-inline-end: 3px;
    /* Kółko obrysowuje samą strzałkę - to ono jest widoczne przy najechaniu,
       więc ↻ musi siedzieć dokładnie w jego środku. Pole trafienia palcem
       dokłada dopiero ::after poniżej. */
    width: clamp(18px, 4.8vw, 24px);
    height: clamp(18px, 4.8vw, 24px);
    font-size: clamp(13px, 3.6vw, 18px);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    /* Przygaszony, dopóki nikt go nie potrzebuje: ma być pod ręką, ale nie
       przekrzykiwać cechy, o którą w tej planszy chodzi. Bez chowania na
       stałe - na telefonie nie ma najechania kursorem, więc ukryty
       przycisk byłby po prostu nie do znalezienia. */
    opacity: 0.4;
    /* Poświata w kolorze pola: przy czterowierszowej cesze na wąskim ekranie
       tekst dochodzi pod sam narożnik i litery zaplatały się ze strzałką.
       Halo wycina wokół ↻ trochę wolnego miejsca, bez rysowania widocznego
       krążka, który ciążyłby na planszy. */
    text-shadow:
        0 0 3px var(--light-color),
        0 0 3px var(--light-color),
        0 0 2px var(--light-color);
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s, transform 0.15s;
}

/* Niewidoczne powiększenie pola trafienia do 24px (minimum z WCAG 2.5.8).
   Osobno od kółka, bo kółko widać przy najechaniu i musi obrysowywać samą
   strzałkę - gdyby to ono miało 24px, ↻ pływałoby w nim bez środka.
   Wyciągnięte dokładnie do krawędzi pola: dalej i tak przycięłoby je
   overflow: hidden planszy. */
.bingo-cell-reroll::after {
    content: "";
    position: absolute;
    inset: -3px;
}

/* Na zaznaczonym polu tło jest inne, więc i poświata musi być inna -
   inaczej wokół strzałki świeciłaby jasna plama na zielonym. */
.bingo-cell.is-selected .bingo-cell-reroll {
    text-shadow:
        0 0 3px var(--accent-pick),
        0 0 3px var(--accent-pick),
        0 0 2px var(--accent-pick);
}

.bingo-cell-reroll:hover,
.bingo-cell-reroll:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.bingo-cell-reroll:focus-visible {
    outline: 2px solid var(--contrast-color);
    outline-offset: 1px;
}

.bingo-cell-reroll:active {
    transform: rotate(180deg);
}

/* Na zaznaczonym polu tło jest ciemniejsze, więc przyciemnianie kółka
   nic by nie dało - rozjaśniamy. */
.bingo-cell.is-selected .bingo-cell-reroll:hover,
.bingo-cell.is-selected .bingo-cell-reroll:focus-visible {
    background: rgba(255, 255, 255, 0.35);
}

/* Krótkie mrugnięcie po wymianie cechy: przy 16 podobnych polach bez tego
   trudno wypatrzyć, które z nich się właśnie zmieniło. */
.bingo-cell.is-swapped .bingo-cell-text {
    animation: bingo-swap-in 0.28s ease-out;
}

@keyframes bingo-swap-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bingo-cell.is-swapped .bingo-cell-text { animation: none; }
    .bingo-cell-reroll:active { transform: none; }
}

#shuffleBtn {
    display: block;
    margin: 0 auto;
}

#confirmFieldBtn,
#toBoardBtn,
#startPlaying {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#confirmFieldBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Baner "BINGO!" (board.astro) --- */
.bingo-banner {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: var(--bingo-gold);
    color: #422006;
}

.bingo-banner-title {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
}

.bingo-banner-text {
    margin: 0;
    line-height: 1.5;
}

/* --- Zdanie o postępie planszy --- */
.board-status {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 0.5rem;
    line-height: 1.5;
}

/* Wysłanie linku jest jedyną rzeczą, którą autor ma tu zrobić, więc zdanie
   dostaje mocniejszy, ciepły akcent. */
.owner-share-prompt {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 1rem;
    line-height: 1.5;
    color: var(--accent-warm);
    font-weight: 700;
}

/* Nagłówek "Twoja plansza" nad planszą, gdy boks z linkiem stoi wyżej.
   Wspólna .section-title daje 10 px odstępu - tutaj przyciski społecznościowe
   tuż nad nim potrzebują wyraźniejszej przerwy. */
.board-heading {
    margin-top: 20px;
}

/* --- Blok "wyślij dalej" u gościa ---
   Gość dostaje go zaraz po zajęciu pola, jeszcze przed propozycją własnego
   bingo: to on przedłuża łańcuszek dalej niż "autor -> znajomy". */
.guest-share {
    text-align: center;
    margin-top: 1rem;
}

.guest-share-heading {
    margin: 0 0 1rem;
}

/* Propozycja własnego bingo to już zupełnie inny wątek niż wysłanie cudzej
   planszy dalej - bez wyraźnej przerwy oba bloki czytały się jak jedna
   ściana przycisków. Dwie klasy, bo global.css wczytuje się PÓŹNIEJ i przy
   równej wadze to jego .content-box ustawiałby margines. */
.content-box.your-turn {
    text-align: center;
    margin-top: 3rem;
}

/* Dwie klasy, bo bingo.css wczytuje się PRZED global.css - przy równej
   wadze wygrałaby tamtejsza reguła .btn-secondary i przycisk zostałby
   przyklejony do lewej. */
.guest-share .guest-share-copy {
    display: block;
    margin: 0.75rem auto 0;
}

/* --- Link powrotny na dół strony --- */
.back-link {
    color: var(--contrast-color);
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}