/* ==========================================================
   ChocoHunters – stylesheet
   Desktop (>= 1280px) reproduces the original layout 1:1,
   smaller screens get a stacked mobile layout of the same markup.
   ========================================================== */

@font-face {
    font-family: "Acme-Regular";
    src: url("../assets/fonts/acme-regular.woff2") format("woff2");
    font-display: swap;
}

:root {
    --ink: #856f65;
    --blue: #6aa1c6;
    --night: #261108;
    --footer: #2d1f19;
    --copper: #b4683a;
    --font: "Acme-Regular", Arial, sans-serif;
    --serif: "ACaslonPro-Bold", "Times New Roman", serif;
}

* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-weight: normal;
    font-size: 1.3em;
    color: var(--ink);
    background: var(--night);
    overflow-x: clip;
}

img { border: 0; }
a { color: var(--ink); }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: normal; font-size: 1em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 2000;
    padding: 8px 16px; background: #fff; border-radius: 8px;
}
.skip-link:focus { top: 8px; }

.center { text-align: center; }
.sprite { display: inline-block; overflow: hidden; background-repeat: no-repeat; }
.h { display: block; font-size: 2em; font-weight: bold; }
.hp-field { position: absolute; left: -5000px; }

/* ---------- Image sprites (formerly one big items.png) ---------- */
.spyglass { width: 309px; height: 603px; background-image: url("../assets/img/spyglass.webp"); }
.map { width: 424px; height: 400px; background-image: url("../assets/img/treasure-map.webp"); }
.coins { width: 183px; height: 304px; background-image: url("../assets/img/coins.webp"); }
.lantern { width: 213px; height: 350px; background-image: url("../assets/img/lantern.webp"); }
.smallPointer { width: 150px; height: 94px; background-image: url("../assets/img/pointer.webp"); }
.hintHeader { width: 300px; height: 106px; background-image: url("../assets/img/hint-header.webp"); }
.hintContainer { width: 370px; height: 266px; background-image: url("../assets/img/hint-board.webp"); }
.bag { width: 150px; height: 132px; background-image: url("../assets/img/bag.webp"); }
.drowning { width: 130px; height: 130px; background-image: url("../assets/img/drowning.webp"); }
.goldbag { width: 150px; height: 151px; background-image: url("../assets/img/goldbag.webp"); }
.banner { width: 702px; height: 136px; background-image: url("../assets/img/banner.webp"); }
.characterNamePlate { width: 350px; height: 123px; background-image: url("../assets/img/name-plate.webp"); }
.brownBar { width: 300px; height: 17px; background-image: url("../assets/img/brown-bar.webp"); }
.silverBar { width: 631px; height: 43px; background-image: url("../assets/img/silver-bar.webp"); }
.scroll { width: 100px; height: 89px; background-image: url("../assets/img/letter.webp"); }
.eyeGlow { width: 130px; height: 129px; background-image: url("../assets/img/eye-glow.webp"); }
.flintPortrait { width: 124px; height: 125px; background-image: url("../assets/img/portraits/flint.webp"); }
.abuPortrait { width: 110px; height: 134px; background-image: url("../assets/img/portraits/abu.webp"); }
.lillyPortrait { width: 141px; height: 133px; background-image: url("../assets/img/portraits/lilly.webp"); }
.escarPortrait { width: 110px; height: 125px; background-image: url("../assets/img/portraits/escar.webp"); }
.griffonPortrait { width: 110px; height: 150px; background-image: url("../assets/img/portraits/griffon.webp"); }
.akiraPortrait { width: 132px; height: 142px; background-image: url("../assets/img/portraits/akira.webp"); }
.krakenPortrait { width: 110px; height: 126px; background-image: url("../assets/img/portraits/kraken.webp"); }
.morganPortrait { width: 124px; height: 139px; background-image: url("../assets/img/portraits/morgan.webp"); }
.mongolPortrait { width: 125px; height: 130px; background-image: url("../assets/img/portraits/mongol.webp"); }
.gnobePortrait { width: 136px; height: 126px; background-image: url("../assets/img/portraits/gnobe.webp"); }
.firaUunPortrait { width: 130px; height: 129px; background-image: url("../assets/img/portraits/firauun.webp"); }
.dragutPortrait { width: 151px; height: 131px; background-image: url("../assets/img/portraits/dragut.webp"); }

