/*
 * Ekrany DOM sprzed sceny Pixi w stylu ekranu ładowania (PO 08.10.2026 22:36–22:45: „ekran aktualizacji nie jest
 * spójny z resztą gry”). Jeden arkusz dla DWÓCH ekranów:
 *   - powłoki startowej (`#powloka-start`, logika w powloka-start.js) — od 10.10.2026 statyczna klatka logo studia
 *     (sekcja na końcu arkusza), bez sceny ładowania,
 *   - ekranu aktualizacji (`VIEWS/UPDATE_SCREEN/updateScreen.ts`) — pobieranie paczki treści przed startem gry.
 *
 * Komponent `start-look` odwzorowuje geometrię `layoutLook()` z `VIEWS/LOADING_SCREEN/loadingLooks.ts` (te same
 * ułamki wysokości ekranu i te same pliki): logo w lewym górnym rogu, napis etapu nad liną, lina z węzłami co 10 %
 * i latarenką na końcu postępu, procent na prawo od liny, zwój pod liną. Dzięki temu przejście powłoka → ekran
 * ładowania Pixi nie skacze. Żadnej grafiki rysowanej w CSS: tło, lina, węzeł, latarenka, zwój i deska to pliki
 * z `assets/UI/Loading/looks/a/`, `assets/UI/Loading/dg/` i `assets/UI/Auth/dg-debowy-gosciniec/`.
 *
 * Kroje mają własne nazwy (`StartLuckiest`, `StartRice`), żeby nie przesłaniać `@font-face` z `game/index.css`,
 * który bundle dokłada później pod nazwami `LuckiestGuy` i `SpicyRice` (te same pliki).
 */

@font-face {
    font-family: StartLuckiest;
    font-display: swap;
    src:
        url('assets/Fonts/LuckiestGuy-Regular.woff2') format('woff2'),
        url('assets/Fonts/LuckiestGuy-Regular.woff') format('woff');
}

@font-face {
    font-family: StartRice;
    font-display: swap;
    src:
        url('assets/Fonts/EpicRice-Regular.woff2') format('woff2'),
        url('assets/Fonts/EpicRice-Regular.woff') format('woff');
}

html,
body {
    margin: 0;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
}

/* ── Komponent `start-look`: scena ekranu ładowania z liną ───────────────────────────────────────────────────── */

