/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family:
        "Courier New",
        monospace;

    color: #f7f4ff;

    background: #090611;

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* =========================================================
   TŁO RETRO / CRT
========================================================= */

.retro-background {
    position: fixed;
    inset: 0;

    z-index: -3;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 0, 140, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(73, 118, 255, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(138, 43, 226, 0.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0b0714 0%,
            #090611 45%,
            #050309 100%
        );
}


/* scanlines */

.retro-background::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.025) 0px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px
        );

    pointer-events: none;

    opacity: 0.6;
}


/* delikatne mruganie CRT */

.retro-background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 0, 110, 0.02),
            rgba(0, 170, 255, 0.02),
            rgba(120, 0, 255, 0.02)
        );

    mix-blend-mode: screen;

    animation:
        crtFlicker 4s steps(2, end) infinite;
}


/* =========================================================
   APP
========================================================= */

.retro-app {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        24px
        16px;
}


/* =========================================================
   EKRANY
========================================================= */

.game-screen {
    width: min(100%, 760px);
}


/* =========================================================
   OKNO
========================================================= */

.pixel-window {
    width: 100%;

    border:
        2px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(12, 8, 22, 0.78);

    box-shadow:
        0 0 0 4px rgba(255, 0, 140, 0.03),
        0 20px 80px rgba(0, 0, 0, 0.5),
        0 0 70px rgba(255, 0, 140, 0.08);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow: hidden;
}


/* =========================================================
   GÓRNY PASEK
========================================================= */

.window-topbar {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding:
        10px
        14px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 0, 140, 0.16),
            rgba(80, 70, 255, 0.12),
            rgba(0, 170, 255, 0.12)
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* =========================================================
   KROPKI
========================================================= */

.window-controls {
    display: flex;
    align-items: center;

    gap: 6px;
}

.window-controls span {
    width: 10px;
    height: 10px;

    border-radius: 2px;

    background:
        rgba(255, 255, 255, 0.25);
}

.window-controls span:nth-child(1) {
    background: #ff4f81;
}

.window-controls span:nth-child(2) {
    background: #ffd45f;
}

.window-controls span:nth-child(3) {
    background: #67e89a;
}


/* =========================================================
   START
========================================================= */

.start-content {
    min-height: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding:
        54px
        28px;
}


/* =========================================================
   SYSTEM READY
========================================================= */

.system-text {
    margin-bottom: 20px;

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.2em;

    color: #63f3ff;

    text-shadow:
        0 0 10px
        rgba(99, 243, 255, 0.8);

    animation:
        systemBlink
        1.4s steps(2, end) infinite;
}


/* =========================================================
   PAULINKA
========================================================= */

.start-content h1 {
    margin: 0;

    font-size:
        clamp(2.8rem, 11vw, 6.5rem);

    line-height: 0.9;

    letter-spacing: -0.05em;

    color: #ff4da6;

    text-shadow:
        3px 3px 0 #7a1f5d,
        6px 6px 0 #34102a,
        0 0 24px rgba(255, 77, 166, 0.55);

    animation:
        titleFloat
        3s ease-in-out infinite;
}


/* =========================================================
   LEVEL 18
========================================================= */

.level-title {
    margin-top: 22px;

    padding:
        10px
        18px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.04);

    color: #ffe066;

    font-size:
        clamp(1rem, 4vw, 1.4rem);

    font-weight: 900;

    letter-spacing: 0.14em;

    text-shadow:
        0 0 12px
        rgba(255, 224, 102, 0.5);
}


/* =========================================================
   SERCE
========================================================= */

.pixel-heart {
    margin-top: 30px;

    font-size: 3.2rem;

    color: #ff4d8d;

    text-shadow:
        0 0 10px rgba(255, 77, 141, 0.8),
        0 0 30px rgba(255, 77, 141, 0.35);

    animation:
        heartBeat
        1.6s steps(2, end) infinite;
}


/* =========================================================
   OPIS
========================================================= */

.start-description {
    width: min(100%, 520px);

    margin-top: 28px;

    font-size:
        clamp(0.82rem, 2.5vw, 1rem);

    line-height: 1.7;

    color:
        rgba(247, 244, 255, 0.7);
}


/* =========================================================
   PRZYCISK
========================================================= */

.pixel-button {
    margin-top: 30px;

    padding:
        16px
        24px;

    min-width: 220px;

    border:
        2px solid #ff4da6;

    background:
        #180c1f;

    color: white;

    font-weight: 900;

    letter-spacing: 0.12em;

    box-shadow:
        4px 4px 0 #8a245f,
        8px 8px 0 #391027,
        0 0 22px rgba(255, 77, 166, 0.15);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
}

.pixel-button:hover {
    background:
        #2a102b;

    transform:
        translate(-2px, -2px);

    box-shadow:
        6px 6px 0 #8a245f,
        10px 10px 0 #391027,
        0 0 28px rgba(255, 77, 166, 0.24);
}

.pixel-button:active {
    transform:
        translate(4px, 4px);

    box-shadow:
        0 0 0 #8a245f,
        0 0 0 #391027;
}


/* =========================================================
   MAŁY TEKST
========================================================= */

.tiny-text {
    margin-top: 20px;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color:
        rgba(247, 244, 255, 0.32);
}


/* =========================================================
   MIEJSCE NA GRĘ
========================================================= */

.game-placeholder {
    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 0.8rem;

    letter-spacing: 0.1em;
}


/* =========================================================
   ANIMACJE
========================================================= */

@keyframes crtFlicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.94;
    }

}

@keyframes systemBlink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0.35;
    }

}

@keyframes titleFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }

}

@keyframes heartBeat {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.12);
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 600px) {

    .retro-app {
        padding:
            12px;
    }

    .pixel-window {
        border-radius: 0;
    }

    .start-content {
        min-height:
            calc(100svh - 80px);

        padding:
            44px
            18px;
    }

    .window-topbar {
        min-height: 42px;

        padding:
            9px
            11px;

        font-size: 0.68rem;
    }

    .start-content h1 {
        font-size:
            clamp(3rem, 16vw, 5.2rem);
    }

    .level-title {
        margin-top: 18px;

        font-size: 0.95rem;
    }

    .pixel-heart {
        margin-top: 24px;

        font-size: 2.8rem;
    }

    .start-description {
        margin-top: 22px;

        font-size: 0.82rem;
    }

    .pixel-button {
        width: min(100%, 280px);

        margin-top: 28px;
    }

}
/* =========================================================
   02. MINI GRA
========================================================= */

