:root {
    color-scheme: dark;
    --ink: #f0f5ef;
    --muted: #8fa2a5;
    --accent: #d34a48;
    --line: rgba(213, 234, 229, 0.2);
    --surface: rgba(8, 21, 29, 0.6);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    min-width: 320px;
    overflow: hidden;
    color: var(--ink);
    background: #061018;
    font-family: "Inter", sans-serif;
}

button { font: inherit; }

.intro-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(126, 28, 35, .25), transparent 34%),
        linear-gradient(145deg, #111315, #040506 72%);
    transition: opacity .75s ease, visibility .75s ease, transform .75s cubic-bezier(.2,.8,.2,1);
}

.intro-gate::before,
.intro-gate::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: .15;
    background: linear-gradient(90deg, transparent, #9c252b 35%, #e15a5e 50%, #9c252b 65%, transparent);
}

.intro-gate::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: clamp(70px, 9vw, 135px);
    transform: translateX(-50%);
}

.intro-gate::after {
    top: 50%;
    right: 0;
    left: 0;
    height: clamp(70px, 9vw, 135px);
    transform: translateY(-50%);
}

.intro-gate.is-opening {
    visibility: hidden;
    opacity: 0;
    transform: scale(1.045);
    pointer-events: none;
}

.intro-gate__content {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    padding: clamp(38px, 7vw, 72px);
    border: 1px solid rgba(223, 226, 223, .24);
    text-align: center;
    background: rgba(8, 10, 11, .82);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.025), 0 35px 100px rgba(0,0,0,.65);
    backdrop-filter: blur(12px);
}

.intro-gate__title {
    margin: 0 0 42px;
    color: #f3f1ed;
    font: 700 clamp(48px, 8vw, 88px)/.9 "Space Grotesk", sans-serif;
    letter-spacing: -.065em;
    text-shadow: 0 5px 0 #2b0d10, 0 14px 40px rgba(210, 54, 62, .2);
}

.unwrap-button {
    width: min(260px, 100%);
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 22px;
    border: 1px solid rgba(222, 226, 223, .36);
    color: #f5f5f2;
    background:
        linear-gradient(125deg, rgba(255,255,255,.1), transparent 32%, rgba(0,0,0,.24)),
        #555958;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.4);
    font: 600 16px "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.unwrap-button:hover,
.unwrap-button:focus-visible {
    border-color: rgba(255,255,255,.7);
    background:
        linear-gradient(125deg, rgba(255,255,255,.16), transparent 32%, rgba(0,0,0,.2)),
        #747877;
    transform: translateY(-2px);
    outline: none;
}

.sky {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(2, 6, 10, .88) 0%, rgba(2, 6, 10, .64) 35%, rgba(2, 6, 10, .12) 72%),
        linear-gradient(180deg, rgba(3, 8, 12, .12) 0%, rgba(3, 8, 12, .38) 100%),
        url("assets/menu_bg.webp") center 38% / cover no-repeat;
    animation: storm-pulse 8s linear infinite;
}

.sky::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(225, 240, 255, .9), rgba(123, 165, 208, .25) 24%, transparent 50%),
        linear-gradient(110deg, transparent 0 12%, rgba(218, 238, 255, .35) 12.5%, transparent 13.2% 100%);
    mix-blend-mode: screen;
    animation: lightning-flash 8s linear infinite;
}

.sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 55% 45%, transparent 30%, rgba(0,0,0,.58) 100%);
}

.stars {
    position: absolute;
    inset: -20%;
    opacity: .65;
    animation: drift 40s linear infinite;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(180,223,218,.7) 0 1px, transparent 1.5px);
    background-position: 10px 30px, 80px 100px;
    background-size: 130px 160px, 210px 230px;
}

.stars--far { transform: scale(.7); opacity: .35; animation-duration: 65s; }

.orb {
    position: absolute;
    width: min(55vw, 710px);
    aspect-ratio: 1;
    right: -6vw;
    bottom: -27vw;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 27%, rgba(218,235,213,.22), transparent 3%),
        radial-gradient(circle at 62% 48%, transparent 0 12%, rgba(0,0,0,.18) 12.5% 15%, transparent 16%),
        radial-gradient(circle at 30% 38%, transparent 0 7%, rgba(0,0,0,.16) 7.5% 10%, transparent 11%),
        radial-gradient(circle at 35% 30%, #809296 0%, #3f545b 35%, #152a34 70%, #07131c 100%);
    box-shadow: -35px -35px 100px rgba(161, 220, 203, .13), inset 32px 18px 65px rgba(213,244,226,.13);
    filter: saturate(.7);
}

.orb::before {
    content: "";
    position: absolute;
    inset: -3%;
    border-radius: inherit;
    border-top: 1px solid rgba(204,255,226,.38);
    filter: blur(2px);
}

.horizon {
    position: absolute;
    width: 70vw;
    height: 25vh;
    right: -5vw;
    bottom: -9vh;
    border-radius: 50%;
    background: rgba(131,171,164,.07);
    filter: blur(30px);
}

.stars, .orb, .horizon { display: none; }