.start-look {
    /* Te same reguły co `layoutLook()` (loadingLooks.ts): h = wysokość ekranu (vh), w = szerokość (vw). */
    --pad: 3vh;
    --logo-h: clamp(64px, 22vh, 170px);
    /* Mniejszy niż poprzednio (było 34px) — orkiestrator 21.10 11:40: zwój ma zmieścić się cały na
       400×844 z safe-area dołu; mniejsza czcionka = mniej wierszy po zawinięciu = niższy `--scroll-h`. */
    --tip: clamp(16px, 4.2vh, 26px);
    --rope-h: clamp(18px, 6vh, 44px);
    --lantern-h: calc(var(--rope-h) * 2.1);
    /* Węższa niż poprzednio (było 68vw) — razem z `--percent-w` rząd liny+procentu mieścił się w 488 px
       na viewporcie 400 px, więc procent był ucięty przy prawej krawędzi (werdykt orkiestratora 11:40). */
    --rope-w: min(58vw, 900px);
    --percent: clamp(22px, 6vh, 36px);
    --percent-w: calc(var(--percent) * 2.3);
    --rope-gap: calc(var(--pad) * 1.2);
    --stage: clamp(18px, 5vh, 36px);
    --stack-w: min(92vw, 1150px);
    /* 2-3 linie (treść/transfer) na `--tip` × line-height 1,2 potrzebują ≥ 2,4-3,6×`--tip`; 3,8 daje zapas
       bez nadmiaru (mniejszy `--tip` już sam skraca wiersze — werdykt orkiestratora 11:40). */
    --scroll-h: max(13vh, calc(var(--tip) * 3.8));
    /* Okucie końca liny: 231 px z 204 px wysokości pliku `lina.webp`. */
    --rope-cap: calc(var(--rope-h) * 231 / 204);
    --knot-h: min(calc(var(--rope-h) * 1.25), calc(var(--rope-w) * 0.075 * 256 / 364));
    --rope-progress: 0;

    position: fixed;
    inset: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: #1b130d url('assets/UI/Loading/looks/a/tlo-karczma.webp') center / cover no-repeat;
    color: #fff1d3;
    font-family: StartLuckiest, LuckiestGuy, system-ui, sans-serif;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Wygląd „f” ekranu ładowania: kadr pobierania — ekran aktualizacji paczki treści. */
.start-look--download {
    background-image: url('assets/UI/Loading/looks/f/tlo-pobieranie.webp');
}

/* Napis „jak Wild Rift” (PO): duża jasna litera, ciemny obrys pod literą, cień — bez plamy pod napisem. */
.start-look__hero {
    margin: 0;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    -webkit-text-stroke: max(3px, 0.16em) #0b0908;
    paint-order: stroke fill;
    text-shadow: 0 max(2px, 0.08em) 3px rgba(0, 0, 0, 0.6);
}

.start-look__logo {
    position: absolute;
    top: calc(var(--pad) + var(--logo-h) * 0.2);
    left: max(env(safe-area-inset-left, 0px), calc(var(--pad) + var(--logo-h) * 0.26));
    height: var(--logo-h);
    width: auto;
    filter: drop-shadow(0 0 calc(var(--logo-h) * 0.08) rgba(255, 179, 71, 0.45));
}

.start-look__versions {
    position: absolute;
    top: max(var(--pad), env(safe-area-inset-top, 0px));
    right: max(var(--pad), env(safe-area-inset-right, 0px));
    max-width: 60vw;
    font-size: 20px;
    text-align: right;
}

/* Stos jednej kolumny flex z `gap` — orkiestrator 21.10 12:40: zero `position: absolute` dla tytułu,
   rzędu liny+procentu, zwoju i przycisku. Każdy element zajmuje swoją przestrzeń w normalnym przepływie,
   więc gdy rząd jest schowany (`display: none`, stan „choice”/błąd), `gap` sam zwalnia miejsce — bez
   ręcznej matematyki `--rope-cy`/`--scroll-bottom`, która w rundach 3-5 psuła sąsiada przy każdej poprawce. */
.start-look__stack {
    position: absolute;
    left: 50%;
    bottom: max(var(--pad), env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: var(--stack-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--pad) * 0.5);
}

.start-look__stage {
    font-size: var(--stage);
    color: #fff1d3;
}

.start-look__row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rope-gap);
    /* Szczelina na latarenkę (orkiestrator 22.10 01:05, runda 4): `.rope-bar__lantern` wisi na haku POD
       `.rope-bar` (position: absolute, top: 50% - rope-h*0,3, height: lantern-h = rope-h*2,1), więc jej
       dolna krawędź sięga 2,3×rope-h od góry rzędu, czyli 1,3×rope-h (0,619×lantern-h) POD własnym pudłem
       rzędu (rope-h wysokości). Runda 7 usunęła tę szczelinę razem z `--rope-cy`, co przy postępie ≥ 35 %
       dawało ok. 45 px nachodzenia na pierwszą linię zwoju. `padding-bottom` rezerwuje miejsce w przepływie
       flex (stos `.start-look__stack`), więc zwój startuje poniżej latarenki niezależnie od viewportu —
       0,65 zamiast wyliczonych 0,619 to mały zapas na kołysanie (`rope-lantern-swing`, ±4°, origin u góry). */
    padding-bottom: calc(var(--lantern-h) * 0.65);
}

.start-look__percent {
    width: var(--percent-w);
    font-size: var(--percent);
    color: #ffd076;
    text-align: left;
    white-space: nowrap;
}

