/* =========================================================
   RANDOM STORY GENERATOR
   Cinematic responsive design
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {

    --page: #f4f1eb;
    --surface: #fbfaf7;
    --surface-strong: #ffffff;
    --text: #171613;
    --text-soft: #4f4c46;
    --muted: #77736b;

    --border: rgba(23, 22, 19, 0.10);

    --button: rgba(255, 255, 255, 0.62);
    --button-hover: rgba(255, 255, 255, 0.92);
    --button-active: #ffffff;

    --shadow:
        0 18px 60px rgba(27, 24, 18, 0.09);

    --accent: #7357c8;
    --accent-soft: rgba(115, 87, 200, 0.16);

    --world-height: clamp(250px, 32vw, 430px);

    --content-width: 820px;

    --radius-large: 30px;
    --radius-medium: 20px;

    --ease:
        cubic-bezier(0.22, 0.61, 0.36, 1);

}


/* =========================================================
   DARK THEME
   ========================================================= */

:root[data-color-theme="dark"] {

    --page: #09090b;
    --surface: #111113;
    --surface-strong: #161619;

    --text: #f5f2ec;
    --text-soft: #cbc6bd;
    --muted: #8f8b84;

    --border: rgba(255, 255, 255, 0.10);

    --button: rgba(255, 255, 255, 0.055);
    --button-hover: rgba(255, 255, 255, 0.105);
    --button-active: rgba(255, 255, 255, 0.13);

    --shadow:
        0 24px 80px rgba(0, 0, 0, 0.40);

}


/* =========================================================
   GENRE ACCENTS
   ========================================================= */

body[data-theme="horror"] {
    --accent: #b52e42;
    --accent-soft: rgba(181, 46, 66, 0.20);
}

body[data-theme="romance"] {
    --accent: #c84d76;
    --accent-soft: rgba(200, 77, 118, 0.18);
}

body[data-theme="fantasy"] {
    --accent: #795bd1;
    --accent-soft: rgba(121, 91, 209, 0.20);
}

body[data-theme="comedy"] {
    --accent: #e08b24;
    --accent-soft: rgba(224, 139, 36, 0.18);
}

body[data-theme="thriller"] {
    --accent: #2d8eaf;
    --accent-soft: rgba(45, 142, 175, 0.18);
}

body[data-theme="drama"] {
    --accent: #8a7564;
    --accent-soft: rgba(138, 117, 100, 0.17);
}


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

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


html {
    min-height: 100%;
    background: var(--page);

    scroll-behavior: smooth;
}


body {

    min-width: 320px;
    min-height: 100vh;

    background: var(--page);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    transition:
        background-color 500ms ease,
        color 350ms ease;

}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


button {
    font: inherit;
}


button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}


::selection {
    background: var(--accent-soft);
    color: var(--text);
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.atmosphere {

    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

}


.atmosphere-light {

    position: absolute;

    width: 70vw;
    height: 70vw;

    max-width: 900px;
    max-height: 900px;

    top: -45vw;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--accent-soft) 0%,
            transparent 68%
        );

    opacity: 0.45;

    filter: blur(35px);

    transition:
        background 700ms ease,
        opacity 700ms ease;

}


.atmosphere-secondary {

    position: absolute;

    width: 480px;
    height: 480px;

    right: -300px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--accent-soft),
            transparent 70%
        );

    opacity: 0.18;

    filter: blur(40px);

    transition: background 700ms ease;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    position: relative;

    z-index: 10;

    width: 100%;

    padding:
        max(22px, env(safe-area-inset-top))
        clamp(18px, 4vw, 52px)
        0;

}


.header-inner {

    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

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

}


.logo {

    color: var(--text);

    text-decoration: none;

    font-size: 15px;
    font-weight: 650;

    letter-spacing: -0.025em;

    transition: color 250ms ease;

}


.theme-toggle {

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: var(--button);

    color: var(--text);

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);

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

    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms var(--ease);

}


.theme-toggle:hover {

    background: var(--button-hover);

    transform: rotate(12deg) scale(1.04);

}


.theme-toggle:active {

    transform: scale(0.92);

}


.theme-icon {

    grid-area: 1 / 1;

    font-size: 17px;

    line-height: 1;

    transition:
        opacity 220ms ease,
        transform 300ms var(--ease);

}


.theme-sun {
    opacity: 1;
}


.theme-moon {
    opacity: 0;
    transform: rotate(-35deg) scale(0.7);
}


:root[data-color-theme="dark"] .theme-sun {

    opacity: 0;

    transform: rotate(35deg) scale(0.7);

}