.noise {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.menu-shell {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 28px clamp(24px, 5vw, 80px) 25px;
}

.music-toggle {
    position: absolute;
    top: 28px;
    right: clamp(24px, 5vw, 80px);
    z-index: 4;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(210, 215, 213, .36);
    border-radius: 50%;
    color: #ecefed;
    background: rgba(25, 28, 29, .68);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.35);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.music-toggle:hover,
.music-toggle:focus-visible {
    color: #fff;
    background: rgba(87, 91, 91, .88);
    transform: scale(1.06);
    outline: none;
}

.music-toggle svg {
    width: 19px;
    height: 19px;
    overflow: visible;
}

.music-toggle .speaker,
.music-toggle .sound-waves { fill: currentColor; }

.music-toggle .mute-mark {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.music-toggle.is-muted { color: #9da19f; }
.music-toggle.is-muted .sound-waves { display: none; }
.music-toggle.is-muted .mute-mark { display: block; }

.hero {
    width: min(720px, 100%);
    padding: 1vh 0;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.eyebrow span { width: 30px; height: 1px; background: currentColor; }

h1 {
    margin: 0;
    width: min(671px, 100%);
    line-height: 0;
    filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .72)) drop-shadow(0 14px 30px rgba(0, 0, 0, .45));
}

h1 img {
    display: block;
    width: 100%;
    height: auto;
}

.tagline {
    width: min(671px, 100%);
    margin: 21px 0 clamp(36px, 7vh, 70px);
    color: var(--muted);
    font-size: clamp(13px, 1.2vw, 16px);
    letter-spacing: .04em;
    text-align: center;
}

.game-menu {
    width: min(480px, 100%);
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(204, 211, 211, .18);
    background: rgba(9, 11, 13, .5);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
}

.menu-item {
    position: relative;
    width: 100%;
    height: 72px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    padding: 0 23px 0 17px;
    border: 1px solid rgba(202, 207, 204, .22);
    color: var(--ink);
    text-align: left;
    background-color: rgba(59, 62, 62, .9);
    background-image:
        linear-gradient(125deg, rgba(255,255,255,.08), transparent 28%, rgba(0,0,0,.22)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70' viewBox='0 0 160 70'%3E%3Cpath d='M0 1H160M0 35H160M0 69H160M80 1V35M40 35V69M120 35V69' fill='none' stroke='%23242728' stroke-width='3'/%3E%3C/svg%3E");
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -8px 14px rgba(0,0,0,.16);
    transition: padding .35s ease, border-color .35s ease, filter .35s ease;
}

.menu-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #737776;
    background-image:
        linear-gradient(125deg, rgba(255,255,255,.16), transparent 30%, rgba(0,0,0,.28)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70' viewBox='0 0 160 70'%3E%3Cpath d='M0 1H160M0 35H160M0 69H160M80 1V35M40 35V69M120 35V69' fill='none' stroke='%23323535' stroke-width='4'/%3E%3C/svg%3E");
    clip-path: polygon(0 0, 88% 0, 100% 18%, 91% 35%, 100% 54%, 90% 76%, 100% 100%, 0 100%);
    transform: translateX(-103%);
    transition: transform .48s steps(7, end);
}
.menu-item:hover, .menu-item:focus-visible { color: #fff; padding-left: 25px; border-color: rgba(225,230,227,.48); filter: brightness(1.08); outline: 0; }
.menu-item:hover::before, .menu-item:focus-visible::before { transform: translateX(0); }
.menu-item > span { position: relative; z-index: 1; }
.menu-item__number { color: #b7bcba; font-size: 9px; letter-spacing: .18em; transition: color .3s; }
.menu-item:hover .menu-item__number, .menu-item:focus-visible .menu-item__number { color: #e3e6e4; }
.menu-item__label { font: 600 21px/1 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.menu-item__icon { font-size: 22px; font-weight: 300; transition: transform .25s; }
.menu-item:hover .menu-item__icon { transform: translateX(5px); }

.modal {
    width: min(560px, calc(100% - 32px));
    padding: 0;
    border: 1px solid rgba(200,255,82,.25);
    color: var(--ink);
    background: rgba(5, 16, 23, .92);
    box-shadow: 0 35px 100px rgba(0,0,0,.55);
    backdrop-filter: blur(24px);
}
.modal::backdrop { background: rgba(1, 6, 10, .76); backdrop-filter: blur(6px); }
.modal[open] { animation: reveal .3s ease both; }
.modal__content { position: relative; padding: clamp(30px, 6vw, 56px); }
.modal h2 { margin: 0 0 34px; font: 600 42px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.modal__close { position: absolute; top: 18px; right: 20px; border: 0; color: var(--muted); background: transparent; font-size: 28px; cursor: pointer; }
.modal__close:hover { color: var(--accent); }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.guide-grid div { padding: 20px; background: #0a1921; }
kbd { color: var(--accent); font: 600 12px "Space Grotesk", sans-serif; letter-spacing: .12em; }
.guide-grid p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.modal__hint { margin: 26px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.credits-list { margin: 0; }
.credits-list div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.credits-list div:last-child { border-bottom: 1px solid var(--line); }
.credits-list dt { color: var(--muted); font-size: 12px; }
.credits-list dd { margin: 0; font: 500 14px "Space Grotesk", sans-serif; }

.dialogue-screen {
    position: fixed;
    inset: 0;
    z-index: 18;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background:
        linear-gradient(180deg, rgba(28, 9, 5, .12), rgba(10, 5, 4, .58)),
        url("assets/bg.webp") center / cover no-repeat;
    transition: opacity .4s ease, visibility .4s ease;
    cursor: pointer;
}

.dialogue-screen[hidden] { display: none; }

.dialogue-screen.is-active {
    visibility: visible;
    opacity: 1;
}

.dialogue-scene {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.dialogue-skip {
    position: absolute;
    z-index: 6;
    top: clamp(16px, 2.5vw, 30px);
    right: clamp(16px, 2.5vw, 34px);
    padding: 9px 14px;
    border: 1px solid rgba(255, 211, 167, .3);
    border-radius: 8px;
    color: #fff;
    background: #9a451d;
    box-shadow: 0 7px 18px rgba(55, 18, 4, .28);
    font: 700 11px "Space Grotesk", sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.dialogue-skip:hover,
.dialogue-skip:focus-visible {
    background: #bd5a25;
    box-shadow: 0 9px 24px rgba(55, 18, 4, .4);
    transform: translateY(-1px);
    outline: 2px solid rgba(255, 230, 202, .6);
    outline-offset: 2px;
}

.dialogue-scene::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 21%;
    border-top: 3px solid rgba(255, 218, 164, .42);
    background:
        linear-gradient(180deg, rgba(91, 73, 58, .25), rgba(21, 15, 13, .92)),
        repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, .22) 119px 122px);
    box-shadow: 0 -28px 70px rgba(61, 21, 8, .2);
}

.dialogue-character {
    position: absolute;
    z-index: 1;
    bottom: 6%;
    width: min(31vw, 390px);
    height: min(66vh, 650px);
    margin: 0;
    opacity: .72;
    filter: saturate(.72) brightness(.72);
    transition: opacity .28s ease, filter .28s ease, transform .28s ease;
}

.dialogue-character--peter { left: clamp(2%, 7vw, 10%); }
.dialogue-character--lord { right: clamp(2%, 7vw, 10%); }

.dialogue-character img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .58));
    transform-origin: center bottom;
}

.dialogue-character--lord img { transform: scaleX(-1); }

.dialogue-character figcaption {
    position: absolute;
    right: 14%;
    bottom: 0;
    left: 14%;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    background: rgba(19, 13, 11, .76);
    text-align: center;
    text-transform: uppercase;
    font: 700 clamp(9px, 1vw, 12px) "Space Grotesk", sans-serif;
    letter-spacing: .16em;
}

.dialogue-character.is-speaking {
    opacity: 1;
    filter: saturate(1.05) brightness(1.04);
    transform: translateY(-7px) scale(1.025);
}

.dialogue-bubble {
    position: absolute;
    z-index: 3;
    top: auto;
    bottom: clamp(18px, 3vh, 34px);
    width: min(560px, 44vw);
    min-height: 190px;
    padding: clamp(22px, 3vw, 34px);
    border: 3px solid #271b16;
    border-radius: 28px;
    color: #201712;
    background: rgba(255, 251, 235, .96);
    box-shadow: 9px 11px 0 rgba(31, 19, 14, .52), 0 25px 70px rgba(23, 8, 4, .32);
    transition: left .35s ease, right .35s ease;
}

.dialogue-bubble.is-peter {
    left: clamp(16px, 3vw, 48px);
    right: auto;
}

.dialogue-bubble.is-lord {
    right: clamp(16px, 3vw, 48px);
    left: auto;
}

.dialogue-bubble > span {
    display: block;
    margin-bottom: 12px;
    color: #b3232e;
    font: 700 12px "Space Grotesk", sans-serif;
    letter-spacing: .16em;
}

.dialogue-bubble.is-peter > span { color: #126fa9; }

.dialogue-bubble p {
    margin: 0;
    font: 600 clamp(15px, 1.45vw, 20px)/1.48 "Space Grotesk", sans-serif;
}

.dialogue-bubble__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.dialogue-bubble__footer small {
    color: #84746c;
    font: 700 10px "Space Grotesk", sans-serif;
    letter-spacing: .14em;
}

.dialogue-bubble__footer button {
    padding: 10px 16px;
    border: 1px solid #3a2a22;
    color: #fff;
    background: #3a2a22;
    font: 700 12px "Space Grotesk", sans-serif;
    cursor: pointer;
}

.dialogue-bubble__footer button:hover,
.dialogue-bubble__footer button:focus-visible {
    background: #b3232e;
    outline: 3px solid rgba(179, 35, 46, .24);
}

.dialogue-bubble.is-peter.is-changing { animation: dialogue-from-left .36s cubic-bezier(.2, .8, .2, 1) both; }
.dialogue-bubble.is-lord.is-changing { animation: dialogue-from-right .36s cubic-bezier(.2, .8, .2, 1) both; }

.gaga-screen {
    position: fixed;
    inset: 0;
    z-index: 19;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(circle at 78% 35%, rgba(235, 57, 147, .16), transparent 30%),
        linear-gradient(180deg, rgba(23, 7, 13, .28), rgba(12, 5, 5, .7));
    backdrop-filter: saturate(.75) brightness(.72) blur(2px);
    transition: opacity .4s ease, visibility .4s ease;
}

.gaga-screen[hidden],
.gaga-quiz[hidden],
.gaga-panel [hidden] { display: none; }

.gaga-screen.is-active {
    visibility: visible;
    opacity: 1;
}

.gaga-scene {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.gaga-character {
    position: absolute;
    z-index: 1;
    bottom: 3%;
    width: min(31vw, 390px);
    height: min(74vh, 720px);
    margin: 0;
    opacity: .64;
    filter: saturate(.72) brightness(.72);
    transition: opacity .28s ease, filter .28s ease, transform .28s ease;
}

.gaga-character--peter { left: clamp(1%, 5vw, 8%); }
.gaga-character--lady { right: clamp(1%, 5vw, 8%); }

.gaga-character--lady:not(.is-summoned) {
    visibility: hidden;
    opacity: 0;
    transform: scale(.45);
}

.gaga-character--lady.is-summoned {
    visibility: visible;
    animation: gaga-summon-character .72s cubic-bezier(.16, .82, .3, 1.2);
}

.gaga-character img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .62));
}

.gaga-character figcaption {
    position: absolute;
    right: 15%;
    bottom: 0;
    left: 15%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    background: rgba(26, 8, 17, .78);
    text-align: center;
    text-transform: uppercase;
    font: 700 10px "Space Grotesk", sans-serif;
    letter-spacing: .14em;
}

.gaga-character.is-speaking {
    opacity: 1;
    filter: saturate(1.05) brightness(1.04);
    transform: translateY(-6px) scale(1.025);
}

.gaga-summon-burst {
    position: absolute;
    z-index: 2;
    right: clamp(4%, 13vw, 18%);
    bottom: 21%;
    width: clamp(160px, 28vw, 390px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle, #fff 0 5%, #ffb2dc 6% 12%, transparent 30%),
        conic-gradient(from 10deg, transparent 0 5%, #fff 6% 8%, transparent 9% 17%, #ec4d9d 18% 21%, transparent 22% 34%, #fff 35% 37%, transparent 38% 53%, #d92d78 54% 58%, transparent 59% 74%, #fff 75% 78%, transparent 79%);
    filter: drop-shadow(0 0 22px rgba(255, 82, 170, .9));
}

.gaga-summon-burst::before,
.gaga-summon-burst::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,.95) 0 12%, transparent 13%),
        radial-gradient(circle at 70% 22%, rgba(255,255,255,.8) 0 16%, transparent 17%),
        radial-gradient(circle at 76% 70%, rgba(229,76,145,.82) 0 18%, transparent 19%),
        radial-gradient(circle at 31% 74%, rgba(255,183,220,.9) 0 20%, transparent 21%);
    filter: blur(3px);
}

.gaga-summon-burst::before { inset: 12%; }
.gaga-summon-burst::after { inset: -10%; transform: rotate(37deg); }

.gaga-summon-burst.is-active { animation: gaga-summon-explosion .95s ease-out both; }

.gaga-panel {
    position: absolute;
    z-index: 4;
    bottom: clamp(18px, 3vh, 34px);
    width: min(650px, 55vw);
    max-height: min(66vh, 610px);
    overflow-y: auto;
    padding: clamp(22px, 3vw, 34px);
    border: 3px solid #27141f;
    border-radius: 24px;
    color: #251520;
    background: rgba(255, 248, 244, .97);
    box-shadow: 9px 11px 0 rgba(38, 10, 25, .48), 0 25px 70px rgba(21, 4, 12, .38);
}

.gaga-panel.is-peter { left: clamp(16px, 3vw, 48px); }
.gaga-panel.is-gaga { right: clamp(16px, 3vw, 48px); }

.gaga-panel__speaker {
    display: block;
    margin-bottom: 12px;
    color: #ce276d;
    font: 700 12px "Space Grotesk", sans-serif;
    letter-spacing: .16em;
}

.gaga-panel.is-peter .gaga-panel__speaker { color: #126fa9; }

.gaga-panel__text,
.gaga-quiz__question {
    margin: 0;
    font: 600 clamp(15px, 1.45vw, 20px)/1.48 "Space Grotesk", sans-serif;
}

.gaga-quiz__answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.gaga-quiz__answers button {
    min-height: 54px;
    padding: 11px 13px;
    border: 1px solid rgba(74, 24, 51, .3);
    border-radius: 9px;
    color: #35202d;
    background: #f6e9ef;
    text-align: left;
    font: 600 13px/1.35 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.gaga-quiz__answers button:hover:not(:disabled),
.gaga-quiz__answers button:focus-visible:not(:disabled) {
    border-color: #ce276d;
    background: #fff;
    transform: translateY(-1px);
    outline: none;
}

.gaga-quiz__answers button.is-correct {
    border-color: #199251;
    color: #0b6636;
    background: #dff7e9;
}

.gaga-quiz__answers button.is-wrong {
    border-color: #c9253c;
    color: #861326;
    background: #ffe1e4;
}

.gaga-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
}

.gaga-panel__footer small {
    color: #8b7180;
    font: 700 10px "Space Grotesk", sans-serif;
    letter-spacing: .13em;
}

.gaga-panel__footer button {
    padding: 10px 16px;
    border: 1px solid #6e173e;
    border-radius: 7px;
    color: #fff;
    background: #9f2056;
    font: 700 12px "Space Grotesk", sans-serif;
    cursor: pointer;
}

.gaga-panel__footer button:hover,
.gaga-panel__footer button:focus-visible {
    background: #cb2b6f;
    outline: 3px solid rgba(203, 43, 111, .22);
}

.gaga-panel.is-changing { animation: gaga-panel-in .34s cubic-bezier(.2, .8, .2, 1) both; }

.gaga-screen.is-failure::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -8%;
    left: 0;
    height: 48%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 100%, #fff46a 0 4%, #ff6b0b 12%, transparent 29%),
        radial-gradient(ellipse at 46% 105%, #ffe84a 0 5%, #ee3b0a 16%, transparent 34%),
        radial-gradient(ellipse at 78% 100%, #fff46a 0 4%, #ff5b08 14%, transparent 31%);
    filter: drop-shadow(0 -8px 18px rgba(255, 56, 7, .72));
    animation: gaga-fire-rise .55s ease-in-out infinite alternate;
}

.gaga-screen.is-failure .gaga-character--peter {
    animation: gaga-player-fall 1.2s .2s ease-in both;
}

.game-screen {
    --platform-height: clamp(70px, 9vw, 120px);
    position: fixed;
    inset: 0;
    z-index: 15;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(ellipse at 50% 35%, #fff 0%, #f1f3f4 52%, #d7dcdf 100%);
    transition: opacity .45s ease, visibility .45s ease;
}

.game-screen.is-active {
    visibility: visible;
    opacity: 1;
}

.game-screen.is-cutscene .player,
.game-screen.is-cutscene .player-health-floating,
.game-screen.is-cutscene .player-fire-origin,
.game-screen.is-cutscene .aim-cursor,
.game-screen.is-cutscene .combat-layer {
    visibility: hidden;
    opacity: 0;
}

.panorama-track {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    display: flex;
    height: 100%;
    overflow: hidden;
    will-change: transform;
}

.panorama-track::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 247, 211, .04), transparent 45%, rgba(43, 10, 4, .18)),
        radial-gradient(ellipse at center, transparent 45%, rgba(72, 21, 8, .13) 100%);
}

.panorama-tile {
    flex: 0 0 auto;
    height: 100%;
    background: url("assets/bg.webp") center / 100% 100% no-repeat;
    backface-visibility: hidden;
}

.panorama-tile.is-mirrored { transform: scaleX(-1); }

.platform {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    height: var(--platform-height);
    border: 2px solid #555a5d;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background-color: #777b7c;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.2), transparent 15%, rgba(0,0,0,.34)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='76' viewBox='0 0 220 76'%3E%3Cpath d='M0 1H220M0 38H220M0 75H220M110 1V38M55 38V75M165 38V75' fill='none' stroke='%23474b4d' stroke-width='4'/%3E%3C/svg%3E");
    box-shadow: inset 0 8px 15px rgba(255,255,255,.14), inset 0 -18px 24px rgba(0,0,0,.25);
    will-change: transform;
}

.platform::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: -28px;
    left: 2%;
    height: 35px;
    border-radius: 50%;
    background: rgba(23, 27, 30, .35);
    filter: blur(14px);
}

.player {
    --player-x: 0px;
    --player-y: 0px;
    --direction: 1;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: clamp(51px, 6.6vw, 88px);
    height: min(32.5vh, 330px);
    width: auto;
    user-select: none;
    pointer-events: none;
    transform: translate3d(var(--player-x), var(--player-y), 0) scaleX(var(--direction));
    transform-origin: center bottom;
    will-change: transform;
}

.abyss {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: clamp(200px, 28vw, 360px);
    clip-path: polygon(
        0 calc(100% - var(--platform-height)),
        2% calc(100% - var(--platform-height) - 7px),
        4% calc(100% - var(--platform-height) + 9px),
        6% calc(100% - var(--platform-height) - 3px),
        9% calc(100% - var(--platform-height) + 16px),
        13% calc(100% - var(--platform-height) + 5px),
        18% calc(100% - var(--platform-height) + 19px),
        25% calc(100% - var(--platform-height) + 7px),
        34% calc(100% - var(--platform-height) + 15px),
        45% calc(100% - var(--platform-height) + 4px),
        58% calc(100% - var(--platform-height) + 13px),
        72% calc(100% - var(--platform-height) + 3px),
        86% calc(100% - var(--platform-height) + 14px),
        100% calc(100% - var(--platform-height) + 7px),
        100% 100%,
        0 100%
    );
    background:
        radial-gradient(ellipse at 22% 68%, rgba(224, 66, 25, .2), transparent 26%),
        radial-gradient(ellipse at 70% 88%, rgba(107, 17, 18, .2), transparent 32%),
        linear-gradient(180deg, #29201e 0%, #100b0c 35%, #020303 100%);
    box-shadow: inset 24px 0 34px rgba(0, 0, 0, .82), 0 -10px 36px rgba(47, 11, 7, .28);
    will-change: transform;
}

.abyss::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 76px;
    height: var(--platform-height);
    clip-path: polygon(0 0, 72% 0, 94% 13%, 69% 27%, 87% 42%, 57% 58%, 75% 73%, 48% 88%, 54% 100%, 0 100%);
    border-top: 2px solid #777d7f;
    background-color: #6d7172;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.2), transparent 15%, rgba(0,0,0,.42)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='120' viewBox='0 0 76 120'%3E%3Cpath d='M0 1H76M0 52H67M0 92H48M38 1V52M24 52V92' fill='none' stroke='%23474b4d' stroke-width='4'/%3E%3C/svg%3E");
    box-shadow: inset -15px 0 18px rgba(12, 12, 13, .62);
}

.abyss::after {
    content: "";
    position: absolute;
    right: 5%;
    bottom: -35%;
    left: 3%;
    height: 65%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(151, 31, 18, .18), rgba(24, 5, 5, .08) 42%, transparent 72%);
    filter: blur(14px);
}

.gaga-bridge {
    position: absolute;
    z-index: 2;
    bottom: calc(var(--platform-height) + 6px);
    left: 0;
    display: flex;
    gap: 2px;
    width: clamp(155px, 15vw, 205px);
    height: 34px;
    padding: 4px 6px;
    border: 4px solid #3e2817;
    border-radius: 8px;
    background: #5d3a20;
    box-shadow: 0 15px 22px rgba(0, 0, 0, .5), inset 0 3px rgba(255, 215, 154, .22);
    transform-origin: left center;
    will-change: transform;
    animation: bridge-arrival .8s cubic-bezier(.2, .8, .2, 1) both;
}

.gaga-bridge[hidden] { display: none; }

.gaga-bridge.is-waiting::before {
    content: "VYSKOČ NA DREVO";
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 232, 193, .35);
    border-radius: 6px;
    color: #fff;
    background: rgba(64, 34, 15, .86);
    box-shadow: 0 5px 15px rgba(0,0,0,.3);
    font: 700 9px "Space Grotesk", sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: fire-origin-pulse .75s ease-in-out infinite alternate;
}

.gaga-bridge span {
    flex: 1;
    border: 1px solid #513119;
    border-radius: 3px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.1), transparent 22%, rgba(45, 22, 7, .2)),
        repeating-linear-gradient(0deg, #9a6537 0 7px, #86542c 8px 10px);
    box-shadow: inset 0 0 8px rgba(42, 20, 7, .24);
}