.game-area {
    position: relative;

    width: 100%;

    min-height: 520px;

    padding: 18px;

    background:
        rgba(8, 6, 16, 0.78);

    overflow: hidden;
}


/* =========================================================
   HUD
========================================================= */

.game-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        10px
        12px;

    margin-bottom: 12px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.03);

    font-size: 0.72rem;

    letter-spacing: 0.12em;
}


.game-hud span {
    color:
        rgba(255, 255, 255, 0.55);
}


.game-hud strong {
    color: #ffe066;

    text-shadow:
        0 0 12px
        rgba(255, 224, 102, 0.45);
}


/* =========================================================
   ŚWIAT GRY
========================================================= */

.game-world {
    position: relative;

    width: 100%;
    height: 380px;

    overflow: hidden;

    border:
        2px solid rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            180deg,
            #120d24 0%,
            #160f2d 60%,
            #0c0915 100%
        );
}


/* kratka retro */

.game-world::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size:
        28px 28px;

    pointer-events: none;
}


/* =========================================================
   GRACZ
========================================================= */

.game-player {
    position: absolute;

    left: 16%;

    top: 50%;

    width: 64px;
    height: 64px;

    transform:
        translateY(-50%);

    z-index: 10;

    border:
        2px solid rgba(255, 255, 255, 0.22);

    border-radius: 18px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.05);

    box-shadow:
        0 0 20px
        rgba(255, 77, 166, 0.35);
}


.game-player img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   PODŁOGA
========================================================= */

.game-floor {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22px;

    z-index: 8;

    background:
        repeating-linear-gradient(
            90deg,
            #ff4da6 0,
            #ff4da6 14px,
            #7c2cff 14px,
            #7c2cff 28px
        );

    box-shadow:
        0 -4px 18px
        rgba(255, 77, 166, 0.28);
}


/* =========================================================
   OVERLAY START
========================================================= */

.game-overlay,
.game-result {
    position: absolute;

    inset: 0;

    z-index: 30;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px;

    background:
        rgba(7, 5, 14, 0.78);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.game-overlay h2,
.game-result h2 {
    font-size:
        clamp(1.8rem, 7vw, 3rem);

    color: #ff4da6;

    text-shadow:
        3px 3px 0 #5f1b48,
        0 0 18px
        rgba(255, 77, 166, 0.4);
}


.game-overlay p,
.game-result p {
    margin-top: 14px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.82rem;

    line-height: 1.6;
}


/* =========================================================
   GAME OVER
========================================================= */

#game-over h2 {
    color: #ff5b73;

    text-shadow:
        3px 3px 0 #681d2c,
        0 0 18px
        rgba(255, 91, 115, 0.45);
}


/* =========================================================
   WIN
========================================================= */

#game-win h2 {
    color: #68f5a0;

    text-shadow:
        3px 3px 0 #1e6b3d,
        0 0 18px
        rgba(104, 245, 160, 0.45);
}


#game-win p {
    color: #ffe066;

    font-weight: 900;

    letter-spacing: 0.08em;
}


/* =========================================================
   PRZESZKODY - DODAMY JE Z JS
========================================================= */

.game-obstacle {
    position: absolute;

    right: -80px;

    width: 58px;

    background:
        linear-gradient(
            180deg,
            #ff4da6,
            #7c2cff
        );

    border:
        2px solid rgba(255, 255, 255, 0.14);

    box-shadow:
        0 0 20px
        rgba(255, 77, 166, 0.28);
}


.game-obstacle.top {
    top: 0;
}


.game-obstacle.bottom {
    bottom: 22px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .game-area {
        min-height:
            calc(100svh - 60px);

        padding: 10px;
    }


    .game-world {
        height:
            calc(100svh - 140px);

        min-height: 430px;
        max-height: 620px;
    }


    .game-player {
        width: 58px;
        height: 58px;

        left: 15%;

        border-radius: 16px;
    }


    .game-hud {
        padding:
            9px
            10px;
    }

}
/* =========================================================
   GAME - NO SCROLL MOBILE
========================================================= */

@media (max-width: 600px) {

    html,
    body {
        height: 100%;
    }

    body {
        overflow: hidden;
    }

    .retro-app {
        min-height: 100svh;
        height: 100svh;

        padding: 8px;
    }

    #game-screen {
        height: 100%;

        display: flex;
        align-items: stretch;
    }

    #game-screen .pixel-window {
        height: 100%;

        display: flex;
        flex-direction: column;
    }

    #game-screen .window-topbar {
        flex-shrink: 0;
    }

    .game-area {
        flex: 1;

        min-height: 0;

        padding: 8px;

        display: flex;
        flex-direction: column;
    }

    .game-hud {
        flex-shrink: 0;
    }

    .game-world {
        flex: 1;

        height: auto;
        min-height: 0;
        max-height: none;
    }

}
.game-hud {
    position: relative;
    z-index: 40;
}
.game-hud strong {
    font-size: 0.9rem;
}
/* =========================================================
   03. GŁÓWNA CZĘŚĆ RETRO
========================================================= */

.content-screen {
    width: min(100%, 980px);
    margin: 0 auto;

    padding:
        40px
        16px
        80px;
}


/* =========================================================
   INTRO PO WYGRANEJ
========================================================= */

.content-intro {
    padding:
        58px
        28px
        50px;

    text-align: center;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.content-intro h2 {
    margin-top: 10px;

    font-size:
        clamp(2rem, 7vw, 4.6rem);

    line-height: 0.95;

    letter-spacing: -0.05em;

    color: #ff4da6;

    text-shadow:
        3px 3px 0 #6e1f50,
        0 0 24px rgba(255, 77, 166, 0.35);
}


.content-intro > p:last-child {
    width: min(100%, 620px);

    margin:
        24px auto 0;

    color:
        rgba(255, 255, 255, 0.65);

    line-height: 1.7;

    font-size: 0.92rem;
}


/* =========================================================
   SEKCJE
========================================================= */

.retro-section {
    padding:
        54px
        28px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    position: relative;
}


.retro-section::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            #ff4da6,
            #6a5cff,
            transparent
        );

    opacity: 0.35;
}


/* =========================================================
   TYTUŁ SEKCJI
========================================================= */

.retro-section-title {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 28px;
}


.retro-section-title > span {
    flex-shrink: 0;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        rgba(255, 255, 255, 0.035);

    color: #63f3ff;

    font-size: 0.72rem;
    font-weight: 900;

    box-shadow:
        0 0 18px rgba(99, 243, 255, 0.08);
}