:root[data-color-theme="dark"] .theme-moon {

    opacity: 1;

    transform: rotate(0) scale(1);

}


/* =========================================================
   PAGE
   ========================================================= */

.page {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding:
        clamp(58px, 8vw, 110px)
        clamp(18px, 5vw, 72px)
        100px;

}


/* =========================================================
   INTRO
   ========================================================= */

.intro {

    width: min(100%, 820px);

    margin: 0 auto;

    text-align: center;

}


.intro h1 {

    color: var(--text);

    font-size:
        clamp(38px, 6vw, 72px);

    font-weight: 680;

    line-height: 0.98;

    letter-spacing: -0.065em;

}


.intro p {

    margin-top: 20px;

    color: var(--muted);

    font-size:
        clamp(14px, 1.5vw, 17px);

    line-height: 1.5;

    letter-spacing: -0.01em;

}


/* =========================================================
   GENRE NAVIGATION
   ========================================================= */

.genre-navigation {

    width: 100%;

    margin-top:
        clamp(34px, 5vw, 54px);

}


.genre-form {

    width: 100%;

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

    gap: 6px;

    overflow-x: auto;

    padding: 5px;

    scrollbar-width: none;

}


.genre-form::-webkit-scrollbar {
    display: none;
}


.genre-button {

    position: relative;

    flex: 0 0 auto;

    min-height: 42px;

    padding:
        0
        clamp(16px, 2vw, 22px);

    border: 1px solid transparent;

    border-radius: 999px;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font-size: 13px;

    font-weight: 550;

    letter-spacing: -0.005em;

    white-space: nowrap;

    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        transform 180ms var(--ease);

}


.genre-button:hover {

    color: var(--text);

    background: var(--button);

    border-color: var(--border);

}


.genre-button:active {

    transform: scale(0.95);

}


.genre-button.active {

    color: var(--text);

    background: var(--button-active);

    border-color: var(--border);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.06);

}


.genre-button.active::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--accent);

    transform: translateX(-50%);

}


/* =========================================================
   CINEMATIC WORLD
   ========================================================= */

.world {

    width: 100%;

    margin-top:
        clamp(32px, 5vw, 58px);

}


.world-inner {

    position: relative;

    width: 100%;

    height: var(--world-height);

    overflow: hidden;

    border-radius:
        clamp(22px, 3vw, 34px);

    background: #111;

    box-shadow: var(--shadow);

    isolation: isolate;

}


.scene {

    position: absolute;
    inset: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 700ms var(--ease);

}


.scene::after {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 20;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04),
            transparent 30%,
            rgba(0, 0, 0, 0.24)
        );

    pointer-events: none;

}


.scene-horror {
    /* Default cinematic scene before a genre is selected. */
    opacity: 0;
}

body[data-theme="default"] .scene-default {
    opacity: 1;
}

body[data-theme="horror"] .scene-horror,
body[data-theme="romance"] .scene-romance,
body[data-theme="fantasy"] .scene-fantasy,
body[data-theme="comedy"] .scene-comedy,
body[data-theme="thriller"] .scene-thriller,
body[data-theme="drama"] .scene-drama {

    opacity: 1;

}


/* =========================================================
   HORROR WORLD
   ========================================================= */

.scene-horror {

    background:
        linear-gradient(
            180deg,
            #090b12 0%,
            #11151b 52%,
            #08090b 100%
        );

}


.horror-sky {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(139, 154, 174, 0.12),
            transparent 25%
        );

}


.horror-moon {

    position: absolute;

    width: clamp(55px, 8vw, 105px);
    aspect-ratio: 1;

    top: 12%;
    right: 16%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #dfe2e5,
            #8e9298 70%,
            #666b73
        );

    box-shadow:
        0 0 60px rgba(215, 220, 225, 0.12);

    animation:
        horrorMoon 8s ease-in-out infinite;

}


@keyframes horrorMoon {

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

    50% {
        transform: translateY(8px);
    }

}


.horror-tree {

    position: absolute;

    bottom: 4%;

    width: 0;
    height: 0;

    border-left:
        clamp(35px, 6vw, 85px)
        solid transparent;

    border-right:
        clamp(35px, 6vw, 85px)
        solid transparent;

    border-bottom:
        clamp(180px, 26vw, 360px)
        solid #090a0d;

    filter: drop-shadow(
        0 15px 15px rgba(0, 0, 0, 0.5)
    );

    transform-origin: bottom;

    animation:
        treeSway 7s ease-in-out infinite;

}


.tree-one {
    left: -2%;
}


.tree-two {
    left: 14%;
    transform: scale(0.75);
    animation-delay: -2s;
}


.tree-three {
    right: 3%;
    transform: scale(1.1);
    animation-delay: -4s;
}