.gaga-bridge span:nth-child(2n) { transform: translateY(2px) rotate(.7deg); }
.gaga-bridge span:nth-child(3n) { transform: translateY(-2px) rotate(-.6deg); }

.second-platform {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 185vw;
    height: var(--platform-height);
    border: 2px solid #555a5d;
    background-color: #777b7c;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.2), transparent 15%, rgba(0,0,0,.34)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='76' viewBox='0 0 220 76'%3E%3Cpath d='M0 1H220M0 38H220M0 75H220M110 1V38M55 38V75M165 38V75' fill='none' stroke='%23474b4d' stroke-width='4'/%3E%3C/svg%3E");
    box-shadow: inset 0 8px 15px rgba(255,255,255,.14), inset 0 -18px 24px rgba(0,0,0,.25);
    will-change: transform;
}

.second-platform[hidden] { display: none; }

.lord-placeholder {
    position: absolute;
    width: clamp(125px, 13vw, 185px);
    height: clamp(205px, 30vh, 310px);
    pointer-events: none;
    will-change: transform;
}

.lord-placeholder__sprite {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 17px 17px rgba(49, 5, 15, .44));
    transform: scaleX(-1);
    transform-origin: center bottom;
    user-select: none;
}

.lord-placeholder.is-hit .lord-placeholder__sprite { animation: enemy-hit .18s linear; }