/* Zwój porady (`zwoj-k3.webp`, 9-slice 60/140 na 2048×400) — tu niesie liczby pobierania i komunikaty. */
.start-look__scroll {
    width: 100%;
    /* `min-height`, nie `height`: linie treści/transferu/szczegółu CZASEM zawijają się na 2 wiersze na wąskim
       telefonie (np. „Przygotowuję pobieranie…”) — stała wysokość ucinała dolną linię mid-znak, nawet po
       podniesieniu `--scroll-h` (werdykt DA 10:01, drugi przebieg). Box rośnie do treści, nie odwrotnie. */
    min-height: var(--scroll-h);
    height: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--tip) * 0.3) calc(var(--scroll-h) * 0.35 + var(--pad));
    border-style: solid;
    border-width: 0;
    border-image: url('assets/UI/Loading/dg/zwoj-k3.webp') 60 140 fill / calc(var(--scroll-h) * 0.15)
        calc(var(--scroll-h) * 0.35) stretch;
}

.start-look__scroll--empty {
    visibility: hidden;
}

.start-look__text {
    margin: 0;
    font-family: StartRice, SpicyRice, system-ui, sans-serif;
    font-size: var(--tip);
    line-height: 1.2;
    color: #2b1608;
    white-space: pre-line;
}

/* Deska z motywu logowania (`deska-normal.png`, 9-slice 57/108 na 1024×222) — ten sam plik co `plankButton`.
   Kolejność pionowa (tytuł → rząd → zwój → deska) to teraz zwykły przepływ dziecka `.start-look__stack`
   (`gap`) — flex gwarantuje 0 wspólnych pikseli z sąsiadem niezależnie od stanu, bez osobnej wysokości
   deski dla zacięcia (orkiestrator 21.10 12:40: koniec ręcznej matematyki `--rope-cy`/`--scroll-bottom`). */
.start-look__buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: calc(var(--pad) * 1.5);
}

.start-look__plank {
    --plank-h: clamp(48px, 15vh, 76px);
    min-width: calc(var(--plank-h) * 3.9);
    height: var(--plank-h);
    padding: 0 calc(var(--plank-h) * 0.5);
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    border-image: url('assets/UI/Auth/dg-debowy-gosciniec/deska-normal.png') 57 108 fill /
        calc(var(--plank-h) * 57 / 222) calc(var(--plank-h) * 108 / 222) stretch;
    background: none;
    color: #fff1d3;
    font-family: inherit;
    font-size: calc(var(--plank-h) * 0.42);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.start-look__plank:active {
    border-image-source: url('assets/UI/Auth/dg-debowy-gosciniec/deska-wcisnieta.png');
}

.start-look__plank--secondary {
    color: #f1e2bf;
    filter: brightness(0.85);
}

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

/* ── Lina postępu: `lina.webp` (okucia), `lina-kafel.webp` (środek), `wezel.webp`, `latarenka.webp` ───────────── */

.rope-bar {
    position: relative;
    width: var(--rope-w);
    height: var(--rope-h);
}

.rope-bar__layer {
    position: absolute;
    inset: 0;
}

/* Niezaładowana część: ciemniejsza konopia (w Pixi `tint` 0x5c4a3a), nie szara plama. */
.rope-bar__layer--dim,
.rope-bar__knot {
    filter: brightness(0.42) sepia(0.35);
}

.rope-bar__layer--lit {
    clip-path: inset(0 calc(100% - var(--rope-cap) - (100% - 2 * var(--rope-cap)) * var(--rope-progress)) 0 0);
}

.rope-bar__cap,
.rope-bar__mid {
    position: absolute;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.rope-bar__cap--left {
    left: 0;
    width: var(--rope-cap);
    background-image: url('assets/UI/Loading/looks/a/lina.webp');
    background-position: left center;
}

.rope-bar__cap--right {
    right: 0;
    width: var(--rope-cap);
    background-image: url('assets/UI/Loading/looks/a/lina.webp');
    background-position: right center;
}

.rope-bar__mid {
    left: var(--rope-cap);
    right: var(--rope-cap);
    background-image: url('assets/UI/Loading/looks/a/lina-kafel.webp');
    background-repeat: repeat-x;
}

.rope-bar__knot {
    position: absolute;
    top: 50%;
    height: var(--knot-h);
    aspect-ratio: 364 / 256;
    background: url('assets/UI/Loading/looks/a/wezel.webp') center / contain no-repeat;
    transform: translate(-50%, -50%);
}

/* Węzły co 10 % środka liny (jak `buildA`): pozycje w CSS, bez stylu w HTML. */
.rope-bar__knot:nth-of-type(1) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.1);
}
.rope-bar__knot:nth-of-type(2) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.2);
}
.rope-bar__knot:nth-of-type(3) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.3);
}
.rope-bar__knot:nth-of-type(4) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.4);
}
.rope-bar__knot:nth-of-type(5) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.5);
}
.rope-bar__knot:nth-of-type(6) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.6);
}
.rope-bar__knot:nth-of-type(7) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.7);
}
.rope-bar__knot:nth-of-type(8) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.8);
}
.rope-bar__knot:nth-of-type(9) {
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * 0.9);
}