/* ---------- Shared: character picker buttons ---------- */
.characterMenu button {
    position: relative;
    border: 0;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    font: inherit;
}
.characterMenu button::before {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 2;
    display: block;
    content: "";
    width: 0; height: 0;
    background: rgba(255, 255, 255, .2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.characterMenu button:hover::before { animation: circle .75s; }
@keyframes circle {
    0%, 40% { opacity: 1; }
    100% { width: 200%; height: 200%; opacity: 0; }
}
.eyeGlow { position: absolute; z-index: 3; left: 0; top: 0; animation: eyeGlowing 2s linear infinite; }
@keyframes eyeGlowing { 50% { opacity: 0; } }

.characterImage img { display: block; max-width: none; }
.characterImage:not([hidden]) { display: grid; place-items: center; }

/* Paddle strike animation (8 frames + first frame again, 16 fps) */
.flyAction {
    width: 100px;
    height: 104px;
    background: url("../assets/img/paddle-strike.webp") 0 0 repeat-x;
    animation: paddle .5625s steps(9) infinite;
}
@keyframes paddle { to { background-position-x: -900px; } }

/* ---------- Lite YouTube ---------- */
.yt {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: #000 center / cover no-repeat;
    cursor: pointer;
}
.yt::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 68px; height: 48px;
    border-radius: 14px;
    background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 32px no-repeat;
    transition: transform .2s;
}
.yt:hover::after { transform: scale(1.1); }
.yt.is-playing::after { display: none; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
    width: min(92vw, 520px);
    max-height: 92vh;
    margin: auto;
    border: 0;
    background: transparent;
    overflow: visible;
}
.lightbox::backdrop { background: rgba(30, 30, 30, .9); }
.lightbox img { display: block; width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox__bar { display: flex; justify-content: space-between; margin-top: 10px; }
.lightbox button {
    width: 48px; height: 48px;
    border: 2px solid var(--copper);
    border-radius: 50%;
    background: var(--night);
    color: #fff;
    font: inherit;
    font-size: 1.4rem;
    cursor: pointer;
}

/* ---------- Impressum dialog (looks like the original Fancybox popup) ---------- */
.abuStance { width: 502px; height: 600px; background-image: url("../assets/img/abu-stance.webp"); }
.impressum {
    box-sizing: border-box;
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    margin: auto;
    padding: 44px;
    border: 3px solid var(--ink);
    background: #fff;
    color: #000;
    font-family: var(--font);
    overflow: auto;
}
.impressum::backdrop { background: rgba(30, 30, 30, .87); }
.impressum__close {
    position: absolute;
    top: 0; right: 0;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    color: #ccc;
    font: 32px/44px Arial, sans-serif;
    cursor: pointer;
}
.impressum__close:hover { color: #555; }
.impressum .contentHeader {
    box-sizing: border-box;
    width: min(100%, 1000px);
    height: 80px;
    margin: 0 auto 40px;
    padding: 0;
    background: url("../assets/img/header-underline.webp") no-repeat center center;
}
.impressum .contentHeaderBox { display: flex; align-items: center; justify-content: center; }
.impressum .contentHeaderLine { flex: 0 1 218px; height: 3px; background: url("../assets/img/header-line.webp") no-repeat center / 100% 100%; }
.impressum .contentHeaderText {
    margin: 0 30px;
    font: 2.2em/1 var(--serif);
    text-transform: uppercase;
    color: var(--ink);
}
.impressumContent { font-size: 1em; color: #000; }
.impressum h3 { font-size: 1.5em; font-weight: bold; }
.impressum p + h3 { margin-top: 26px; }
.impressum a { color: #000; }

/* ---------- Privacy policy pages (original look) ---------- */
.policy_wrapper {
    position: relative;
    display: block;
    background:
        url("../assets/img/scroll-top.webp") no-repeat top,
        url("../assets/img/scroll-bottom-policy.webp") no-repeat bottom,
        url("../assets/img/scroll-center.webp") repeat-y center;
    background-size: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #000;
}
.responsive_policy_logo { display: block; width: 100%; height: auto; }
.contentHeaderTextPolicy { display: inline-block; text-align: center; text-transform: uppercase; position: relative; line-height: 1; color: #000; }
.policy_wrapper h3 { font-size: 1.17em; font-weight: bold; }
.policy_wrapper a { color: #000; }

/* ==========================================================
   DESKTOP – original layout
   ========================================================== */
@media (min-width: 1280px) {

    /* The original layout is built for 1920px: scale it down proportionally on smaller desktops */
    :root { --z: min(1, tan(atan2(100vw, 1920px))); }
    body { zoom: var(--z); }

    .header { position: relative; height: calc(100vh / var(--z)); }
    .header__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .header__title, .header__lead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    /* Menu: sits at the bottom of the header and sticks to the top when scrolling */
    .menu {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 1259px;
        height: 130px;
        margin: -130px auto 0;
        background: url("../assets/img/menu-bar.webp") no-repeat center center;
        color: var(--blue);
        font-size: 1.7em;
    }
    .menu__bar, .menu__lang { display: none; }
    .enabled { position: absolute; top: 23px; padding: 20px; cursor: pointer; text-decoration: none; }
    #theGame { left: 140px; }
    #howToPlay { left: 366px; }
    #characters { left: 652px; }
    #contact { left: 938px; }
    .grow { transition: all .2s ease-in-out; color: var(--blue); }
    .grow:hover { transform: scale(1.1); color: #fff !important; }
    .grow[aria-current="true"] { color: #fff; }

    .socialMediaBar { position: fixed; top: 100px; right: 100px; width: 140px; z-index: 1000; }
    .socialMediaBar a { display: block; width: 80px; height: 80px; }
    .socialMediaBar img { display: block; transition: all .2s ease-in-out; transform: scale(.9); }
    .socialMediaBar img:hover { transform: scale(1); }

    .storeBadges { position: absolute; top: 30px; right: 350px; z-index: 1000; padding: 80px 0 0 50px; }
    .storeBadges a, .storeBadges img { display: block; }
    .storeBadges .iosPlate { margin-top: 40px; border-radius: 8px; border: 2px solid darkgray; }

    .wrapper {
        position: relative;
        display: block;
        background:
            url("../assets/img/scroll-top.webp") no-repeat top,
            url("../assets/img/scroll-bottom.webp") no-repeat bottom,
            url("../assets/img/scroll-center.webp") repeat-y center;
        background-size: 100%;
    }
    .wrapper img { vertical-align: top; }

    /* Layout helpers (formerly inline styles) */
    .contentBlock { display: flex; margin: 0 auto; width: 100%; align-items: center; }
    .contentBlock.jc { justify-content: center; text-align: left; }
    .contentContainer { display: flex; align-items: flex-start; }
    .contentContainer.ai-c { align-items: center; }
    .contentContainer.jc { justify-content: center; }
    .item { flex-shrink: 3; }
    .fb-0 { flex-basis: 0%; } .fb-2 { flex-basis: 2%; } .fb-3 { flex-basis: 3%; } .fb-5 { flex-basis: 5%; }
    .fb-10 { flex-basis: 10%; } .fb-15 { flex-basis: 15%; } .fb-17 { flex-basis: 17%; } .fb-20 { flex-basis: 20%; }
    .fb-23 { flex-basis: 23%; } .fb-24 { flex-basis: 24%; } .fb-30 { flex-basis: 30%; } .fb-37 { flex-basis: 37%; }
    .fb-45 { flex-basis: 45%; } .fb-60 { flex-basis: 60%; } .fb-75 { flex-basis: 75%; } .fb-90 { flex-basis: 90%; }
    .fb-100 { flex-basis: 100%; }
    .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-50 { margin-top: 50px; } .mt-70 { margin-top: 70px; }
    .spacer-20 { margin-top: 20px; }
    .spacer-30 { margin-top: 30px; }
    .spacer-150 { min-height: 150px; }
    .spacer-1100 { min-height: 1100px; }
    .rel { position: relative; }

    /* Ropes */
    .ropeOne, .ropeTwo {
        display: block;
        background: url("../assets/img/rope-1.webp") no-repeat center top;
        background-size: 95%;
        min-height: 100px;
        margin: 100px 0 80px 0;
    }
    .ropeTwo { background-image: url("../assets/img/rope-2.webp"); }
    .rope-first { margin-top: 0; }

    /* Section headers */
    .contentHeader {
        background: url("../assets/img/header-underline.webp") no-repeat center center;
        display: block;
        margin: 0 auto 40px;
        padding-bottom: 50px;
        width: 1000px;
        height: 36px;
    }
    .contentHeaderBox { display: flex; align-items: center; justify-content: center; }
    .contentHeaderLine { background: url("../assets/img/header-line.webp") no-repeat center center; width: 218px; height: 3px; }
    .contentHeaderText {
        display: inline-block;
        text-align: center;
        font-size: 2.2em;
        font-family: var(--serif);
        font-weight: normal;
        text-transform: uppercase;
        position: relative;
        line-height: 1;
        color: var(--ink);
        margin: 0 30px;
    }

    /* Decorations */
    .deco-anchor { width: 100%; position: relative; }
    .spyglass { position: absolute; left: 150px; top: -1100px; }
    .map { position: absolute; right: 200px; top: 300px; }
    .coins--htp { position: absolute; left: 0; top: 200px; }
    .coins--contact { position: absolute; left: 0; top: 0; }

    /* Media */
    .yt { box-sizing: content-box; width: 600px; height: 335px; border: 2px inset #eee; }
    .gallery { position: relative; }
    .wrapper .gallery img { width: auto; height: auto; vertical-align: baseline; }
    .wallpaper { float: left; }
    .track { overflow: hidden; }
    .track + .track { margin-top: 26px; }
    .track__name { float: left; padding-top: 10px; width: 150px; }
    .track audio { vertical-align: top; }

    /* How to play */
    .flyDemo { width: 550px; position: relative; margin: 50px 0 0 150px; }
    .wrapper .flyFrame { margin-left: 5px; border: 1px solid #e5c7b9; padding: 5px; vertical-align: baseline; }
    .flyAction { position: absolute; top: 179px; left: 142px; }
    .hint { text-align: center; }
    .hintHeader { text-align: center; color: #fff; font-size: 2em; vertical-align: bottom; }
    .hintHeader h4 { margin-top: 30px; text-shadow: 2px 2px 4px #000; }
    .hintContainer { text-align: left; position: relative; overflow: visible; color: #fff; vertical-align: bottom; }
    .hintContainer p { margin: 30px 50px 0 20px; }
    .bag { position: absolute; right: -60px; bottom: -25px; }
    .drowning { position: absolute; right: -30px; bottom: -10px; }
    .goldbag { position: absolute; right: -50px; bottom: -20px; }

    /* Characters */
    .chars-header { margin-bottom: 0; }
    .charSelect { text-align: center; position: relative; margin-top: -40px; }
    .charSelect__hint { position: relative; display: inline-block; left: -160px; top: 250px; }
    .banner { text-align: center; margin: -80px 200px 5px -75px; color: #fff; font-size: 3em; }
    .banner div { margin-top: 10px; text-shadow: 2px 2px 4px #000; }
    .characterMenu { margin-top: -5px; }

    .charText { padding-top: 200px; text-align: left; }
    .characterNamePlate { text-align: center; color: #fff; font-size: 2.5em; vertical-align: top; }
    #characterName { margin-top: 28px; text-shadow: 2px 2px 4px #000; }
    .characterInfoDescription { width: 400px; position: absolute; padding: 20px 0 0 20px; }
    .characterInfoDescription .big { font-size: 1.1em; }

    .characterImageContainer { display: inline-block; position: relative; margin: 30px; width: 1000px; }
    .characterImage { position: relative; z-index: 100; overflow: hidden; right: -300px; }
    .ci-flint { width: 787px; height: 900px; right: -100px; }
    .ci-abu { width: 809px; height: 840px; }
    .ci-lilly { width: 1004px; height: 900px; }
    .ci-escar { width: 550px; height: 830px; margin-top: 20px; }
    .ci-griffon { width: 556px; height: 900px; }
    .ci-akira { width: 1225px; height: 1000px; margin-top: -50px; }
    .ci-kraken { width: 1165px; height: 880px; }
    .ci-morgan { width: 1032px; height: 900px; }
    .ci-mongol { width: 986px; height: 1100px; }
    .ci-gnobe { width: 864px; height: 800px; }
    .ci-firauun { width: 841px; height: 1200px; }
    .ci-dragut { width: 756px; height: 950px; }

    /* Platforms */
    .relaseFrame { position: relative; background: url("../assets/img/release-frame.webp") no-repeat center center; width: 800px; height: 415px; }
    .lantern { position: absolute; left: -300px; top: 50px; }
    .release { justify-content: flex-start; }
    .release__badges { flex-basis: 50%; padding: 80px 0 0 50px; }
    .release__badges a, .release__badges img { display: block; }
    .release .androidPlate { border-radius: 14px; box-shadow: 5px 10px 8px #888; }
    .release .iosPlate { margin-top: 40px; border-radius: 8px; box-shadow: 5px 10px 8px #888; }
    .release__text { flex-basis: 45%; }
    .brownBar { display: block; margin: 20px 0 0 -22px; }

    /* Contact */
    .contactLine { cursor: pointer; color: var(--ink); }

    /* Newsletter (former Mailchimp embed styles) */
    .newsletter { font-size: 1.5em; }
    .mc { padding: 10px 0; font: 14px Helvetica, Arial, sans-serif; text-align: center; }
    .mc label { display: block; padding-bottom: 10px; font-size: 16px; font-weight: bold; }
    .mc input[type="email"] {
        display: inline-block;
        box-sizing: border-box;
        width: 350px;
        height: 45px;
        padding: 0 8px;
        vertical-align: top;
        font: 20px "Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
        color: #343434;
        background: #fff;
        border: 1px solid #abb0b2;
        border-radius: 3px;
    }
    .mc__btn {
        display: inline-block;
        box-sizing: border-box;
        height: 45px;
        padding: 0 18px;
        font: 18px Arial, sans-serif;
        line-height: 32px;
        letter-spacing: .03em;
        color: #fff;
        background-color: #886655;
        border: 0;
        border-radius: 3px;
        cursor: pointer;
        transition: background-color .3s ease-in-out;
    }
    .mc__btn:hover { background-color: #068aea; }

    /* Privacy policy */
    .fb-80 { flex-basis: 80%; }
    .spacer-50 { min-height: 50px; }
    .spacer-1000 { min-height: 1000px; }
    .policy_wrapper { padding-top: 100px; }
    .policy_logo { width: 40%; margin: 0 auto 80px; }
    .contentHeaderPolicy { width: 90%; height: 36px; margin: 0 auto 40px; padding-bottom: 50px; }
    .contentHeaderTextPolicy { font-size: 2.2em; margin: 0 30px; }

    /* Impressum dialog */
    .impressum { width: 1281px; }
    .impressumContent .contentContainer { display: flex; align-items: flex-start; }
    .impressum__text { flex-basis: 70%; }
    .impressum__side { flex-basis: 30%; }
    .impressum .abuStance { margin-top: 225px; }

    /* Footer */
    .footer { position: absolute; bottom: 100px; left: 50%; margin-left: -300px; }
    .footer p { margin: 0 0 20px; }
    .footer a { color: var(--ink); margin-left: 10px; }
    .footer .silverBar { vertical-align: top; }
}

/* ==========================================================
   MOBILE & TABLET – stacked layout of the same markup
   ========================================================== */
@media (max-width: 1279.98px) {

    body { display: flex; flex-direction: column; font-size: 1.05rem; line-height: 1.55; }
    .skip-link { order: -1; }
    .header { order: 0; }
    .storeBadges { order: 1; }
    .socialMediaBar { order: 2; }
    .menu { order: 3; }
    .wrapper { order: 4; }

    .sp, br.d, .deco-anchor, .smallPointer, .banner, .lantern, .eyeGlow { display: none; }

    /* Header */
    .header__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 12% 40%; }
    .header__title { padding: 20px 16px 4px; color: #efe7d8; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); text-align: center; line-height: 1.2; }
    .header__lead { max-width: 46ch; margin: 0 auto; padding: 0 16px; text-align: center; color: #d8c7b8; }

    /* Navigation */
    .menu {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #2c5b80;
        border-block: 3px solid var(--copper);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    }
    .menu__bar { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 16px; }
    .menu__brand { color: #fff; font-size: 1.4rem; }
    .menu__toggle {
        position: relative;
        display: grid; place-items: center;
        width: 48px; height: 48px;
        border: 0; background: transparent; color: #fff; cursor: pointer;
    }
    .menu__toggle span:first-child, .menu__toggle span:first-child::before, .menu__toggle span:first-child::after {
        display: block; width: 26px; height: 3px; border-radius: 2px;
        background: currentColor; position: relative; transition: transform .25s, background .25s;
    }
    .menu__toggle span:first-child::before, .menu__toggle span:first-child::after { content: ""; position: absolute; left: 0; }
    .menu__toggle span:first-child::before { top: -8px; }
    .menu__toggle span:first-child::after { top: 8px; }
    .menu__toggle[aria-expanded="true"] span:first-child { background: transparent; }
    .menu__toggle[aria-expanded="true"] span:first-child::before { transform: translateY(8px) rotate(45deg); }
    .menu__toggle[aria-expanded="true"] span:first-child::after { transform: translateY(-8px) rotate(-45deg); }
    .menu__list { display: none; padding: 4px 0 14px; }
    .menu__list.is-open { display: block; }
    .menu__list a { display: block; padding: 12px 16px; color: var(--blue); text-decoration: none; font-size: 1.35rem; }
    .menu__list a[aria-current="true"], .menu__list a:hover { color: #fff; }
    .menu__lang a { font-size: 1rem; }

    /* Store badges & social links */
    .storeBadges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; padding: 20px 16px 16px; }
    .storeBadges img, .release__badges img { display: block; width: clamp(150px, 42vw, 230px); height: auto; }
    .socialMediaBar { display: flex; justify-content: center; gap: 10px; padding: 4px 0 24px; }
    .socialMediaBar img { display: block; width: 44px; height: 44px; }

    /* Parchment */
    .wrapper {
        --fh: 150px;
        display: block;
        padding: 14vw 9vw 0;
        background:
            linear-gradient(var(--footer), var(--footer)) left bottom / 100% var(--fh) no-repeat,
            url("../assets/img/scroll-top.webp") left top / 100% auto no-repeat,
            url("../assets/img/scroll-bottom.webp") left bottom var(--fh) / 100% auto no-repeat,
            url("../assets/img/scroll-center.webp") center top / 100% auto repeat-y;
    }
    .wrapper img { max-width: 100%; height: auto; }
    .ropeOne, .ropeTwo {
        height: clamp(20px, 4vw, 40px);
        margin: 40px -5vw 32px;
        background: url("../assets/img/rope-1.webp") no-repeat center / contain;
    }
    .ropeTwo { background-image: url("../assets/img/rope-2.webp"); }
    .rope-first { display: none; }

    .contentHeader { margin-bottom: 24px; padding-bottom: 12px; background: url("../assets/img/header-underline.webp") no-repeat center bottom / min(100%, 1000px) auto; }
    .contentHeaderBox { display: flex; align-items: center; justify-content: center; gap: 12px; }
    .contentHeaderLine { flex: 1 1 0; max-width: 218px; height: 3px; background: url("../assets/img/header-line.webp") no-repeat center / 100% 100%; }
    .contentHeaderText { font-family: var(--serif); font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.6rem); text-transform: uppercase; white-space: nowrap; line-height: 1; }

    .contentBlock, .contentContainer { display: block; }
    .contentBlock + .contentBlock, .spacer-20, .spacer-30 { margin-top: 28px; }
    .h { font-size: 1.5em; margin: 8px 0 6px; line-height: 1.2; }
    .item { margin-top: 16px; text-align: center; }
    .item > img { margin: 0 auto; }

    /* Media */
    .videos { display: grid; gap: 14px; }
    .yt { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; }
    .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 120px), 1fr)); gap: 8px; }
    .gallery a { display: block; border-radius: 6px; overflow: hidden; }
    .gallery img { display: block; width: 100%; }
    .wallpaper img { display: block; border-radius: 8px; }
    .track { display: grid; gap: 4px; margin-top: 10px; }
    .track audio { width: 100%; max-width: 420px; }

    /* How to play */
    .flyDemo { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 16px 0; }
    .flyFrame { width: clamp(48px, 13vw, 90px); border: 1px solid #e5c7b9; padding: 3px; }
    .hints { display: grid; gap: 28px; margin-top: 16px; }
    .hint { max-width: 370px; width: 100%; margin: 0 auto; color: #fff; }
    .hintHeader {
        display: block; width: 82%; height: auto; margin: 0 auto -10px; padding: 14px 0 26px;
        position: relative; z-index: 1; text-align: center; background-size: 100% 100%;
    }
    .hintHeader h4 { font-size: 1.6rem; text-shadow: 2px 2px 4px #000; }
    .hintContainer { display: block; width: auto; height: auto; min-height: 210px; position: relative; overflow: visible; padding: 24px 30% 24px 20px; background-size: 100% 100%; }
    .hintContainer .sprite { position: absolute; right: -6px; bottom: -12px; width: 30%; height: auto; aspect-ratio: 1; background-size: contain; background-position: center; }

    /* Characters */
    .charSelect { text-align: center; }
    .charSelect__hint .h { font-size: 1.2em; }
    .charSelect__hint { margin-bottom: 12px; }
    .characterMenu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 760px; margin: 0 auto 6px; }
    .characterMenu button { width: 100%; height: auto; aspect-ratio: 1; background-size: contain; background-position: center; border-radius: 50%; }
    .characterMenu button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--blue), 0 0 16px var(--blue); }
    .charInfo { margin-top: 20px; }
    .characterNamePlate { display: grid; place-items: center; width: min(100%, 350px); height: auto; aspect-ratio: 350 / 123; background-size: contain; color: #fff; font-size: 1.8rem; text-shadow: 2px 2px 4px #000; }
    .characterInfoDescription { margin-top: 12px; }
    .characterInfoDescription .h { font-size: 1.3em; }
    .characterImage { margin-top: 16px; }
    .characterImage img { max-width: 100%; height: auto; max-height: 75vh; width: auto; margin: 0 auto; }

    /* Platforms */
    .relaseFrame { max-width: 760px; margin: 16px auto 0; padding: 24px; border: 10px solid #7a4429; border-radius: 6px; box-shadow: inset 0 0 0 2px #4d2716; }
    .release { display: grid; gap: 20px; align-items: center; }
    .release__badges { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .brownBar { display: block; width: 220px; margin: 14px 0; background-size: 100% 100%; }

    /* Contact & newsletter */
    .contact-icon { text-align: center; margin-top: 8px; }
    .contactLine .h { font-size: 1.8em; }
    .spacer-150 { height: 32px; }
    .newsletter { margin-top: 8px; }
    .mc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
    .mc label { width: 100%; }
    .mc input[type="email"] { flex: 1 1 220px; min-height: 48px; padding: 0 12px; font: inherit; border: 2px solid var(--copper); border-radius: 8px; background: #fffaf2; box-sizing: border-box; }
    .mc__btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: 8px; font: inherit; color: #fff; background: #886655; cursor: pointer; }
    .spacer-1100 { height: 34vw; }

    /* Privacy policy */
    .policy_wrapper { padding: 14vw 10vw 0; font-size: 1rem; line-height: 1.55; }
    .policy_logo { width: min(75%, 420px); margin: 0 auto 28px; }
    .contentHeaderPolicy { margin-bottom: 24px; text-align: center; }
    .contentHeaderTextPolicy { font-size: 1.6rem; }
    .policy_wrapper h3 { margin-bottom: 6px; }
    .spacer-50 { height: 26px; }
    .spacer-1000 { height: 48vw; }

    /* Impressum dialog */
    .impressum { width: calc(100vw - 24px); padding: 36px 18px 24px; font-size: 1rem; }
    .impressum .contentHeader { height: 56px; margin-bottom: 20px; background-size: 100% auto; }
    .impressum .contentHeaderText { font-size: 1.8rem; margin: 0 12px; }
    .impressum__side { display: none; }

    /* Footer */
    .footer { box-sizing: border-box; min-height: var(--fh); margin: 0 -9vw; padding: 16px 16px 24px; color: #d8c7b8; text-align: center; font-size: .95rem; }
    .footer a { color: var(--blue); margin: 0 6px; }
    .footer .silverBar { display: block; width: min(80%, 631px); height: auto; aspect-ratio: 631 / 43; margin: 14px auto 0; background-size: contain; }
}
@media (min-width: 600px) and (max-width: 1279.98px) {
    .characterMenu { grid-template-columns: repeat(6, 1fr); }
    .release { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    .hints { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .charInfo { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; align-items: center; }
}

/* ---------- Simple text pages (impressum, policy, 404) ---------- */
.parchment {
    background:
        url("../assets/img/scroll-top.webp") top center / 100% auto no-repeat,
        url("../assets/img/scroll-bottom.webp") bottom center / 100% auto no-repeat,
        url("../assets/img/scroll-center.webp") top center / 100% auto repeat-y;
    padding: clamp(48px, 10vw, 180px) 0 clamp(160px, 32vw, 520px);
}
.page {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(32px, 9vw, 64px);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    color: #222;
    line-height: 1.6;
}
.page p { margin: 0 0 1em; }
.page h1, .page h2 { font-family: var(--font); color: #4f3d35; }
.page h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); text-align: center; margin-bottom: .5em; }
.page h2 { font-size: 1.4rem; margin: 1.6em 0 .4em; }
.page__logo { display: block; width: min(70%, 360px); height: auto; margin: 0 auto 32px; }
.page__back { display: inline-block; margin-top: 32px; font-family: var(--font); font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}