.player.is-hit { animation: player-hit .26s linear; }

.combat-layer {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.health-track {
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(5, 18, 27, .32);
    background: rgba(8, 19, 27, .2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}

.player-health-floating {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: clamp(72px, 7vw, 96px);
    height: 8px;
    border-color: rgba(4, 21, 31, .62);
    background: rgba(7, 19, 27, .62);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .38), inset 0 1px 3px rgba(0, 0, 0, .38);
    pointer-events: none;
    will-change: transform;
}

.health-track > span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #24aef4, #73dbff);
    box-shadow: 0 0 10px rgba(33, 183, 255, .65);
    transform-origin: left center;
    transition: width .2s ease, background .2s ease;
}

.health-track.is-critical > span {
    background: linear-gradient(90deg, #d52d3f, #ff6c55);
    box-shadow: 0 0 10px rgba(226, 48, 61, .58);
}

.gmail-enemy {
    position: absolute;
    width: clamp(72px, 8.5vw, 116px);
    aspect-ratio: 1;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 14px 17px rgba(62, 15, 21, .25));
}

.game-screen { cursor: none; }

.aim-cursor {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid rgba(32, 156, 255, .95);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(32, 156, 255, .8), inset 0 0 8px rgba(32, 156, 255, .25);
    pointer-events: none;
    will-change: transform;
}