.retro-section-title h3 {
    margin: 0;

    font-size:
        clamp(1.25rem, 4vw, 2rem);

    line-height: 1.1;

    color: #f7f4ff;
}


/* =========================================================
   PLACEHOLDERY
========================================================= */

.retro-placeholder {
    min-height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    text-align: center;

    border:
        1px dashed rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        rgba(255, 255, 255, 0.3);

    font-size: 0.72rem;

    letter-spacing: 0.1em;
}


/* =========================================================
   ARCHIWUM
========================================================= */

.archive-box {
    padding:
        34px
        24px;

    text-align: center;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            135deg,
            rgba(255, 77, 166, 0.08),
            rgba(99, 243, 255, 0.04)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.03);
}


.archive-box p {
    margin-bottom: 24px;

    color:
        rgba(255, 255, 255, 0.65);

    line-height: 1.6;
}


.archive-button {
    display: inline-block;

    text-decoration: none;

    min-width: 0;

    width: min(100%, 360px);
}


/* =========================================================
   FINAŁ
========================================================= */

.retro-ending {
    padding:
        80px
        28px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 77, 166, 0.12),
            transparent 55%
        );
}


.retro-ending > p {
    margin-bottom: 12px;

    color: #63f3ff;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.18em;
}


.retro-ending h2 {
    margin: 0;

    font-size:
        clamp(2.5rem, 9vw, 5.5rem);

    line-height: 0.9;

    letter-spacing: -0.06em;

    color: #ffe066;

    text-shadow:
        3px 3px 0 #755e17,
        0 0 30px rgba(255, 224, 102, 0.24);
}


.retro-ending strong {
    display: block;

    width: min(100%, 600px);

    margin:
        26px auto 0;

    color: #ff78b8;

    font-size:
        clamp(1rem, 3vw, 1.35rem);

    line-height: 1.5;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .content-screen {
        padding:
            12px
            10px
            50px;
    }


    .content-intro {
        padding:
            46px
            18px
            40px;
    }


    .retro-section {
        padding:
            42px
            18px;
    }


    .retro-section-title {
        align-items: flex-start;

        gap: 12px;
    }


    .retro-section-title > span {
        width: 42px;
        height: 42px;
    }


    .archive-box {
        padding:
            28px
            16px;
    }


    .retro-ending {
        padding:
            64px
            18px;
    }

}
@media (max-width: 600px) {

    .content-screen {
        padding-top: 20px;
    }

    .content-screen .pixel-window {
        overflow: hidden;
    }

    .content-intro {
        padding-top: 52px;
        padding-bottom: 42px;
        margin-bottom: 0;
    }

    .retro-section:first-of-type {
        padding-top: 48px;
    }

}
/* =========================================================
   CONTENT MODE - FIX TELEFON
========================================================= */

body.content-mode .retro-app {
    display: block;

    min-height: 100vh;

    padding: 0;

    align-items: unset;
    justify-content: unset;
}


body.content-mode .content-screen {
    margin: 0 auto;
}

/* =========================================================
   04. OPEN WHEN
========================================================= */

.open-when-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* =========================================================
   KARTA / PLIK
========================================================= */

.open-when-card {
    position: relative;

    min-height: 150px;

    padding:
        22px
        18px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

    text-align: left;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            135deg,
            rgba(255, 77, 166, 0.08),
            rgba(99, 243, 255, 0.035)
        );

    color: white;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}


/* pikselowy narożnik */

.open-when-card::before {
    content: "";

    position: absolute;

    top: -1px;
    right: -1px;

    width: 22px;
    height: 22px;

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            #ff4da6 50%
        );

    opacity: 0.5;
}


/* =========================================================
   HOVER
========================================================= */

.open-when-card:hover {
    transform:
        translate(-2px, -2px);

    border-color:
        rgba(255, 77, 166, 0.5);

    background:
        linear-gradient(
            135deg,
            rgba(255, 77, 166, 0.13),
            rgba(99, 243, 255, 0.055)
        );

    box-shadow:
        4px 4px 0
        rgba(255, 77, 166, 0.18),
        0 0 24px
        rgba(255, 77, 166, 0.08);
}


.open-when-card:active {
    transform:
        translate(2px, 2px);

    box-shadow: none;
}


/* =========================================================
   IKONA
========================================================= */

.open-when-icon {
    margin-bottom: 18px;

    font-size: 2rem;

    filter:
        drop-shadow(
            0 0 8px
            rgba(99, 243, 255, 0.2)
        );
}


/* =========================================================
   TYTUŁ
========================================================= */

.open-when-card strong {
    display: block;

    font-size:
        clamp(0.82rem, 2.5vw, 1rem);

    line-height: 1.45;

    letter-spacing: 0.03em;

    color: #f7f4ff;
}


/* =========================================================
   NAZWA PLIKU
========================================================= */

.open-when-card small {
    margin-top: 18px;

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    color: #63f3ff;

    opacity: 0.7;
}


/* =========================================================
   DELIKATNY GLOW
========================================================= */

.open-when-card:nth-child(odd) {
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04),
        0 0 18px
        rgba(255, 77, 166, 0.035);
}


.open-when-card:nth-child(even) {
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04),
        0 0 18px
        rgba(99, 243, 255, 0.03);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .open-when-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .open-when-card {
        min-height: 130px;

        padding:
            18px
            16px;
    }


    .open-when-icon {
        font-size: 1.8rem;

        margin-bottom: 14px;
    }


    .open-when-card small {
        margin-top: 14px;
    }

}
/* =========================================================
   05. OPEN WHEN - POPUP
========================================================= */

.open-when-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(5, 3, 10, 0.78);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.open-when-window {
    width: min(100%, 560px);

    border:
        2px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(12, 8, 22, 0.96);

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(255, 77, 166, 0.12);

    animation:
        openWhenPop
        0.25s ease;
}


/* górny pasek popupu */

.open-when-window .window-topbar {
    min-height: 46px;
}


/* X */

.open-when-close {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 77, 166, 0.12);

    color: white;

    font-size: 0.85rem;
    font-weight: 900;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.open-when-close:hover {
    background:
        rgba(255, 77, 166, 0.3);
}


.open-when-close:active {
    transform:
        translate(2px, 2px);
}


/* treść */

.open-when-message {
    padding:
        36px
        28px;
}


.open-when-message::before {
    content: "> MESSAGE_LOADED";

    display: block;

    margin-bottom: 22px;

    color: #63f3ff;

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


.open-when-message p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.86);

    font-size:
        clamp(0.9rem, 3vw, 1.05rem);

    line-height: 1.8;
}