@keyframes treeSway {

    0%,
    100% {
        rotate: -1deg;
    }

    50% {
        rotate: 1deg;
    }

}


.horror-path {

    position: absolute;

    left: 42%;
    bottom: -22%;

    width: 28%;
    height: 65%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76, 73, 67, 0.28),
            transparent
        );

    clip-path:
        polygon(
            44% 0,
            58% 0,
            100% 100%,
            0 100%
        );

}


.horror-person {

    position: absolute;

    left: 50%;
    bottom: 21%;

    width: 18px;
    height: 72px;

    background: #050507;

    border-radius: 10px 10px 4px 4px;

    transform: translateX(-50%);

    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.8);

    animation:
        personBreath 4s ease-in-out infinite;

}


.horror-person::before {

    content: "";

    position: absolute;

    width: 19px;
    height: 19px;

    top: -15px;
    left: 50%;

    border-radius: 50%;

    background: #050507;

    transform: translateX(-50%);

}


@keyframes personBreath {

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

    50% {
        transform: translateX(-50%) scaleY(1.03);
    }

}


.horror-mist {

    position: absolute;

    width: 65%;
    height: 25%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(180, 187, 194, 0.13),
            transparent 70%
        );

    filter: blur(18px);

    animation:
        mistMove 12s linear infinite;

}


.mist-one {
    left: -15%;
    bottom: 7%;
}


.mist-two {
    right: -20%;
    bottom: 15%;
    animation-delay: -6s;
}


@keyframes mistMove {

    0% {
        transform: translateX(-5%);
    }

    50% {
        transform: translateX(12%);
    }

    100% {
        transform: translateX(-5%);
    }

}


/* =========================================================
   ROMANCE WORLD
   ========================================================= */

.scene-romance {

    background:
        linear-gradient(
            180deg,
            #e9a5a7 0%,
            #f2c0a5 45%,
            #d88a75 100%
        );

}


.romance-sky {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 221, 194, 0.28),
            transparent 70%
        );

}


.romance-sun {

    position: absolute;

    width: clamp(70px, 11vw, 145px);
    aspect-ratio: 1;

    top: 16%;
    left: 18%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff1c8 0%,
            #ffd19d 45%,
            rgba(255, 209, 157, 0) 72%
        );

    filter: blur(1px);

    animation:
        sunPulse 7s ease-in-out infinite;

}


@keyframes sunPulse {

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

    50% {
        transform: scale(1.06);
    }

}


.romance-cloud {

    position: absolute;

    width: 28%;
    height: 16%;

    border-radius: 50%;

    background: rgba(255, 239, 226, 0.25);

    filter: blur(13px);

    animation:
        cloudFloat 16s ease-in-out infinite;

}


.romance-cloud.cloud-one {

    top: 18%;
    left: 45%;

}


.romance-cloud.cloud-two {

    top: 34%;
    left: 7%;

    transform: scale(0.7);

    animation-delay: -7s;

}


@keyframes cloudFloat {

    0%,
    100% {
        transform: translateX(-2%);
    }

    50% {
        transform: translateX(7%);
    }

}


.romance-hill {

    position: absolute;

    left: -10%;
    right: -10%;

    border-radius: 50% 50% 0 0;

}


.hill-one {

    bottom: -35%;

    height: 75%;

    background: #7e635b;

}


.hill-two {

    bottom: -50%;

    height: 70%;

    background: #594b49;

}


.romance-tree {

    position: absolute;

    left: 74%;
    bottom: 16%;

    width: 11px;
    height: 45%;

    background: #4c3835;

    transform-origin: bottom;

}


.romance-tree::before {

    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    left: -45px;
    top: -35px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 50%,
            #704e58,
            #4c3942 70%
        );

}


.romance-person {

    position: absolute;

    bottom: 17%;

    width: 15px;
    height: 70px;

    border-radius: 9px 9px 3px 3px;

    background: #443437;

    z-index: 8;

}


.person-one {
    left: 47%;
}


.person-two {
    left: 51%;
    height: 63px;
    background: #533d43;
}


.romance-person::before {

    content: "";

    position: absolute;

    width: 16px;
    height: 16px;

    top: -13px;
    left: 50%;

    border-radius: 50%;

    background: inherit;

    transform: translateX(-50%);

}


.romance-light {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 55%,
            rgba(255, 226, 198, 0.28),
            transparent 42%
        );

    animation:
        romanceLight 6s ease-in-out infinite;

}


@keyframes romanceLight {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.9;
    }

}


/* =========================================================
   FANTASY WORLD
   ========================================================= */

