/*
 * Jesse James — główny stylesheet
 *
 * Struktura pliku:
 * 01. Zmienne, reset i bazowe elementy
 * 02. Scena hero: tło, parallax, chmury, pył
 * 03. Logo, komunikat startowy i elementy interfejsu
 * 04. Bazowe komponenty menu, sociali, audio i panelu
 * 05. Animacje oraz responsive bazowe
 * 06. Aktualny layout: pionowe menu po lewej i logo w prawym dolnym rogu
 * 07. Finalny wyglÄ…d kartki/panelu
 * 08. Finalny system ikon menu i etykiet
 * 09. Social media, audio, privacy gate
 * 10. Końcowe poprawki mobile
 *
 * Uwaga: plik zachowuje historyczne sekcje zaleĹĽne od kaskady CSS.
 * Przy dalszym rozwoju dopisujemy nowe reguły w odpowiedniej sekcji finalnej,
 * a większe usuwanie legacy robimy wyłącznie po porównaniu wizualnym.
 */

/* 00. Lokalne fonty */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 01. Zmienne, reset i bazowe elementy */
:root {
    --cream: #f6dfb7;
    --paper: #f1c98e;
    --gold: #e4a95d;
    --gold-deep: #a7642c;
    --ember: #db613c;
    --rose: #c64d73;
    --burgundy: #581a25;
    --ink: #17070b;
    --black: #090507;
    --smoke: rgba(246, 221, 186, .42);

    --cloud-back-duration: 104s;
    --cloud-front-duration: 74s;
    --cloud-back-opacity: .42;
    --cloud-front-opacity: .34;
    --haze-duration: 16s;
    --sun-glow-duration: 13s;
    --birds-flight-duration: 96s;
    --birds-opacity: .52;
    --parallax-strength: .72;
    --smoke-speed: 6.6s;
    --dust-opacity: .28;
    --glow-strength: .54;
    --hero-pad-x: clamp(16px, 3vw, 56px);
    --menu-item-size: clamp(86px, 7.8vw, 126px);
    --contact-item-width: clamp(128px, 12vw, 194px);
    --rail-height: clamp(92px, 13.8vh, 142px);
    --dock-bottom: clamp(18px, 3.2vh, 42px);
    --safe-hero-top: clamp(12px, 2.2vh, 24px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ink);
    color: var(--cream);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jj-page { min-height: 100vh; overflow-x: clip; }

/* 02. Scena hero: tło, parallax, chmury, pył */
.jj-hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    max-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    padding: var(--safe-hero-top) var(--hero-pad-x) calc(var(--rail-height) + var(--dock-bottom) + 10px);
    background: #250911;
}

.scene,
.layer,
.parallax,
.cloud-drift,
.birds-flight,
.dust-field {
    position: absolute;
    inset: 0;
}
.scene {
    z-index: -5;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 147, 67, .38), transparent 24%),
        linear-gradient(180deg, #431120 0%, #94341f 38%, #2b0c12 100%);
}
.layer {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    user-select: none;
}
.layer-base {
    background-image:
        linear-gradient(to bottom, rgba(68, 11, 23, .10), rgba(210, 81, 40, .08) 48%, rgba(19, 5, 7, .10)),
        url('../img/western-base.webp');
    filter: saturate(1.12) contrast(1.04);
}
.layer-sun {
    z-index: 1;
    opacity: var(--glow-strength);
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 197, 94, .58) 0 5.5%, rgba(238, 112, 55, .24) 13%, transparent 30%),
        radial-gradient(circle at 50% 52%, rgba(255, 87, 47, .14), transparent 34%);
    mix-blend-mode: screen;
    animation: sunsetPulse var(--sun-glow-duration) ease-in-out infinite alternate;
}
.cloud-drift { z-index: 3; pointer-events: none; will-change: transform; }
.cloud-drift-back { animation: skyDriftBack var(--cloud-back-duration) cubic-bezier(.42, 0, .58, 1) infinite alternate; animation-delay: -31s; }
.cloud-drift-front { z-index: 4; animation: skyDriftFront var(--cloud-front-duration) cubic-bezier(.37, 0, .63, 1) infinite alternate; animation-delay: -17s; }
.parallax { will-change: transform; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.layer-clouds {
    inset: -6% -18%;
    background-position: center top;
    background-size: auto 74%;
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.94) 59%, rgba(0,0,0,.58) 68%, transparent 80%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.94) 59%, rgba(0,0,0,.58) 68%, transparent 80%);
}
.layer-clouds-back {
    background-image: url('../img/western-clouds-back.webp');
    opacity: var(--cloud-back-opacity);
    transform: scale(1.055);
    background-size: cover;
    background-position: center top;
}
.layer-clouds-front {
    background-image: url('../img/western-clouds-front.webp');
    opacity: var(--cloud-front-opacity);
    transform: scale(1.085);
    background-size: cover;
    background-position: center top;
    animation: cloudFrontLife 42s ease-in-out infinite alternate;
}
.parallax-haze { z-index: 2; }
.layer-haze {
    background-image: url('../img/western-haze.webp');
    opacity: .45;
    mix-blend-mode: screen;
    will-change: opacity, transform;
    -webkit-mask-image: linear-gradient(to bottom, transparent 31%, rgba(0,0,0,.32) 43%, #000 53%, rgba(0,0,0,.55) 64%, transparent 76%);
    mask-image: linear-gradient(to bottom, transparent 31%, rgba(0,0,0,.32) 43%, #000 53%, rgba(0,0,0,.55) 64%, transparent 76%);
    animation: breatheHaze var(--haze-duration) ease-in-out infinite;
}
.layer-terrain {
    z-index: 8;
    background-image: url('../img/western-terrain.webp');
    filter: contrast(1.05) saturate(1.06);
}
.layer-foreground-shadow {
    z-index: 11;
    background:
        linear-gradient(to top, rgba(8,2,3,.88) 0%, rgba(14,4,5,.46) 16%, transparent 41%),
        radial-gradient(ellipse at 50% 91%, rgba(9,2,3,.7), transparent 36%);
}
.layer-vignette {
    z-index: 25;
    background:
        radial-gradient(circle at 50% 48%, transparent 31%, rgba(31, 4, 10, .12) 62%, rgba(5, 1, 3, .70) 100%),
        linear-gradient(to bottom, rgba(15, 3, 9, .18), transparent 28%, rgba(8, 2, 3, .34));
}
.layer-grain {
    z-index: 26;
    opacity: .075;
    background-image:
        repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.20) 0 .6px, transparent .8px 3px),
        repeating-linear-gradient(90deg, rgba(30,0,0,.16) 0 1px, transparent 1px 4px);
    background-size: 7px 7px, 11px 11px;
    mix-blend-mode: soft-light;
}
.dust-field { z-index: 10; pointer-events: none; opacity: var(--dust-opacity); overflow: hidden; }
.dust-field::before,
.dust-field::after {
    content: "";
    position: absolute;
    width: 42vmax;
    height: 42vmax;
    left: 8%;
    bottom: -26vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239,178,103,.22), transparent 62%);
    filter: blur(20px);
    animation: dustFloat 18s ease-in-out infinite alternate;
}
.dust-field::after { left: auto; right: 4%; animation-duration: 23s; animation-delay: -6s; opacity: .7; }
.dust-field-front { z-index: 18; opacity: .22; }

/* Wariant sceny Smokestown. Pełny kadr pozostaje w tle jako bezpieczny fallback,
   a przezroczyste warstwy zachowują istniejący ruch chmur i parallax. */
.jj-hero[data-scene="smokestown"] .scene {
    background:
        radial-gradient(circle at 67% 31%, rgba(215, 146, 104, .28), transparent 27%),
        linear-gradient(180deg, #382333 0%, #8e5b58 56%, #24151f 100%);
}
.jj-hero[data-scene="smokestown-fallback"] .scene {
    background: #351a24 url('../img/smokestown-base.webp') center center / cover no-repeat;
}
.jj-hero[data-scene="smokestown-fallback"] .scene > * { visibility: hidden; }
.jj-hero[data-scene="smokestown"] .layer-base {
    background-image: url('../img/smokestown-sun-sky.webp');
    filter: saturate(1.04) contrast(1.02);
}
.jj-hero[data-scene="smokestown"] .layer-sun {
    opacity: .22;
    background: radial-gradient(circle at 67% 31%, rgba(255, 209, 126, .28) 0 5%, transparent 20%);
}
.jj-hero[data-scene="smokestown"] .layer-clouds {
    inset: 0;
    background-position: center center;
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
}
.jj-hero[data-scene="smokestown"] .layer-clouds-back {
    background-image: url('../img/smokestown-cloud-back.webp');
    opacity: .72;
    transform: scale(1.035);
}
.jj-hero[data-scene="smokestown"] .layer-clouds-front {
    background-image: url('../img/smokestown-cloud-front.webp');
    opacity: .82;
    transform: scale(1.055);
}
.jj-hero[data-scene="smokestown"] .layer-haze {
    background-image: none;
    opacity: .28;
    background: radial-gradient(ellipse at 55% 55%, rgba(233, 173, 131, .32), transparent 48%);
    -webkit-mask-image: none;
    mask-image: none;
}
.jj-hero[data-scene="smokestown"] .layer-terrain {
    background-image: url('../img/smokestown-terrain.webp');
    filter: contrast(1.03) saturate(1.03);
}
.jj-hero[data-scene="smokestown"] .layer-foreground-shadow {
    background:
        linear-gradient(to top, rgba(8, 3, 7, .82) 0%, rgba(13, 5, 9, .30) 17%, transparent 38%),
        radial-gradient(ellipse at 50% 94%, rgba(9, 3, 6, .55), transparent 42%);
}
.jj-hero[data-scene="smokestown"] .layer-vignette {
    background:
        radial-gradient(circle at 50% 46%, transparent 35%, rgba(20, 6, 13, .10) 66%, rgba(5, 1, 3, .68) 100%),
        linear-gradient(to bottom, rgba(12, 4, 10, .12), transparent 32%, rgba(7, 2, 5, .27));
}

/* Selektor bohaterów Bletek: wybrana postać centralna, pozostałe po bokach. */
.character-selector {
    position: absolute;
    z-index: 43;
    inset: clamp(90px, 13vh, 145px) clamp(42px, 5vw, 90px) calc(var(--rail-height) + var(--dock-bottom) - 3px);
    display: none;
    pointer-events: none;
}
.jj-hero.is-bletki-scene .character-selector { display: block; }
.character-selector[aria-hidden="true"] { visibility: hidden; }
.character-selector-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: pan-y;
}
.character-selector-list {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.character-selector-item {
    --cast-scale: 1;
    position: absolute;
    bottom: 0;
    width: clamp(230px, 27vw, 430px);
    height: min(69vh, 690px);
    padding: 0;
    border: 0;
    color: #ffe5ad;
    background: none;
    filter: drop-shadow(0 19px 15px rgba(8, 2, 5, .52));
    transform: translate3d(0, 0, 0) scale(var(--cast-scale));
    transform-origin: center bottom;
    transition: transform 320ms cubic-bezier(.2, .75, .3, 1), filter 240ms ease, opacity 220ms ease;
    pointer-events: auto;
    cursor: pointer;
}
.character-selector-portrait {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    cursor: pointer;
}
.character-selector-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    -webkit-user-drag: none;
    transition: filter 220ms ease;
}
.character-selector-item {
    left: 50%;
    bottom: 0;
    z-index: 1;
    width: clamp(230px, 25vw, 390px);
    height: min(65vh, 650px);
    opacity: .62;
    filter: saturate(.74) brightness(.78) drop-shadow(0 18px 14px rgba(8, 2, 5, .5));
    transform: translate3d(-50%, 4%, 0) translateX(calc(var(--character-offset) * clamp(250px, 27vw, 480px))) scale(.78);
}
.character-selector-item[data-character-id="tom-carter"] {
    /* Tom ma więcej przezroczystego marginesu po bokach — kompensacja kadru. */
    width: clamp(270px, 29vw, 450px);
}
.character-selector-item[data-character-id="tom-carter"] .character-selector-portrait img {
    transform: scale(1.08);
    transform-origin: center bottom;
}
.character-selector-item[data-selected="true"] {
    z-index: 4;
    opacity: 1;
    filter:
        saturate(1.08)
        contrast(1.03)
        drop-shadow(2px 0 0 rgba(255, 204, 111, .78))
        drop-shadow(-2px 0 0 rgba(91, 22, 25, .8))
        drop-shadow(0 22px 17px rgba(8, 2, 5, .58));
    transform: translate3d(-50%, 2.5%, 0) scale(1.03);
}
.character-selector-arrow {
    position: absolute;
    z-index: 8;
    top: 52%;
    width: clamp(68px, 5vw, 84px);
    height: clamp(68px, 5vw, 84px);
    border: 0;
    border-radius: 50%;
    color: transparent;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
    font-size: 0;
    pointer-events: auto;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}
.character-selector-arrow-prev {
    left: max(calc(var(--side-menu-hit-width) + 10px), 2vw);
    background-image: url('../img/przycisk-zmiany-bohatera-lewo.webp');
}
.character-selector-arrow-next {
    right: 1vw;
    background-image: url('../img/przycisk-zmiany-bohatera-prawo.webp');
}
.character-selector-arrow > span { visibility: hidden; }
.character-selector-arrow:disabled { opacity: .28; cursor: default; }
.character-selector-arrow:not(:disabled):hover { transform: translateY(-50%) scale(1.08); filter: brightness(1.16); }

.character-selector-story {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 50%;
    width: min(390px, 31vw);
    color: #ffe9bb;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
}
.character-selector-bubble {
    position: relative;
    margin: 0 auto 10px;
    padding: 15px 22px;
    border: 2px solid rgba(78, 30, 27, .92);
    border-radius: 48% 52% 46% 54% / 54% 48% 52% 46%;
    color: #321017;
    background:
        radial-gradient(ellipse at 28% 24%, rgba(255, 250, 224, .9), transparent 38%),
        linear-gradient(155deg, rgba(248, 226, 176, .98), rgba(202, 157, 89, .96));
    box-shadow:
        inset 0 0 18px rgba(104, 53, 27, .18),
        3px 5px 0 rgba(53, 16, 20, .72),
        0 15px 30px rgba(8, 2, 5, .34);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.84rem, 1vw, 1.02rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    transform: translate3d(-8px, 10px, 0) scale(.72) rotate(-2deg);
    transform-origin: 25% 100%;
    transition: opacity 220ms ease, transform 420ms cubic-bezier(.2, .8, .3, 1.18);
}
.character-selector.is-bubble-ready .character-selector-bubble {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
}
.character-selector-bubble p {
    margin: 0;
    opacity: 0;
    transition: opacity 180ms ease;
}
.character-selector.is-speech-ready .character-selector-bubble p { opacity: 1; }
.character-selector-enter {
    min-height: 44px;
    margin-top: 9px;
    padding: 9px 18px;
    border: 2px solid #f2ca77;
    border-radius: 5px;
    color: #2d0d13;
    background: linear-gradient(180deg, #f4d58f, #b96b30);
    box-shadow: 0 4px 0 #4b1918, 0 9px 20px rgba(5, 1, 3, .4);
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    pointer-events: auto;
    cursor: pointer;
}
.character-selector-enter:disabled { opacity: .62; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .character-selector-item:not([data-selected="true"]):hover { opacity: .82; filter: saturate(.9) brightness(.91) drop-shadow(0 20px 15px rgba(8, 2, 5, .52)); }
    .character-selector-enter:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-2px); }
}
.character-selector-portrait:focus-visible,
.character-selector-arrow:focus-visible,
.character-selector-enter:focus-visible {
    outline: 3px solid #fff0b4;
    outline-offset: 4px;
}

/* Zachowujemy poprzednią scenę podczas lazy-loadu, bez pustej klatki. */
.jj-hero.is-scene-loading .scene { cursor: progress; }

@media (max-width: 1400px) {
    .character-selector-item {
        width: clamp(215px, 24vw, 340px);
        transform: translate3d(-50%, 5%, 0) translateX(calc(var(--character-offset) * clamp(215px, 25vw, 350px))) scale(.76);
    }
    .character-selector-item[data-selected="true"] { transform: translate3d(-50%, 3%, 0) scale(1); }
    .character-selector-story { width: min(350px, 30vw); }
}

@media (max-width: 1120px) {
    .character-selector { inset-inline: 18px; }
    .character-selector-item {
        width: clamp(200px, 28vw, 300px);
        transform: translate3d(-50%, 7%, 0) translateX(calc(var(--character-offset) * clamp(180px, 25vw, 275px))) scale(.72);
    }
    .character-selector-item[data-selected="true"] { transform: translate3d(-50%, 4%, 0) scale(.96); }
    .character-selector-story { width: min(310px, 31vw); }
}

@media (max-width: 760px) {
    .character-selector {
        inset: clamp(76px, 11vh, 96px) 0 calc(var(--rail-height) + var(--dock-bottom) - 8px);
        overflow: hidden;
    }
    .character-selector-stage { left: var(--side-menu-hit-width); }
    .character-selector-item {
        width: min(52vw, 270px);
        height: min(56vh, 500px);
        transform: translate3d(-50%, 8%, 0) translateX(calc(var(--character-offset) * 38vw)) scale(.68);
    }
    .character-selector-item[data-selected="true"] { transform: translate3d(-50%, 6%, 0) scale(.93); }
    .character-selector-story {
        top: 0;
        left: calc(var(--side-menu-hit-width) + ((100% - var(--side-menu-hit-width)) / 2));
        width: min(58vw, 270px);
    }
    .character-selector-bubble { padding: 10px 12px; font-size: .75rem; }
    .character-selector-enter { min-height: 42px; margin-top: 6px; padding: 7px 11px; font-size: .67rem; }
    .character-selector-arrow { top: 56%; width: 54px; height: 54px; font-size: 2.8rem; }
    .character-selector-arrow-prev { left: calc(var(--side-menu-hit-width) + 4px); }
    .character-selector-arrow-next { right: 4px; }

    .jj-hero[data-scene="smokestown"] .scene,
    .jj-hero[data-scene="smokestown"] .layer-base,
    .jj-hero[data-scene="smokestown"] .layer-clouds,
    .jj-hero[data-scene="smokestown"] .layer-terrain {
        background-position: 52% center;
        background-size: auto 100%;
    }

    .jj-hero[data-scene="smokestown"] .layer-clouds-back { transform: scale(1.025); }
    .jj-hero[data-scene="smokestown"] .layer-clouds-front { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .character-selector-item,
    .character-selector-portrait img,
    .character-selector-arrow,
    .character-selector-enter,
    .character-selector-bubble,
    .character-selector-bubble p { transition: none !important; }
}

@media (max-width: 420px) {
    .character-selector-item {
        width: min(55vw, 235px);
        transform: translate3d(-50%, 9%, 0) translateX(calc(var(--character-offset) * 37vw)) scale(.64);
    }
    .character-selector-item[data-selected="true"] { transform: translate3d(-50%, 7%, 0) scale(.9); }
    .character-selector-story { width: min(57vw, 235px); }
    .character-selector-bubble { font-size: .68rem; line-height: 1.25; }
    .character-selector-arrow { width: 50px; height: 50px; font-size: 2.5rem; }

    .jj-hero[data-scene="smokestown"] .scene,
    .jj-hero[data-scene="smokestown"] .layer-base,
    .jj-hero[data-scene="smokestown"] .layer-clouds,
    .jj-hero[data-scene="smokestown"] .layer-terrain {
        background-position: 54% center;
    }
}

/* Bletki: trzy rozłączne strefy — wypowiedź, portret, wejście do historii. */
.character-selector {
    --cast-caption-height: 78px;
    --cast-speech-height: 126px;
    --cast-center: 50%;
    --speech-tail-x: 58%;
    --speech-paper: #efd39d;
    --speech-ink: #321017;
    --cast-gold: #e7b959;
    overflow: visible;
}
.character-selector[data-active-character="tom-carter"] { --speech-tail-x: 54%; }
.character-selector[data-active-character="rose"] { --speech-tail-x: 62%; }
.character-selector .character-selector-item[data-character-id="tom-carter"] .character-selector-portrait img {
    transform: none;
}
.character-selector .character-selector-stage {
    top: var(--cast-speech-height);
    bottom: var(--cast-caption-height);
}
.character-selector .character-selector-item {
    height: 100%;
    max-height: 650px;
    transform-origin: center bottom;
}
.character-selector .character-selector-story {
    top: 0;
    left: var(--cast-center);
    width: min(340px, 76%);
    height: var(--cast-speech-height);
    display: flex;
    align-items: flex-end;
    padding-bottom: 32px;
}
.character-selector .character-selector-bubble {
    width: 100%;
    margin: 0;
    padding: 14px 22px;
    border: 1px solid #71452b;
    border-radius: 24px 30px 22px 28px;
    color: var(--speech-ink);
    background: linear-gradient(150deg, #fff0cc, var(--speech-paper));
    box-shadow: inset 0 0 0 3px rgba(255, 250, 224, .35), 0 5px 14px rgba(8, 2, 5, .35);
    font-size: .9rem;
    line-height: 1.4;
    text-wrap: pretty;
    min-height: 84px;
    display: grid;
    align-items: center;
    transform-origin: var(--speech-tail-x) 100%;
}
.character-selector .character-selector-bubble::after {
    content: "";
    position: absolute;
    top: calc(100% - 2px);
    left: var(--speech-tail-x);
    width: 24px;
    height: 34px;
    background: var(--speech-paper);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
}
.character-selector .character-selector-enter {
    position: absolute;
    z-index: 8;
    left: var(--cast-center);
    bottom: 0;
    width: max-content;
    max-width: calc(100% - 24px);
    min-width: 200px;
    min-height: 62px;
    margin: 0;
    padding: 10px 28px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(231, 185, 89, .72);
    border-radius: 6px 3px 6px 3px;
    color: #f5d99d;
    background: rgba(45, 17, 21, .86);
    box-shadow: inset 0 0 0 2px rgba(168, 115, 61, .32), 0 3px 0 rgba(25, 8, 12, .78), 0 8px 16px rgba(5, 1, 3, .28);
    transform: translateX(-50%);
    transition: filter 180ms ease;
}
.character-selector .character-selector-enter:not(:disabled):hover {
    transform: translateX(-50%);
    filter: brightness(1.16);
}
.character-selector-enter-action {
    font-size: .68rem;
    line-height: 1.3;
    letter-spacing: .12em;
}
@media (max-width: 760px) {
    .character-selector {
        --cast-center: calc(var(--side-menu-hit-width) + ((100% - var(--side-menu-hit-width)) / 2));
        --cast-speech-height: 132px;
        --cast-caption-height: 76px;
    }
    .character-selector .character-selector-story {
        width: min(310px, calc(100% - var(--side-menu-hit-width) - 24px));
    }
    .character-selector .character-selector-bubble {
        padding: 12px 16px;
        font-size: .82rem;
    }
    .character-selector .character-selector-enter {
        min-width: 0;
        width: min(240px, calc(100% - var(--side-menu-hit-width) - 24px));
        padding-inline: 14px;
    }
    .character-selector .character-selector-arrow { top: 60%; }
}
@media (max-height: 700px) {
    .character-selector { --cast-speech-height: 112px; --cast-caption-height: 70px; }
    .character-selector .character-selector-bubble { font-size: .78rem; padding: 10px 14px; }
}

/* Desktop: panel dialogowy po lewej, pełnowymiarowa postać po prawej. */
@media (min-width: 761px) {
    .character-selector {
        --cast-center: 65%;
        --speech-center: 35%;
        top: clamp(56px, 8vh, 82px);
        bottom: 18px;
    }
    .character-selector .character-selector-stage {
        top: 0;
        bottom: 0;
    }
    .character-selector .character-selector-item {
        left: var(--cast-center);
        width: clamp(430px, 44vw, 710px);
        height: 100%;
        max-height: none;
        bottom: 0;
    }
    .character-selector .character-selector-item[data-character-id="tom-carter"] {
        width: clamp(470px, 48vw, 770px);
    }
    .character-selector .character-selector-item[data-selected="true"] {
        transform: translate3d(-50%, 0, 0) scale(1);
    }
    .character-selector .character-selector-story {
        top: clamp(28px, 7%, 64px);
        left: var(--speech-center);
        width: min(380px, 30vw);
        height: auto;
        padding: 0;
        display: block;
    }
    .character-selector .character-selector-bubble {
        min-height: 116px;
        padding: 20px 30px;
        font-size: clamp(1.05rem, 1.22vw, 1.24rem);
        transform-origin: 100% 58%;
    }
    .character-selector .character-selector-bubble::after {
        display: none;
    }
    .character-selector .character-selector-enter {
        top: clamp(166px, 34%, 225px);
        bottom: auto;
        left: var(--speech-center);
        width: auto;
        max-width: none;
        min-width: 104px;
        min-height: 40px;
        padding: 7px 16px;
    }
    .character-selector .character-selector-arrow {
        z-index: 20;
        top: 70%;
    }
    .character-selector .character-selector-arrow-prev {
        left: max(calc(var(--side-menu-hit-width) + 10px), 43%);
    }
    .character-selector .character-selector-arrow-next {
        right: max(2vw, 5%);
    }
    .character-selector .character-selector-arrow:disabled {
        visibility: hidden;
    }
}

@media (min-width: 761px) and (max-width: 1120px) {
    .character-selector {
        --cast-center: 66%;
        --speech-center: 35%;
    }
    .character-selector .character-selector-item {
        width: clamp(390px, 47vw, 560px);
    }
    .character-selector .character-selector-item[data-character-id="tom-carter"] {
        width: clamp(430px, 51vw, 610px);
    }
    .character-selector .character-selector-story {
        width: min(320px, 29vw);
    }
    .character-selector .character-selector-enter {
        width: auto;
    }
}

/* Wspólny język dymków: kropki od bohatera, następnie owal i tekst. */
.character-selector .character-selector-story {
    overflow: visible;
}
.character-selector .character-selector-bubble {
    min-height: 0;
    border: 3px solid #2b1008;
    border-radius: 50% / 46%;
    color: #291009;
    background: linear-gradient(145deg, #fff7df, #f0d59f);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .26), inset 0 0 0 2px rgba(255, 255, 255, .36);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(10px, 8px, 0) scale(.88);
    transition: none;
}
.character-selector.is-bubble-ready .character-selector-bubble {
    visibility: visible;
    animation: bletkiThoughtBubbleInSlow .62s cubic-bezier(.2, .86, .22, 1.06) both;
}
.character-selector .character-selector-bubble p {
    opacity: 0;
    transition: none;
}
.character-selector.is-speech-ready .character-selector-bubble p {
    opacity: 1;
}
.character-selector .character-selector-story > .speech-dot {
    position: absolute;
    z-index: 2;
    display: block;
    border: 3px solid #2b1008;
    border-radius: 50%;
    background: rgba(255, 240, 204, .98);
    box-shadow: 0 7px 14px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .34);
    opacity: 0;
    pointer-events: none;
}
.character-selector .character-selector-story > .speech-dot-one {
    top: 67%;
    right: -148px;
    width: 16px;
    height: 16px;
}
.character-selector .character-selector-story > .speech-dot-two {
    top: 60%;
    right: -105px;
    width: 25px;
    height: 25px;
}
.character-selector .character-selector-story > .speech-dot-three {
    top: 50%;
    right: -55px;
    width: 38px;
    height: 38px;
}
.character-selector.is-thought-ready .character-selector-story > .speech-dot-one {
    animation: bletkiThoughtDotInSlow .42s ease-out .08s both;
}
.character-selector.is-thought-ready .character-selector-story > .speech-dot-two {
    animation: bletkiThoughtDotInSlow .46s ease-out .48s both;
}
.character-selector.is-thought-ready .character-selector-story > .speech-dot-three {
    animation: bletkiThoughtDotInSlow .5s ease-out .91s both;
}
@media (max-width: 760px) {
    .character-selector .character-selector-enter {
        width: auto;
        min-width: 104px;
        min-height: 40px;
        padding: 7px 16px;
    }
    .character-selector .character-selector-bubble {
        border-width: 2px;
        border-radius: 46% / 42%;
    }
    .character-selector .character-selector-story > .speech-dot-one {
        top: 88%;
        right: 24%;
        width: 10px;
        height: 10px;
    }
    .character-selector .character-selector-story > .speech-dot-two {
        top: 103%;
        right: 31%;
        width: 16px;
        height: 16px;
    }
    .character-selector .character-selector-story > .speech-dot-three {
        top: 121%;
        right: 39%;
        width: 23px;
        height: 23px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .character-selector .character-selector-bubble,
    .character-selector .character-selector-story > .speech-dot {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }
}

/* 03. Logo, komunikat startowy i elementy interfejsu */
.hero-top {
    position: relative;
    z-index: 40;
    display: grid;
    justify-items: center;
    align-items: start;
}
.brand-mark {
    width: max-content;
    max-width: min(86vw, 520px);
    color: var(--paper);
    text-align: center;
    text-decoration: none;
    text-shadow: 0 4px 20px rgba(0,0,0,.55);
}
.brand-kicker,
.eyebrow {
    display: block;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #f0b871;
}
.brand-name {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.9rem, 3.8vw, 4.1rem);
    line-height: .82;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.055em;
    color: #f6d095;
}
.brand-logo {
    display: block;
    width: clamp(180px, 22vw, 420px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.46));
}
.brand-rule {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(232,169,93,.9);
    border-bottom: 1px solid rgba(232,169,93,.55);
}
.launch-message {
    position: absolute;
    z-index: 35;
    left: 50%;
    top: clamp(34%, 39vh, 43%);
    width: min(760px, calc(100vw - 32px));
    padding: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 34px);
    text-align: center;
    color: #f8d5a0;
    text-shadow: 0 4px 24px rgba(0,0,0,.78), 0 0 18px rgba(221,98,49,.26);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.launch-message::before,
.launch-message::after {
    content: "";
    position: absolute;
    left: 50%;
    width: min(430px, 72vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(239,184,108,.24), rgba(255,221,154,.86), rgba(239,184,108,.24), transparent);
    box-shadow: 0 0 20px rgba(232,169,93,.32);
}
.launch-message::before { top: 0; }
.launch-message::after { bottom: 0; }
.launch-kicker,
.launch-subline {
    display: block;
    font-size: clamp(.56rem, .85vw, .76rem);
    font-weight: 950;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 222, 176, .82);
}
.launch-message p {
    margin: clamp(6px, 1.1vh, 10px) 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 6.2vw, 6.6rem);
    line-height: .86;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.055em;
    color: #ffd08b;
    animation: launchGlow 5.8s ease-in-out infinite alternate;
}
.launch-subline {
    font-size: clamp(.5rem, .72vw, .68rem);
    letter-spacing: .22em;
    color: rgba(255, 230, 198, .68);
}

.top-nav { justify-self: center; display: flex; gap: clamp(14px, 2vw, 32px); align-items: center; }
.top-nav a,
.social-strip a {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,230,196,.82);
}
.motion-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(232,169,93,.58);
    background: rgba(22,7,8,.46);
    color: var(--paper);
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    cursor: pointer;
}
.motion-dot { width: 8px; height: 8px; border-radius: 50%; background: #e9ad61; box-shadow: 0 0 12px #e9ad61; }
.motion-toggle[aria-pressed="true"] .motion-dot { background: #777; box-shadow: none; }

.hero-copy {
    position: relative;
    z-index: 34;
    width: min(680px, 100%);
    margin: clamp(12px, 2.2vh, 30px) auto 0;
    text-align: center;
    text-shadow: 0 4px 25px rgba(0,0,0,.72);
}
h1, h2, p { margin-top: 0; }
h1 {
    margin: clamp(5px, 1vh, 10px) 0 clamp(8px, 1.3vh, 14px);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 6.8vw, 7.6rem);
    line-height: .78;
    letter-spacing: -.065em;
    font-style: italic;
    color: #ffd18d;
}
.lead {
    width: min(640px, 100%);
    margin: 0 auto;
    color: rgba(255,239,216,.9);
    font-size: clamp(.98rem, 1.4vw, 1.14rem);
    line-height: 1.58;
}
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: clamp(12px, 1.9vh, 20px); }
.jj-button {
    position: relative;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid rgba(250,207,139,.76);
    text-decoration: none;
    text-transform: uppercase;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .16em;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}