/* animacja */

@keyframes openWhenPop {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* telefon */

@media (max-width: 600px) {

    .open-when-modal {
        padding: 12px;
    }

    .open-when-window {
        width: 100%;
    }

    .open-when-message {
        padding:
            30px
            20px;
    }

}
/* =========================================================
   HIDE SCROLLBAR
========================================================= */

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}
/* =========================================================
   06. QUEST LIST
========================================================= */

.quest-list {
    display: grid;
    gap: 12px;
}


/* =========================================================
   POJEDYNCZY QUEST
========================================================= */

.quest-item {
    width: 100%;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    padding:
        16px
        18px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        rgba(255, 255, 255, 0.025);

    color: white;

    text-align: left;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.quest-item:hover {
    transform:
        translate(-2px, -2px);

    border-color:
        rgba(99, 243, 255, 0.35);

    background:
        rgba(99, 243, 255, 0.05);

    box-shadow:
        4px 4px 0
        rgba(99, 243, 255, 0.08);
}


/* =========================================================
   CHECKBOX
========================================================= */

.quest-check {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.03);

    color: #63f3ff;

    font-size: 1.1rem;
    font-weight: 900;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   TEKST
========================================================= */

.quest-text {
    min-width: 0;
}

.quest-text strong {
    display: block;

    font-size:
        clamp(0.82rem, 2.5vw, 1rem);

    line-height: 1.5;

    color: #f7f4ff;
}

.quest-text small {
    display: block;

    margin-top: 7px;

    font-size: 0.56rem;

    letter-spacing: 0.12em;

    color: #63f3ff;

    opacity: 0.65;
}


/* =========================================================
   QUEST COMPLETE
========================================================= */

.quest-item.completed {
    border-color:
        rgba(104, 245, 160, 0.35);

    background:
        rgba(104, 245, 160, 0.06);

    box-shadow:
        0 0 22px
        rgba(104, 245, 160, 0.06);
}


.quest-item.completed .quest-check {
    background:
        rgba(104, 245, 160, 0.14);

    color: #68f5a0;

    border-color:
        rgba(104, 245, 160, 0.4);

    box-shadow:
        0 0 14px
        rgba(104, 245, 160, 0.12);

    transform:
        scale(1.05);
}


.quest-item.completed .quest-text strong {
    color:
        rgba(255, 255, 255, 0.55);

    text-decoration:
        line-through;
}


.quest-item.completed .quest-text small {
    color: #68f5a0;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .quest-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            15px
            14px;
    }

    .quest-check {
        width: 34px;
        height: 34px;
    }

}
/* =========================================================
   07. WISH INVENTORY
========================================================= */

.wish-inventory {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* =========================================================
   KARTA ITEMU
========================================================= */

.wish-item {
    position: relative;

    min-height: 170px;

    padding:
        18px
        16px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            145deg,
            rgba(255, 77, 166, 0.07),
            rgba(99, 243, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04);

    overflow: hidden;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}


/* narożnik jak item slot */

.wish-item::before {
    content: "";

    position: absolute;

    top: -1px;
    right: -1px;

    width: 20px;
    height: 20px;

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            #63f3ff 50%
        );

    opacity: 0.35;
}


.wish-item:hover {
    transform:
        translate(-2px, -2px);

    border-color:
        rgba(99, 243, 255, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(255, 77, 166, 0.11),
            rgba(99, 243, 255, 0.045)
        );

    box-shadow:
        4px 4px 0
        rgba(99, 243, 255, 0.06),
        0 0 22px
        rgba(99, 243, 255, 0.04);
}


/* =========================================================
   NUMER
========================================================= */

.wish-number {
    position: absolute;

    top: 12px;
    right: 12px;

    color:
        rgba(255, 255, 255, 0.25);

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.1em;
}


/* =========================================================
   IKONA
========================================================= */

.wish-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        rgba(255, 255, 255, 0.035);

    color: #ff78b8;

    font-size: 1.25rem;

    text-shadow:
        0 0 12px
        rgba(255, 120, 184, 0.35);
}


/* =========================================================
   TEKST
========================================================= */

.wish-item strong {
    display: block;

    font-size:
        clamp(0.78rem, 2vw, 0.95rem);

    line-height: 1.5;

    color: #f7f4ff;
}


.wish-item small {
    display: block;

    margin-top: 16px;

    color: #63f3ff;

    font-size: 0.54rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    opacity: 0.6;
}


/* =========================================================
   LEGENDARY ITEM 18
========================================================= */

.wish-item-legendary {
    grid-column:
        1 / -1;

    min-height: 190px;

    align-items: center;
    justify-content: center;

    text-align: center;

    border-color:
        rgba(255, 224, 102, 0.4);

    background:
        radial-gradient(
            circle at center,
            rgba(255, 224, 102, 0.1),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            rgba(255, 77, 166, 0.08),
            rgba(255, 224, 102, 0.07)
        );

    box-shadow:
        0 0 30px
        rgba(255, 224, 102, 0.06);

    animation:
        legendaryPulse
        3s ease-in-out infinite;
}


.wish-item-legendary::before {
    background:
        linear-gradient(
            135deg,
            transparent 50%,
            #ffe066 50%
        );

    opacity: 0.7;
}


.wish-item-legendary .wish-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 18px;

    color: #ffe066;

    font-size: 1.6rem;

    border-color:
        rgba(255, 224, 102, 0.35);

    background:
        rgba(255, 224, 102, 0.06);

    text-shadow:
        0 0 18px
        rgba(255, 224, 102, 0.45);
}


.wish-item-legendary strong {
    width: min(100%, 620px);

    font-size:
        clamp(0.95rem, 2.8vw, 1.2rem);

    color: #ffe9a6;
}


.wish-item-legendary small {
    color: #ffe066;

    opacity: 0.85;
}


/* =========================================================
   ANIMACJA LEGENDARY
========================================================= */