.scene-fantasy {

    background:
        linear-gradient(
            180deg,
            #090d2b 0%,
            #1a1a52 52%,
            #17172c 100%
        );

}


.fantasy-sky {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 72% 30%,
            rgba(132, 109, 231, 0.32),
            transparent 30%
        );

}


.fantasy-moon {

    position: absolute;

    top: 14%;
    right: 16%;

    width: clamp(55px, 8vw, 100px);
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            #fff,
            #d6d2ff 62%,
            #a49be8
        );

    box-shadow:
        0 0 55px rgba(181, 169, 255, 0.45);

}


.fantasy-star {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.8);

    animation:
        starTwinkle 3s ease-in-out infinite;

}


.star-one {
    top: 17%;
    left: 18%;
}

.star-two {
    top: 28%;
    left: 35%;
    animation-delay: -1s;
}

.star-three {
    top: 12%;
    left: 53%;
    animation-delay: -2s;
}

.star-four {
    top: 40%;
    left: 67%;
    animation-delay: -0.5s;
}

.star-five {
    top: 22%;
    left: 83%;
    animation-delay: -1.7s;
}

.star-six {
    top: 36%;
    left: 10%;
    animation-delay: -2.4s;
}

.star-seven {
    top: 49%;
    left: 29%;
    animation-delay: -1.2s;
}


@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

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

}


.fantasy-mountain {

    position: absolute;

    bottom: 8%;

    width: 0;
    height: 0;

    border-left:
        clamp(130px, 19vw, 280px)
        solid transparent;

    border-right:
        clamp(130px, 19vw, 280px)
        solid transparent;

    border-bottom:
        clamp(140px, 22vw, 290px)
        solid #0c1023;

}


.mountain-one {
    left: -8%;
}

.mountain-two {
    right: -8%;
    transform: scale(0.8);
    border-bottom-color: #111331;
}


.fantasy-ground {

    position: absolute;

    left: -5%;
    right: -5%;
    bottom: -30%;

    height: 55%;

    border-radius: 50%;

    background: #080b18;

}


.fantasy-castle {

    position: absolute;

    left: 50%;
    bottom: 22%;

    width: 130px;
    height: 110px;

    transform: translateX(-50%);

    background: #141936;

    clip-path:
        polygon(
            0 100%,
            0 32%,
            18% 32%,
            18% 15%,
            29% 15%,
            29% 32%,
            43% 32%,
            43% 0,
            57% 0,
            57% 32%,
            71% 32%,
            71% 15%,
            82% 15%,
            82% 32%,
            100% 32%,
            100% 100%
        );

    box-shadow:
        0 0 40px rgba(108, 91, 199, 0.18);

}


.tower {

    position: absolute;

    width: 7px;
    height: 18px;

    bottom: 27px;

    background: #8e7ee0;

    box-shadow:
        0 0 15px rgba(139, 123, 229, 0.7);

}


.tower-one {
    left: 28px;
}

.tower-two {
    left: 62px;
}

.tower-three {
    right: 28px;
}


.fantasy-glow {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 70%,
            rgba(112, 93, 218, 0.18),
            transparent 40%
        );

    animation:
        fantasyGlow 5s ease-in-out infinite;

}


@keyframes fantasyGlow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

}


/* =========================================================
   DEFAULT / NO GENRE WORLD
   ========================================================= */

.scene-default {
    background:
        linear-gradient(180deg, #10131d 0%, #181d2b 55%, #0b0e16 100%);
}

.default-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 24%, rgba(224, 219, 255, 0.16), transparent 18%),
        radial-gradient(circle at 28% 48%, rgba(125, 150, 190, 0.08), transparent 28%),
        linear-gradient(180deg, transparent 0%, rgba(8, 11, 19, 0.28) 100%);
}

.default-orb {
    position: absolute;
    width: clamp(55px, 8vw, 96px);
    aspect-ratio: 1;
    top: 16%;
    right: 17%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #f8f6ff, #c9c9dc 62%, #8e91a5);
    box-shadow: 0 0 70px rgba(213, 215, 245, 0.16);
    animation: defaultOrb 9s ease-in-out infinite;
}

@keyframes defaultOrb {
    0%, 100% { transform: translateY(0); opacity: 0.88; }
    50% { transform: translateY(7px); opacity: 1; }
}

.default-haze {
    position: absolute;
    border-radius: 50%;
    filter: blur(22px);
    background: rgba(173, 184, 211, 0.07);
    animation: defaultHaze 14s ease-in-out infinite;
}

.haze-one { width: 55%; height: 25%; left: -10%; bottom: 22%; }
.haze-two { width: 45%; height: 22%; right: -8%; bottom: 28%; animation-delay: -6s; }