.aim-cursor::before,
.aim-cursor::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #75d8ff;
    box-shadow: 0 0 7px #168bff;
    transform: translate(-50%, -50%);
}

.aim-cursor::before { width: 42px; height: 1px; }
.aim-cursor::after { width: 1px; height: 42px; }

.gmail-enemy::after {
    content: "";
    position: absolute;
    inset: 8% 10%;
    z-index: -1;
    border-radius: 50%;
    background: rgba(223, 36, 49, .19);
    filter: blur(20px);
}

.gmail-enemy__sprite {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.player-fire-origin {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 8%, #79eaff 28%, #168bff 58%, rgba(22, 139, 255, .08) 72%);
    box-shadow: 0 0 8px #7ce9ff, 0 0 18px #168bff, 0 0 32px rgba(20, 103, 255, .8);
    pointer-events: none;
    will-change: transform;
    animation: fire-origin-pulse .75s ease-in-out infinite alternate;
}

.gmail-enemy__health {
    position: absolute;
    right: 10%;
    bottom: -4px;
    left: 10%;
    height: 7px;
    border: 1px solid rgba(70, 6, 14, .55);
    background: rgba(42, 5, 11, .35);
    box-shadow: 0 3px 8px rgba(41, 8, 13, .24);
}

.gmail-enemy__health span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #d71f37, #ff6b62);
    transform-origin: left center;
    transition: width .16s ease;
}