.jj-button-primary { background: linear-gradient(180deg, #edbb71, #b86d32); color: #1b0708; box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.jj-button-secondary { background: rgba(20,6,8,.62); color: #f7d29b; }

.character-stage {
    position: absolute;
    z-index: 22;
    left: 50%;
    bottom: calc(var(--rail-height) - clamp(4px, 1.2vh, 14px));
    width: min(1500px, 100vw);
    height: clamp(285px, 43vh, 500px);
    transform: translateX(-50%);
    pointer-events: none;
}
.character-card { position: absolute; bottom: 0; display: grid; justify-items: center; align-items: end; }
.character-nature { left: 3%; width: 34%; height: 86%; }
.character-girl { left: 35%; width: 29%; height: 94%; z-index: 3; }
.character-legend { right: 3%; width: 31%; height: 90%; z-index: 2; }
.character-art { position: absolute; inset: auto 0 0; display: grid; place-items: end center; }
.character-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(0,0,0,.48)); }
.character-art-horse { left: -8%; width: 62%; height: 66%; opacity: .96; }
.character-art-cowboy { left: 27%; width: 50%; height: 90%; }
.character-art-cowgirl { width: 67%; height: 100%; left: 16%; }
.character-art-jesse { width: 64%; height: 98%; left: 18%; }
.character-placeholder,
.horse-placeholder {
    position: absolute;
    bottom: 0;
    opacity: .92;
    filter: drop-shadow(0 24px 18px rgba(0,0,0,.54));
}
.character-placeholder {
    width: 42%;
    height: 82%;
    min-width: 150px;
}
.character-placeholder::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 13%;
    width: 42%;
    height: 64%;
    transform: translateX(-50%);
    border-radius: 45% 45% 12% 12%;
    background: linear-gradient(145deg, rgba(245,193,119,.90), rgba(87,35,19,.95));
    box-shadow: inset 0 0 0 2px rgba(255,226,178,.14);
}
.character-placeholder::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8%;
    width: 84%;
    height: 18%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent 0 8%, currentColor 8% 92%, transparent 92%);
    clip-path: polygon(7% 50%, 31% 0, 69% 0, 93% 50%, 70% 68%, 50% 100%, 30% 68%);
}
.horse-placeholder {
    left: -1%;
    bottom: 2%;
    width: 48%;
    height: 44%;
    color: #e8d1ad;
}
.horse-placeholder::before {
    content: "";
    position: absolute;
    left: 12%;
    bottom: 18%;
    width: 70%;
    height: 42%;
    border-radius: 48% 45% 32% 35%;
    background: linear-gradient(145deg, #f2dfc5, #b98b61);
}
.horse-placeholder::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: 43%;
    width: 22%;
    height: 26%;
    border-radius: 50% 42% 36% 30%;
    background: linear-gradient(145deg, #f2dfc5, #aa764d);
    box-shadow: -58px 44px 0 -19px #8a5435, -28px 46px 0 -19px #8a5435, 0 42px 0 -19px #8a5435, -83px 43px 0 -20px #8a5435;
}
.placeholder-cowboy { color: #8b4b24; left: 44%; }
.placeholder-cowgirl { color: #d9688d; height: 88%; }
.placeholder-cowgirl::before { background: linear-gradient(145deg, #f4a7be, #7a1f35); }
.placeholder-jesse { color: #090507; height: 90%; }
.placeholder-jesse::before { background: linear-gradient(145deg, #151014, #030203 70%); box-shadow: inset 0 0 0 2px rgba(232,169,93,.28); }
.placeholder-cowboy + .line-badge { left: 34%; }
.line-badge {
    position: absolute;
    bottom: 1.5%;
    z-index: 5;
    padding: 8px 12px;
    border: 1px solid rgba(235,174,95,.65);
    background: rgba(22,6,8,.72);
    color: #f1c98e;
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .14em;
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.line-badge-pink { color: #ffc2d3; border-color: rgba(226,101,138,.72); }
.line-badge-dark { color: #f2c06d; }

.smoke {
    position: absolute;
    z-index: 10;
    right: 34%;
    top: 23%;
    width: 42px;
    height: 90px;
    opacity: .72;
}
.smoke span {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 10px;
    height: 32px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, var(--smoke), transparent 68%);
    filter: blur(4px);
    transform-origin: bottom center;
    animation: smokeRise var(--smoke-speed) ease-in-out infinite;
}
.smoke span:nth-child(2) { animation-delay: -2.1s; left: 32%; --smoke-speed: 7.4s; }
.smoke span:nth-child(3) { animation-delay: -4.4s; left: 62%; --smoke-speed: 8.2s; }

.mobile-menu-hint {
    display: none;
}

/* 04. Bazowe komponenty menu, sociali, audio i panelu */
.bottom-dock {
    position: absolute;
    z-index: 45;
    left: 50%;
    bottom: var(--dock-bottom);
    width: min(calc((var(--menu-item-size) * 7) + var(--contact-item-width) + 14px), calc(100vw - 20px));
    display: grid;
    grid-template-columns: minmax(0, calc(var(--menu-item-size) * 7)) var(--contact-item-width);
    align-items: end;
    gap: 2px;
    transform: translateX(-50%);
}
.category-rail {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, var(--menu-item-size)));
    justify-content: end;
    align-items: end;
    gap: 0;
}
.category-link {
    position: relative;
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 66px;
    padding: 8px 5px;
    border: 1px solid rgba(232,169,93,.28);
    color: rgba(255,234,202,.88);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(.58rem, .68vw, .72rem);
    font-weight: 950;
    letter-spacing: .09em;
    background: rgba(17,5,7,.48);
    box-shadow: 0 14px 28px rgba(0,0,0,.30);
    transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}
.category-link-image {
    min-height: 0;
    width: var(--menu-item-size);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform-origin: center bottom;
    margin-inline: -3px;
}
.category-link-image img,
.contact-tile-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(var(--rail-height), var(--menu-item-size));
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.44));
}
.category-link-image img { max-height: min(var(--rail-height), var(--menu-item-size)); object-fit: contain; }
.contact-tile {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 96px;
    padding: 12px;
    border: 1px solid rgba(232,169,93,.55);
    background: linear-gradient(180deg, rgba(56,20,12,.84), rgba(15,5,6,.92));
    color: #f7d29b;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 950;
    letter-spacing: .10em;
    box-shadow: 0 16px 34px rgba(0,0,0,.38);
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.contact-tile strong { display: block; margin-top: 4px; font-size: .82rem; color: var(--cream); }
.contact-tile-image {
    min-height: 0;
    width: var(--contact-item-width);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform-origin: center bottom;
    margin-left: -4px;
}
.category-icon {
    width: 28px;
    height: 24px;
    color: #e8ad62;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.icon-paper { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M7 13h39c7 0 11 5 11 11s-4 11-11 11H7v-6h39c3 0 5-2 5-5s-2-5-5-5H7zM11 21h27v6H11z'/%3E%3C/svg%3E"); }
.icon-filter { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M10 15h34c7 0 10 4 10 9s-3 9-10 9H10zm6 6v6h27c3 0 5-1 5-3s-2-3-5-3zm3-12h6v30h-6z'/%3E%3C/svg%3E"); }
.icon-gear { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M32 6l5 7 8-2 2 8 7 5-7 5-2 8-8-2-5 7-5-7-8 2-2-8-7-5 7-5 2-8 8 2zm0 13a5 5 0 100 10 5 5 0 000-10z'/%3E%3C/svg%3E"); }
.icon-box { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M12 15l20-8 20 8v22l-20 7-20-7zm8 5l12 5 12-5-12-5zm9 11l-11-4v7l11 4zm6 7l11-4v-7l-11 4z'/%3E%3C/svg%3E"); }
.icon-crown { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M8 15l13 10 11-17 11 17 13-10-5 24H13zm8 18h32l1-5-8 5-9-14-9 14-8-5z'/%3E%3C/svg%3E"); }
.icon-spark { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M32 5l7 14 16 2-12 11 3 15-14-8-14 8 3-15L9 21l16-2z'/%3E%3C/svg%3E"); }
.icon-hat { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M12 31c4-2 7-4 9-11 2-6 6-10 11-10s9 4 11 10c2 7 5 9 9 11 4 2 3 7-2 7H14c-5 0-6-5-2-7zm14-3h12c-1-7-3-11-6-11s-5 4-6 11z'/%3E%3C/svg%3E"); }
.social-strip {
    position: absolute;
    z-index: 44;
    right: var(--hero-pad-x);
    top: 50%;
    display: grid;
    gap: 10px;
    transform: translateY(-50%);
}
.social-strip a {
    width: clamp(42px, 3.8vw, 58px);
    height: clamp(42px, 3.8vw, 58px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    transition: transform .18s ease, filter .18s ease;
}
.social-strip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.44));
}
.audio-control {
    position: absolute;
    z-index: 45;
    right: var(--hero-pad-x);
    top: calc(50% + clamp(158px, 18vh, 220px));
    transform: translateY(-50%);
}
.audio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 13px 8px 11px;
    border: 1px solid rgba(239,184,108,.34);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(42, 13, 12, .66), rgba(12, 4, 6, .72));
    color: rgba(255, 226, 184, .86);
    font: inherit;
    font-size: .64rem;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,.62);
    backdrop-filter: blur(4px);
    box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,228,178,.10);
    cursor: pointer;
    opacity: .88;
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.audio-toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: currentColor;
}
.audio-toggle-icon::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 5px;
    width: 7px;
    height: 8px;
    background: currentColor;
    clip-path: polygon(0 28%, 42% 28%, 100% 0, 100% 100%, 42% 72%, 0 72%);
}
.audio-toggle-icon::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 3px;
    width: 8px;
    height: 12px;
    border: 2px solid currentColor;
    border-left: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transform: scaleX(.8);
}
.audio-toggle[aria-pressed="true"] {
    opacity: .96;
    border-color: rgba(239,184,108,.62);
    background: linear-gradient(180deg, rgba(74, 25, 14, .78), rgba(18, 6, 7, .82));
    color: #ffe2b8;
}
.audio-toggle.is-loading {
    cursor: wait;
    opacity: .92;
}
.audio-toggle[aria-pressed="true"] .audio-toggle-icon::after { opacity: .9; }
.audio-toggle[aria-pressed="true"] .audio-toggle-icon {
    filter: drop-shadow(0 0 8px rgba(239,184,108,.32));
}
.audio-toggle[aria-pressed="false"] .audio-toggle-icon { opacity: .72; }
.audio-toggle[aria-pressed="false"] .audio-toggle-icon::after {
    opacity: .9;
    width: 13px;
    height: 2px;
    right: -1px;
    top: 8px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-42deg);
}
.audio-toggle.is-loading .audio-toggle-icon::after {
    opacity: .85;
    width: 10px;
    height: 10px;
    right: 0;
    top: 3px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    background: transparent;
    transform: none;
    animation: audioLoadingSpin .8s linear infinite;
}
.audio-toggle:hover { opacity: 1; transform: translateY(-1px); }
.mobile-category-toggle {
    display: none;
}
.jj-hero.is-panel-open .launch-message {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 10px));
    transition: opacity .26s ease, transform .26s ease;
}
.jj-hero.is-panel-open .bottom-dock {
    opacity: .55;
    filter: saturate(.72);
    transform: translateX(-50%) translateY(8px) scale(.92);
    transition: opacity .28s ease, filter .28s ease, transform .28s ease;
}
.jj-hero.is-panel-open .category-link.is-active {
    opacity: 1;
    filter: brightness(1.14) saturate(1.08) drop-shadow(0 0 12px rgba(232,169,93,.26));
}

@media (hover: hover) and (pointer: fine) {
    .category-link:hover,
    .contact-tile:hover { transform: translateY(-3px); }
    .category-link-image:hover,
    .contact-tile-image:hover { transform: translateY(-5px) scale(1.025); filter: brightness(1.08) saturate(1.06); }
    .category-link:hover { background: rgba(80,26,14,.62); border-color: rgba(239,184,108,.72); }
    .category-link-image:hover,
    .contact-tile-image:hover { background: transparent; border-color: transparent; }
    .contact-tile:hover { border-color: rgba(239,184,108,.80); }
    .contact-tile-image:hover { border-color: transparent; }
    .social-strip a:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08) saturate(1.08); }
    .audio-toggle:hover { border-color: rgba(239,184,108,.68); }
    .top-nav a:hover { color: #fff0d4; }
}
:focus-visible { outline: 3px solid #ffd28f; outline-offset: 4px; }

/* 05. Animacje oraz responsive bazowe */
@keyframes audioLoadingSpin { to { transform: rotate(360deg); } }
@keyframes skyDriftBack {
    0% { transform: translate3d(-2.6%, .02%, 0); }
    24% { transform: translate3d(-1.2%, -.05%, 0); }
    57% { transform: translate3d(.8%, .04%, 0); }
    82% { transform: translate3d(1.9%, -.03%, 0); }
    100% { transform: translate3d(2.7%, .02%, 0); }
}
@keyframes skyDriftFront {
    0% { transform: translate3d(3.6%, -.06%, 0); }
    22% { transform: translate3d(2.1%, .05%, 0); }
    53% { transform: translate3d(-.6%, -.02%, 0); }
    79% { transform: translate3d(-2.7%, .06%, 0); }
    100% { transform: translate3d(-3.7%, -.04%, 0); }
}
@keyframes skyDriftBackMobile {
    0% { transform: translate3d(-2%, .02%, 0); }
    54% { transform: translate3d(.5%, -.04%, 0); }
    100% { transform: translate3d(2.1%, .02%, 0); }
}
@keyframes skyDriftFrontMobile {
    0% { transform: translate3d(2.7%, -.04%, 0); }
    50% { transform: translate3d(-.4%, .04%, 0); }
    100% { transform: translate3d(-2.7%, -.03%, 0); }
}
@keyframes cloudFrontLife { from { transform: scale(1.075); } to { transform: scale(1.09); } }
@keyframes breatheHaze {
    0% { opacity: .45; transform: scale(1); }
    34% { opacity: .56; transform: scale(1.009); }
    67% { opacity: .49; transform: scale(1.015); }
    100% { opacity: .45; transform: scale(1); }
}
@keyframes birdsLongPass {
    0% { opacity: 0; transform: translate3d(-30vw, 1.2vh, 0) scale(.74) rotate(-1deg); }
    9% { opacity: 0; transform: translate3d(-24vw, .7vh, 0) scale(.76) rotate(-.6deg); }
    18% { opacity: var(--birds-opacity); }
    42% { opacity: .48; transform: translate3d(-6vw, -1.6vh, 0) scale(.84) rotate(.7deg); }
    66% { opacity: .43; transform: translate3d(10vw, -.4vh, 0) scale(.78) rotate(-.4deg); }
    82% { opacity: 0; transform: translate3d(24vw, -2vh, 0) scale(.70) rotate(.5deg); }
    100% { opacity: 0; transform: translate3d(30vw, -2vh, 0) scale(.70) rotate(.5deg); }
}
@keyframes sunsetPulse { from { opacity: .45; transform: scale(1); } to { opacity: .60; transform: scale(1.012); } }
@keyframes dustFloat { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.08); } }
@keyframes smokeRise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.55) rotate(0deg); }
    18% { opacity: .52; }
    58% { opacity: .34; transform: translate3d(8px, -42px, 0) scale(1.1) rotate(9deg); }
    100% { opacity: 0; transform: translate3d(-10px, -86px, 0) scale(1.8) rotate(-8deg); }
}
@keyframes launchGlow {
    from { opacity: .86; filter: drop-shadow(0 0 7px rgba(232,169,93,.16)); transform: translate3d(0, 0, 0); }
    to { opacity: 1; filter: drop-shadow(0 0 18px rgba(232,116,61,.34)); transform: translate3d(0, -2px, 0); }
}

.jj-hero.motion-paused .cloud-drift,
.jj-hero.motion-paused .birds-flight,
.jj-hero.motion-paused .layer-clouds-front,
.jj-hero.motion-paused .layer-haze,
.jj-hero.motion-paused .layer-sun,
.jj-hero.motion-paused .dust-field::before,
.jj-hero.motion-paused .dust-field::after,
.jj-hero.motion-paused .smoke span { animation-play-state: paused; }

@media (max-width: 1120px) {
    :root { --menu-item-size: clamp(70px, 8.4vw, 94px); --contact-item-width: clamp(106px, 12vw, 142px); --rail-height: clamp(76px, 12vh, 108px); --dock-bottom: clamp(16px, 2.6vh, 30px); }
    .hero-top { justify-items: center; }
    .social-strip {
        top: calc(var(--safe-hero-top) + 74px);
        right: 50%;
        bottom: auto;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 8px;
        border: 1px solid rgba(232,169,93,.24);
        background: linear-gradient(180deg, rgba(24,7,8,.26), rgba(8,2,3,.18));
        box-shadow: 0 12px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,229,185,.10);
        backdrop-filter: blur(3px);
        transform: translateX(50%);
    }
    .social-strip::before,
    .social-strip::after {
        content: "";
        width: 18px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(232,169,93,.72));
    }
    .social-strip::after { background: linear-gradient(90deg, rgba(232,169,93,.72), transparent); }
    .social-strip a {
        width: 34px;
        height: 34px;
    }
    .audio-control {
        top: calc(var(--safe-hero-top) + 128px);
        right: 50%;
        transform: translateX(50%);
    }
    .audio-toggle {
        min-height: 32px;
        padding: 6px 10px;
        font-size: .56rem;
        background: linear-gradient(180deg, rgba(24,7,8,.32), rgba(8,2,3,.42));
    }
}

@media (max-width: 760px) {
    :root { --mobile-menu-size: clamp(126px, 38vw, 168px); --rail-height: clamp(118px, 18vh, 160px); --dock-bottom: clamp(14px, 2.4vh, 24px); --dust-opacity: .22; --safe-hero-top: 10px; }
    .jj-hero {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        padding: var(--safe-hero-top) 10px calc(var(--rail-height) + var(--dock-bottom) + 10px);
        display: grid;
        align-content: start;
    }
    .hero-top { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
    .brand-mark { text-align: center; }
    .brand-name { font-size: clamp(2.35rem, 12vw, 4.1rem); }
    .launch-message {
        top: clamp(40%, 45vh, 48%);
        width: min(92vw, 520px);
        padding-inline: 14px;
    }
    .launch-kicker { font-size: .56rem; letter-spacing: .22em; }
    .launch-message p { font-size: clamp(2.15rem, 12vw, 4.2rem); }
    .launch-subline { font-size: .52rem; letter-spacing: .17em; }

    .mobile-menu-hint {
        position: absolute;
        z-index: 46;
        left: 50%;
        bottom: calc(var(--dock-bottom) + var(--rail-height) + 2px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 26px;
        padding: 5px 12px;
        color: rgba(255, 226, 184, .82);
        text-shadow: 0 2px 12px rgba(0,0,0,.76);
        text-transform: uppercase;
        transform: translateX(-50%);
        transition: opacity .35s ease, transform .35s ease;
        pointer-events: none;
    }
    .mobile-menu-hint::before,
    .mobile-menu-hint::after {
        content: "";
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
        background: currentColor;
        opacity: .9;
        clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
        filter: drop-shadow(0 0 8px rgba(232,169,93,.42));
    }
    .mobile-menu-hint span {
        display: block;
        width: clamp(24px, 8vw, 42px);
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(232,169,93,.9), transparent);
    }
    .mobile-menu-hint strong {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .58rem;
        line-height: 1;
        font-weight: 950;
        letter-spacing: .22em;
        white-space: nowrap;
    }
    .mobile-menu-hint strong::before { content: "←"; font-size: .82rem; line-height: 1; opacity: .9; }
    .mobile-menu-hint strong::after { content: "→"; font-size: .82rem; line-height: 1; opacity: .9; }
    .jj-hero.menu-used .mobile-menu-hint {
        opacity: 0;
        transform: translate(-50%, 6px);
    }
    .bottom-dock {
        left: 0;
        right: 0;
        bottom: var(--dock-bottom);
        width: 100%;
        display: flex;
        align-items: end;
        gap: 0;
        padding: 16px 0 6px;
        overflow-x: auto;
        overflow-y: visible;
        transform: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100vw - var(--mobile-menu-size)) / 2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        background: linear-gradient(90deg, transparent, rgba(20,6,8,.18) 18%, rgba(20,6,8,.18) 82%, transparent);
    }
    .jj-hero.is-panel-open .bottom-dock {
        opacity: 0;
        pointer-events: none;
        filter: saturate(.6);
        transform: translateY(110%);
    }
    .jj-hero.is-panel-open .mobile-menu-hint {
        opacity: 0;
        transform: translate(-50%, 6px);
    }
    .mobile-category-toggle {
        position: absolute;
        z-index: 47;
        left: 50%;
        bottom: var(--dock-bottom);
        display: inline-flex;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        border: 1px solid rgba(239,184,108,.58);
        background: linear-gradient(180deg, rgba(61,20,13,.78), rgba(15,5,7,.9));
        color: #f8d5a0;
        text-transform: uppercase;
        font-size: .66rem;
        font-weight: 950;
        letter-spacing: .16em;
        box-shadow: 0 14px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,228,178,.14);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 12px);
        transition: opacity .26s ease, visibility .26s ease, transform .26s ease;
    }
    .jj-hero.is-panel-open .mobile-category-toggle {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    .jj-hero.menu-revealed .bottom-dock {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        filter: none;
    }
    .jj-hero.menu-revealed .mobile-category-toggle {
        opacity: .45;
    }
    .bottom-dock::-webkit-scrollbar { display: none; }
    .bottom-dock::before,
    .bottom-dock::after {
        content: "";
        flex: 0 0 calc((100vw - var(--mobile-menu-size)) / 2);
    }
    .category-rail {
        display: contents;
    }
    .category-link {
        flex: 0 0 var(--mobile-menu-size);
        min-width: var(--mobile-menu-size);
        min-height: 82px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        font-size: .62rem;
        transform-origin: center bottom;
    }
    .category-link-image {
        display: block;
        width: var(--mobile-menu-size);
        min-height: 0;
        margin-inline: -10px;
        filter: saturate(1.03) contrast(1.02);
    }
    .category-link-image:active,
    .contact-tile-image:active { transform: translateY(-3px) scale(.985); filter: brightness(1.1) saturate(1.08); }
    .category-link-image img { max-height: min(var(--rail-height), var(--mobile-menu-size)); }
    .category-icon { width: 22px; height: 20px; }
    .contact-tile {
        align-self: end;
        padding: 6px;
        font-size: .54rem;
    }
    .contact-tile strong { font-size: .54rem; }
    .contact-tile-image { width: var(--mobile-menu-size); padding: 0; margin-left: -10px; }
    .layer-clouds {
        inset: -4% -34%;
        background-size: auto 70%;
        background-position: 48% top;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.36) 74%, transparent 84%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.36) 74%, transparent 84%);
    }
    .layer-clouds-back { opacity: .34; transform: scale(1.085); }
    .layer-clouds-front { opacity: .28; transform: scale(1.11); }
    .cloud-drift-back { animation-name: skyDriftBackMobile; animation-duration: 122s; }
    .cloud-drift-front { animation-name: skyDriftFrontMobile; animation-duration: 92s; }
}

@media (max-width: 420px) {
    :root { --mobile-menu-size: clamp(118px, 40vw, 150px); --rail-height: clamp(108px, 17vh, 142px); --dock-bottom: clamp(12px, 2vh, 20px); }
    .brand-kicker { font-size: .56rem; }
    .launch-message { top: 44vh; }
    .launch-kicker { font-size: .5rem; }
    .launch-message p { font-size: clamp(1.9rem, 11vw, 3.4rem); }
    .launch-subline { display: none; }
    .category-link { min-height: 74px; }
    .category-link-image img { max-height: min(var(--rail-height), var(--mobile-menu-size)); }
    .contact-tile { min-height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .cloud-drift,
    .birds-flight,
    .layer-clouds-front,
    .layer-haze,
    .layer-sun,
    .dust-field::before,
    .dust-field::after,
    .smoke span,
    .launch-message p { animation: none !important; }
    .mobile-menu-hint { transition: none !important; }
    .parallax { transform: none !important; }
}


/* 06. Aktualny layout: pionowe menu po lewej i logo w prawym dolnym rogu. */
:root {
    --side-menu-width: clamp(106px, 8.8vw, 148px);
    --side-menu-offset: clamp(8px, 1.2vw, 18px);
    --corner-logo-width: clamp(190px, 18vw, 380px);
}

.jj-hero {
    padding: var(--safe-hero-top) var(--hero-pad-x);
}

.hero-top {
    position: absolute;
    z-index: 47;
    right: clamp(14px, 2vw, 34px);
    bottom: clamp(12px, 2.6vh, 34px);
    display: block;
    justify-items: initial;
}

.brand-mark {
    display: block;
    max-width: min(42vw, var(--corner-logo-width));
}

.brand-logo {
    width: var(--corner-logo-width);
}

.brand-name {
    font-size: clamp(2rem, 3.6vw, 4rem);
}

.bottom-dock {
    left: var(--side-menu-offset);
    right: auto;
    top: 50%;
    bottom: auto;
    width: var(--side-menu-width);
    max-height: calc(100svh - (var(--side-menu-offset) * 2));
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 8px 0;
    overflow-x: visible;
    overflow-y: auto;
    transform: translateY(-50%);
    scroll-snap-type: y proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.bottom-dock::-webkit-scrollbar {
    display: none;
}

.bottom-dock::before,
.bottom-dock::after {
    content: "";
    flex: 0 0 10px;
}

.category-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.category-link {
    scroll-snap-align: center;
}

.category-link-image,
.contact-tile-image {
    width: var(--side-menu-width);
    margin: -7px 0;
}

.category-link-image img,
.contact-tile-image img {
    width: 100%;
    max-height: none;
    object-fit: contain;
}

.contact-tile-image {
    margin-top: -5px;
    margin-left: 0;
}

.mobile-menu-hint,
.mobile-category-toggle {
    display: none !important;
}

.launch-message {
    left: calc(50% + (var(--side-menu-width) * .28));
    top: clamp(36%, 42vh, 47%);
    width: min(720px, calc(100vw - var(--side-menu-width) - 80px));
}

.jj-hero.is-panel-open .bottom-dock {
    opacity: .72;
    pointer-events: auto;
    filter: saturate(.78);
    transform: translateY(-50%) scale(.94);
}

.jj-hero.is-panel-open .category-link.is-active {
    opacity: 1;
    filter: brightness(1.16) saturate(1.12) drop-shadow(0 0 16px rgba(232,169,93,.35));
}

@media (hover: hover) and (pointer: fine) {
    .category-link-image:hover,
    .contact-tile-image:hover {
        transform: translateX(5px) scale(1.035);
        filter: brightness(1.08) saturate(1.06);
    }
}

@media (max-width: 1120px) {
    :root {
        --side-menu-width: clamp(88px, 10vw, 116px);
        --side-menu-offset: 6px;
        --corner-logo-width: clamp(150px, 18vw, 245px);
    }

    .hero-top {
        right: 12px;
        bottom: 12px;
    }

    .social-strip {
        top: 14px;
        right: 14px;
        bottom: auto;
        transform: none;
    }

    .audio-control {
        top: 78px;
        right: 16px;
        transform: none;
    }

    .audio-toggle {
        min-height: 34px;
        padding: 6px 11px 6px 9px;
        font-size: .56rem;
        letter-spacing: .11em;
        opacity: .86;
    }

    .audio-toggle-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .launch-message {
        left: calc(50% + (var(--side-menu-width) * .20));
        width: min(700px, calc(100vw - var(--side-menu-width) - 54px));
    }
}

@media (max-width: 760px) {
    :root {
        --side-menu-width: clamp(72px, 24vw, 102px);
        --side-menu-offset: 4px;
        --corner-logo-width: clamp(126px, 34vw, 170px);
        --safe-hero-top: 8px;
    }

    .jj-hero {
        padding: var(--safe-hero-top) 8px;
    }

    .hero-top {
        right: 8px;
        bottom: 8px;
    }

    .brand-mark {
        max-width: var(--corner-logo-width);
    }

    .brand-name {
        font-size: clamp(1.7rem, 9vw, 2.7rem);
    }

    .social-strip {
        top: 10px;
        right: 8px;
        padding: 4px 6px;
        gap: 3px;
    }

    .social-strip::before,
    .social-strip::after {
        width: 10px;
    }

    .social-strip a {
        width: 30px;
        height: 30px;
    }

    .audio-control {
        top: 96px;
        left: calc(var(--side-menu-width) + var(--side-menu-offset) + 14px);
        right: auto;
        transform: none;
    }

    .audio-toggle {
        min-height: 28px;
        gap: 6px;
        padding: 5px 9px 5px 8px;
        border-color: rgba(239,184,108,.30);
        background: linear-gradient(180deg, rgba(46, 14, 14, .48), rgba(10, 3, 5, .54));
        font-size: .48rem;
        letter-spacing: .08em;
        opacity: .82;
        box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,228,178,.08);
    }

    .audio-toggle-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .bottom-dock {
        left: var(--side-menu-offset);
        right: auto;
        top: 51%;
        bottom: auto;
        width: var(--side-menu-width);
        max-height: calc(100svh - 18px);
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        overflow-x: visible;
        overflow-y: auto;
        transform: translateY(-50%);
        scroll-snap-type: y proximity;
        scroll-padding-inline: 0;
        background: linear-gradient(180deg, transparent, rgba(20,6,8,.16) 18%, rgba(20,6,8,.16) 82%, transparent);
        mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }

    .bottom-dock::before,
    .bottom-dock::after {
        flex: 0 0 8px;
    }

    .category-rail {
        display: flex;
        flex-direction: column;
    }

    .category-link {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 0;
        scroll-snap-align: center;
    }

    .category-link-image,
    .contact-tile-image {
        width: var(--side-menu-width);
        margin: -5px 0;
    }

    .category-link-image img,
    .contact-tile-image img {
        max-height: none;
    }

    .launch-message {
        left: calc(50% + (var(--side-menu-width) * .24));
        top: 43vh;
        width: calc(100vw - var(--side-menu-width) - 34px);
        padding-inline: 10px;
    }

    .launch-message p {
        font-size: clamp(1.85rem, 10.6vw, 3.25rem);
    }

    .launch-kicker {
        font-size: .48rem;
    }

    .launch-subline {
        display: none;
    }

    .jj-hero.is-panel-open .bottom-dock,
    .jj-hero.menu-revealed .bottom-dock {
        opacity: .64;
        pointer-events: auto;
        transform: translateY(-50%) scale(.92);
    }
}

@media (max-width: 420px) {
    :root {
        --side-menu-width: clamp(66px, 23vw, 86px);
        --corner-logo-width: clamp(112px, 32vw, 142px);
    }

    .social-strip a {
        width: 27px;
        height: 27px;
    }

    .launch-message {
        top: 42vh;
    }

    .launch-message p {
        font-size: clamp(1.65rem, 9.8vw, 2.8rem);
    }
}


/* Polish pass: pionowe menu — większe odstępy i hint przewijania. */
:root {
    --side-menu-gap: clamp(6px, 1.2vh, 12px);
}

.bottom-dock {
    gap: var(--side-menu-gap);
    padding: 18px 0 20px;
}

.category-rail {
    gap: var(--side-menu-gap);
}

.category-link-image,
.contact-tile-image {
    margin: 0;
}

.contact-tile-image {
    margin-top: 2px;
}

.side-menu-hint {
    position: absolute;
    z-index: 46;
    left: calc(var(--side-menu-offset) + (var(--side-menu-width) / 2));
    bottom: clamp(10px, 2vh, 22px);
    display: grid;
    justify-items: center;
    gap: 4px;
    width: max-content;
    max-width: var(--side-menu-width);
    color: rgba(255, 226, 184, .78);
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.78);
    text-transform: uppercase;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.side-menu-hint span {
    display: block;
    padding: 4px 6px;
    border: 1px solid rgba(232,169,93,.24);
    background: rgba(14, 5, 7, .34);
    font-size: clamp(.46rem, .58vw, .58rem);
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: .13em;
    white-space: nowrap;
    backdrop-filter: blur(3px);
}

.side-menu-hint i {
    position: relative;
    display: block;
    width: 18px;
    height: 34px;
    border-left: 1px solid rgba(232,169,93,.58);
    border-right: 1px solid rgba(232,169,93,.18);
    opacity: .92;
    animation: sideHintArrow 1.55s ease-in-out infinite;
}

.side-menu-hint i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
    filter: drop-shadow(0 0 7px rgba(232,169,93,.34));
}

.jj-hero.menu-used .side-menu-hint,
.jj-hero.is-panel-open .side-menu-hint {
    opacity: 0;
    transform: translate(-50%, 6px);
}

@keyframes sideHintArrow {
    0%, 100% { opacity: .42; transform: translateY(-4px); }
    50% { opacity: 1; transform: translateY(5px); }
}

@media (max-width: 1120px) {
    :root { --side-menu-gap: clamp(5px, 1vh, 9px); }
    .bottom-dock { padding-top: 16px; padding-bottom: 18px; }
    .side-menu-hint { bottom: 8px; }
    .side-menu-hint span { font-size: .46rem; letter-spacing: .10em; }
}

@media (max-width: 760px) {
    :root { --side-menu-gap: clamp(4px, .8vh, 7px); }
    .bottom-dock { padding-top: 14px; padding-bottom: 16px; }
    .side-menu-hint {
        left: calc(var(--side-menu-offset) + (var(--side-menu-width) / 2));
        bottom: 6px;
    }
    .side-menu-hint span {
        padding: 3px 4px;
        font-size: .42rem;
        letter-spacing: .08em;
    }
    .side-menu-hint i {
        height: 26px;
    }
}

@media (max-width: 420px) {
    :root { --side-menu-gap: 3px; }
    .bottom-dock { padding-top: 12px; padding-bottom: 14px; }
    .side-menu-hint span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .side-menu-hint i { animation: none !important; }
    .side-menu-hint { transition: none !important; }
}


/* Korekta UX: hint przewijania poza kolumną przycisków, bez zasłaniania menu. */
.side-menu-hint {
    left: calc(var(--side-menu-offset) + var(--side-menu-width) + 14px);
    bottom: clamp(14px, 2.4vh, 28px);
    max-width: none;
    transform: none;
    justify-items: start;
    opacity: .9;
}

.side-menu-hint span {
    background: linear-gradient(180deg, rgba(45,15,10,.62), rgba(12,4,5,.66));
    box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,229,185,.10);
}

.side-menu-hint i {
    margin-left: 12px;
    height: 28px;
}

.jj-hero.menu-used .side-menu-hint,
.jj-hero.is-panel-open .side-menu-hint {
    transform: translateY(6px);
}

@media (max-width: 760px) {
    .side-menu-hint {
        left: calc(var(--side-menu-offset) + var(--side-menu-width) + 8px);
        bottom: clamp(8px, 1.6vh, 14px);
    }

    .side-menu-hint i {
        margin-left: 8px;
        height: 22px;
    }
}

@media (max-width: 420px) {
    .side-menu-hint {
        left: calc(var(--side-menu-offset) + var(--side-menu-width) + 6px);
        bottom: 8px;
    }

    .side-menu-hint i {
        width: 14px;
        height: 20px;
        margin-left: 0;
    }
}


/* Final UX dla pionowego scroll menu: dyskretne wskaźniki góra/dół zamiast tekstowego overlayu. */
.side-menu-hint {
    display: none !important;
}

.side-menu-scroll-cue {
    position: absolute;
    z-index: 46;
    left: calc(var(--side-menu-offset) + (var(--side-menu-width) / 2));
    top: 50%;
    width: var(--side-menu-width);
    height: min(100svh, calc(100svh - 12px));
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    width: clamp(40px, 3.2vw, 44px);
    height: clamp(40px, 3.2vw, 44px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .24s ease, transform .24s ease;
    pointer-events: auto;
    cursor: pointer;
}

.scroll-cue:disabled {
    cursor: default;
}

.scroll-cue:focus-visible {
    outline: 2px solid rgba(255, 220, 148, .9);
    outline-offset: 4px;
}

.scroll-cue::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-right: 2px solid rgba(255,226,184,.78);
    border-bottom: 2px solid rgba(255,226,184,.78);
    filter: drop-shadow(0 0 8px rgba(232,169,93,.38)) drop-shadow(0 3px 8px rgba(0,0,0,.55));
}

.scroll-cue:hover:not(:disabled)::before,
.scroll-cue:focus-visible::before {
    border-color: #fff0c7;
    filter: drop-shadow(0 0 10px rgba(255,220,148,.72)) drop-shadow(0 3px 8px rgba(0,0,0,.55));
}

.scroll-cue::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, rgba(232,169,93,.68), transparent);
    transform: translateX(-50%);
}

.scroll-cue-up {
    top: 8px;
}
.scroll-cue-up::before {
    transform: rotate(225deg) scale(.72);
}
.scroll-cue-up::after {
    top: 22px;
}

.scroll-cue-down {
    bottom: 8px;
    animation: scrollCueDownPulse 1.6s ease-in-out infinite;
}
.scroll-cue-down::before {
    transform: rotate(45deg) scale(.72);
}
.scroll-cue-down::after {
    bottom: 22px;
}

.jj-hero.menu-can-scroll-down .scroll-cue-down,
.jj-hero.menu-can-scroll-up .scroll-cue-up {
    opacity: .86;
}

.jj-hero.menu-can-scroll-up .scroll-cue-up {
    transform: translate(-50%, 4px);
}

.jj-hero.menu-can-scroll-down .scroll-cue-down {
    transform: translate(-50%, -4px);
}

.jj-hero.is-panel-open .side-menu-scroll-cue {
    opacity: .48;
}

@keyframes scrollCueDownPulse {
    0%, 100% { margin-bottom: 0; }
    50% { margin-bottom: -5px; }
}

@media (max-width: 760px) {
    .side-menu-scroll-cue {
        left: calc(var(--side-menu-offset) + (var(--side-menu-width) / 2));
        height: calc(100svh - 8px);
    }

    .scroll-cue {
        width: 42px;
        height: 42px;
    }

    .scroll-cue-up { top: 4px; }
    .scroll-cue-down { bottom: 4px; }

    .scroll-cue::after {
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue-down { animation: none !important; }
    .scroll-cue { transition: none !important; }
}


/* Mobile viewport polish: pełny ekran bez szarego paska i +8% dla bocznego menu. */
html,
body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    background: #17070b;
}

.jj-page,
.jj-hero,
.scene {
    min-height: 100vh;
    min-height: 100svh;
}

.jj-hero {
    height: 100vh;
    height: 100svh;
}

@supports (height: 100dvh) {
    .jj-page,
    .jj-hero,
    .scene {
        min-height: 100dvh;
    }

    .jj-hero {
        height: 100dvh;
        max-height: 100dvh;
    }

    .bottom-dock {
        max-height: calc(100dvh - (var(--side-menu-offset) * 2));
    }

    .side-menu-scroll-cue {
        height: min(100dvh, calc(100dvh - 12px));
    }
}

@media (max-width: 760px) {
    :root {
        --side-menu-width: clamp(78px, 25.9vw, 110px);
    }

    .jj-page,
    .jj-hero,
    .scene {
        min-height: 100vh;
        min-height: 100svh;
    }

    .jj-hero {
        height: 100vh;
        height: 100svh;
        max-height: 100svh;
        overflow: hidden;
    }

    .bottom-dock {
        max-height: calc(100svh - 18px);
    }

    .side-menu-scroll-cue {
        height: calc(100svh - 8px);
    }
}

@media (max-width: 420px) {
    :root {
        --side-menu-width: clamp(71px, 24.8vw, 93px);
    }
}

@keyframes paperBreath {
    from { transform: translate3d(0, 0, 0); opacity: .88; }
    to { transform: translate3d(.8px, -1px, 0); opacity: 1; }
}
/* Paper panel polish v3: spokojniejsze krawędzie,
nity {
    background:
        linear-gradient(90deg, rgba(72, 29, 11, .13), transparent 7%, transparent 93%, rgba(72, 29, 11, .14)),
        linear-gradient(180deg, rgba(72, 29, 11, .16), transparent 9%, transparent 91%, rgba(72, 29, 11, .18)),
        url('../img/ui/papirus.webp') center / cover no-repeat,
        linear-gradient(135deg, #e6bd79 0%, #f6dba2 42%, #c68445 100%);
    box-shadow:
        0 34px 80px rgba(0,0,0,.48),
        0 14px 30px rgba(55,15,6,.24),
        inset 0 0 0 1px rgba(91,41,16,.22),
        inset 0 0 42px rgba(72,25,8,.18);
    clip-path: polygon(1.1% 1.4%, 16% .8%, 32% 1.2%, 50% .6%, 68% 1.1%, 84% .8%, 98.7% 1.5%, 98.2% 18%, 99% 36%, 98.3% 55%, 98.9% 75%, 98.1% 98%, 82% 97.5%, 66% 98.3%, 49% 97.7%, 33% 98.5%, 16% 97.6%, 1.5% 98.4%, 2% 80%, 1.2% 61%, 2% 42%, 1.3% 22%);
    transform: translate(-50%, calc(-50% + 18px)) rotate(-.28deg) scale(.985);
}

@keyframes paperInnerLife {
    from { opacity: .82; filter: brightness(1); transform: translate3d(0, 0, 0); }
    to { opacity: .96; filter: brightness(1.025); transform: translate3d(.6px, -.6px, 0); }
}

@keyframes paperPinsGlow {
    from { opacity: .62; filter: drop-shadow(0 0 0 rgba(232,169,93,0)); }
    to { opacity: .88; filter: drop-shadow(0 0 8px rgba(232,169,93,.24)); }
}
/* Corrective polish v4: panel ma być eleganckim dokumentem {
    width: min(660px, calc(100vw - var(--side-menu-width) - 120px));
    max-height: min(70svh, 500px);
    padding: clamp(54px, 5.4vh, 72px) clamp(30px, 3.5vw, 48px) clamp(28px, 3.4vh, 42px);
    overflow: auto;
    text-align: center;
    clip-path: polygon(1.4% 1.8%, 18% .9%, 37% 1.5%, 58% .8%, 78% 1.4%, 98.3% 1.8%, 97.8% 21%, 98.6% 47%, 97.9% 72%, 98.4% 97.6%, 78% 98.2%, 58% 97.4%, 38% 98.3%, 18% 97.5%, 1.8% 98.2%, 2.3% 74%, 1.3% 49%, 2.1% 25%);
    box-shadow:
        0 30px 70px rgba(0,0,0,.48),
        0 12px 28px rgba(55,15,6,.24),
        inset 0 0 0 1px rgba(91,41,16,.18),
        inset 0 0 34px rgba(72,25,8,.14);
}


/* 08. Finalny system ikon menu i etykiet — warstwy historyczne zachowane dla stabilnej kaskady. */
/* Menu scale +16%: większe przyciski bocznego menu na desktop i mobile. */
:root {
    --side-menu-width: clamp(123px, 10.2vw, 172px);
}