@keyframes legendaryPulse {

    0%,
    100% {
        box-shadow:
            0 0 24px
            rgba(255, 224, 102, 0.04);
    }

    50% {
        box-shadow:
            0 0 40px
            rgba(255, 224, 102, 0.12);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .wish-inventory {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 600px) {

    .wish-inventory {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .wish-item {
        min-height: 145px;

        padding:
            16px
            14px;
    }


    .wish-icon {
        width: 38px;
        height: 38px;

        margin-bottom: 16px;
    }


    .wish-item-legendary {
        grid-column: auto;

        min-height: 175px;

        padding:
            24px
            18px;
    }

}
/* =========================================================
   08. ARCHIWUM / OLD SAVE
========================================================= */

.archive-terminal {
    position: relative;

    padding:
        28px
        24px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            145deg,
            rgba(255, 77, 166, 0.06),
            rgba(99, 243, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.04),
        0 0 30px
        rgba(99, 243, 255, 0.035);

    overflow: hidden;
}


/* =========================================================
   STATUS
========================================================= */

.archive-status {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: #68f5a0;

    font-size: 0.65rem;
    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.archive-dot {
    width: 9px;
    height: 9px;

    border-radius: 2px;

    background: #68f5a0;

    box-shadow:
        0 0 12px
        rgba(104, 245, 160, 0.65);

    animation:
        archiveBlink
        1.4s steps(2, end) infinite;
}


/* =========================================================
   SAVE SLOT
========================================================= */

.archive-save {
    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    padding:
        20px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.03);

    margin-bottom: 18px;
}


/* =========================================================
   IKONA SAVE
========================================================= */

.archive-save-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(99, 243, 255, 0.2);

    background:
        rgba(99, 243, 255, 0.05);

    font-size: 2.2rem;

    box-shadow:
        0 0 20px
        rgba(99, 243, 255, 0.05);
}


/* =========================================================
   INFO SAVE
========================================================= */

.archive-save-info small {
    display: block;

    margin-bottom: 6px;

    color: #63f3ff;

    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}


.archive-save-info strong {
    display: block;

    color: #f7f4ff;

    font-size:
        clamp(1.1rem, 4vw, 1.6rem);

    line-height: 1.1;
}


.archive-save-info p {
    margin-top: 8px;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.78rem;
}


/* =========================================================
   DANE SAVE
========================================================= */

.archive-data {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 24px;
}


.archive-data div {
    padding:
        12px
        10px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    background:
        rgba(255, 255, 255, 0.02);

    text-align: center;
}


.archive-data span {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(255, 255, 255, 0.35);

    font-size: 0.52rem;

    letter-spacing: 0.1em;
}


.archive-data strong {
    display: block;

    color: #ffe066;

    font-size: 0.68rem;

    line-height: 1.35;
}


/* =========================================================
   OPIS
========================================================= */

.archive-description {
    width: min(100%, 620px);

    margin:
        0 auto 26px;

    text-align: center;

    color:
        rgba(255, 255, 255, 0.62);

    font-size:
        clamp(0.78rem, 2.4vw, 0.9rem);

    line-height: 1.7;
}


/* =========================================================
   LOAD SAVE
========================================================= */

.archive-button {
    display: block;

    width: min(100%, 340px);

    margin:
        0 auto;

    text-align: center;
}


/* =========================================================
   DEKORACJA
========================================================= */

.archive-terminal::after {
    content: "ARCHIVE://OLD_SAVE_01";

    position: absolute;

    right: 14px;
    bottom: 10px;

    color:
        rgba(255, 255, 255, 0.12);

    font-size: 0.48rem;

    letter-spacing: 0.1em;

    pointer-events: none;
}


/* =========================================================
   ANIMACJA
========================================================= */

@keyframes archiveBlink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0.3;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .archive-terminal {
        padding:
            22px
            16px;
    }


    .archive-save {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            16px
            14px;
    }


    .archive-save-icon {
        width: 58px;
        height: 58px;

        font-size: 1.8rem;
    }


    .archive-data {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .archive-data div {
        display: flex;

        align-items: center;
        justify-content: space-between;

        text-align: left;

        padding:
            11px
            12px;
    }


    .archive-data span {
        margin-bottom: 0;
    }


    .archive-terminal::after {
        display: none;
    }

}
/* =========================================================
   ARCHIVE - LOADING EFFECT
========================================================= */

.archive-button.loading {
    pointer-events: none;

    color: #ffe066;

    border-color:
        rgba(255, 224, 102, 0.55);

    background:
        rgba(255, 224, 102, 0.07);

    box-shadow:
        4px 4px 0
        rgba(117, 94, 23, 0.55),
        0 0 26px
        rgba(255, 224, 102, 0.12);
}


.archive-button.loading::after {
    content: "";

    display: inline-block;

    width: 8px;
    height: 8px;

    margin-left: 10px;

    background: #ffe066;

    box-shadow:
        12px 0 0
        rgba(255, 224, 102, 0.55),
        24px 0 0
        rgba(255, 224, 102, 0.25);

    animation:
        archiveLoadingDots
        0.8s steps(3, end) infinite;
}


@keyframes archiveLoadingDots {

    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }

}
/* =========================================================
   09. RETRO ENDING
========================================================= */

.retro-ending {
    position: relative;

    padding:
        90px
        28px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 77, 166, 0.15),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            rgba(0,0,0,0.1)
        );
}


.ending-system {
    margin-bottom: 20px;

    color: #63f3ff;

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.16em;

    text-shadow:
        0 0 12px
        rgba(99, 243, 255, 0.4);
}


.ending-hearts {
    display: flex;
    justify-content: center;

    gap: 12px;

    margin-bottom: 28px;
}


.ending-hearts span {
    color: #ff4da6;

    font-size: 1.5rem;

    text-shadow:
        0 0 14px
        rgba(255, 77, 166, 0.45);

    animation:
        endingHeartBeat
        1.6s steps(2, end) infinite;
}


.ending-hearts span:nth-child(2) {
    animation-delay: 0.2s;
}


.ending-hearts span:nth-child(3) {
    animation-delay: 0.4s;
}


.retro-ending h2 {
    margin: 0;

    font-size:
        clamp(2.5rem, 9vw, 5.5rem);

    line-height: 0.9;

    letter-spacing: -0.06em;

    color: #ffe066;

    text-shadow:
        3px 3px 0 #755e17,
        0 0 30px rgba(255, 224, 102, 0.24);
}


.retro-ending > strong {
    display: block;

    width: min(100%, 620px);

    margin:
        28px auto 0;

    color: #ff78b8;

    font-size:
        clamp(1rem, 3vw, 1.35rem);

    line-height: 1.5;
}


.ending-divider {
    width: min(100%, 420px);

    margin:
        34px auto;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;
}


.ending-divider span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18)
        );
}


.ending-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.18),
            transparent
        );
}


.ending-divider b {
    color: #ffe066;

    font-size: 0.9rem;
}


.ending-small {
    margin-bottom: 28px;

    color:
        rgba(255,255,255,0.45);

    font-size: 0.62rem;

    letter-spacing: 0.14em;
}


