/* ============================================
   Birthday Gift — Stylesheet
   Multi-edition segmented dial design
   ============================================ */

/* --- Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* The hidden attribute must always win over component display rules,
   otherwise invisible overlays keep swallowing clicks. */
[hidden] {
    display: none !important;
}

:root {
    /* Shared neutrals */
    --bg-primary: #0f0d0c;
    --bg-secondary: #181513;
    --bg-tertiary: #221e1b;
    /* Default lens metal (each edition re-tints these) */
    --lens-hi: #2b3543;
    --lens-mid: #151b24;
    --lens-lo: #080a0e;
    --text-primary: #f5f0e8;
    --text-secondary: #a89e92;
    --text-muted: #6b6358;
    --border: rgba(245, 240, 232, 0.08);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    /* Default edition (Moments) — the chooser re-tints everything on turn */
    --theme-primary: #c8614a;
    --theme-soft: #e39179;
    --theme-dim: rgba(200, 97, 74, 0.14);
    --theme-glow: rgba(200, 97, 74, 0.32);
    --theme-bg-start: #3a1410;
    --theme-bg-mid: #1b0f0e;
    --theme-bg-end: #0b0808;
    --theme-accent-text: #fbf3ee;

    /* Chooser display type + backdrop texture — swapped per edition */
    --home-display: 'Cormorant Garamond', Georgia, serif;
    --home-display-weight: 400;
    --home-display-case: none;
    --home-display-ls: -0.02em;
    --home-display-lh: 0.82;
    --home-display-scale: 1;
    --home-display-style: normal;
    --home-tex: none;
    --home-tex-size: auto;

    /* Typography */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* 全局兜底：原先只在 .theme-stamp/.theme-postcard 等块里定义，
       theme-games 等页 var(--font-display) 解析为空、整条声明失效回退继承值 */
    --font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;
    --font-body: 'Archivo', 'Inter', sans-serif;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Theme variants ---
   One edition = one accent + one tinted backdrop + one texture + one display face.
   The chooser rotates between them; sub-pages keep their own theme class. */

.theme-story {
    --theme-primary: #c8614a;
    --theme-soft: #e39179;
    --theme-dim: rgba(200, 97, 74, 0.14);
    --theme-glow: rgba(200, 97, 74, 0.32);
    --theme-bg-start: #3a1410;
    --theme-bg-mid: #1b0f0e;
    --theme-bg-end: #0b0808;
    --theme-accent-text: #fbf3ee;

    /* Lens barrel + blade metal, tinted per edition so the aperture reads as
       part of the same instrument as the outer rings */
    --lens-hi: #3d2b26;
    --lens-mid: #1e1512;
    --lens-lo: #0a0706;

    --home-display: 'Cormorant Garamond', Georgia, serif;
    --home-display-weight: 300;
    --home-display-case: none;
    --home-display-ls: -0.05em;
    --home-display-lh: 0.78;
    --home-display-scale: 1.06;
    --home-tex: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px);
}

.theme-letter {
    --theme-primary: #5fb79a;
    --theme-soft: #8fd4bb;
    --theme-dim: rgba(95, 183, 154, 0.14);
    --theme-glow: rgba(95, 183, 154, 0.32);
    --theme-bg-start: #10302a;
    --theme-bg-mid: #0d1a18;
    --theme-bg-end: #070c0b;
    --theme-accent-text: #eef8f4;

    --lens-hi: #23372f;
    --lens-mid: #101d18;
    --lens-lo: #050907;

    --home-display: 'Archivo', 'Inter', sans-serif;
    --home-display-weight: 900;
    --home-display-case: uppercase;
    --home-display-ls: -0.055em;
    --home-display-lh: 0.8;
    --home-display-scale: 0.9;
    --home-tex: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
    --home-tex-size: 22px 22px;
}

.theme-games {
    --theme-bg-mid: #150f1c;

    --lens-hi: #2e2839;
    --lens-mid: #16131e;
    --lens-lo: #08070c;

    --home-display: 'Space Mono', 'Courier New', monospace;
    --home-display-weight: 700;
    --home-display-case: uppercase;
    --home-display-ls: -0.032em;
    --home-display-lh: 0.86;
    --home-display-scale: 0.95;
    --home-tex: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 7px);
}

.theme-music {
    --lens-hi: #3b2c1e;
    --lens-mid: #1d1610;
    --lens-lo: #0a0805;

    --home-display: 'Cormorant Garamond', Georgia, serif;
    --home-display-weight: 300;
    --home-display-case: none;
    --home-display-ls: -0.04em;
    --home-display-lh: 0.86;
    --home-display-scale: 1.42;
    --home-display-style: italic;
    --home-tex: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.062) 0 1px, transparent 1px 9px);
}

/* Chooser-only palette for the Cards edition (cards.html re-declares its own
   light stationery version of .theme-cards further down the file). */
.theme-cards {
    --theme-primary: #cf7f4e;
    --theme-soft: #e8a778;
    --theme-dim: rgba(207, 127, 78, 0.14);
    --theme-glow: rgba(207, 127, 78, 0.32);
    --theme-bg-start: #3a1e0d;
    --theme-bg-mid: #1c1210;
    --theme-bg-end: #0b0808;
    --theme-accent-text: #fdf5ea;

    --lens-hi: #3a3026;
    --lens-mid: #1d1812;
    --lens-lo: #0a0906;

    --home-display: 'Archivo', 'Inter', sans-serif;
    --home-display-weight: 800;
    --home-display-case: uppercase;
    --home-display-ls: -0.045em;
    --home-display-lh: 0.82;
    --home-display-scale: 0.8;
    --home-tex: radial-gradient(rgba(255, 255, 255, 0.085) 1.2px, transparent 1.6px);
    --home-tex-size: 30px 30px;
}

/* Light editorial "stamp collection" theme — Moments + detail pages */
.theme-stamp {
    --bg-primary: #f2eede;
    --bg-secondary: #fdfbf5;
    --bg-tertiary: #e5dfcd;
    --text-primary: #1a1714;
    --text-secondary: #574f45;
    --text-muted: #8b8271;
    --border: rgba(26, 23, 20, 0.14);
    --shadow: 0 20px 60px rgba(90, 75, 55, 0.15);
    --theme-primary: #c0553f;
    --theme-soft: #d98a76;
    --theme-dim: rgba(192, 85, 63, 0.14);
    --theme-glow: rgba(192, 85, 63, 0.28);
    --theme-bg-start: #f8f5eb;
    --theme-bg-mid: #f8f5eb;
    --theme-bg-end: #f2eede;
    --theme-accent-text: #1a1714;

    /* Reference typefaces:
       Cenzo Flare (flared Americana display sans, w900)  -> Bricolage Grotesque
       PP Neue Montreal (neo-grotesque, w700)             -> Archivo */
    --font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;
    --font-body: 'Archivo', 'Inter', sans-serif;
}

.theme-postcard {
    --bg-primary: #c1dbed;
    --bg-secondary: #fdfbf2;
    --bg-tertiary: #e7f1f8;
    --text-primary: #1d2a35;
    --text-secondary: #4a5868;
    --text-muted: #8190a1;
    --border: rgba(29, 42, 53, 0.16);
    --shadow: 0 22px 50px rgba(60, 90, 130, 0.18);
    --theme-primary: #c0553f;
    --theme-soft: #e08a76;
    --theme-dim: rgba(192, 85, 63, 0.16);
    --theme-glow: rgba(192, 85, 63, 0.28);
    --theme-bg-start: #d4e7f3;
    --theme-bg-mid: #d4e7f3;
    --theme-bg-end: #a3c7e3;
    --theme-accent-text: #1d2a35;

    --paper: #fdfbf2;
    --paper-edge: #f3eedc;
    --ink: #1d2a35;
    --ink-soft: #4a5868;
    --doodle: #2d9e7e;
    --paper-line: rgba(29, 42, 53, 0.18);

    --font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;
    --font-body: 'Archivo', 'Inter', sans-serif;
    --font-hand: 'Caveat', 'Ma Shan Zheng', cursive;
    --font-hand-cn: 'Ma Shan Zheng', 'Caveat', cursive;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Loader --- */
.loader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-out), visibility 0.8s var(--ease-out);
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-text {
    display: flex;
    gap: 2px;
    font-size: 0.875rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.loader-letter {
    opacity: 0;
    animation: loaderFade 1.4s var(--ease-out) forwards;
}

.loader-letter:nth-child(1) { animation-delay: 0s; }
.loader-letter:nth-child(2) { animation-delay: 0.08s; }
.loader-letter:nth-child(3) { animation-delay: 0.16s; }
.loader-letter:nth-child(4) { animation-delay: 0.24s; }
.loader-letter:nth-child(5) { animation-delay: 0.32s; }
.loader-letter:nth-child(6) { animation-delay: 0.40s; }
.loader-letter:nth-child(7) { animation-delay: 0.48s; }

@keyframes loaderFade {
    0% { opacity: 0; transform: translateY(8px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0.4; transform: translateY(0); }
}

/* --- Theme Background --- */
.theme-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        98% 68% at 50% -10%,
        var(--theme-bg-start) 0%,
        var(--theme-bg-mid, #14100e) 50%,
        var(--theme-bg-end) 100%
    );
    transition: background 0.9s var(--ease-out);
}

/* Per-edition backdrop texture — activated on the chooser only, so the
   sub-pages keep their own hand-built backdrops untouched. */
.page-home .theme-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--home-tex, none);
    background-size: var(--home-tex-size, auto);
    -webkit-mask-image: radial-gradient(116% 100% at 50% 0%, #000 30%, transparent 88%);
    mask-image: radial-gradient(116% 100% at 50% 0%, #000 30%, transparent 88%);
    transition: opacity 0.6s var(--ease-out);
}

.theme-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 86% 82%, var(--theme-dim) 0%, transparent 46%),
        radial-gradient(circle at 12% 20%, var(--theme-dim) 0%, transparent 44%);
    transition: background 0.9s var(--ease-out);
}

/* Vignette — keeps the eye on the dial */
.page-home::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(122% 84% at 50% 46%, transparent 46%, rgba(0, 0, 0, 0.6) 100%);
}

.confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* --- Navigation --- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.4rem 2.2rem;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: background 0.4s var(--ease-out), padding 0.4s var(--ease-out),
                border-color 0.4s var(--ease-out);
}

.nav.scrolled {
    background: rgba(10, 8, 8, 0.78);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding: 0.9rem 2.2rem;
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-primary);
    text-decoration: none;
    flex: none;
}

.nav-brand-mark {
    font-size: 0.8rem;
    line-height: 1;
    color: var(--theme-primary);
    transition: color 0.6s var(--ease-out);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link {
    position: relative;
    padding-bottom: 4px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.42);
    text-decoration: none;
    transition: color 0.3s var(--ease-out);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--theme-primary);
    transition: width 0.35s var(--ease-out), background 0.6s var(--ease-out);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.sound-toggle {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
                background 0.3s var(--ease-out);
}

.sound-toggle:hover {
    color: var(--theme-primary);
    border-color: var(--theme-dim);
    background: var(--theme-dim);
}

.sound-toggle.muted svg {
    opacity: 0.38;
}

/* --- Chooser toolbar: keyboard hint, straight from the reference --- */
.home-tools {
    position: fixed;
    top: 5.8rem;
    right: 2.2rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    text-align: right;
    pointer-events: none;
}

.home-tools-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.38);
}

.home-tools-line .k {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.32rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.home-tools-sep {
    color: rgba(255, 255, 255, 0.22);
}

button.k {
    background: none;
    font-family: inherit;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
                background 0.3s var(--ease-out);
}

button.k:hover {
    color: #fff;
    border-color: var(--theme-primary);
    background: var(--theme-dim);
}

/* --- Home Page / Chooser --- */
.home {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8.5rem 3rem 4rem;
}

.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 1320px;
}

.home-info {
    text-align: left;
}

/* Name + one-line intro block, top-left, straight out of the reference */
.home-kicker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 3.6rem;
}

.home-kicker-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.home-kicker-name::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--theme-primary);
    transition: background 0.6s var(--ease-out);
}

.home-kicker-text {
    max-width: 34ch;
    font-size: 0.7rem;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: rgba(245, 240, 232, 0.5);
}

/* Poster scale: huge face, hair-tight tracking, optical edge alignment.
   The last-line descender is nudged so the block hangs off the grid on purpose. */
.home-title {
    font-family: var(--home-display);
    font-weight: var(--home-display-weight);
    font-style: var(--home-display-style, normal);
    font-size: calc(min(clamp(3.5rem, 10.5vw, 10.4rem), 25vh) * var(--home-display-scale, 1));
    line-height: var(--home-display-lh, 0.82);
    letter-spacing: var(--home-display-ls);
    text-transform: var(--home-display-case);
    text-wrap: balance;
    color: #fff;
    margin-left: -0.05em;
    margin-bottom: 1rem;
    min-height: calc(var(--home-display-lh, 0.82) * 1em);
}

/* Chinese edition name — the poster line's quieter twin, wide-tracked */
.home-title-cn {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: clamp(0.95rem, 1.6vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.5em;
    line-height: 1.5;
    margin-left: -0.05em;
    margin-top: -0.3rem;
    margin-bottom: 0;
    color: var(--theme-primary);
    min-height: 1.5em;
    transition: color 0.6s var(--ease-out);
}

/* The rule now lives under the Chinese line: EN poster → CN name → rule → tagline */
.home-title-cn::after {
    content: '';
    display: block;
    width: min(100%, 26rem);
    height: 1px;
    margin-top: 0.7rem;
    background: linear-gradient(90deg,
        var(--theme-primary) 0%,
        var(--theme-dim) 44%,
        transparent 100%);
    transition: background 0.6s var(--ease-out);
}

.home-title-cn.swap {
    animation: titleSwap 0.55s var(--ease-out);
}

.home-title.swap {
    animation: titleSwap 0.55s var(--ease-out);
}

@keyframes titleSwap {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-tagline {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 30rem;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.58);
}

.home-tagline::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: none;
    margin-top: 0.5em;
    background: var(--theme-primary);
    transition: background 0.6s var(--ease-out);
}

/* --- The dial --- */
.home-dial-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dial-stage {
    --dial-size: clamp(272px, min(38vw, calc(40vh + 110px)), 452px);
    position: relative;
    width: var(--dial-size);
    height: var(--dial-size);
}

.dial-arrows {
    position: absolute;
    top: calc(var(--dial-size) * -0.055);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.15rem;
    z-index: 8;
}

.dial-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(12, 10, 10, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(245, 240, 232, 0.7);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
                transform 0.25s var(--ease-out);
}

.dial-arrow:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.dial-arrow:active {
    transform: scale(0.94);
}

.dial-pointer {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 11px solid #fff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
}

.dial {
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.dial:focus-visible {
    box-shadow: 0 0 0 2px var(--theme-dim);
    border-radius: 50%;
}

.dial-rotor {
    position: absolute;
    inset: 0;
    transition: transform 0.6s var(--ease-out);
    cursor: grab;
    touch-action: none;
}

.dial-rotor.dragging {
    transition: none;
    cursor: grabbing;
}

.dial-segments {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Machined face: rings + a dense tick grille */
.dial-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
}

.dial-ring--faint {
    stroke: rgba(255, 255, 255, 0.08);
}

.dial-disc {
    fill: rgba(0, 0, 0, 0.42);
}

.dial-tick {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
    stroke-linecap: round;
}

.dial-tick--major {
    stroke: rgba(255, 255, 255, 0.46);
    stroke-width: 1.2;
}

/* Every sector keeps a whisper of its own edition colour… */
.dial-segment {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
    fill-opacity: 0.09;
    transition: stroke 0.5s var(--ease-out);
}

/* …and the selected one blooms in the edition accent. */
.dial-segment-glow {
    fill: url(#dialWedgeGrad);
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
    opacity: 0;
    filter: drop-shadow(0 0 26px var(--theme-glow));
    transition: opacity 0.55s var(--ease-out);
}

.dial-segment-glow.active {
    opacity: 1;
}

.dial-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dial-label {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.34rem;
    color: rgba(245, 240, 232, 0.9);
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-out);
}

.dial-label-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--label-color, currentColor);
    opacity: 0.72;
    transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}

.dial-label-text {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.88;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    transition: opacity 0.35s var(--ease-out);
}

/* Chinese edition name under the English one — smaller, wide-tracked */
.dial-label-cn {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    line-height: 1.15;
    white-space: nowrap;
    opacity: 0.62;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    transition: opacity 0.35s var(--ease-out);
}

.dial-label:hover .dial-label-icon,
.dial-label:hover .dial-label-text,
.dial-label:hover .dial-label-cn,
.dial-label.active .dial-label-icon,
.dial-label.active .dial-label-text,
.dial-label.active .dial-label-cn {
    opacity: 1;
}

.dial-label.active {
    color: #fff;
}

.dial-label.active .dial-label-icon {
    transform: scale(1.16);
}

.dial-label.inactive {
    opacity: 0.86;
}

/* Centre knob — cream, knurled, with the edition counter */
.dial-hub-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 27%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(125% 125% at 50% 0%, #fffdf8 0%, #efe6d4 52%, #d5c8b0 100%);
    color: #17130f;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.22),
                0 0 46px var(--theme-glow);
    transition: transform 0.35s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.dial-hub-btn::before {
    content: '';
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.8) 0 0.4deg, transparent 0.4deg 3.2deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 66%, #000 70% 100%);
    mask-image: radial-gradient(circle, transparent 0 66%, #000 70% 100%);
    opacity: 0.4;
    pointer-events: none;
}

.dial-hub-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.32),
                0 0 62px var(--theme-glow);
}

.dial-hub-btn:active {
    transform: translate(-50%, -50%) scale(0.97);
}

.dial-hub-btn.pulse {
    animation: hubPulse 0.7s var(--ease-out);
}

@keyframes hubPulse {
    0% { box-shadow: 0 0 0 0 var(--theme-glow); }
    100% { box-shadow: 0 0 0 46px transparent; }
}

/* Hub "reveal" pop — fired each time the aperture re-opens */
.dial-hub-btn.enter-pop {
    animation: hubEnter 0.55s var(--ease-out);
}

@keyframes hubEnter {
    0% { transform: translate(-50%, -50%) scale(0.9); filter: brightness(1.5); }
    60% { transform: translate(-50%, -50%) scale(1.03); }
    100% { transform: translate(-50%, -50%) scale(1); filter: none; }
}

/* --- Lens barrel etching (static ring, sits over the rotor) --- */
.dial-etch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.etch-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 1;
}

.etch-ring--faint {
    stroke: rgba(255, 255, 255, 0.07);
}

.etch-text {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 4.2px;
    fill: rgba(245, 240, 232, 0.5);
}

.etch-cn {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3em;
}

/* Pure-Chinese line: wider tracking, lighter weight — CJK needs air */
.etch-text--cn {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 500;
    letter-spacing: 0.55em;
}

/* --- Aperture iris ---
   The blade disc covers the hub; a masked centre hole is the aperture.
   --iris-r is registered so the hole animates with a plain transition. */
@property --iris-r {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.dial-iris {
    --iris-r: 31%;
    position: absolute;
    inset: 25.5%;
    z-index: 6;
    border-radius: 50%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse var(--iris-r) var(--iris-r) at 50% 50%, transparent 97%, #000 100%);
    mask-image: radial-gradient(ellipse var(--iris-r) var(--iris-r) at 50% 50%, transparent 97%, #000 100%);
    transition: --iris-r 0.4s cubic-bezier(0.5, 0, 0.2, 1);
}

.dial-iris.is-closed {
    --iris-r: 0%;
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
}

.iris-blades {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.55, 0, 0.25, 1);
}

.iris-blade {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 0.8;
}

/* Blade + glass gradient stops take the edition's lens metal, so the
   aperture shares the outer rings' colour temperature */
.iris-stop-lo { stop-color: var(--lens-lo); }
.iris-stop-mid { stop-color: var(--lens-mid); }
.iris-stop-hi { stop-color: var(--lens-hi); }

.dial-hub-notch {
    width: 0;
    height: 0;
    margin-bottom: 0.15rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #17130f;
    opacity: 0.7;
}

.dial-hub-count {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    opacity: 0.55;
}

.dial-hub-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* --- Sub Pages --- */
.page-sub {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sub-hero {
    position: relative;
    padding: 10rem 2rem 5rem;
    text-align: center;
    z-index: 2;
}

.sub-eyebrow {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 1rem;
    transition: color 0.5s var(--ease-out);
}

.sub-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--theme-accent-text);
    margin-bottom: 0.75rem;
    transition: color 0.5s var(--ease-out);
}

.sub-subtitle {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

.sub-content {
    flex: 1;
    position: relative;
    z-index: 2;
    padding: 0 2rem 6rem;
}

.back-btn {
    position: fixed;
    /* Vertically centred inside the nav's content box in both nav states;
       `body.nav-compact` tracks .nav.scrolled (set in js/main.js). */
    top: 1.9rem;
    left: 2.5rem;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s var(--ease-out), top 0.4s var(--ease-out);
}

.back-btn:hover {
    color: var(--theme-primary);
}

.back-btn-arrow {
    font-size: 1.1rem;
    line-height: 1;
}

/* Sub-pages: the fixed ‹ Back button shares the nav's left corner. Give the
   brand room so the two read as one cluster instead of sitting on top of each
   other. */
.page-sub .nav-brand {
    margin-left: 5.6rem;
}

/* Nav shrinks when scrolled — keep the button centred with the brand. */
body.nav-compact .back-btn {
    top: 1.4rem;
}

/* --- Flip Card --- */
.card-container {
    max-width: 500px;
    margin: 0 auto;
    perspective: 1200px;
}

.birthday-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 1s var(--ease-in-out);
}

.birthday-card.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.card-front {
    background: linear-gradient(135deg, #2a2520 0%, #1a1714 100%);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

.card-front-content {
    text-align: center;
    padding: 2rem;
}

.card-ornament-top,
.card-ornament-bottom {
    color: var(--theme-primary);
    font-size: 1.5rem;
    margin: 1rem 0;
    transition: color 0.5s var(--ease-out);
}

.card-front-label {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.card-front-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    font-style: italic;
    color: var(--theme-soft);
    margin-bottom: 1rem;
    transition: color 0.5s var(--ease-out);
}

.card-front-hint {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
    animation: pulse 2s var(--ease-in-out) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.card-back {
    background: linear-gradient(135deg, #221e1b 0%, #181513 100%);
    border: 1px solid var(--border);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

.card-back-content {
    padding: 2.5rem;
    text-align: left;
}

.card-back-greeting {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--theme-primary);
    margin-bottom: 1.5rem;
    transition: color 0.5s var(--ease-out);
}

.card-back-body {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.card-back-sign {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    text-align: right;
}

/* --- Timeline --- */
.timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--border) 10%,
        var(--border) 90%,
        transparent
    );
}

.timeline-item {
    position: relative;
    padding-left: 3rem;
    padding-bottom: 3rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--theme-primary);
    transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.5s var(--ease-out);
}

.timeline-item:hover .timeline-dot {
    background: var(--theme-primary);
    box-shadow: 0 0 12px var(--theme-glow);
}

.timeline-date {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 0.5rem;
    display: block;
    transition: color 0.5s var(--ease-out);
}

.timeline-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.timeline-text {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Message Card --- */
.message-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3.5rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.message-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-dim);
}

.message-icon {
    font-size: 1.75rem;
    color: var(--theme-primary);
    margin-bottom: 1.5rem;
    transition: color 0.5s var(--ease-out);
}

.message-heading {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.message-body {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.message-divider {
    width: 40px;
    height: 1px;
    background: var(--theme-primary);
    margin: 0 auto 1.5rem;
    transition: background 0.5s var(--ease-out);
}

.message-footer {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* --- Wish Page --- */
.wish-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.wish-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.wish-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-dim);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.wish-card.revealed .wish-card-front {
    display: none;
}

.wish-card.revealed .wish-card-back {
    display: block;
}

.wish-card-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--theme-primary);
    transition: color 0.5s var(--ease-out);
}

.wish-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.wish-card-front p {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.wish-card-back {
    display: none;
}

.wish-card-back p {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Timeline Section (shadcn-inspired) --- */
.timeline-section {
    position: relative;
    z-index: 2;
    padding: 5rem 1.5rem 4rem;
}

.timeline-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header card */
.timeline-header {
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 0;
    padding: 2.5rem 1.5rem;
    background: rgba(24, 21, 19, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
    .timeline-header {
        padding: 2.5rem 2.5rem;
    }
}

@media (min-width: 1024px) {
    .timeline-header {
        padding: 3rem 4rem;
    }
}

.timeline-badge {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--theme-primary);
    transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
    margin-bottom: 1rem;
}

.timeline-header-text {
    max-width: 36rem;
}

.timeline-title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.timeline-desc {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* --- Railway Timeline --- */
.railway-timeline {
    position: relative;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 3rem 0;
    overflow: hidden;
    min-height: 200px;
}

/* Track (vertical, centered) */
.railway-track {
    position: absolute;
    left: 50%;
    top: 3rem;
    bottom: 3rem;
    width: 24px;
    transform: translateX(-50%);
    z-index: 1;
}

.rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--theme-dim);
    transition: background 0.5s var(--ease-out);
}

.rail-left {
    left: 4px;
}

.rail-right {
    right: 4px;
}

.railway-sleepers {
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 26px,
        var(--theme-dim) 26px,
        var(--theme-dim) 30px
    );
    opacity: 0.35;
    transition: background 0.5s var(--ease-out);
}