@media (max-width: 1120px) {
    :root {
        --side-menu-width: clamp(102px, 11.6vw, 135px);
    }
}

@media (max-width: 760px) {
    :root {
        --side-menu-width: clamp(90px, 30vw, 128px);
    }
}

@media (max-width: 420px) {
    :root {
        --side-menu-width: clamp(82px, 28.8vw, 108px);
    }
}


/* Menu scale +10% ponad poprzednie powiększenie. */
:root {
    --side-menu-width: clamp(135px, 11.2vw, 189px);
}

@media (max-width: 1120px) {
    :root {
        --side-menu-width: clamp(112px, 12.8vw, 149px);
    }
}

@media (max-width: 760px) {
    :root {
        --side-menu-width: clamp(99px, 33vw, 141px);
    }
}

@media (max-width: 420px) {
    :root {
        --side-menu-width: clamp(90px, 31.7vw, 119px);
    }
}


/* Animated menu system v1: wspólne tło + tekst HTML + ikony warstwowe. */
.menu-token {
    position: relative;
    width: var(--side-menu-width);
    aspect-ratio: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f8dca7;
    text-decoration: none;
    isolation: isolate;
    scroll-snap-align: center;
    transform-origin: center center;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease, opacity .24s ease;
}

.menu-token-bg,
.menu-token::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.menu-token-bg {
    z-index: 0;
    background: url('../img/ui/menu/menu-button-bg.webp') center / contain no-repeat;
    filter: drop-shadow(0 12px 16px rgba(0,0,0,.48));
    transition: filter .24s ease, transform .24s ease, opacity .24s ease;
}

.menu-token::after {
    z-index: 1;
    opacity: 0;
    background: radial-gradient(circle at 50% 40%, rgba(255,201,105,.28), transparent 48%);
    mix-blend-mode: screen;
    transition: opacity .24s ease;
}

.menu-token-visual {
    position: relative;
    z-index: 2;
    width: 42%;
    height: 42%;
    margin-top: -9%;
    color: #e8ad62;
    filter: drop-shadow(0 7px 8px rgba(0,0,0,.46));
}

.menu-token .category-icon {
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.menu-token-label {
    position: absolute;
    z-index: 3;
    left: 13%;
    right: 13%;
    bottom: 15.5%;
    display: flex;
    min-height: 17%;
    align-items: center;
    justify-content: center;
    color: #f9dfad;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.56rem, calc(var(--side-menu-width) * .088), .96rem);
    line-height: .92;
    font-weight: 900;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(35,10,4,.88), 0 0 8px rgba(232,169,93,.20);
    pointer-events: none;
}

.menu-token-filtry .menu-token-label,
.menu-token-vip .menu-token-label,
.menu-token-boxy .menu-token-label {
    font-size: clamp(.46rem, calc(var(--side-menu-width) * .068), .74rem);
}

.menu-token-visual-animated {
    width: 58%;
    height: 58%;
    margin-top: -12%;
    background: none;
    -webkit-mask: none;
    mask: none;
    animation: menuIconBreathe 6.2s ease-in-out infinite;
}

.state-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.985) translateY(1px);
    transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), filter 320ms ease;
    pointer-events: none;
}

.state-icon.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.state-spark {
    position: absolute;
    z-index: 5;
    width: 5px;
    aspect-ratio: 1;
    opacity: 0;
    background: #fff0bd;
    box-shadow: 0 0 8px 2px rgba(255, 190, 73, .62);
    transform: rotate(45deg) scale(.35);
}

.state-spark::before,
.state-spark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 16px;
    background: linear-gradient(transparent, #fff4cc, transparent);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.state-spark::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.state-spark-one { top: 14%; right: 15%; }
.state-spark-two { top: 38%; left: 12%; }
.state-spark-three { right: 16%; bottom: 22%; }

.menu-token.is-icon-active .state-spark-one { animation: stateSpark .9s ease-out 0ms 1; }
.menu-token.is-icon-active .state-spark-two { animation: stateSpark .9s ease-out 120ms 1; }
.menu-token.is-icon-active .state-spark-three { animation: stateSpark .9s ease-out 220ms 1; }

.menu-token.is-hover .menu-token-bg,
.menu-token:focus-visible .menu-token-bg,
.menu-token.is-active .menu-token-bg {
    filter: drop-shadow(0 13px 18px rgba(0,0,0,.52)) drop-shadow(0 0 12px rgba(232,169,93,.18));
}

.menu-token.is-hover,
.menu-token:focus-visible {
    transform: translateX(5px) scale(1.035);
}

.menu-token.is-active {
    transform: translateX(7px) scale(1.055);
}

.menu-token.is-hover::after,
.menu-token:focus-visible::after,
.menu-token.is-active::after {
    opacity: 1;
}

.menu-token.is-active .menu-token-label {
    color: #fff0bd;
    text-shadow: 0 2px 0 rgba(35,10,4,.95), 0 0 12px rgba(255,190,73,.34);
}

@keyframes menuIconBreathe {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(.6deg); }
}

@keyframes stateSpark {
    0% { opacity: 0; transform: rotate(45deg) scale(.25); }
    28% { opacity: 1; transform: rotate(45deg) scale(1); }
    100% { opacity: 0; transform: rotate(70deg) scale(.45); }
}

/* Reset wcześniejszego obrazkowego menu. */
.category-link-image,
.contact-tile-image {
    margin: 0;
}

.category-link-image img,
.contact-tile-image img {
    display: none;
}

@media (max-width: 760px) {
    .menu-token-label {
        font-size: clamp(.46rem, calc(var(--side-menu-width) * .086), .78rem);
        bottom: 15%;
    }

    .menu-token-filtry .menu-token-label,
    .menu-token-vip .menu-token-label,
    .menu-token-boxy .menu-token-label {
        font-size: clamp(.36rem, calc(var(--side-menu-width) * .066), .62rem);
    }

    .menu-token-visual { width: 40%; height: 40%; }
    .menu-token-visual-animated { width: 56%; height: 56%; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-token,
    .menu-token-bg,
    .state-icon {
        transition: none !important;
    }

    .menu-token-visual-animated,
    .state-spark {
        animation: none !important;
    }
}


/* Menu token visual polish: większe ikony, wyżej osadzone, czytelniejsze etykiety. */
.menu-token-visual {
    width: 49%;
    height: 49%;
    margin-top: -20%;
}

.menu-token-visual-animated {
    width: 70%;
    height: 70%;
    margin-top: -23%;
}

.menu-token-vip .menu-token-visual-animated {
    width: 74%;
    height: 74%;
    margin-top: -25%;
}

.menu-token-nowosci .menu-token-visual-animated {
    width: 76%;
    height: 76%;
    margin-top: -24%;
}

.menu-token-label {
    left: 15%;
    right: 15%;
    bottom: 18.8%;
    min-height: 12%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.46rem, calc(var(--side-menu-width) * .068), .72rem);
    line-height: .86;
    font-weight: 900;
    letter-spacing: .005em;
    transform: scaleX(.92);
    transform-origin: center;
    text-shadow:
        0 1px 0 rgba(255,226,169,.20),
        0 2px 0 rgba(35,10,4,.95),
        0 0 7px rgba(0,0,0,.55);
}

.menu-token-filtry .menu-token-label,
.menu-token-vip .menu-token-label,
.menu-token-boxy .menu-token-label {
    left: 11%;
    right: 11%;
    bottom: 18.4%;
    font-size: clamp(.34rem, calc(var(--side-menu-width) * .052), .56rem);
    line-height: .82;
    letter-spacing: -.01em;
    transform: scaleX(.86);
}

.menu-token-nowosci .menu-token-label,
.menu-token-akcesoria .menu-token-label,
.menu-token-bletki .menu-token-label,
.menu-token-onas .menu-token-label,
.menu-token-contact .menu-token-label {
    font-size: clamp(.42rem, calc(var(--side-menu-width) * .064), .68rem);
}

.menu-token.is-active .menu-token-label {
    text-shadow:
        0 1px 0 rgba(255,226,169,.28),
        0 2px 0 rgba(35,10,4,.98),
        0 0 10px rgba(255,190,73,.30);
}

@media (max-width: 760px) {
    .menu-token-visual {
        width: 48%;
        height: 48%;
        margin-top: -20%;
    }

    .menu-token-visual-animated {
        width: 70%;
        height: 70%;
        margin-top: -24%;
    }

    .menu-token-vip .menu-token-visual-animated,
    .menu-token-nowosci .menu-token-visual-animated {
        width: 74%;
        height: 74%;
        margin-top: -25%;
    }

    .menu-token-label {
        bottom: 18.5%;
        font-size: clamp(.38rem, calc(var(--side-menu-width) * .066), .6rem);
        line-height: .84;
    }

    .menu-token-filtry .menu-token-label,
    .menu-token-vip .menu-token-label,
    .menu-token-boxy .menu-token-label {
        font-size: clamp(.28rem, calc(var(--side-menu-width) * .05), .48rem);
        transform: scaleX(.84);
    }
}


/* Fix: bez prostokÄ…tnego przyciemnienia hover/active na nowym menu + formularz jako stary obrazek. */
.menu-token,
.menu-token:hover,
.menu-token:focus-visible,
.menu-token.is-hover,
.menu-token.is-active {
    background: transparent !important;
    box-shadow: none !important;
}

.menu-token::after {
    display: none !important;
}

.menu-token.is-hover .menu-token-bg,
.menu-token:focus-visible .menu-token-bg,
.menu-token.is-active .menu-token-bg {
    filter: drop-shadow(0 13px 18px rgba(0,0,0,.52)) drop-shadow(0 0 12px rgba(232,169,93,.20));
}

.contact-tile-image {
    width: var(--side-menu-width);
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.contact-tile-image img {
    display: block !important;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.44));
}

.contact-tile-image:hover,
.contact-tile-image:focus-visible,
.contact-tile-image.is-hover,
.contact-tile-image.is-active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .contact-tile-image:hover {
        transform: translateX(5px) scale(1.035);
        filter: brightness(1.08) saturate(1.06);
    }
}


/* Fix glow clipping: dajemy animowanym ikonom większy bezpieczny obszar na poświatę. */
.menu-token {
    overflow: visible;
}

.menu-token-visual,
.menu-token-visual-animated {
    overflow: visible;
    contain: none;
}

.state-icon {
    inset: -12%;
    width: 124%;
    height: 124%;
    max-width: none;
    max-height: none;
    overflow: visible;
}

.menu-token-vip .state-icon {
    inset: -9%;
    width: 118%;
    height: 118%;
}

.menu-token-nowosci .state-icon {
    inset: -16%;
    width: 132%;
    height: 132%;
}

.menu-token.is-active .menu-token-visual-animated,
.menu-token.is-icon-active .menu-token-visual-animated {
    filter: drop-shadow(0 0 12px rgba(255, 190, 73, .22));
}

.menu-token.is-active .state-icon-active,
.menu-token.is-icon-active .state-icon-active {
    filter: drop-shadow(0 0 11px rgba(255, 194, 88, .34)) drop-shadow(0 12px 16px rgba(0,0,0,.42));
}

.state-spark {
    z-index: 8;
}


/* Hat animation integration for O nas. */
.menu-token-onas .menu-token-visual-animated {
    width: 72%;
    height: 72%;
    margin-top: -23%;
    transform-origin: 50% 68%;
}

.menu-token-onas .state-icon {
    inset: -11%;
    width: 122%;
    height: 122%;
}

.menu-token-onas.is-hover .menu-token-visual-animated,
.menu-token-onas:focus-visible .menu-token-visual-animated {
    transform: translateY(-3px) rotate(-2deg) scale(1.025);
}

.menu-token-onas.is-active .menu-token-visual-animated,
.menu-token-onas.is-icon-active .menu-token-visual-animated {
    transform: translateY(-5px) rotate(3deg) scale(1.05);
    filter: drop-shadow(0 0 10px rgba(218,142,62,.22));
}


/* Menu ma wyglądać identycznie na starcie i po wejściu w sekcję — bez wygaszania/zmniejszania. */
.jj-hero.is-panel-open .bottom-dock,
.jj-hero.menu-revealed .bottom-dock {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    transform: translateY(-50%) !important;
}

.jj-hero.is-panel-open .category-link,
.jj-hero.is-panel-open .menu-token {
    opacity: 1 !important;
}


/* Menu hover/active bez dodatkowej poświaty CSS — zostają tylko stany obrazków z JS. */
.menu-token-bg,
.menu-token.is-hover .menu-token-bg,
.menu-token:focus-visible .menu-token-bg,
.menu-token.is-active .menu-token-bg {
    filter: drop-shadow(0 12px 16px rgba(0,0,0,.48)) !important;
}

.menu-token-visual,
.menu-token-visual-animated,
.menu-token.is-active .menu-token-visual-animated,
.menu-token.is-icon-active .menu-token-visual-animated,
.menu-token-onas.is-active .menu-token-visual-animated,
.menu-token-onas.is-icon-active .menu-token-visual-animated {
    filter: none !important;
}

.state-icon,
.menu-token.is-active .state-icon-active,
.menu-token.is-icon-active .state-icon-active {
    filter: none !important;
}

.menu-token.is-active .menu-token-label,
.menu-token.is-hover .menu-token-label,
.menu-token:focus-visible .menu-token-label {
    color: #f9dfad !important;
    text-shadow:
        0 1px 0 rgba(255,226,169,.20),
        0 2px 0 rgba(35,10,4,.95),
        0 0 7px rgba(0,0,0,.55) !important;
}


/* Final hard reset: żadnej dodatkowej poświaty CSS na hover/active menu. */
.menu-token,
.menu-token:hover,
.menu-token:focus,
.menu-token:focus-visible,
.menu-token.is-hover,
.menu-token.is-active,
.menu-token.is-icon-active {
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.menu-token-bg,
.menu-token:hover .menu-token-bg,
.menu-token:focus-visible .menu-token-bg,
.menu-token.is-hover .menu-token-bg,
.menu-token.is-active .menu-token-bg,
.menu-token.is-icon-active .menu-token-bg {
    filter: none !important;
    box-shadow: none !important;
}

.menu-token-visual,
.menu-token-visual-animated,
.menu-token:hover .menu-token-visual,
.menu-token:hover .menu-token-visual-animated,
.menu-token:focus-visible .menu-token-visual,
.menu-token:focus-visible .menu-token-visual-animated,
.menu-token.is-hover .menu-token-visual,
.menu-token.is-hover .menu-token-visual-animated,
.menu-token.is-active .menu-token-visual,
.menu-token.is-active .menu-token-visual-animated,
.menu-token.is-icon-active .menu-token-visual,
.menu-token.is-icon-active .menu-token-visual-animated,
.menu-token-onas.is-hover .menu-token-visual-animated,
.menu-token-onas.is-active .menu-token-visual-animated,
.menu-token-onas.is-icon-active .menu-token-visual-animated {
    filter: none !important;
    box-shadow: none !important;
}

.state-icon,
.state-icon-idle,
.state-icon-hover,
.state-icon-active,
.state-icon.is-visible,
.menu-token:hover .state-icon,
.menu-token:focus-visible .state-icon,
.menu-token.is-hover .state-icon,
.menu-token.is-active .state-icon,
.menu-token.is-icon-active .state-icon,
.menu-token.is-active .state-icon-active,
.menu-token.is-icon-active .state-icon-active {
    filter: none !important;
    box-shadow: none !important;
}

.state-spark,
.state-spark::before,
.state-spark::after {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.menu-token::before,
.menu-token::after,
.menu-token-bg::before,
.menu-token-bg::after,
.menu-token-visual::before,
.menu-token-visual::after,
.menu-token-visual-animated::before,
.menu-token-visual-animated::after {
    box-shadow: none !important;
    filter: none !important;
}


/* Final design: menu bez graficznego tła przycisków — zostaje sama ikona i tekst. */
.menu-token-bg {
    display: none !important;
}

.menu-token {
    aspect-ratio: .86;
}

.menu-token-visual {
    margin-top: -8%;
}

.menu-token-visual-animated {
    margin-top: -10%;
}

.menu-token-label {
    bottom: 7%;
    left: 0;
    right: 0;
    color: #f9dfad;
    text-shadow: 0 2px 0 rgba(35,10,4,.95), 0 0 8px rgba(0,0,0,.72) !important;
}


/* Box / zestawy: 4-stanowa animowana skrzynia. */
.menu-token-boxy .menu-token-visual-box {
    width: 58%;
    height: 76%;
    margin-top: -25%;
    transform-origin: 50% 70%;
}

.menu-token-boxy .state-icon {
    inset: -7% -32%;
    width: 164%;
    height: 114%;
    object-fit: contain;
    object-position: center center;
}

.menu-token-boxy.is-hover .menu-token-visual-box,
.menu-token-boxy:focus-visible .menu-token-visual-box {
    transform: translateY(-3px) scale(1.025);
}

.menu-token-boxy.is-active .menu-token-visual-box,
.menu-token-boxy.is-icon-active .menu-token-visual-box {
    transform: translateY(-5px) scale(1.045);
}

@media (max-width: 760px) {
    .menu-token-boxy .menu-token-visual-box {
        width: 60%;
        height: 76%;
        margin-top: -26%;
    }
}


/* Box icon correction: wyrównanie skali/proporcji do pozostałych animowanych ikon. */
.menu-token-boxy .menu-token-visual-box {
    width: 78%;
    height: 62%;
    margin-top: -18%;
    transform-origin: 50% 72%;
}

.menu-token-boxy .state-icon {
    inset: -38% -18%;
    width: 136%;
    height: 176%;
    object-fit: contain;
    object-position: center center;
}

.menu-token-boxy.is-hover .menu-token-visual-box,
.menu-token-boxy:focus-visible .menu-token-visual-box {
    transform: translateY(-2px) scale(1.02);
}

.menu-token-boxy.is-active .menu-token-visual-box,
.menu-token-boxy.is-icon-active .menu-token-visual-box {
    transform: translateY(-3px) scale(1.035);
}

@media (max-width: 760px) {
    .menu-token-boxy .menu-token-visual-box {
        width: 80%;
        height: 62%;
        margin-top: -19%;
    }

    .menu-token-boxy .state-icon {
        inset: -38% -18%;
        width: 136%;
        height: 176%;
    }
}


/* Box icon correction v2: większa skrzynia i stabilniejsze przejście hover(2/3) -> active(4). */
.menu-token-boxy .menu-token-visual-box {
    width: 96%;
    height: 74%;
    margin-top: -23%;
}

.menu-token-boxy .state-icon {
    inset: -42% -24%;
    width: 148%;
    height: 188%;
    object-fit: contain;
    object-position: center center;
}

.menu-token-boxy .state-icon-hover,
.menu-token-boxy .state-icon-open,
.menu-token-boxy .state-icon-active {
    transition-duration: 180ms;
}

.menu-token-boxy.is-hover .menu-token-visual-box,
.menu-token-boxy:focus-visible .menu-token-visual-box {
    transform: translateY(-1px) scale(1.01);
}

.menu-token-boxy.is-active .menu-token-visual-box,
.menu-token-boxy.is-icon-active .menu-token-visual-box {
    transform: translateY(-2px) scale(1.02);
}

@media (max-width: 760px) {
    .menu-token-boxy .menu-token-visual-box {
        width: 98%;
        height: 76%;
        margin-top: -24%;
    }

    .menu-token-boxy .state-icon {
        inset: -43% -25%;
        width: 150%;
        height: 190%;
    }
}


/* Menu interaction polish: po intro przycisk nie zmienia pozycji ani skali; pracuje tylko ikona/tekst. */
.jj-hero.is-menu-intro-complete .menu-token:hover,
.jj-hero.is-menu-intro-complete .menu-token:focus,
.jj-hero.is-menu-intro-complete .menu-token:focus-visible,
.jj-hero.is-menu-intro-complete .menu-token.is-hover,
.jj-hero.is-menu-intro-complete .menu-token.is-active,
.jj-hero.is-menu-intro-complete .menu-token.is-icon-active,
.jj-hero.is-panel-open .menu-token,
.jj-hero.is-panel-open .category-link.is-active {
    transform: none !important;
}

.menu-token:hover .menu-token-bg,
.menu-token:focus-visible .menu-token-bg,
.menu-token.is-hover .menu-token-bg,
.menu-token.is-active .menu-token-bg {
    transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .jj-hero.is-menu-intro-complete .menu-token:hover,
    .jj-hero.is-menu-intro-complete .menu-token.is-hover,
    .jj-hero.is-menu-intro-complete .menu-token.is-active,
    .category-link-image:hover,
    .contact-tile-image:hover {
        transform: none !important;
    }
}

.menu-token .menu-token-visual,
.menu-token .menu-token-visual-animated {
    transition: filter .22s ease, opacity .22s ease;
}

.menu-token .menu-token-label {
    transition: color .18s ease, text-shadow .18s ease, letter-spacing .18s ease, transform .18s ease;
}

.menu-token.is-hover .menu-token-visual,
.menu-token:focus-visible .menu-token-visual,
.menu-token.is-active .menu-token-visual {
    filter: drop-shadow(0 0 7px rgba(244, 184, 87, .22)) !important;
}

.menu-token.is-hover .menu-token-label,
.menu-token:focus-visible .menu-token-label,
.menu-token.is-active .menu-token-label {
    color: #fff0bd !important;
    letter-spacing: .018em;
    transform: scaleX(.94) scale(1.035);
    text-shadow:
        0 1px 0 rgba(255,226,169,.22),
        0 2px 0 rgba(35,10,4,.95),
        0 0 9px rgba(244, 184, 87, .24) !important;
}

.menu-token-filtry.is-hover .menu-token-label,
.menu-token-filtry:focus-visible .menu-token-label,
.menu-token-filtry.is-active .menu-token-label,
.menu-token-vip.is-hover .menu-token-label,
.menu-token-vip:focus-visible .menu-token-label,
.menu-token-vip.is-active .menu-token-label,
.menu-token-boxy.is-hover .menu-token-label,
.menu-token-boxy:focus-visible .menu-token-label,
.menu-token-boxy.is-active .menu-token-label {
    transform: scaleX(.88) scale(1.025);
}

/* Animowane ikony mogą zmieniać obrazek, ale bez przesuwania/skali kontenera. */
.menu-token.is-hover .menu-token-visual-animated,
.menu-token:focus-visible .menu-token-visual-animated,
.menu-token.is-active .menu-token-visual-animated,
.menu-token.is-icon-active .menu-token-visual-animated,
.menu-token-onas.is-hover .menu-token-visual-animated,
.menu-token-onas:focus-visible .menu-token-visual-animated,
.menu-token-onas.is-active .menu-token-visual-animated,
.menu-token-onas.is-icon-active .menu-token-visual-animated,
.menu-token-boxy.is-hover .menu-token-visual-box,
.menu-token-boxy:focus-visible .menu-token-visual-box,
.menu-token-boxy.is-active .menu-token-visual-box,
.menu-token-boxy.is-icon-active .menu-token-visual-box {
    transform: none !important;
}


/* Box icon correction v3: stan 2 pominięty, stabilny hover=open; tekst nie nachodzi na skrzynię. */
.menu-token-boxy .menu-token-visual-box {
    width: 88%;
    height: 62%;
    margin-top: -28%;
}

.menu-token-boxy .state-icon {
    inset: -34% -18%;
    width: 136%;
    height: 168%;
}

.menu-token-boxy .menu-token-label {
    bottom: 7%;
    font-size: clamp(.34rem, calc(var(--side-menu-width) * .05), .54rem);
    transform: scaleX(.86);
}

.menu-token-boxy.is-hover .menu-token-label,
.menu-token-boxy:focus-visible .menu-token-label,
.menu-token-boxy.is-active .menu-token-label {
    transform: scaleX(.88) scale(1.02);
}

.menu-token-boxy .state-icon-hover {
    display: none !important;
}

@media (max-width: 760px) {
    .menu-token-boxy .menu-token-visual-box {
        width: 90%;
        height: 62%;
        margin-top: -29%;
    }

    .menu-token-boxy .state-icon {
        inset: -34% -18%;
        width: 136%;
        height: 168%;
    }

    .menu-token-boxy .menu-token-label {
        bottom: 7%;
        font-size: clamp(.28rem, calc(var(--side-menu-width) * .048), .46rem);
    }
}


/* Box icon correction v4: używa znormalizowanych źródeł; otwieranie rośnie do góry ze stałą bazą. */
.menu-token-boxy .menu-token-visual-box {
    width: 86%;
    height: 86%;
    margin-top: -20%;
    transform-origin: 50% 88%;
}

.menu-token-boxy .state-icon {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.menu-token-boxy .menu-token-label {
    bottom: 4.5%;
    z-index: 5;
}

@media (max-width: 760px) {
    .menu-token-boxy .menu-token-visual-box {
        width: 88%;
        height: 88%;
        margin-top: -21%;
    }

    .menu-token-boxy .state-icon {
        inset: 0;
        width: 100%;
        height: 100%;
    }
}


/* Grinder / akcesoria: 3-stanowa animowana ikona znormalizowana do menu. */
.menu-token-akcesoria .menu-token-visual-grinder {
    width: 82%;
    height: 82%;
    margin-top: -23%;
    transform-origin: 50% 84%;
}

.menu-token-akcesoria .state-icon {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.menu-token-akcesoria .menu-token-label {
    bottom: 5%;
    z-index: 5;
}

@media (max-width: 760px) {
    .menu-token-akcesoria .menu-token-visual-grinder {
        width: 84%;
        height: 84%;
        margin-top: -24%;
    }
}


/* Icon scale harmonization: grinder i box wyrĂłwnane optycznie do crown/star/hat. */
.menu-token-akcesoria .menu-token-visual-grinder {
    width: 74%;
    height: 74%;
    margin-top: -22%;
}

.menu-token-boxy .menu-token-visual-box {
    width: 78%;
    height: 78%;
    margin-top: -22%;
}

.menu-token-akcesoria .state-icon,
.menu-token-boxy .state-icon {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 760px) {
    .menu-token-akcesoria .menu-token-visual-grinder {
        width: 76%;
        height: 76%;
        margin-top: -23%;
    }

    .menu-token-boxy .menu-token-visual-box {
        width: 80%;
        height: 80%;
        margin-top: -23%;
    }
}


/* 09. Social media, audio i privacy gate */
/* Social icons scale: x1.8 względem poprzedniego rozmiaru. */
.social-strip a {
    width: clamp(76px, 6.8vw, 104px);
    height: clamp(76px, 6.8vw, 104px);
}

@media (max-width: 1120px) {
    .social-strip a {
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 760px) {
    .social-strip a {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 420px) {
    .social-strip a {
        width: 49px;
        height: 49px;
    }
}






/* Menu final production system: ikona + wycentrowana etykieta, bez konfliktujÄ…cych override'Ăłw. */
:root {
    --side-menu-offset: clamp(14px, 1.35vw, 24px);
    --side-menu-gap: clamp(2px, .55vh, 7px);
    --side-menu-hit-width: calc(var(--side-menu-width) * 1.85);
}

.bottom-dock {
    left: 0 !important;
    width: calc(var(--side-menu-hit-width) + var(--side-menu-offset)) !important;
    padding-left: var(--side-menu-offset) !important;
    padding-right: calc(var(--side-menu-hit-width) - var(--side-menu-width)) !important;
    gap: var(--side-menu-gap) !important;
    align-items: flex-start !important;
    overflow-x: visible !important;
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%) !important;
}

.category-rail {
    width: var(--side-menu-width) !important;
    flex: 0 0 var(--side-menu-width);
    gap: var(--side-menu-gap) !important;
    align-items: center !important;
}

.bottom-dock::before,
.bottom-dock::after {
    flex-basis: calc((100svh - var(--side-menu-width)) / 2) !important;
    min-height: calc((100svh - var(--side-menu-width)) / 2) !important;
}

.label-mobile {
    display: none;
}

.label-desktop {
    display: inline;
}

.menu-token-label {
    position: absolute;
    z-index: 6;
    left: 50% !important;
    right: auto !important;
    bottom: -4.5% !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: calc(var(--side-menu-hit-width) - 4px) !important;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center !important;
    padding: 0;
    overflow: visible;
    color: #ffedbd;
    background: none !important;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 950;
    line-height: .84;
    letter-spacing: .002em;
    text-align: center !important;
    text-transform: uppercase;
    text-wrap: balance;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    transform: translateX(-50%) !important;
    text-shadow:
        0 1px 0 rgba(24, 6, 2, .82),
        0 3px 5px rgba(0, 0, 0, .58),
        0 0 8px rgba(0, 0, 0, .42),
        0 0 10px rgba(255, 185, 82, .09) !important;
    -webkit-text-stroke: .22px rgba(34, 9, 3, .82);
    pointer-events: none;
}

.menu-token-label::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 24% !important;
    right: 24% !important;
    top: 52%;
    width: auto !important;
    height: .86em;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(8, 2, 1, .20) 0%, rgba(8, 2, 1, .11) 42%, rgba(8, 2, 1, .04) 64%, transparent 78%);
    filter: blur(4px);
    transform: translateY(-50%);
    pointer-events: none;
}

.menu-token-label > span {
    font: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

.menu-token-label-short {
    font-size: clamp(1.18rem, calc(var(--side-menu-width) * .142), 1.62rem) !important;
}

.menu-token-label-medium {
    font-size: clamp(1.02rem, calc(var(--side-menu-width) * .122), 1.38rem) !important;
}

.menu-token-label-long {
    max-width: calc(var(--side-menu-hit-width) - 2px) !important;
    font-size: clamp(.78rem, calc(var(--side-menu-width) * .092), 1.02rem) !important;
    line-height: .76;
    letter-spacing: -.012em;
}

.menu-token.is-hover .menu-token-label,
.menu-token:focus-visible .menu-token-label,
.menu-token.is-active .menu-token-label {
    color: #fff7d8 !important;
    background: none !important;
    transform: translateX(-50%) !important;
}

.menu-token:focus-visible .menu-token-label {
    outline: 2px solid rgba(255, 220, 148, .88);
    outline-offset: 3px;
}

/* Finalna skala ikon — wyrównanie optyczne bez nachodzenia na etykiety. */
.menu-token-bletki .menu-token-visual-bletki,
.menu-token-akcesoria .menu-token-visual-grinder,
.menu-token-boxy .menu-token-visual-box {
    width: 74% !important;
    height: 74% !important;
    margin-top: -21% !important;
}

.menu-token-vip .menu-token-visual-animated,
.menu-token-nowosci .menu-token-visual-animated {
    width: 64% !important;
    height: 64% !important;
    margin-top: -20% !important;
}

.menu-token-onas .menu-token-visual-animated {
    width: 66% !important;
    height: 66% !important;
    margin-top: -13% !important;
}

.menu-token-bletki .state-icon,
.menu-token-akcesoria .state-icon,
.menu-token-boxy .state-icon,
.menu-token-vip .state-icon,
.menu-token-nowosci .state-icon,
.menu-token-onas .state-icon {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center bottom;
}

/* Hover nie skaluje całego przycisku — zmienia się tylko stan/światło ikony z JS. */
.jj-hero.is-menu-intro-complete .menu-token:hover,
.jj-hero.is-menu-intro-complete .menu-token:focus,
.jj-hero.is-menu-intro-complete .menu-token:focus-visible,
.jj-hero.is-menu-intro-complete .menu-token.is-hover,
.jj-hero.is-menu-intro-complete .menu-token.is-active,
.jj-hero.is-menu-intro-complete .menu-token.is-icon-active,
.jj-hero.is-panel-open .menu-token,
.jj-hero.is-panel-open .category-link.is-active {
    filter: none !important;
    box-shadow: none !important;
}

/* Wagon Wheel: tylko perspektywa scrolla; bez dodatkowego zoomu hover i bez rotowania tekstu. */
.is-wheel-menu-active.is-menu-intro-complete .menu-token {
    --wheel-offset: 0;
    --wheel-abs: 0;
    transform:
        translateX(calc(var(--wheel-abs) * 8px))
        scale(calc(1.04 - (var(--wheel-abs) * .30))) !important;
    opacity: calc(1 - (var(--wheel-abs) * .28));
    transform-origin: 50% 50%;
    transition: opacity .18s ease;
    will-change: transform, opacity;
}

.is-wheel-menu-active.is-menu-intro-complete .menu-token.is-hover,
.is-wheel-menu-active.is-menu-intro-complete .menu-token:focus-visible,
.is-wheel-menu-active.is-menu-intro-complete .menu-token.is-active {
    opacity: 1;
    transform:
        translateX(calc(var(--wheel-abs) * 8px))
        scale(calc(1.04 - (var(--wheel-abs) * .30))) !important;
}

.is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-visual,
.is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-visual-animated,
.is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-label {
    transform: translateX(-50%) !important;
}

.is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-visual,
.is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-visual-animated {
    transform: none !important;
}

.side-menu-scroll-cue {
    left: calc(var(--side-menu-offset) + (var(--side-menu-width) / 2)) !important;
}

@media (max-width: 1120px) {
    :root {
        --side-menu-offset: 12px;
        --side-menu-hit-width: calc(var(--side-menu-width) * 1.9);
    }

    .menu-token-label-short {
        font-size: clamp(1.02rem, calc(var(--side-menu-width) * .14), 1.30rem) !important;
    }

    .menu-token-label-medium {
        font-size: clamp(.92rem, calc(var(--side-menu-width) * .12), 1.12rem) !important;
    }

    .menu-token-label-long {
        font-size: clamp(.72rem, calc(var(--side-menu-width) * .088), .90rem) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --side-menu-offset: 2px;
        --side-menu-gap: 2px;
        --side-menu-hit-width: calc(var(--side-menu-width) * 2.02);
    }

    .bottom-dock {
        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }

    .label-desktop {
        display: none;
    }

    .label-mobile {
        display: inline;
    }

    .menu-token-label {
        bottom: -5.5% !important;
        max-width: calc(var(--side-menu-hit-width) - 2px) !important;
        line-height: .76;
        letter-spacing: -.012em;
    }

    .menu-token-label::before {
        left: 28% !important;
        right: 28% !important;
        height: .9em;
    }

    .menu-token-label-short {
        font-size: clamp(.92rem, calc(var(--side-menu-width) * .118), 1.12rem) !important;
    }

    .menu-token-label-medium {
        font-size: clamp(.82rem, calc(var(--side-menu-width) * .102), .98rem) !important;
    }

    .menu-token-label-long {
        font-size: clamp(.66rem, calc(var(--side-menu-width) * .078), .78rem) !important;
        line-height: .68;
    }

    .is-wheel-menu-active.is-menu-intro-complete .menu-token,
    .is-wheel-menu-active.is-menu-intro-complete .menu-token.is-hover,
    .is-wheel-menu-active.is-menu-intro-complete .menu-token:focus-visible,
    .is-wheel-menu-active.is-menu-intro-complete .menu-token.is-active {
        transform:
            translateX(calc(var(--wheel-abs) * 7px))
            scale(calc(1.03 - (var(--wheel-abs) * .26))) !important;
        opacity: calc(1 - (var(--wheel-abs) * .22));
    }
}

/* EN labels with two required lines are rendered once, avoiding duplicate
   desktop/mobile text layers in the compact category rail. */
.jj-hero[data-language="en"] .menu-token-bletki .label-single,
.jj-hero[data-language="en"] .menu-token-nowosci .label-single {
    display: inline-block;
    max-width: 7ch;
}

@media (prefers-reduced-motion: reduce) {
    .is-wheel-menu-active.is-menu-intro-complete .menu-token,
    .is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-visual,
    .is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-visual-animated,
    .is-wheel-menu-active.is-menu-intro-complete .menu-token .menu-token-label {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .menu-token-label {
        transform: translateX(-50%) !important;
    }
}


/* Menu intro restored safely: działa tylko przed zakończeniem intro, nie konfliktuje z wheel scroll. */
.jj-hero.is-menu-intro-pending .menu-token,
.jj-hero.is-menu-intro-pending .contact-tile-image {
    opacity: 0;
    transform: translateX(-24px) scale(.94) !important;
}

.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .menu-token,
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .contact-tile-image {
    animation: menuTrailIn .62s cubic-bezier(.18, .86, .22, 1.08) both;
    will-change: transform, opacity;
}

.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(1) { animation-delay: .34s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(2) { animation-delay: .43s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(3) { animation-delay: .52s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(4) { animation-delay: .61s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(5) { animation-delay: .70s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(6) { animation-delay: .79s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .category-rail .menu-token:nth-child(7) { animation-delay: .88s; }
.jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .contact-tile-image { animation-delay: .97s; }

@keyframes menuTrailIn {
    0% {
        opacity: 0;
        transform: translateX(-24px) scale(.94);
    }
    62% {
        opacity: 1;
        transform: translateX(3px) scale(1.015);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-menu-intro-pending .menu-token,
    .jj-hero.is-menu-intro-pending .contact-tile-image,
    .jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .menu-token,
    .jj-hero.is-menu-intro-ready:not(.is-menu-intro-complete) .contact-tile-image {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}


/* Final audio/social header placement: gramofon z lewej, social media po prawej. */
:root {
    --jj-header-edge: clamp(12px, 1.8vw, 24px);
    --jj-header-gap: clamp(5px, .7vw, 9px);
    --jj-social-icon-size: clamp(58px, 5vw, 82px);
    --jj-audio-icon-size: clamp(58px, 5vw, 82px);
}

.social-strip {
    top: var(--jj-header-edge) !important;
    right: var(--jj-header-edge) !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: var(--jj-header-gap) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}

.social-strip::before,
.social-strip::after {
    display: none !important;
    content: none !important;
}

.social-strip a {
    width: var(--jj-social-icon-size) !important;
    height: var(--jj-social-icon-size) !important;
}

.audio-control {
    position: absolute;
    z-index: 46;
    top: var(--jj-header-edge) !important;
    right: calc(var(--jj-header-edge) + (var(--jj-social-icon-size) * 3) + (var(--jj-header-gap) * 2) + var(--jj-header-gap)) !important;
    transform: none !important;
}

.audio-toggle {
    width: var(--jj-audio-icon-size) !important;
    min-width: var(--jj-audio-icon-size) !important;
    height: var(--jj-audio-icon-size) !important;
    min-height: var(--jj-audio-icon-size) !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: .92;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.44));
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.audio-toggle-icon {
    width: 100% !important;
    height: 100% !important;
    flex-basis: auto !important;
    display: block;
    background: url('../img/musicoff.webp') center / contain no-repeat;
}

.audio-toggle-icon::before,
.audio-toggle-icon::after {
    display: none !important;
    content: none !important;
}

.audio-toggle[aria-pressed="true"] .audio-toggle-icon {
    background-image: url('../img/musicon.webp');
    filter: none;
}

.audio-toggle[aria-pressed="false"] .audio-toggle-icon {
    opacity: 1;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
    opacity: 1;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(239,184,108,.20));
    transform: translateY(-1px);
}

.audio-toggle:focus-visible {
    outline: 2px solid rgba(255, 221, 154, .9);
    outline-offset: 3px;
}

.audio-toggle.is-loading {
    cursor: wait;
    opacity: .78;
}

@media (max-width: 760px) {
    :root {
        --jj-header-edge: 8px;
        --jj-header-gap: 3px;
        --jj-social-icon-size: clamp(44px, 12.6vw, 52px);
        --jj-audio-icon-size: clamp(44px, 12.6vw, 52px);
    }
}

@media (max-width: 374px) {
    :root {
        --jj-social-icon-size: 42px;
        --jj-audio-icon-size: 42px;
        --jj-header-gap: 2px;
    }
}


/* Emergency final restore: entry gate premium board + audio gramophone only. */
.privacy-gate {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    place-items: center !important;
    min-height: 100svh;
    padding: clamp(10px, 2vh, 22px) clamp(12px, 3vw, 28px) !important;
    overflow: hidden;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 50% 42%, rgba(225, 117, 45, .20), transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(0, 0, 0, .34) 82%),
        linear-gradient(180deg, rgba(12, 3, 7, .70), rgba(45, 9, 17, .58) 48%, rgba(7, 2, 4, .76)) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .62s ease, visibility .62s ease;
}

.privacy-gate.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.privacy-gate-card {
    position: relative !important;
    z-index: 1;
    width: min(760px, calc(100vw - 24px)) !important;
    max-height: calc(100svh - clamp(20px, 4vh, 44px));
    margin: auto !important;
    padding: clamp(18px, 2.8vh, 30px) clamp(16px, 3.5vw, 44px) clamp(16px, 2.6vh, 28px) !important;
    border: 1px solid rgba(239, 184, 108, .62) !important;
    background:
        linear-gradient(135deg, rgba(255, 228, 178, .06), transparent 28%, rgba(255, 183, 96, .05) 72%, transparent),
        radial-gradient(circle at 50% 0, rgba(255, 211, 139, .16), transparent 46%),
        linear-gradient(180deg, rgba(67, 18, 18, .96), rgba(30, 8, 10, .98) 52%, rgba(12, 4, 6, .98)) !important;
    color: var(--cream) !important;
    text-align: center !important;
    box-shadow:
        0 34px 92px rgba(0, 0, 0, .66),
        0 0 0 1px rgba(64, 25, 10, .88),
        inset 0 1px 0 rgba(255, 228, 178, .18),
        inset 0 0 58px rgba(0, 0, 0, .34) !important;
    opacity: 0;
    transform: translateY(14px) scale(.99);
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
    transition: opacity .68s ease .08s, transform .68s cubic-bezier(.2, .72, .2, 1) .08s;
}

.privacy-gate.is-visible .privacy-gate-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.privacy-gate-frame {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 214, 145, .34);
    pointer-events: none;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.privacy-gate-card::before,
.privacy-gate-card::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 0;
    width: min(420px, 66%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 224, 170, .88), transparent);
    box-shadow: 0 0 18px rgba(232,169,93,.30);
    pointer-events: none;
}

.privacy-gate-card::before { top: clamp(14px, 2vh, 20px); }
.privacy-gate-card::after { bottom: clamp(14px, 2vh, 20px); }

.privacy-gate-mark,
.privacy-gate-kicker,
.privacy-gate h2,
.privacy-gate p,
.privacy-gate-actions,
.privacy-gate-underage {
    position: relative;
    z-index: 1;
}

.privacy-gate-mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    color: #ffd895;
    font-size: 1.05rem;
    text-shadow: 0 0 18px rgba(255, 190, 93, .46);
}

.age-gate-mark {
    width: clamp(44px, 6vh, 62px);
    height: clamp(44px, 6vh, 62px);
    margin-bottom: clamp(5px, 1vh, 9px);
    border: 1px solid rgba(255, 216, 149, .76);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 222, 168, .16), transparent 58%),
        linear-gradient(180deg, rgba(105, 42, 19, .72), rgba(29, 8, 8, .88));
    color: #ffe2ad;
    font-size: clamp(1rem, 2.2vw, 1.38rem);
    font-weight: 950;
    letter-spacing: .02em;
    box-shadow:
        0 0 0 5px rgba(95, 38, 16, .34),
        inset 0 1px 0 rgba(255, 235, 196, .18),
        0 12px 28px rgba(0, 0, 0, .36);
}

.privacy-gate-kicker {
    margin: 0 0 clamp(5px, 1vh, 9px) !important;
    color: rgba(255, 226, 184, .78) !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    letter-spacing: .32em !important;
    text-transform: uppercase !important;
}

.privacy-gate h2 {
    margin: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    color: #ffe0aa !important;
    font-size: clamp(2rem, 6.8vh, 3.85rem) !important;
    line-height: .88 !important;
    font-style: italic !important;
    text-shadow: 0 7px 26px rgba(0,0,0,.60), 0 0 22px rgba(178, 85, 28, .18) !important;
}

.privacy-gate h2::after {
    content: "";
    display: block;
    width: min(260px, 54%);
    height: 1px;
    margin: clamp(9px, 1.6vh, 16px) auto 0;
    background: linear-gradient(90deg, transparent, rgba(228,169,93,.78), transparent);
}

.privacy-gate p {
    margin: 0 auto !important;
    max-width: 58ch;
    color: rgba(255, 235, 205, .86) !important;
    font-size: clamp(.82rem, 1.75vh, .92rem) !important;
    line-height: 1.46 !important;
}

.privacy-gate .privacy-gate-lead {
    margin-top: clamp(9px, 1.5vh, 14px) !important;
    color: rgba(255, 231, 193, .92) !important;
    font-size: clamp(.9rem, 2vh, 1.02rem) !important;
    font-weight: 700 !important;
}

.privacy-gate .privacy-gate-notice {
    margin-top: clamp(7px, 1.2vh, 11px) !important;
    max-width: 60ch;
    color: rgba(255, 235, 205, .72) !important;
    font-size: clamp(.72rem, 1.55vh, .84rem) !important;
    line-height: 1.42 !important;
}

.privacy-gate a {
    color: #ffdea8 !important;
    font-weight: 850;
    text-decoration-line: underline;
    text-decoration-color: rgba(255, 222, 168, .56);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.privacy-gate-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1.8vw, 16px) !important;
    margin-top: clamp(14px, 2.3vh, 22px) !important;
}

.privacy-gate-button {
    position: relative !important;
    min-height: clamp(86px, 13vh, 108px) !important;
    padding: clamp(12px, 2vh, 17px) clamp(12px, 2vw, 18px) !important;
    border: 1px solid rgba(239,184,108,.50) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 226, 184, .05), transparent 34%),
        linear-gradient(180deg, rgba(35, 10, 10, .78), rgba(11, 3, 5, .90)) !important;
    color: #f8d5a0 !important;
    font: inherit !important;
    text-align: center !important;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,228,178,.10), 0 16px 30px rgba(0,0,0,.30) !important;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    transition: transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease, color .32s ease;
    touch-action: manipulation;
}

.privacy-gate-button::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 224, 170, .16);
    pointer-events: none;
    transition: border-color .32s ease;
}