@keyframes defaultHaze {
    0%, 100% { transform: translateX(-3%); opacity: 0.55; }
    50% { transform: translateX(5%); opacity: 1; }
}

.default-hill {
    position: absolute;
    left: -5%;
    width: 110%;
    border-radius: 50% 50% 0 0;
}

.default-hill.hill-one {
    height: 42%;
    bottom: 8%;
    background: #111622;
}

.default-hill.hill-two {
    height: 32%;
    bottom: 2%;
    background: #0b0f18;
    transform: translateX(7%);
}

.default-ground {
    position: absolute;
    inset: auto 0 0;
    height: 18%;
    background: linear-gradient(180deg, rgba(5, 7, 12, 0), #070910 70%);
}

.default-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(238, 239, 248, 0.65);
    box-shadow: 0 0 10px rgba(238, 239, 248, 0.2);
    animation: defaultParticle 5s ease-in-out infinite;
}

.particle-one { left: 22%; top: 28%; }
.particle-two { left: 39%; top: 18%; width: 3px; height: 3px; animation-delay: -1.5s; }
.particle-three { right: 34%; top: 37%; width: 3px; height: 3px; animation-delay: -3s; }
.particle-four { right: 21%; top: 58%; width: 4px; height: 4px; animation-delay: -4s; }

@keyframes defaultParticle {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-9px); opacity: 0.9; }
}


/* =========================================================
   COMEDY WORLD
   ========================================================= */

.scene-comedy {
    background:
        linear-gradient(180deg, #30252a 0%, #5b3c43 52%, #171218 100%);
}

.comedy-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 229, 181, 0.15), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 55%);
}

.comedy-curtain {
    position: absolute;
    top: -8%;
    width: 28%;
    height: 82%;
    background: linear-gradient(90deg, #1a1117, #4a2833 45%, #21151c);
    filter: drop-shadow(0 18px 20px rgba(0,0,0,0.28));
}

.curtain-left {
    left: -7%;
    border-radius: 0 0 55% 8%;
    transform: rotate(5deg);
}

.curtain-right {
    right: -7%;
    border-radius: 0 0 8% 55%;
    transform: rotate(-5deg);
}

.comedy-spotlight {
    position: absolute;
    left: 50%;
    top: -5%;
    width: 54%;
    height: 82%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 239, 199, 0.18), rgba(255, 239, 199, 0.015));
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    filter: blur(1px);
}

.comedy-stage {
    position: absolute;
    left: -5%;
    bottom: -18%;
    width: 110%;
    height: 38%;
    border-radius: 50% 50% 0 0;
    background: #171016;
    box-shadow: inset 0 22px 40px rgba(255, 213, 164, 0.04);
}

.comedy-stool {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 72px;
    height: 54px;
    transform: translateX(-50%);
    border-radius: 12px 12px 7px 7px;
    background: linear-gradient(180deg, #8b5c43, #4b2d28);
    box-shadow: 0 18px 20px rgba(0,0,0,0.28);
}

.comedy-stool::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -43px;
    height: 45px;
    border-left: 5px solid #38221f;
    border-right: 5px solid #38221f;
}

.comedy-hat {
    position: absolute;
    left: 48%;
    bottom: 40%;
    width: 42px;
    height: 24px;
    border-radius: 50% 50% 8px 8px;
    background: #17131a;
    transform: rotate(-13deg);
    box-shadow: 0 8px 12px rgba(0,0,0,0.25);
    animation: comedyHat 4s ease-in-out infinite;
}

.comedy-hat::after {
    content: "";
    position: absolute;
    left: -9px;
    bottom: -4px;
    width: 60px;
    height: 8px;
    border-radius: 50%;
    background: #17131a;
}

@keyframes comedyHat {
    0%, 100% { transform: rotate(-13deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-6px); }
}

.comedy-cane {
    position: absolute;
    left: 57%;
    bottom: 17%;
    width: 9px;
    height: 105px;
    border-radius: 8px;
    background: #d8b278;
    transform: rotate(13deg);
    box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.comedy-cane::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    left: -1px;
    top: -13px;
    border: 8px solid #d8b278;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
}

.comedy-confetti {
    position: absolute;
    width: 8px;
    height: 18px;
    border-radius: 3px;
    background: rgba(241, 203, 133, 0.72);
    animation: comedyConfetti 5s ease-in-out infinite;
}

.confetti-one { left: 30%; top: 26%; transform: rotate(18deg); }
.confetti-two { left: 67%; top: 31%; transform: rotate(-24deg); animation-delay: -1s; }
.confetti-three { left: 38%; top: 49%; height: 12px; transform: rotate(42deg); animation-delay: -2.5s; }
.confetti-four { right: 29%; top: 52%; height: 13px; transform: rotate(-35deg); animation-delay: -3.5s; }