.gmail-enemy.is-hit .gmail-enemy__sprite { animation: enemy-hit .18s linear; }
.gmail-enemy.is-dead { pointer-events: none; }

.fire-obstacle {
    position: absolute;
    z-index: 4;
    bottom: clamp(70px, 9vw, 120px);
    left: 0;
    width: 52px;
    height: 68px;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 50, 5, .62));
    will-change: transform;
}

.fire-obstacle::before {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -8px;
    left: -10px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 87, 10, .58), rgba(150, 19, 8, .2) 45%, transparent 72%);
    filter: blur(5px);
    animation: fire-glow .55s ease-in-out infinite alternate;
}

.fire-obstacle__flame {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    height: 62px;
    clip-path: polygon(52% 0, 64% 22%, 79% 10%, 75% 39%, 96% 51%, 85% 78%, 68% 98%, 31% 100%, 10% 80%, 2% 55%, 22% 37%, 26% 16%, 42% 31%);
    background:
        radial-gradient(ellipse at 50% 83%, #ffbb16 0 14%, #f05a0c 39%, transparent 67%),
        linear-gradient(180deg, #ffb315 2%, #f04a09 46%, #991419 82%, #3b0b11 100%);
    transform-origin: center bottom;
    animation: flame-flicker .38s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.fire-obstacle__flame::before,
.fire-obstacle__flame::after {
    content: "";
    position: absolute;
    bottom: 3px;
    border-radius: 52% 48% 48% 52%;
    transform-origin: center bottom;
}

.fire-obstacle__flame::before {
    left: 7px;
    width: 18px;
    height: 43px;
    background: linear-gradient(180deg, #ffdb36, #ff7b0e 54%, #cf2510);
    clip-path: polygon(55% 0, 100% 51%, 79% 100%, 14% 96%, 0 55%);
    animation: flame-tongue-left .29s ease-in-out infinite alternate;
}

.fire-obstacle__flame::after {
    right: 6px;
    width: 17px;
    height: 49px;
    background: linear-gradient(180deg, #ffe85b, #ff850f 48%, #e5320c);
    clip-path: polygon(42% 0, 100% 57%, 83% 100%, 8% 94%, 0 45%);
    animation: flame-tongue-right .34s ease-in-out infinite alternate-reverse;
}

.fire-obstacle__core {
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 7px;
    left: 15px;
    height: 31px;
    clip-path: polygon(51% 0, 89% 43%, 100% 76%, 73% 100%, 26% 98%, 0 72%, 14% 38%);
    background: linear-gradient(180deg, #fffde2 0 18%, #fff47a 35%, #ffc21c 65%, #ff710c 100%);
    box-shadow: 0 0 8px #ffe449, 0 0 15px rgba(255, 108, 8, .8);
    transform-origin: center bottom;
    animation: flame-core .24s ease-in-out infinite alternate-reverse;
}

.fire-obstacle__embers {
    position: absolute;
    z-index: 3;
    right: 5px;
    bottom: 0;
    left: 5px;
    height: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 16% 52%, #ff8b1a 0 4px, #561414 4.5px 7px, transparent 7.5px),
        radial-gradient(circle at 42% 45%, #ffc229 0 3px, #6a1710 3.5px 7px, transparent 7.5px),
        radial-gradient(circle at 68% 55%, #ff6a12 0 4px, #4b1011 4.5px 8px, transparent 8.5px),
        radial-gradient(circle at 88% 43%, #ffb120 0 3px, #591213 3.5px 6px, transparent 6.5px);
    filter: drop-shadow(0 0 4px #ff5a0b);
}

.fire-obstacle::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 24px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff8b16;
    box-shadow: -15px 12px #ff4b10, 13px -9px #ffc329, 18px 14px #ef310e, -8px -14px #ff9c1b;
    animation: fire-sparks .78s ease-out infinite;
}

.magic-shot,
.enemy-shot,
.lord-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.magic-shot {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 37% 34%, #fff 0 10%, #7ce9ff 28%, #168bff 58%, #113cce 100%);
    box-shadow: 0 0 8px #43d7ff, 0 0 19px #168bff, 0 0 35px rgba(20, 103, 255, .65);
}

.magic-shot::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 9px;
    width: 34px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(34, 154, 255, .75));
    filter: blur(3px);
}

.enemy-shot {
    width: 25px;
    height: 18px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .78));
    mix-blend-mode: screen;
}

.enemy-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.lord-orb {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 170, 170, .78);
    background:
        radial-gradient(circle at 34% 30%, #fff 0 5%, #ff9b91 9%, #f12638 30%, #a40820 64%, #42030d 100%);
    box-shadow:
        0 0 9px #ff6970,
        0 0 23px rgba(238, 24, 49, .9),
        0 0 42px rgba(170, 2, 31, .58),
        inset -5px -6px 9px rgba(46, 0, 7, .62);
    animation: lord-orb-pulse .42s ease-in-out infinite alternate;
}

.lord-orb::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(255, 53, 73, .44);
    border-radius: 50%;
    animation: spin 1.1s linear infinite;
}

.impact-burst {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 3px solid #43cfff;
    border-radius: 50%;
    box-shadow: 0 0 18px #168bff;
    animation: impact-burst .34s ease-out both;
    pointer-events: none;
}

.impact-burst--red {
    border-color: #ff3d4f;
    box-shadow: 0 0 18px #e52238;
}

.combat-result {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    color: #102330;
    background: rgba(233, 240, 243, .72);
    backdrop-filter: blur(8px);
}

.combat-result[hidden] { display: none; }
.combat-result p { margin: 0 0 12px; color: #167db8; font: 700 11px "Space Grotesk"; letter-spacing: .18em; }
.combat-result h2 { margin: 0 0 28px; font: 700 clamp(48px, 8vw, 92px)/.9 "Space Grotesk"; letter-spacing: -.06em; }
.combat-result button {
    min-width: 190px;
    padding: 14px 24px;
    border: 1px solid #123b52;
    color: #fff;
    background: #12699c;
    cursor: pointer;
    font: 600 15px "Space Grotesk";
}
.combat-result button:hover { background: #0e86c9; }
.combat-result span { margin-top: 14px; color: #60737d; font-size: 10px; letter-spacing: .12em; }
.combat-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.launch-screen {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-content: center;
    justify-items: center;
    background: #050d13;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s, visibility .6s;
}
.launch-screen.is-active { opacity: 1; visibility: visible; }
.launch-screen__ring { width: 62px; height: 62px; border: 1px solid rgba(200,255,82,.22); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
.launch-screen p { margin: 24px 0 7px; color: var(--accent); font: 600 13px "Space Grotesk"; letter-spacing: .18em; text-transform: uppercase; }
.launch-screen span { color: var(--muted); font-size: 11px; }

@keyframes drift { to { transform: translate3d(4%, 3%, 0); } }
@keyframes reveal { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes dialogue-from-left {
    from { opacity: .15; transform: translate(-42px, 12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dialogue-from-right {
    from { opacity: .15; transform: translate(42px, 12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gaga-panel-in {
    from { opacity: .15; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gaga-summon-character {
    0% { opacity: 0; transform: scale(.35) rotate(-9deg); filter: brightness(3) blur(8px); }
    58% { opacity: 1; transform: scale(1.1) rotate(2deg); filter: brightness(1.45) blur(0); }
    100% { opacity: .78; transform: scale(1) rotate(0); filter: saturate(.8) brightness(.8); }
}
@keyframes gaga-summon-explosion {
    0% { opacity: 0; transform: scale(.08) rotate(-18deg); }
    18% { opacity: 1; }
    62% { opacity: .92; transform: scale(1.25) rotate(7deg); }
    100% { opacity: 0; transform: scale(1.75) rotate(18deg); filter: blur(5px); }
}
@keyframes gaga-fire-rise {
    from { opacity: .76; transform: translateY(18px) scaleX(.97); }
    to { opacity: 1; transform: translateY(0) scaleX(1.04); }
}
@keyframes gaga-player-fall {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    45% { transform: translate(18px, 24px) rotate(8deg); opacity: 1; }
    100% { transform: translate(46px, 72vh) rotate(24deg); opacity: .2; }
}
@keyframes bridge-arrival {
    from { opacity: 0; filter: blur(6px) brightness(1.8); }
    to { opacity: 1; filter: none; }
}
@keyframes lord-orb-pulse {
    from { filter: brightness(.88); scale: .94; }
    to { filter: brightness(1.18); scale: 1.06; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes storm-pulse {
    0%, 11%, 14%, 45%, 47%, 100% { filter: brightness(1); }
    12%, 46% { filter: brightness(1.35) contrast(1.04); }
    12.7% { filter: brightness(.92); }
    13.3% { filter: brightness(1.65) contrast(1.08); }
}
@keyframes lightning-flash {
    0%, 11.8%, 12.4%, 13%, 13.8%, 45.8%, 46.5%, 100% { opacity: 0; }
    12%, 13.2% { opacity: .58; }
    46% { opacity: .42; }
}
@keyframes enemy-hit {
    0%, 100% { transform: translateX(0); filter: brightness(1); }
    30% { transform: translateX(-9px); filter: brightness(1.8) saturate(.3); }
    65% { transform: translateX(8px); }
}
@keyframes player-hit {
    0%, 100% { filter: none; }
    35% { filter: brightness(1.8) sepia(1) saturate(5) hue-rotate(320deg); }
    70% { filter: brightness(.72); }
}
@keyframes fire-origin-pulse {
    from {
        opacity: .55;
        box-shadow: 0 0 5px #7ce9ff, 0 0 11px #168bff, 0 0 19px rgba(20, 103, 255, .55);
    }
    to {
        opacity: 1;
        box-shadow: 0 0 11px #fff, 0 0 25px #31bfff, 0 0 46px rgba(20, 103, 255, .95);
    }
}
@keyframes flame-flicker {
    from { transform: scale(.94, 1.03) skewX(-2deg) rotate(-1.5deg); filter: brightness(.92); }
    to { transform: scale(1.04, .95) skewX(2deg) rotate(1.5deg); filter: brightness(1.13); }
}
@keyframes flame-core {
    from { transform: scale(.88, 1.04) translateY(0); }
    to { transform: scale(1.06, .9) translateY(2px); }
}
@keyframes flame-tongue-left {
    from { transform: scale(.82, 1.04) rotate(-7deg) translateY(2px); opacity: .82; }
    to { transform: scale(1.06, .86) rotate(5deg) translateY(-2px); opacity: 1; }
}
@keyframes flame-tongue-right {
    from { transform: scale(.9, .92) rotate(6deg) translateY(1px); opacity: .78; }
    to { transform: scale(1.08, 1.08) rotate(-4deg) translateY(-3px); opacity: 1; }
}
@keyframes fire-glow {
    from { opacity: .48; transform: scaleX(.88); }
    to { opacity: .8; transform: scaleX(1.08); }
}
@keyframes fire-sparks {
    from { opacity: 0; transform: translate(0, 18px) scale(.45); }
    28% { opacity: 1; }
    to { opacity: 0; transform: translate(4px, -27px) scale(1.05); }
}
@keyframes impact-burst { to { opacity: 0; transform: scale(3.8); } }

@media (max-width: 640px) {
    .menu-shell { padding: 22px 20px 18px; }
    .music-toggle { top: 20px; right: 20px; }
    .hero { padding-bottom: 5vh; }
    h1 { width: min(100%, 520px); }
    .tagline { max-width: 280px; line-height: 1.55; }
    .menu-item { height: 66px; }
    .platform { right: auto; left: 0; }
    .player { height: min(29.5vh, 260px); }
    .gmail-enemy { width: clamp(58px, 19vw, 88px); }
    .fire-obstacle { width: 42px; height: 58px; }
    .dialogue-character {
        bottom: 2%;
        width: 43vw;
        height: 46vh;
    }
    .dialogue-character--peter { left: -2vw; }
    .dialogue-character--lord { right: -2vw; }
    .dialogue-bubble,
    .dialogue-bubble.is-peter,
    .dialogue-bubble.is-lord {
        top: auto;
        right: 16px;
        bottom: 14px;
        left: 16px;
        width: auto;
        min-height: 0;
        max-height: 40vh;
        padding: 19px;
        overflow-y: auto;
    }
    .dialogue-bubble p { font-size: clamp(13px, 3.6vw, 16px); line-height: 1.4; }
    .gaga-character {
        bottom: 2%;
        width: 43vw;
        height: 48vh;
    }
    .gaga-character--peter { left: -2vw; }
    .gaga-character--lady { right: -2vw; }
    .gaga-panel,
    .gaga-panel.is-peter,
    .gaga-panel.is-gaga {
        right: 14px;
        bottom: 12px;
        left: 14px;
        width: auto;
        max-height: 52vh;
        padding: 18px;
    }
    .gaga-panel__text,
    .gaga-quiz__question { font-size: clamp(13px, 3.7vw, 16px); }
    .gaga-quiz__answers { grid-template-columns: 1fr; gap: 7px; }
    .gaga-quiz__answers button { min-height: 43px; padding: 9px 11px; font-size: 12px; }
    .gaga-bridge { width: 150px; height: 30px; }
    .sky {
        background:
            linear-gradient(90deg, rgba(2, 6, 10, .9) 0%, rgba(2, 6, 10, .48) 100%),
            linear-gradient(180deg, rgba(3, 8, 12, .08), rgba(3, 8, 12, .45)),
            url("assets/menu_bg.webp") 58% center / cover no-repeat;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}