/* Train */
.train {
    position: absolute;
    left: 50%;
    top: 3rem;
    width: 90px;
    transform: translateX(-50%);
    z-index: 5;
    transition: top 0.4s var(--ease-out);
    pointer-events: none;
}

.train svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
    animation: train-rock 1.8s ease-in-out infinite alternate;
}

@keyframes train-rock {
    0% { transform: rotate(-0.6deg) translateY(0); }
    100% { transform: rotate(0.6deg) translateY(-1px); }
}

/* Headlight beam */
.train::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 52%;
    width: 35px;
    height: 8px;
    background: linear-gradient(to right, rgba(255, 248, 224, 0.35), transparent);
    transform: translateY(-50%);
    border-radius: 4px;
    filter: blur(2px);
}

/* Station cards */
.stations {
    position: relative;
}

.station {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 3.5rem;
    min-height: 80px;
}

.station:last-child {
    margin-bottom: 0;
}

/* Odd stations: card on the left */
.station:nth-child(odd) {
    justify-content: flex-end;
    padding-right: calc(50% + 2.5rem);
}

/* Even stations: card on the right */
.station:nth-child(even) {
    justify-content: flex-start;
    padding-left: calc(50% + 2.5rem);
}

/* Connector line from card to track */
.station::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 50%;
    width: 2rem;
    height: 1px;
    background: var(--theme-dim);
    transition: background 0.5s var(--ease-out);
    z-index: 2;
}

.station:nth-child(odd)::before {
    transform: translateX(-2rem);
}

.station:nth-child(even)::before {
    transform: translateX(0);
}

/* Station marker on the track */
.station-marker {
    position: absolute;
    left: 50%;
    top: 1.25rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--theme-primary);
    transform: translateX(-50%);
    z-index: 4;
    transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.5s var(--ease-out);
}

.station:hover .station-marker,
.station.active .station-marker {
    background: var(--theme-primary);
    box-shadow: 0 0 16px var(--theme-glow);
}

/* Station card */
.station-card {
    max-width: 320px;
    width: 100%;
    background: rgba(24, 21, 19, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.5s var(--ease-out);
    opacity: 0;
    transform: translateY(20px);
}

.station-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.station:hover .station-card {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--theme-dim);
}

.station-card-image {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}

.station-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.5));
}

.station-card-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.station-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.station-card-date {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-primary);
    transition: color 0.5s var(--ease-out);
    margin-bottom: 0.4rem;
    display: block;
}

.station-card-place {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.station-card-memory {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.station-card-hint {
    margin-top: 0.6rem;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.station:hover .station-card-hint {
    opacity: 1;
    transform: translateX(0);
}

/* Footer cap */
.timeline-footer {
    border: 1px solid var(--border);
    border-top: none;
    height: 4rem;
}

@media (min-width: 768px) {
    .timeline-footer {
        height: 5rem;
    }
}

/* --- Journey Map --- */
.journey-map-section {
    position: relative;
    z-index: 2;
    padding: 4rem 2rem 6rem;
}

.journey-map-wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.journey-map {
    width: 100%;
    height: auto;
    max-height: 70vh;
    display: block;
}

.journey-map-hint {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 1s var(--ease-out);
}

.journey-map-hint.visible {
    opacity: 0.5;
}

/* SVG path animation */
.journey-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2.5s var(--ease-out);
}

.journey-path.drawn {
    stroke-dashoffset: 0;
}

/* Location markers */
.journey-loc {
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
}

.journey-loc.visible {
    opacity: 1;
}

.journey-loc-circle {
    fill: var(--bg-primary);
    stroke: var(--theme-primary);
    stroke-width: 2;
    transition: r 0.3s var(--ease-out), stroke-width 0.3s var(--ease-out), fill 0.3s var(--ease-out);
}

.journey-loc:hover .journey-loc-circle {
    fill: var(--theme-primary);
}

.journey-loc-glow {
    fill: var(--theme-primary);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
}

.journey-loc:hover .journey-loc-glow {
    opacity: 0.2;
}

.journey-loc-text {
    fill: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-anchor: middle;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s var(--ease-out);
}

.journey-loc:hover .journey-loc-text {
    opacity: 1;
}

.journey-loc-date {
    fill: var(--theme-primary);
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 400;
    text-anchor: middle;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s var(--ease-out);
}

.journey-loc:hover .journey-loc-date {
    opacity: 0.9;
}

/* --- Picture-in-Picture Windows --- */
.pip-container {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    overflow: hidden;
}

.pip-window {
    position: absolute;
    width: 400px;
    max-width: calc(100vw - 2rem);
    background: rgba(24, 21, 19, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--theme-dim);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    overflow: hidden;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.pip-window.visible {
    transform: scale(1);
    opacity: 1;
}

.pip-window.closing {
    transform: scale(0.9);
    opacity: 0;
}

.pip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: grab;
    border-bottom: 1px solid var(--border);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.pip-header.dragging {
    cursor: grabbing;
}

.pip-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pip-title-icon {
    color: var(--theme-primary);
    font-size: 0.9rem;
    transition: color 0.5s var(--ease-out);
}

.pip-title-text {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-primary);
}

.pip-title-date {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--theme-primary);
    transition: color 0.5s var(--ease-out);
}

.pip-close {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.pip-close:hover {
    color: var(--text-primary);
    background: var(--border);
}

.pip-body {
    padding: 1.25rem;
}

.pip-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    overflow: hidden;
}

.pip-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.pip-photo-placeholder {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.6;
}

.pip-memory {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-secondary);
}

.pip-footer {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-align: right;
}

/* --- Footer --- */
.footer {
    position: relative;
    z-index: 2;
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border);
}

.footer-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.footer-sub {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* --- Light theme overrides (stamp collection) --- */
.theme-stamp .nav.scrolled {
    background: rgba(242, 238, 222, 0.92);
}

/* The default link colour is a near-white for dark bars; on this light bar the
   inactive links would be invisible. Dim ink instead. */
.theme-stamp .nav-link {
    color: rgba(26, 23, 20, 0.45);
}

.theme-stamp .loader {
    background: #f2eede;
}

.theme-stamp .confetti-canvas {
    opacity: 0.45;
}

.theme-stamp .back-btn {
    color: var(--text-secondary);
    border-color: var(--border);
}

.theme-stamp .back-btn:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.theme-stamp .footer {
    border-top: 1px solid var(--border);
}

.theme-stamp .footer-text {
    color: var(--text-secondary);
}

.theme-stamp .footer-sub {
    color: var(--text-muted);
}

/* --- Stamp Hero --- */
.stamp-hero {
    position: relative;
    z-index: 2;
    padding: 9rem 2rem 2.5rem;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.stamp-eyebrow {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 1.1rem;
}

.stamp-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 11vw, 6.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin-bottom: 1.1rem;
}

.stamp-subtitle {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.8;
    letter-spacing: 0.01em;
}

/* --- Journey Stage (scroll-driven stamp collage) --- */
.journey-stage {
    position: relative;
    /* height set by JS to N * 100vh */
}

.journey-poster {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 5vw;
    overflow: hidden;
}

.journey-poster-line {
    font-family: var(--font-display);
    font-size: clamp(5.5rem, 19vw, 16rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--text-primary);
    opacity: 0.075;
    text-align: center;
    white-space: nowrap;
}

.journey-poster-line-alt {
    color: var(--theme-primary);
    opacity: 0.1;
    font-size: clamp(3.5rem, 11vw, 9rem);
    margin-top: -1.5vw;
    letter-spacing: -0.03em;
}

/* --- Railway progress bar (fixed at bottom) --- */
.journey-rail-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 0.5rem 1.5rem 0.9rem;
    background: linear-gradient(
        to top,
        var(--bg-primary) 55%,
        rgba(242, 238, 222, 0)
    );
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.journey-rail-bar.visible {
    opacity: 1;
    transform: translateY(0);
}

.rail-bar-line {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    height: 20px;
}

.rail-bar-line::before,
.rail-bar-line::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-muted);
    opacity: 0.5;
}

.rail-bar-line::before { top: 5px; }
.rail-bar-line::after { bottom: 5px; }

.rail-bar-sleepers {
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    bottom: 3px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 13px,
        var(--text-muted) 13px 15px
    );
    opacity: 0.26;
}

.rail-bar-train {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 62px;
    margin-left: var(--rail-pos, 0%);
    transform: translateX(-50%);
    transition: margin-left 0.25s linear;
    z-index: 2;
}

.rail-bar-train svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(90, 75, 55, 0.25));
    animation: train-rock 1.8s ease-in-out infinite alternate;
}

.rail-bar-train::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 54%;
    width: 22px;
    height: 4px;
    background: linear-gradient(to right, rgba(255, 248, 224, 0.55), transparent);
    transform: translateY(-50%);
    border-radius: 2px;
    filter: blur(2px);
}

/* --- Polaroid clothesline: prints pegged to a sagging string --- */
.pl-line {
    position: fixed;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    outline: none;
    cursor: grab;
    opacity: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.pl-line[data-drag='1'] { cursor: grabbing; }
/* Faded out (before / after the journey) — let clicks pass through. */
.pl-line[data-idle='1'] { pointer-events: none; }
.pl-line:focus-visible { box-shadow: inset 0 0 0 2px var(--theme-primary); }

.pl-string {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.pl-string path {
    stroke: var(--text-muted);
    stroke-width: 1.4;
}

.pl-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pl-card {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pl-cw);
    transform-origin: 50% 0;
    will-change: transform;
    pointer-events: auto;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: inherit;
    visibility: hidden;
}

.pl-print {
    margin-top: 10px;
    background: #fdfbf5;
    padding: 10px 10px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -16px rgba(90, 75, 55, 0.45);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
                filter 0.5s ease,
                box-shadow 0.35s var(--ease-out);
}

/* The prints drop onto the string the first time the line scrolls into view.
   `backwards` only: the drop-in must not stick and shadow the [data-on] scale. */
.pl-line[data-ready='1'] .pl-print {
    animation: pl-drop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--i) * 80ms);
}

.pl-card[data-on='0'] .pl-print {
    transform: scale(0.9);
    filter: saturate(0.72) brightness(0.97);
}

.pl-card:hover .pl-print,
.pl-card:focus-visible .pl-print {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 30px 46px -18px rgba(90, 75, 55, 0.5);
    filter: saturate(1.05);
}

.pl-card:focus-visible { outline: none; }

@keyframes pl-drop {
    from { transform: translateY(-18px) scale(0.94); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.pl-shot {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.pl-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.pl-note {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-family: var(--cjk), ui-serif, Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.1;
    color: #5b5449;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-peg {
    position: absolute;
    left: 50%;
    top: 0;
    width: 10px;
    height: 26px;
    margin-left: -5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c9a67a, #e3c9a1 45%, #b8915f);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.pl-peg::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 2px;
    height: 7px;
    background: rgba(80, 60, 30, 0.45);
    border-radius: 1px;
}

.pl-bar {
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    /* sits above the railway progress bar pinned to the bottom */
    bottom: clamp(84px, 13vh, 124px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    cursor: default;
    pointer-events: auto;
}

.pl-cap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding-bottom: 0.15em;
}

.pl-cap > * {
    display: block;
    animation: pl-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pl-title {
    font-family: var(--cjk), var(--font-display), sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.15;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-sub {
    margin-top: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pl-count {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    white-space: nowrap;
}

.pl-count b { color: var(--theme-primary); font-weight: 700; }

.pl-btn {
    appearance: none;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pl-btn:hover {
    background: var(--theme-primary);
    color: var(--bg-secondary);
}

.pl-btn:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }

.pl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes pl-in {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (max-width: 640px) {
    .pl-sub { font-size: 11.5px; }
    .pl-btn { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-cap > * { animation: none; }
    .pl-print { animation: none; transition: none; }
}

.journey-hint {
    position: fixed;
    /* clear of the railway progress bar pinned to the bottom */
    bottom: 3.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out);
}

.journey-hint.hidden {
    opacity: 0;
}

.journey-hint-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-primary);
    animation: hintPulse 1.5s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.6); }
}

/* --- Stamp Gallery --- */
.stamp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2.75rem 2rem;
    max-width: 1040px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 6rem;
    align-items: start;
}

.stamp {
    display: block;
    text-decoration: none;
    color: inherit;
    --rot: 0deg;
    --delay: 0s;
    filter: drop-shadow(0 14px 28px rgba(20, 18, 14, 0.24));
    transition: filter 0.35s var(--ease-out);
    opacity: 0;
    animation: stampIn 1s var(--ease-out) var(--delay) backwards;
    animation-play-state: paused;
}

.stamp.visible {
    animation-play-state: running;
}

@keyframes stampIn {
    0% {
        opacity: 0;
        transform: rotate(var(--rot)) translateY(48px) scale(0.93);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--rot));
    }
}

.stamp:hover,
.stamp:focus-visible {
    filter: drop-shadow(0 30px 48px rgba(20, 18, 14, 0.34));
    transform: rotate(0deg) translateY(-12px) scale(1.05);
    outline: none;
}

.stamp-inner {
    position: relative;
    background: var(--bg-secondary);
    padding: 9px;
}