@keyframes comedyConfetti {
    0%, 100% { opacity: 0.25; transform: translateY(0) rotate(15deg); }
    50% { opacity: 0.85; transform: translateY(-10px) rotate(28deg); }
}


/* =========================================================
   THRILLER WORLD
   ========================================================= */

.scene-thriller {

    background:
        linear-gradient(
            180deg,
            #071018,
            #10212a 60%,
            #070b0e
        );

}


.thriller-sky {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 65% 28%,
            rgba(45, 142, 175, 0.23),
            transparent 34%
        );

}


.thriller-city {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 23%;

    height: 45%;

    display: flex;
    align-items: flex-end;

    gap: 2px;

}


.thriller-city span {

    flex: 1;

    min-width: 25px;

    background:
        linear-gradient(
            180deg,
            #0d171c,
            #06090b
        );

}


.thriller-city span:nth-child(1) {
    height: 70%;
}

.thriller-city span:nth-child(2) {
    height: 88%;
}

.thriller-city span:nth-child(3) {
    height: 55%;
}

.thriller-city span:nth-child(4) {
    height: 100%;
}

.thriller-city span:nth-child(5) {
    height: 74%;
}

.thriller-city span:nth-child(6) {
    height: 62%;
}


.thriller-road {

    position: absolute;

    left: -5%;
    right: -5%;
    bottom: -35%;

    height: 70%;

    background:
        linear-gradient(
            90deg,
            #050708,
            #111a1e,
            #050708
        );

    clip-path:
        polygon(
            42% 0,
            58% 0,
            100% 100%,
            0 100%
        );

}


.thriller-light {

    position: absolute;

    width: 140px;
    height: 6px;

    border-radius: 999px;

    background:
        rgba(94, 194, 224, 0.7);

    filter: blur(3px);

    transform: rotate(-14deg);

    animation:
        thrillerLight 4s ease-in-out infinite;

}


.light-one {
    left: 16%;
    bottom: 34%;
}

.light-two {
    right: 13%;
    bottom: 43%;
    animation-delay: -1.5s;
}

.light-three {
    left: 41%;
    bottom: 28%;
    animation-delay: -2.7s;
}


@keyframes thrillerLight {

    0%,
    100% {
        opacity: 0.35;
        transform: rotate(-14deg) translateX(-8px);
    }

    50% {
        opacity: 1;
        transform: rotate(-14deg) translateX(8px);
    }

}


.thriller-person {

    position: absolute;

    left: 50%;
    bottom: 20%;

    width: 17px;
    height: 75px;

    background: #030506;

    border-radius: 10px 10px 2px 2px;

    transform: translateX(-50%);

}


.thriller-person::before {

    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    top: -14px;
    left: 50%;

    border-radius: 50%;

    background: #030506;

    transform: translateX(-50%);

}


.thriller-glow {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            105deg,
            transparent 40%,
            rgba(74, 169, 201, 0.08) 50%,
            transparent 60%
        );

    animation:
        thrillerSweep 6s linear infinite;

}


@keyframes thrillerSweep {

    from {
        transform: translateX(-80%);
    }

    to {
        transform: translateX(80%);
    }

}


/* =========================================================
   DRAMA WORLD
   ========================================================= */

.scene-drama {

    background:
        linear-gradient(
            145deg,
            #c3b4a3,
            #8d7d6e 52%,
            #403932
        );

}


.drama-room {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 239, 213, 0.14),
            transparent 48%
        );

}


.drama-window {

    position: absolute;

    top: 10%;
    left: 14%;

    width: 24%;
    height: 63%;

    border:
        7px solid rgba(48, 39, 34, 0.8);

    background:
        linear-gradient(
            145deg,
            #d3c1a8,
            #806f62
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);

}


.drama-window span {

    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 4px;

    background:
        rgba(48, 39, 34, 0.7);

}


.drama-curtain {

    position: absolute;

    top: 0;
    bottom: 0;

    width: 14%;

    background:
        linear-gradient(
            90deg,
            #4a4039,
            #66584d,
            #352f2a
        );

}


.curtain-one {
    left: 0;
}

.curtain-two {
    left: 30%;
}


.drama-person {

    position: absolute;

    left: 57%;
    bottom: 18%;

    width: 25px;
    height: 100px;

    background: #272321;

    border-radius: 14px 14px 4px 4px;

    transform-origin: bottom;

    animation:
        dramaBreath 5s ease-in-out infinite;

}