.ending-button {
    margin-top: 0;
}


@keyframes endingHeartBeat {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }

}


@media (max-width: 600px) {

    .retro-ending {
        padding:
            70px
            18px;
    }

}
/* =========================================================
   10. END GAME SCREEN
========================================================= */

.end-game-screen {
    position: fixed;

    inset: 0;

    z-index: 20000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 77, 166, 0.12),
            transparent 42%
        ),
        #050308;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.end-game-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   ZAWARTOŚĆ
========================================================= */

.end-game-content {
    width: min(100%, 650px);

    text-align: center;

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 1s ease 0.8s,
        transform 1s ease 0.8s;
}


.end-game-screen.active .end-game-content {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   SYSTEM TEXT
========================================================= */

.end-game-system {
    margin-bottom: 24px;

    color: #63f3ff;

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.18em;

    text-shadow:
        0 0 12px
        rgba(99, 243, 255, 0.45);
}


/* =========================================================
   THANK YOU
========================================================= */

.end-game-content h2 {
    margin: 0;

    font-size:
        clamp(2.3rem, 10vw, 5rem);

    line-height: 0.92;

    letter-spacing: -0.05em;

    color: #ffe066;

    text-shadow:
        3px 3px 0 #755e17,
        0 0 30px
        rgba(255, 224, 102, 0.28);
}


/* =========================================================
   PAULINKA.EXE
========================================================= */

.end-game-name {
    margin-top: 22px;

    color: #ff4da6;

    font-size:
        clamp(1rem, 4vw, 1.4rem);

    font-weight: 900;

    letter-spacing: 0.14em;

    text-shadow:
        0 0 16px
        rgba(255, 77, 166, 0.4);
}


/* =========================================================
   SERCE
========================================================= */

.end-game-heart {
    margin:
        34px auto;

    font-size: 4rem;

    color: #ff4da6;

    text-shadow:
        0 0 16px
        rgba(255, 77, 166, 0.8),
        0 0 40px
        rgba(255, 77, 166, 0.35);

    animation:
        endGameHeart
        1.5s steps(2, end) infinite;
}


/* =========================================================
   PLAYER STATUS
========================================================= */

.end-game-status {
    margin-bottom: 34px;

    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.68rem;

    letter-spacing: 0.14em;
}


/* =========================================================
   RESTART
========================================================= */

.end-game-restart {
    margin-top: 0;
}


/* =========================================================
   SCANLINES
========================================================= */

.end-game-screen::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.7;
}


/* =========================================================
   ANIMACJE
========================================================= */

@keyframes endGameHeart {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.15);
    }

}
/* =========================================================
   CUTSCENE
========================================================= */

.cutscene-screen {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.cutscene-frame {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.08);

    background:
        radial-gradient(
            circle at center,
            rgba(255, 77, 166, 0.08),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #08050d,
            #030205
        );

    box-shadow:
        0 0 40px rgba(255, 77, 166, 0.08);
}


/* scanlines */

.cutscene-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.022) 0,
            rgba(255,255,255,0.022) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.8;

    z-index: 20;
}


/* =========================================================
   SCENY
========================================================= */

.cutscene-scene {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 50px 24px;

    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scale(0.98);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0.8s ease;
}

.cutscene-scene.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scale(1);
}


/* =========================================================
   TYPOGRAFIA
========================================================= */

.cutscene-system {
    margin-bottom: 22px;

    color: #63f3ff;

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.18em;

    text-shadow:
        0 0 12px rgba(99,243,255,0.45);
}

.cutscene-scene h2 {
    margin: 0;

    color: #ffe066;

    font-size: clamp(2.4rem, 8vw, 5rem);

    line-height: 0.95;

    letter-spacing: -0.05em;

    text-shadow:
        3px 3px 0 #725c18,
        0 0 24px rgba(255,224,102,0.18);
}

.cutscene-text {
    width: min(100%, 560px);

    margin-top: 24px;

    color: rgba(255,255,255,0.72);

    font-size: clamp(0.9rem, 2.5vw, 1.1rem);

    line-height: 1.7;
}

.cutscene-highlight {
    display: block;

    margin-top: 18px;

    color: #ff4da6;

    font-size: clamp(1.4rem, 5vw, 2.6rem);

    text-shadow:
        0 0 20px rgba(255,77,166,0.38);
}

.cutscene-joke {
    margin-top: 10px;

    color: rgba(255,255,255,0.35);

    font-size: 0.7rem;

    letter-spacing: 0.12em;
}


/* =========================================================
   SCENA 01
========================================================= */

.cutscene-data {
    margin-top: 30px;

    display: grid;

    gap: 10px;
}

.cutscene-data span {
    color: rgba(255,255,255,0.6);

    font-size: 0.72rem;

    letter-spacing: 0.12em;
}


/* =========================================================
   IKONY
========================================================= */

.cutscene-pixel-icon {
    margin-bottom: 22px;

    color: #ff4da6;

    font-size: 4rem;

    text-shadow:
        0 0 18px rgba(255,77,166,0.7),
        0 0 40px rgba(255,77,166,0.28);

    animation:
        cutsceneHeartPulse
        1.4s steps(2, end) infinite;
}

.cutscene-dance,
.cutscene-phone {
    margin-bottom: 26px;

    color: #ff78b8;

    font-size: clamp(2rem, 7vw, 4rem);

    letter-spacing: 0.15em;

    text-shadow:
        0 0 18px rgba(255,77,166,0.3);
}


/* taniec */

.cutscene-dance {
    animation:
        cutsceneDance
        0.7s steps(2, end) infinite;
}


/* =========================================================
   WARNING
========================================================= */

.cutscene-warning {
    margin-bottom: 18px;

    color: #ff5a5a;

    font-size: 0.75rem;

    font-weight: 900;

    letter-spacing: 0.2em;

    animation:
        cutsceneWarning
        0.7s steps(2, end) infinite;
}

.cutscene-objective {
    margin-top: 30px;

    padding: 16px 20px;

    border: 1px solid rgba(255,224,102,0.28);

    background:
        rgba(255,224,102,0.05);
}

.cutscene-objective span {
    display: block;

    margin-bottom: 6px;

    color: rgba(255,255,255,0.4);

    font-size: 0.62rem;

    letter-spacing: 0.14em;
}

.cutscene-objective strong {
    color: #ffe066;

    font-size: clamp(1rem, 3vw, 1.3rem);
}


/* =========================================================
   CORRUPTED MEMORY
========================================================= */