/* Węzeł zawiązany (za latarenką): jasny, ze złotą poświatą z własnego kształtu. */
.rope-bar__knot--lit {
    filter: drop-shadow(0 0 calc(var(--knot-h) * 0.3) rgba(255, 179, 71, 0.85));
}

/* Latarenka na haku liny, na końcu postępu; kołysze się, płomień świeci (poświata z kształtu pliku). */
.rope-bar__lantern {
    position: absolute;
    top: calc(50% - var(--rope-h) * 0.3);
    left: calc(var(--rope-cap) + (100% - 2 * var(--rope-cap)) * var(--rope-progress));
    height: var(--lantern-h);
    aspect-ratio: 206 / 384;
    margin-left: calc(var(--lantern-h) * 206 / 384 / -2);
    background: url('assets/UI/Loading/looks/a/latarenka.webp') center top / contain no-repeat;
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 calc(var(--lantern-h) * 0.25) rgba(255, 179, 71, 0.9));
    animation: rope-lantern-swing 3.2s ease-in-out infinite;
    transition: left 180ms linear;
}

@keyframes rope-lantern-swing {
    0%,
    100% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(4deg);
    }
}

/*
 * Animacja nieokreślona (uwaga 1265, PO 21.10 03:05): zanim przyjdzie pierwszy żywy procent z wtyczki,
 * gracz musi widzieć RUCH, nie zamrożone 0 %. Pasek liny pulsuje krótkim jasnym odcinkiem przy lewej
 * okuciu, niezależnie od `--rope-progress` (który w tym stanie i tak stoi na 0).
 */
.rope-bar--indeterminate .rope-bar__layer--lit {
    animation: rope-bar-indeterminate 1.6s ease-in-out infinite;
}

@keyframes rope-bar-indeterminate {
    0% {
        clip-path: inset(0 calc(100% - var(--rope-cap) - (100% - 2 * var(--rope-cap)) * 0.06) 0 0);
        opacity: 0.5;
    }
    50% {
        clip-path: inset(0 calc(100% - var(--rope-cap) - (100% - 2 * var(--rope-cap)) * 0.24) 0 0);
        opacity: 1;
    }
    100% {
        clip-path: inset(0 calc(100% - var(--rope-cap) - (100% - 2 * var(--rope-cap)) * 0.06) 0 0);
        opacity: 0.5;
    }
}

/* ── Powłoka startowa: statyczna klatka logo studia ─────────────────────────────────────────────────────────── */