.privacy-gate-button-icon,
.privacy-gate-button-title,
.privacy-gate-button small {
    position: relative;
    z-index: 1;
    display: block !important;
}

.privacy-gate-button-icon {
    margin-bottom: 8px;
    color: rgba(255, 215, 151, .76);
    font-size: 1.05rem;
    line-height: 1;
}

.privacy-gate-button-title {
    font-size: clamp(.82rem, 1.25vw, 1rem) !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    line-height: 1.18 !important;
    text-transform: uppercase !important;
}

.privacy-gate-button small {
    margin-top: 8px;
    color: rgba(255, 226, 184, .66) !important;
    font-size: clamp(.62rem, .9vw, .72rem) !important;
    font-weight: 850 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.privacy-gate-button-loud {
    border-color: rgba(255, 205, 126, .70) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 181, 85, .18), transparent 54%),
        linear-gradient(180deg, rgba(113, 42, 21, .88), rgba(38, 9, 8, .94)) !important;
}

.privacy-gate-button:hover,
.privacy-gate-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 226, 176, .92) !important;
    color: #ffe7bb !important;
    box-shadow: inset 0 1px 0 rgba(255,228,178,.18), 0 20px 38px rgba(0,0,0,.38), 0 0 28px rgba(228, 169, 93, .18) !important;
}

.privacy-gate-button:focus-visible {
    outline: 2px solid rgba(255, 221, 154, .88);
    outline-offset: 4px;
}

.privacy-gate-underage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: clamp(9px, 1.5vh, 14px) auto 0;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 222, 168, .34);
    background: transparent;
    color: rgba(255, 235, 205, .72);
    font: inherit;
    font-size: clamp(.74rem, 1vw, .86rem);
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: color .24s ease, border-color .24s ease, transform .24s ease;
}

.privacy-gate-underage:hover,
.privacy-gate-underage:focus-visible {
    color: #ffe7bb;
    border-color: rgba(255, 226, 176, .88);
    transform: translateY(-1px);
}

.privacy-gate-underage:focus-visible {
    outline: 2px solid rgba(255, 221, 154, .88);
    outline-offset: 4px;
}

/* Gramofon audio: tylko grafika, bez etykiety tekstowej. */
.audio-toggle-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

:root {
    --jj-social-icon-size: clamp(68px, 5.8vw, 96px);
    --jj-audio-icon-size: clamp(86px, 7.4vw, 124px);
}

.audio-toggle-icon {
    background-size: 168% 168% !important;
}

@media (max-width: 760px) {
    .privacy-gate {
        align-items: center !important;
        padding: 10px !important;
    }

    .privacy-gate-card {
        width: min(100%, calc(100vw - 20px)) !important;
        max-height: calc(100svh - 20px);
        padding: 17px 15px 14px !important;
        clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    }

    .privacy-gate-kicker {
        font-size: .58rem !important;
    }

    .privacy-gate h2 {
        font-size: clamp(1.82rem, 9.2vh, 2.72rem) !important;
    }

    .privacy-gate .privacy-gate-lead {
        font-size: .86rem !important;
        line-height: 1.34 !important;
    }

    .privacy-gate .privacy-gate-notice {
        font-size: .72rem !important;
        line-height: 1.34 !important;
    }

    .privacy-gate-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .privacy-gate-button {
        min-height: 66px !important;
        padding: 10px 12px !important;
    }

    .privacy-gate-button-title {
        font-size: .72rem !important;
    }

    .privacy-gate-button-icon {
        margin-bottom: 5px;
        font-size: .92rem;
    }

    .privacy-gate-button small {
        margin-top: 4px;
        font-size: .58rem !important;
    }

    .privacy-gate-underage {
        margin-top: 11px;
        font-size: .72rem;
    }

    :root {
        --jj-social-icon-size: clamp(44px, 12.6vw, 52px);
        --jj-audio-icon-size: clamp(58px, 16vw, 70px);
    }

    .audio-control {
        top: 3px !important;
    }
}