/* Perforated stamp edges */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
    .stamp-inner {
        --perf-r: 4.5px;
        --perf-gap: 14px;
        -webkit-mask-image:
            radial-gradient(circle var(--perf-r) at 50% 0, transparent 100%, #000 0),
            radial-gradient(circle var(--perf-r) at 50% 100%, transparent 100%, #000 0),
            radial-gradient(circle var(--perf-r) at 0 50%, transparent 100%, #000 0),
            radial-gradient(circle var(--perf-r) at 100% 50%, transparent 100%, #000 0);
        -webkit-mask-size:
            var(--perf-gap) 100%, var(--perf-gap) 100%,
            100% var(--perf-gap), 100% var(--perf-gap);
        -webkit-mask-position: left top, left bottom, left top, right top;
        -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
        -webkit-mask-composite: source-in, source-in, source-in, source-over;
        mask-image:
            radial-gradient(circle var(--perf-r) at 50% 0, transparent 100%, #000 0),
            radial-gradient(circle var(--perf-r) at 50% 100%, transparent 100%, #000 0),
            radial-gradient(circle var(--perf-r) at 0 50%, transparent 100%, #000 0),
            radial-gradient(circle var(--perf-r) at 100% 50%, transparent 100%, #000 0);
        mask-size:
            var(--perf-gap) 100%, var(--perf-gap) 100%,
            100% var(--perf-gap), 100% var(--perf-gap);
        mask-position: left top, left bottom, left top, right top;
        mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
        mask-composite: intersect, intersect, intersect, add;
    }
}

.stamp-art {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--stamp-color, #51b37c);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stamp-art::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    pointer-events: none;
}

.stamp-art-icon {
    font-size: 2.6rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}

.stamp-postmark {
    position: absolute;
    top: 12%;
    right: 5%;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-14deg);
    opacity: 0.75;
    font-size: 0.4rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

.stamp-info {
    padding: 0.65rem 0.3rem 0.25rem;
    text-align: center;
}

.stamp-no {
    font-family: var(--font-body);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 0.35rem;
}

.stamp-place {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 0.3rem;
}

.stamp-meta {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* --- Place detail page (Theme 1: Postcard collage) --- */
.place-page {
    position: relative;
    z-index: 2;
    /* Fill the flex container's cross axis. body.page-sub is display:flex
       column, where `margin: 0 auto` on the cross axis would otherwise make
       the box shrink-to-fit content and leave big side gaps. align-self:center
       respects the explicit width, so the page fills the viewport up to max-width. */
    align-self: center;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 6.5rem 2rem 5rem;
    /* Per-place background is painted on body.theme-postcard so it covers
       the whole viewport, not just this centered frame. */
    overflow: hidden;
}

/* Per-place background lives on the body so it spans the full viewport.
   Falls back to a soft theme gradient if --place-bg isn't set yet.
   NOTE: --place-bg holds ONLY the image/gradient value (no position/size
   tokens) — those are applied via the longhands below, so no shorthand
   conflict can drop the whole declaration. */
body.theme-postcard {
    position: relative;
    background-color: var(--theme-bg-start);
    background-image: var(--place-bg, linear-gradient(180deg, var(--theme-bg-start), var(--theme-bg-end)));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Hide the default blue radial theme layer so it doesn't bleed through
   on top of the postcard's per-place photo / gradient. */
body.theme-postcard .theme-bg {
    display: none;
}

/* Paper grain / dot texture — fixed to the viewport so any background
   still reads as a scrapbook page. */
body.theme-postcard::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.6px);
    background-size: 17px 17px, 23px 23px;
    background-position: 0 0, 8px 11px;
    opacity: 0.55;
    z-index: 1;
}

.place-masthead {
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
}

.place-label {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--theme-primary);
    padding: 0.18rem 0.75rem;
    border-radius: 3px;
    transform: rotate(-2.5deg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
    margin-bottom: 0.9rem;
}

.place-no {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 0.4rem;
}

.place-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 11vw, 5.4rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    transform: rotate(-1deg);
}

.place-sub {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

/* Collage canvas ------------------------------------------------ */
.place-collage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 1020px;
    margin-top: 1.5rem;
}

.collage-item {
    position: absolute;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: var(--shadow);
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    transform-origin: center;
}

.collage-item:hover {
    box-shadow: 0 34px 64px rgba(40, 70, 110, 0.26);
    z-index: 60 !important;
    transform: rotate(var(--rot, 0deg)) translateY(-8px) scale(1.025);
}

/* washi-tape accent (optional) */
.collage-item.has-tape::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 64px;
    height: 22px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Photo print --------------------------------------------------- */
.photo-print {
    background: var(--paper);
    padding: 10px 10px 0;
    overflow: hidden;
}

.photo-print .photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--photo-c1, #7ba862), var(--photo-c2, #3d5e2e));
}

/* faint horizon / scenery hint inside the placeholder photo */
.photo-print .photo-frame::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    background: radial-gradient(120% 80% at 50% 100%, rgba(255, 255, 255, 0.18), transparent 70%);
}

.photo-print .photo-icon {
    position: relative;
    z-index: 1;
    font-size: 3.6rem;
    line-height: 1;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
}

/* Real photo inside the frame (set it.image on a photo-print item) */
.photo-print .photo-frame-img {
    background: var(--photo-c2, #3d5e2e);
}

.photo-print .photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-print .photo-caption {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: var(--ink);
    padding: 0.5rem 0.2rem 0.75rem;
    text-align: center;
    line-height: 1.1;
}

/* Postcard back (writing side) --------------------------------- */
.postcard-back {
    background: linear-gradient(180deg, var(--paper), var(--paper-edge));
    padding: 16px 18px 16px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.postcard-back .postcard-stamp-box {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 54px;
    height: 64px;
    border: 2px dashed rgba(29, 42, 53, 0.28);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}

.postcard-back .postcard-stamp {
    font-size: 1.9rem;
    line-height: 1;
}

.postcard-back .postcard-address {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--theme-primary);
    letter-spacing: 0.01em;
    transform: rotate(-2deg);
    margin-bottom: 0.4rem;
    max-width: 60%;
    line-height: 1.1;
}

/* Optional real photo on the writing side (set it.photo on a postcard-back item) */
.postcard-back .postcard-photo {
    position: relative;
    z-index: 1;
    margin: 0.2rem 0 0.6rem;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 10;
    background: var(--photo-c2, #5D8BBA);
}

.postcard-back .postcard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.postcard-back .postcard-lines {
    font-family: var(--font-hand-cn);
    font-size: 1.2rem;
    line-height: 1.95;
    color: var(--ink);
    border-top: 1px solid var(--paper-line);
    padding-top: 0.55rem;
}

.postcard-back .postcard-line {
    border-bottom: 1px solid var(--paper-line);
    min-height: 1.95em;
}

/* Sticker ------------------------------------------------------- */
.sticker {
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: auto;
}

.sticker-round {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--sticker-color, #c0553f);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    font-family: var(--font-hand);
    font-size: 1.15rem;
    line-height: 1.05;
    font-weight: 700;
    padding: 0.4rem;
}

.sticker-round .sticker-icon {
    display: block;
    font-size: 1.35rem;
    margin-bottom: 0.05rem;
}

.sticker-banner {
    height: 34px;
    padding: 0 0.9rem;
    border-radius: 4px;
    background: var(--sticker-color, #2d9e7e);
    color: #fff;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    line-height: 34px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

/* Doodle -------------------------------------------------------- */
.doodle {
    box-shadow: none;
    background: transparent;
    pointer-events: none;
}

.doodle svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

/* Postage stamp (vintage travel / city-arrival stamp stickers) --- */
.collage-item.postage-stamp {
    background: transparent;
    padding: 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.postage-stamp .stamp-art {
    width: 100%;
    height: 100%;
    display: block;
    /* Reset inherited defaults from the older loose .stamp-art rule
       (line 2060) so the green "stamp-box" background doesn't bleed
       through and the SVG isn't clipped. Cream paper lives on the
       parent .collage-item.postage-stamp. */
    background: transparent;
    aspect-ratio: auto;
    overflow: visible;
    align-items: stretch;
    justify-content: stretch;
}

.postage-stamp .stamp-art svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Slight ink-bleed under the stamp so it feels printed on the page */
.postage-stamp::after {
    content: '';
    position: absolute;
    inset: 8% 6% -4%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
    filter: blur(14px);
    z-index: -1;
}

/* Ticket stub (for future use) --------------------------------- */
.ticket-stub {
    background: linear-gradient(180deg, #fff, #f4f4f0);
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--ink);
}

.ticket-stub .ticket-main {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
}

.ticket-stub .ticket-route {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}

.ticket-stub .ticket-detail {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.ticket-stub .ticket-perf {
    border-left: 2px dashed var(--border);
    width: 0;
}

.ticket-stub .ticket-stub-side {
    width: 62px;
    background: var(--ticket-color, #1a3a52);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-align: center;
}

.ticket-stub .ticket-seat {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    margin-top: 0.15rem;
}

/* Boarding pass (for future use) ------------------------------- */
.boarding-pass {
    background: linear-gradient(180deg, #fff, #f4f4f0);
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--ink);
    display: flex;
}

.boarding-pass .bp-main {
    flex: 1;
    padding: 14px 18px;
    min-width: 0;
}

.boarding-pass .bp-flight {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.boarding-pass .bp-row {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.5rem;
}

.boarding-pass .bp-field strong {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
}

.boarding-pass .bp-field span {
    font-size: 0.9rem;
    font-weight: 600;
}

.boarding-pass .bp-stub {
    width: 70px;
    background: var(--ticket-color, #1a3a52);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    border-left: 2px dashed var(--border);
}

/* Masthead / nav helpers --------------------------------------- */
.place-back {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.2rem;
    transition: color 0.3s var(--ease-out);
}

.place-back:hover {
    color: var(--theme-primary);
}

.place-nav {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.place-nav-link {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s var(--ease-out);
    max-width: 45%;
}

.place-nav-link:hover {
    color: var(--theme-primary);
}

.place-nav-next {
    text-align: right;
}

/* Lightbox (click any item to enlarge) ------------------------- */
.place-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.place-lightbox[hidden] {
    display: none;
}

.place-lightbox-scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 40, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
}

.place-lightbox.open .place-lightbox-scrim {
    opacity: 1;
}

.place-lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: min(640px, 92vw);
    max-height: 88vh;
    display: flex;
    transform: scale(0.86);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s var(--ease-out);
}

.place-lightbox.open .place-lightbox-stage {
    transform: scale(1);
    opacity: 1;
}

/* Inside the lightbox the item is static (no absolute scatter) */
.place-lightbox-stage .collage-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 90vw;
    transform: none !important;
    cursor: default;
}

.place-lightbox-stage .photo-print,
.place-lightbox-stage .postcard-back,
.place-lightbox-stage .ticket-stub,
.place-lightbox-stage .boarding-pass {
    width: min(580px, 90vw);
}

.place-lightbox-stage .photo-print .photo-frame {
    aspect-ratio: 4 / 3;
}

.place-lightbox-close {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s var(--ease-out);
}

.place-lightbox-close:hover {
    transform: rotate(90deg);
}

.place-error {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 6rem 2rem;
}

@media (max-width: 640px) {
    .place-collage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.4rem;
        height: auto;
        min-height: 0;
        margin-top: 1rem;
    }

    .collage-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 88% !important;
        transform: rotate(var(--rot, 0deg)) !important;
    }

    .collage-item:hover {
        transform: rotate(var(--rot, 0deg)) scale(1.015) !important;
    }
}

/* --- Scroll Reveal --- */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--delay, 0s);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-side {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--delay, 0s);
}

.reveal-side.visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .home-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 2.25rem;
    }

    .home-info {
        text-align: center;
    }

    .home-kicker {
        align-items: center;
        margin-bottom: 1.75rem;
    }

    .home-kicker-text {
        margin: 0 auto;
    }

    .home-tagline {
        justify-content: center;
        margin: 0 auto;
    }

    .home-title {
        margin-left: 0;
    }

    .home-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    .home {
        padding: 7.5rem 1.5rem 2rem;
    }

    .dial-stage {
        --dial-size: min(78vw, 340px);
    }

    .home-tools {
        display: none;
    }
}

@media (max-width: 480px) {
    .home-title {
        font-size: calc(clamp(2.8rem, 17vw, 5rem) * var(--home-display-scale, 1));
    }

    .dial-stage {
        --dial-size: min(84vw, 300px);
    }
}

/* Short viewports (laptops held sideways, small windows) */
@media (max-height: 780px) and (min-width: 901px) {
    .home {
        padding: 6.5rem 2.5rem 2.5rem;
    }

    .home-kicker {
        margin-bottom: 1.75rem;
    }
}

.stamp-hero-compact {
    padding: 7rem 2rem 1.5rem;
}

.stamp-hero-compact .stamp-title {
    font-size: clamp(2.2rem, 7vw, 4rem);
    margin-bottom: 0.85rem;
}

.stamp-hero-compact .stamp-subtitle {
    font-size: 0.85rem;
}

.stamp-hero-compact .stamp-subtitle br {
    display: none;
}

@media (max-width: 768px) {
    /* Two-row nav so the 5 edition links never push the sound button off-screen */
    .nav,
    .nav.scrolled {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem 1rem;
        padding: 0.9rem 1.15rem;
    }

    .nav-brand {
        order: 1;
    }

    .sound-toggle {
        order: 2;
        margin-left: auto;
    }

    .nav-links {
        order: 3;
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .nav-link {
        font-size: 0.56rem;
        letter-spacing: 0.12em;
    }

    .nav-brand-text {
        display: none;
    }

    /* Narrow: the back button moves closer in, so the brand needs less room. */
    .page-sub .nav-brand {
        margin-left: 4.7rem;
    }

    .journey-poster {
        padding: 0 3vw;
    }

    .sub-hero {
        padding: 8rem 1.5rem 4rem;
    }

    .sub-content {
        padding: 0 1.5rem 5rem;
    }

    /* Narrow nav keeps one padding in both states, so the button is fixed too. */
    .back-btn {
        left: 1.5rem;
        top: 1.4rem;
    }

    .message-card {
        padding: 2.5rem 1.5rem;
    }

    .card-back-content {
        padding: 1.5rem;
    }

    .card-back-body {
        font-size: 1rem;
    }

    .timeline-section,
    .journey-map-section {
        padding: 4rem 1rem;
    }

    .stamp-hero {
        padding: 7rem 1.5rem 2rem;
    }

    .stamp-subtitle {
        font-size: 0.85rem;
    }

    .railway-sticky {
        padding: 4rem 1rem 1rem;
    }

    .railway-train {
        width: 62px;
    }

    .stamp-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 2rem 1.25rem;
        padding: 2.5rem 1.25rem 4.5rem;
    }

    .stamp-postmark {
        width: 38px;
        height: 38px;
        font-size: 0.36rem;
    }

    .stamp-art-icon {
        font-size: 2.1rem;
    }

    .place-page {
        padding: 7rem 1.5rem 4rem;
    }

    .place-art {
        aspect-ratio: 4 / 3;
        margin-bottom: 2rem;
    }

    .place-art-icon {
        font-size: 3.5rem;
    }

    .place-memory {
        font-size: 1.05rem;
    }

    .timeline-header {
        padding: 1.5rem 1.25rem;
    }

    .timeline-title {
        font-size: 1.5rem;
    }

    /* Mobile: single column, track on the left */
    .station:nth-child(odd),
    .station:nth-child(even) {
        justify-content: flex-end;
        padding-right: calc(2.5rem);
        padding-left: 0;
    }

    .station::before {
        left: 1rem;
        width: 1.5rem;
        transform: translateX(-1.5rem);
    }

    .station:nth-child(even)::before {
        transform: translateX(-1.5rem);
    }

    .railway-track {
        left: 1rem;
        transform: none;
    }

    .train {
        left: 1rem;
        transform: none;
    }

    .station-marker {
        left: 1rem;
        transform: translateX(-50%);
    }

    .station-card {
        max-width: 100%;
    }

    .journey-map-wrap {
        margin-top: 1.5rem;
    }

    .journey-map {
        height: 420px;
    }

    .journey-loc-text {
        font-size: 9px;
    }

    .journey-loc-date {
        font-size: 8px;
    }

    .pip-window {
        width: 320px;
    }

    .pip-title-text {
        font-size: 1rem;
    }

    .pip-memory {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .dial {
        width: 280px;
        height: 280px;
        --label-radius: 92px;
    }

    .stamp-anim {
        width: 172px;
    }

    .stamp-hero-compact {
        padding: 5.5rem 1.25rem 1rem;
    }

    .dial-hub-btn {
        width: 62px;
        height: 62px;
    }

    .dial-label-icon {
        width: 22px;
        height: 22px;
        font-size: 0.95rem;
    }

    .dial-label-text {
        font-size: 0.55rem;
    }

    .dial-arrow {
        width: 32px;
        height: 32px;
    }

    .journey-map {
        height: 340px;
    }

    .journey-loc-text {
        font-size: 8px;
    }

    .journey-loc-date {
        font-size: 7px;
    }

    .pip-window {
        width: calc(100vw - 1.5rem);
        max-width: 320px;
    }

    .station-card-place {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Theme 2 — Film Light & Shadow (胶卷光影)
   Darkroom poster: film strips, sprocket holes,
   line-art camera, handwritten notes, light leaks
   ============================================ */

.theme-film {
    --bg-primary: #0c0a09;
    --bg-secondary: #141110;
    --bg-tertiary: #1b1714;
    --text-primary: #f2ead9;
    --text-secondary: #a99e8e;
    --text-muted: #6e6455;
    --border: rgba(242, 234, 217, 0.1);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    --theme-primary: #d98e5f;
    --theme-soft: #e8b48c;
    --theme-dim: rgba(217, 142, 95, 0.14);
    --theme-glow: rgba(217, 142, 95, 0.28);
    --theme-bg-start: #1a1210;
    --theme-bg-end: #0a0807;
    --theme-accent-text: #f2ead9;
}

.theme-film .loader {
    background: #0c0a09;
}

/* Light leaks + film grain over the dark base */
.theme-film .theme-bg {
    background:
        radial-gradient(ellipse at 88% 6%, rgba(210, 88, 42, 0.17), transparent 44%),
        radial-gradient(ellipse at 6% 94%, rgba(210, 88, 42, 0.13), transparent 42%),
        radial-gradient(ellipse at 30% 30%, #1a1310 0%, #0b0908 62%);
}

.theme-film .theme-bg::after {
    background-image: radial-gradient(circle, rgba(255, 250, 240, 0.05) 1px, transparent 1.4px);
    background-size: 3px 3px;
    opacity: 0.55;
}

/* Masthead ------------------------------------------------------ */
.film-masthead {
    text-align: center;
}

.film-roll-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--theme-primary);
    border: 1px solid rgba(217, 142, 95, 0.45);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    margin-bottom: 1.1rem;
}

.film-title {
    transform: none;
    color: #f2ead9;
}

.film-title-en {
    font-family: var(--font-hand);
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--theme-primary);
    transform: rotate(-1.6deg);
    margin: 0.15rem 0 0.5rem;
    opacity: 0.95;
}

.film-memory {
    font-family: var(--font-hand-cn);
    font-size: 1.3rem;
    line-height: 1.7;
    color: #c9bba8;
    max-width: 460px;
    margin: 0.4rem auto 0;
}

/* Stage ---------------------------------------------------------- */
.place-collage.film-stage {
    height: 880px;
}

/* Film strip ------------------------------------------------------ */
.film-strip {
    background: #14110f;
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55);
    border-radius: 6px;
}

.film-strip-h { padding: 20px 16px; }
.film-strip-v { padding: 16px 20px; }

.film-holes {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.film-holes-h {
    left: 12px;
    right: 12px;
    height: 8px;
    background-image: radial-gradient(circle at 50% 50%, rgba(244, 238, 225, 0.88) 2.6px, transparent 3.5px);
    background-size: 17px 8px;
    background-repeat: repeat-x;
    background-position: center;
}

.film-strip .film-holes-h:first-child { top: 6px; }
.film-strip-h .film-holes-h:last-child { bottom: 6px; }

.film-holes-v {
    top: 12px;
    bottom: 12px;
    width: 8px;
    background-image: radial-gradient(circle at 50% 50%, rgba(244, 238, 225, 0.88) 2.6px, transparent 3.5px);
    background-size: 8px 17px;
    background-repeat: repeat-y;
    background-position: center;
}

.film-strip .film-holes-v:first-child { left: 6px; }
.film-strip-v .film-holes-v:last-child { right: 6px; }

.film-frames {
    position: relative;
    display: flex;
    gap: 10px;
}

.film-strip-h .film-frames { flex-direction: row; }
.film-strip-v .film-frames { flex-direction: column; gap: 8px; }

.film-frame-wrap {
    flex: 1;
    min-width: 0;
}

.film-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--photo-c1, #4a323c), var(--photo-c2, #181014));
    border: 1px solid rgba(244, 238, 225, 0.12);
}

/* faint light bloom inside the placeholder frame */
.film-frame::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    background: radial-gradient(120% 80% at 50% 100%, rgba(255, 244, 224, 0.14), transparent 70%);
}

.film-frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.film-frame-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.3));
}

.film-frame-no {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(244, 238, 225, 0.6);
}

.film-frame-cap {
    font-family: var(--font-hand-cn);
    font-size: 1.05rem;
    line-height: 1.25;
    color: #d9c9b8;
    text-align: center;
    padding-top: 0.45rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Camera line art -------------------------------------------------- */
.film-camera {
    background: transparent;
    box-shadow: none;
}

.film-camera svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
}

/* Handwritten notes ------------------------------------------------- */
.film-note {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.film-note-text {
    font-family: var(--font-hand-cn);
    font-size: 1.3rem;
    line-height: 1.45;
    color: #efe6d4;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.film-note svg {
    width: 56px;
    height: 44px;
    display: block;
    margin-top: 2px;
    margin-left: 1.6rem;
}

.film-note.arrow-flip svg {
    transform: scaleX(-1);
    margin-left: 0;
    margin-right: 1.6rem;
}

/* Sparkles ----------------------------------------------------------- */
.film-sparkle {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.film-sparkle svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(242, 234, 217, 0.35));
}

/* Film edge markings -------------------------------------------------- */
.film-edge {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.film-edge-text {
    display: block;
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(217, 142, 95, 0.55);
    white-space: nowrap;
}

/* End mark ------------------------------------------------------------- */
.film-end {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.film-end-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--theme-primary);
    white-space: nowrap;
}

.film-end-mark i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary);
    box-shadow: 0 0 12px var(--theme-glow);
    animation: hintPulse 1.8s ease-in-out infinite;
}

/* Lightbox keeps the dark look --------------------------------------- */
.theme-film .place-lightbox-close {
    background: rgba(20, 17, 15, 0.92);
    color: #f2ead9;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
    .place-collage.film-stage {
        height: auto;
    }

    .film-note-text {
        font-size: 1.1rem;
        white-space: normal;
    }

    .film-memory {
        font-size: 1.15rem;
    }

    .film-edge {
        display: none;
    }

    .place-collage.film-stage .collage-item.film-note,
    .place-collage.film-stage .collage-item.film-sparkle,
    .place-collage.film-stage .collage-item.film-camera,
    .place-collage.film-stage .collage-item.film-end {
        width: auto !important;
    }
}

/* ============================================
   Games — The Arcade world map
   ============================================ */
.theme-games {
    --theme-primary: #a48cc4;
    --theme-soft: #c3b2dd;
    --theme-dim: rgba(164, 140, 196, 0.12);
    --theme-glow: rgba(164, 140, 196, 0.25);
    --theme-bg-start: #151020;
    --theme-bg-end: #0d0a14;
    --theme-accent-text: #f2eef8;
}

.games-page {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 7.5rem 2rem 3rem;
    min-height: 100vh;
}

/* --- Masthead --- */
.games-masthead {
    text-align: center;
    margin-bottom: 2.5rem;
}

.games-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 1rem;
}

.games-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--theme-accent-text);
    margin: 0 0 0.9rem;
}

.games-sub {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(242, 238, 248, 0.62);
    max-width: 34em;
    margin: 0 auto;
}

/* --- Map stage (3D tilt wrapper) --- */
.game-map-stage {
    position: relative;
    perspective: 1400px;
    border-radius: 28px;
    padding: 10px;
    background: linear-gradient(160deg, rgba(164, 140, 196, 0.22), rgba(164, 140, 196, 0.04));
    box-shadow:
        0 30px 80px -30px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(164, 140, 196, 0.14),
        0 0 60px -10px var(--theme-glow);
    touch-action: none;   /* gestures belong to the map, not page scroll */
}

.game-map-canvas {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    transform-style: preserve-3d;
    background-color: #1c1526;
    cursor: grab;
    will-change: transform;
}

.game-map-stage.dragging .game-map-canvas {
    cursor: grabbing;
}

.game-map-stage.dragging .map-pin {
    pointer-events: none;
}

/* Oversized world layer: pans & zooms under the canvas window */
.game-map-world {
    position: absolute;
    inset: -18%;
    background-image: url('../assets/games-map.png');
    background-size: cover;
    background-position: center;
    border-radius: 26px;
    will-change: transform;
}

/* Soft vignette so pins always read on top of the art */
.game-map-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(13, 10, 20, 0.42) 100%);
}

.game-map-hint {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(13, 10, 20, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    white-space: nowrap;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.game-map-hint.fade {
    opacity: 0;
}

/* --- On-screen map controls (zoom / orbit / reset) --- */
.map-controls {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-controls button {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(13, 10, 20, 0.6);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.map-controls button:hover {
    background: rgba(164, 140, 196, 0.4);
    transform: translateY(-1px);
}

.map-controls button:active {
    transform: scale(0.92);
}

.map-controls svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* --- Pins --- */
.map-pin {
    position: absolute;
    transform: translate(-50%, -100%) scale(var(--pin-inv, 1));
    transform-origin: 50% 100%;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    animation: pinDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--pin-delay, 0.8s);
}

@keyframes pinDrop {
    0% {
        opacity: 0;
        transform: translate(-50%, -220%) scale(calc(0.4 * var(--pin-inv, 1)));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(var(--pin-inv, 1));
    }
}

.map-pin-drop {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 14px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.map-pin-head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: var(--pin-color, #a48cc4);
    box-shadow:
        0 6px 18px -4px rgba(0, 0, 0, 0.55),
        0 0 0 3px rgba(255, 255, 255, 0.85),
        0 0 24px -4px var(--pin-color);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.map-pin-head > * {
    transform: rotate(45deg);
}

.map-pin-head {
    font-size: 20px;
    line-height: 1;
}

/* pulsing ring */
.map-pin::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 46px;
    height: 46px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 2px solid var(--pin-color, #a48cc4);
    opacity: 0;
    animation: pinRipple 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes pinRipple {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0.7;
    }
    70% {
        transform: translateX(-50%) scale(1.5);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.map-pin:hover .map-pin-head,
.map-pin:focus-visible .map-pin-head {
    transform: rotate(-45deg) scale(1.18);
}

.map-pin-tag {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0.32rem 0.7rem;
    border-radius: 10px;
    background: rgba(13, 10, 20, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.map-pin:hover .map-pin-tag,
.map-pin:focus-visible .map-pin-tag {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.map-pin-tag strong {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #fff;
}

.map-pin-tag em {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Footer credit line --- */
.games-footer-nav {
    text-align: center;
    margin-top: 2rem;
}

.games-credit {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(242, 238, 248, 0.34);
}

/* --- Video lightbox --- */
.game-video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.game-video-lightbox.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.game-video-scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 13, 0.82);
    backdrop-filter: blur(10px);
}

.game-video-panel {
    position: relative;
    width: min(920px, 100%);
    background: linear-gradient(170deg, #1b1526, #120d1b);
    border: 1px solid rgba(164, 140, 196, 0.25);
    border-radius: 22px;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 80px -20px var(--theme-glow);
    padding: 1.6rem;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.game-video-lightbox.open .game-video-panel {
    transform: translateY(0) scale(1);
}

.game-video-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 15, 30, 0.95);
    color: #f2eef8;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.game-video-close:hover {
    transform: rotate(90deg) scale(1.06);
    background: rgba(164, 140, 196, 0.35);
}

.game-video-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.game-video-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: var(--pin-color, #a48cc4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 24px -6px var(--pin-color);
    font-size: 20px;
}

.game-video-icon > * {
    transform: rotate(45deg);
}

.game-video-titles h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--theme-accent-text);
    margin: 0;
}

.game-video-zh {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--theme-primary);
    margin: 0.2rem 0 0;
}

.game-video-body {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
}

.game-video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000;
}

.game-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
    padding: 2rem;
    border: 1.5px dashed rgba(164, 140, 196, 0.4);
    border-radius: 14px;
    background: rgba(164, 140, 196, 0.05);
}

.game-video-placeholder-icon {
    font-size: 2.2rem;
}

.game-video-placeholder strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--theme-accent-text);
}

.game-video-placeholder p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.75;
    color: rgba(242, 238, 248, 0.55);
    max-width: 36em;
    margin: 0;
}

.game-video-placeholder code {
    font-size: 0.78em;
    color: var(--theme-soft);
    background: rgba(164, 140, 196, 0.14);
    border-radius: 5px;
    padding: 0.08em 0.4em;
}

/* 解析不出链接时的提示 */
.game-video-warn {
    color: #ffb4a2 !important;
    border-left: 2px solid rgba(255, 120, 90, 0.55);
    padding-left: 0.8rem;
    text-align: left;
}

/* 竖版视频（抖音等手机竖屏片段）：高度定死，宽度按比例反推。
   下限 576px = 抖音播放器所需最小宽 324px × 16/9，再矮会被裁掉右侧 UI */
.game-video-body.is-portrait {
    aspect-ratio: 9 / 16;
    height: clamp(576px, 76vh, 640px);
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

/* 封面懒加载：先出封面 + 播放按钮，点了才建播放器 */
.game-video-cover {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: #120d18;
    background-size: cover;
    background-position: center;
    transition: transform 0.45s ease, filter 0.45s ease;
}

.game-video-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.5));
}

.game-video-cover:hover,
.game-video-cover:focus-visible {
    transform: scale(1.02);
    filter: brightness(1.06);
    outline: none;
}

.game-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(18, 13, 24, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1;
    transition: background 0.3s ease, transform 0.3s ease;
}

.game-video-play::before {
    content: '';
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-left: 17px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transition: border-left-color 0.3s ease;
}

.game-video-cover:hover .game-video-play,
.game-video-cover:focus-visible .game-video-play {
    background: rgba(255, 255, 255, 0.92);
    transform: translate(-50%, -50%) scale(1.08);
}

.game-video-cover:hover .game-video-play::before,
.game-video-cover:focus-visible .game-video-play::before {
    border-left-color: #120d18;
}

.game-video-cover-hint {
    position: absolute;
    left: 50%;
    bottom: 1.05rem;
    transform: translateX(-50%);
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* --- 多条集锦：2×2 四宫格（CS 据点等） --- */
.game-video-body.is-grid .clip-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.clip-cell {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #120d18;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.game-video-body.is-grid .game-video-cover {
    border-radius: 10px;
}

.game-video-body.is-grid .game-video-cover::after {
    background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.55));
}

.game-video-body.is-grid .game-video-play {
    width: 44px;
    height: 44px;
}

.game-video-body.is-grid .game-video-play::before {
    border-left-width: 12px;
    border-top-width: 8px;
    border-bottom-width: 8px;
}

.game-video-body.is-grid .game-video-cover-hint {
    font-size: 0.62rem;
    bottom: 0.65rem;
    letter-spacing: 0.2em;
}

/* 宫格面板比单视频面板宽一档 */
.game-video-panel.has-grid {
    width: min(1100px, 100%);
}

/* --- 照片墙（截图/照片挂进据点弹窗） --- */
/* 照片模式解除 16:9 限高，面板自身限高并滚动 */
.game-video-body.is-photos {
    aspect-ratio: auto;
}