.cutscene-corrupted {
    margin-top: 28px;

    padding: 18px;

    border: 1px solid rgba(255,90,90,0.2);

    background:
        rgba(255,90,90,0.04);

    animation:
        cutsceneGlitch
        2.4s steps(2, end) infinite;
}

.cutscene-corrupted span,
.cutscene-corrupted strong,
.cutscene-corrupted small {
    display: block;
}

.cutscene-corrupted span {
    color: rgba(255,255,255,0.4);

    font-size: 0.6rem;

    letter-spacing: 0.14em;
}

.cutscene-corrupted strong {
    margin-top: 8px;

    color: #ff5a5a;

    font-size: 1rem;
}

.cutscene-corrupted small {
    margin-top: 10px;

    color: rgba(255,255,255,0.45);

    font-size: 0.68rem;
}


/* =========================================================
   SKIP + COUNTER
========================================================= */

.cutscene-skip {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 50;

    border: 0;

    background: transparent;

    color: rgba(255,255,255,0.35);

    font-family: inherit;

    font-size: 0.65rem;

    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

.cutscene-skip:hover {
    color: #63f3ff;

    text-shadow:
        0 0 10px rgba(99,243,255,0.4);
}

.cutscene-counter {
    position: absolute;

    left: 18px;
    bottom: 16px;

    z-index: 50;

    color: rgba(255,255,255,0.28);

    font-size: 0.62rem;

    letter-spacing: 0.1em;
}


/* =========================================================
   ANIMACJE
========================================================= */

@keyframes cutsceneHeartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

}

@keyframes cutsceneDance {

    0% {
        transform:
            translateX(-5px)
            rotate(-2deg);
    }

    50% {
        transform:
            translateX(5px)
            rotate(2deg);
    }

    100% {
        transform:
            translateX(-5px)
            rotate(-2deg);
    }

}

@keyframes cutsceneWarning {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }

}

@keyframes cutsceneGlitch {

    0%,
    92%,
    100% {
        transform: translate(0);
    }

    94% {
        transform:
            translate(-3px, 1px);
    }

    96% {
        transform:
            translate(3px, -1px);
    }

    98% {
        transform:
            translate(-1px, 0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .cutscene-screen {
        min-height: 100svh;

        padding: 8px;
    }

    .cutscene-frame {
        min-height: calc(100svh - 16px);
    }

    .cutscene-scene {
        padding: 54px 18px;
    }

    .cutscene-skip {
        top: 14px;
        right: 14px;
    }

    .cutscene-counter {
        left: 14px;
        bottom: 14px;
    }

}
/* =========================================================
   CUTSCENE SCENE 02 - MEETING
========================================================= */

.meeting-scene {
    width: min(100%, 520px);

    margin:
        0 auto
        28px;
}

.meeting-table {
    position: relative;

    height: 190px;

    overflow: hidden;

    border-bottom:
        2px solid rgba(255,255,255,0.08);
}


/* =========================================================
   STÓŁ
========================================================= */

.pixel-table {
    position: absolute;

    left: 50%;
    bottom: 28px;

    width: 210px;
    height: 24px;

    transform:
        translateX(-50%);

    background:
        #755e17;

    box-shadow:
        0 8px 0 #46370d;
}

.pixel-table::before,
.pixel-table::after {
    content: "";

    position: absolute;

    top: 24px;

    width: 14px;
    height: 40px;

    background:
        #46370d;
}

.pixel-table::before {
    left: 18px;
}

.pixel-table::after {
    right: 18px;
}


/* =========================================================
   POSTACIE
========================================================= */

.meeting-person {
    position: absolute;

    width: 42px;
    height: 74px;

    z-index: 5;
}

.pixel-head {
    position: absolute;

    top: 0;
    left: 9px;

    width: 24px;
    height: 24px;

    background:
        #ffe0bd;

    box-shadow:
        0 0 12px
        rgba(255,224,189,0.12);
}

.pixel-body {
    position: absolute;

    top: 28px;
    left: 5px;

    width: 32px;
    height: 38px;

    background:
        #63f3ff;
}


/* =========================================================
   KOLEDZY / TY
========================================================= */

.friend-1 {
    left: 18%;
    bottom: 55px;
}

.friend-2 {
    left: 38%;
    bottom: 55px;
}

.player-two {
    left: 58%;
    bottom: 55px;

    transform: none;
}

.friend-1 .pixel-body,
.friend-2 .pixel-body {
    background:
        #6f6f86;
}

.player-two .pixel-body {
    background:
        #63f3ff;
}


/* =========================================================
   PAULINKA
========================================================= */

.paulinka-character {
    right: -55px;
    bottom: 28px;

    animation:
        paulinkaWalkIn
        2.2s
        steps(8, end)
        forwards;
}

.paulinka-character .pixel-body {
    background:
        #ff4da6;

    box-shadow:
        0 0 14px
        rgba(255,77,166,0.3);
}

.paulinka-character .pixel-head {
    box-shadow:
        0 0 14px
        rgba(255,77,166,0.2);
}


/* =========================================================
   PLAYER LABEL
========================================================= */

.player-label {
    position: absolute;

    top: -20px;
    left: 50%;

    transform:
        translateX(-50%);

    color:
        #ff78b8;

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    opacity:
        0;

    animation:
        playerLabelAppear
        0.4s ease
        2.2s forwards;
}


/* =========================================================
   ANIMACJE
========================================================= */

@keyframes paulinkaWalkIn {

    0% {
        right:
            -55px;
    }

    100% {
        right:
            8%;
    }

}

@keyframes playerLabelAppear {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }

}
/* =========================================================
   CUTSCENE SCENE 05 - DANCE
========================================================= */

.dance-scene {
    position: relative;

    width: min(100%, 360px);
    height: 190px;

    margin:
        0 auto
        28px;
}


/* =========================================================
   POSTACIE
========================================================= */

.dance-character {
    position: absolute;

    bottom: 20px;

    width: 54px;
    height: 92px;

    transform-origin:
        center bottom;
}


.dance-head {
    position: absolute;

    top: 0;
    left: 12px;

    width: 30px;
    height: 30px;

    background:
        #ffe0bd;
}


.dance-body {
    position: absolute;

    top: 35px;
    left: 7px;

    width: 40px;
    height: 48px;
}


.dance-paulinka {
    left: 25%;

    animation:
        paulinkaDance
        0.75s
        steps(2, end)
        infinite;
}


.dance-player-two {
    right: 25%;

    animation:
        playerTwoDance
        0.75s
        steps(2, end)
        infinite;
}


.dance-paulinka .dance-body {
    background:
        #ff4da6;

    box-shadow:
        0 0 14px
        rgba(255,77,166,0.3);
}


.dance-player-two .dance-body {
    background:
        #63f3ff;

    box-shadow:
        0 0 14px
        rgba(99,243,255,0.25);
}


/* =========================================================
   LABELKI
========================================================= */

.dance-label {
    position: absolute;

    top: -18px;
    left: 50%;

    transform:
        translateX(-50%);

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.dance-paulinka .dance-label {
    color:
        #ff78b8;
}


.dance-player-two .dance-label {
    color:
        #63f3ff;
}


/* =========================================================
   NUTKI + SERCE
========================================================= */

.dance-note,
.dance-heart {
    position: absolute;

    z-index: 5;
}


.note-1 {
    top: 18px;
    left: 18%;

    color:
        #ffe066;

    animation:
        danceNoteFloat
        1.5s ease-in-out
        infinite;
}


.note-2 {
    top: 35px;
    right: 15%;

    color:
        #63f3ff;

    animation:
        danceNoteFloat
        1.8s ease-in-out
        0.3s infinite;
}


.dance-heart {
    top: 16px;
    left: 50%;

    transform:
        translateX(-50%);

    color:
        #ff4da6;

    font-size:
        1.6rem;

    text-shadow:
        0 0 14px
        rgba(255,77,166,0.6);

    animation:
        danceHeartPulse
        1s steps(2, end)
        infinite;
}


/* =========================================================
   ANIMACJE
========================================================= */

@keyframes paulinkaDance {

    0% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(5deg);
    }

    100% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

}


@keyframes playerTwoDance {

    0% {
        transform:
            translateY(-8px)
            rotate(5deg);
    }

    50% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    100% {
        transform:
            translateY(-8px)
            rotate(5deg);
    }

}


@keyframes danceNoteFloat {

    0%,
    100% {
        transform:
            translateY(0);

        opacity:
            0.5;
    }

    50% {
        transform:
            translateY(-14px);

        opacity:
            1;
    }

}


@keyframes danceHeartPulse {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.25);
    }

}
/* =========================================================
   CUTSCENE SCENE 06 - BENCH
========================================================= */