@media (max-height: 760px) and (min-width: 761px) {
    .privacy-gate-card {
        width: min(720px, calc(100vw - 28px)) !important;
        padding-block: 18px 16px !important;
    }

    .age-gate-mark {
        width: 48px;
        height: 48px;
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .privacy-gate h2 {
        font-size: clamp(1.9rem, 6.2vh, 3rem) !important;
    }

    .privacy-gate .privacy-gate-notice {
        font-size: .74rem !important;
        line-height: 1.36 !important;
    }

    .privacy-gate-actions {
        margin-top: 12px !important;
    }

    .privacy-gate-button {
        min-height: 76px !important;
        padding-block: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-gate,
    .privacy-gate-card,
    .privacy-gate-button {
        transition-duration: .01ms !important;
        animation: none !important;
    }

    .privacy-gate-card,
    .privacy-gate.is-visible .privacy-gate-card,
    .privacy-gate-button:hover,
    .privacy-gate-button:active {
        transform: none !important;
    }
}


/* Final gramophone crop correction: dopasowanie do wielkości ikon social. */
:root {
    --jj-social-icon-size: clamp(68px, 5.8vw, 96px);
    --jj-audio-icon-size: calc(var(--jj-social-icon-size) * 1.08);
    --jj-audio-crop-scale: 1.72;
}

.audio-control {
    top: calc(var(--jj-header-edge) - 1px) !important;
    right: calc(var(--jj-header-edge) + (var(--jj-social-icon-size) * 3) + (var(--jj-header-gap) * 3)) !important;
}

.audio-toggle {
    width: var(--jj-audio-icon-size) !important;
    min-width: var(--jj-audio-icon-size) !important;
    height: var(--jj-audio-icon-size) !important;
    min-height: var(--jj-audio-icon-size) !important;
    overflow: hidden !important;
}

.audio-toggle-icon {
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: calc(100% * var(--jj-audio-crop-scale)) calc(100% * var(--jj-audio-crop-scale)) !important;
}

@media (max-width: 760px) {
    :root {
        --jj-social-icon-size: clamp(44px, 12.6vw, 52px);
        --jj-audio-icon-size: calc(var(--jj-social-icon-size) * 1.08);
        --jj-audio-crop-scale: 1.72;
    }

    .audio-control {
        top: calc(var(--jj-header-edge) - 1px) !important;
        right: calc(var(--jj-header-edge) + (var(--jj-social-icon-size) * 3) + (var(--jj-header-gap) * 3)) !important;
    }
}


/* Hotfix: gramofon bez ucinania + Bletki bez pergaminowego panelu. */
.audio-toggle {
    overflow: visible !important;
}

.audio-toggle-icon {
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

:root {
    --jj-audio-icon-size: clamp(98px, 7.8vw, 132px);
}

@media (max-width: 760px) {
    :root {
        --jj-audio-icon-size: clamp(58px, 15vw, 68px);
    }
}

.scene-character-layout {
    display: none;
}

.scene-panel.scene-panel-layout-character {
    width: min(860px, calc(100vw - var(--side-menu-width) - 86px)) !important;
    max-height: min(76svh, 620px) !important;
    min-height: 430px;
    padding: clamp(58px, 5vh, 76px) clamp(250px, 27vw, 330px) clamp(32px, 4vh, 46px) clamp(30px, 4vw, 54px) !important;
    overflow: visible !important;
    color: var(--cream) !important;
    border: 1px solid rgba(239,184,108,.54) !important;
    background:
        radial-gradient(circle at 76% 32%, rgba(232, 117, 55, .18), transparent 36%),
        radial-gradient(circle at 0 0, rgba(255, 214, 145, .12), transparent 34%),
        linear-gradient(180deg, rgba(65, 18, 16, .94), rgba(20, 6, 8, .97) 60%, rgba(10, 3, 5, .98)) !important;
    box-shadow:
        0 30px 78px rgba(0,0,0,.54),
        inset 0 1px 0 rgba(255,228,178,.14),
        inset 0 0 44px rgba(0,0,0,.28) !important;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px) !important;
    text-align: left !important;
}

.scene-panel.scene-panel-layout-character::before {
    left: 14px !important;
    right: 14px !important;
    top: 14px !important;
    height: calc(100% - 28px) !important;
    background:
        linear-gradient(90deg, rgba(255, 214, 145, .18), transparent 7%, transparent 93%, rgba(255, 214, 145, .18)),
        linear-gradient(180deg, rgba(255, 214, 145, .18), transparent 8%, transparent 92%, rgba(255, 214, 145, .18)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 214, 145, .20) !important;
    opacity: 1 !important;
}

.scene-panel.scene-panel-layout-character::after {
    width: min(280px, 44%) !important;
    height: 1px !important;
    top: clamp(44px, 5.4vh, 62px) !important;
    left: clamp(30px, 4vw, 54px) !important;
    transform: none !important;
    background: linear-gradient(90deg, rgba(255, 224, 170, .72), transparent) !important;
    opacity: .9 !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-kicker {
    color: rgba(255, 226, 184, .76) !important;
    text-shadow: none !important;
}

.scene-panel.scene-panel-layout-character h2 {
    color: #ffe0aa !important;
    text-shadow: 0 7px 24px rgba(0,0,0,.56) !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-text {
    margin-left: 0 !important;
    color: rgba(255,235,205,.84) !important;
    font-weight: 700 !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-actions {
    justify-content: flex-start !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-button-secondary {
    color: #f8dca7 !important;
    border-color: rgba(239,184,108,.42) !important;
    background: rgba(14,5,7,.52) !important;
}

.scene-panel.scene-panel-layout-character .scene-character-layout {
    position: absolute;
    right: clamp(-20px, -1.4vw, -8px);
    bottom: -10px;
    z-index: 3;
    display: block;
    width: clamp(245px, 30vw, 380px);
    height: min(92%, 510px);
    pointer-events: none;
}

.scene-panel.scene-panel-layout-character .scene-character-stage {
    position: absolute;
    inset: 0;
}

.scene-panel.scene-panel-layout-character .scene-character-image {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 26px 28px rgba(0,0,0,.44));
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg,
.scene-panel.scene-panel-layout-character .scene-smoke-mobile,
.scene-panel.scene-panel-layout-character .scene-smoke {
    position: absolute;
    opacity: .72;
    pointer-events: none;
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg {
    right: 46%;
    bottom: 34%;
    width: 42%;
    height: 48%;
    color: rgba(246, 221, 186, .34);
}

.scene-panel.scene-panel-layout-character .scene-smoke-mobile {
    display: none;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    position: absolute;
    right: clamp(190px, 19vw, 250px);
    top: clamp(58px, 8vh, 86px);
    width: min(250px, 70vw);
    padding: 12px 14px;
    border: 1px solid rgba(239,184,108,.42);
    background: linear-gradient(180deg, rgba(34,10,8,.90), rgba(11,3,5,.94));
    color: rgba(255,235,205,.88);
    font-size: .82rem;
    line-height: 1.45;
    box-shadow: 0 16px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,228,178,.10);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
    opacity: 1;
    transform: translateY(0);
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    margin: 0;
}

@media (max-width: 1120px) {
    .scene-panel.scene-panel-layout-character {
        width: min(760px, calc(100vw - var(--side-menu-width) - 52px)) !important;
        padding-right: clamp(210px, 30vw, 280px) !important;
    }

    .scene-panel.scene-panel-layout-character .scene-character-layout {
        width: clamp(220px, 32vw, 310px);
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble {
        right: clamp(160px, 22vw, 210px);
    }
}

@media (max-width: 760px) {
    .scene-panel.scene-panel-layout-character {
        width: calc(100vw - var(--side-menu-width) - 28px) !important;
        min-height: 0;
        max-height: calc(100svh - 92px) !important;
        padding: 50px 16px 168px !important;
        overflow: auto !important;
        text-align: center !important;
    }

    .scene-panel.scene-panel-layout-character::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: linear-gradient(90deg, transparent, rgba(255, 224, 170, .72), transparent) !important;
    }

    .scene-panel.scene-panel-layout-character .scene-panel-actions {
        justify-content: center !important;
    }

    .scene-panel.scene-panel-layout-character .scene-character-layout {
        right: 0;
        bottom: -12px;
        width: min(210px, 54vw);
        height: 210px;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble {
        right: auto;
        left: 8px;
        top: auto;
        bottom: 110px;
        width: min(210px, calc(100% - 26px));
        font-size: .72rem;
    }
}


/* Restore Bletki character scene: bez kartki/tla, postać + dym + dymek na żywej scenie. */
.scene-panel.scene-panel-layout-character {
    width: min(1180px, calc(100vw - var(--side-menu-width) - 70px)) !important;
    height: min(78svh, 680px) !important;
    max-height: none !important;
    min-height: 430px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    color: var(--cream) !important;
    text-align: left !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.scene-panel.scene-panel-layout-character::before,
.scene-panel.scene-panel-layout-character::after {
    display: none !important;
    content: none !important;
}

.jj-hero.is-panel-open .scene-panel.scene-panel-layout-character {
    transform: translate(-50%, -50%) scale(1) !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-close {
    left: 0 !important;
    top: 0 !important;
    border-color: rgba(239,184,108,.46) !important;
    background: linear-gradient(180deg, rgba(61,20,13,.78), rgba(15,5,7,.86)) !important;
    color: #f8d5a0 !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,228,178,.12) !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-kicker,
.scene-panel.scene-panel-layout-character h2,
.scene-panel.scene-panel-layout-character .scene-panel-text,
.scene-panel.scene-panel-layout-character .scene-panel-actions {
    position: relative;
    z-index: 4;
    width: min(430px, 42vw);
    margin-left: clamp(8px, 1.2vw, 18px) !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-kicker {
    margin-top: clamp(58px, 8vh, 84px) !important;
    margin-bottom: 8px !important;
    color: rgba(255, 226, 184, .82) !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.72) !important;
}

.scene-panel.scene-panel-layout-character h2 {
    margin-bottom: clamp(10px, 1.6vh, 16px) !important;
    color: #ffe0aa !important;
    text-shadow: 0 8px 28px rgba(0,0,0,.70), 0 0 18px rgba(108, 29, 12, .24) !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-text {
    color: rgba(255, 235, 205, .90) !important;
    font-weight: 750 !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.74) !important;
}

.scene-panel.scene-panel-layout-character .scene-panel-actions {
    justify-content: flex-start !important;
    margin-top: clamp(18px, 3vh, 28px) !important;
}

.scene-panel.scene-panel-layout-character .scene-character-layout {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
}

.scene-panel.scene-panel-layout-character .scene-character-stage {
    position: absolute !important;
    right: clamp(20px, 5vw, 86px) !important;
    bottom: clamp(-34px, -3vh, -12px) !important;
    width: clamp(320px, 34vw, 520px) !important;
    height: min(96%, 640px) !important;
}

.scene-panel.scene-panel-layout-character .scene-character-image {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    filter: drop-shadow(0 28px 32px rgba(0,0,0,.50)) !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg {
    position: absolute !important;
    right: 42% !important;
    bottom: 43% !important;
    display: block !important;
    width: clamp(150px, 15vw, 230px) !important;
    height: clamp(210px, 24vw, 330px) !important;
    overflow: visible !important;
    opacity: .82 !important;
    color: rgba(246, 221, 186, .42) !important;
    filter: blur(.15px) drop-shadow(0 0 16px rgba(246,221,186,.12));
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg path {
    fill: rgba(246, 221, 186, .10);
    stroke: rgba(246, 221, 186, .34);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 100%;
    animation: bletkiSmokeDrift 6.8s ease-in-out infinite alternate;
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-mist { fill: rgba(246, 221, 186, .075); stroke: rgba(246, 221, 186, .20); }
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-blob { fill: rgba(246, 221, 186, .06); stroke: rgba(246, 221, 186, .26); }
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-line,
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-thread { fill: none; stroke: rgba(246, 221, 186, .38); }
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-mist-two,
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-blob-two,
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-line-two,
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-thread-two { animation-delay: -2.2s; }
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-blob-three,
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-line-three,
.scene-panel.scene-panel-layout-character .scene-smoke-svg .smoke-line-five { animation-delay: -4.1s; }

.scene-panel.scene-panel-layout-character .scene-smoke,
.scene-panel.scene-panel-layout-character .scene-smoke-mobile {
    position: absolute !important;
    pointer-events: none !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-mobile {
    display: none !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke {
    right: 51% !important;
    bottom: 52% !important;
    width: clamp(36px, 4.4vw, 66px) !important;
    height: clamp(36px, 4.4vw, 66px) !important;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246,221,186,.24), rgba(246,221,186,.06) 50%, transparent 72%);
    filter: blur(10px);
    opacity: .42;
    animation: bletkiSmokePuff 5.6s ease-in-out infinite;
}

.scene-panel.scene-panel-layout-character .scene-smoke-two {
    right: 47% !important;
    bottom: 60% !important;
    animation-delay: -1.7s;
}

.scene-panel.scene-panel-layout-character .scene-smoke-three {
    right: 44% !important;
    bottom: 68% !important;
    animation-delay: -3.4s;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    position: absolute !important;
    right: clamp(250px, 30vw, 460px) !important;
    top: clamp(70px, 10vh, 118px) !important;
    z-index: 5 !important;
    width: min(290px, 30vw) !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(239,184,108,.48) !important;
    background: linear-gradient(180deg, rgba(38,10,8,.88), rgba(11,3,5,.92)) !important;
    color: rgba(255,235,205,.92) !important;
    font-size: clamp(.78rem, 1vw, .92rem) !important;
    line-height: 1.48 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,228,178,.10) !important;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .34s ease, transform .34s ease;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: 18px;
    width: 24px;
    height: 18px;
    background: rgba(16, 4, 5, .92);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
    opacity: 1;
    transform: translateY(0);
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    margin: 0 !important;
}

@keyframes bletkiSmokeDrift {
    0% { opacity: .46; transform: translate3d(0, 8px, 0) scale(.96) rotate(-1deg); }
    55% { opacity: .78; transform: translate3d(-8px, -8px, 0) scale(1.03) rotate(1.2deg); }
    100% { opacity: .52; transform: translate3d(7px, -22px, 0) scale(1.08) rotate(-.6deg); }
}

@keyframes bletkiSmokePuff {
    0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.6); }
    38% { opacity: .34; }
    100% { opacity: 0; transform: translate3d(-24px, -76px, 0) scale(1.55); }
}

@media (max-width: 760px) {
    .scene-panel.scene-panel-layout-character {
        width: calc(100vw - var(--side-menu-width) - 26px) !important;
        height: calc(100svh - 86px) !important;
        min-height: 0 !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .scene-panel.scene-panel-layout-character .scene-panel-kicker,
    .scene-panel.scene-panel-layout-character h2,
    .scene-panel.scene-panel-layout-character .scene-panel-text,
    .scene-panel.scene-panel-layout-character .scene-panel-actions {
        width: min(100%, 330px) !important;
        margin-left: 0 !important;
    }

    .scene-panel.scene-panel-layout-character .scene-panel-kicker {
        margin-top: 52px !important;
    }

    .scene-panel.scene-panel-layout-character .scene-character-stage {
        right: -8px !important;
        bottom: -18px !important;
        width: min(260px, 66vw) !important;
        height: min(350px, 52svh) !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble {
        right: auto !important;
        left: 0 !important;
        top: auto !important;
        bottom: clamp(154px, 28svh, 230px) !important;
        width: min(238px, calc(100% - 8px)) !important;
        font-size: .72rem !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble::after {
        right: 34px;
        bottom: -13px;
        width: 18px;
        height: 18px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .scene-panel.scene-panel-layout-character .scene-smoke-svg {
        right: 38% !important;
        bottom: 40% !important;
        width: 132px !important;
        height: 188px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-panel.scene-panel-layout-character .scene-smoke-svg path,
    .scene-panel.scene-panel-layout-character .scene-smoke {
        animation: none !important;
    }
}


/* Bletki final: tylko kowboj od dolu po prawej + dym/papieros + dymek tekstu. */
.scene-panel.scene-panel-layout-character {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
}

.jj-hero.is-panel-open .scene-panel.scene-panel-layout-character {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.scene-panel.scene-panel-layout-character::before,
.scene-panel.scene-panel-layout-character::after,
.scene-panel.scene-panel-layout-character .scene-panel-close,
.scene-panel.scene-panel-layout-character .scene-panel-kicker,
.scene-panel.scene-panel-layout-character h2,
.scene-panel.scene-panel-layout-character .scene-panel-text,
.scene-panel.scene-panel-layout-character .scene-panel-actions {
    display: none !important;
}

.scene-panel.scene-panel-layout-character .scene-character-layout {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

.scene-panel.scene-panel-layout-character .scene-character-stage {
    position: absolute !important;
    right: clamp(10px, 3vw, 56px) !important;
    bottom: 0 !important;
    width: clamp(360px, 34vw, 560px) !important;
    height: clamp(520px, 78svh, 820px) !important;
}

.scene-panel.scene-panel-layout-character .scene-character-image {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    filter: drop-shadow(0 30px 34px rgba(0,0,0,.48)) !important;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    position: absolute !important;
    z-index: 10 !important;
    right: clamp(390px, 35vw, 610px) !important;
    left: auto !important;
    top: clamp(210px, 31vh, 330px) !important;
    bottom: auto !important;
    width: min(315px, 25vw) !important;
    padding: 14px 17px !important;
    border: 1px solid rgba(239,184,108,.52) !important;
    background: linear-gradient(180deg, rgba(38,10,8,.88), rgba(11,3,5,.92)) !important;
    color: rgba(255,235,205,.94) !important;
    font-size: clamp(.8rem, .95vw, .94rem) !important;
    line-height: 1.48 !important;
    text-align: left !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,228,178,.10) !important;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
    pointer-events: none !important;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: 18px;
    width: 24px;
    height: 18px;
    background: rgba(16, 4, 5, .92);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    margin: 0 !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg {
    position: absolute !important;
    right: clamp(190px, 17vw, 285px) !important;
    bottom: clamp(250px, 39vh, 395px) !important;
    display: block !important;
    width: clamp(140px, 13vw, 230px) !important;
    height: clamp(205px, 23vw, 330px) !important;
    overflow: visible !important;
    opacity: .82 !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke {
    right: clamp(250px, 22vw, 355px) !important;
    bottom: clamp(330px, 48vh, 475px) !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-two {
    right: clamp(270px, 24vw, 390px) !important;
    bottom: clamp(390px, 55vh, 545px) !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-three {
    right: clamp(300px, 26vw, 430px) !important;
    bottom: clamp(450px, 62vh, 625px) !important;
}

@media (max-width: 760px) {
    .scene-panel.scene-panel-layout-character {
        height: 100svh !important;
    }

    .scene-panel.scene-panel-layout-character .scene-character-stage {
        right: -18px !important;
        bottom: 0 !important;
        width: min(78vw, 320px) !important;
        height: min(72svh, 520px) !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble {
        right: min(56vw, 220px) !important;
        top: auto !important;
        bottom: min(44svh, 330px) !important;
        width: min(210px, 48vw) !important;
        padding: 10px 12px !important;
        font-size: .7rem !important;
        line-height: 1.42 !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble::after {
        right: -12px;
        bottom: 14px;
        width: 18px;
        height: 14px;
    }

    .scene-panel.scene-panel-layout-character .scene-smoke-svg {
        right: min(36vw, 150px) !important;
        bottom: min(36svh, 255px) !important;
        width: 118px !important;
        height: 172px !important;
    }

    .scene-panel.scene-panel-layout-character .scene-smoke,
    .scene-panel.scene-panel-layout-character .scene-smoke-two,
    .scene-panel.scene-panel-layout-character .scene-smoke-three {
        display: none !important;
    }
}


/* Bletki layout correction: scena obok menu, kowboj po prawej od dolu, dymek po lewej. */
.scene-panel.scene-panel-layout-character {
    --bletki-scene-left: calc(var(--side-menu-width) + var(--side-menu-offset, 0px) + clamp(18px, 2.6vw, 42px));
    --bletki-scene-right: clamp(18px, 3vw, 64px);
    position: absolute !important;
    left: var(--bletki-scene-left) !important;
    right: var(--bletki-scene-right) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 100svh !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

.jj-hero.is-panel-open .scene-panel.scene-panel-layout-character {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.scene-panel.scene-panel-layout-character::before,
.scene-panel.scene-panel-layout-character::after,
.scene-panel.scene-panel-layout-character .scene-panel-close,
.scene-panel.scene-panel-layout-character .scene-panel-kicker,
.scene-panel.scene-panel-layout-character h2,
.scene-panel.scene-panel-layout-character .scene-panel-text,
.scene-panel.scene-panel-layout-character .scene-panel-actions {
    display: none !important;
}

.scene-panel.scene-panel-layout-character .scene-character-layout {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

.scene-panel.scene-panel-layout-character .scene-character-stage {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: clamp(380px, 34vw, 570px) !important;
    height: min(92svh, 820px) !important;
}

.scene-panel.scene-panel-layout-character .scene-character-image {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    filter: drop-shadow(0 30px 34px rgba(0,0,0,.48)) !important;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    position: absolute !important;
    z-index: 10 !important;
    right: clamp(390px, 36vw, 620px) !important;
    left: auto !important;
    top: clamp(250px, 39vh, 390px) !important;
    bottom: auto !important;
    width: min(340px, 30vw) !important;
    min-height: 92px;
    padding: 18px 22px !important;
    border: 3px solid #2a0d08 !important;
    border-radius: 48% 52% 50% 46% / 44% 45% 55% 56% !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .96), rgba(255, 239, 199, .96) 48%, rgba(246, 213, 151, .97) 100%) !important;
    color: #2b1209 !important;
    font-size: clamp(.86rem, 1vw, 1rem) !important;
    font-weight: 850 !important;
    line-height: 1.42 !important;
    text-align: center !important;
    text-shadow: none !important;
    box-shadow:
        0 12px 0 rgba(42, 13, 8, .14),
        0 18px 34px rgba(0,0,0,.30),
        inset 0 0 0 2px rgba(255,255,255,.34) !important;
    clip-path: none !important;
    pointer-events: none !important;
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    content: "";
    position: absolute;
    right: -30px;
    bottom: 18px;
    width: 52px;
    height: 34px;
    background: rgba(255, 237, 196, .98);
    border-right: 3px solid #2a0d08;
    border-bottom: 3px solid #2a0d08;
    transform: rotate(-18deg) skewX(-12deg);
    clip-path: polygon(0 16%, 100% 50%, 0 86%);
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: -8px;
    width: 62%;
    height: 8px;
    border-radius: 999px;
    background: rgba(42,13,8,.20);
    filter: blur(5px);
}

.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    position: relative;
    z-index: 1;
    margin: 0 !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-svg {
    position: absolute !important;
    right: clamp(198px, 17vw, 292px) !important;
    bottom: clamp(300px, 44vh, 455px) !important;
    display: block !important;
    width: clamp(138px, 13vw, 228px) !important;
    height: clamp(205px, 23vw, 330px) !important;
    overflow: visible !important;
    opacity: .78 !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke {
    right: clamp(258px, 22vw, 360px) !important;
    bottom: clamp(375px, 52vh, 535px) !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-two {
    right: clamp(280px, 24vw, 396px) !important;
    bottom: clamp(430px, 60vh, 610px) !important;
}

.scene-panel.scene-panel-layout-character .scene-smoke-three {
    right: clamp(306px, 26vw, 432px) !important;
    bottom: clamp(485px, 68vh, 690px) !important;
}

@media (max-width: 1120px) {
    .scene-panel.scene-panel-layout-character {
        --bletki-scene-left: calc(var(--side-menu-width) + var(--side-menu-offset, 0px) + 18px);
        --bletki-scene-right: 18px;
    }

    .scene-panel.scene-panel-layout-character .scene-character-stage {
        width: clamp(330px, 38vw, 460px) !important;
        height: min(88svh, 680px) !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble {
        right: clamp(320px, 40vw, 500px) !important;
        top: clamp(230px, 38vh, 350px) !important;
        width: min(300px, 32vw) !important;
    }
}

@media (max-width: 760px) {
    .scene-panel.scene-panel-layout-character {
        --bletki-scene-left: calc(var(--side-menu-width) + var(--side-menu-offset, 0px) + 8px);
        --bletki-scene-right: 6px;
    }

    .scene-panel.scene-panel-layout-character .scene-character-stage {
        right: -10px !important;
        bottom: 0 !important;
        width: min(64vw, 300px) !important;
        height: min(68svh, 500px) !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble {
        right: min(50vw, 225px) !important;
        top: auto !important;
        bottom: min(40svh, 300px) !important;
        width: min(210px, 48vw) !important;
        min-height: 0;
        padding: 12px 14px !important;
        border-width: 2px !important;
        font-size: .7rem !important;
        line-height: 1.36 !important;
    }

    .scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -20px;
        bottom: 13px;
        width: 34px;
        height: 24px;
        border-right-width: 2px;
        border-bottom-width: 2px;
    }

    .scene-panel.scene-panel-layout-character .scene-smoke-svg {
        right: min(33vw, 142px) !important;
        bottom: min(35svh, 255px) !important;
        width: 112px !important;
        height: 168px !important;
    }
}


/* Bletki definitive placement: kowboj po PRAWEJ, od dolnej krawedzi, dymek po LEWEJ. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character {
    --bletki-left-safe: calc(var(--side-menu-width) + var(--side-menu-offset, 0px) + clamp(16px, 2vw, 34px));
    position: absolute !important;
    left: var(--bletki-left-safe) !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 100svh !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-layout {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    pointer-events: none !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    position: absolute !important;
    left: auto !important;
    right: clamp(-18px, -1vw, -8px) !important;
    top: auto !important;
    bottom: -7px !important;
    width: clamp(430px, 34vw, 620px) !important;
    height: clamp(620px, 91svh, 900px) !important;
    transform-origin: right bottom !important;
    transform: translate3d(0, 0, 0) !important;
    animation: bletkiCowboyRise .62s cubic-bezier(.18, .82, .24, 1) both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-image {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    transform: translateY(8px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    position: absolute !important;
    z-index: 20 !important;
    left: clamp(190px, 19vw, 360px) !important;
    right: auto !important;
    top: clamp(255px, 42vh, 395px) !important;
    bottom: auto !important;
    width: clamp(280px, 25vw, 410px) !important;
    min-height: 104px !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px 24px !important;
    border: 4px solid #2b1008 !important;
    border-radius: 52% 48% 51% 49% / 45% 47% 53% 55% !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.98), rgba(255,243,211,.98) 48%, rgba(246,218,162,.98) 100%) !important;
    color: #291108 !important;
    font-size: clamp(.9rem, 1.05vw, 1.08rem) !important;
    font-weight: 900 !important;
    line-height: 1.34 !important;
    text-align: center !important;
    text-shadow: none !important;
    box-shadow: 0 9px 0 rgba(43,16,8,.18), 0 18px 36px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.42) !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: bletkiBubblePop .42s cubic-bezier(.2, .9, .24, 1.18) .18s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    content: "" !important;
    position: absolute !important;
    right: -46px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    width: 74px !important;
    height: 42px !important;
    background: rgba(255, 240, 204, .98) !important;
    border: 0 !important;
    border-right: 4px solid #2b1008 !important;
    border-bottom: 4px solid #2b1008 !important;
    transform: translateY(-50%) rotate(-8deg) !important;
    clip-path: polygon(0 22%, 100% 50%, 0 78%) !important;
    z-index: -1 !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::after {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    right: auto !important;
    bottom: -13px !important;
    width: 64% !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(43,16,8,.20) !important;
    filter: blur(5px) !important;
    clip-path: none !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-svg {
    right: clamp(248px, 20vw, 370px) !important;
    bottom: clamp(360px, 51vh, 560px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke {
    right: clamp(306px, 25vw, 430px) !important;
    bottom: clamp(435px, 59vh, 640px) !important;
}

@keyframes bletkiCowboyRise {
    0% { opacity: 0; transform: translate3d(34px, 80px, 0) scale(.985); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bletkiBubblePop {
    0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.92); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        right: -14px !important;
        bottom: -7px !important;
        width: clamp(360px, 38vw, 500px) !important;
        height: clamp(560px, 86svh, 760px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(120px, 17vw, 240px) !important;
        top: clamp(255px, 42vh, 365px) !important;
        width: clamp(250px, 28vw, 340px) !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character {
        --bletki-left-safe: calc(var(--side-menu-width) + var(--side-menu-offset, 0px) + 6px);
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        right: -18px !important;
        bottom: -6px !important;
        width: min(62vw, 295px) !important;
        height: min(70svh, 520px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        top: auto !important;
        bottom: min(40svh, 310px) !important;
        width: min(205px, 50vw) !important;
        min-height: 0 !important;
        padding: 11px 13px !important;
        border-width: 2px !important;
        font-size: .69rem !important;
        line-height: 1.3 !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -24px !important;
        width: 38px !important;
        height: 24px !important;
        border-right-width: 2px !important;
        border-bottom-width: 2px !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-svg {
        right: min(38vw, 150px) !important;
        bottom: min(37svh, 280px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        animation: none !important;
    }
}


/* Bletki motion/detail refinement: 6-8% od prawej, wejscie od dolu, dymek po chwili z kropkami. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    right: clamp(64px, 7vw, 138px) !important;
    bottom: -8px !important;
    transform-origin: 50% 100% !important;
    animation: bletkiCowboyRiseFromTrail .82s cubic-bezier(.18, .78, .18, 1) both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-image {
    transform: translateY(10px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    left: clamp(170px, 18vw, 340px) !important;
    right: auto !important;
    opacity: 0 !important;
    transform-origin: 78% 70% !important;
    animation: none !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
    animation: bletkiBubbleThoughtIn .46s cubic-bezier(.2, .9, .22, 1.12) .92s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    content: "" !important;
    position: absolute !important;
    left: auto !important;
    right: -104px !important;
    top: 58% !important;
    bottom: auto !important;
    width: 92px !important;
    height: 46px !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 12px 30px, rgba(255, 240, 204, .98) 0 7px, #2b1008 7px 9px, transparent 9px),
        radial-gradient(circle at 43px 21px, rgba(255, 240, 204, .98) 0 10px, #2b1008 10px 13px, transparent 13px),
        radial-gradient(circle at 78px 10px, rgba(255, 240, 204, .98) 0 14px, #2b1008 14px 17px, transparent 17px) !important;
    transform: none !important;
    clip-path: none !important;
    z-index: 0 !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-svg {
    right: clamp(330px, 27vw, 510px) !important;
    bottom: clamp(360px, 51vh, 560px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke {
    right: clamp(388px, 32vw, 570px) !important;
    bottom: clamp(435px, 59vh, 640px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-two {
    right: clamp(410px, 34vw, 606px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-three {
    right: clamp(436px, 36vw, 642px) !important;
}

@keyframes bletkiCowboyRiseFromTrail {
    0% {
        opacity: 0;
        transform: translate3d(0, 14vh, 0) scale(.992);
        filter: saturate(.96) brightness(.92);
    }
    58% {
        opacity: 1;
        transform: translate3d(0, -8px, 0) scale(1.003);
        filter: saturate(1.02) brightness(1.01);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
    }
}

@keyframes bletkiBubbleThoughtIn {
    0% {
        opacity: 0;
        transform: translate3d(18px, 12px, 0) scale(.82);
    }
    68% {
        opacity: 1;
        transform: translate3d(-2px, -2px, 0) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        right: clamp(42px, 6vw, 84px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(90px, 14vw, 210px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -82px !important;
        width: 76px !important;
        transform: scale(.86) !important;
        transform-origin: left center !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        right: clamp(12px, 5vw, 24px) !important;
        bottom: -7px !important;
        animation-duration: .7s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        bottom: min(40svh, 310px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
        animation-delay: .78s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -45px !important;
        top: 56% !important;
        width: 48px !important;
        height: 28px !important;
        background:
            radial-gradient(circle at 7px 19px, rgba(255, 240, 204, .98) 0 4px, #2b1008 4px 5.5px, transparent 6px),
            radial-gradient(circle at 24px 13px, rgba(255, 240, 204, .98) 0 6px, #2b1008 6px 8px, transparent 8px),
            radial-gradient(circle at 43px 7px, rgba(255, 240, 204, .98) 0 8px, #2b1008 8px 10px, transparent 10px) !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* Bletki hotfix: dymek widoczny po opoznieniu, dym przy papierosie. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    left: clamp(250px, 27vw, 520px) !important;
    right: auto !important;
    top: clamp(300px, 43vh, 420px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(14px, 10px, 0) scale(.92) !important;
    transition:
        opacity .34s ease .95s,
        visibility 0s linear .95s,
        transform .42s cubic-bezier(.2, .9, .22, 1.12) .95s !important;
    animation: none !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    animation: none !important;
}

/* Dym jest dzieckiem stage, więc pozycjonujemy go lokalnie przy ustach/papierosie, a nie względem całego viewportu. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
    left: auto !important;
    right: 54% !important;
    top: auto !important;
    bottom: 40% !important;
    width: clamp(118px, 11vw, 185px) !important;
    height: clamp(170px, 18vw, 270px) !important;
    transform: rotate(-8deg) !important;
    transform-origin: 50% 100% !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
    left: auto !important;
    right: 62% !important;
    top: auto !important;
    bottom: 49% !important;
    width: clamp(30px, 3.5vw, 54px) !important;
    height: clamp(30px, 3.5vw, 54px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-two {
    right: 66% !important;
    bottom: 57% !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-three {
    right: 69% !important;
    bottom: 65% !important;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(130px, 20vw, 260px) !important;
        top: clamp(285px, 42vh, 385px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        right: 53% !important;
        bottom: 41% !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        top: auto !important;
        bottom: min(43svh, 320px) !important;
        transition-delay: .78s, .78s, .78s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        right: 50% !important;
        bottom: 42% !important;
        width: 104px !important;
        height: 154px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }
}


/* Bletki composition tune: cala grupa bardziej w lewo, dym nizej/lewo, kropki bez ucinania. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    right: clamp(150px, 13vw, 250px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    left: clamp(210px, 22vw, 430px) !important;
    top: clamp(360px, 50vh, 485px) !important;
    overflow: visible !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    right: -118px !important;
    top: 63% !important;
    width: 104px !important;
    height: 54px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 14px 36px, rgba(255, 240, 204, .98) 0 7px, #2b1008 7px 9px, transparent 9.5px),
        radial-gradient(circle at 50px 25px, rgba(255, 240, 204, .98) 0 10px, #2b1008 10px 13px, transparent 13.5px),
        radial-gradient(circle at 88px 12px, rgba(255, 240, 204, .98) 0 14px, #2b1008 14px 17px, transparent 17.5px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
    right: 62% !important;
    bottom: 34% !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
    right: 70% !important;
    bottom: 43% !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-two {
    right: 73% !important;
    bottom: 50% !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-three {
    right: 76% !important;
    bottom: 57% !important;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        right: clamp(74px, 10vw, 130px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(96px, 15vw, 210px) !important;
        top: clamp(330px, 49vh, 430px) !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        right: clamp(28px, 8vw, 44px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        top: auto !important;
        bottom: min(38svh, 290px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -52px !important;
        top: 60% !important;
        width: 54px !important;
        height: 32px !important;
        background:
            radial-gradient(circle at 8px 22px, rgba(255, 240, 204, .98) 0 4px, #2b1008 4px 5.5px, transparent 6px),
            radial-gradient(circle at 27px 15px, rgba(255, 240, 204, .98) 0 6px, #2b1008 6px 8px, transparent 8px),
            radial-gradient(circle at 48px 8px, rgba(255, 240, 204, .98) 0 8px, #2b1008 8px 10px, transparent 10px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        right: 57% !important;
        bottom: 36% !important;
    }
}


/* Bletki bubble tune: dymek wyzej i dalej od kowboja. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    left: clamp(160px, 17vw, 330px) !important;
    top: clamp(315px, 43vh, 415px) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    right: -136px !important;
    top: 68% !important;
    width: 122px !important;
    height: 62px !important;
    background:
        radial-gradient(circle at 15px 44px, rgba(255, 240, 204, .98) 0 7px, #2b1008 7px 9px, transparent 9.5px),
        radial-gradient(circle at 58px 31px, rgba(255, 240, 204, .98) 0 10px, #2b1008 10px 13px, transparent 13.5px),
        radial-gradient(circle at 104px 14px, rgba(255, 240, 204, .98) 0 14px, #2b1008 14px 17px, transparent 17.5px) !important;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(70px, 11vw, 170px) !important;
        top: clamp(300px, 43vh, 390px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -104px !important;
        width: 98px !important;
        height: 52px !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        bottom: min(44svh, 330px) !important;
        top: auto !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -58px !important;
        width: 60px !important;
    }
}


/* Bletki entrance fix: panel nie przelatuje z centrum/lewego gornego rogu, animuje sie tylko kowboj od dolu. */
#scenePanel.scene-panel.scene-panel-layout-character {
    transform: none !important;
    transition: opacity .18s ease, visibility .18s ease !important;
    will-change: auto !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character {
    transform: none !important;
    transition: opacity .18s ease, visibility .18s ease !important;
}

#scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    opacity: 0;
    transform: translate3d(0, 18vh, 0) scale(.995) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    opacity: 1;
    transform-origin: 50% 100% !important;
    animation: bletkiCowboyOnlyFromBottom .86s cubic-bezier(.18, .82, .2, 1) both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-image {
    animation: none !important;
}

@keyframes bletkiCowboyOnlyFromBottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 18vh, 0) scale(.995);
    }
    70% {
        opacity: 1;
        transform: translate3d(0, -5px, 0) scale(1.002);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        transform: translate3d(0, 12vh, 0) scale(.995) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        animation-duration: .72s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #scenePanel.scene-panel.scene-panel-layout-character,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character,
    #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* Bletki entrance polish: wyrazniejszy, ale lekki jump/fade od dolu. */
#scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    opacity: 0 !important;
    transform: translate3d(0, 22vh, 0) scale(.965) !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    opacity: 1 !important;
    animation: bletkiCowboySoftJumpIn .92s cubic-bezier(.16, .86, .22, 1) both !important;
    will-change: transform, opacity, filter;
}

@keyframes bletkiCowboySoftJumpIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 22vh, 0) scale(.965);
        filter: saturate(.94) brightness(.88) blur(.4px);
    }
    46% {
        opacity: 1;
        transform: translate3d(0, -18px, 0) scale(1.01);
        filter: saturate(1.04) brightness(1.03) blur(0);
    }
    68% {
        opacity: 1;
        transform: translate3d(0, 7px, 0) scale(.998);
        filter: none;
    }
    84% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.002);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
    }
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        transform: translate3d(0, 16vh, 0) scale(.97) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
        animation: bletkiCowboySoftJumpInMobile .78s cubic-bezier(.16, .86, .22, 1) both !important;
    }
}

@keyframes bletkiCowboySoftJumpInMobile {
    0% {
        opacity: 0;
        transform: translate3d(0, 16vh, 0) scale(.97);
        filter: saturate(.94) brightness(.88);
    }
    52% {
        opacity: 1;
        transform: translate3d(0, -10px, 0) scale(1.008);
        filter: none;
    }
    74% {
        opacity: 1;
        transform: translate3d(0, 4px, 0) scale(.999);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


/* Bletki desktop smoke boost: wiecej dymu, mocniejszy i bardziej rozmyty. */
@media (min-width: 761px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        width: clamp(165px, 15vw, 270px) !important;
        height: clamp(245px, 28vw, 410px) !important;
        opacity: 1 !important;
        filter: blur(1.25px) drop-shadow(0 0 18px rgba(246,221,186,.20)) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg path {
        stroke-width: 1.65 !important;
        animation-duration: 8.4s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-mist {
        fill: rgba(246, 221, 186, .14) !important;
        stroke: rgba(246, 221, 186, .26) !important;
        filter: blur(1.8px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-blob {
        fill: rgba(246, 221, 186, .115) !important;
        stroke: rgba(246, 221, 186, .32) !important;
        filter: blur(1.45px) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-thread {
        fill: none !important;
        stroke: rgba(246, 221, 186, .46) !important;
        stroke-width: 1.45 !important;
        filter: blur(1.9px) !important;
        opacity: .78 !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
        display: block !important;
        width: clamp(52px, 5.8vw, 92px) !important;
        height: clamp(52px, 5.8vw, 92px) !important;
        background: radial-gradient(circle, rgba(246,221,186,.34), rgba(246,221,186,.12) 48%, transparent 74%) !important;
        filter: blur(15px) !important;
        opacity: .62 !important;
        animation-duration: 6.2s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-two {
        opacity: .52 !important;
        transform: scale(1.18);
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-three {
        opacity: .44 !important;
        transform: scale(1.32);
    }
}


/* Bletki smoke vertical tune: dym nizej przy papierosie. */
@media (min-width: 761px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        bottom: 27% !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
        bottom: 36% !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-two {
        bottom: 43% !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-three {
        bottom: 50% !important;
    }
}


/* Bletki smoke intro: dym narasta na starcie, potem przechodzi w stale dymienie. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
    transform-origin: 58% 100% !important;
    animation: bletkiSmokeGrowIn .95s ease-out .42s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg path {
    animation-name: bletkiSmokeDrift !important;
    animation-duration: 8.4s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-fill-mode: none !important;
    animation-delay: 1.22s !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-mist-two,
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-blob-two,
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line-two,
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-thread-two {
    animation-delay: 1.38s !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-blob-three,
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line-three,
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line-five {
    animation-delay: 1.54s !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
    animation-delay: 1.05s !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-two {
    animation-delay: 1.72s !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-three {
    animation-delay: 2.38s !important;
}

@keyframes bletkiSmokeGrowIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(.22) rotate(-8deg);
        filter: blur(3px) drop-shadow(0 0 0 rgba(246,221,186,0));
    }
    45% {
        opacity: .46;
        transform: translate3d(-4px, 9px, 0) scale(.58) rotate(-8deg);
        filter: blur(2.4px) drop-shadow(0 0 8px rgba(246,221,186,.08));
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(-8deg);
        filter: blur(1.25px) drop-shadow(0 0 18px rgba(246,221,186,.20));
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        animation-duration: .78s !important;
        animation-delay: .34s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg path {
        animation-delay: 1s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg {
        animation: none !important;
        opacity: 1 !important;
        transform: rotate(-8deg) !important;
    }
}


/* Bletki speech bubble typography: font x2. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    width: clamp(420px, 38vw, 620px) !important;
    min-height: 150px !important;
    padding: 24px 34px !important;
    font-size: clamp(1.8rem, 2.1vw, 2.16rem) !important;
    line-height: 1.12 !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    right: -150px !important;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        width: clamp(340px, 38vw, 470px) !important;
        min-height: 126px !important;
        padding: 20px 26px !important;
        font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        width: min(260px, 54vw) !important;
        padding: 14px 16px !important;
        font-size: 1.12rem !important;
        line-height: 1.08 !important;
    }
}


/* Bletki speech typography refinement: lzejszy, wezszy, bardziej western/druk. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.55rem, 1.85vw, 1.95rem) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    font-stretch: condensed;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        font-size: clamp(1.2rem, 2.1vw, 1.55rem) !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        font-size: 1rem !important;
        line-height: 1.08 !important;
    }
}


/* Bletki speech final positioning: mniejszy, wyzej i mniej nachodzi na kowboja. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    left: clamp(180px, 20vw, 390px) !important;
    top: clamp(345px, 46vh, 455px) !important;
    width: clamp(390px, 34vw, 560px) !important;
    min-height: 132px !important;
    padding: 22px 32px !important;
    font-size: clamp(1.42rem, 1.65vw, 1.78rem) !important;
    line-height: 1.08 !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    right: -142px !important;
    top: 66% !important;
    width: 126px !important;
    height: 58px !important;
    background:
        radial-gradient(circle at 14px 41px, rgba(255, 240, 204, .98) 0 6px, #2b1008 6px 8px, transparent 8.5px),
        radial-gradient(circle at 57px 29px, rgba(255, 240, 204, .98) 0 9px, #2b1008 9px 11.5px, transparent 12px),
        radial-gradient(circle at 104px 14px, rgba(255, 240, 204, .98) 0 13px, #2b1008 13px 16px, transparent 16.5px) !important;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(76px, 12vw, 190px) !important;
        top: clamp(320px, 45vh, 410px) !important;
        width: clamp(315px, 36vw, 430px) !important;
        min-height: 112px !important;
        padding: 18px 24px !important;
        font-size: clamp(1.18rem, 2vw, 1.48rem) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -108px !important;
        width: 100px !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        bottom: min(45svh, 335px) !important;
        top: auto !important;
        width: min(245px, 52vw) !important;
        min-height: 0 !important;
        padding: 13px 15px !important;
        font-size: .96rem !important;
        line-height: 1.08 !important;
    }
}


/* Bletki visible correction: mocniejsze przesuniecie dymku w lewo i w gore. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    left: clamp(70px, 12vw, 240px) !important;
    top: clamp(275px, 38vh, 365px) !important;
    width: clamp(360px, 31vw, 510px) !important;
    min-height: 118px !important;
    padding: 20px 30px !important;
    font-size: clamp(1.30rem, 1.48vw, 1.62rem) !important;
    line-height: 1.08 !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    right: -168px !important;
    top: 72% !important;
    width: 154px !important;
    height: 66px !important;
    background:
        radial-gradient(circle at 16px 48px, rgba(255, 240, 204, .98) 0 6px, #2b1008 6px 8px, transparent 8.5px),
        radial-gradient(circle at 70px 34px, rgba(255, 240, 204, .98) 0 9px, #2b1008 9px 11.5px, transparent 12px),
        radial-gradient(circle at 132px 15px, rgba(255, 240, 204, .98) 0 13px, #2b1008 13px 16px, transparent 16.5px) !important;
}

@media (max-width: 1120px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: clamp(34px, 7vw, 118px) !important;
        top: clamp(280px, 39vh, 350px) !important;
        width: clamp(290px, 34vw, 390px) !important;
        font-size: clamp(1.08rem, 1.78vw, 1.34rem) !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
        right: -126px !important;
        width: 118px !important;
    }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        left: 0 !important;
        bottom: min(47svh, 350px) !important;
        top: auto !important;
        width: min(232px, 50vw) !important;
        font-size: .92rem !important;
    }
}


/* Custom cursor: westernowy kursor + mniejszy wariant nad elementami interaktywnymi. */
@media (hover: hover) and (pointer: fine) {
    html,
    body,
    .jj-page,
    .jj-hero {
        cursor: url('../img/ui/cursor/kursor-default.png') 10 8, auto;
    }

    a,
    button,
    [role="button"],
    input,
    textarea,
    select,
    summary,
    label,
    .category-link,
    .menu-token,
    .contact-tile,
    .audio-toggle,
    .scene-panel-button,
    .scene-panel-close,
    [data-scene-trigger],
    [data-scene-close],
    [data-audio-toggle],
    [data-privacy-choice] {
        cursor: url('../img/ui/cursor/kursor-hover.png') 7 6, pointer;
    }
}


/* Smooth custom cursor: default = poprzedni hover, hover = 2x mniejszy z płynną animacją. */
@media (hover: hover) and (pointer: fine) {
    .has-jj-custom-cursor,
    .has-jj-custom-cursor body,
    .has-jj-custom-cursor * {
        cursor: none !important;
    }

    .jj-custom-cursor {
        position: fixed;
        z-index: 2147483647;
        left: 0;
        top: 0;
        width: 44px;
        height: 44px;
        display: block;
        opacity: 0;
        pointer-events: none;
        user-select: none;
        background: url('../img/ui/cursor/kursor-default.png') center / contain no-repeat;
        transform: translate3d(calc(var(--cursor-x, -100px) - 10px), calc(var(--cursor-y, -100px) - 8px), 0) scale(1);
        transform-origin: 10px 8px;
        transition: opacity .16s ease, transform .18s cubic-bezier(.2, .8, .2, 1), width .18s ease, height .18s ease, background-image .18s ease;
        will-change: transform, opacity, width, height;
    }

    .jj-custom-cursor.is-visible {
        opacity: 1;
    }

    .jj-custom-cursor.is-hover {
        width: 22px;
        height: 22px;
        background-image: url('../img/ui/cursor/kursor-hover.png');
        transform: translate3d(calc(var(--cursor-x, -100px) - 5px), calc(var(--cursor-y, -100px) - 4px), 0) scale(1);
        transform-origin: 5px 4px;
    }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    .jj-custom-cursor {
        display: none !important;
    }
}


/* Custom cursor polish: wolniejsze przejście i srebrny hover dla lepszego kontrastu na złotych ikonach. */
@media (hover: hover) and (pointer: fine) {
    .jj-custom-cursor {
        transition:
            opacity .18s ease,
            transform .42s cubic-bezier(.16, .84, .26, 1),
            width .42s cubic-bezier(.16, .84, .26, 1),
            height .42s cubic-bezier(.16, .84, .26, 1),
            background-image .20s ease,
            filter .42s ease;
    }

    .jj-custom-cursor.is-hover {
        background-image: url('../img/ui/cursor/kursor-hover-silver.png');
        filter:
            drop-shadow(0 1px 1px rgba(8, 4, 2, .75))
            drop-shadow(0 0 7px rgba(255, 255, 255, .34));
    }
}


/* Custom cursor click feedback: lekki złoty błysk tylko w momencie kliknięcia. */
@media (hover: hover) and (pointer: fine) {
    .jj-custom-cursor.is-click {
        animation: jjCursorGoldClick .34s ease-out 1;
    }
}

@keyframes jjCursorGoldClick {
    0% {
        filter:
            drop-shadow(0 1px 1px rgba(8, 4, 2, .75))
            drop-shadow(0 0 4px rgba(255, 255, 255, .24));
    }
    34% {
        filter:
            sepia(1) saturate(1.85) hue-rotate(345deg) brightness(1.32)
            drop-shadow(0 0 9px rgba(255, 194, 88, .62))
            drop-shadow(0 0 16px rgba(255, 150, 40, .26));
    }
    100% {
        filter:
            drop-shadow(0 1px 1px rgba(8, 4, 2, .75))
            drop-shadow(0 0 7px rgba(255, 255, 255, .34));
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-custom-cursor.is-click {
        animation: none !important;
    }
}


/* Menu label proximity final: stanowczo mniejszy odstęp między ikoną a etykietą. */
.menu-token-label,
.menu-token.is-hover .menu-token-label,
.menu-token:focus-visible .menu-token-label,
.menu-token.is-active .menu-token-label {
    bottom: 8% !important;
}

.menu-token-label-long,
.menu-token-boxy .menu-token-label,
.menu-token-vip .menu-token-label,
.menu-token-filtry .menu-token-label {
    bottom: 6.5% !important;
}

.menu-token-nowosci .menu-token-label,
.menu-token-onas .menu-token-label {
    bottom: 9.5% !important;
}

.menu-token-bletki .menu-token-label,
.menu-token-akcesoria .menu-token-label {
    bottom: 7.5% !important;
}

@media (max-width: 760px) {
    .menu-token-label,
    .menu-token.is-hover .menu-token-label,
    .menu-token:focus-visible .menu-token-label,
    .menu-token.is-active .menu-token-label {
        bottom: 7% !important;
    }

    .menu-token-label-long,
    .menu-token-boxy .menu-token-label,
    .menu-token-vip .menu-token-label,
    .menu-token-filtry .menu-token-label {
        bottom: 5.5% !important;
    }

    .menu-token-nowosci .menu-token-label,
    .menu-token-onas .menu-token-label {
        bottom: 8% !important;
    }
}


/* Mobile menu background cleanup: niewidoczny pas scrolla bez przyciemnionego boxa. */
@media (max-width: 760px) {
    .bottom-dock,
    .jj-hero.is-panel-open .bottom-dock,
    .jj-hero.menu-revealed .bottom-dock {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* Header order swap: gramofon pierwszy od prawej, social media po jego lewej. */
.audio-control {
    top: var(--jj-header-edge) !important;
    right: var(--jj-header-edge) !important;
    z-index: 47;
}

.social-strip {
    top: var(--jj-header-edge) !important;
    right: calc(var(--jj-header-edge) + var(--jj-audio-icon-size) + var(--jj-header-gap)) !important;
    z-index: 46;
}

@media (max-width: 760px) {
    .audio-control {
        top: var(--jj-header-edge) !important;
        right: var(--jj-header-edge) !important;
    }

    .social-strip {
        top: var(--jj-header-edge) !important;
        right: calc(var(--jj-header-edge) + var(--jj-audio-icon-size) + var(--jj-header-gap)) !important;
    }
}


/* Mobile header final: gramofon skrajnie po prawej, social media po lewej w jednym rzędzie. */
@media (max-width: 760px) {
    :root {
        --jj-header-edge: 6px;
        --jj-header-gap: 3px;
        --jj-social-icon-size: clamp(34px, 10.4vw, 42px);
        --jj-audio-icon-size: clamp(44px, 13.4vw, 54px);
    }

    .audio-control {
        position: absolute !important;
        top: var(--jj-header-edge) !important;
        right: var(--jj-header-edge) !important;
        left: auto !important;
        width: var(--jj-audio-icon-size) !important;
        height: var(--jj-audio-icon-size) !important;
        transform: none !important;
    }

    .audio-toggle {
        width: var(--jj-audio-icon-size) !important;
        min-width: var(--jj-audio-icon-size) !important;
        height: var(--jj-audio-icon-size) !important;
        min-height: var(--jj-audio-icon-size) !important;
    }

    .social-strip {
        position: absolute !important;
        top: var(--jj-header-edge) !important;
        right: calc(var(--jj-header-edge) + var(--jj-audio-icon-size) + var(--jj-header-gap)) !important;
        left: auto !important;
        width: auto !important;
        max-width: calc(100vw - var(--jj-audio-icon-size) - (var(--jj-header-edge) * 2) - var(--jj-header-gap)) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--jj-header-gap) !important;
        transform: none !important;
    }

    .social-strip a {
        width: var(--jj-social-icon-size) !important;
        height: var(--jj-social-icon-size) !important;
        flex: 0 0 var(--jj-social-icon-size) !important;
    }
}

@media (max-width: 374px) {
    :root {
        --jj-social-icon-size: 32px;
        --jj-audio-icon-size: 42px;
        --jj-header-gap: 2px;
    }
}


/* Bletki controlled sequence: JS czeka na zaladowanie/dekodowanie kowboja i dopiero potem odpala dym, dymek oraz tekst. */
.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}

.jj-hero.is-character-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage {
    opacity: 1 !important;
    visibility: visible !important;
    animation: bletkiCowboySoftJumpIn .82s cubic-bezier(.16, .86, .22, 1) both !important;
}

.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg,
.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke,
.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-mobile {
    opacity: 0 !important;
    visibility: hidden !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-mobile {
    opacity: .72 !important;
    visibility: visible !important;
}

.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(14px, 10px, 0) scale(.92) !important;
    transition: none !important;
    animation: none !important;
}

.jj-hero.is-bubble-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition: opacity .34s ease, transform .42s cubic-bezier(.2, .9, .22, 1.12) !important;
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-character-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage,
    .jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg,
    .jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke,
    .jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-mobile,
    .jj-hero.is-bubble-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
        animation: none !important;
        transition: none !important;
    }
}


/* Bletki controlled sequence: kropki mysli widoczne przed pojawieniem sie pelnego dymku. */
.jj-hero.is-smoke-ready:not(.is-bubble-ready) #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    transform: none !important;
}

.jj-hero.is-smoke-ready:not(.is-bubble-ready) #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    opacity: 1 !important;
    visibility: visible !important;
}

.jj-hero.is-smoke-ready:not(.is-bubble-ready) #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::after,
.jj-hero.is-smoke-ready:not(.is-bubble-ready) #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* Bletki smoke start fix: dym nie moze pokazywac zaawansowanej klatki animacji przy starcie. */
.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg path,
.jj-hero #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
    animation-play-state: paused !important;
    animation-delay: 0s !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg path {
    animation: bletkiSmokeDrift 6.8s ease-in-out .08s infinite alternate both !important;
    animation-play-state: running !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke {
    animation: bletkiSmokePuff 5.6s ease-in-out .08s infinite both !important;
    animation-play-state: running !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-two {
    animation-delay: .72s !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-three {
    animation-delay: 1.34s !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-mist-two,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-blob-two,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line-two,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-thread-two {
    animation-delay: .52s !important;
}

.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-blob-three,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line-three,
.jj-hero.is-smoke-ready #scenePanel.scene-panel.scene-panel-layout-character .scene-character-stage .scene-smoke-svg .smoke-line-five {
    animation-delay: 1.04s !important;
}


/* Wybór języka: lekki prolog przed Entry Gate, bez łączenia stanu języka ze zgodą. */
body.has-language-gate {
    overflow: hidden;
}

.language-gate {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(148, 57, 25, .22), transparent 27%),
        radial-gradient(circle at 50% 50%, transparent 15%, rgba(0, 0, 0, .48) 78%),
        linear-gradient(180deg, #240711, #080305);
    color: #f7dfb7;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .42s ease, visibility 0s linear .42s;
}

.language-gate.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.language-gate-inner {
    width: min(760px, 94vw);
    text-align: center;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease .08s, transform .65s cubic-bezier(.2, .75, .2, 1) .08s;
}

.language-gate.is-visible .language-gate-inner {
    opacity: 1;
    transform: none;
}

.language-gate-kicker {
    margin: 0 0 9px;
    color: rgba(228, 169, 93, .82);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.language-gate h2 {
    margin: 0;
    color: #ffe1aa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 5.2vw, 3.6rem);
    font-style: italic;
    line-height: 1.02;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .72);
}

.language-gate h2 span {
    display: inline-block;
    margin-top: 7px;
    color: rgba(255, 225, 177, .72);
    font-size: .56em;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.language-gate-inner > p:not(.language-gate-kicker):not(.language-gate-status) {
    margin: 16px auto 0;
    max-width: 48ch;
    color: rgba(247, 223, 183, .72);
    font-size: clamp(.82rem, 1.5vw, .96rem);
    line-height: 1.5;
}

.language-gate-status {
    min-height: 1.5em;
    margin: 8px 0 0;
    color: #ffd696;
    font-size: clamp(.72rem, 1.2vw, .84rem);
    font-weight: 750;
}

.language-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    isolation: isolate;
}

.language-switch img {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .52));
}

.language-switch :is(button, a) {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    text-decoration: none;
    cursor: pointer;
}

.language-switch :is(button, a)::after {
    content: "";
    position: absolute;
    inset: 13% 8%;
    border-radius: 18%;
    background: radial-gradient(ellipse at 50% 52%, rgba(255, 225, 139, .58), rgba(247, 169, 48, .3) 42%, rgba(190, 91, 16, .1) 64%, transparent 76%);
    box-shadow: inset 0 0 14px rgba(255, 221, 126, .26), 0 0 12px rgba(242, 145, 34, .34);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .75, .2, 1);
    pointer-events: none;
    mix-blend-mode: screen;
}

.language-switch :is(button, a):hover::after,
.language-switch :is(button, a):focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

.language-switch :is(button, a):focus-visible {
    outline: 3px solid #ffd36f;
    outline-offset: -7px;
    border-radius: 12px;
}

.language-switch-start {
    width: min(560px, 92vw);
    aspect-ratio: 640 / 274;
    margin: clamp(16px, 3vh, 28px) auto 0;
}

.language-control {
    position: absolute;
    z-index: 46;
    top: calc(var(--jj-header-edge) + var(--jj-audio-icon-size) + var(--jj-header-gap));
    right: var(--jj-header-edge);
}

.language-switch-header {
    width: clamp(116px, 11vw, 164px);
    aspect-ratio: 640 / 274;
}

@media (max-width: 760px) {
    .language-gate-inner {
        width: min(520px, 96vw);
    }

    .language-switch-start {
        width: min(430px, 96vw);
    }

    .language-control {
        top: calc(var(--jj-header-edge) + var(--jj-audio-icon-size) + 1px);
        right: var(--jj-header-edge);
    }

    .language-switch-header {
        width: clamp(102px, 29vw, 124px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .language-gate,
    .language-gate-inner,
    .language-switch :is(button, a)::after {
        transition: none !important;
    }
}

/* Desktop: switcher w jednym rzędzie, pierwszy od lewej, bez przesuwania social media i gramofonu. */
@media (min-width: 761px) {
    .language-control {
        top: var(--jj-header-edge);
        right: calc(
            var(--jj-header-edge)
            + var(--jj-audio-icon-size)
            + (var(--jj-social-icon-size) * 3)
            + (var(--jj-header-gap) * 4)
        );
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--jj-social-icon-size) * 1.82);
        height: var(--jj-social-icon-size);
        transform: translateY(calc(var(--jj-social-icon-size) * -0.055));
    }

    .language-switch-header {
        width: 100%;
        max-height: var(--jj-social-icon-size);
    }
}

/* Smokestone cinematic intro: osobna warstwa uruchamiana wyłącznie po Entry Gate. */
:root {
    --intro-bg: #090306;
    --intro-burgundy: #240711;
    --intro-cream: #f7dfb7;
    --intro-gold: #e4a95d;
    --intro-orange: #d45d24;
    --intro-focus: #ffe09e;
}

body.has-smokestone-intro {
    overflow: hidden;
}

.smokestone-intro {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 50% 48%, rgba(77, 15, 24, .18), transparent 45%),
        linear-gradient(180deg, var(--intro-burgundy), var(--intro-bg));
    color: var(--intro-cream);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
}

.smokestone-intro.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.smokestone-intro-character-backgrounds,
.smokestone-intro-character-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.smokestone-intro-character-backgrounds {
    z-index: -3;
    overflow: hidden;
}

.smokestone-intro-character-bg {
    display: block;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    filter: brightness(.55) saturate(.86);
    transform: scale(1.035);
    transition: opacity .82s ease, filter 1.1s ease, transform 4.2s cubic-bezier(.2, .65, .2, 1);
    will-change: opacity, transform;
}

.smokestone-intro-character-bg.is-visible {
    opacity: 1;
    filter: brightness(.78) saturate(.96);
    transform: scale(1);
}

.smokestone-intro:not([data-character-background=""]) .smokestone-intro-vignette {
    opacity: .88;
    background:
        linear-gradient(180deg, rgba(5, 1, 3, .38), transparent 25%, transparent 68%, rgba(5, 1, 3, .7)),
        radial-gradient(ellipse at center, rgba(13, 3, 6, .08), rgba(7, 2, 4, .66) 100%);
}

.smokestone-intro-image,
.smokestone-intro-glow,
.smokestone-intro-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.smokestone-intro-image {
    z-index: -3;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0;
    filter: brightness(.35) saturate(.82);
    transform: scale(1.025);
    transition: opacity 1.55s ease, filter 1.55s ease, transform 1.7s cubic-bezier(.2, .7, .2, 1);
}

.smokestone-intro-glow {
    z-index: -2;
    background: radial-gradient(circle at 50% 57%, rgba(240, 112, 38, .42), transparent 12%, rgba(105, 25, 18, .16) 38%, transparent 68%);
    opacity: 0;
    transition: opacity 1.35s ease;
}

.smokestone-intro-vignette {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(8, 2, 4, .48), transparent 24%, transparent 62%, rgba(7, 2, 3, .78)),
        radial-gradient(ellipse at center, transparent 32%, rgba(7, 2, 4, .62) 100%);
    opacity: .72;
    transition: opacity .8s ease;
}

.smokestone-intro.is-scene-visible .smokestone-intro-image {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1);
}

.smokestone-intro.is-scene-visible .smokestone-intro-glow {
    opacity: 1;
}

.smokestone-intro-copy {
    width: min(960px, 90vw);
    text-align: center;
    opacity: 0;
    transform: translateY(clamp(44px, 7vh, 76px)) scale(.9);
    filter: blur(2px);
    transition:
        opacity .72s ease,
        transform .82s cubic-bezier(.18, .72, .2, 1),
        filter .72s ease;
    will-change: opacity, transform, filter;
}

.smokestone-intro-copy.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.smokestone-intro-copy.is-visible.is-leaving {
    opacity: 0;
    transform: translateY(clamp(-58px, -8vh, -38px)) scale(.9);
    filter: blur(1.5px);
    transition-duration: .85s;
    transition-timing-function: cubic-bezier(.4, 0, .8, .3);
}

.smokestone-intro-copy p,
.smokestone-intro-copy h1 {
    margin: 0;
    white-space: pre-line;
}

.smokestone-intro-kicker {
    min-height: 1.4em;
    margin-bottom: 12px !important;
    color: rgba(247, 223, 183, .64);
    font-size: clamp(.68rem, 1.1vw, .8rem);
    font-weight: 850;
    letter-spacing: .34em;
}

.smokestone-intro-copy h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 4.2vw, 4.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .035em;
    text-wrap: balance;
    text-shadow: 0 6px 28px rgba(0, 0, 0, .9);
}

.smokestone-intro-copy[data-variant="title"] h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.smokestone-intro-sign {
    position: relative;
    display: block;
    width: min(760px, 82vw);
    aspect-ratio: 3 / 1;
    margin: 0 auto;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .72)) drop-shadow(0 0 18px rgba(210, 83, 27, .2));
}

.smokestone-intro-sign-art {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    opacity: 0;
    transform: translateY(18px) scale(.94) rotate(-.14deg);
    filter: brightness(.72) saturate(.9);
}

.smokestone-intro-sign-base {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.smokestone-intro-sign-flare {
    position: absolute;
    width: clamp(18px, 3.4vw, 40px);
    aspect-ratio: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.12) rotate(0deg);
    background:
        linear-gradient(transparent 46%, rgba(255, 239, 183, .95) 49%, rgba(255, 239, 183, .95) 51%, transparent 54%),
        linear-gradient(90deg, transparent 46%, rgba(255, 210, 101, .95) 49%, rgba(255, 210, 101, .95) 51%, transparent 54%),
        radial-gradient(circle, #fff8d5 0 5%, #ffd16a 8%, rgba(236, 126, 27, .48) 22%, transparent 58%);
    filter: drop-shadow(0 0 7px rgba(255, 183, 62, .9));
    mix-blend-mode: screen;
    pointer-events: none;
}

.smokestone-intro-copy[data-variant="title"].is-visible:not(.is-leaving) .smokestone-intro-sign-art {
    animation: smokestoneSignArrival 4.65s cubic-bezier(.2, .72, .2, 1) both;
}

.smokestone-intro-sign-flare-star {
    top: 73%;
    left: 50%;
}

.smokestone-intro-sign-flare-letter {
    top: 48%;
    left: 34%;
    width: clamp(14px, 2.8vw, 32px);
}

.smokestone-intro-sign-flare-hat {
    top: 35%;
    left: 82.5%;
    width: clamp(16px, 3vw, 36px);
}

.smokestone-intro-copy[data-variant="title"].is-visible:not(.is-leaving) .smokestone-intro-sign-flare-star {
    animation: smokestoneSignFlare .72s cubic-bezier(.2, .7, .2, 1) 1.55s both;
}

.smokestone-intro-copy[data-variant="title"].is-visible:not(.is-leaving) .smokestone-intro-sign-flare-letter {
    animation: smokestoneSignFlare .62s cubic-bezier(.2, .7, .2, 1) 2.35s both;
}

.smokestone-intro-copy[data-variant="title"].is-visible:not(.is-leaving) .smokestone-intro-sign-flare-hat {
    animation: smokestoneSignFlare .78s cubic-bezier(.2, .7, .2, 1) 3.08s both;
}

@keyframes smokestoneSignArrival {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.94) rotate(-.14deg);
        filter: brightness(.72) saturate(.9);
    }
    19% {
        opacity: 1;
        transform: translateY(0) scale(1.012) rotate(.05deg);
        filter: brightness(1.04) saturate(1.02);
    }
    31%, 100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
    59% {
        opacity: 1;
        transform: translateY(0) scale(1.006) rotate(0deg);
        filter: brightness(1.025) saturate(1.02) drop-shadow(0 0 6px rgba(255, 153, 43, .12));
    }
}

@keyframes smokestoneSignFlare {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.12) rotate(0deg);
    }
    38% {
        opacity: .95;
        transform: translate(-50%, -50%) scale(1) rotate(22deg);
    }
    68% {
        opacity: .46;
        transform: translate(-50%, -50%) scale(.72) rotate(38deg);
    }
}

.smokestone-intro-sign[hidden] {
    display: none;
}

.smokestone-intro-copy[data-variant~="character"] {
    width: min(620px, 42vw);
    margin: 0;
    text-align: left;
}

/* Tom jest po lewej stronie kadru, dlatego jego tekst zajmuje prawą, spokojniejszą część. */
.smokestone-intro-copy[data-variant~="natural"] {
    justify-self: end;
    margin-right: clamp(6vw, 9vw, 150px);
}

/* Jesse i Rose są po prawej stronie kadru — tekst pozostaje po lewej. */
.smokestone-intro-copy[data-variant~="black"],
.smokestone-intro-copy[data-variant~="pink"] {
    justify-self: start;
    margin-left: clamp(6vw, 9vw, 150px);
}

.smokestone-intro-copy[data-variant~="natural"] .smokestone-intro-kicker { color: #dec99d; }
.smokestone-intro-copy[data-variant~="black"] .smokestone-intro-kicker { color: #c9a278; }
.smokestone-intro-copy[data-variant~="pink"] .smokestone-intro-kicker { color: #e5a2aa; }

.smokestone-intro-subtitle {
    margin-top: clamp(16px, 2.4vh, 28px) !important;
    color: rgba(247, 223, 183, .84);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 2vw, 1.6rem);
    line-height: 1.45;
}

.smokestone-intro-skip,
.smokestone-intro-cta {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--intro-cream);
    font: inherit;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
}

.smokestone-intro-skip {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    z-index: 4;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(247, 223, 183, .38);
    font-size: clamp(.68rem, 1vw, .8rem);
    opacity: .72;
}

.smokestone-intro-skip:hover,
.smokestone-intro-skip:focus-visible {
    opacity: 1;
    border-color: var(--intro-gold);
}

.smokestone-intro-progress {
    position: absolute;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    left: max(20px, env(safe-area-inset-left));
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 7px 18px;
    color: rgba(247, 223, 183, .62);
    font-size: clamp(.58rem, .8vw, .7rem);
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
    transition: opacity .45s ease, transform .45s ease;
}

.smokestone-intro-progress-count {
    color: rgba(255, 218, 158, .82);
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
}

.smokestone-intro-progress-track {
    position: relative;
    grid-column: 1 / -1;
    display: block;
    height: 2px;
    overflow: hidden;
    background: rgba(247, 223, 183, .18);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .62);
}

.smokestone-intro-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: var(--intro-progress, 0%);
    background: linear-gradient(90deg, #8e3a21, var(--intro-gold), #ffe0a1);
    box-shadow: 0 0 10px rgba(228, 169, 93, .48);
    transition: width var(--intro-progress-duration, 0ms) linear;
}

.smokestone-intro.is-ending-visible .smokestone-intro-progress {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.smokestone-intro-ending {
    position: absolute;
    inset: auto max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity .65s ease, transform .75s cubic-bezier(.2, .75, .2, 1);
}

.smokestone-intro.is-ending-visible .smokestone-intro-ending {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.smokestone-intro-ending-copy {
    max-width: 540px;
    padding: 18px 20px;
    border-left: 2px solid rgba(228, 169, 93, .72);
    background: linear-gradient(90deg, rgba(12, 3, 5, .72), transparent);
    text-shadow: 0 3px 16px #000;
}

.smokestone-intro-ending-copy p {
    margin: 0 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.9rem, 1.45vw, 1.16rem);
    line-height: 1.4;
}

.smokestone-intro-ending-copy .smokestone-intro-question {
    margin-top: 14px;
    color: #ffd492;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-style: italic;
}

.smokestone-intro-cta {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 14px 18px;
    border: 1px solid rgba(247, 211, 151, .72);
    background: rgba(26, 6, 7, .76);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .38), inset 0 0 24px rgba(165, 66, 25, .12);
    font-size: clamp(.72rem, 1.1vw, .9rem);
}

.smokestone-intro-cta:hover,
.smokestone-intro-cta:focus-visible {
    color: #fff0c9;
    border-color: #ffe0a0;
    background: rgba(73, 20, 14, .9);
}

.smokestone-intro-skip:focus-visible,
.smokestone-intro-cta:focus-visible {
    outline: 3px solid var(--intro-focus);
    outline-offset: 4px;
}

.smokestone-intro.is-skipping,
.smokestone-intro.is-entering-world {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

.smokestone-intro.is-entering-world {
    transition-duration: .85s;
}

.smokestone-intro.is-entering-world .smokestone-intro-image {
    filter: brightness(.42) saturate(.85);
    transform: scale(1.025);
    transition-duration: .85s;
}

@media (max-width: 760px) {
    .smokestone-intro-image {
        object-position: 52% 50%;
    }

    .smokestone-intro-sign {
        width: min(680px, 94vw);
    }

    /* Pionowy ekran wycina większość panoramy, więc przesuwamy punkt kadrowania ku twarzy postaci. */
    .smokestone-intro-character-bg[data-intro-character-bg="natural"] {
        object-position: 27% center;
    }

    .smokestone-intro-character-bg[data-intro-character-bg="black"] {
        object-position: 73% center;
    }

    .smokestone-intro-character-bg[data-intro-character-bg="pink"] {
        object-position: 76% center;
    }

    .smokestone-intro-character-bg.is-visible {
        filter: brightness(.66) saturate(.92);
    }

    .smokestone-intro-copy[data-variant~="character"] {
        align-self: end;
        justify-self: stretch;
        width: auto;
        max-width: none;
        margin: 0 max(20px, env(safe-area-inset-right)) clamp(118px, 18vh, 168px) max(20px, env(safe-area-inset-left));
        padding: 15px 16px 16px;
        border-left: 2px solid rgba(228, 169, 93, .58);
        background: linear-gradient(90deg, rgba(9, 2, 5, .82), rgba(9, 2, 5, .46) 70%, transparent);
        text-align: left;
        text-shadow: 0 3px 18px rgba(0, 0, 0, .96);
    }

    .smokestone-intro-copy[data-variant~="natural"],
    .smokestone-intro-copy[data-variant~="black"],
    .smokestone-intro-copy[data-variant~="pink"] {
        margin-right: max(20px, env(safe-area-inset-right));
        margin-left: max(20px, env(safe-area-inset-left));
    }

    .smokestone-intro-copy[data-variant~="character"] h1 {
        font-size: clamp(1.42rem, 7vw, 2.15rem);
        line-height: 1.17;
    }

    .smokestone-intro-progress {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        left: max(14px, env(safe-area-inset-left));
        gap: 6px 12px;
    }

    .smokestone-intro-ending {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        bottom: max(18px, env(safe-area-inset-bottom));
    }

    .smokestone-intro-ending-copy {
        width: 100%;
        padding: 13px 14px;
    }

    .smokestone-intro-cta {
        width: 100%;
        min-height: 54px;
    }

    .smokestone-intro-skip {
        top: max(10px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smokestone-intro,
    .smokestone-intro *,
    .smokestone-intro *::before,
    .smokestone-intro *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .smokestone-intro-image,
    .smokestone-intro-character-bg {
        transform: none !important;
    }

    .smokestone-intro-character-bg {
        transition: none !important;
    }

    .smokestone-intro-copy[data-variant="title"] .smokestone-intro-sign-art {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: brightness(1.02);
    }

    .smokestone-intro-copy[data-variant="title"] .smokestone-intro-sign-flare {
        display: none;
        animation: none !important;
    }
}

/* Entry Gate zawsze pozostaje nad intro. */
.privacy-gate {
    z-index: 100 !important;
}

/* World entry loader: lekki cinematic preload przed privacy/audio gate. */
.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 38%, rgba(99, 31, 21, .48), transparent 34%),
        linear-gradient(180deg, #180912 0%, #090507 100%);
    color: var(--cream, #f6dfb7);
    opacity: 1;
    visibility: visible;
    transition: opacity .46s ease, visibility 0s linear 0s;
}

.site-loader-card {
    width: min(360px, calc(100vw - 48px));
    text-align: center;
    filter: drop-shadow(0 20px 34px rgba(0,0,0,.34));
}

.site-loader-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--gold, #e4a95d);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.2rem, 4.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-loader-card strong {
    display: block;
    font-size: .86rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .9;
}

.site-loader-line {
    position: relative;
    display: block;
    width: min(260px, 70vw);
    height: 3px;
    margin: 22px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(246, 223, 183, .18);
}

.site-loader-line::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--gold, #e4a95d), transparent);
    animation: jjLoaderTrail 1.15s ease-in-out infinite;
}

@keyframes jjLoaderTrail {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

body.is-loading-world .jj-page,
body:not(.is-world-assets-ready) .jj-page {
    opacity: 0;
}

body.is-world-assets-ready .jj-page {
    opacity: 1;
    transition: opacity .34s ease;
}

body.is-world-assets-ready .site-loader,
body.is-world-entered .site-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .42s ease, visibility 0s linear .42s;
}

body:not(.is-world-entered) .cloud-drift,
body:not(.is-world-entered) .layer-haze,
body:not(.is-world-entered) .dust-field,
body:not(.is-world-entered) .launch-message p,
body:not(.is-world-entered) .menu-token-visual-animated {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-loader,
    body.is-world-assets-ready .jj-page,
    body.is-world-assets-ready .site-loader,
    body.is-world-entered .site-loader {
        transition: none !important;
    }

    .site-loader-line::before {
        animation: none !important;
        width: 100%;
        opacity: .55;
    }
}

/* 10. Scene panel canonical system - jedno zrodlo bazowego panelu i pergaminu. */
#scenePanel.scene-panel {
    position: absolute;
    z-index: 42;
    left: calc(50% + (var(--side-menu-width) * .30));
    top: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    transition: opacity .32s ease, visibility 0s linear .32s;
}

.jj-hero.is-panel-open #scenePanel.scene-panel {
    opacity: 1;
    visibility: visible;
    transition: opacity .36s ease, visibility 0s linear 0s;
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) {
    --jj-paper-ink: #361407;
    --jj-paper-muted: rgba(50, 19, 7, .86);
    --jj-paper-line: rgba(84, 32, 10, .32);
    --jj-paper-edge: rgba(58, 16, 4, .28);
    width: min(660px, calc(100vw - var(--side-menu-width) - 120px));
    max-height: min(70svh, 500px);
    padding: clamp(54px, 5.4vh, 72px) clamp(30px, 3.5vw, 48px) clamp(28px, 3.4vh, 42px);
    overflow: auto;
    isolation: isolate;
    border: 0;
    border-radius: 1px;
    outline: 1px solid rgba(78, 29, 9, .30);
    outline-offset: -14px;
    color: var(--jj-paper-ink);
    text-align: center;
    backdrop-filter: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 35, 12, .56) rgba(247, 212, 146, .20);
    background:
        radial-gradient(circle at 6% 9%, rgba(50, 13, 3, .36) 0 4%, transparent 15%),
        radial-gradient(circle at 94% 11%, rgba(61, 16, 4, .32) 0 4%, transparent 16%),
        radial-gradient(circle at 8% 92%, rgba(53, 15, 4, .28) 0 5%, transparent 18%),
        radial-gradient(circle at 92% 90%, rgba(73, 23, 7, .25) 0 4%, transparent 18%),
        linear-gradient(90deg, rgba(55, 15, 4, .23), transparent 9%, transparent 91%, rgba(55, 15, 4, .25)),
        linear-gradient(180deg, rgba(55, 15, 4, .22), transparent 11%, transparent 89%, rgba(55, 15, 4, .28)),
        repeating-linear-gradient(92deg, rgba(62, 23, 8, .030) 0 1px, transparent 1px 7px),
        url('../img/ui/papirus.webp') center / cover no-repeat,
        linear-gradient(135deg, #daa05d 0%, #f7d99d 38%, #e1ad67 62%, #bd7138 100%);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .48),
        0 12px 28px rgba(47, 10, 3, .26),
        inset 0 0 0 2px rgba(83, 31, 10, .13),
        inset 0 0 0 9px rgba(255, 225, 157, .043),
        inset 0 0 50px rgba(58, 16, 4, .28),
        inset 0 0 112px rgba(94, 34, 9, .12);
    clip-path: polygon(1.4% 1.8%, 18% .9%, 37% 1.5%, 58% .8%, 78% 1.4%, 98.3% 1.8%, 97.8% 21%, 98.6% 47%, 97.9% 72%, 98.4% 97.6%, 78% 98.2%, 58% 97.4%, 38% 98.3%, 18% 97.5%, 1.8% 98.2%, 2.3% 74%, 1.3% 49%, 2.1% 25%);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character)::before {
    content: "";
    position: absolute;
    inset: clamp(12px, 1.6vh, 18px) clamp(14px, 1.6vw, 22px);
    z-index: 0;
    pointer-events: none;
    border: 1px solid var(--jj-paper-line);
    opacity: .86;
    background:
        radial-gradient(circle at 0 0, rgba(70, 25, 8, .70) 0 2px, transparent 3px),
        radial-gradient(circle at 100% 0, rgba(70, 25, 8, .70) 0 2px, transparent 3px),
        radial-gradient(circle at 0 100%, rgba(70, 25, 8, .46) 0 2px, transparent 3px),
        radial-gradient(circle at 100% 100%, rgba(70, 25, 8, .46) 0 2px, transparent 3px),
        linear-gradient(90deg, rgba(88, 34, 11, .26), transparent 7%, transparent 93%, rgba(88, 34, 11, .26)),
        linear-gradient(180deg, rgba(88, 34, 11, .28), transparent 8%, transparent 92%, rgba(88, 34, 11, .28));
    box-shadow: inset 0 0 0 4px rgba(255, 232, 171, .04), inset 0 0 24px rgba(70, 22, 6, .10);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character)::after {
    content: "";
    position: absolute;
    left: clamp(50px, 7vw, 120px);
    right: clamp(50px, 7vw, 120px);
    top: clamp(38px, 4.2vh, 52px);
    height: 1px;
    z-index: 0;
    pointer-events: none;
    opacity: .62;
    background: linear-gradient(90deg, transparent, rgba(82, 31, 10, .42), transparent);
    box-shadow: 0 1px 0 rgba(255, 237, 185, .25);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) > * {
    position: relative;
    z-index: 2;
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-character-layout {
    display: none;
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-close {
    position: absolute;
    left: clamp(20px, 2vw, 30px);
    top: clamp(18px, 2.1vh, 26px);
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    background: linear-gradient(180deg, #6f2511, #3b0e05 76%);
    color: #ffe0a9;
    text-transform: uppercase;
    font-size: .6rem;
    font-weight: 950;
    letter-spacing: .12em;
    box-shadow: 0 9px 16px rgba(49, 12, 4, .24), inset 0 1px 0 rgba(255, 232, 178, .17);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    cursor: pointer;
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-kicker {
    margin: 0 0 clamp(8px, 1vh, 12px);
    color: #6d3717;
    text-transform: uppercase;
    font-size: clamp(.58rem, .7vw, .72rem);
    font-weight: 950;
    letter-spacing: .25em;
    text-shadow: 0 1px 0 rgba(255, 238, 184, .38);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-kicker::before,
#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-kicker::after {
    content: "";
    width: 5px;
    height: 5px;
    display: inline-block;
    margin: 0 10px 2px;
    background: rgba(102, 47, 18, .50);
    transform: rotate(45deg);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) h2 {
    position: relative;
    margin: 0 auto clamp(12px, 1.8vh, 18px);
    padding-bottom: clamp(10px, 1.35vh, 14px);
    color: #421408;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 4.4vw, 4.9rem);
    font-style: italic;
    line-height: .9;
    letter-spacing: -.055em;
    text-shadow: 0 1px 0 rgba(255, 233, 177, .46), 0 8px 22px rgba(95, 37, 11, .14);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(300px, 70%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(83, 31, 10, .48), transparent);
    box-shadow: 0 1px 0 rgba(255, 235, 178, .28);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-text {
    width: min(540px, 100%);
    margin: 0 auto;
    color: var(--jj-paper-muted);
    font-size: clamp(.98rem, 1.15vw, 1.08rem);
    line-height: 1.55;
    font-weight: 780;
    text-shadow: 0 1px 0 rgba(255, 238, 190, .20);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 3vh, 30px);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button {
    position: relative;
    min-width: 174px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 19px;
    border: 1px solid rgba(79, 29, 9, .38);
    color: #351206;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .15em;
    white-space: nowrap;
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button::before,
#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button::after {
    content: "";
    width: 4px;
    height: 4px;
    display: inline-block;
    flex: 0 0 4px;
    background: currentColor;
    opacity: .56;
    transform: rotate(45deg);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button::before { margin-right: 9px; }
#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button::after { margin-left: 9px; }

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button-primary {
    border-color: rgba(94, 34, 10, .62);
    background:
        linear-gradient(90deg, rgba(54, 13, 5, .22), transparent 14%, transparent 86%, rgba(54, 13, 5, .22)),
        linear-gradient(180deg, #7b2a13 0%, #571708 72%, #351006 100%);
    color: #ffe1aa;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .38);
    box-shadow:
        0 10px 20px rgba(48, 13, 4, .28),
        inset 0 1px 0 rgba(255, 232, 179, .20),
        inset 0 -1px 0 rgba(0, 0, 0, .26);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button-secondary {
    border-color: rgba(90, 34, 11, .28);
    background:
        linear-gradient(90deg, rgba(83, 31, 10, .08), transparent 16%, transparent 84%, rgba(83, 31, 10, .08)),
        linear-gradient(180deg, rgba(250, 221, 158, .42), rgba(198, 130, 62, .14));
    color: #351206;
    box-shadow:
        inset 0 0 0 1px rgba(76, 28, 9, .22),
        inset 0 1px 0 rgba(255, 240, 197, .32),
        0 8px 16px rgba(48, 13, 4, .10);
}

#scenePanel.scene-panel-layout-legal-panel {
    width: min(680px, calc(100vw - var(--side-menu-width) - 110px));
    max-height: min(72svh, 540px);
    text-align: left;
    background:
        radial-gradient(circle at 7% 9%, rgba(50, 13, 3, .28), transparent 16%),
        radial-gradient(circle at 94% 10%, rgba(61, 16, 4, .24), transparent 17%),
        linear-gradient(90deg, rgba(55, 15, 4, .18), transparent 11%, transparent 89%, rgba(55, 15, 4, .20)),
        linear-gradient(180deg, rgba(55, 15, 4, .18), transparent 13%, transparent 90%, rgba(55, 15, 4, .25)),
        url('../img/ui/papirus.webp') center / cover no-repeat,
        linear-gradient(135deg, #e3b06b 0%, #fae2ab 44%, #d39a59 100%);
}

#scenePanel.scene-panel-layout-legal-panel .scene-panel-kicker,
#scenePanel.scene-panel-layout-legal-panel h2,
#scenePanel.scene-panel-layout-legal-panel .scene-panel-actions {
    text-align: center;
}

#scenePanel.scene-panel-layout-legal-panel h2 {
    font-size: clamp(2.1rem, 4.1vw, 4.35rem);
}

#scenePanel.scene-panel-layout-legal-panel .scene-panel-text {
    width: min(580px, 100%);
    padding-top: clamp(10px, 1.5vh, 16px);
    border-top: 1px solid rgba(83, 31, 10, .20);
    font-size: clamp(.96rem, 1.04vw, 1.04rem);
    line-height: 1.68;
    font-weight: 720;
    color: rgba(38, 14, 5, .90);
    background: linear-gradient(180deg, rgba(255, 238, 190, .10), transparent 42%);
}

#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button:focus-visible,
#scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-close:focus-visible {
    outline: 3px solid #2f1007;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button:hover,
    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-close:hover {
        filter: brightness(1.08) saturate(1.05);
        transform: translateY(-1px);
    }
}

@media (max-width: 1120px) {
    #scenePanel.scene-panel:not(.scene-panel-layout-character),
    #scenePanel.scene-panel-layout-legal-panel {
        width: min(620px, calc(100vw - var(--side-menu-width) - 70px));
        max-height: min(72svh, 480px);
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) h2 {
        font-size: clamp(2.2rem, 5.6vw, 4.4rem);
    }
}

@media (max-width: 760px) {
    #scenePanel.scene-panel {
        left: calc(50% + (var(--side-menu-width) * .26));
        top: 47%;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character),
    #scenePanel.scene-panel-layout-legal-panel {
        width: calc(100vw - var(--side-menu-width) - 34px);
        max-height: calc(100svh - 112px);
        padding: 50px 16px 20px;
        outline-offset: -8px;
        box-shadow: 0 22px 50px rgba(0, 0, 0, .50), inset 0 0 0 7px rgba(255, 224, 153, .038), inset 0 0 36px rgba(58, 16, 4, .28);
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character)::before {
        inset: 11px;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character)::after {
        top: 42px;
        left: 28px;
        right: 28px;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-close {
        left: 16px;
        top: 14px;
        min-height: 32px;
        padding-inline: 11px;
        font-size: .55rem;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-kicker {
        margin-top: 4px;
        letter-spacing: .17em;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-kicker::before,
    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-kicker::after {
        margin: 0 5px;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) h2 {
        font-size: clamp(2rem, 10vw, 3.45rem);
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-text {
        font-size: .88rem;
        line-height: 1.46;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-actions {
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
    }

    #scenePanel.scene-panel:not(.scene-panel-layout-character) .scene-panel-button {
        width: min(100%, 240px);
        min-width: 0;
        min-height: 40px;
        padding-inline: 14px;
        font-size: .6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #scenePanel.scene-panel,
    #scenePanel.scene-panel:not(.scene-panel-layout-character)::before,
    #scenePanel.scene-panel:not(.scene-panel-layout-character)::after {
        animation: none !important;
        transition: none !important;
    }
}


/* Bletki thought bubble sequence: kropka po kropce, potem dymek, potem tekst. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(10px, 8px, 0) scale(.9) !important;
    transition: none !important;
    animation: bletkiThoughtBubbleIn .42s cubic-bezier(.2, .9, .22, 1.12) 1.22s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble.is-ready {
    visibility: visible !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble::before {
    display: none !important;
    content: none !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    opacity: 0;
    animation: bletkiSpeechTextReveal .18s ease 1.66s both;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot {
    position: absolute;
    z-index: 1;
    display: block;
    border: 3px solid #2b1008;
    border-radius: 50%;
    background: rgba(255, 240, 204, .98);
    box-shadow: 0 7px 14px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.34);
    opacity: 0;
    transform: translate3d(10px, 8px, 0) scale(.35);
    pointer-events: none;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-one {
    right: -150px;
    top: 78%;
    width: 18px;
    height: 18px;
    animation: bletkiThoughtDotIn .22s ease-out .62s both;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-two {
    right: -108px;
    top: 70%;
    width: 27px;
    height: 27px;
    animation: bletkiThoughtDotIn .24s ease-out .82s both;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-three {
    right: -58px;
    top: 58%;
    width: 40px;
    height: 40px;
    animation: bletkiThoughtDotIn .26s ease-out 1.02s both;
}

@keyframes bletkiThoughtDotIn {
    0% { opacity: 0; transform: translate3d(12px, 8px, 0) scale(.35); }
    72% { opacity: 1; transform: translate3d(-2px, -2px, 0) scale(1.08); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bletkiThoughtBubbleIn {
    0% { opacity: 0; visibility: visible; transform: translate3d(10px, 8px, 0) scale(.9); }
    70% { opacity: 1; visibility: visible; transform: translate3d(-2px, -2px, 0) scale(1.018); }
    100% { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bletkiSpeechTextReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        animation-delay: 1.05s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
        animation-delay: 1.48s;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot {
        border-width: 2px;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-one {
        right: -54px;
        top: 75%;
        width: 11px;
        height: 11px;
        animation-delay: .52s;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-two {
        right: -36px;
        top: 68%;
        width: 16px;
        height: 16px;
        animation-delay: .70s;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-three {
        right: -17px;
        top: 58%;
        width: 22px;
        height: 22px;
        animation-delay: .88s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p,
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }
}


/* Bletki slower thought sequence: spokojniejsze tempo kropek i dymku. */
.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    animation: bletkiThoughtBubbleInSlow .62s cubic-bezier(.2, .86, .22, 1.06) 2.25s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
    opacity: 0;
    animation: bletkiSpeechTextReveal .28s ease 2.72s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-one {
    animation: bletkiThoughtDotInSlow .42s ease-out .95s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-two {
    animation: bletkiThoughtDotInSlow .46s ease-out 1.35s both !important;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-three {
    animation: bletkiThoughtDotInSlow .50s ease-out 1.78s both !important;
}

@keyframes bletkiThoughtDotInSlow {
    0% { opacity: 0; transform: translate3d(14px, 8px, 0) scale(.28); }
    58% { opacity: .82; transform: translate3d(-1px, -1px, 0) scale(1.12); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bletkiThoughtBubbleInSlow {
    0% { opacity: 0; visibility: visible; transform: translate3d(12px, 10px, 0) scale(.88); }
    64% { opacity: 1; visibility: visible; transform: translate3d(-2px, -2px, 0) scale(1.012); }
    100% { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        animation-delay: 1.95s !important;
        animation-duration: .52s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble p {
        animation-delay: 2.4s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-one {
        animation-delay: .82s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-two {
        animation-delay: 1.18s !important;
    }

    .jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble .speech-dot-three {
        animation-delay: 1.54s !important;
    }
}


/* 11. Loader logo sizing — stabilny rozmiar logo w preloaderze. */
.site-loader-logo {
    display: block;
    width: clamp(150px, 22vw, 260px);
    max-width: min(72vw, 260px);
    height: auto;
    max-height: 34vh;
    margin: 0 auto 14px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .38));
}

@media (max-width: 760px) {
    .site-loader {
        padding: 18px;
    }

    .site-loader-card {
        width: min(300px, calc(100vw - 36px));
    }

    .site-loader-logo {
        width: clamp(132px, 46vw, 210px);
        max-width: 68vw;
        max-height: 28vh;
        margin-bottom: 12px;
    }
}

@media (max-width: 420px) {
    .site-loader-logo {
        width: clamp(118px, 52vw, 185px);
        max-width: 70vw;
        max-height: 24vh;
    }
}


/* 12. Birds flight system — dwa stany skrzydel bez JS. */
.birds-flight {
    z-index: 6;
    pointer-events: none;
    opacity: var(--birds-opacity);
    overflow: visible;
}

.bird-flock {
    position: absolute;
    display: block;
    aspect-ratio: 1536 / 768;
    transform-origin: 55% 50%;
    will-change: transform, opacity;
    filter: saturate(.88) contrast(.96) brightness(.82) drop-shadow(0 10px 12px rgba(49, 10, 4, .18));
}

.bird-flock-near {
    left: 58%;
    top: 16%;
    width: clamp(108px, 10vw, 190px);
    opacity: .56;
    animation:
        birdNearRoute var(--birds-flight-duration) cubic-bezier(.42, 0, .58, 1) -24s infinite,
        birdNearGlide 15s ease-in-out infinite alternate;
}

.bird-flock-far {
    left: 40%;
    top: 32%;
    width: clamp(68px, 6.4vw, 122px);
    opacity: .40;
    animation:
        birdFarRoute var(--birds-flight-duration) cubic-bezier(.42, 0, .58, 1) -34s infinite,
        birdFarGlide 19s ease-in-out -6s infinite alternate;
}

.bird-frame {
    position: absolute;
    inset: 0;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    will-change: opacity;
    transform: translateZ(0);
}

.bird-flock-near .bird-frame {
    transform: scaleX(-1) translateZ(0);
}

.bird-frame-up {
    background-image: url('../img/bird (1).png');
    opacity: 1;
    animation: birdWingUp 1.35s ease-in-out infinite;
}

.bird-frame-down {
    background-image: url('../img/bird (2).png');
    opacity: 0;
    animation: birdWingDown 1.35s ease-in-out infinite;
}

.bird-flock-far .bird-frame-up,
.bird-flock-far .bird-frame-down {
    animation-duration: 1.62s;
}

@keyframes birdWingUp {
    0%, 28% { opacity: 1; }
    44%, 58% { opacity: .08; }
    74%, 100% { opacity: 1; }
}

@keyframes birdWingDown {
    0%, 28% { opacity: .08; }
    44%, 58% { opacity: 1; }
    74%, 100% { opacity: .08; }
}

@keyframes birdNearRoute {
    0% { opacity: 0; offset-distance: 0%; }
    10% { opacity: 0; }
    19% { opacity: .56; }
    72% { opacity: .50; }
    88% { opacity: 0; }
    100% { opacity: 0; offset-distance: 100%; }
}

@keyframes birdFarRoute {
    0% { opacity: 0; offset-distance: 0%; }
    10% { opacity: 0; }
    20% { opacity: .40; }
    68% { opacity: .34; }
    84% { opacity: 0; }
    100% { opacity: 0; offset-distance: 100%; }
}

.bird-flock-near {
    offset-path: path("M 820 95 C 650 58, 455 70, 260 42 C 85 17, -110 32, -260 10");
    offset-rotate: 0deg;
}

.bird-flock-far {
    offset-path: path("M -260 178 C -90 154, 95 128, 285 148 C 465 166, 655 130, 820 112");
    offset-rotate: 0deg;
}

@keyframes birdNearGlide {
    0% { margin-top: .2vh; rotate: -.4deg; }
    28% { margin-top: -.9vh; rotate: 1deg; }
    58% { margin-top: .25vh; rotate: -.7deg; }
    100% { margin-top: -1.2vh; rotate: 1.3deg; }
}

@keyframes birdFarGlide {
    0% { margin-top: 2.3vh; rotate: -1.8deg; scale: .70; }
    36% { margin-top: .6vh; rotate: .8deg; scale: .68; }
    70% { margin-top: 1.6vh; rotate: -.5deg; scale: .66; }
    100% { margin-top: -.2vh; rotate: 1deg; scale: .64; }
}

@media (max-width: 1120px) {
    .birds-flight {
        --birds-opacity: .42;
    }

    .bird-flock-near {
        left: 58%;
        top: 15%;
        width: clamp(94px, 16vw, 162px);
        animation-duration: 118s, 15s;
    }

    .bird-flock-far {
        left: 40%;
        top: 30%;
        width: clamp(58px, 10vw, 100px);
        animation-duration: 118s, 19s;
    }
}

@media (max-width: 760px) {
    .birds-flight {
        --birds-opacity: .34;
    }

    .bird-flock-near {
        left: 62%;
        top: 14%;
        width: clamp(76px, 25vw, 124px);
        animation-duration: 132s, 15s;
    }

    .bird-flock-far {
        left: 40%;
        top: 29%;
        width: clamp(46px, 16vw, 78px);
        animation-duration: 132s, 19s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .birds-flight,
    .bird-flock,
    .bird-frame-up,
    .bird-frame-down {
        animation: none !important;
    }

    .birds-flight {
        opacity: .22;
        transform: translate3d(8vw, -1vh, 0) scale(.66);
    }

    .bird-frame-up { opacity: 1; }
    .bird-frame-down { opacity: 0; }
}


body:not(.is-world-entered) .bird-flock,
body:not(.is-world-entered) .bird-frame {
    animation-play-state: paused !important;
}


/* 13. Bletki mobile — jeden system powiązany z globalnym menu. */
@media (max-width: 760px) {
    .jj-hero.is-bletki-scene .character-selector {
        --cast-center: 50%;
        inset: max(64px, calc(env(safe-area-inset-top) + 54px)) 8px max(10px, env(safe-area-inset-bottom));
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) 32px;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 3px;
        z-index: 48;
        overflow: visible;
    }

    .jj-hero.is-bletki-scene .character-selector-story {
        position: relative;
        inset: auto;
        grid-row: 1;
        justify-self: start;
        width: min(calc(100% - 14px), 284px);
        height: auto;
        margin: clamp(10px, 2.2vh, 18px) 0 0 clamp(-14px, -3.2vw, -6px);
        padding: 0;
        transform: none;
    }

    .jj-hero.is-bletki-scene .character-selector-bubble {
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: 9px 14px;
        border-width: 2px;
        border-radius: 48% / 44%;
        font-size: clamp(.84rem, 3.8vw, .96rem);
        line-height: 1.32;
        text-wrap: balance;
    }

    .jj-hero.is-bletki-scene .character-selector-bubble::before,
    .jj-hero.is-bletki-scene .character-selector-bubble::after {
        display: none !important;
        content: none !important;
    }

    .jj-hero.is-bletki-scene .character-selector-stage {
        position: relative;
        inset: auto;
        grid-row: 2;
        width: calc(100% - var(--side-menu-width) - var(--side-menu-offset) - 2px);
        min-width: 0;
        min-height: 0;
        margin: -8px 0 0 calc(var(--side-menu-width) + var(--side-menu-offset) + 2px);
        overflow: hidden;
        touch-action: pan-y;
    }

    .jj-hero.is-bletki-scene .character-selector-list {
        position: absolute;
        inset: 0;
    }

    .jj-hero.is-bletki-scene .character-selector-item,
    .jj-hero.is-bletki-scene .character-selector-item[data-character-id="tom-carter"] {
        left: 50%;
        bottom: 0;
        width: min(60vw, 252px);
        height: 100%;
        max-height: none;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-50%, 0, 0) scale(.88);
    }

    .jj-hero.is-bletki-scene .character-selector-item[data-selected="true"] {
        z-index: 4 !important;
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(-50%, 0, 0) scale(1);
    }

    .jj-hero.is-bletki-scene .character-selector-item[data-character-id="tom-carter"] .character-selector-portrait img {
        transform: none;
    }

    .jj-hero.is-bletki-scene .character-selector-enter {
        position: relative;
        inset: auto;
        grid-row: 3;
        justify-self: center;
        width: auto;
        align-self: center;
        min-width: 0;
        min-height: 28px;
        margin: 0 0 0 calc((var(--side-menu-width) + var(--side-menu-offset)) / 2);
        padding: 4px 10px;
        border: 0;
        border-bottom: 1px solid rgba(245, 217, 157, .48);
        border-radius: 0;
        color: rgba(255, 231, 184, .9);
        background: rgba(30, 10, 13, .42);
        box-shadow: none;
        transform: none;
    }

    .jj-hero.is-bletki-scene .character-selector-enter:not(:disabled):hover {
        transform: none;
    }

    .jj-hero.is-bletki-scene .character-selector-arrow {
        z-index: 20;
        top: calc(50% + 34px);
        width: 52px;
        height: 52px;
        font-size: 0;
    }

    .jj-hero.is-bletki-scene .character-selector-arrow-prev {
        left: calc(var(--side-menu-width) + var(--side-menu-offset) + 6px);
    }

    .jj-hero.is-bletki-scene .character-selector-arrow-next {
        right: 0;
    }

    .jj-hero.is-bletki-scene .character-selector-arrow:disabled {
        visibility: hidden;
        pointer-events: none;
    }

    .jj-hero.is-bletki-scene .character-selector-story > .speech-dot {
        border-width: 2px;
    }

    .jj-hero.is-bletki-scene .character-selector-story > .speech-dot-one {
        top: calc(100% + 38px);
        right: 9%;
        width: 10px;
        height: 10px;
    }

    .jj-hero.is-bletki-scene .character-selector-story > .speech-dot-two {
        top: calc(100% + 22px);
        right: 17%;
        width: 16px;
        height: 16px;
    }

    .jj-hero.is-bletki-scene .character-selector-story > .speech-dot-three {
        top: calc(100% + 3px);
        right: 27%;
        width: 23px;
        height: 23px;
    }

    .jj-hero.is-bletki-scene .character-selector.is-thought-ready .character-selector-story > .speech-dot-one {
        animation-delay: .04s;
        animation-duration: .24s;
    }

    .jj-hero.is-bletki-scene .character-selector.is-thought-ready .character-selector-story > .speech-dot-two {
        animation-delay: .28s;
        animation-duration: .27s;
    }

    .jj-hero.is-bletki-scene .character-selector.is-thought-ready .character-selector-story > .speech-dot-three {
        animation-delay: .56s;
        animation-duration: .3s;
    }

    .jj-hero.is-bletki-scene .character-selector.is-bubble-ready .character-selector-bubble {
        animation-duration: .42s;
    }

    .jj-hero.is-bletki-scene .character-selector-enter-action {
        font-size: .58rem;
        letter-spacing: .1em;
    }

}

@media (max-width: 320px) {
    .jj-hero.is-bletki-scene .character-selector {
        inset-inline: 6px;
        grid-template-rows: auto minmax(0, 1fr) 30px;
        row-gap: 2px;
    }

    .jj-hero.is-bletki-scene .character-selector-bubble {
        min-height: 58px;
        padding: 8px 10px;
        font-size: .79rem;
        line-height: 1.3;
    }

    .jj-hero.is-bletki-scene .character-selector-item,
    .jj-hero.is-bletki-scene .character-selector-item[data-character-id="tom-carter"] {
        width: min(55vw, 196px);
    }

    .jj-hero.is-bletki-scene .character-selector-arrow {
        width: 48px;
        height: 48px;
        font-size: 0;
    }
}




/* 14. Indywidualne sceny bohaterów — korekta dymku oraz dymu per postać. */
.jj-hero.is-panel-open:is(
    [data-active-section="jesse-james-historia-rewolwerowca"],
    [data-active-section="tom-carter-natural-paper"]
) #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
    translate: clamp(-34px, -2.2vw, -18px) clamp(-24px, -2vh, -12px);
}

.jj-hero.is-panel-open[data-active-section="rose-kolekcja"] #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-svg,
.jj-hero.is-panel-open[data-active-section="rose-kolekcja"] #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke-mobile,
.jj-hero.is-panel-open[data-active-section="rose-kolekcja"] #scenePanel.scene-panel.scene-panel-layout-character .scene-smoke {
    display: none !important;
    animation: none !important;
}

@media (max-width: 760px) {
    .jj-hero.is-panel-open:is(
        [data-active-section="jesse-james-historia-rewolwerowca"],
        [data-active-section="tom-carter-natural-paper"]
    ) #scenePanel.scene-panel.scene-panel-layout-character .scene-speech-bubble {
        translate: -10px -12px;
    }
}


/* 15. Świat Rose — osobna, czterowarstwowa scena bez pyłu i płatków. */
.jj-hero[data-scene="rose"] .scene {
    background: linear-gradient(180deg, #e58daa 0%, #f3a296 48%, #c75b79 100%);
}

.jj-hero[data-scene="rose-fallback"] .scene {
    background: #dc829b url('../img/rose-sky.webp') center center / cover no-repeat;
}

.jj-hero[data-scene="rose-fallback"] .scene > * {
    visibility: hidden;
}

.jj-hero[data-scene="rose"] .layer-base {
    background-image: url('../img/rose-sky.webp');
    background-position: center center;
    background-size: cover;
    filter: saturate(1.02) contrast(1.01);
}

.jj-hero[data-scene="rose"] .layer-sun {
    opacity: .16;
    background: radial-gradient(circle at 51% 73%, rgba(255, 242, 190, .44) 0 5%, transparent 22%);
}

.jj-hero[data-scene="rose"] .layer-clouds {
    inset: -2% -5%;
    background-position: center center;
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
}

.jj-hero[data-scene="rose"] .layer-clouds-back {
    background-image: url('../img/rose-cloud-back.webp');
    opacity: .66;
    transform: scale(1.025);
}

.jj-hero[data-scene="rose"] .layer-clouds-front {
    background-image: url('../img/rose-cloud-front.webp');
    opacity: .76;
    transform: scale(1.045);
}

.jj-hero[data-scene="rose"] .layer-haze {
    background-image: none;
    background: radial-gradient(ellipse at 52% 62%, rgba(255, 213, 201, .24), transparent 52%);
    opacity: .34;
    -webkit-mask-image: none;
    mask-image: none;
}

.jj-hero[data-scene="rose"] .layer-terrain {
    background-image: url('../img/rose-ground.webp');
    background-position: center center;
    background-size: cover;
    filter: saturate(1.03) contrast(1.02);
}

.jj-hero[data-scene="rose"] .layer-foreground-shadow {
    background:
        linear-gradient(to top, rgba(43, 9, 24, .50) 0%, rgba(74, 22, 43, .16) 18%, transparent 42%),
        radial-gradient(ellipse at 50% 96%, rgba(56, 9, 29, .30), transparent 44%);
}

.jj-hero[data-scene="rose"] .layer-vignette {
    background:
        radial-gradient(circle at 50% 48%, transparent 42%, rgba(91, 22, 54, .08) 70%, rgba(38, 5, 22, .42) 100%),
        linear-gradient(to bottom, rgba(64, 13, 43, .08), transparent 34%, rgba(57, 9, 31, .16));
}

.jj-hero[data-scene="rose"] .dust-field,
.jj-hero[data-scene="rose"] .birds-flight {
    display: none;
    animation: none !important;
}

@media (max-width: 760px) {
    .jj-hero[data-scene="rose"] .layer-base,
    .jj-hero[data-scene="rose"] .layer-clouds,
    .jj-hero[data-scene="rose"] .layer-terrain {
        background-position: 50% center;
        background-size: auto 100%;
    }

    .jj-hero[data-scene="rose"] .layer-clouds {
        inset: 0;
    }

    .jj-hero[data-scene="rose"] .layer-clouds-back {
        transform: scale(1.02);
    }

    .jj-hero[data-scene="rose"] .layer-clouds-front {
        transform: scale(1.035);
    }
}


/* 16. Świat Toma — osobna, czterowarstwowa scena miasteczka bez ptaków. */
.jj-hero[data-scene="tom"] .scene {
    background: linear-gradient(180deg, #9f3e32 0%, #ef742a 48%, #51251d 100%);
}

.jj-hero[data-scene="tom-fallback"] .scene {
    background: #a94a31 url('../img/tom-sky.webp') center center / cover no-repeat;
}

.jj-hero[data-scene="tom-fallback"] .scene > * {
    visibility: hidden;
}

.jj-hero[data-scene="tom"] .layer-base {
    background-image: url('../img/tom-sky.webp');
    background-position: center center;
    background-size: cover;
    filter: saturate(1.03) contrast(1.02);
}

.jj-hero[data-scene="tom"] .layer-sun {
    opacity: .18;
    background: radial-gradient(circle at 69% 82%, rgba(255, 225, 129, .36) 0 5%, transparent 23%);
}

.jj-hero[data-scene="tom"] .layer-clouds {
    inset: -2% -5%;
    background-position: center center;
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
}

.jj-hero[data-scene="tom"] .layer-clouds-back {
    background-image: url('../img/tom-cloud-back.webp');
    opacity: .78;
    transform: scale(1.025);
}

.jj-hero[data-scene="tom"] .layer-clouds-front {
    background-image: url('../img/tom-cloud-front.webp');
    opacity: .86;
    transform: scale(1.045);
}

.jj-hero[data-scene="tom"] .layer-haze {
    background-image: none;
    background: radial-gradient(ellipse at 63% 68%, rgba(255, 183, 89, .20), transparent 50%);
    opacity: .32;
    -webkit-mask-image: none;
    mask-image: none;
}

.jj-hero[data-scene="tom"] .layer-terrain {
    background-image: url('../img/tom-ground.webp');
    background-position: center center;
    background-size: cover;
    filter: saturate(1.02) contrast(1.03);
}

.jj-hero[data-scene="tom"] .layer-foreground-shadow {
    background:
        linear-gradient(to top, rgba(20, 8, 5, .64) 0%, rgba(38, 14, 8, .18) 18%, transparent 40%),
        radial-gradient(ellipse at 50% 96%, rgba(20, 7, 4, .32), transparent 46%);
}

.jj-hero[data-scene="tom"] .layer-vignette {
    background:
        radial-gradient(circle at 50% 48%, transparent 39%, rgba(54, 13, 8, .09) 69%, rgba(19, 4, 3, .50) 100%),
        linear-gradient(to bottom, rgba(45, 9, 8, .08), transparent 34%, rgba(24, 6, 4, .20));
}

.jj-hero[data-scene="tom"] .birds-flight {
    display: none;
    animation: none !important;
}

@media (max-width: 760px) {
    .jj-hero[data-scene="tom"] .layer-base,
    .jj-hero[data-scene="tom"] .layer-clouds,
    .jj-hero[data-scene="tom"] .layer-terrain {
        background-position: 50% center;
        background-size: auto 100%;
    }

    .jj-hero[data-scene="tom"] .layer-clouds {
        inset: 0;
    }

    .jj-hero[data-scene="tom"] .layer-clouds-back {
        transform: scale(1.02);
    }

    .jj-hero[data-scene="tom"] .layer-clouds-front {
        transform: scale(1.035);
    }
}


/* 17. Akcesoria — interaktywny storyboard sklepu. */
.jj-hero[data-scene="akcesoria"] .scene {
    background: #140a06;
}

.jj-hero[data-scene="akcesoria"] .scene > * {
    visibility: hidden;
}

.accessories-storyboard {
    position: absolute;
    z-index: 31;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.jj-hero[data-scene="akcesoria"][data-active-section="akcesoria"] .accessories-storyboard {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.accessories-storyboard-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #120804;
    pointer-events: none;
}

.accessories-storyboard-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.accessories-storyboard-image {
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

/* Położenia sceny ustawia centralna konfiguracja w assets/js/app.js. */
.accessories-products {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: max(100%, calc(100vh * 1.77684));
    aspect-ratio: 1672 / 941;
    transform: translate(-50%, -50%);
    pointer-events: none;
    container-type: inline-size;
    container-name: accessories-storyboard;
}

.accessories-product {
    position: absolute;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: #321405;
    pointer-events: none;
}

.accessories-product-hit {
    position: absolute;
    z-index: 3;
    left: var(--product-hit-left);
    top: var(--product-hit-top);
    width: var(--product-hit-width);
    height: var(--product-hit-height);
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.accessories-product-slot-featured {
    --product-slot-left: 35%;
    --product-slot-top: 25%;
    --product-slot-width: 30%;
    --product-slot-height: 51.5%;
    --product-visual-left: 49%;
    --product-visual-top: 42%;
    --product-visual-width: 60%;
    --product-label-left: 50%;
    --product-label-top: 83%;
    --product-label-width: 42%;
    --product-label-height: 9%;
    --product-label-size: 1.18cqw;
    --product-hit-left: 17%;
    --product-hit-top: 34%;
    --product-hit-width: 66%;
    --product-hit-height: 58%;
    left: var(--product-slot-left);
    top: var(--product-slot-top);
    width: var(--product-slot-width);
    height: var(--product-slot-height);
}

.accessories-product-slot-bottom-left {
    --product-slot-left: 18%;
    --product-slot-top: 42%;
    --product-slot-width: 25%;
    --product-slot-height: 25%;
    --product-visual-left: 43%;
    --product-visual-top: -9%;
    --product-visual-width: 29%;
    --product-label-left: 41%;
    --product-label-top: 68%;
    --product-label-width: 52%;
    --product-label-height: 10%;
    --product-label-size: .9cqw;
    --product-hit-left: 25%;
    --product-hit-top: -8%;
    --product-hit-width: 42%;
    --product-hit-height: 92%;
    left: var(--product-slot-left);
    top: var(--product-slot-top);
    width: var(--product-slot-width);
    height: var(--product-slot-height);
}

.accessories-product-visual {
    position: absolute;
    left: var(--product-visual-left);
    top: var(--product-visual-top);
    display: block;
    width: var(--product-visual-width);
    transform: translateX(-50%);
    transform-origin: 50% 88%;
    filter: drop-shadow(0 13px 9px rgba(0, 0, 0, .58));
    transition: filter 180ms ease, transform 180ms ease;
}

.accessories-product-visual img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.accessories-product-name {
    position: absolute;
    left: var(--product-label-left);
    top: var(--product-label-top);
    display: grid;
    width: var(--product-label-width);
    height: var(--product-label-height);
    place-items: center;
    overflow: hidden;
    color: #321405;
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--product-label-size);
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px rgba(255, 225, 147, .5);
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}

.accessories-product-hit:focus-visible {
    outline: 3px solid #fff0bc;
    outline-offset: 3px;
}

.accessories-product:has(.accessories-product-hit:focus-visible) .accessories-product-visual {
    filter: drop-shadow(0 13px 9px rgba(0, 0, 0, .58)) drop-shadow(0 0 5px #fff0bc);
}

@media (hover: hover) and (pointer: fine) {
    .accessories-product:has(.accessories-product-hit:hover) .accessories-product-visual {
        filter: brightness(1.07) drop-shadow(0 16px 11px rgba(0, 0, 0, .64));
        transform: translateX(-50%) translateY(-1.5%) scale(1.018);
    }
}

.accessories-bell {
    position: absolute;
    left: var(--accessories-bell-x);
    top: var(--accessories-bell-y);
    width: var(--accessories-bell-size);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff4ce;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;
}

.accessories-bell::before {
    content: "";
    position: absolute;
    inset: 23% 16% 22%;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 0 3px #fff4ce, 0 0 0 7px rgba(64, 29, 11, .88);
    transition: opacity 140ms ease;
}

.accessories-bell:focus-visible {
    outline: 0;
}

.accessories-bell:focus-visible::before {
    opacity: 1;
}

.accessories-bell-images,
.accessories-bell-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.accessories-bell-image {
    display: block;
    object-fit: contain;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 100ms ease;
    user-select: none;
    pointer-events: none;
}

.accessories-bell-image.is-visible {
    opacity: 1;
}

.accessories-bell-audio {
    display: none;
}

.accessories-bell-hint {
    position: absolute;
    left: var(--accessories-bell-x);
    top: calc(var(--accessories-bell-y) + (var(--accessories-bell-size) * .36));
    margin: 0;
    padding: .32rem .7rem;
    border: 1px solid rgba(244, 197, 104, .55);
    border-radius: 999px;
    background: rgba(24, 10, 5, .82);
    color: #fff0c3;
    font-size: clamp(.68rem, .85vw, .82rem);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .9;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/*
 * Scene stage: tło i wszystkie elementy interaktywne żyją w jednej przestrzeni
 * współrzędnych. Geometrię w px sceny ustawia ACCESSORIES_SCENE_LAYOUTS w app.js.
 */
.accessories-storyboard-frame {
    overflow: hidden;
}

.accessories-scene-stage {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
}

.accessories-scene-stage .accessories-storyboard-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.accessories-scene-stage .accessories-products {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    transform: none;
    pointer-events: none;
    container-type: normal;
}

.accessories-scene-stage .accessories-product {
    position: absolute;
    pointer-events: none;
}

.accessories-placeholders {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

.accessories-placeholder {
    position: absolute;
    display: grid;
    place-items: end center;
    pointer-events: none;
}

.accessories-placeholder img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45));
    user-select: none;
}

.accessories-scene-stage .accessories-product-visual {
    position: absolute;
    transform: none;
}

/* Zachowuje pozycję bazową nadaną przez layout JS także podczas hover/focus. */
@media (hover: hover) and (pointer: fine) {
    .accessories-scene-stage .accessories-product:has(.accessories-product-hit:hover) .accessories-product-visual {
        transform: translateY(-1.5%) scale(1.018);
    }
}

.accessories-scene-stage .accessories-product-name {
    position: absolute;
    transform: none;
}

.accessories-scene-stage .accessories-product-hit {
    position: absolute;
}

.accessories-scene-stage .accessories-bell {
    position: absolute;
    transform: none;
}

.accessories-scene-stage .accessories-bell-hint {
    position: absolute;
    min-width: 112px;
    font-size: 14px;
    line-height: 1.15;
    text-align: center;
    transform: translate(-50%, -50%);
}

/* Tryb kalibracyjny jest domyślnie wyłączony. */
.is-accessories-scene-debug .accessories-scene-stage .accessories-product {
    outline: 2px dashed rgba(70, 226, 255, .95);
    outline-offset: -1px;
}

.is-accessories-scene-debug .accessories-scene-stage .accessories-product::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e618ff;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.is-accessories-scene-debug .accessories-scene-stage .accessories-product::after {
    content: attr(class);
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    padding: 4px 6px;
    background: rgba(0, 0, 0, .8);
    color: #70e2ff;
    font: 700 12px/1 monospace;
    white-space: nowrap;
    pointer-events: none;
}

.is-accessories-scene-debug .accessories-scene-stage .accessories-product-hit {
    outline: 2px solid rgba(255, 239, 68, .95);
    outline-offset: -1px;
}

/* Modal kontaktowy uruchamiany dzwonkiem. */
.accessories-contact-modal {
    position: absolute;
    z-index: 70;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.accessories-contact-modal.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.accessories-contact-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(75, 34, 13, .18), transparent 42%),
        rgba(10, 3, 1, .78);
    cursor: default;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.accessories-contact-card {
    position: relative;
    width: min(100%, 640px);
    min-height: 390px;
    padding: clamp(2.8rem, 5vw, 3.8rem) clamp(3.1rem, 7.5vw, 5.6rem) clamp(2.6rem, 4.5vw, 3.35rem);
    border: 0;
    background:
        radial-gradient(circle at 8% 10%, rgba(76, 28, 8, .12), transparent 17%),
        radial-gradient(circle at 92% 88%, rgba(91, 35, 10, .1), transparent 18%),
        url('../img/ui/papirus.webp') center / 100% 100% no-repeat,
        #e1ac62;
    color: #351606;
    text-align: center;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6));
    transform: translateY(12px) scale(.97);
    transition: transform 260ms cubic-bezier(.2, .75, .2, 1);
}

.accessories-contact-card::before,
.accessories-contact-card::after {
    content: "✦";
    position: absolute;
    top: clamp(2.1rem, 5vw, 3.2rem);
    color: #7e3e12;
    font-size: .8rem;
    opacity: .8;
}

.accessories-contact-card::before { left: clamp(2.2rem, 6vw, 4.2rem); }
.accessories-contact-card::after { right: clamp(2.2rem, 6vw, 4.2rem); }

.accessories-contact-modal.is-visible .accessories-contact-card {
    transform: translateY(0) scale(1);
}

.accessories-contact-close {
    position: absolute;
    z-index: 1;
    top: clamp(1.5rem, 3.5vw, 2.2rem);
    right: clamp(1.7rem, 4.5vw, 3.1rem);
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(91, 40, 10, .55);
    border-radius: 50%;
    background: rgba(236, 190, 105, .34);
    color: #522307;
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: inset 0 0 0 3px rgba(255, 231, 173, .12);
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.accessories-contact-close span {
    display: block;
    transform: translateY(-1px);
    transition: transform 180ms ease;
}

.accessories-contact-kicker {
    margin: 0 0 .45rem;
    color: #7b3b10;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.accessories-contact-card h2 {
    margin: 0;
    color: #3f1906;
    text-shadow: 0 1px rgba(255, 231, 171, .55);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 4.2vw, 2.8rem);
    line-height: 1.05;
    text-wrap: balance;
}

.accessories-contact-lead {
    max-width: 38ch;
    margin: 1rem auto 1.25rem;
    color: #4d250c;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    line-height: 1.55;
}

.accessories-contact-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.accessories-contact-details a {
    position: relative;
    display: grid;
    min-height: 76px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(105, 49, 11, .48);
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(105, 49, 11, .12), transparent 34%, rgba(105, 49, 11, .06)),
        rgba(255, 231, 174, .16);
    color: #3d1906;
    text-align: left;
    text-decoration: none;
    box-shadow: inset 0 0 0 3px rgba(255, 235, 185, .18);
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.accessories-contact-detail-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(91, 40, 10, .5);
    border-radius: 50%;
    color: #6f310d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.accessories-contact-detail-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.accessories-contact-detail-copy small {
    color: #864514;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.accessories-contact-details strong {
    overflow-wrap: anywhere;
    font-size: clamp(.8rem, 2vw, .96rem);
}

.accessories-contact-cta {
    position: relative;
    display: block;
    width: min(88%, 270px);
    min-height: 52px;
    margin: .55rem auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff7df;
    filter: drop-shadow(0 9px 9px rgba(46, 17, 5, .32));
    cursor: pointer;
    transition: filter 180ms ease, transform 180ms ease;
}

.accessories-contact-cta img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.accessories-contact-close:focus-visible,
.accessories-contact-details a:focus-visible,
.accessories-contact-cta:focus-visible {
    outline: 3px solid #4e2108;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .accessories-contact-close:hover {
        border-color: #542006;
        background: rgba(102, 38, 7, .88);
        color: #ffe7b0;
        box-shadow: inset 0 0 0 3px rgba(255, 214, 137, .16), 0 5px 13px rgba(67, 24, 5, .24);
        transform: rotate(6deg) scale(1.06);
    }

    .accessories-contact-close:hover span {
        transform: translateY(-1px) rotate(84deg);
    }

    .accessories-contact-details a:hover {
        border-color: #7b390e;
        background-color: rgba(151, 80, 23, .14);
        box-shadow: inset 0 0 0 3px rgba(255, 235, 185, .25), 0 5px 12px rgba(83, 35, 8, .12);
        transform: translateY(-2px);
    }

    .accessories-contact-cta:hover {
        filter: brightness(1.1) saturate(1.06) drop-shadow(0 12px 11px rgba(46, 17, 5, .38));
        transform: translateY(-2px) scale(1.015);
    }
}

@media (max-width: 560px) {
    .accessories-contact-modal { padding: .45rem; }
    .accessories-contact-card {
        width: min(100%, 430px);
        min-height: min(82svh, 540px);
        aspect-ratio: auto;
        padding: clamp(3rem, 8vh, 4rem) clamp(2.15rem, 10vw, 3.2rem) clamp(2.8rem, 7vh, 3.6rem);
    }
    .accessories-contact-card::before,
    .accessories-contact-card::after { top: 2.6rem; }
    .accessories-contact-close { top: 2rem; right: 1.8rem; }
    .accessories-contact-details { grid-template-columns: 1fr; gap: .55rem; }
    .accessories-contact-details a { min-height: 58px; padding-block: .5rem; }
    .accessories-contact-lead { margin-block: .75rem 1rem; }
    .accessories-contact-cta { width: min(86%, 235px); min-height: 48px; margin-top: .45rem; }
    .accessories-contact-cta img { max-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .accessories-contact-modal,
    .accessories-contact-card,
    .accessories-contact-details a,
    .accessories-contact-close,
    .accessories-contact-close span,
    .accessories-contact-cta {
        transition: none !important;
    }
}

@media (max-width: 799px) and (orientation: portrait) {
    .jj-hero[data-active-section="akcesoria"] {
        --side-menu-hit-width: calc(var(--side-menu-width) * 1.3);
    }

    .jj-hero[data-active-section="akcesoria"] .bottom-dock {
        pointer-events: auto !important;
        touch-action: pan-y;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accessories-storyboard,
    .accessories-bell-image,
    .accessories-bell::before {
        transition: none !important;
    }
}

/* Modal szczegółów produktu — duża karta ekspozycyjna na papirusie. */
.accessories-product-modal {
    position: absolute;
    z-index: 71;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 3vw, 2.5rem);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.accessories-product-modal.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.accessories-product-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(8, 3, 1, .84);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.accessories-product-modal-card {
    --product-modal-gallery-height: clamp(68px, 10svh, 108px);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    grid-template-rows: minmax(0, 1fr) var(--product-modal-gallery-height);
    width: min(94vw, 1440px);
    height: min(88svh, 900px);
    min-height: min(500px, 88svh);
    overflow: hidden;
    border: 2px solid rgba(91, 40, 10, .7);
    background:
        linear-gradient(135deg, rgba(84, 32, 8, .12), transparent 45%),
        url('../img/ui/papirus.webp') center / 100% 100% no-repeat,
        #dfaa5e;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .72), inset 0 0 0 7px rgba(255, 229, 170, .16);
    color: #351606;
    transform: translateY(18px) scale(.98);
    transition: transform 260ms cubic-bezier(.2, .75, .2, 1);
}

.accessories-product-modal.is-visible .accessories-product-modal-card { transform: translateY(0) scale(1); }

.accessories-product-modal.has-single-product-image .accessories-product-modal-card {
    grid-template-rows: minmax(0, 1fr);
}

.accessories-product-modal-gallery[hidden] {
    display: none;
}

.accessories-product-modal-media {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 4rem);
    background: radial-gradient(ellipse at 48% 45%, rgba(77, 31, 10, .18), transparent 57%);
}

/* Packshot wypełnia wyłącznie dostępne pole media i zawsze zachowuje proporcje. */
.accessories-product-modal-media > img[data-accessories-product-modal-image] {
    position: static;
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    transform: none;
    filter: drop-shadow(0 25px 20px rgba(41, 14, 4, .35));
    pointer-events: none;
}

.accessories-product-modal-content {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    min-height: 0;
    padding: clamp(1.5rem, 5vh, 4rem) clamp(2rem, 6vw, 6rem) clamp(1rem, 3vh, 2.5rem) clamp(1rem, 3vw, 3rem);
}

.accessories-product-modal-kicker {
    margin: 0 0 .75rem;
    color: #7b3b10;
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.accessories-product-modal h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.35rem, 5vw, 5.25rem);
    line-height: .96;
    text-wrap: balance;
}

.accessories-product-modal-content > p:not(.accessories-product-modal-kicker) {
    max-width: 38ch;
    margin: 1.25rem 0 1.75rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.58;
}

.accessories-product-modal-actions {
    display: grid;
    gap: .65rem;
    width: min(100%, 330px);
}

.accessories-product-modal-cta {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: .78rem 1.1rem;
    border: 1px solid rgba(93, 38, 10, .75);
    background: rgba(255, 232, 177, .18);
    color: #4b1c06;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: inset 0 1px rgba(255, 238, 192, .3);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.accessories-product-modal-cta-primary {
    border-color: #5d260a;
    background: linear-gradient(180deg, #7b3510, #461705);
    color: #fff0c3;
    box-shadow: inset 0 1px rgba(255, 221, 147, .22), 0 8px 15px rgba(65, 21, 4, .22);
}

.accessories-product-modal-cta-form {
    background: rgba(91, 38, 10, .12);
}

@media (hover: hover) and (pointer: fine) {
    .accessories-product-modal-cta:hover {
        border-color: #6d2b09;
        background: rgba(126, 57, 14, .22);
        color: #351203;
        box-shadow: inset 0 1px rgba(255, 238, 192, .42), 0 6px 13px rgba(65, 21, 4, .18);
        transform: translateY(-2px);
    }

    .accessories-product-modal-cta-primary:hover {
        border-color: #3e1203;
        background: linear-gradient(180deg, #9a4819, #5b1d06);
        color: #fff7dc;
        box-shadow: inset 0 1px rgba(255, 231, 166, .34), 0 10px 18px rgba(65, 21, 4, .28);
    }

    .accessories-product-modal-cta-form:hover {
        background: rgba(91, 38, 10, .3);
    }
}

.accessories-product-modal-gallery { 
    grid-column: 1 / -1;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    gap: clamp(.65rem, 1.5vw, 1rem);
    padding: .5rem clamp(1.5rem, 4vw, 4rem) clamp(.5rem, 1.5vw, 1rem);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.accessories-product-modal-gallery button {
    flex: 0 0 clamp(58px, 7vw, 96px);
    height: clamp(46px, 5.5vw, 72px);
    min-height: 0;
    padding: 4px;
    border: 1px solid rgba(91, 40, 10, .55);
    background: rgba(255, 232, 177, .22);
    cursor: pointer;
}

.accessories-product-modal-gallery button[aria-current="true"] { border-color: #522006; box-shadow: 0 0 0 2px rgba(82, 32, 6, .45); }
.accessories-product-modal-gallery img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Niskie widoki desktop/ultrawide. Reguła jest po bazowych stylach CTA i galerii,
   aby kaskada nie przywracała dużych wysokości elementów. */
@media (min-width: 761px) and (max-height: 700px) {
    .accessories-product-modal {
        padding: clamp(.4rem, 1.5vh, .75rem);
    }

    .accessories-product-modal-card {
        --product-modal-gallery-height: clamp(56px, 11svh, 72px);
        width: min(96vw, 1440px);
        height: min(96svh, 680px);
        min-height: 0;
    }

    .accessories-product-modal-media {
        padding: clamp(.75rem, 2.5vh, 1.5rem) clamp(.75rem, 2.5vw, 2.5rem);
    }

    .accessories-product-modal-media > img[data-accessories-product-modal-image] {
        width: auto;
        height: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        max-height: calc(100% - 1rem);
    }

    .accessories-product-modal-content {
        padding: clamp(1rem, 3vh, 1.75rem) clamp(2.5rem, 5vw, 4.5rem) clamp(.75rem, 2vh, 1.25rem) clamp(.75rem, 2vw, 2rem);
    }

    .accessories-product-modal-kicker {
        margin-bottom: .35rem;
        font-size: .66rem;
    }

    .accessories-product-modal h2 {
        font-size: clamp(2rem, 6vh, 3.4rem);
    }

    .accessories-product-modal-content > p:not(.accessories-product-modal-kicker) {
        margin: .65rem 0 .85rem;
        font-size: clamp(.82rem, 2.2vh, 1rem);
        line-height: 1.4;
    }

    .accessories-product-modal-actions {
        gap: .4rem;
    }

    .accessories-product-modal-cta {
        min-height: 38px;
        padding: .5rem .85rem;
        font-size: .66rem;
    }

    .accessories-product-modal-gallery {
        padding: .25rem clamp(1rem, 3vw, 2.5rem) .4rem;
    }

    .accessories-product-modal-gallery button {
        flex-basis: clamp(46px, 8vh, 58px);
        height: clamp(40px, 7vh, 52px);
    }

}

.accessories-product-modal-close {
    position: absolute;
    z-index: 2;
    top: clamp(1rem, 2.5vw, 2rem);
    right: clamp(1rem, 2.5vw, 2rem);
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(91, 40, 10, .6);
    border-radius: 50%;
    background: rgba(236, 190, 105, .5);
    color: #4d1d06;
    font-size: 1.8rem;
    cursor: pointer;
}

.accessories-product-modal-close:focus-visible,
.accessories-product-modal-cta:focus-visible,
.accessories-product-modal-gallery button:focus-visible { outline: 3px solid #3d1605; outline-offset: 3px; }

@media (max-width: 760px) {
    .accessories-product-modal {
        place-items: center;
        overflow: hidden;
        padding: max(.35rem, env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) max(.35rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
        touch-action: none;
    }

    .accessories-product-modal-card {
        display: flex;
        flex-direction: column;
        width: min(100%, 560px);
        height: calc(100dvh - max(.7rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        max-height: 900px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        touch-action: pan-y;
    }

    .accessories-product-modal-media {
        order: 1;
        flex: 0 0 clamp(220px, 34svh, 280px);
        min-height: 0;
        padding: 3rem 1.25rem .5rem;
    }

    .accessories-product-modal-media > img[data-accessories-product-modal-image] {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Miniatury należą do zdjęcia produktu. Na mobile pozostają bezpośrednio
       pod packshotem zamiast konkurować o miejsce z przyciskami kontaktowymi. */
    .accessories-product-modal-gallery {
        order: 2;
        flex: 0 0 auto;
        justify-content: center;
        gap: .65rem;
        width: 100%;
        padding: .45rem 1.25rem .75rem;
        overflow-x: auto;
    }

    .accessories-product-modal-gallery button {
        flex-basis: 58px;
        width: 58px;
        height: 48px;
    }

    .accessories-product-modal-content {
        order: 3;
        flex: 0 0 auto;
        align-self: stretch;
        padding: .8rem 1.5rem 1.4rem;
    }

    .accessories-product-modal-kicker {
        margin-bottom: .4rem;
        font-size: .68rem;
    }

    .accessories-product-modal h2 { font-size: clamp(2.1rem, 10vw, 3.25rem); }

    .accessories-product-modal-content > p:not(.accessories-product-modal-kicker) {
        margin-block: .65rem .9rem;
        font-size: .95rem;
        line-height: 1.48;
    }

    .accessories-product-modal-actions {
        width: 100%;
        gap: .5rem;
    }

    .accessories-product-modal-cta {
        min-height: 46px;
        padding: .7rem .8rem;
        font-size: .69rem;
    }

    .accessories-product-modal-close {
        position: sticky;
        top: .65rem;
        align-self: flex-end;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: .65rem .65rem -3.4rem 0;
    }
}

/* Bardzo niskie telefony: nie kompresujemy zdjęcia ani CTA. Cała karta jest
   jednym pionowym obszarem przewijania, więc każdy element pozostaje dostępny. */
@media (max-width: 760px) and (max-height: 720px) {
    .accessories-product-modal-media {
        flex-basis: 250px;
    }

    .accessories-product-modal-content {
        padding-bottom: max(1.75rem, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .accessories-product-modal,
    .accessories-product-modal-card { transition: none !important; }
}

/* 18. Filmowe przejście między światami — lekka zasłona bez dublowania scen. */
.scene-transition-overlay {
    --scene-transition-color: 92, 42, 24;
    position: absolute;
    z-index: 32;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 58%, rgba(223, 143, 73, .18), transparent 52%),
        linear-gradient(115deg, rgba(27, 7, 9, .86), rgba(var(--scene-transition-color), .82) 48%, rgba(18, 5, 8, .90));
    transform: scale(1.015);
    transition:
        opacity 240ms ease,
        visibility 0s linear 460ms,
        transform 700ms cubic-bezier(.2, .75, .25, 1);
    will-change: opacity, transform;
}

.scene-loading-status {
    position: absolute;
    z-index: 33;
    top: 50%;
    left: 50%;
    max-width: min(28rem, calc(100% - 3rem));
    margin: 0;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 213, 146, .44);
    border-radius: 999px;
    background: rgba(26, 7, 8, .76);
    color: #ffe4b4;
    font-size: clamp(.78rem, 1.6vw, .98rem);
    font-weight: 750;
    letter-spacing: .05em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.scene-loading-status[hidden] { display: none; }

.scene-transition-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    background:
        repeating-radial-gradient(circle at 18% 32%, rgba(255, 220, 160, .16) 0 .6px, transparent .9px 4px),
        radial-gradient(ellipse at 50% 70%, rgba(236, 173, 99, .22), transparent 46%);
    background-size: 9px 9px, auto;
    mix-blend-mode: soft-light;
}

.jj-hero[data-transition-scene="western"] .scene-transition-overlay {
    --scene-transition-color: 91, 31, 27;
}

.jj-hero[data-transition-scene="smokestown"] .scene-transition-overlay {
    --scene-transition-color: 75, 49, 48;
}

.jj-hero[data-transition-scene="tom"] .scene-transition-overlay {
    --scene-transition-color: 157, 69, 31;
}

.jj-hero[data-transition-scene="rose"] .scene-transition-overlay {
    --scene-transition-color: 137, 50, 82;
}

.jj-hero.is-scene-transitioning .scene-transition-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition:
        opacity 240ms ease,
        visibility 0s linear 0s,
        transform 700ms cubic-bezier(.2, .75, .25, 1);
}

.jj-hero.is-scene-loading .scene {
    will-change: transform;
    transition: transform 700ms cubic-bezier(.2, .75, .25, 1);
}

.jj-hero.is-scene-transitioning .scene {
    transform: scale(1.008);
}

@media (prefers-reduced-motion: reduce) {
    .scene-transition-overlay {
        display: none;
    }

    .jj-hero.is-scene-loading .scene,
    .jj-hero.is-scene-transitioning .scene {
        transform: none !important;
        transition: none !important;
    }
}


/* 18. Startowa scena: cztery niezależne warstwy dostarczone przez projekt.
   Słońce jest częścią skyscene.webp, a postacie częścią smokestownscene-2.webp. */
.jj-hero[data-scene="western"] .scene {
    background: #5f0e16;
}

.jj-hero[data-scene="western"] .layer-base {
    background-image: url('../img/skyscene.webp');
    background-position: center center;
    background-size: cover;
    filter: none;
}

.jj-hero[data-scene="western"] .layer-sun,
.jj-hero[data-scene="western"] .parallax-haze {
    display: none;
}

.jj-hero[data-scene="western"] .layer-clouds {
    inset: -5% -14%;
    background-position: center top;
    background-size: cover;
    -webkit-mask-image: none;
    mask-image: none;
}

.jj-hero[data-scene="western"] .layer-clouds-back {
    background-image: url('../img/cloudback.webp');
    opacity: .74;
    transform: scale(1.04);
}

.jj-hero[data-scene="western"] .layer-clouds-front {
    background-image: url('../img/cloudfront.webp');
    opacity: .84;
    transform: scale(1.065);
}

.jj-hero[data-scene="western"] .layer-terrain {
    background-image: url('../img/smokestownscene-2.webp');
    background-position: center center;
    background-size: cover;
    filter: none;
}

.home-cast {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: none;
    pointer-events: none;
}

.jj-hero[data-scene="western"] .home-cast {
    display: block;
}

.home-cast-layer {
    --home-cast-scale: 1;
    --home-cast-y: 0px;
    position: absolute;
    left: 50%;
    bottom: clamp(92px, 14vh, 150px);
    width: min(62vw, 1120px);
    height: min(62vh, 650px);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 18px 20px rgba(12, 2, 3, .30));
    transform-origin: center bottom;
    will-change: transform;
}

.home-cast-rose {
    --home-cast-x: -55vw;
    --home-cast-y: -1vh;
    --home-cast-scale: .72;
    z-index: 1;
    background-image: url('../img/home-rose.webp');
    animation: homeCastBreathe 9.5s ease-in-out -3s infinite alternate;
}

.home-cast-tom {
    --home-cast-x: -7vw;
    --home-cast-y: 0;
    --home-cast-scale: .70;
    z-index: 2;
    background-image: url('../img/home-tom.webp');
    animation: none;
    transform: translate3d(var(--home-cast-x), var(--home-cast-y), 0) scale(var(--home-cast-scale));
    will-change: auto;
}

.home-cast-jesse {
    --home-cast-x: -31vw;
    z-index: 3;
    background-image: url('../img/home-jesse.webp');
    animation: homeCastBreathe 8.8s ease-in-out infinite alternate;
}

.jj-hero[data-scene="western"] .layer-foreground-shadow {
    z-index: 14;
    background: linear-gradient(to top, rgba(10, 3, 3, .42) 0%, rgba(21, 6, 5, .10) 19%, transparent 42%);
}

.jj-hero[data-scene="western"] .layer-vignette {
    background:
        radial-gradient(circle at 50% 47%, transparent 42%, rgba(30, 3, 8, .08) 69%, rgba(13, 1, 5, .42) 100%),
        linear-gradient(to bottom, rgba(35, 2, 11, .07), transparent 31%, rgba(18, 2, 4, .15));
}

@keyframes homeCastBreathe {
    from { transform: translate3d(var(--home-cast-x, 0px), var(--home-cast-y, 0px), 0) scale(var(--home-cast-scale)); }
    to { transform: translate3d(var(--home-cast-x, 0px), calc(var(--home-cast-y, 0px) - 2px), 0) scale(calc(var(--home-cast-scale) * 1.008)); }
}

@media (max-width: 760px) {
    .jj-hero[data-scene="western"] .layer-base,
    .jj-hero[data-scene="western"] .layer-terrain {
        background-position: 50% center;
        background-size: auto 100%;
    }

    .jj-hero[data-scene="western"] .layer-clouds {
        background-position: center top;
        background-size: auto 100%;
    }

    .jj-hero[data-scene="western"] .home-cast-layer {
        bottom: clamp(88px, 15vh, 132px);
        width: min(92vw, 620px);
        height: min(52vh, 430px);
        background-position: center bottom;
        background-size: contain;
    }

    .jj-hero[data-scene="western"] .layer-clouds {
        inset: -4% -20%;
    }

    .jj-hero[data-scene="western"] .layer-clouds-back {
        transform: scale(1.035);
    }

    .jj-hero[data-scene="western"] .layer-clouds-front {
        transform: scale(1.055);
    }

    .jj-hero[data-scene="western"] .home-cast-rose {
        --home-cast-x: -86vw;
        --home-cast-y: -1vh;
        --home-cast-scale: .66;
    }

    .jj-hero[data-scene="western"] .home-cast-jesse {
        --home-cast-x: -47vw;
    }

    .jj-hero[data-scene="western"] .home-cast-tom {
        --home-cast-x: -12vw;
        --home-cast-y: 0;
        --home-cast-scale: .68;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-cast-layer {
        animation: none !important;
        transform: translate3d(var(--home-cast-x, 0px), var(--home-cast-y, 0px), 0) scale(var(--home-cast-scale)) !important;
    }
}


/* 19. Scena formularza kontaktowego — tła przygotowane pod przyszły formularz. */
.jj-hero[data-scene="kontakt"] .scene {
    background: #170b0d url('../img/formularzubg.webp') center center / cover no-repeat;
}

.jj-hero[data-scene="kontakt"] .scene > * {
    visibility: hidden;
}

@media (min-width: 1800px) {
    .jj-hero[data-scene="kontakt"] .scene {
        background-image: url('../img/formularzultrabg.webp');
    }
}

@media (max-width: 760px) {
    .jj-hero[data-scene="kontakt"] .scene {
        background-image: url('../img/formularzmobilebg.webp');
        background-position: center center;
    }
}


/* 20. Makieta formularza — nadruk bezpośrednio na kartce sceny Kontakt. */
.contact-paper-form {
    --contact-ink: rgba(52, 30, 17, .90);
    --contact-muted-ink: rgba(78, 45, 25, .78);
    --contact-rule: rgba(66, 37, 19, .42);
    --contact-rule-hover: rgba(57, 31, 16, .62);
    --contact-rule-focus: rgba(138, 86, 39, .82);
    position: absolute;
    z-index: 35;
    top: 38%;
    left: 50%;
    width: min(37vw, 610px);
    color: var(--contact-ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.jj-hero[data-active-section="kontakt"] .contact-paper-form {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 2.2vw, 38px);
    row-gap: clamp(10px, 1.45vh, 16px);
}

.contact-field {
    min-width: 0;
}

.contact-field--full {
    grid-column: 1 / -1;
    margin-top: clamp(2px, .4vh, 5px);
}

.contact-field-label {
    display: block;
    margin-bottom: 3px;
    color: var(--contact-muted-ink);
    font-size: clamp(.59rem, .7vw, .72rem);
    font-weight: 750;
    letter-spacing: .075em;
    line-height: 1.2;
}

.contact-field-label span {
    font-size: .84em;
    font-weight: 550;
    letter-spacing: .04em;
    opacity: .72;
}

.contact-field-input,
.contact-field-textarea {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    color: #2d1c12;
    font: 600 clamp(.76rem, .88vw, .92rem) / 1.35 Georgia, "Times New Roman", serif;
    caret-color: #704020;
    transition: border-color 210ms ease, color 210ms ease;
}

.contact-field-input {
    height: clamp(21px, 2.55vh, 28px);
    padding: 1px 0 3px;
    background: transparent;
    border-bottom: 1px solid var(--contact-rule);
}

.contact-field-textarea {
    height: clamp(64px, 9.2vh, 94px);
    padding: 1px 0 0;
    resize: none;
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(33.333% - 1px),
        var(--contact-rule) calc(33.333% - 1px),
        var(--contact-rule) 33.333%
    );
    background-size: 100% 100%;
    line-height: calc(clamp(64px, 9.2vh, 94px) / 3);
}

.contact-field:focus-within .contact-field-label {
    color: rgba(96, 56, 26, .92);
}

.contact-field-input:hover,
.contact-field-textarea:hover {
    border-color: var(--contact-rule-hover);
}

.contact-field-input:focus,
.contact-field-textarea:focus {
    border-color: var(--contact-rule-focus);
    color: #24140d;
}

.contact-field-textarea:focus {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(33.333% - 1px),
        var(--contact-rule-focus) calc(33.333% - 1px),
        var(--contact-rule-focus) 33.333%
    );
}

.contact-form-actions {
    display: flex;
    justify-content: center;
    margin-top: clamp(12px, 1.8vh, 20px);
}

.contact-form-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 29px;
    padding: 6px clamp(16px, 1.8vw, 24px);
    border: 1px solid rgba(250, 211, 145, .78);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(64, 31, 16, .94), rgba(31, 14, 8, .96));
    color: #f5d59a;
    font: 700 clamp(.58rem, .65vw, .68rem) / 1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .115em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 225, 167, .18), 0 2px 6px rgba(34, 12, 5, .20);
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 180ms ease;
}

.contact-form-submit::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    background: linear-gradient(105deg, transparent 28%, rgba(237, 184, 100, .32) 50%, transparent 72%);
    opacity: 0;
    transform: translateX(-72%);
    transition: opacity 180ms ease, transform 380ms cubic-bezier(.2, .75, .25, 1);
}

.contact-form-submit:hover,
.contact-form-submit:focus-visible {
    border-color: rgba(255, 225, 160, .96);
    background: linear-gradient(180deg, rgba(99, 54, 24, .97), rgba(46, 21, 10, .98));
    color: #fff0c9;
    box-shadow: inset 0 0 0 1px rgba(255, 231, 171, .36), 0 3px 9px rgba(49, 20, 8, .26);
    outline: 0;
}

.contact-form-submit:hover::before,
.contact-form-submit:focus-visible::before {
    opacity: 1;
    transform: translateX(72%);
}

.contact-form-submit:active {
    border-color: rgba(214, 168, 99, .92);
    background: linear-gradient(180deg, rgba(47, 21, 10, .98), rgba(24, 10, 6, .99));
    color: #efd094;
    box-shadow: inset 0 1px 4px rgba(9, 3, 1, .48), inset 0 0 0 1px rgba(244, 188, 99, .18);
    transform: translateY(1px) scale(.985);
    transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
    .contact-form-submit::before {
        display: none;
    }
}

@media (min-width: 1800px) {
    .contact-paper-form {
        top: 31.5%;
        width: min(35vw, 670px);
    }
}

@media (max-width: 760px) {
    .contact-paper-form {
        /* Więcej oddechu pod emblematem; CTA pozostaje ponad dolną krawędzią kartki. */
        top: 27%;
        left: 65%;
        width: 43.5vw;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
        row-gap: clamp(5px, .9vh, 8px);
    }

    .contact-field--full {
        margin-top: 0;
    }

    .contact-field-label {
        margin-bottom: 1px;
        font-size: clamp(.43rem, 1.45vw, .59rem);
        letter-spacing: .045em;
    }

    .contact-field-input,
    .contact-field-textarea {
        font-size: clamp(.58rem, 1.85vw, .72rem);
    }

    .contact-field-input {
        height: clamp(16px, 2.65vh, 22px);
        padding-bottom: 1px;
    }

    .contact-field-textarea {
        height: clamp(50px, 8.6vh, 68px);
        line-height: calc(clamp(50px, 8.6vh, 68px) / 3);
    }

    .contact-form-actions {
        margin-top: clamp(7px, 1.15vh, 10px);
    }

    .contact-form-submit {
        min-height: 22px;
        padding: 4px clamp(9px, 2.6vw, 15px);
        font-size: clamp(.43rem, 1.4vw, .56rem);
        letter-spacing: .08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-paper-form,
    .contact-field-input,
    .contact-field-textarea,
    .contact-form-submit {
        transition: none;
    }
}


/* Niedostępne sekcje menu: pozostają osiągalne dla klawiatury, lecz nie otwierają sceny. */
.menu-token.is-coming-soon {
    --jj-coming-soon-gray: grayscale(1) saturate(.08) brightness(.86) contrast(.92);
    opacity: .76;
}

.menu-token.is-coming-soon .menu-token-bg,
.menu-token.is-coming-soon .menu-token-visual,
.menu-token.is-coming-soon .menu-token-label {
    filter: var(--jj-coming-soon-gray) !important;
}

.menu-token.is-coming-soon .menu-token-label {
    color: #d2cdc1;
    text-shadow: 0 2px 0 rgba(22, 16, 13, .92), 0 0 6px rgba(255, 255, 255, .12);
}

.menu-token.is-coming-soon::after,
.menu-token.is-coming-soon.is-hover::after,
.menu-token.is-coming-soon:focus-visible::after,
.menu-token.is-coming-soon.is-active::after {
    opacity: 0;
}

.menu-token.is-coming-soon:hover,
.menu-token.is-coming-soon.is-hover,
.menu-token.is-coming-soon:focus-visible,
.menu-token.is-coming-soon.is-active {
    transform: none;
    opacity: .9;
}

.menu-token.is-coming-soon:focus-visible {
    outline: 3px solid #f7dfad;
    outline-offset: 3px;
}

.menu-token.is-coming-soon .menu-token-visual-animated,
.menu-token.is-coming-soon .state-spark {
    animation: none !important;
}

.menu-token.is-coming-soon .state-icon:not(.state-icon-idle),
.menu-token.is-coming-soon .state-spark {
    display: none;
}


.menu-token.is-coming-soon .state-icon-idle {
    display: block;
    opacity: 1 !important;
    transform: scale(1) translateY(0);
}


/* 11. O nas — modularna opowieść marki w świecie Smokestone. */
#scenePanel.scene-panel.scene-panel-layout-about-story {
    width: min(1120px, calc(100vw - var(--side-menu-width) - 88px));
    max-height: min(82svh, 760px);
    padding: 0;
    overflow: hidden;
    color: var(--cream);
    text-align: left;
    outline: 1px solid rgba(236, 173, 91, .42);
    outline-offset: -10px;
    background:
        linear-gradient(90deg, rgba(8, 3, 5, .78), rgba(16, 4, 7, .26) 58%, rgba(8, 3, 5, .76)),
        linear-gradient(180deg, rgba(14, 3, 6, .28), rgba(12, 3, 5, .94)),
        url('../img/smokestownscene.png') center / cover no-repeat,
        #1a070a;
    box-shadow: 0 32px 76px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(255, 225, 166, .12);
}

#scenePanel.scene-panel.scene-panel-layout-about-story::before {
    inset: 10px;
    border-color: rgba(239, 184, 108, .26);
    background: linear-gradient(90deg, rgba(229, 162, 79, .16), transparent 11%, transparent 89%, rgba(229, 162, 79, .13));
}

#scenePanel.scene-panel.scene-panel-layout-about-story::after { display: none; }

#scenePanel.scene-panel.scene-panel-layout-about-story .scene-panel-close {
    position: absolute;
    z-index: 8;
    left: clamp(16px, 2vw, 28px);
    top: clamp(16px, 2vw, 28px);
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid rgba(239, 184, 108, .54);
    background: rgba(18, 5, 7, .84);
    color: #ffe0aa;
    text-transform: uppercase;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .12em;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .26);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    cursor: pointer;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .scene-panel-actions { display: none; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2 {
    width: auto;
    padding: 0;
    border: 0;
    text-align: inherit;
}
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1 { font-size: clamp(3.1rem, 6.4vw, 6.5rem); }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2 { font-size: clamp(2.2rem, 4.4vw, 4.8rem); }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 { font-size: clamp(3rem, 6vw, 6.1rem); }
.about-story { display: none; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story {
    position: relative;
    z-index: 2;
    display: block;
    max-height: min(82svh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 170, 90, .62) rgba(10, 3, 5, .58);
}

.about-story-hero {
    min-height: min(68svh, 590px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: clamp(82px, 11vh, 120px) clamp(30px, 7vw, 96px) clamp(38px, 7vh, 74px);
    background: linear-gradient(90deg, rgba(13, 3, 6, .94), rgba(18, 4, 7, .62) 52%, transparent);
}
.about-story-eyebrow,
.about-story-number {
    margin: 0 0 13px;
    color: #f0b968;
    text-transform: uppercase;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .2em;
}
.about-story h1,
.about-story h2 {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.055em;
}
.about-story h1 {
    max-width: 720px;
    margin: 0;
    color: #ffdfa8;
    font-size: clamp(3.1rem, 6.4vw, 6.5rem);
    font-style: italic;
    line-height: .82;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .72);
}
.about-story h1 em,
.about-story-final h2 em { color: #e27465; }
.about-story-lead {
    max-width: 520px;
    margin: 24px 0 0;
    color: rgba(255, 238, 211, .94);
    font-size: clamp(.98rem, 1.2vw, 1.12rem);
    font-weight: 650;
    line-height: 1.58;
    text-shadow: 0 3px 13px rgba(0, 0, 0, .76);
}
.about-story-jump {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin-top: 28px;
    color: #ffe0aa;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .13em;
}
.about-story-jump span { font-size: 1.1rem; }
.about-story-body { background: #150609; }
.about-story-chapter { padding: clamp(54px, 8vh, 84px) clamp(30px, 7vw, 96px); }
.about-story-chapter h2,
.about-story-manifesto h2,
.about-story-smokestone h2,
.about-story-final h2 {
    margin: 0;
    color: #ffe0aa;
    font-size: clamp(2.2rem, 4.4vw, 4.8rem);
    font-style: italic;
    line-height: .9;
}
.about-story-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 36px;
    max-width: 900px;
    margin-top: 30px;
    color: rgba(255, 235, 205, .9);
    font-size: clamp(.93rem, 1.1vw, 1.04rem);
    font-weight: 560;
    line-height: 1.68;
}
.about-story-copy p { margin: 0; }
.about-story-copy .about-story-note {
    grid-column: 1 / -1;
    padding: 16px 18px;
    border-left: 2px solid var(--gold);
    color: #f8ce8d;
    background: rgba(228, 169, 93, .08);
    font-weight: 750;
}
.about-story-manifesto {
    padding: clamp(54px, 8vh, 90px) clamp(30px, 7vw, 96px);
    background: radial-gradient(circle at 82% 32%, rgba(192, 66, 50, .28), transparent 25%), linear-gradient(135deg, #4c1519, #170508 64%);
}
.about-story-manifesto > p:first-child {
    margin: 0 0 14px;
    color: #efb86a;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .2em;
}
.about-story-manifesto > p:last-child { max-width: 610px; margin: 28px 0 0; color: rgba(255, 234, 204, .9); line-height: 1.65; }
.about-story-lines { background: linear-gradient(180deg, #170609, #29100f); }
.about-story-intro { margin: 16px 0 30px; color: rgba(255, 232, 202, .86); font-weight: 650; }
.about-line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-line-card {
    position: relative;
    min-height: 375px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border: 1px solid rgba(244, 197, 124, .28);
    color: #fff0d1;
    text-decoration: none;
    background: #1a090b;
    box-shadow: inset 0 -80px 70px rgba(0, 0, 0, .76);
}
.about-line-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 24%, rgba(6, 2, 4, .83)); pointer-events: none; }
.about-line-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .3s ease; }
.about-line-card-black { background: radial-gradient(circle at 50% 22%, #71321f, #130608 69%); }
.about-line-card-natural { background: radial-gradient(circle at 50% 22%, #94714d, #150d09 69%); }
.about-line-card-pink { background: radial-gradient(circle at 50% 22%, #943c59, #21080f 69%); }
.about-line-card-content { position: relative; z-index: 2; display: grid; gap: 7px; width: 100%; padding: 20px; }
.about-line-card strong { text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 1.8rem); letter-spacing: .08em; }
.about-line-card small { min-height: 34px; color: rgba(255, 235, 210, .85); font-size: .75rem; line-height: 1.35; }
.about-line-card b { color: #f3bd70; text-transform: uppercase; font-size: .61rem; letter-spacing: .13em; }
.about-story-smokestone { position: relative; min-height: 520px; display: grid; align-items: end; overflow: hidden; }
.about-story-smokestone-image { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 2, 5, .9), rgba(10, 2, 5, .26)), linear-gradient(0deg, rgba(9, 2, 4, .9), transparent 68%), url('../img/smokestownscene.png') center / cover no-repeat; }
.about-story-smokestone-copy { position: relative; z-index: 1; max-width: 650px; padding: clamp(54px, 8vh, 88px) clamp(30px, 7vw, 96px); }
.about-story-smokestone-copy > p:not(.about-story-number) { margin: 20px 0 0; color: rgba(255, 237, 208, .91); line-height: 1.62; font-weight: 590; }
.about-story-final { padding: clamp(64px, 10vh, 106px) clamp(30px, 7vw, 96px); text-align: center; background: linear-gradient(135deg, #120407, #5a171c 55%, #1a0608); }
.about-story-final > p { max-width: 570px; margin: 0 auto 22px; color: rgba(255, 233, 204, .9); font-weight: 620; line-height: 1.6; }
.about-story-final h2 { margin-bottom: 24px; font-size: clamp(3rem, 6vw, 6.1rem); }
#scenePanel.scene-panel.scene-panel-layout-about-story .scene-panel-close:focus-visible,
.about-story a:focus-visible { outline: 3px solid #fff0b9; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .about-line-card:hover img { transform: scale(1.04); } .about-story-jump:hover { color: #fff3ce; } }
@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story { width: calc(100vw - var(--side-menu-width) - 28px); max-height: calc(100svh - 64px); outline-offset: -7px; }
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story { max-height: calc(100svh - 64px); }
    #scenePanel.scene-panel.scene-panel-layout-about-story .scene-panel-close { left: 13px; top: 13px; min-height: 34px; font-size: .52rem; }
    .about-story-hero { min-height: min(68svh, 580px); padding: 84px 22px 34px; background: linear-gradient(90deg, rgba(13, 3, 6, .92), rgba(18, 4, 7, .48)); }
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1 { font-size: clamp(2.75rem, 13vw, 4.3rem); }
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2 { font-size: clamp(2.15rem, 10vw, 3.45rem); }
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
    .about-story-lead { font-size: .91rem; }
    .about-story-chapter, .about-story-manifesto, .about-story-final { padding: 46px 22px; }
    .about-story-copy { grid-template-columns: 1fr; gap: 17px; margin-top: 24px; font-size: .9rem; }
    .about-line-grid { grid-template-columns: 1fr; }
    .about-line-card { min-height: 310px; }
    .about-story-smokestone { min-height: 550px; }
    .about-story-smokestone-copy { padding: 48px 22px; }
    .about-story-final h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
}
@media (prefers-reduced-motion: reduce) { .about-line-card img { transition: none; } }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1::after,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2::after { content: none; display: none; }


/* 11.1 O nas — korekta kontrastu i hierarchii (nadpisuje historyczne style nagłówków panelu). */
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2 {
    color: #fff0cc;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 3px 0 rgba(48, 9, 8, .54), 0 11px 30px rgba(0, 0, 0, .72);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1 em,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 em {
    color: #ff9a86;
    -webkit-text-fill-color: currentColor;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto h2,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-lines h2,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone h2 {
    color: #ffe8bd;
    -webkit-text-fill-color: currentColor;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 {
    color: #ffe8bd;
    -webkit-text-fill-color: currentColor;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-lines,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final {
    position: relative;
    isolation: isolate;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto::before,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-lines::before,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: clamp(30px, 7vw, 96px);
    right: clamp(30px, 7vw, 96px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 188, 107, .72), transparent);
    box-shadow: 0 1px 0 rgba(255, 238, 194, .12);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto > p:last-child,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-intro,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final > p,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-copy > p:not(.about-story-number) {
    color: #fff0d4;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-copy {
    color: #fff0d4;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-number,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-eyebrow,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto > p:first-child {
    color: #ffd27e;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .72);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto {
    background:
        radial-gradient(circle at 82% 32%, rgba(220, 79, 59, .32), transparent 30%),
        linear-gradient(135deg, #631b23 0%, #2b0b11 48%, #130407 100%);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-lines {
    background:
        radial-gradient(circle at 82% 0, rgba(193, 72, 61, .12), transparent 31%),
        linear-gradient(180deg, #1d070b, #120407);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-image {
    background:
        linear-gradient(90deg, rgba(10, 2, 5, .94) 0%, rgba(10, 2, 5, .70) 45%, rgba(10, 2, 5, .30) 100%),
        linear-gradient(0deg, rgba(9, 2, 4, .92), transparent 70%),
        url('../img/smokestownscene.png') center / cover no-repeat;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final {
    background:
        radial-gradient(circle at 50% 0, rgba(219, 97, 60, .25), transparent 33%),
        linear-gradient(135deg, #160407, #671b24 52%, #210609);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-line-card {
    border-color: rgba(255, 207, 126, .46);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .26), inset 0 -92px 80px rgba(0, 0, 0, .86), inset 0 1px 0 rgba(255, 229, 175, .12);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-line-card-content {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .86);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-line-card strong { color: #fff0cf; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-line-card small { color: #ffe8c5; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-line-card b { color: #ffd179; }

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto::before,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-lines::before,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final::before {
        left: 22px;
        right: 22px;
    }
}


/* O nas: narracja pozostaje bez pomocniczego CTA powrotu do sceny. */
#scenePanel.scene-panel.scene-panel-layout-about-story .scene-panel-close {
    display: none;
}


/* O nas: większa szerokość robocza — prawy oddech panelu zmniejszony o 25%. */
#scenePanel.scene-panel.scene-panel-layout-about-story {
    width: min(1120px, calc(100vw - var(--side-menu-width) - 66px));
    left: calc(50% + (var(--side-menu-width) * .30) + 11px);
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story {
        width: calc(100vw - var(--side-menu-width) - 21px);
        left: calc(50% + (var(--side-menu-width) * .26) + 3.5px);
    }
}


/* O nas: druga korekta — dalsze zmniejszenie rezerwy po prawej o 50%. */
#scenePanel.scene-panel.scene-panel-layout-about-story {
    width: min(1120px, calc(100vw - var(--side-menu-width) - 33px));
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story {
        width: calc(100vw - var(--side-menu-width) - 10.5px);
    }
}


/* O nas: trzecia korekta — minimalny prawy margines i przesunięcie panelu o 12 px w prawo. */
#scenePanel.scene-panel.scene-panel-layout-about-story {
    width: min(1120px, calc(100vw - var(--side-menu-width) - 16.5px));
    left: calc(50% + (var(--side-menu-width) * .30) + 23px);
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story {
        width: calc(100vw - var(--side-menu-width) - 5.25px);
        left: calc(50% + (var(--side-menu-width) * .26) + 15.5px);
    }
}


/* O nas: stabilny viewport na mobile i desktop — bez poziomego przewijania treści. */
#scenePanel.scene-panel.scene-panel-layout-about-story {
    /* Panel jest kotwiczony do dostępnego obszaru, nie centrowany poza viewportem. */
    left: calc(var(--side-menu-width) + 12px);
    right: 8px;
    width: auto;
    max-width: none;
    transform: translateY(-50%);
    overflow: hidden;
}

.jj-hero.is-panel-open #scenePanel.scene-panel.scene-panel-layout-about-story {
    transform: translateY(-50%);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-body,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-hero,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-chapter,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-copy,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-line-card-content {
    min-width: 0;
    max-width: 100%;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story p,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story strong,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story small,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story b {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story {
        left: calc(var(--side-menu-width) + 8px);
        right: 6px;
        width: auto;
        max-height: calc(100svh - 44px);
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story {
        max-height: calc(100svh - 44px);
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1 {
        font-size: clamp(2.25rem, 11vw, 3.6rem);
        line-height: .88;
        letter-spacing: -.045em;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 {
        font-size: clamp(1.95rem, 9.4vw, 3rem);
        line-height: .92;
        letter-spacing: -.04em;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 {
        font-size: clamp(2.35rem, 11vw, 3.55rem);
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-hero,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-chapter,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final {
        padding-inline: 18px;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-copy {
        padding-inline: 18px;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-copy,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-line-grid {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story h1 {
        font-size: clamp(2rem, 10.5vw, 2.45rem);
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story h2 {
        font-size: clamp(1.75rem, 8.8vw, 2.2rem);
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final h2 {
        font-size: clamp(2.1rem, 10vw, 2.7rem);
    }
}


/* O nas: Story Navigator — rozdziałowe przewijanie zgodne z językiem strzałek menu. */
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator {
    position: absolute;
    z-index: 9;
    right: clamp(14px, 2vw, 26px);
    bottom: clamp(16px, 2.6vh, 28px);
    display: grid;
    justify-items: center;
    gap: 5px;
    width: 52px;
    padding: 8px 4px;
    border: 1px solid rgba(244, 191, 112, .38);
    background: linear-gradient(180deg, rgba(36, 7, 10, .87), rgba(12, 3, 5, .91));
    box-shadow: 0 12px 25px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 227, 177, .12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    place-items: center;
    background: transparent;
    color: #ffe7b9;
    cursor: pointer;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button span {
    width: 14px;
    height: 14px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    filter: drop-shadow(0 0 7px rgba(243, 185, 103, .5));
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button-up span { transform: rotate(225deg); margin-top: 6px; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button-down span { transform: rotate(45deg); margin-bottom: 6px; }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 8px;
    background: linear-gradient(180deg, transparent, rgba(244, 190, 109, .7), transparent);
    transform: translateX(-50%);
}
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button-up::after { bottom: 1px; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button-down::after { top: 1px; }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button:hover:not(:disabled) { color: #fff4d7; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button:hover:not(:disabled) span { filter: drop-shadow(0 0 10px rgba(255, 222, 153, .92)); }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button:focus-visible { outline: 3px solid #fff0b9; outline-offset: 2px; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button:disabled { color: rgba(255, 226, 173, .28); cursor: default; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-position { display: grid; justify-items: center; gap: 2px; color: #fbd28a; line-height: 1; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-position b,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-position em { font-size: .58rem; font-style: normal; font-weight: 900; letter-spacing: .08em; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-position i { width: 18px; height: 1px; background: rgba(244, 191, 112, .52); transform: rotate(-48deg); }

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator {
        right: 8px;
        bottom: 10px;
        width: 48px;
        padding: 4px 2px;
        border-color: rgba(244, 191, 112, .44);
        background: rgba(19, 4, 7, .88);
    }
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator-button { transition: none !important; }
}


/* O nas: Story Scroll Rail — delikatny, rzeczywisty wskaźnik pozycji zamiast nawigacji skokowej. */
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-navigator { display: none !important; }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail {
    position: absolute;
    z-index: 9;
    top: clamp(74px, 10vh, 94px);
    right: clamp(8px, 1.15vw, 16px);
    bottom: clamp(16px, 2.2vh, 24px);
    display: none;
    width: 28px;
    padding: 0 8px;
    cursor: grab;
    touch-action: none;
    outline: none;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail.is-visible { display: block; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail.is-dragging { cursor: grabbing; }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 221, 159, .10), rgba(231, 166, 77, .48), rgba(255, 221, 159, .10));
    box-shadow: 0 0 9px rgba(231, 166, 77, .16);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    min-height: 44px;
    border: 1px solid rgba(255, 228, 173, .84);
    border-radius: 999px;
    background:
        radial-gradient(circle at 36% 28%, rgba(255, 245, 199, .95) 0 8%, transparent 10%),
        linear-gradient(90deg, #7b3a16, #f4c071 48%, #9b4d1c);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 0 10px rgba(237, 178, 89, .42);
    transform: translate3d(-50%, 0, 0);
    will-change: transform, height;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb::before,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(75, 28, 10, .76);
    box-shadow: 0 1px 0 rgba(255, 230, 177, .36);
    transform: translateX(-50%);
}
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb::before { top: 9px; }
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb::after { bottom: 9px; }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:focus-visible {
    outline: 2px solid #fff0b9;
    outline-offset: 3px;
    border-radius: 999px;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:hover .about-story-scroll-track,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:focus-visible .about-story-scroll-track,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail.is-dragging .about-story-scroll-track {
    background: linear-gradient(180deg, rgba(255, 225, 168, .18), rgba(246, 188, 97, .72), rgba(255, 225, 168, .18));
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:hover .about-story-scroll-thumb,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:focus-visible .about-story-scroll-thumb,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail.is-dragging .about-story-scroll-thumb {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .55), 0 0 15px rgba(255, 208, 125, .66);
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail {
        top: 60px;
        right: 2px;
        bottom: 10px;
        width: 24px;
        padding: 0 6px;
    }
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb { width: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb { will-change: auto; }
}


/* O nas: rail osadzony w treści — poza nieregularną, maskowaną krawędzią panelu. */
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail {
    top: clamp(92px, 13vh, 126px);
    right: clamp(32px, 4.2vw, 58px);
    bottom: clamp(26px, 4vh, 44px);
    width: 22px;
    padding: 0 6px;
    opacity: .78;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-track {
    width: 2px;
    margin-inline: auto;
    background: linear-gradient(180deg, transparent, rgba(235, 171, 84, .72) 12%, rgba(235, 171, 84, .72) 88%, transparent);
    box-shadow: 0 0 7px rgba(231, 166, 77, .18);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb {
    width: 10px;
    border-color: rgba(255, 232, 181, .72);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .46), 0 0 8px rgba(237, 178, 89, .35);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb::before,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb::after {
    width: 2px;
    height: 2px;
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:hover,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:focus-visible,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail.is-dragging { opacity: 1; }

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:hover .about-story-scroll-track,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail:focus-visible .about-story-scroll-track,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail.is-dragging .about-story-scroll-track {
    background: linear-gradient(180deg, transparent, rgba(255, 214, 137, .96) 12%, rgba(255, 214, 137, .96) 88%, transparent);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-hero,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-chapter,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto,
#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final {
    padding-right: clamp(62px, 9vw, 132px);
}

#scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-copy {
    padding-right: clamp(62px, 9vw, 132px);
}

@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail {
        top: 70px;
        right: 20px;
        bottom: 18px;
        width: 24px;
        padding: 0 7px;
        opacity: .86;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-thumb { width: 9px; }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-hero,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-chapter,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-copy {
        padding-right: 48px;
    }
}


/* O nas mobile: rail bliżej prawej krawędzi, nadal poza strefą maski. */
@media (max-width: 760px) {
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-scroll-rail {
        right: 7px;
    }

    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-hero,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-chapter,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-manifesto,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-final,
    #scenePanel.scene-panel.scene-panel-layout-about-story .about-story-smokestone-copy {
        padding-right: 38px;
    }
}