.drama-person::before {

    content: "";

    position: absolute;

    width: 27px;
    height: 27px;

    top: -20px;
    left: 50%;

    border-radius: 50%;

    background: #272321;

    transform: translateX(-50%);

}


@keyframes dramaBreath {

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

    50% {
        transform: scaleY(1.015);
    }

}


.drama-chair {

    position: absolute;

    right: 14%;
    bottom: 17%;

    width: 80px;
    height: 80px;

    border-radius: 15px 15px 5px 5px;

    background: #40342e;

}


.drama-floor {

    position: absolute;

    left: -5%;
    right: -5%;
    bottom: -34%;

    height: 52%;

    border-radius: 50%;

    background: #302b27;

}


.drama-light {

    position: absolute;

    width: 45%;
    height: 70%;

    left: 30%;
    top: -12%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 225, 186, 0.26),
            transparent 70%
        );

    filter: blur(12px);

    animation:
        dramaLight 7s ease-in-out infinite;

}


@keyframes dramaLight {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.9;
    }

}


/* =========================================================
   STORY SECTION
   ========================================================= */

.story-section {

    width: 100%;
    max-width: var(--content-width);

    margin:
        clamp(42px, 7vw, 78px)
        auto
        0;

}


.story {

    width: 100%;

    animation:
        storyReveal 650ms var(--ease);

}


@keyframes storyReveal {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   STORY META
   ========================================================= */

.story-meta {

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom:
        clamp(24px, 4vw, 38px);

}


.story-line {

    width: 28px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--accent);

    border-radius: 999px;

}


.story-genre {

    color: var(--accent);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


/* =========================================================
   STORY CONTENT
   ========================================================= */

.story-content {

    color: var(--text-soft);

}


.story-content p {

    margin-bottom:
        clamp(20px, 3vw, 30px);

    font-size:
        clamp(17px, 1.65vw, 21px);

    line-height: 1.86;

    letter-spacing: -0.012em;

    overflow-wrap: anywhere;

}


.story-content p:last-child {
    margin-bottom: 0;
}


.story-content h1,
.story-content h2,
.story-content h3,
.story-content h4 {

    color: var(--text);

    margin:
        clamp(32px, 5vw, 50px)
        0
        20px;

    font-weight: 680;

    line-height: 1.1;

    letter-spacing: -0.045em;

}


.story-content h1 {

    font-size:
        clamp(32px, 5vw, 52px);

}


.story-content h2 {

    font-size:
        clamp(27px, 4vw, 40px);

}


.story-content h3 {

    font-size:
        clamp(22px, 3vw, 31px);

}


.story-content h4 {

    font-size:
        clamp(19px, 2.5vw, 26px);

}


.story-content strong,
.story-content b {

    color: var(--text);

    font-weight: 680;

}


.story-content em,
.story-content i {

    color: var(--text);

}


.story-content blockquote {

    margin:
        32px
        0;

    padding:
        6px
        0
        6px
        24px;

    border-left:
        2px solid var(--accent);

    color: var(--text-soft);

    font-size:
        clamp(18px, 2vw, 23px);

    line-height: 1.7;

}


/* =========================================================
   STORY END
   ========================================================= */

.story-end {

    display: flex;

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

    gap: 6px;

    margin-top:
        clamp(46px, 7vw, 76px);

}


.story-end span {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--accent);

    opacity: 0.35;

}


.story-end span:nth-child(2) {
    opacity: 0.9;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.story-section.empty {

    min-height:
        clamp(280px, 34vw, 420px);

    display: grid;
    place-items: center;

}


.empty-state {

    text-align: center;

}


.empty-mark {

    display: flex;

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

    gap: 5px;

    margin-bottom: 25px;

}


.empty-mark span {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--accent);

    opacity: 0.35;

}


.empty-mark span:nth-child(2) {

    width: 7px;
    height: 7px;

    opacity: 0.9;

}


.empty-state h2 {

    color: var(--text);

    font-size:
        clamp(30px, 5vw, 48px);

    font-weight: 680;

    line-height: 1;

    letter-spacing: -0.055em;

}


.empty-state p {

    margin-top: 14px;

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   DARK MODE — WORLD DEPTH
   ========================================================= */

:root[data-color-theme="dark"]
.world-inner {

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.55);

}


:root[data-color-theme="dark"]
.story-content {

    color: #c9c5be;

}


:root[data-color-theme="dark"]
.genre-button.active {

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.30);

}


:root[data-color-theme="dark"]
.theme-toggle {

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28);

}


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