.bench-scene {
    width: min(100%, 420px);

    margin:
        0 auto
        24px;
}


.bench {
    position: relative;

    height: 150px;
}


/* =========================================================
   ŁAWKA
========================================================= */

.bench-seat {
    position: absolute;

    left: 50%;
    bottom: 25px;

    width: 250px;
    height: 20px;

    transform:
        translateX(-50%);

    background:
        #755e17;

    box-shadow:
        0 7px 0 #46370d;
}


.bench-seat::before,
.bench-seat::after {
    content: "";

    position: absolute;

    top: 20px;

    width: 12px;
    height: 32px;

    background:
        #46370d;
}


.bench-seat::before {
    left: 20px;
}


.bench-seat::after {
    right: 20px;
}


/* =========================================================
   POSTACIE
========================================================= */

.bench-person {
    position: absolute;

    bottom: 45px;

    width: 46px;
    height: 78px;

    z-index: 4;
}


.bench-head {
    position: absolute;

    top: 0;
    left: 10px;

    width: 26px;
    height: 26px;

    background:
        #ffe0bd;
}


.bench-body {
    position: absolute;

    top: 30px;
    left: 6px;

    width: 34px;
    height: 42px;
}


.bench-paulinka {
    left: 32%;
}

.bench-player-two {
    right: 32%;
}


.bench-paulinka .bench-body {
    background:
        #ff4da6;

    box-shadow:
        0 0 12px
        rgba(255,77,166,0.25);
}


.bench-player-two .bench-body {
    background:
        #63f3ff;

    box-shadow:
        0 0 12px
        rgba(99,243,255,0.22);
}


/* =========================================================
   ROZMOWA
========================================================= */

.bench-talk {
    position: absolute;

    color:
        rgba(255,255,255,0.7);

    font-size:
        1rem;

    letter-spacing:
        0.08em;

    opacity:
        0;
}


.talk-1 {
    top: 8px;
    left: 34%;

    animation:
        benchTalk
        2s ease
        infinite;
}


.talk-2 {
    top: 24px;
    right: 31%;

    animation:
        benchTalk
        2s ease
        1s infinite;
}


/* =========================================================
   ANIMACJA
========================================================= */

@keyframes benchTalk {

    0%,
    20% {
        opacity: 0;

        transform:
            translateY(4px);
    }

    40%,
    70% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-4px);
    }

}
.cutscene-location {
    margin-top: 18px;

    color: rgba(255,255,255,0.5);

    font-size: 0.72rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}
/* =========================================================
   SECTION 00 - MAIN WISHES
========================================================= */

.main-wishes-box {
    position: relative;

    padding: 30px 26px;

    border: 1px solid rgba(255, 77, 166, 0.22);

    background:
        radial-gradient(
            circle at top left,
            rgba(255, 77, 166, 0.08),
            transparent 45%
        ),
        rgba(255,255,255,0.025);

    box-shadow:
        inset 0 0 30px rgba(255, 77, 166, 0.03);
}


.main-wishes-label {
    margin-bottom: 22px;

    color: #63f3ff;

    font-size: 0.64rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.main-wishes-text {
    width: min(100%, 760px);
}


.main-wishes-text p {
    margin: 0 0 18px;

    color: rgba(255,255,255,0.76);

    font-size: 0.95rem;

    line-height: 1.9;
}


.main-wishes-text p:last-child {
    margin-bottom: 0;
}


.main-wishes-box::after {
    content: "MESSAGE.TXT";

    position: absolute;

    top: 10px;
    right: 12px;

    color: rgba(255,255,255,0.12);

    font-size: 0.55rem;

    letter-spacing: 0.12em;
}


@media (max-width: 600px) {

    .main-wishes-box {
        padding: 24px 18px;
    }

    .main-wishes-text p {
        font-size: 0.88rem;
        line-height: 1.8;
    }

}
.game-world,
.game-area,
.game-player,
.pixel-button {
    -webkit-user-select: none;
    user-select: none;

    -webkit-tap-highlight-color: transparent;
}
#game-screen {
    -webkit-user-select: none;
    user-select: none;

    -webkit-tap-highlight-color: transparent;
}
/* =========================================================
   SCROLL REVEAL
========================================================= */

.retro-section,
.retro-ending {
    opacity: 0;
    transform: translateY(34px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.retro-section.reveal-visible,
.retro-ending.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}