/*
 * Orkiestrator 10.10.2026 05:47 (uwaga PO 01:57): przed logo studia gracz nie może widzieć napisu o pobieraniu.
 * Powłoka to klatka złożonego znaku z bumpera (`VIEWS/WELCOME_SCREEN/studioBumper.ts`) w TEJ SAMEJ geometrii:
 * godło = 0,42 krótszego boku ekranu, na środku; nazwa = 0,34 szerokości ekranu, jej środek 0,16 wysokości godła pod
 * jego dolną krawędzią; obie sylwetki (białe PNG) w atramencie `BUMPER_INK` #0b0b0c przez maskę, na białej kartce.
 * Ekran Pixi liczy się z `document.documentElement.client*`, a tu z 100vw/100vh tego samego okna (bez przewijania).
 */
.powloka-logo {
    --k: min(100vw, 100vh);
    --znak-h: calc(var(--k) * 0.42);
    --znak-w: calc(var(--znak-h) * 872 / 1400);
    --nazwa-w: calc(100vw * 0.34);
    --nazwa-h: calc(var(--nazwa-w) * 75 / 1600);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
}

.powloka-logo__znak,
.powloka-logo__nazwa {
    position: absolute;
    background: #0b0b0c;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.powloka-logo__znak {
    left: calc(50vw - var(--znak-w) / 2);
    top: calc(50vh - var(--znak-h) / 2);
    width: var(--znak-w);
    height: var(--znak-h);
    -webkit-mask-image: url('assets/UI/Logo/vkp/vkp-mark.png');
    mask-image: url('assets/UI/Logo/vkp/vkp-mark.png');
}

.powloka-logo__nazwa {
    left: calc(50vw - var(--nazwa-w) / 2);
    top: calc(50vh + var(--znak-h) * 0.66 - var(--nazwa-h) / 2);
    width: var(--nazwa-w);
    height: var(--nazwa-h);
    -webkit-mask-image: url('assets/UI/Logo/vkp/vkp-wordmark.png');
    mask-image: url('assets/UI/Logo/vkp/vkp-wordmark.png');
}

/* Cienki pasek przy dolnej krawędzi tylko na czas pobierania bundla — bez słów. */
.powloka-logo__pasek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    height: 3px;
    overflow: hidden;
    opacity: 0;
    background: rgba(11, 11, 12, 0.08);
    transition: opacity 200ms ease-out;
}

.powloka--nieokreslony .powloka-logo__pasek {
    opacity: 1;
}

.powloka-logo__postep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28%;
    width: 28%;
    background: rgba(11, 11, 12, 0.45);
}

.powloka--nieokreslony .powloka-logo__postep {
    animation: powloka-pasek 1.6s ease-in-out infinite;
}

@keyframes powloka-pasek {
    from {
        left: -28%;
    }
    to {
        left: 100%;
    }
}

/* Napisy tylko w sytuacjach wyjątkowych (wolne łącze po 25 s, błąd): pod nazwą studia, puste się nie rysują. */
.powloka-logo__komunikat {
    position: absolute;
    left: 50%;
    bottom: calc(5vh + env(safe-area-inset-bottom, 0px));
    width: min(84vw, 760px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6vh;
    text-align: center;
}

.powloka-logo .powloka__status,
.powloka-logo .powloka__detail {
    margin: 0;
    color: #0b0b0c;
    font-family: StartRice, sans-serif;
    font-size: clamp(14px, 4.2vh, 24px);
    line-height: 1.25;
}

.powloka-logo .powloka__status:empty,
.powloka-logo .powloka__detail:empty {
    display: none;
}

.powloka {
    z-index: 8000;
    opacity: 1;
    transition: opacity 200ms ease-out;
}

.powloka--znika {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .powloka,
    .rope-bar__lantern {
        transition: none;
    }
    .rope-bar__lantern,
    .powloka--nieokreslony .powloka-logo__postep {
        animation: none;
    }
}