@media (max-width: 900px) {

    .page {

        padding-top:
            clamp(50px, 9vw, 80px);

        padding-bottom: 80px;

    }


    .genre-form {

        justify-content: flex-start;

        padding-left: 2px;
        padding-right: 2px;

    }


    .world-inner {

        --world-height:
            clamp(240px, 40vw, 350px);

    }


    .story-section {

        margin-top:
            clamp(38px, 6vw, 58px);

    }

}


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

@media (max-width: 600px) {

    html {
        scroll-behavior: auto;
    }


    .site-header {

        padding-left: 16px;
        padding-right: 16px;

    }


    .logo {

        font-size: 14px;

    }


    .theme-toggle {

        width: 38px;
        height: 38px;

    }


    .page {

        padding:
            52px
            16px
            max(70px, env(safe-area-inset-bottom));

    }


    .intro {

        padding:
            0
            8px;

    }


    .intro h1 {

        font-size:
            clamp(36px, 11vw, 52px);

        line-height: 1;

    }


    .intro p {

        margin-top: 15px;

        font-size: 14px;

    }


    .genre-navigation {

        margin-top: 30px;

        margin-left: -4px;
        width: calc(100% + 8px);

    }


    .genre-form {

        gap: 3px;

        overflow-x: auto;

        justify-content: flex-start;

    }


    .genre-button {

        min-height: 40px;

        padding-left: 14px;
        padding-right: 14px;

        font-size: 12px;

    }


    .world {

        margin-top: 28px;

    }


    .world-inner {

        --world-height:
            clamp(235px, 62vw, 310px);

        border-radius: 22px;

    }


    .story-section {

        margin-top: 40px;

    }


    .story-meta {

        margin-bottom: 24px;

    }


    .story-content p {

        font-size: 17px;

        line-height: 1.82;

        margin-bottom: 21px;

    }


    .story-content blockquote {

        margin:
            26px
            0;

        padding-left: 18px;

    }


    .story-end {

        margin-top: 48px;

    }


    .story-section.empty {

        min-height: 260px;

    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .page {

        padding-left: 13px;
        padding-right: 13px;

    }


    .site-header {

        padding-left: 13px;
        padding-right: 13px;

    }


    .intro h1 {

        font-size: 35px;

    }


    .intro p {

        font-size: 13px;

    }


    .genre-navigation {

        margin-left: -3px;

        width: calc(100% + 6px);

    }


    .genre-button {

        padding-left: 12px;
        padding-right: 12px;

        font-size: 11px;

    }


    .world-inner {

        border-radius: 19px;

    }


    .story-content p {

        font-size: 16px;

        line-height: 1.8;

    }

}


/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (
    max-height: 520px
) and (
    orientation: landscape
) {

    .page {

        padding-top: 36px;

    }


    .intro h1 {

        font-size: 38px;

    }


    .intro p {

        margin-top: 9px;

    }


    .genre-navigation {

        margin-top: 22px;

    }


    .world {

        margin-top: 25px;

    }


    .world-inner {

        height: 250px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}
/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    width: 100%;

    margin-top:
        clamp(70px, 9vw, 120px);

    padding:
        35px
        clamp(18px, 5vw, 72px)
        max(40px, env(safe-area-inset-bottom));

}


.footer-inner {

    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    display: flex;

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

    gap: 28px;

    color: #ffffff;

    font-size:
        clamp(16px, 1.7vw, 21px);

    font-weight: 500;

    line-height: 1.5;

    letter-spacing: -0.02em;

}


.footer-name {

    color: #ffffff;

    font-weight: 650;

}


.footer-inner a {

    color: #ffffff;

    text-decoration: none;

    transition:
        opacity 220ms ease,
        transform 220ms ease;

}


.footer-inner a:hover {

    opacity: 0.7;

}


/* =========================================================
   REMOVE SEPARATORS
   ========================================================= */

.footer-separator {

    display: none;

}


/* =========================================================
   FOOTER — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-footer {

        margin-top: 65px;

        padding-top: 30px;

        padding-bottom:
            max(35px, env(safe-area-inset-bottom));

    }


    .footer-inner {

        flex-direction: column;

        gap: 8px;

        font-size: 17px;

        text-align: center;

    }

}
/* =========================================================
   FOOTER FINAL ADJUSTMENTS
   ========================================================= */

.site-footer {
    margin-top: 30px !important;
    padding-top: 25px !important;
}

.footer-inner {
    color: #ffffff !important;
}

.footer-inner a {
    color: #ffffff !important;
}

.footer-name {
    color: #ffffff !important;
}

.footer-separator {
    display: none !important;
}

@media (max-width: 600px) {

    .site-footer {
        margin-top: 25px !important;
        padding-top: 20px !important;
    }

}