.game-video-panel.is-photos {
    width: min(1100px, 100%);
    max-height: min(92vh, 940px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.photo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.photo-item {
    position: relative;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #120d18;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.photo-item img {
    display: block;
    width: 100%;
    height: auto;
}

.photo-item-label {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    background: rgba(12, 9, 18, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
    .game-video-panel.is-photos {
        max-height: 88vh;
    }

    .photo-list {
        gap: 8px;
    }

    .photo-item {
        border-radius: 9px;
    }

    .photo-item-label {
        font-size: 0.62rem;
        bottom: 0.65rem;
    }
}

@media (max-width: 720px) {
    .game-video-body.is-grid .clip-grid {
        gap: 6px;
    }

    .clip-cell,
    .game-video-body.is-grid .game-video-cover {
        border-radius: 7px;
    }

    .game-video-body.is-grid .game-video-play {
        width: 34px;
        height: 34px;
    }

    .game-video-body.is-grid .game-video-play::before {
        border-left-width: 9px;
        border-top-width: 6px;
        border-bottom-width: 6px;
    }
}

/* --- Responsive --- */
@media (max-width: 720px) {
    .games-page {
        padding: 6rem 1.1rem 2rem;
    }

    .game-map-canvas {
        aspect-ratio: 4 / 3;
    }

    .map-controls {
        right: 14px;
        bottom: 14px;
    }

    .map-controls button {
        width: 38px;
        height: 38px;
    }

    .map-pin {
        width: 34px;
        height: 34px;
    }

    .map-pin-head {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .map-pin::before {
        width: 34px;
        height: 34px;
    }

    .map-pin-tag {
        display: none;
    }

    .game-map-hint {
        font-size: 0.62rem;
        padding: 0.4rem 0.9rem;
        bottom: 14px;
    }

    .game-video-panel {
        padding: 1.1rem;
        border-radius: 16px;
    }

    .game-video-close {
        top: -12px;
        right: -6px;
    }
}

/* ============================================
   Games — 3D island preview (games-3d.html)
   ============================================ */

/* games-3d 专属：暗金双龙主题 —— 背景图 + 金色主题变量整体覆盖 */
body.page-island3d {
    /* 暗金主题：全页（nav 激活态、小标、引线、光晕）跟着换色 */
    --theme-primary: #d4ab63;
    --theme-soft: #ecd9ae;
    --theme-dim: rgba(212, 171, 99, 0.14);
    --theme-glow: rgba(212, 171, 99, 0.3);
}
/* 龙纹背景画在 .theme-bg 固定层上（同 music 页的覆盖方式），
   上下暗色渐晕保证标题/导航可读 */
body.page-island3d .theme-bg {
    background:
        linear-gradient(180deg, rgba(12, 10, 12, 0.88) 0%, rgba(12, 10, 12, 0.42) 30%, rgba(12, 10, 12, 0.6) 62%, rgba(12, 10, 12, 0.9) 100%),
        url(../assets/valorant-dragons.jpg) center / cover no-repeat;
}

/* games-3d 专属：展示窗口放大——放宽页面容器，
   舞台宽度占满的同时受视口高度反推约束（保住 16:9 且一屏能看全） */
.page-island3d .games-page {
    max-width: 1880px;
    padding: 5.5rem clamp(1rem, 2vw, 2rem) 2.5rem;
}
.page-island3d .games-masthead {
    margin-bottom: 1rem;
}

/* --- 3D 岛页标题排印：两侧引线的小标 + VALORANT 字体渐变金大标题 --- */
.page-island3d .games-label {
    display: inline-flex;
    align-items: center;
    gap: 1.1em;
    font-size: 0.64rem;
    letter-spacing: 0.42em;
    color: var(--theme-soft);
    text-shadow: 0 0 16px var(--theme-glow);
}
.page-island3d .games-label::before,
.page-island3d .games-label::after {
    content: '';
    flex: none;
    width: 3.4em;
    height: 1px;
}
.page-island3d .games-label::before {
    background: linear-gradient(90deg, transparent, var(--theme-primary));
}
.page-island3d .games-label::after {
    background: linear-gradient(270deg, transparent, var(--theme-primary));
}
.page-island3d .games-label { margin-bottom: 0.65rem; }
.page-island3d .games-title {
    font-family: 'VALORANT', var(--font-display);
    font-weight: 400;              /* 该字体只有单字重，700 会伪加粗糊掉切角 */
    text-transform: uppercase;     /* 字体只有大写字形 */
    font-size: clamp(2.2rem, 5.4vh, 4rem);
    letter-spacing: 0.09em;
    background: linear-gradient(180deg, #ffffff 4%, #f4e4bb 50%, var(--theme-primary) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 8px 30px rgba(212, 171, 99, 0.45));
    margin-bottom: 0.55rem;
    padding-left: 0.09em;          /* 抵消 letter-spacing 造成的视觉右偏 */
}
.page-island3d .games-sub {
    color: rgba(242, 238, 248, 0.75);
}
.page-island3d .games-sub strong {
    color: var(--theme-soft);
    font-weight: 500;
}
.page-island3d .world3d-stage {
    max-width: 1860px;
    width: min(100%, calc((100vh - 212px) * 16 / 9));
    box-shadow:
        0 34px 90px -34px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(212, 171, 99, 0.22),
        0 0 80px -10px var(--theme-glow);
}

.world3d-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 26px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    background:
        linear-gradient(180deg, #241a38 0%, #4b3160 32%, #8d5471 58%, #d9875f 80%, #f2c493 100%);
    box-shadow:
        0 34px 90px -34px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(164, 140, 196, 0.18),
        0 0 70px -12px var(--theme-glow);
}

.world3d-stage.dragging {
    cursor: grabbing;
}

.world3d-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Pin overlay */
.world3d-pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.world3d-pin {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    will-change: transform, opacity;
}

.w3-pin-head {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    background: var(--pin-color, #a48cc4);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 22px -4px var(--pin-color, #a48cc4);
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.world3d-pin:hover .w3-pin-head,
.world3d-pin:focus-visible .w3-pin-head {
    transform: translateY(-3px) scale(1.08);
}

.w3-pin-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    background: rgba(13, 10, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.w3-pin-tag strong {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
}

.w3-pin-tag em {
    font-family: var(--font-hand-cn, var(--font-body));
    font-size: 0.68rem;
    font-style: normal;
    color: var(--pin-color, #e8d9ff);
}

/* Pins that hold a walkable map get a real "enter" button.
   The pin circle itself opens the highlight video — only this button dives. */
.w3-pin-dive {
    display: none;
    align-items: center;
    gap: 0.25em;
    margin-top: 0.15rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(242, 196, 147, 0.55);
    background: rgba(38, 24, 16, 0.86);
    font-family: var(--font-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #f2c493;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.world3d-pin.is-dive .w3-pin-dive {
    display: inline-flex;
}

.w3-pin-dive:hover,
.w3-pin-dive:focus-visible {
    background: #f2c493;
    color: #241509;
    transform: translateY(1px);
    outline: none;
}

.world3d-pin.is-dive .w3-pin-head {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(242, 196, 147, 0.35),
        0 0 26px -4px var(--pin-color, #a48cc4);
}

/* Loading badge */
.world3d-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(20, 14, 32, 0.72);
    backdrop-filter: blur(6px);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.world3d-loading.done {
    opacity: 0;
    visibility: hidden;
}

.world3d-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f2c493;
    animation: worldPulse 1.4s ease-in-out infinite;
}

@keyframes worldPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* 地图按需加载进度条：点「进入地图」才下载，这里给反馈 */
.w3-mapload {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 22;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 268px;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    background: rgba(14, 10, 20, 0.86);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 180, 150, 0.28);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    animation: mapLoadIn 0.28s ease both;
}

@keyframes mapLoadIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.w3-mapload-ring {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 200, 170, 0.25);
    border-top-color: #ff8b7a;
    animation: w3Spin 0.85s linear infinite;
}

@keyframes w3Spin { to { transform: rotate(360deg); } }

.w3-mapload-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.w3-mapload-name {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w3-mapload-bar {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.w3-mapload-bar i {
    display: block;
    height: 100%;
    width: 1%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6b5c, #ffb08a);
    transition: width 0.25s ease;
}

.w3-mapload-pct {
    flex: none;
    min-width: 2.6em;
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffb08a;
    font-variant-numeric: tabular-nums;
}

/* Hint + controls */
.world3d-hint {
    position: absolute;
    left: 50%;
    bottom: 58px;           /* 给群岛导航条让位 */
    transform: translateX(-50%);
    z-index: 15;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(13, 10, 20, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    white-space: nowrap;
    pointer-events: none;
}

.world3d-controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 16;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.world3d-controls button {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(13, 10, 20, 0.6);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.world3d-controls button:hover {
    background: rgba(164, 140, 196, 0.4);
    transform: translateY(-1px);
}

.world3d-controls button.active {
    background: rgba(164, 140, 196, 0.55);
    color: #fff;
}

.world3d-controls svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Dive-in curtain */
.world3d-warp {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 214, 170, 0.22) 0%, rgba(10, 7, 18, 0) 62%),
        #08060e;
}

/* Stage mood while inside a map */
.world3d-stage.diving {
    cursor: crosshair;
    background:
        linear-gradient(180deg, #0b0813 0%, #171122 36%, #241a2c 68%, #2f2136 100%);
}

.world3d-stage.diving .world3d-hint,
.world3d-stage.diving .world3d-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ---------- In-map roam HUD ---------- */
.world3d-roam {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 18px 18px;
    animation: w3RoamIn 0.5s ease both;
}

@keyframes w3RoamIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.w3-roam-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.w3-roam-badge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem 0.4rem 0.45rem;
    border-radius: 999px;
    background: rgba(13, 10, 20, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.8);
}

.w3-roam-badge em {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-style: normal;
    border-radius: 50%;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.w3-roam-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.w3-roam-badge-text strong {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #fff;
}

.w3-roam-badge-text i {
    font-family: var(--font-hand-cn, var(--font-body));
    font-size: 0.68rem;
    font-style: normal;
    letter-spacing: 0.08em;
    color: rgba(242, 200, 160, 0.9);
}

.w3-roam-exit {
    pointer-events: auto;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(13, 10, 20, 0.66);
    backdrop-filter: blur(10px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.w3-roam-exit:hover {
    background: rgba(164, 140, 196, 0.5);
    transform: translateY(-1px);
}

.w3-roam-hint {
    align-self: center;
    font-family: var(--font-body);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.82);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(13, 10, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    animation: w3HintFade 7s ease forwards;
}

@keyframes w3HintFade {
    0%, 62% { opacity: 1; }
    100%    { opacity: 0; }
}

.w3-roam-pad {
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.w3-roam-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 10, 20, 0.62);
    backdrop-filter: blur(10px);
    transition: background 0.15s ease, transform 0.12s ease;
    touch-action: none;
    user-select: none;
}

.w3-roam-btn.held {
    background: rgba(164, 140, 196, 0.62);
    transform: scale(0.94);
    color: #fff;
}

.w3-roam-clip {
    width: 44px;
    background: rgba(242, 196, 147, 0.22);
    border-color: rgba(242, 196, 147, 0.42);
}

/* --- 群岛导航：一键飞到某座岛 --- */
.w3-isle-nav {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    gap: 0.3rem;
    padding: 0.28rem;
    border-radius: 999px;
    background: rgba(14, 10, 22, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    max-width: calc(100% - 2rem);
    overflow-x: auto;
    scrollbar-width: none;
}

.w3-isle-nav::-webkit-scrollbar {
    display: none;
}

.w3-isle-btn {
    flex: 0 0 auto;
    padding: 0.34rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background 0.24s ease, color 0.24s ease;
}

.w3-isle-btn em {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.24s ease;
}

.w3-isle-btn:hover em {
    color: rgba(255, 255, 255, 0.92);
}

.w3-isle-btn.active {
    background: rgba(255, 255, 255, 0.9);
}

.w3-isle-btn.active em {
    color: #17101f;
}

.w3-isle-btn:focus-visible {
    outline: 2px solid var(--theme-soft, #a48cc4);
    outline-offset: 2px;
}

/* WebGL fallback */
.world3d-fallback {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
    background: rgba(20, 14, 32, 0.85);
    color: #f2eef8;
}

.world3d-fallback strong {
    font-size: 1rem;
}

.world3d-fallback p {
    font-size: 0.8rem;
    color: rgba(242, 238, 248, 0.72);
}

.world3d-fallback a {
    color: #e8b48c;
}

.games-compare-link {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: rgba(242, 238, 248, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.games-compare-link:hover {
    color: #fff;
}

@media (max-width: 820px) {
    .world3d-stage {
        aspect-ratio: 4 / 3;
        border-radius: 20px;
    }

    .w3-pin-head {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .w3-pin-tag {
        display: none;
    }

    .world3d-hint {
        font-size: 0.62rem;
        padding: 0.4rem 0.85rem;
        bottom: 14px;
    }

    .world3d-controls button {
        width: 38px;
        height: 38px;
    }

    .world3d-roam {
        padding: 12px 12px 14px;
    }

    .w3-roam-hint {
        font-size: 0.56rem;
        letter-spacing: 0.1em;
        text-align: center;
        padding: 0.35rem 0.7rem;
    }

    .w3-roam-btn {
        width: 46px;
        height: 46px;
        border-radius: 16px;
    }

    .w3-roam-exit {
        font-size: 0.6rem;
        padding: 0.45rem 0.7rem;
    }
}

/* ============================================
   MUSIC — in-car cassette player cockpit
   theme-music · musics.html
   ============================================ */

.theme-music {
    --theme-primary: #e59a62;
    --theme-soft: #f2b98a;
    --theme-dim: rgba(229, 154, 98, 0.12);
    --theme-glow: rgba(229, 154, 98, 0.28);
    --theme-bg-start: #14100e;
    --theme-bg-end: #0a0809;
    --mono: 'Share Tech Mono', 'Courier New', monospace;
    --cab-deep: #0a080d;
    --cab-mid: #171219;
    --cab-warm: #2a1e1b;
    --amber: #ffb37a;
    --ember: #ff6b5e;
}

.theme-music .theme-bg {
    background:
        radial-gradient(ellipse at 50% 0%, #241a1c 0%, #120d10 55%, #0a0809 100%);
}

.theme-music .nav.scrolled {
    background: rgba(10, 8, 9, 0.78);
}

/* ---------- page frame ---------- */

.music-page {
    position: relative;
    z-index: 2;
    width: 100%;
}

.cockpit {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 34%, rgba(96, 60, 44, 0.18) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(180deg, #050408 0%, #0d0a10 30%, #131017 55%, #0a080c 100%);
}

@supports (height: 100svh) {
    .cockpit { height: 100svh; }
}

.cockpit button { font-family: inherit; }

.cockpit button:focus-visible,
.cockpit [role="slider"]:focus-visible {
    outline: 2px solid rgba(255, 179, 122, 0.65);
    outline-offset: 2px;
}

/* ---------- ambience layers ---------- */

.cockpit-vignette {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    background:
        radial-gradient(115% 92% at 50% 40%, transparent 46%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0.72) 100%);
}

.grain {
    position: absolute;
    inset: -40px;
    z-index: 61;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cabin-glow {
    position: absolute;
    z-index: 24;
    pointer-events: none;
    left: 50%;
    top: 50%;
    width: min(46vw, 620px);
    height: 40%;
    transform: translate(-50%, -12%);
    background: radial-gradient(50% 55% at 50% 42%, rgba(255, 158, 96, 0.16) 0%, transparent 70%);
    opacity: 0.35;
    transition: opacity 0.9s ease;
}

.cockpit.is-playing .cabin-glow { opacity: 0.85; }

.cabin-bright-layer {
    position: absolute;
    inset: 0;
    z-index: 59;
    pointer-events: none;
    background: radial-gradient(70% 46% at 50% 4%, rgba(255, 205, 150, 0.20) 0%, rgba(255, 190, 130, 0.05) 45%, transparent 70%);
    opacity: 0;
    transition: opacity 0.7s ease;
}

.cockpit.cabin-bright .cabin-bright-layer { opacity: 1; }
.cockpit.cabin-bright .dash { filter: brightness(1.28); }
.cockpit.cabin-bright .roof { filter: brightness(1.35); }

/* ---------- roof / headliner ---------- */

.roof {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9%;
    z-index: 34;
    background: linear-gradient(180deg, #0b090e 0%, #14101a 70%, rgba(20, 16, 26, 0) 100%);
    border-radius: 0 0 30px 30px / 0 0 26px 26px;
    perspective: 500px;
}

.roof::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 190, 140, 0.10) 30%, rgba(255, 190, 140, 0.10) 70%, transparent);
}

.dome-light {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    width: 74px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: linear-gradient(180deg, #17131d, #0d0a12);
    cursor: pointer;
    padding: 0;
}

.dome-bulb {
    position: absolute;
    inset: 4px 22px;
    border-radius: 4px;
    background: #241d26;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.dome-light.on .dome-bulb,
.cockpit.cabin-bright .dome-bulb {
    background: #ffd9a0;
    box-shadow: 0 0 18px rgba(255, 205, 140, 0.8), 0 6px 26px rgba(255, 190, 120, 0.4);
}

.sun-visor {
    position: absolute;
    top: 4px;
    width: clamp(90px, 12vw, 170px);
    height: clamp(34px, 5vh, 50px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1.5px solid rgba(255, 200, 150, 0.16);
    border-radius: 8px 8px 14px 14px;
    background: linear-gradient(180deg, #1e1826 0%, #131019 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    padding: 0;
    transform: rotateX(48deg);
    transform-origin: top center;
    transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.4, 1);
    z-index: 36;
}

.visor-left { left: 11%; }
.visor-right { right: 11%; }

.sun-visor.down { transform: rotateX(9deg); }

/* ---------- windshield ---------- */

.windshield {
    position: absolute;
    top: 6%;
    left: 6%;
    right: 6%;
    height: 44%;
    z-index: 10;
}

.ws-frame {
    position: absolute;
    inset: 0;
    border-radius: 30px 30px 18px 18px;
    overflow: hidden;
    clip-path: polygon(4.2% 0%, 95.8% 0%, 100% 100%, 0% 100%);
    background: #06070c;
    box-shadow:
        inset 0 0 0 1px rgba(140, 170, 230, 0.07),
        inset 0 -30px 60px rgba(0, 0, 0, 0.5);
}

.ws-layers {
    position: absolute;
    inset: 0;
    transform: scale(1.06);
    transform-origin: 50% 42%;
}

.ws-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 58%;
    opacity: 0;
    transition: opacity 0.9s ease;
    transform: scale(1.03);
}

.ws-layer.is-active { opacity: 1; }

.cockpit.is-playing .ws-layers {
    animation: wsDrift 16s ease-in-out infinite alternate;
}

@keyframes wsDrift {
    from { transform: scale(1.05) translateX(-0.6%); }
    to { transform: scale(1.11) translateX(0.8%); }
}

.ws-cover { background-size: cover; background-position: center 30%; }

.ws-speed {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px, transparent 52px,
        rgba(255, 255, 255, 0.05) 52px, rgba(255, 255, 255, 0.05) 54px
    );
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

.cockpit.is-playing .ws-speed {
    opacity: 0.5;
    animation: speedFlow 0.85s linear infinite;
}

@keyframes speedFlow {
    from { background-position-y: 0px; }
    to { background-position-y: 106px; }
}

.ws-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.22) 0%, rgba(10, 10, 18, 0) 30%, rgba(8, 8, 14, 0.12) 82%, rgba(6, 6, 10, 0.5) 100%);
}

.ws-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 30%, rgba(255, 236, 210, 0.05) 44%, rgba(255, 236, 210, 0.10) 47%, transparent 58%);
}

.ws-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 90px rgba(4, 4, 10, 0.55);
    transition: box-shadow 0.7s ease, backdrop-filter 0.7s ease;
}

.windshield.night .ws-layer { filter: brightness(0.52) saturate(0.82); }
.windshield.night .ws-vignette { box-shadow: inset 0 0 130px rgba(2, 2, 8, 0.85); }

/* A-pillars */
.pillar {
    position: absolute;
    top: -2%;
    height: 104%;
    width: 9%;
    z-index: 13;
    background: linear-gradient(90deg, #0a080e 0%, #161220 55%, #0c0a12 100%);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.pillar-left { left: -5.4%; transform: rotate(4.5deg); border-radius: 40px 0 0 60px; }
.pillar-right { right: -5.4%; transform: rotate(-4.5deg); border-radius: 0 40px 60px 0; }

/* bottom edge between glass and dash */
.ws-edge-bottom {
    position: absolute;
    left: -1%;
    right: -1%;
    bottom: -2.2%;
    height: 5%;
    z-index: 14;
    background: linear-gradient(180deg, #0e0b12 0%, #17121c 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
}

/* rearview mirror */
.rearview-mirror {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 13vw, 190px);
    height: clamp(34px, 5.2vh, 52px);
    z-index: 15;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #221c2a 0%, #12101a 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    cursor: pointer;
    padding: 0;
}

.mirror-glass {
    position: absolute;
    inset: 4px 5px 6px;
    border-radius: 6px;
    background: linear-gradient(115deg, #2c3350 0%, #1a2138 45%, #10141f 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    transition: background 0.6s ease;
}

.mirror-glass::after {
    content: '';
    position: absolute;
    right: 12%;
    top: 22%;
    width: 26%;
    height: 30%;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 170, 110, 0.35), rgba(255, 140, 90, 0.08));
    filter: blur(1px);
}

.rearview-mirror.flipped .mirror-glass {
    background: linear-gradient(115deg, #14172a 0%, #0c0e18 60%, #080a10 100%);
}

.rearview-mirror.flipped .mirror-glass::after { opacity: 0.15; }

.mirror-stem {
    position: absolute;
    top: -26%;
    left: 50%;
    transform: translateX(-50%);
    width: 8%;
    height: 30%;
    background: #191521;
    border-radius: 3px;
}

/* ---------- dashboard ---------- */

.dash {
    position: absolute;
    top: 48.5%;
    left: -2%;
    right: -2%;
    bottom: 0;
    z-index: 20;
    background:
        radial-gradient(80% 26% at 50% 0%, rgba(255, 172, 110, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #2c2229 0%, #1d1620 26%, #131017 58%, #0b090e 100%);
    border-radius: 48% 48% 0 0 / 10% 10% 0 0;
    box-shadow:
        inset 0 2px 0 rgba(255, 210, 160, 0.10),
        inset 0 14px 34px rgba(0, 0, 0, 0.35),
        0 -18px 44px rgba(0, 0, 0, 0.55);
    transition: filter 0.7s ease;
}

.dash-sheen {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 16%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: linear-gradient(180deg, rgba(255, 190, 140, 0.07), transparent 70%);
    pointer-events: none;
}

.dash-stitch {
    position: absolute;
    top: 7.5%;
    left: 6%;
    right: 6%;
    height: 20%;
    border-top: 1.5px dashed rgba(255, 200, 150, 0.10);
    border-radius: 50% 50% 0 0 / 26% 26% 0 0;
    pointer-events: none;
}

/* ---------- instrument cluster ---------- */

.cluster {
    position: absolute;
    left: 4%;
    top: 11%;
    z-index: 24;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: clamp(200px, 21vw, 290px);
}

.cluster .gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

.cluster .gauge-wrap { flex-direction: row; align-items: flex-end; gap: 4px; }

.gauge {
    width: clamp(92px, 14.5vmin, 128px);
    height: auto;
}

.gauge-small .gauge { width: clamp(70px, 11vmin, 98px); }

.gauge-tag {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.28em;
    color: rgba(255, 179, 122, 0.55);
    padding-bottom: 10px;
}

.needle-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    transition: transform 1s cubic-bezier(0.3, 1.15, 0.45, 1);
}

.needle {
    transform-box: view-box;
    transform-origin: 100px 100px;
    filter: drop-shadow(0 0 5px rgba(255, 90, 70, 0.7));
}

.cockpit.is-playing .needle {
    animation: needleIdle 1.7s ease-in-out infinite alternate;
}

@keyframes needleIdle {
    from { transform: rotate(-1.4deg); }
    to { transform: rotate(1.6deg); }
}

.odometer {
    align-self: center;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255, 190, 140, 0.6);
    background: rgba(8, 6, 12, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 3px 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- center stack ---------- */

.center-stack {
    position: absolute;
    left: 50%;
    top: 6%;
    transform: translateX(-50%);
    width: clamp(330px, 37vw, 580px);
    z-index: 29;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(6px, 1vh, 10px);
    pointer-events: none;
}

.center-stack > * {
    pointer-events: auto;
}
}

.head-unit {
    position: relative;
    border-radius: 22px;
    padding: 11px 11px 9px;
    background: linear-gradient(180deg, #211c28 0%, #100d15 100%);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: perspective(1000px) rotateX(2.5deg);
}

.hu-glow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -26%;
    height: 46%;
    pointer-events: none;
    background: radial-gradient(50% 60% at 50% 30%, rgba(255, 158, 96, 0.22) 0%, transparent 70%);
    opacity: 0.45;
    transition: opacity 0.9s ease;
}

.cockpit.is-playing .hu-glow { opacity: 1; }

.hu-screen {
    position: relative;
    border-radius: 14px;
    background: linear-gradient(180deg, #070a12 0%, #05070d 100%);
    border: 1px solid rgba(120, 150, 220, 0.09);
    padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.4vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.hu-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(168deg, transparent 42%, rgba(190, 210, 255, 0.035) 46%, transparent 60%);
}

.hu-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: clamp(8px, 0.72vw, 10px);
    letter-spacing: 0.22em;
    color: rgba(160, 190, 255, 0.5);
}

.hu-status-right { display: flex; gap: 12px; align-items: center; }

.hu-mute {
    color: rgba(255, 179, 122, 0.85);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hu-mute.on {
    opacity: 1;
    animation: muteBlink 2.4s ease infinite;
}

@keyframes muteBlink {
    0%, 100% { opacity: 1; }
    55% { opacity: 0.35; }
}

.hu-clock { color: rgba(200, 215, 245, 0.62); }

.hu-main {
    display: flex;
    gap: clamp(10px, 1.2vw, 16px);
    align-items: center;
    min-height: 0;
}

.hu-art {
    flex: 0 0 auto;
    width: clamp(70px, 12.5vmin, 126px);
    aspect-ratio: 1;
    border-radius: 10px;
    background: #0c0f18 center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(150, 170, 220, 0.28);
    transition: box-shadow 0.7s ease;
}

.hu-art-empty { width: 34%; height: 34%; }

.hu-art.has-art {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 150, 90, 0.14);
}

.hu-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hu-title {
    font-family: 'Archivo', var(--cjk), sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 3vmin, 24px);
    letter-spacing: 0.05em;
    color: #f6efe6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hu-artist {
    font-size: clamp(10px, 0.9vw, 12.5px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 179, 122, 0.72);
}

.hu-progress {
    cursor: pointer;
    padding: 5px 0;
    touch-action: none;
}

.hu-progress-track {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.10);
    overflow: visible;
    position: relative;
}

.hu-progress:hover .hu-progress-track { height: 6px; }

.hu-progress-track { transition: height 0.2s ease; }

.hu-progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffb37a, #ff6b5e);
    box-shadow: 0 0 10px rgba(255, 140, 90, 0.45);
    transition: width 0.25s linear;
}

.hu-progress-fill::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffd9b8;
    box-shadow: 0 0 10px rgba(255, 170, 110, 0.8);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hu-progress:hover .hu-progress-fill::after { opacity: 1; }

.hu-times {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: clamp(10px, 0.85vw, 12px);
    letter-spacing: 0.14em;
    color: rgba(200, 210, 235, 0.42);
}

.hu-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 24px);
    padding-top: 2px;
}

.hu-trk {
    position: absolute;
    left: clamp(12px, 1.4vw, 18px);
    bottom: clamp(14px, 1.5vw, 20px);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.2em;
    color: rgba(200, 210, 235, 0.38);
}

.hu-btn {
    width: clamp(32px, 4.6vmin, 42px);
    height: clamp(32px, 4.6vmin, 42px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #ffd9b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.2s ease, box-shadow 0.3s ease;
    padding: 0;
}

.hu-btn svg { width: 48%; height: 48%; }

.hu-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.hu-btn:active { transform: scale(0.92); }

.hu-btn-play {
    width: clamp(42px, 6vmin, 56px);
    height: clamp(42px, 6vmin, 56px);
    background: rgba(255, 179, 122, 0.12);
    border-color: rgba(255, 179, 122, 0.4);
    color: #ffb37a;
    box-shadow: 0 0 22px rgba(255, 140, 80, 0.22), inset 0 0 12px rgba(255, 150, 90, 0.10);
}

.hu-btn-play:hover {
    background: rgba(255, 179, 122, 0.2);
    box-shadow: 0 0 30px rgba(255, 150, 90, 0.4);
}

.hu-btn-play .ic-pause { display: none; }
.hu-btn-play.is-playing .ic-play { display: none; }
.hu-btn-play.is-playing .ic-pause { display: block; }

.hu-btn.deny { animation: denyShake 0.42s ease; }

@keyframes denyShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    55% { transform: translateX(4px); }
    80% { transform: translateX(-2px); }
}

.hu-eq {
    position: absolute;
    right: clamp(12px, 1.4vw, 18px);
    bottom: clamp(14px, 1.5vw, 20px);
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.hu-eq i {
    width: 3px;
    border-radius: 2px;
    background: rgba(255, 179, 122, 0.8);
    height: 30%;
    transform-origin: bottom;
    animation: eqBounce 0.9s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.cockpit.is-playing .hu-eq i { animation-play-state: running; }

.hu-eq i:nth-child(1) { animation-delay: 0s; }
.hu-eq i:nth-child(2) { animation-delay: 0.18s; }
.hu-eq i:nth-child(3) { animation-delay: 0.09s; }
.hu-eq i:nth-child(4) { animation-delay: 0.27s; }
.hu-eq i:nth-child(5) { animation-delay: 0.05s; }
.hu-eq i:nth-child(6) { animation-delay: 0.22s; }
.hu-eq i:nth-child(7) { animation-delay: 0.13s; }

@keyframes eqBounce {
    from { height: 18%; opacity: 0.55; }
    to { height: 100%; opacity: 1; }
}

/* ---------- tape deck ---------- */

.tape-deck {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    padding: 9px 14px;
    background:
        linear-gradient(180deg, #2a2334 0%, #171320 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.deck-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deck-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2a2331;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.deck-led.on { background: #7de8a0; box-shadow: 0 0 10px rgba(120, 230, 160, 0.8); }
.led-mute.on { background: var(--amber); box-shadow: 0 0 10px rgba(255, 179, 122, 0.8); }

.deck-window {
    position: relative;
    flex: 1;
    height: clamp(44px, 8vh, 60px);
    border-radius: 10px;
    background: linear-gradient(180deg, #0a0910 0%, #12101a 100%);
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.deck-window::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(168deg, rgba(200, 220, 255, 0.05) 0%, transparent 38%);
}

.deck-tape {
    --tape-body: #555;
    --tape-ink: #222;
    --tape-label: #ddd;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    height: 74%;
    transform: translate(-50%, 130%) scale(0.72);
    opacity: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--tape-body), color-mix(in srgb, var(--tape-body) 72%, #000));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.35s ease;
}

.deck-tape.inserted {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.deck-tape.ejecting {
    transform: translate(-50%, 130%) scale(0.72);
    opacity: 0;
    transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}

.deck-tape.swapping {
    transform: translate(-84%, -50%) scale(0.92);
    opacity: 0;
    transition: transform 0.26s ease-in, opacity 0.26s ease-in;
}

.deck-label {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 9%;
    height: 38%;
    border-radius: 3px;
    background: var(--tape-label);
    color: var(--tape-ink);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(6px, 0.55vw, 8px);
    letter-spacing: 0.18em;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}

.deck-reels {
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 10%;
    height: 34%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deck-reel {
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, #14100c 0 30%, transparent 31%),
        repeating-conic-gradient(#e8dcc4 0deg 14deg, rgba(0, 0, 0, 0.25) 14deg 60deg);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.cockpit.is-playing .deck-reel { animation: reelSpin 1.7s linear infinite; }
.cockpit.is-playing #reelR { animation-duration: 2.1s; }

@keyframes reelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.deck-empty {
    position: absolute;
    left: 19%;
    right: 19%;
    top: 13%;
    bottom: 13%;
    border: 1.5px dashed rgba(255, 255, 255, 0.13);
    border-radius: 6px;
    transition: opacity 0.3s ease;
}

.deck-tape.inserted ~ .deck-empty { opacity: 0; }

.deck-eject {
    width: clamp(30px, 2.8vw, 38px);
    height: clamp(30px, 2.8vw, 38px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
    color: #ffd9b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.2s ease, opacity 0.3s ease;
    padding: 0;
}

.deck-eject svg { width: 52%; height: 52%; }
.deck-eject:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.deck-eject:active:not(:disabled) { transform: scale(0.92); }
.deck-eject:disabled { opacity: 0.28; cursor: default; }

.deck-brand {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 7px;
    letter-spacing: 0.34em;
    color: rgba(255, 190, 140, 0.32);
    text-transform: uppercase;
}

/* ---------- knobs ---------- */

.deck-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.knob {
    position: relative;
    width: clamp(34px, 4.8vmin, 44px);
    height: clamp(34px, 4.8vmin, 44px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 36% 30%, #413c4e 0%, #241f2e 55%, #120f1a 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(255, 255, 255, 0.03);
    cursor: grab;
    touch-action: none;
    transform: rotate(var(--angle, 0deg));
    transition: transform 0.18s ease;
    padding: 0;
}

.knob:active { cursor: grabbing; }

.knob-index {
    position: absolute;
    left: 50%;
    top: 5px;
    width: 3px;
    height: 22%;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255, 179, 122, 0.7);
}

.knob-toggle.is-on { box-shadow: 0 0 20px rgba(255, 190, 130, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

.knob-leds {
    display: flex;
    gap: 2px;
}

.knob-leds i {
    width: 4px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.10);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.knob-leds i.on {
    background: var(--amber);
    box-shadow: 0 0 7px rgba(255, 179, 122, 0.7);
}

.knob-cap {
    font-size: 7px;
    letter-spacing: 0.3em;
    color: rgba(255, 190, 140, 0.4);
}

/* ---------- right zone ---------- */

.right-zone {
    position: absolute;
    right: 3.4%;
    top: 15%;
    z-index: 24;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.vent {
    position: relative;
    width: clamp(90px, 9.6vw, 132px);
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: linear-gradient(180deg, #262031, #14101b);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: visible;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vent span {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, #3a3244, #221c2c);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.vent.is-on span { background: linear-gradient(180deg, #3d3348, #241d30); }

.vent-air {
    position: absolute;
    left: 12%;
    top: 105%;
    width: 70%;
    height: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.vent.is-on .vent-air { opacity: 1; }

.vent-air i {
    position: absolute;
    top: 0;
    width: 1.5px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 220, 190, 0.28), transparent 80%);
    animation: airflow 1.5s linear infinite;
}

.vent-air i:nth-child(1) { left: 8%; animation-delay: 0s; }
.vent-air i:nth-child(2) { left: 46%; height: 78%; animation-delay: 0.4s; }
.vent-air i:nth-child(3) { left: 80%; height: 88%; animation-delay: 0.8s; }

@keyframes airflow {
    0% { transform: translateY(-8px) scaleY(0.5); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(26px) scaleY(1); opacity: 0; }
}

.hazard {
    width: clamp(38px, 3.4vw, 46px);
    height: clamp(38px, 3.4vw, 46px);
    border-radius: 50%;
    border: 1px solid rgba(255, 120, 100, 0.3);
    background: radial-gradient(circle at 36% 30%, #422b34 0%, #241620 60%, #120a10 100%);
    color: #ff8a7a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.16s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 14px rgba(255, 90, 70, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hazard svg { width: 52%; height: 52%; }
.hazard:hover { transform: translateY(-1px); }
.hazard:active { transform: scale(0.92); }

.hazard.is-on {
    box-shadow: 0 0 24px rgba(255, 90, 70, 0.5);
    animation: hazardBlink 1s steps(2, start) infinite;
}

@keyframes hazardBlink {
    0%, 100% { color: #ff8a7a; border-color: rgba(255, 120, 100, 0.65); }
    50% { color: rgba(255, 138, 122, 0.25); border-color: rgba(255, 120, 100, 0.15); }
}

.reflector {
    width: 34px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(180deg, #d95f4a, #7e2f22);
    box-shadow: 0 0 14px rgba(255, 100, 70, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---------- steering wheel ---------- */

.wheel-zone {
    position: absolute;
    left: -4%;
    bottom: -12%;
    width: clamp(300px, 48vmin, 540px);
    aspect-ratio: 1;
    z-index: 26;
    pointer-events: none;
}

.wheel {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.55));
}

.stalk-left {
    position: absolute;
    left: 12%;
    top: 30%;
    width: 15%;
    height: 3.2%;
    border-radius: 6px;
    background: linear-gradient(180deg, #241f2d, #120f19);
    transform: rotate(12deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.door-left {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.6%;
    height: 62%;
    z-index: 21;
    background: linear-gradient(90deg, #050408 0%, #100d16 80%, transparent 100%);
}

.door-switch {
    position: absolute;
    left: 26%;
    width: 42%;
    height: 5px;
    border-radius: 3px;
    background: #1d1826;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.door-switch:nth-child(1) { top: 30%; }
.door-switch:nth-child(2) { top: 40%; }

.door-led {
    position: absolute;
    left: 38%;
    top: 52%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 179, 122, 0.75);
    box-shadow: 0 0 10px rgba(255, 179, 122, 0.55);
}

/* ---------- passenger seat ---------- */

.seat-passenger {
    position: absolute;
    right: -1%;
    bottom: -3%;
    width: clamp(130px, 23vmin, 250px);
    height: 56%;
    z-index: 21;
    transform: rotate(2.5deg);
    pointer-events: none;
}

.seat-headrest {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46%;
    height: 20%;
    border-radius: 42% 42% 34% 34% / 52% 52% 40% 40%;
    background: linear-gradient(120deg, #221d29 0%, #14111b 70%);
    box-shadow: inset -3px 2px 6px rgba(255, 255, 255, 0.03), 0 8px 20px rgba(0, 0, 0, 0.4);
}

.seat-back {
    position: absolute;
    bottom: 0;
    left: 6%;
    right: 6%;
    height: 82%;
    border-radius: 46% 46% 10% 10% / 26% 26% 8% 8%;
    background: linear-gradient(100deg, #1c1722 0%, #120f19 55%, #0c0a11 100%);
    box-shadow: inset -4px 3px 10px rgba(255, 255, 255, 0.035), 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* ---------- windshield scene dots ---------- */

.scene-dots {
    position: absolute;
    left: 50%;
    top: 51%;
    transform: translateX(calc(-50% + clamp(180px, 20vw, 320px)));
    z-index: 27;
    display: flex;
    gap: 10px;
    align-items: center;
}

.scene-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    padding: 0;
    opacity: 0.42;
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.scene-dot[data-scene="dusk"] { background: #f0975c; }
.scene-dot[data-scene="city"] { background: #6fb3e8; }
.scene-dot[data-scene="stars"] { background: #a99ae0; }
.scene-dot[data-scene="cover"] { background: #e86a5a; }

.scene-dot:hover { opacity: 0.85; transform: scale(1.12); }

.scene-dot.is-active {
    opacity: 1;
    transform: scale(1.22);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 200, 150, 0.55);
}

/* ---------- cassette rack ---------- */

.rack-wrap {
    position: absolute;
    left: 50%;
    bottom: 1.8%;
    transform: translateX(-50%);
    z-index: 28;
    padding: 14px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(12, 9, 14, 0.72) 0%, rgba(6, 5, 9, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.rack {
    display: flex;
    gap: 12px;
}

.cassette {
    --tape-body: #888;
    --tape-ink: #222;
    --tape-label: #ddd;
    position: relative;
    width: clamp(96px, 10.6vw, 142px);
    aspect-ratio: 100 / 62;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--tape-body) 0%, color-mix(in srgb, var(--tape-body) 74%, #000) 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 0;
    transition: transform 0.28s cubic-bezier(0.3, 1.3, 0.4, 1), box-shadow 0.28s ease, opacity 0.3s ease, filter 0.3s ease;
}

.cassette:hover {
    transform: translateY(-8px) rotate(-1.6deg);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cassette:active { transform: translateY(-3px) scale(0.98); }

.cassette.hidden-slot {
    opacity: 0.14;
    filter: saturate(0.4) brightness(0.7);
    transform: translateY(5px);
}

.cassette.is-pulling {
    transform: translateY(-18px) scale(1.1) rotate(1.5deg);
    opacity: 0.85;
}

.cas-screw {
    position: absolute;
    bottom: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cas-screw-a { left: 5px; }
.cas-screw-b { right: 5px; }

.cas-label {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 6%;
    height: 52%;
    border-radius: 3px;
    background: var(--tape-label);
    color: var(--tape-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
}

.cas-label b {
    font-family: 'Archivo', var(--cjk), sans-serif;
    font-weight: 700;
    font-size: clamp(8.5px, 0.78vw, 11.5px);
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.cas-label i {
    font-style: normal;
    font-family: var(--mono);
    font-size: clamp(6.5px, 0.55vw, 8.5px);
    letter-spacing: 0.14em;
    opacity: 0.72;
    white-space: nowrap;
}

.cas-window {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 9%;
    height: 30%;
    border-radius: 3px;
    background: rgba(10, 8, 6, 0.55);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12%;
}

.cas-reel {
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(20, 14, 8, 0.9) 0 32%, transparent 33%),
        repeating-conic-gradient(rgba(245, 238, 220, 0.95) 0deg 16deg, rgba(0, 0, 0, 0.28) 16deg 60deg);
}

.rack.hinting .cassette { animation: hintPulse 0.9s ease; }

@keyframes hintPulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    40% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 170, 110, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}

.music-corner {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 29;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: rgba(255, 190, 140, 0.30);
    pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-height: 760px) {
    .gauge { width: clamp(72px, 12.5vmin, 104px); }
    .gauge-small .gauge { width: clamp(56px, 9.5vmin, 80px); }
    .odometer { margin-top: 4px; font-size: 9px; }
    .deck-brand { display: none; }
    .rack-wrap { padding: 10px 14px 12px; bottom: 2%; }
    .right-zone { top: 18%; gap: 14px; }
    .vent { width: clamp(80px, 8.6vw, 110px); }
    .hu-screen { gap: 5px; }
    .tape-deck { gap: 8px; padding: 7px 10px; }
    .seat-passenger { height: 50%; }
}

@media (max-width: 1100px) {
    .center-stack { width: clamp(320px, 44vw, 480px); }
    .scene-dots { transform: translateX(calc(-50% + clamp(170px, 23vw, 260px))); }
}

@media (max-width: 900px) {
    .cockpit { min-height: 560px; }

    .cluster { left: 2.4%; top: 13%; }
    .gauge { width: clamp(64px, 9vw, 92px); }
    .gauge-small .gauge { width: clamp(50px, 7vw, 72px); }
    .gauge-tag { display: none; }

    .center-stack { width: min(88vw, 430px); top: 7.5%; }
    .right-zone { display: none; }
    .scene-dots {
        left: auto;
        right: 3.5%;
        top: 49%;
        transform: none;
        flex-direction: column;
    }

    .wheel-zone {
        left: -14%;
        bottom: -34%;
        width: clamp(220px, 46vmin, 380px);
        opacity: 0.9;
    }

    .seat-passenger { opacity: 0.85; }
    .rack-wrap { transform: translateX(-50%); padding: 10px 12px 12px; }
    .rack { gap: 8px; }
    .cassette { width: clamp(74px, 17vw, 110px); }
}

@media (max-width: 620px) {
    .cockpit { min-height: 520px; }

    .cluster { display: none; }

    .windshield { top: 7%; height: 42%; left: 4%; right: 4%; }
    .sun-visor { display: none; }

    .center-stack { width: min(92vw, 400px); top: 6%; gap: 8px; }
    .hu-main { min-height: 0; }
    .hu-art { width: 74px; }
    .hu-title { font-size: 14px; }

    .deck-brand { display: none; }

    .knob { width: 32px; height: 32px; }
    .knob-leds { display: none; }

    .wheel-zone { left: -18%; bottom: -40%; width: 200px; opacity: 0.55; }
    .door-left, .seat-passenger { display: none; }

    .rack-wrap { padding: 8px 10px 10px; bottom: 1.6%; }
    .rack { gap: 6px; }
    .cassette { width: calc(25% - 5px); min-width: 0; }
    .rack { width: min(92vw, 420px); }
    .cas-label b { font-size: 6px; }
    .cas-label i { display: none; }

    .music-corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cockpit.is-playing .ws-layers,
    .cockpit.is-playing .ws-speed,
    .cockpit.is-playing .deck-reel,
    .cockpit.is-playing .needle,
    .cockpit.is-playing .hu-eq i {
        animation: none;
    }
}

/* ============================================
   Music v2 — tape library walls + windshield lyrics
   ============================================ */

/* ---------- tape library (cassette spines) ---------- */

.spine-col {
    position: absolute;
    top: 10%;
    bottom: 22%;
    width: clamp(96px, 10.6vw, 152px);
    z-index: 27;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(3px, 0.42vh, 6px);
    pointer-events: none;
}

.spine-col .spine { pointer-events: auto; }

.spine-left { left: clamp(190px, 24.2vw, 376px); }
.spine-right { right: clamp(190px, 24.2vw, 376px); }

.spine {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: clamp(18px, 2.6vh, 26px);
    padding: 0 10px 0 8px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tape-body) 88%, #fff) 0%,
        var(--tape-body) 12%,
        color-mix(in srgb, var(--tape-body) 74%, #000) 100%);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 4px rgba(0, 0, 0, 0.28);
    color: var(--tape-ink);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
    overflow: hidden;
    flex: 0 0 auto;
}

.spine:nth-child(odd) { transform: rotate(-0.5deg); }
.spine:nth-child(even) { transform: rotate(0.45deg); }

.spine:hover {
    transform: translateY(-2px) rotate(0deg);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.5),
        0 0 18px color-mix(in srgb, var(--tape-body) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.08);
    z-index: 2;
}

.spine-brand {
    flex: 0 0 auto;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(7px, 0.6vw, 9px);
    letter-spacing: 0.06em;
    padding: 1.5px 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.75;
}

.spine-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Archivo', var(--cjk), sans-serif;
    font-weight: 700;
    font-size: clamp(9.5px, 0.92vw, 13px);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spine-no {
    flex: 0 0 auto;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(7px, 0.6vw, 9px);
    opacity: 0.65;
}

.spine-led {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.spine.is-active {
    filter: brightness(1.12);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.5),
        0 0 22px color-mix(in srgb, var(--tape-body) 70%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.spine.is-active .spine-led {
    background: #ffe9b0;
    box-shadow: 0 0 8px #ffcf7a, 0 0 14px rgba(255, 190, 100, 0.7);
    animation: spinePulse 1.6s ease-in-out infinite;
}

@keyframes spinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ---------- windshield lyrics ---------- */

.lyric-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.cockpit.has-tape .lyric-layer { opacity: 1; }

/* album cover melts into the scenery */
.lyric-tint {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    mix-blend-mode: soft-light;
    opacity: 0.75;
    -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 34%, transparent 62%);
    mask-image: linear-gradient(100deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 34%, transparent 62%);
    transition: opacity 0.8s ease;
}

/* soft dark panel behind the lyric column (right side) */
.lyric-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    background: linear-gradient(to left, rgba(7, 6, 12, 0.52) 0%, rgba(7, 6, 12, 0.28) 45%, transparent 100%);
}

.lyric-scroll {
    position: absolute;
    top: 0;
    right: clamp(20px, 3.2vw, 60px);
    width: clamp(200px, 24vw, 360px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(10px, 2.2vh, 20px);
    padding-top: 24%;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.3, 1);
    will-change: transform;
}

.lyric-line {
    flex: 0 0 auto;
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.65vw, 23px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.26);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    transition: color 0.5s ease, opacity 0.5s ease, transform 0.5s ease, text-shadow 0.5s ease;
    transform-origin: left center;
    white-space: normal;
}

.lyric-line.is-past { color: rgba(255, 255, 255, 0.14); }

/* Chinese lyrics: pixel face hurts readability at this size */
.lyric-line.is-cjk {
    font-family: var(--cjk), sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.5;
}

.lyric-line.is-active {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 18px rgba(255, 210, 150, 0.35), 0 2px 12px rgba(0, 0, 0, 0.6);
    transform: scale(1.06);
}

.lyric-tint::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 30%, transparent 55%);
    mask-image: linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 30%, transparent 55%);
    opacity: 0.32;
    mix-blend-mode: normal;
}

/* on the full-cover view the tint is redundant — lyrics float on the art */
.ws-frame.cover-view .lyric-tint { opacity: 0; }
.ws-frame.cover-view .lyric-fade {
    background: linear-gradient(to left, rgba(7, 6, 12, 0.42) 0%, transparent 100%);
}

/* ---------- responsive ---------- */

@media (max-width: 1250px) {
    .spine-left { left: clamp(158px, 21vw, 320px); }
    .spine-right { right: clamp(158px, 21vw, 320px); }
    .spine-col { width: clamp(80px, 8.4vw, 110px); }
}

@media (max-width: 1100px) {
    .spine-col { display: none; }
    .lyric-scroll { width: min(46vw, 300px); }
}

@media (max-width: 900px) {
    .lyric-scroll {
        right: 4%;
        width: 62vw;
        gap: 12px;
    }
    .lyric-line { font-size: 13px; }
    .lyric-fade { width: 72%; }
}

@media (max-width: 720px) {
    .lyric-line { font-size: 12px; }
    .lyric-tint { opacity: 0.55; }
}

/* ============================================
   LETTER — the desk room
   theme-letter · message.html
   ============================================ */

.theme-letter {
    /* pixel display face — Silkscreen Bold is the chunky one.
       'Ark Pixel' (self-hosted, OFL) renders the CJK so the Chinese
       desktop keeps the pixel look; Latin still comes from Silkscreen
       because it is listed first. */
    --px: 'Silkscreen', 'Ark Pixel', 'Press Start 2P', 'Share Tech Mono', monospace;
    --term: 'Share Tech Mono', 'Ark Pixel', 'Courier New', monospace;
    --serif2: 'Cormorant Garamond', Georgia, serif;
    --hand: 'Caveat', 'Ma Shan Zheng', cursive;
    /* CJK — pixel first, real bold system face as offline fallback */
    --cjk: 'Ark Pixel', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* room + light */
    --lamp: #ffcf95;
    --wood-a: #4b3527;
    --wood-b: #2b1e15;

    /* monitor shell */
    --shell-a: #efe7d5;
    --shell-b: #d5cbb4;
    --shell-c: #b6ab95;

    /* pixel desktop */
    --ui-cream: #fdfaf0;
    --ui-ink: #26292e;
    --ui-ink-soft: #767b82;
    --ui-teal: #4fa89b;
    --ui-teal-deep: #2d6a63;
    --ui-blue: #a9d9ea;
    --ui-pink: #f2a3bb;
    --ui-yellow: #f6cf6a;
    --ui-peach: #f6c9a4;
}

.theme-letter .theme-bg {
    background: radial-gradient(ellipse at 50% 40%, #16211e 0%, #090f0e 62%);
}

.theme-letter .nav.scrolled {
    background: rgba(8, 13, 12, 0.82);
}

/* ---------- page frame ---------- */

.letter-page {
    position: relative;
    z-index: 2;
    width: 100%;
}

.room {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 680px;
    overflow: hidden;
    isolation: isolate;

    /* One knob drives the whole monitor */
    /* the screen tracks BOTH axes: vh keeps it big, vw stops it
       outgrowing a narrow window (monitor = glass-w + 68px) */
    --glass-h: clamp(280px, min(calc(74vh - 232px), calc((55vw - 60px) / 1.6)), 640px);
    --glass-w: calc(var(--glass-h) * 1.6);
    --mon-w: calc(var(--glass-w) + 68px);
    /* where the monitor shell starts (its right offset is 10% above 1240px, 7% below) */
    --mon-left: calc(90vw - var(--mon-w));
    /* the 12 spines + gaps ≈ 27.5u wide; grow the unit to fit the wall but keep
       a clear gap to the monitor. Without this the shelf was vh-bound and stayed
       tiny on short laptops even though there was 150–300px of spare wall. */
    --u-fit: calc((var(--mon-left) - 4vw - 90px) / 27.5);
    /* the vh term only caps how tall the spines may get; on short laptops the
       width term above is what lets the shelf grow instead of shrinking to ~7px text */
    --u: min(1.95vh, var(--u-fit));

    background:
        radial-gradient(54% 40% at 10% 76%, rgba(255, 191, 122, 0.20) 0%, rgba(255, 168, 88, 0.06) 44%, transparent 74%),
        radial-gradient(48% 38% at 64% 88%, rgba(148, 226, 236, 0.13) 0%, transparent 72%),
        linear-gradient(180deg,
            #1e2926 0%, #182320 30%, #111a18 62%, #0c1312 72%,
            #43301f 72%, #38281a 78%, #2a1d13 88%, #221610 100%);
}

@supports (height: 100svh) {
    .room { height: 100svh; }
}

.room button:focus-visible,
.room [tabindex]:focus-visible {
    outline: 2px solid rgba(150, 226, 214, 0.7);
    outline-offset: 3px;
}

/* the objects live in a centred stage so ultra-wide screens stay composed */
.room-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1680px;
    margin: 0 auto;
}

/* full-bleed helper for room surfaces that must ignore the stage width */
.wall-lines,
.wall-baseboard,
.desk-top,
.desk-apron {
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}

/* ---------- wall ---------- */

.room-wall {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 28%;
    z-index: 2;
}

.wall-glow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6%;
    height: 130%;
    pointer-events: none;
    background:
        radial-gradient(26% 30% at 12% 74%, rgba(255, 196, 132, 0.22) 0%, rgba(255, 178, 100, 0.07) 45%, transparent 72%),
        radial-gradient(30% 34% at 68% 56%, rgba(140, 222, 232, 0.10) 0%, transparent 70%);
    filter: blur(2px);
    transition: opacity 0.7s ease;
}

.wall-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 240, 214, 0.030) 0px,
            rgba(255, 240, 214, 0.030) 1px,
            transparent 1px,
            transparent 46px),
        linear-gradient(180deg, rgba(255, 236, 205, 0.05) 0%, transparent 40%);
}

.wall-baseboard {
    position: absolute;
    bottom: 0;
    height: 14px;
    background: linear-gradient(180deg, #232e2a 0%, #18211f 60%, #0e1514 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

/* ---------- bookshelf ---------- */

.shelf {
    position: absolute;
    left: 4%;
    top: 11vh;
    z-index: 6;
    padding: 0 calc(var(--u) * 0.6);
}

.shelf-books {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--u) * 0.16);
    padding-left: calc(var(--u) * 0.7);
    padding-right: calc(var(--u) * 0.6);
    min-height: calc(var(--u) * 12);
}

.shelf-board {
    position: relative;
    height: calc(var(--u) * 0.72);
    margin-left: calc(var(--u) * -0.6);
    margin-right: calc(var(--u) * -0.6);
    border-radius: 2px;
    background: linear-gradient(180deg, var(--wood-a) 0%, #3a281c 42%, #241811 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 216, 168, 0.22),
        0 10px 20px rgba(0, 0, 0, 0.5),
        0 2px 0 rgba(0, 0, 0, 0.35);
}

.shelf-board-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 160, 0.35) 22%, rgba(255, 214, 160, 0.35) 78%, transparent);
}

.shelf-bracket {
    position: absolute;
    bottom: calc(var(--u) * -0.5);
    width: calc(var(--u) * 0.62);
    height: calc(var(--u) * 0.8);
    background: linear-gradient(180deg, #2b1d14, #1a110b);
    border-radius: 0 0 2px 2px;
    opacity: 0.9;
}

.shelf-bracket-l { left: calc(var(--u) * 0.7); }
.shelf-bracket-r { right: calc(var(--u) * 0.7); }

.shelf-tag {
    position: absolute;
    right: calc(var(--u) * -0.4);
    bottom: calc(var(--u) * -1.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-4deg);
}

.shelf-tag-string {
    width: 1px;
    height: calc(var(--u) * 0.7);
    background: rgba(240, 226, 196, 0.35);
}

.shelf-tag-label {
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--u) * 0.44);
    letter-spacing: 0.06em;
    color: #2b2118;
    background: linear-gradient(180deg, #e8d9a8, #d9c48c);
    padding: calc(var(--u) * 0.3) calc(var(--u) * 0.28);
    border-radius: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

/* book spines — VHS-tape styling */

.book {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--u) * var(--bw));
    height: calc(var(--u) * var(--bh));
    border-radius: 1px 2px 2px 1px;
    background: linear-gradient(90deg, var(--b1) 0%, var(--b2) 58%, var(--b3) 100%);
    color: var(--inkc, #f2e7cf);
    cursor: pointer;
    padding: calc(var(--u) * 0.24) calc(var(--u) * 0.1) calc(var(--u) * 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 0.18);
    transform-origin: bottom center;
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.16),
        inset -2px 0 4px rgba(0, 0, 0, 0.42),
        2px 3px 7px rgba(0, 0, 0, 0.5);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease, filter 0.4s ease;
}

.book::before {
    /* glossy spine highlight */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.16) 0%, transparent 34%, transparent 68%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}

.book:hover {
    transform: translateY(calc(var(--u) * -0.42)) rotate(-1.4deg);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset -2px 0 4px rgba(0, 0, 0, 0.4),
        3px 6px 14px rgba(0, 0, 0, 0.6);
    filter: brightness(1.12);
}

.book.is-out {
    transform: translateY(calc(var(--u) * -1.5)) rotate(-3.4deg);
    box-shadow: 3px 10px 22px rgba(0, 0, 0, 0.66);
    filter: brightness(1.18);
}

.book.is-out::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px rgba(255, 226, 176, 0.5);
    pointer-events: none;
}

.book.is-lean {
    transform: rotate(var(--lean, -8deg));
    transform-origin: bottom left;
    margin-left: calc(var(--u) * -0.2);
}

.book.is-lean:hover {
    transform: rotate(calc(var(--lean, -8deg) + 3deg)) translateY(calc(var(--u) * -0.3));
}

.book.is-flat {
    transform: rotate(90deg);
    transform-origin: bottom left;
}

.book.is-foil::before {
    background:
        linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.55) 36%, rgba(176, 255, 240, 0.4) 44%, rgba(255, 190, 235, 0.35) 52%, transparent 72%),
        linear-gradient(100deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
    mix-blend-mode: screen;
    animation: bookFoil 7s ease-in-out infinite;
}

@keyframes bookFoil {
    0%, 100% { opacity: 0.55; transform: translateX(-6%); }
    50% { opacity: 1; transform: translateX(6%); }
}

.book-band {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--u) * 0.34);
    line-height: 1;
    letter-spacing: 0.02em;
    padding: calc(var(--u) * 0.26) 0;
    color: var(--bandink, #2b2118);
    background: var(--band, #e6d7ae);
    border-radius: 1px;
    writing-mode: horizontal-tb;
    white-space: nowrap;
}

.book-patch {
    width: 82%;
    height: calc(var(--u) * 2.4);
    border-radius: 1px;
    background: var(--patch, linear-gradient(160deg, #7d8f9c, #3d4a52));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.book-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--u) * 0.7);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.book-title.is-hand {
    font-family: var(--hand);
    font-size: calc(var(--u) * 1.3);
    letter-spacing: 0;
}

.book-title.is-serif {
    font-family: var(--serif2);
    font-size: calc(var(--u) * 0.98);
    font-style: italic;
    letter-spacing: 0.04em;
}

/* label card shown when a book is pulled out */
.shelf-note {
    position: absolute;
    left: 50%;
    top: calc(100% + var(--u) * 1.2);
    transform: translate(-50%, -6px) scale(0.94);
    width: max-content;
    max-width: calc(var(--u) * 15);
    padding: calc(var(--u) * 0.72) calc(var(--u) * 0.8) calc(var(--u) * 0.8);
    background: rgba(253, 250, 240, 0.97);
    color: #2a2620;
    border-radius: 2px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}

.shelf-note::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: rgba(253, 250, 240, 0.97);
}

.shelf-note.is-on {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.shelf-note-title {
    display: block;
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--u) * 0.46);
    line-height: 1.7;
    letter-spacing: 0.04em;
    margin-bottom: calc(var(--u) * 0.44);
}

.shelf-note-line {
    display: block;
    font-family: var(--hand);
    font-size: calc(var(--u) * 1.28);
    line-height: 1.2;
    color: #57493a;
}

.shelf-note-tag {
    display: block;
    margin-top: calc(var(--u) * 0.34);
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--u) * 0.34);
    letter-spacing: 0.08em;
    color: #9b8f7c;
}

/* ---------- wall decorations ---------- */

.wall-frame {
    position: absolute;
    left: 30%;
    top: 42vh;
    width: clamp(78px, 11vh, 132px);
    transform: rotate(-1.5deg);
    z-index: 4;
}

.wall-frame-mat {
    padding: 6% 6% 6%;
    background: linear-gradient(160deg, #3b2a1d, #241811);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 216, 168, 0.2);
    border-radius: 2px;
}

.wall-frame-art {
    aspect-ratio: 3 / 4;
    background:
        radial-gradient(60% 40% at 50% 22%, rgba(255, 232, 190, 0.85) 0%, transparent 70%),
        linear-gradient(180deg, #cbbfa4 0%, #6f7f76 42%, #2f4a45 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    position: relative;
}

.wall-frame-art::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 16%;
    height: 34%;
    background: linear-gradient(180deg, rgba(20, 34, 31, 0.85), rgba(12, 22, 20, 0.95));
    clip-path: polygon(0% 100%, 18% 42%, 34% 68%, 52% 22%, 74% 60%, 100% 100%);
}

.wall-pin {
    position: absolute;
    /* pinned photo — sits under the shelf on the empty wall left of the frame.
       (the spines can reach 34vh tall, so anything higher gets covered) */
    left: 9%;
    top: 39vh;
    z-index: 4;
}

.pin-dot {
    position: absolute;
    left: 50%;
    top: -5px;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd7b0, #c0653f 60%, #7d3a22);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.pin-photo {
    width: clamp(56px, 7.4vh, 86px);
    padding: 8% 8% 18%;
    background: #efe7d7;
    transform: rotate(6deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

.pin-photo-art {
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(38% 34% at 62% 32%, #ffd9a2 0%, transparent 60%),
        linear-gradient(180deg, #3f6b62 0%, #22403c 55%, #16292a 100%);
    position: relative;
    overflow: hidden;
}

.pin-photo-art::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 12%;
    height: 26%;
    background: linear-gradient(180deg, rgba(255, 233, 198, 0.5), rgba(255, 200, 140, 0.12));
    clip-path: polygon(0% 100%, 26% 30%, 48% 62%, 70% 18%, 100% 100%);
}

/* ---------- desk ---------- */

.desk {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    z-index: 8;
}

.desk-top {
    position: absolute;
    top: 0;
    height: 36%;
    background:
        radial-gradient(70% 120% at 14% 40%, rgba(255, 196, 132, 0.22) 0%, transparent 62%),
        linear-gradient(180deg, rgba(12, 19, 18, 0.55) 0%, rgba(30, 21, 14, 0.1) 26%, rgba(255, 210, 160, 0.06) 60%, rgba(0, 0, 0, 0.25) 100%),
        linear-gradient(180deg, #3c2b1d 0%, #4a3524 34%, #3d2c1e 72%, #2e2116 100%);
    box-shadow: inset 0 1px 0 rgba(255, 214, 160, 0.16), 0 18px 30px rgba(0, 0, 0, 0.45);
}

.desk-apron {
    position: absolute;
    top: 36%;
    bottom: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 30%),
        linear-gradient(180deg, #2b1e15 0%, #241a12 46%, #1a120c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 206, 150, 0.1);
}

.desk-grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        repeating-linear-gradient(94deg, rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 26px),
        repeating-linear-gradient(88deg, rgba(255, 200, 150, 0.05) 0px, rgba(255, 200, 150, 0.05) 1px, transparent 1px, transparent 61px);
}

.desk-mat {
    position: absolute;
    left: 28%;
    right: 6%;
    bottom: 66%;
    height: 22%;
    border-radius: 5px;
    background: linear-gradient(180deg, #1b1f1e 0%, #141817 62%, #0e1110 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 8px 18px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* ---------- desk lamp ---------- */

.lamp {
    position: absolute;
    left: 3.5%;
    bottom: 72%;
    width: clamp(64px, min(13vh, 8.2vw), 150px);
    height: clamp(74px, min(15vh, 9.4vw), 172px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 12;
}

.lamp-cone {
    position: absolute;
    left: 6%;
    bottom: 8%;
    width: 260%;
    height: 200%;
    pointer-events: none;
    /* the pool of light hangs off the lit mouth, not off the middle of the shade */
    background: radial-gradient(32% 28% at 13% 71%, rgba(255, 214, 158, 0.30) 0%, rgba(255, 182, 104, 0.10) 46%, transparent 78%);
    opacity: 1;
    transition: opacity 0.7s ease;
}

.lamp-shade {
    position: absolute;
    left: 6%;
    top: 2%;
    width: 58%;
    height: 31%;
    background: linear-gradient(102deg, #fdf7e8 0%, #f0e0be 34%, #cbb188 68%, #8e7752 100%);
    clip-path: polygon(24% 0%, 76% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 7px 13px rgba(0, 0, 0, 0.48));
    transform: rotate(-9deg);
    transform-origin: 78% 100%;
}

.lamp-bulb {
    /* the lit mouth of the shade: an ellipse straddling the shade's bottom edge */
    position: absolute;
    left: 6.5%;
    top: 29.5%;
    width: 57%;
    height: 11%;
    border-radius: 50%;
    transform: rotate(-9deg);
    transform-origin: 50% 0;
    background: radial-gradient(58% 118% at 50% 14%, #fff8e6 0%, #ffd99f 44%, rgba(255, 195, 124, 0.35) 76%, rgba(255, 190, 118, 0) 100%);
    filter: blur(0.8px);
    opacity: 0.95;
    transition: opacity 0.5s ease;
}

.lamp-neck {
    position: absolute;
    left: 35%;
    top: 34%;
    width: 5%;
    height: 58%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6d5a3f, #dccaa6 42%, #665239);
    transform: rotate(11deg);
    transform-origin: top center;
}

.lamp-base {
    position: absolute;
    left: 26%;
    bottom: 3%;
    width: 44%;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(56% 130% at 40% 20%, #ddcda8 0%, #a08c66 46%, #4a3e2b 100%);
    box-shadow: 0 7px 13px rgba(0, 0, 0, 0.55);
}

.lamp:not(.is-on) .lamp-bulb { opacity: 0.16; filter: blur(1.6px) grayscale(0.45); }
.lamp:not(.is-on) .lamp-cone { opacity: 0; }
.lamp:not(.is-on) .lamp-shade { filter: brightness(0.6) saturate(0.72) drop-shadow(0 7px 13px rgba(0, 0, 0, 0.48)); }

.room.lamp-off .wall-glow { opacity: 0.12; }
.room.lamp-off .desk-top { filter: brightness(0.72); }
.room.lamp-off .room-vignette { opacity: 1; }

/* ---------- desk props ---------- */

.prop {
    position: absolute;
    z-index: 10;
}

.prop-mug {
    left: 87%;
    bottom: 86%;
    width: clamp(26px, min(5.6vh, 3.5vw), 62px);
}

.mug-body {
    position: relative;
    display: block;
    height: clamp(28px, 5vh, 56px);
    border-radius: 12% 12% 26% 26% / 8% 8% 22% 22%;
    background: linear-gradient(100deg, #f4efe4 0%, #ded6c5 52%, #b9ae99 100%);
    box-shadow: inset -6px 0 12px rgba(70, 60, 45, 0.28), 0 10px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mug-heart {
    font-size: clamp(11px, 1.9vh, 19px);
    color: #c9584f;
    line-height: 1;
}

.mug-handle {
    position: absolute;
    right: -26%;
    top: 24%;
    width: 30%;
    height: 44%;
    border: clamp(3px, 0.55vh, 6px) solid #e6ddcb;
    border-left: 0;
    border-radius: 0 50% 50% 0;
}

.mug-steam {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 5px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(180deg, transparent, rgba(255, 240, 220, 0.4), transparent);
    filter: blur(2.5px);
    opacity: 0;
    animation: mugSteam 5.5s ease-in-out infinite;
}

.mug-steam-2 { animation-delay: 1.6s; left: 34%; }
.mug-steam-3 { animation-delay: 3.1s; left: 66%; }

@keyframes mugSteam {
    0% { opacity: 0; transform: translateY(6px) scaleX(1); }
    30% { opacity: 0.75; }
    100% { opacity: 0; transform: translateY(-34px) scaleX(1.7); }
}

.prop-pens {
    left: 17%;
    bottom: 86%;
    width: clamp(30px, min(6vh, 3.75vw), 66px);
    height: clamp(36px, min(7vh, 4.4vw), 78px);
}

.pen {
    position: absolute;
    bottom: 34%;
    width: 8%;
    height: 76%;
    border-radius: 3px 3px 0 0;
    transform-origin: bottom center;
}

.pen-1 { left: 22%; height: 82%; background: linear-gradient(180deg, #6f9f92, #37534c); transform: rotate(-9deg); }
.pen-2 { left: 45%; height: 74%; background: linear-gradient(180deg, #e3c98f, #a98a4e); transform: rotate(3deg); }
.pen-3 { left: 66%; height: 68%; background: linear-gradient(180deg, #d8836f, #8d4034); transform: rotate(11deg); }

.pen-cup {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    border-radius: 8% 8% 14% 14% / 12% 12% 20% 20%;
    background: linear-gradient(100deg, #3d5147 0%, #24322c 55%, #16201c 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 10px 18px rgba(0, 0, 0, 0.5);
}

.prop-polaroid {
    left: 33%;
    bottom: 68%;
    z-index: 11;
    /* one width unit drives the card, its white band and the handwriting size,
       so the caption can never run off the card */
    --pw: clamp(58px, min(10.5vh, 6.6vw), 124px);
}

.polaroid-frame {
    position: relative;
    width: var(--pw);
    padding: calc(var(--pw) * 0.06) calc(var(--pw) * 0.06) calc(var(--pw) * 0.22);
    background: linear-gradient(170deg, #f7f2e6, #e2d9c6);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
    transform: rotate(-7deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.prop-polaroid:hover .polaroid-frame { transform: rotate(-2deg) translateY(-4px); }

.polaroid-art {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #93a7a0 0%, #5a6f68 46%, #2f3d3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* a car whose plate you cannot read — the teaser for the question that locks the letter */
.polaroid-art::before {
    content: '';
    position: absolute;
    left: 13%;
    right: 13%;
    bottom: 19%;
    height: 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent 80%);
    filter: blur(2px);
}

.polaroid-car {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 26%;
    height: 19%;
    border-radius: 26% 26% 16% 16% / 62% 62% 26% 26%;
    background: linear-gradient(180deg, #f4ecdc 0%, #d8cbb3 56%, #a89b83 100%);
    box-shadow: inset 0 -2px 4px rgba(70, 62, 48, 0.32), 0 4px 7px rgba(0, 0, 0, 0.35);
}

.polaroid-car::before {
    /* cabin */
    content: '';
    position: absolute;
    left: 26%;
    right: 26%;
    bottom: 88%;
    height: 92%;
    border-radius: 46% 46% 10% 10% / 78% 78% 16% 16%;
    background: linear-gradient(180deg, rgba(238, 243, 240, 0.95) 0%, rgba(150, 166, 160, 0.78) 62%, rgba(96, 112, 108, 0.72) 100%);
    border: 1px solid rgba(46, 56, 53, 0.35);
}

.polaroid-car::after {
    /* both wheels, one pseudo */
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -30%;
    height: 46%;
    background:
        radial-gradient(circle closest-side at 20% 50%, #1e2426 0 100%, transparent 100%),
        radial-gradient(circle closest-side at 80% 50%, #1e2426 0 100%, transparent 100%);
}

.polaroid-plate {
    position: absolute;
    left: 50%;
    top: 64.5%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--pw) * 0.072);
    letter-spacing: 0.1em;
    color: #efe6d2;
    background: rgba(20, 28, 26, 0.72);
    padding: 2px 4px;
    border-radius: 1px;
}

.polaroid-caption {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: calc(var(--pw) * 0.055);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--hand);
    /* 0.105 keeps the whole line inside the 4%..4% band even at the widest
       --pw; line-height 1.25 because the heart glyph's descent is taller than
       the 1.0 line box and was shaving 2px off the bottom of the text */
    font-size: calc(var(--pw) * 0.105);
    line-height: 1.25;
    color: #4b4136;
}

.prop-notes {
    left: 24%;
    bottom: 76%;
    z-index: 11;
    width: clamp(60px, 9vh, 106px);
    height: clamp(46px, 7vh, 82px);
}

.sticky {
    position: absolute;
    width: 62%;
    aspect-ratio: 1 / 1;
    padding: 8%;
    font-family: var(--hand);
    font-size: clamp(9px, 1.7vh, 17px);
    line-height: 0.95;
    color: #4a4032;
    background: linear-gradient(170deg, #f7e08c, #e6c85f);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-a { left: 0; top: 6%; transform: rotate(-5deg); }
.sticky-b { left: 34%; top: 22%; transform: rotate(4deg); background: linear-gradient(170deg, #f4b7c6, #e394aa); color: #55404a; }

.prop-notes:hover .sticky-a { transform: rotate(-8deg) translateY(-3px); }
.prop-notes:hover .sticky-b { transform: rotate(7deg) translateY(-4px); }

/* ---------- ambience ---------- */

.room-vignette {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.85;
    background:
        radial-gradient(120% 96% at 50% 42%, transparent 40%, rgba(0, 0, 0, 0.42) 76%, rgba(0, 0, 0, 0.75) 100%);
    transition: opacity 0.7s ease;
}

.room.focus .room-vignette {
    opacity: 1;
    background:
        radial-gradient(78% 62% at 62% 50%, transparent 22%, rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0.86) 100%);
}

/* ---------- keyboard ---------- */

.kbd {
    position: absolute;
    left: 44%;
    bottom: 65%;
    width: calc(var(--glass-w) * 0.6);
    /* 17.8, not 16.8: every key row is 16.3ku wide by design (15ku of caps +
       1.3ku of gaps), and the case eats 1.4ku of padding — at 16.8 the last
       cap of each row hung ~24px past the case edge. */
    --ku: calc(var(--glass-w) * 0.6 / 17.8);
    z-index: 24;
}

.kbd-case {
    position: relative;
    padding: calc(var(--ku) * 0.7) calc(var(--ku) * 0.7) calc(var(--ku) * 0.8);
    border-radius: calc(var(--ku) * 0.5);
    background: linear-gradient(168deg, #f6efe0 0%, #e9dfc9 46%, #cdc0a5 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -3px 8px rgba(120, 105, 80, 0.35),
        0 22px 34px rgba(0, 0, 0, 0.55);
}

.kbd-keys {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--ku) * 0.1);
}

.kbd-row {
    display: flex;
    gap: calc(var(--ku) * 0.1);
}

.kbd-row-offset { padding-left: calc(var(--ku) * 1); }
.kbd-row-end { padding-right: calc(var(--ku) * 1); }

.key {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--ku) * var(--w, 1));
    height: calc(var(--ku) * 0.5);
    padding: 0;
    border: 0;
    border-radius: calc(var(--ku) * 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--ku) * 0.28);
    line-height: 1;
    color: #5f5748;
    cursor: pointer;
    background: linear-gradient(180deg, #fbf6ea 0%, #eee4cf 62%, #d8ccb2 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(120, 105, 80, 0.4),
        0 2px 0 rgba(88, 76, 56, 0.5);
    transition: transform 0.07s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.key.is-special {
    background: linear-gradient(180deg, #efe6d2 0%, #ded2b8 62%, #c3b69b 100%);
    font-size: calc(var(--ku) * 0.24);
    letter-spacing: -0.02em;
}

.key.is-dark {
    background: linear-gradient(180deg, #6a6d70 0%, #4a4e52 60%, #33373a 100%);
    color: #ece7db;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 rgba(20, 22, 24, 0.6);
}

.key.is-fly {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%236d7377' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M12 6.6v10.8'/%3E%3Cpath d='M11.3 9.8C9.4 6.2 6.1 4.8 4.3 6.3c-1.8 1.5-.7 4.6 1.7 5.8 1.4.7 3.4.9 5.3.1'/%3E%3Cpath d='M12.7 9.8c1.9-3.6 5.2-5 7-3.5 1.8 1.5.7 4.6-1.7 5.8-1.4.7-3.4.9-5.3.1'/%3E%3Cpath d='M11.3 13.6c-1.7 2.7-4.4 3.7-5.8 2.6-1.4-1.1-.6-3.4 1.3-4.3'/%3E%3Cpath d='M12.7 13.6c1.7 2.7 4.4 3.7 5.8 2.6 1.4-1.1.6-3.4-1.3-4.3'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #f4f6f7 0%, #dde2e4 60%, #bfc6c9 100%);
    background-size: 60% auto, 100% 100%;
    background-position: 56% 70%, center;
    background-repeat: no-repeat, no-repeat;
    color: #565d61;
}

.key-legend {
    position: absolute;
    left: 0.16em;
    top: 0.1em;
    font-size: 0.92em;
    line-height: 1;
    color: #4d5357;
}

.key.is-down {
    transform: translateY(2px) scale(0.94);
    filter: brightness(0.94);
    box-shadow: inset 0 1px 3px rgba(80, 68, 50, 0.45), 0 0 0 rgba(0, 0, 0, 0);
}

/* ---------- mouse ---------- */

.mouse {
    position: absolute;
    left: 79%;
    bottom: 78%;
    --mw: clamp(22px, min(4.6vh, 2.9vw), 46px);
    width: var(--mw);
    z-index: 25;
}

.mouse-body {
    position: relative;
    display: block;
    height: calc(var(--mw) * 1.72);
    border-radius: 48% 48% 42% 42% / 32% 32% 54% 54%;
    background: linear-gradient(104deg, #303336 0%, #1a1c1f 48%, #0b0c0e 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.16),
        inset -5px 0 10px rgba(0, 0, 0, 0.5),
        0 16px 24px rgba(0, 0, 0, 0.62);
    overflow: hidden;
}

.mouse-btn {
    position: absolute;
    top: 5%;
    width: 45%;
    height: 31%;
}

.mouse-btn-l {
    left: 5%;
    border-right: 1px solid rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 70% 0 0 30%;
}

.mouse-btn-r {
    right: 5%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 0 70% 30% 0;
}

.mouse-graffiti {
    position: absolute;
    inset: -6% -30% 44% -30%;
    transform: rotate(-5deg);
    opacity: 0.35;
    background: repeating-linear-gradient(64deg,
        rgba(255, 255, 255, 0.75) 0px, rgba(255, 255, 255, 0.75) 1px,
        transparent 1px, transparent 5px);
    mask-image: radial-gradient(60% 80% at 40% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(60% 80% at 40% 40%, #000 30%, transparent 78%);
}

.mouse-g {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translateX(-50%);
    font-family: var(--px); font-weight: 700;
    font-size: calc(var(--mw) * 0.32);
    color: #cdd1d4;
    opacity: 0.85;
    text-shadow: 0 0 6px rgba(200, 220, 230, 0.4);
}

.mouse-wheel {
    position: absolute;
    left: 50%;
    top: 7%;
    width: 15%;
    height: 20%;
    transform: translateX(-50%);
    border-radius: 3px;
    background: linear-gradient(180deg, #565b60, #23262a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.mouse-led {
    position: absolute;
    left: 50%;
    top: 43%;
    width: 26%;
    height: 4%;
    transform: translateX(-50%);
    border-radius: 2px;
    background: #7ef0c8;
    box-shadow: 0 0 6px rgba(126, 240, 200, 0.9);
    z-index: 2;
}

.mouse-shadow {
    position: absolute;
    left: -14%;
    right: -14%;
    bottom: -10%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%);
    z-index: -1;
}

.mouse.is-click .mouse-body { animation: mouseClick 0.3s ease; }

@keyframes mouseClick {
    50% { transform: translateY(2px) scale(0.97); }
}

/* ---------- monitor ---------- */

.monitor {
    position: absolute;
    right: 10%;
    bottom: 99%;
    width: calc(var(--glass-w) + 68px);
    --ui-scale: 0.6;
    z-index: 20;
}

.monitor::before {
    content: '';
    position: absolute;
    left: -14%;
    right: -14%;
    bottom: -6%;
    height: 96%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(48% 46% at 50% 44%, rgba(150, 228, 238, 0.20) 0%, rgba(140, 210, 230, 0.06) 44%, transparent 72%);
    filter: blur(6px);
    transition: opacity 0.5s ease;
}

.mon-spill {
    position: absolute;
    left: -16%;
    right: -16%;
    bottom: -52%;
    height: 96%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(46% 50% at 50% 26%, rgba(150, 226, 236, 0.16) 0%, transparent 72%);
    transition: opacity 0.5s ease;
}

.mon-shell {
    position: relative;
    padding: 18px 22px 0;
    border-radius: 16px 16px 8px 8px;
    background: linear-gradient(158deg, #f3ecdb 0%, var(--shell-a) 26%, #e0d7c2 56%, var(--shell-b) 78%, var(--shell-c) 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 14px 0 26px rgba(255, 252, 240, 0.35),
        inset -16px 0 26px rgba(120, 104, 78, 0.30),
        0 30px 52px rgba(0, 0, 0, 0.62);
}

.mon-shell::after {
    /* faint plastic grain + scuffs */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        repeating-linear-gradient(96deg, rgba(120, 105, 78, 0.06) 0px, rgba(120, 105, 78, 0.06) 1px, transparent 1px, transparent 7px),
        radial-gradient(20% 12% at 8% 96%, rgba(90, 78, 56, 0.18), transparent 70%),
        radial-gradient(16% 10% at 92% 88%, rgba(90, 78, 56, 0.16), transparent 70%);
}

.mon-screen-wrap {
    position: relative;
    padding: 12px;
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(180deg, #2c2b28 0%, #1c1b19 60%, #26241f 100%);
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.7),
        0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- screen ---------- */

.screen {
    position: relative;
    width: var(--glass-w);
    height: var(--glass-h);
    border-radius: 3px;
    overflow: hidden;
    background: #0d1211;
    box-shadow:
        inset 0 0 44px rgba(0, 0, 0, 0.5),
        inset 0 0 6px rgba(0, 0, 0, 0.8);
    transition: background 0.4s ease;
}

.scr-ui {
    position: absolute;
    left: 0;
    top: 0;
    width: 1000px;
    height: 625px;
    transform: scale(var(--ui-scale));
    transform-origin: 0 0;
    --ui-fs: 1; /* font compensation for small screens — set by letter.js */
    font-family: var(--term);
    color: var(--ui-ink);
    user-select: none;
}

.scr-scanlines {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    opacity: 0.26;
    mix-blend-mode: multiply;
    background: repeating-linear-gradient(180deg, rgba(20, 30, 32, 0.5) 0px, rgba(20, 30, 32, 0.5) 1px, transparent 1px, transparent 3px);
}

.scr-glare {
    position: absolute;
    inset: 0;
    z-index: 13;
    pointer-events: none;
    background:
        linear-gradient(124deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 44%),
        radial-gradient(130% 118% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.30) 100%);
}

.scr-off {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: radial-gradient(80% 70% at 50% 50%, #101716 0%, #070b0a 100%);
    opacity: 0;
    transition: opacity 0.36s ease;
}

.scr-off::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    background: rgba(220, 246, 244, 0.5);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.room.screen-off .scr-ui { opacity: 0; }
.room.screen-off .scr-off { opacity: 1; }
.room.screen-off .scr-off::after { transform: scaleX(1); }
.room.screen-off .monitor::before,
.room.screen-off .mon-spill { opacity: 0; }
.room.screen-off .mon-led { background: #3a2a22; box-shadow: none; }

/* ---------- monitor chin ---------- */

.mon-chin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
    padding: 0 6px 10px;
}

.mon-brand {
    font-family: var(--px); font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #7b7361;
}

.mon-brand em {
    font-style: normal;
    color: #a49a83;
}

.mon-model {
    font-family: var(--term);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #a89e88;
}

.mon-vents {
    flex: 1 1 auto;
    max-width: 120px;
    height: 18px;
    margin-left: 8px;
    background: repeating-linear-gradient(180deg, rgba(120, 105, 80, 0.45) 0px, rgba(120, 105, 80, 0.45) 1.5px, transparent 1.5px, transparent 5px);
}

.mon-power {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #d8cfba, #a49a84 60%, #7d7461 100%);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.mon-led {
    position: absolute;
    right: -14px;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ff0c8;
    box-shadow: 0 0 8px rgba(120, 240, 190, 0.9);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.mon-smiley {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    transform: rotate(-8deg);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.mon-smiley svg { width: 100%; height: 100%; display: block; }

.mon-sticky {
    position: relative;
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 6px 8px 7px;
    font-family: var(--hand);
    font-size: 15px;
    line-height: 1;
    color: #4a4032;
    background: linear-gradient(168deg, #f7e08c, #e9cb66);
    transform: rotate(3.5deg);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.mon-sticky-heart {
    display: block;
    font-size: 12px;
    color: #c9584f;
}

.mon-stand {
    width: 34%;
    height: 40px;
    margin: 0 auto;
    background: linear-gradient(180deg, #b9ab8e 0%, #9c8d70 46%, #6f6249 100%);
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35);
    clip-path: polygon(16% 0%, 84% 0%, 100% 100%, 0% 100%);
    border-radius: 2px;
}

.mon-foot {
    width: 62%;
    height: 9px;
    margin: 0 auto;
    border-radius: 50% / 70% 70% 30% 30%;
    background: linear-gradient(180deg, #c2b498 0%, #8b7d62 60%, #564b36 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55);
}

.heart-pop {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) scale(0.4);
    font-size: 68px;
    color: #e8615c;
    opacity: 0;
    pointer-events: none;
    z-index: 18;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.heart-pop.is-on { animation: heartPop 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes heartPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(0.9); }
}

/* ---------- power-on flash ---------- */

.room.crt-on .screen { animation: crtOn 0.55s ease-out; }

@keyframes crtOn {
    0% { filter: brightness(2.4) contrast(0.4); }
    22% { filter: brightness(0.5) contrast(1.3); }
    100% { filter: none; }
}

/* ---------- boot screen ---------- */

.scr-boot {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, #fdf8ea 0%, #eef6f4 100%);
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.scr-boot.is-done {
    opacity: 0;
    visibility: hidden;
}

.boot-brand {
    font-family: var(--px); font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.12em;
    color: var(--ui-teal-deep);
}

.boot-dot { color: var(--ui-pink); }

.boot-hello {
    font-family: var(--term);
    font-size: 17px;
    letter-spacing: 0.16em;
    color: #6d7a78;
    text-transform: uppercase;
}

.boot-bar {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.boot-cell {
    width: 20px;
    height: 14px;
    background: rgba(38, 41, 46, 0.12);
    box-shadow: inset 0 0 0 1px rgba(38, 41, 46, 0.25);
    animation: bootCell 1.9s steps(1, end) infinite;
}

.boot-cell:nth-child(1) { animation-delay: 0s; }
.boot-cell:nth-child(2) { animation-delay: 0.19s; }
.boot-cell:nth-child(3) { animation-delay: 0.38s; }
.boot-cell:nth-child(4) { animation-delay: 0.57s; }
.boot-cell:nth-child(5) { animation-delay: 0.76s; }
.boot-cell:nth-child(6) { animation-delay: 0.95s; }
.boot-cell:nth-child(7) { animation-delay: 1.14s; }
.boot-cell:nth-child(8) { animation-delay: 1.33s; }
.boot-cell:nth-child(9) { animation-delay: 1.52s; }
.boot-cell:nth-child(10) { animation-delay: 1.71s; }

@keyframes bootCell {
    0%, 4% { background: var(--ui-teal); }
    5%, 100% { background: rgba(38, 41, 46, 0.12); }
}

.boot-label {
    font-family: var(--px); font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.24em;
    color: #8d9a98;
}

/* ============================================
   PIXEL DESKTOP — inside the screen
   ============================================ */

.ui-wall {
    position: absolute;
    inset: 32px 0 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fdf6e6 0%, #eaf5f5 32%, #d6edf0 58%, #bfe6e8 78%, #a9dcdd 100%);
}

.ui-sun {
    position: absolute;
    right: 84px;
    top: 46px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 40%, #fdf0bd, #f6d271 62%, #efc05c 100%);
    box-shadow: 0 0 0 10px rgba(250, 226, 150, 0.22), 0 0 0 26px rgba(250, 226, 150, 0.10);
}

.ui-cloud {
    position: absolute;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        10px -10px 0 0 rgba(255, 255, 255, 0.9),
        26px -18px 0 0 rgba(255, 255, 255, 0.9),
        44px -12px 0 0 rgba(255, 255, 255, 0.9),
        60px 0 0 0 rgba(255, 255, 255, 0.9),
        30px 0 0 0 rgba(255, 255, 255, 0.9);
    opacity: 0.85;
    animation: cloudDrift 26s ease-in-out infinite;
}

.ui-cloud-1 { left: 22%; top: 74px; width: 46px; }
.ui-cloud-2 { left: 52%; top: 130px; width: 34px; animation-duration: 34s; opacity: 0.7; }
.ui-cloud-3 { left: 8%; top: 178px; width: 28px; animation-duration: 42s; opacity: 0.55; }

@keyframes cloudDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(28px); }
}

.ui-hills {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: 0;
}

.ui-hills-3 {
    height: 190px;
    background: linear-gradient(180deg, #8ccfc4 0%, #6cbdb2 100%);
    clip-path: polygon(0% 46%, 12% 30%, 26% 44%, 40% 22%, 54% 40%, 68% 24%, 82% 42%, 92% 30%, 100% 44%, 100% 100%, 0% 100%);
    opacity: 0.85;
}

.ui-hills-2 {
    height: 140px;
    background: linear-gradient(180deg, #6ec3b4 0%, #4ea99b 100%);
    clip-path: polygon(0% 62%, 10% 40%, 24% 58%, 38% 34%, 52% 56%, 66% 36%, 80% 58%, 90% 44%, 100% 60%, 100% 100%, 0% 100%);
}

.ui-hills-1 {
    height: 92px;
    background: linear-gradient(180deg, #4fa89b 0%, #38857b 100%);
    clip-path: polygon(0% 54%, 14% 36%, 30% 54%, 44% 30%, 58% 52%, 72% 32%, 86% 54%, 100% 38%, 100% 100%, 0% 100%);
}

.ui-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.85);
    clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

.ui-spark-1 { left: 30%; top: 118px; }
.ui-spark-2 { left: 70%; top: 76px; width: 7px; height: 7px; }
.ui-spark-3 { left: 86%; top: 158px; width: 8px; height: 8px; }

/* menu bar */

.ui-menubar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 10px;
    background: var(--ui-cream);
    border-bottom: 2px solid var(--ui-ink);
    z-index: 6;
}

.ui-logo,
.ui-menu {
    border: 0;
    background: none;
    font-family: var(--px); font-weight: 700;
    font-size: calc(10px * var(--ui-fs, 1));
    line-height: 1;
    color: var(--ui-ink);
    padding: 6px 8px;
    border-radius: 2px;
    cursor: pointer;
}

.ui-logo { font-size: calc(14px * var(--ui-fs, 1)); color: var(--ui-teal-deep); padding: 3px 8px; }

.ui-menu:hover,
.ui-logo:hover,
.ui-menu.is-open { background: var(--ui-ink); color: var(--ui-cream); }

.ui-menubar-gap { flex: 1 1 auto; }

.ui-menu-quiet { color: var(--ui-ink-soft); }

.ui-clock {
    font-family: var(--px); font-weight: 700;
    font-size: calc(9px * var(--ui-fs, 1));
    letter-spacing: 0.06em;
    padding: 6px 6px 6px 10px;
    color: var(--ui-ink);
}

/* dropdown menus */

.ui-drop {
    position: absolute;
    top: 32px;
    min-width: 190px;
    padding: 4px;
    background: var(--ui-cream);
    border: 2px solid var(--ui-ink);
    box-shadow: 6px 7px 0 rgba(30, 40, 45, 0.2);
    z-index: 30;
    display: none;
}

.ui-drop.is-open { display: block; }

.ui-drop-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font-family: var(--term);
    font-size: calc(15px * var(--ui-fs, 1));
    color: var(--ui-ink);
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 2px;
}

.ui-drop-item:hover { background: var(--ui-teal); color: #fff; }
.ui-drop-item[disabled] { color: #b3b7bd; cursor: default; }
.ui-drop-item[disabled]:hover { background: none; color: #b3b7bd; }
.ui-drop-sep { height: 2px; margin: 4px 2px; background: rgba(38, 41, 46, 0.14); }

/* desktop icons */

.ui-icons {
    position: absolute;
    left: 16px;
    top: 48px;
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3;
}

.ui-icon {
    position: relative;
    width: 92px;
    padding: 7px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    border-radius: 3px;
    cursor: pointer;
}

.ui-icon:hover { background: rgba(255, 255, 255, 0.45); }

.ui-icon.is-sel {
    background: rgba(79, 168, 155, 0.28);
    box-shadow: inset 0 0 0 1px rgba(45, 106, 99, 0.55);
}

.ui-icon-art { width: 46px; height: 42px; }
.ui-icon-art svg { width: 100%; height: 100%; display: block; }

.ui-icon-label {
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    line-height: 1.6;
    text-align: center;
    color: #23333a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ui-icon-badge {
    position: absolute;
    top: 2px;
    right: 16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e8615c;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* windows */

.ui-wins {
    position: absolute;
    inset: 32px 0 0 0;
    pointer-events: none;
    z-index: 5;
}

.ui-win {
    position: absolute;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background: var(--ui-cream);
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    box-shadow: 9px 11px 0 rgba(26, 38, 42, 0.16);
    animation: winPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes winPop {
    0% { opacity: 0; transform: scale(0.94) translateY(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.ui-win.is-closing { animation: winOut 0.2s ease-in forwards; }

@keyframes winOut {
    to { opacity: 0; transform: scale(0.95); }
}

.ui-win-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 8px;
    background: #e9e2d2;
    border-bottom: 2px solid var(--ui-ink);
    cursor: grab;
}

.ui-win-bar:active { cursor: grabbing; }

.ui-win.is-focus .ui-win-bar { background: var(--ui-ink); color: var(--ui-cream); }

.ui-win-dots { display: flex; gap: 5px; flex: 0 0 auto; }

.ui-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--ui-ink);
    background: var(--ui-cream);
    padding: 0;
    cursor: pointer;
}

.ui-win.is-focus .ui-dot { border-color: rgba(253, 250, 240, 0.85); }

.ui-dot-close:hover { background: #e8615c; }
.ui-dot-zoom:hover { background: #f6cf6a; }

.ui-win-title {
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--px); font-weight: 700;
    font-size: calc(9px * var(--ui-fs, 1));
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 34px;
}

.ui-win-body {
    padding: 18px 20px 20px;
    font-family: var(--term);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ui-ink);
    overflow: hidden;
}

.ui-win-body p { margin-bottom: 10px; }
.ui-win-body p:last-child { margin-bottom: 0; }

/* dock */

.ui-dock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: var(--ui-cream);
    border-top: 2px solid var(--ui-ink);
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    letter-spacing: 0.08em;
    color: var(--ui-ink);
    z-index: 6;
}

.ui-dock-hint { flex: 1 1 auto; color: var(--ui-ink-soft); }

.ui-dock-grip {
    width: 16px;
    height: 10px;
    background: repeating-linear-gradient(45deg, rgba(38, 41, 46, 0.5) 0px, rgba(38, 41, 46, 0.5) 1.5px, transparent 1.5px, transparent 4px);
}

/* window content pieces */

.wz {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.wz-art {
    flex: 0 0 auto;
    width: 168px;
    padding: 14px;
    background: #e7f1f0;
    border: 2px solid var(--ui-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wz-art svg { width: 100%; height: auto; }
.wz-text { flex: 1 1 auto; }
.wz-h { font-family: var(--px); font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.wz-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.ui-btn {
    border: 2px solid var(--ui-ink);
    background: var(--ui-cream);
    font-family: var(--term);
    font-size: 16px;
    color: var(--ui-ink);
    padding: 8px 14px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(26, 38, 42, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}

.ui-btn:hover { background: #f4eee0; }
.ui-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(26, 38, 42, 0.22); }
.ui-btn.is-primary { background: var(--ui-teal); border-color: var(--ui-teal-deep); color: #fff; }
.ui-btn.is-primary:hover { background: #58b7a8; }
.ui-btn[disabled] { opacity: 0.5; cursor: default; box-shadow: none; }

/* lock window */

.lock-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.lock-glyph { width: 74px; height: 82px; }

.lock-q {
    /* Chinese-led sentence — lead with the CJK bold so the latin bit ("ty")
       doesn't switch to the pixel face mid-sentence */
    font-family: var(--cjk);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.85;
    color: var(--ui-ink);
    max-width: 26em;
}

.lock-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.lock-input {
    width: 200px;
    font-family: var(--term);
    font-size: 22px;
    letter-spacing: 0.22em;
    text-align: center;
    text-transform: uppercase;
    color: var(--ui-ink);
    background: #fff;
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    padding: 8px 10px;
    outline: none;
}

.lock-input:focus { box-shadow: 0 0 0 3px rgba(79, 168, 155, 0.35); }
.lock-input.is-bad { border-color: #e8615c; animation: lockShake 0.4s ease; }
.lock-input.is-ok { border-color: var(--ui-teal); box-shadow: 0 0 0 3px rgba(79, 168, 155, 0.4); }

@keyframes lockShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

.lock-msg {
    min-height: 24px;
    margin-top: 14px;
    text-align: center;
    font-family: var(--cjk);
    font-size: 15px;
    font-weight: 700;
    color: #6f7780;
}

.lock-msg.is-bad { color: #d2504b; }
.lock-msg.is-ok { color: var(--ui-teal-deep); }

.lock-hints { margin-top: 16px; border-top: 2px dashed rgba(38, 41, 46, 0.18); padding-top: 12px; }

.lock-hint-btn {
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--cjk);
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-teal-deep);
    text-decoration: underline;
    cursor: pointer;
}

.lock-hint-line {
    font-family: var(--cjk);
    font-size: 15px;
    font-weight: 700;
    color: #6f7780;
    margin-top: 6px;
    padding-left: 14px;
    position: relative;
}

.lock-hint-line::before { content: '\2192'; position: absolute; left: 0; color: var(--ui-teal); }

.lock-stamp {
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-family: var(--px); font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: rgba(38, 41, 46, 0.35);
    transform: rotate(-6deg);
}

/* ---------- letter floating out of the screen ---------- */

.letter-float {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lf-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(62% 62% at 50% 46%, rgba(8, 14, 14, 0.66) 0%, rgba(4, 8, 8, 0.9) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.letter-float.is-open .lf-scrim { opacity: 1; }

.lf-stage {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.lf-envelope {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70vw, 460px);
    aspect-ratio: 1.55;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.letter-float.is-open .lf-envelope { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.letter-float.is-paper .lf-envelope { opacity: 0; transform: translate(-50%, -120%) scale(1.1); }

.lf-env-body {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(170deg, #f4ecdc, #ddd2bb);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.lf-env-body::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.5) 0%, transparent 42%);
}

.lf-env-flap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 62%;
    background: linear-gradient(180deg, #efe6d4, #cdc0a6);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform-origin: top center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 4px 4px 0 0;
}

.letter-float.is-paper .lf-env-flap { transform: rotateX(-168deg); }

.paper {
    position: relative;
    width: min(94vw, 700px);
    max-height: 84vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 105, 80, 0.45) transparent;
    padding: clamp(28px, 4vw, 46px) clamp(24px, 4vw, 52px) 30px;
    background:
        linear-gradient(180deg, rgba(255, 252, 244, 0.92) 0%, rgba(248, 241, 226, 0.92) 100%),
        repeating-linear-gradient(180deg, transparent 0px, transparent 31px, rgba(120, 105, 80, 0.09) 31px, rgba(120, 105, 80, 0.09) 32px);
    color: #322b22;
    border-radius: 3px;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.62),
        inset 0 0 0 1px rgba(150, 130, 100, 0.25);
    opacity: 0;
    transform: translateY(46px) scale(0.94);
    transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--serif2);
}

.letter-float.is-paper .paper {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.paper::-webkit-scrollbar { width: 9px; }
.paper::-webkit-scrollbar-track { background: rgba(120, 105, 80, 0.10); border-radius: 5px; }

.paper::-webkit-scrollbar-thumb {
    background: rgba(120, 105, 80, 0.42);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.paper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--term);
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a8b74;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(120, 105, 80, 0.22);
}

.paper-stamp {
    font-size: 1.1rem;
    color: #c9584f;
    transform: rotate(-8deg);
}

.paper-title {
    font-family: var(--hand);
    font-size: clamp(2rem, 4.4vw, 2.7rem);
    font-weight: 500;
    color: #2f2a22;
    margin: 22px 0 14px;
}

.paper-body {
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    line-height: 1.82;
}

.paper-body p { margin-bottom: 1.05em; }

.paper-body .ln-strong {
    font-style: italic;
    font-weight: 500;
    color: #23201a;
}

.paper .ln {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.paper .ln.is-in { opacity: 1; transform: translateY(0); }

.paper-sign {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.paper-sign-line {
    font-family: var(--term);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: #9a8b74;
}

.paper-sign-name {
    font-family: var(--hand);
    font-size: clamp(1.9rem, 3.6vw, 2.4rem);
    color: #3a332a;
}

.paper-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(120, 105, 80, 0.22);
}

.paper-ps {
    display: block;
    font-family: var(--term);
    font-size: 0.86rem;
    line-height: 1.7;
    color: #7d7160;
}

.paper-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.paper-btn {
    border: 1px solid rgba(60, 50, 38, 0.35);
    background: #fdfaf1;
    font-family: var(--term);
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    color: #3a332a;
    padding: 9px 16px;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.paper-btn:hover { background: #f2ead8; }
.paper-btn:active { transform: translateY(1px); }
.paper-btn-ghost { background: transparent; color: #8b7f6c; }
.paper-btn[disabled] { opacity: 0.55; cursor: default; }

/* ---------- desktop odds and ends ---------- */

.lock-glyph svg { width: 100%; height: 100%; display: block; }

.ui-win-body strong { font-weight: 700; }

.ui-code {
    font-family: var(--term);
    font-size: 14px;
    background: rgba(38, 41, 46, 0.08);
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
}

.ui-tip { font-size: 15px; color: var(--ui-ink-soft); }

.ui-linklist { display: flex; flex-direction: column; gap: 6px; }

.ui-link {
    font-family: var(--term);
    font-size: 17px;
    color: var(--ui-teal-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ui-link:hover { color: #e8615c; }

.ui-notelist { display: flex; flex-direction: column; gap: 10px; }

.ui-note { display: flex; align-items: baseline; gap: 12px; }

.ui-note-h {
    font-family: var(--px); font-weight: 700;
    font-size: calc(9px * var(--ui-fs, 1));
    color: var(--ui-teal);
}

.ui-note-t {
    font-family: var(--hand);
    font-size: calc(22px * var(--ui-fs, 1));
    line-height: 1.2;
    color: #3b352a;
}

.ui-toast {
    position: absolute;
    right: 16px;
    bottom: 40px;
    max-width: 320px;
    padding: 10px 14px;
    background: var(--ui-cream);
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    box-shadow: 6px 7px 0 rgba(26, 38, 42, 0.2);
    font-family: var(--term);
    font-size: calc(15px * var(--ui-fs, 1));
    line-height: 1.4;
    color: var(--ui-ink);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 40;
}

.ui-toast.is-on { opacity: 1; transform: translateY(0); }

/* ---------- letter page responsive ---------- */

/* 901px+ keeps the side-by-side room, so the shelf has to stay
   clear of the monitor — cap it against vw as well as vh */
/* below 1240px the monitor sits closer to the right edge, so the shelf
   gets less wall — recompute its share from the new monitor position */
@media (max-width: 1240px) {
    .room { --mon-left: calc(93vw - var(--mon-w)); }
    .monitor { right: 7%; }
    .wall-frame { left: 30%; top: 42vh; }
    .mon-sticky { font-size: 13px; }

    /* smaller glass → the CRT dressing eats more of the picture.
       fade the scanlines + glare back so the UI stays legible */
    .scr-scanlines { opacity: 0.15; }
    .scr-glare {
        background:
            linear-gradient(124deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 20%, transparent 44%),
            radial-gradient(130% 118% at 50% 50%, transparent 66%, rgba(0, 0, 0, 0.18) 100%);
    }
}

@media (max-width: 1080px) {
    .wall-frame { display: none; }
    .prop-notes { display: none; }
    .kbd { left: 44%; }
}

@media (max-width: 960px) {
    .book:nth-last-child(-n + 3) { display: none; }
    .wall-pin { display: none; }
    .prop-pens { display: none; }
}

/* ---------- letter page: small screens reflow ---------- */

@media (max-width: 900px) {
    .room {
        height: auto;
        min-height: 100vh;
        overflow-x: clip;
        overflow-y: visible;
        padding: 84px 0 0;
        /* stacked layout — the shelf has the full width to itself */
        --u: min(1.42vh, 2.6vw);
        background: linear-gradient(180deg, #1e2926 0%, #16211e 34%, #101817 52%, #3a2a1e 60%, #2b1e15 82%, #1d130d 100%);
    }

    .room-stage {
        position: static;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding-bottom: 22px;
    }

    .room-wall {
        position: static;
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .wall-lines,
    .wall-baseboard { display: none; }

    .shelf {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 6px;
        transform: none;
        padding: 0;
    }

    .shelf-books { min-height: calc(var(--u) * 10); }

    .desk {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        order: 2;
        width: 100%;
        height: auto;
        padding: 26px 0 10px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%);
    }

    .desk-top,
    .desk-apron,
    .desk-grain,
    .desk-mat { display: none; }

    .lamp {
        position: absolute;
        left: 2%;
        top: auto;
        bottom: clamp(64px, 12vh, 104px);
        width: min(80px, 21vw);
        height: min(92px, 24vw);
        transform: scale(0.62);
        transform-origin: left bottom;
    }

    .lamp-cone { display: none; }

    .prop-mug,
    .prop-notes,
    .prop-pens { display: none; }

    .prop-polaroid { display: block; left: 20%; bottom: clamp(64px, 12vh, 104px); }
    .polaroid-frame { width: min(62px, 16vw); }

    .monitor {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 0 auto;
        width: calc(100% - 44px);
        max-width: 560px;
    }

    .mon-shell { padding: 12px 14px 0; border-radius: 12px 12px 6px 6px; }
    .mon-screen-wrap { padding: 8px; }

    .screen {
        width: 100%;
        height: auto;
        aspect-ratio: 1.44;
    }

    .scr-ui {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none !important;
        /* phone layout: fonts are set in absolute px below, no compensation */
        --ui-fs: 1 !important;
    }

    .ui-menubar { height: 26px; padding: 0 6px; }
    .ui-menu { font-size: 9.5px; padding: 4px 5px; }
    .ui-logo { font-size: 12.5px; padding: 2px 5px; }
    .ui-clock { font-size: 8.5px; padding: 4px 4px; }
    .ui-drop { top: 26px; min-width: 150px; }
    .ui-drop-item { font-size: 14.5px; }
    .ui-dock { height: 20px; font-size: 7.5px; }
    .ui-dock-hint { display: none; }
    .ui-icons { top: 38px; left: 8px; width: 68px; gap: 2px; }
    .ui-icon { width: 68px; padding: 4px 2px; gap: 2px; }
    .ui-icon-art { width: 34px; height: 31px; }
    .ui-icon-label { font-size: 7.5px; }
    .ui-icon-badge { right: 4px; width: 7px; height: 7px; }
    .ui-hills-3 { height: 120px; }
    .ui-hills-2 { height: 90px; }
    .ui-hills-1 { height: 58px; }
    .ui-sun { right: 22px; top: 22px; width: 34px; height: 34px; box-shadow: 0 0 0 6px rgba(250, 226, 150, 0.22), 0 0 0 14px rgba(250, 226, 150, 0.1); }

    /* windows become readable panels over the whole room */
    .ui-wins { position: fixed; inset: 0; z-index: 1500; }

    .ui-win {
        position: fixed !important;
        left: 4vw !important;
        right: 4vw !important;
        top: 12vh !important;
        width: auto !important;
        height: auto !important;
        max-height: 74vh;
    }

    .ui-win-body { font-size: 17px; padding: 16px; overflow-y: auto; }
    .ui-win-bar { height: 30px; cursor: default; }
    .wz { flex-direction: column; gap: 14px; }
    .wz-art { width: 100%; }
    .wz-h { font-size: 12px; }
    .lock-glyph { width: 60px; height: 66px; }
    .lock-q { font-size: 11px; line-height: 1.9; }
    .lock-input { width: 100%; max-width: 240px; font-size: 20px; }
    .lock-hint-line, .lock-hint-btn, .lock-msg { font-size: 15px; }

    /* keyboard + mouse row */
    .kbd {
        position: relative;
        left: auto;
        bottom: auto;
        width: 76%;
        max-width: 420px;
        --ku: calc(min(76vw, 420px) / 17.8);
        margin: 116px auto 0;
    }

    .mouse {
        position: absolute;
        right: 2%;
        left: auto;
        top: auto;
        bottom: clamp(64px, 12vh, 104px);
        --mw: min(28px, 7.5vw);
    }
}

@media (max-width: 768px) {
    .page-letter .nav { padding: 0.85rem 1rem; }
    .page-letter .nav-links { gap: 0.52rem; }
    .page-letter .nav-link { font-size: 0.52rem; letter-spacing: 0.08em; }
    /* No back button here, so the brand keeps its place. */
    .page-letter .back-btn { display: none; }
    .page-letter .nav-brand { margin-left: 0; }
}

@media (max-width: 560px) {
    .book:nth-last-child(-n + 5) { display: none; }
    .room { --u: min(1.6vh, 4.4vw); }
    .shelf-tag { display: none; }
    .mon-sticky { display: none; }
    .mon-brand { font-size: 9px; }
    .paper { padding: 26px 20px 26px; }
}

/* short windows — shrink the nav so the monitor still fits under it */
@media (max-height: 800px) {
    .page-letter .nav { padding: 0.5rem 1.4rem; }
    .page-letter .nav-link { font-size: 0.6rem; letter-spacing: 0.06em; }
    .page-letter .back-btn { width: 30px; height: 30px; top: 0.65rem; }
}

.room-grain {
    position: absolute;
    inset: -40px;
    z-index: 61;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   QUIZ — the TY-OS quiz app
   "how well do you know ty?" · message.html
   registered from js/quiz.js via LetterDesk
   ============================================ */

/* the font compensation can push the quiz content past the fixed window —
   let the window scroll instead of clipping the last question */
.ui-win[data-app="quiz"] .ui-win-body { overflow-y: auto; overscroll-behavior: contain; }

.qz {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.qz-kicker {
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    letter-spacing: 0.14em;
    color: var(--ui-teal);
}

.qz-title {
    font-family: var(--px); font-weight: 700;
    font-size: calc(15px * var(--ui-fs, 1));
    line-height: 1.55;
    color: var(--ui-ink);
    margin: 0 0 6px;
}

.qz-title.is-sm { font-size: calc(13px * var(--ui-fs, 1)); }

.qz-sub {
    font-size: calc(15px * var(--ui-fs, 1));
    line-height: 1.6;
    color: var(--ui-ink-soft);
    margin: 0 0 4px;
}

.qz-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.qz-name {
    width: 230px;
    max-width: 100%;
    font-family: var(--term);
    font-size: calc(16px * var(--ui-fs, 1));
    letter-spacing: 0.03em;
    color: var(--ui-ink);
    background: #fff;
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    padding: 8px 10px;
    outline: none;
}

.qz-name:focus { box-shadow: 0 0 0 3px rgba(79, 168, 155, 0.35); }
.qz-name::placeholder { color: #a7acb3; }

.qz-fine {
    font-size: calc(13px * var(--ui-fs, 1));
    line-height: 1.55;
    color: var(--ui-ink-soft);
    margin: 0;
}

/* ---------- question phase ---------- */

.qz-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qz-count {
    font-family: var(--px); font-weight: 700;
    font-size: calc(9px * var(--ui-fs, 1));
    letter-spacing: 0.08em;
    color: var(--ui-ink);
}

.qz-diff {
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border: 2px solid var(--ui-ink);
    border-radius: 2px;
    color: var(--ui-ink);
    background: var(--ui-cream);
}

.qz-diff.is-d1 { background: var(--ui-teal); border-color: var(--ui-teal-deep); color: #fff; }
.qz-diff.is-d2 { background: var(--ui-yellow); }
.qz-diff.is-d3 { background: var(--ui-pink); }

.qz-streak {
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    letter-spacing: 0.08em;
    color: var(--ui-teal-deep);
}

.qz-score {
    margin-left: auto;
    font-family: var(--px); font-weight: 700;
    font-size: calc(10px * var(--ui-fs, 1));
    color: var(--ui-ink);
}

.qz-bar {
    height: 10px;
    border: 2px solid var(--ui-ink);
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}

.qz-bar-fill {
    display: block;
    height: 100%;
    background: var(--ui-teal);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.qz-q {
    font-size: calc(19px * var(--ui-fs, 1));
    line-height: 1.5;
    font-weight: 400;
    color: var(--ui-ink);
    margin: 2px 0 0;
}

.qz-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qz-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    font-family: var(--term);
    font-size: calc(16px * var(--ui-fs, 1));
    line-height: 1.35;
    color: var(--ui-ink);
    background: #fff;
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    padding: 9px 12px;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(26, 38, 42, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}

.qz-opt:hover { background: #f4eee0; }
.qz-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(26, 38, 42, 0.22); }

.qz-key {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    color: var(--ui-ink);
    background: var(--ui-cream);
    border: 2px solid var(--ui-ink);
    border-radius: 2px;
}

.qz-opt-t { flex: 1 1 auto; }

.qz-opt.is-ok {
    background: var(--ui-teal);
    border-color: var(--ui-teal-deep);
    color: #fff;
    pointer-events: none;
}

.qz-opt.is-ok .qz-key { background: var(--ui-cream); color: var(--ui-ink); border-color: var(--ui-cream); }

.qz-opt.is-bad {
    background: #e8615c;
    border-color: #b23b37;
    color: #fff;
    pointer-events: none;
}

.qz-opt.is-bad .qz-key { background: var(--ui-cream); color: var(--ui-ink); border-color: var(--ui-cream); }

.qz-opt.is-dim { opacity: 0.45; pointer-events: none; }

.qz-reveal {
    min-height: 56px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.qz-reveal.is-on { opacity: 1; transform: translateY(0); }

.qz-reveal-line {
    font-family: var(--px); font-weight: 700;
    font-size: calc(11px * var(--ui-fs, 1));
    line-height: 1.5;
    color: var(--ui-ink);
}

.qz-reveal-a { color: var(--ui-teal-deep); }
.qz-reveal-b { color: #d2504b; }

.qz-fact {
    font-family: var(--hand);
    font-size: calc(21px * var(--ui-fs, 1));
    line-height: 1.25;
    color: #3b352a;
    margin-top: 3px;
}

.qz-foot {
    font-size: calc(12px * var(--ui-fs, 1));
    letter-spacing: 0.06em;
    color: var(--ui-ink-soft);
    margin: 0;
}

/* ---------- result phase ---------- */

.qz-res-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qz-ring { flex: 0 0 auto; width: 104px; }
.qz-ring svg { width: 100%; height: auto; display: block; }

.qz-ring-bg {
    fill: none;
    stroke: rgba(38, 41, 46, 0.12);
    stroke-width: 10;
}

.qz-ring-fg {
    fill: none;
    stroke: var(--ui-teal);
    stroke-width: 10;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 60px 60px;
    transition: stroke-dasharray 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.qz-ring-num {
    font-family: var(--px); font-weight: 700;
    font-size: calc(22px * var(--ui-fs, 1));
    fill: var(--ui-ink);
    text-anchor: middle;
}

.qz-res-meta { flex: 1 1 auto; min-width: 0; }

.qz-tier {
    display: inline-block;
    font-family: var(--px); font-weight: 700;
    font-size: calc(12px * var(--ui-fs, 1));
    letter-spacing: 0.1em;
    padding: 5px 10px;
    border: 2px solid var(--ui-ink);
    border-radius: 2px;
    margin: 2px 0 8px;
    color: var(--ui-ink);
    background: var(--ui-cream);
    box-shadow: 3px 3px 0 rgba(26, 38, 42, 0.22);
}

.qz-tier.is-t5 { background: var(--ui-pink); }
.qz-tier.is-t4 { background: var(--ui-yellow); }
.qz-tier.is-t3 { background: var(--ui-teal); border-color: var(--ui-teal-deep); color: #fff; }
.qz-tier.is-t2 { background: var(--ui-blue); }
.qz-tier.is-t1 { background: #dfe4e6; }
.qz-tier.is-t0 { background: #e8615c; color: #fff; }

.qz-line {
    font-family: var(--hand);
    font-size: calc(22px * var(--ui-fs, 1));
    line-height: 1.25;
    color: #3b352a;
    margin: 0;
}

.qz-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.qz-stat {
    flex: 1 1 0;
    min-width: 72px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    padding: 6px 6px 5px;
}

.qz-stat-v {
    display: block;
    font-family: var(--px); font-weight: 700;
    font-size: calc(13px * var(--ui-fs, 1));
    color: var(--ui-ink);
}

.qz-stat-k {
    display: block;
    font-size: calc(11px * var(--ui-fs, 1));
    letter-spacing: 0.08em;
    color: var(--ui-ink-soft);
    margin-top: 3px;
}

.qz-review {
    max-height: 118px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 2px solid var(--ui-ink);
    border-radius: 3px;
    padding: 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(38, 41, 46, 0.35) transparent;
}

.qz-review::-webkit-scrollbar { width: 8px; }
.qz-review::-webkit-scrollbar-track { background: transparent; }
.qz-review::-webkit-scrollbar-thumb { background: rgba(38, 41, 46, 0.3); border-radius: 4px; }

.qz-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(38, 41, 46, 0.16);
    font-size: calc(14px * var(--ui-fs, 1));
    line-height: 1.35;
}

.qz-row:last-child { border-bottom: 0; }

.qz-row-i {
    flex: 0 0 auto;
    width: 18px;
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    color: var(--ui-ink-soft);
}

.qz-row-mark { flex: 0 0 auto; width: 12px; font-weight: 700; }
.qz-row.is-ok .qz-row-mark { color: var(--ui-teal-deep); }
.qz-row.is-bad .qz-row-mark { color: #d2504b; }

.qz-row-a { flex: 1 1 auto; min-width: 0; color: var(--ui-ink); }

.qz-row-y { flex: 0 0 auto; font-size: calc(13px * var(--ui-fs, 1)); color: var(--ui-ink-soft); }

.qz-row-c {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    color: var(--ui-ink-soft);
}

/* ---------- leaderboard phase ---------- */

.qz-board {
    max-height: 210px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(38, 41, 46, 0.35) transparent;
}

.qz-board::-webkit-scrollbar { width: 8px; }
.qz-board::-webkit-scrollbar-track { background: transparent; }
.qz-board::-webkit-scrollbar-thumb { background: rgba(38, 41, 46, 0.3); border-radius: 4px; }

.qz-brow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-bottom: 2px solid rgba(38, 41, 46, 0.08);
    font-size: calc(15px * var(--ui-fs, 1));
}

.qz-brow:last-child { border-bottom: 0; }

.qz-brow.is-you {
    background: rgba(79, 168, 155, 0.16);
    border-radius: 2px;
}

.qz-brank {
    flex: 0 0 auto;
    width: 22px;
    font-family: var(--px); font-weight: 700;
    font-size: calc(10px * var(--ui-fs, 1));
    color: var(--ui-teal-deep);
}

.qz-bname {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ui-ink);
}

.qz-btier {
    flex: 0 0 auto;
    font-family: var(--px); font-weight: 700;
    font-size: calc(8px * var(--ui-fs, 1));
    letter-spacing: 0.08em;
    color: var(--ui-ink-soft);
}

.qz-bacc {
    flex: 0 0 auto;
    width: 42px;
    text-align: right;
    font-size: calc(13px * var(--ui-fs, 1));
    color: var(--ui-ink-soft);
}

.qz-bscore {
    flex: 0 0 auto;
    width: 38px;
    text-align: right;
    font-family: var(--px); font-weight: 700;
    font-size: calc(12px * var(--ui-fs, 1));
    color: var(--ui-ink);
}

/* off-screen helper for the copy fallback */
.qz-clip {
    position: fixed;
    left: -9999px;
    top: 0;
}

/* ---------- quiz responsive (windows become full panels ≤900px) ---------- */

@media (max-width: 900px) {
    .qz { gap: 10px; }
    .qz-kicker { font-size: 9.5px; }
    .qz-title { font-size: 14px; }
    .qz-q { font-size: 18px; }
    .qz-sub { font-size: 14.5px; }
    .qz-fine { font-size: 14.5px; }
    .qz-count { font-size: 10.5px; }
    .qz-diff { font-size: 9.5px; }
    .qz-streak { font-size: 9.5px; }
    .qz-score { font-size: 11.5px; }
    .qz-opt { font-size: 15.5px; padding: 8px 10px; }
    .qz-key { font-size: 9.5px; }
    .qz-reveal-line { font-size: 12.5px; }
    .qz-foot { font-size: 13.5px; }
    .qz-tier { font-size: 13.5px; }
    .qz-name { width: 100%; }
    .qz-ring { width: 92px; }
    .qz-res-top { gap: 12px; }
    .qz-line { font-size: 19px; }
    .qz-fact { font-size: 19px; }
    .qz-review { max-height: 104px; }
    .qz-board { max-height: 40vh; }
    .qz-stat-v { font-size: 12px; }
    .qz-stat-k { font-size: 12.5px; }
    .qz-row { font-size: 15.5px; }
    .qz-row-i { font-size: 9.5px; }
    .qz-row-y { font-size: 14.5px; }
    .qz-row-c { font-size: 9.5px; }
    .qz-brank { font-size: 11.5px; }
    .qz-btier { font-size: 9.5px; }
    .qz-bacc { font-size: 14.5px; }
    .qz-bscore { font-size: 13.5px; }
}

/* ============================================
   Music v3 — video tapes playing on the windshield
   ============================================ */

.ws-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    background: #05060a;
}

.ws-frame.video-view .ws-video { opacity: 1; }
.ws-frame.video-view .lyric-layer { opacity: 0; }
.ws-frame.video-view .ws-tint { background: linear-gradient(180deg, rgba(6,8,16,0.18) 0%, rgba(0,0,0,0) 42%, rgba(5,5,9,0.34) 100%); }

/* small "recording" feel while a video tape runs */
.ws-frame.video-view::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px);
    opacity: 0.5;
}

/* video tapes look like VHS cases, not music cassettes */
.spine.is-video {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset -14px 0 18px -12px rgba(0, 0, 0, 0.45);
}

.spine.is-video .spine-brand {
    background: rgba(0, 0, 0, 0.22);
    color: var(--tape-ink);
    border-color: rgba(0, 0, 0, 0.35);
}

.spine.is-video .spine-title,
.spine.is-cjk .spine-title,
.cassette.is-video .cas-label b,
.cassette.is-cjk .cas-label b,
.hu-title.is-cjk,
.hu-artist.is-cjk,
.deck-label.is-cjk {
    font-family: var(--px), var(--cjk), sans-serif;
    letter-spacing: 0.04em;
}

.spine.is-video .spine-title { font-size: clamp(9px, 0.78vw, 11.5px); font-weight: 700; }

.cassette.is-video .cas-window { opacity: 0.35; }

.deck-label.is-cjk { font-size: clamp(7px, 0.62vw, 9px); }

/* on narrow screens the walls hide, so the rack holds everything in rows */
@media (max-width: 1100px) {
    .rack { flex-wrap: wrap; justify-content: center; width: min(88vw, 460px); }
    .cassette { width: calc(25% - 8px); }
}

/* ============================================
   MINI PLAYER — persistent bar on every page
   Bottom-right thin player; state lives in
   localStorage (see js/mini-player.js). The car
   player page renders no bar of its own.
   ============================================ */

.mini-player {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 800;
    width: min(392px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px 11px 11px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(15, 12, 17, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    overflow: hidden;
    animation: mp-in 0.5s var(--ease-out) both;
}

@keyframes mp-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mini-player.is-hidden { display: none; }

.mp-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.mp-progress::after {  /* fatter touch target */
    content: '';
    position: absolute;
    inset: -6px 0;
}

.mp-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--theme-primary, #e59a62);
    transition: width 0.25s linear;
}

.mp-cover {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: #241d26;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
}

.mp-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.mp-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-artist {
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-time {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

.mp-eq {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    width: 14px;
    opacity: 0;
    transition: opacity 0.3s;
}

.mini-player.is-playing .mp-eq { opacity: 1; }

.mp-eq i {
    flex: 1;
    background: var(--theme-primary, #e59a62);
    border-radius: 1px;
    animation: mp-eq 0.9s ease-in-out infinite;
}

.mp-eq i:nth-child(2) { animation-delay: 0.25s; }
.mp-eq i:nth-child(3) { animation-delay: 0.5s; }

@keyframes mp-eq {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}

.mp-btn {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: color 0.25s, background 0.25s;
}

.mp-btn:hover {
    color: var(--theme-primary);
    background: var(--theme-dim, rgba(255, 255, 255, 0.06));
}

.mp-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--theme-primary, #e59a62);
    color: #16110d;
}

.mp-play:hover {
    color: #16110d;
    background: var(--theme-soft, #f0b080);
}

.mp-play .ic-pause { display: none; }
.mini-player.is-playing .mp-play .ic-play { display: none; }
.mini-player.is-playing .mp-play .ic-pause { display: block; }

.mp-close { width: 24px; height: 24px; opacity: 0.6; }

@media (max-width: 640px) {
    .mini-player {
        right: 12px;
        bottom: 12px;
        width: min(360px, calc(100vw - 24px));
    }
    .mp-title { font-size: 14px; }
    .mp-artist { font-size: 11.5px; }
}

/* ============================================
   MUSIC PAGE TYPE — 字制区喜脉喜欢体
   The whole musics.html renders in this
   handwriting face, per request. Scoped to the
   page body (.page-sub.theme-music) so the home
   dial's music edition preview is untouched.
   ============================================ */

.page-sub.theme-music,
.page-sub.theme-music *:not(svg):not(svg *) {
    font-family: 'Ximai', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}