/* ============================================================================
   Nini & Yuan v1.5.0 — "Aurora Inkwash · Night Atlas Cinematic"
   v1.2.0 visual shell + v1.2.3 ambient/cursor/easter-egg layer + v1.2.4
   Aurora Cartography polish + World 2/3 expansion + v1.5.0 game-feel polish.
   Pure visual layer. Every selector, ID, data-attribute, and CSS custom
   property name relied upon by src/game.js or tests/* is preserved verbatim.
   ============================================================================ */

@font-face {
  font-family: "LXGW WenKai Local";
  src: url("./assets/fonts/lxgw-wenkai-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LXGW WenKai Local";
  src: url("./assets/fonts/lxgw-wenkai-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer reset, tokens, base, surface, type, component, motion, responsive, a11y;

/* ============================================================================
   tokens — palette, radii, spacing scale, easing, durations
   ============================================================================ */

@layer tokens {
  :root {
    color-scheme: dark;
    --font-ui: "LXGW WenKai Local", "LXGW WenKai", "Noto Serif SC", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
    --font-canvas: "LXGW WenKai Local", "LXGW WenKai", "Noto Serif SC", "Noto Sans SC", "PingFang SC", sans-serif;
    font-family: var(--font-ui);
    background: #07090f;

    /* Night ramp — page ground to chip surface */
    --c-night-1000: #07090f;
    --c-night-950: #0a0f1f;
    --c-night-900: #0e1530;
    --c-night-850: #131c3b;
    --c-night-800: #182347;
    --c-night-700: #1f2c54;
    --c-night-600: #2c3a66;
    --c-night-500: #404f7e;

    /* Gold — vellum cartography rail */
    --c-gold-100: #fff7e0;
    --c-gold-200: #ffe9a8;
    --c-gold-300: #f2d389;
    --c-gold-400: #e6bd6b;
    --c-gold-500: #d9a64f;
    --c-gold-600: #b88533;

    /* Jade — Yuan, skill-ready */
    --c-jade-300: #b6f5d8;
    --c-jade-400: #82e3b8;
    --c-jade-500: #5dd4a8;
    --c-jade-600: #34a37a;

    /* Rose — Nini, hearts */
    --c-rose-300: #ffd6e2;
    --c-rose-400: #ffadc7;
    --c-rose-500: #f08ab0;
    --c-rose-600: #c45a85;

    /* Aurora — pure decoration, used in gradient stops */
    --c-aurora-cyan: #6dd6ee;
    --c-aurora-violet: #9b8cff;
    --c-aurora-rose: #ee8eb8;

    /* Cyan — wind, secondary effects */
    --c-cyan-400: #9ee7ff;
    --c-cyan-500: #5fcdf2;

    /* Status */
    --c-danger: #e2566f;
    --c-success: var(--c-jade-400);

    /* Ink — text colors */
    --ink: #fbf8f0;
    --ink-strong: #ffffff;
    --ink-soft: rgba(245, 240, 222, 0.82);
    --ink-muted: rgba(218, 226, 238, 0.68);
    --ink-subtle: rgba(218, 226, 238, 0.46);

    /* Surface tokens */
    --panel: rgba(14, 21, 48, 0.94);
    --panel-soft: rgba(255, 255, 255, 0.04);
    --panel-strong: rgba(10, 15, 36, 0.98);
    --chip: rgba(255, 255, 255, 0.05);
    --line: rgba(242, 211, 137, 0.22);
    --line-strong: rgba(242, 211, 137, 0.46);
    --hairline: rgba(245, 240, 222, 0.10);

    /* Shadows / glows */
    --shadow-1: 0 12px 32px rgba(2, 6, 18, 0.42);
    --shadow-2: 0 28px 76px rgba(2, 6, 18, 0.62);
    --shadow-3: 0 48px 120px rgba(0, 2, 8, 0.74);
    --glow-gold: 0 0 0 1px rgba(242, 211, 137, 0.38), 0 18px 44px rgba(217, 165, 79, 0.18);
    --glow-jade: 0 0 0 1px rgba(93, 212, 168, 0.38), 0 18px 40px rgba(93, 212, 168, 0.16);
    --glow-rose: 0 0 0 1px rgba(240, 138, 176, 0.38), 0 18px 40px rgba(240, 138, 176, 0.16);

    /* Radii — small system, refined */
    --r-xs: 4px;
    --r-s: 8px;
    --r-m: 14px;
    --r-l: 20px;
    --r-pill: 999px;

    /* Touch — JS may overwrite via inline style. Default kept for tests. */
    --touch-size: 98px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --d-fast: 140ms;
    --d-base: 240ms;
    --d-slow: 520ms;
    --d-breath: 3.2s;
  }

  @supports (color: oklch(0% 0 0)) {
    :root {
      --c-night-1000: oklch(10% 0.02 270);
      --c-night-950: oklch(14% 0.04 268);
      --c-night-900: oklch(18% 0.05 266);
      --c-night-850: oklch(21% 0.055 264);
      --c-night-800: oklch(25% 0.06 262);
      --c-night-700: oklch(31% 0.07 260);
      --c-night-600: oklch(38% 0.07 258);
      --c-night-500: oklch(48% 0.07 256);

      --c-gold-100: oklch(96% 0.04 92);
      --c-gold-200: oklch(91% 0.07 90);
      --c-gold-300: oklch(86% 0.1 88);
      --c-gold-400: oklch(80% 0.12 85);
      --c-gold-500: oklch(72% 0.13 80);
      --c-gold-600: oklch(60% 0.13 75);

      --c-jade-300: oklch(90% 0.1 165);
      --c-jade-400: oklch(82% 0.13 165);
      --c-jade-500: oklch(72% 0.15 162);
      --c-jade-600: oklch(58% 0.15 162);

      --c-rose-300: oklch(88% 0.08 350);
      --c-rose-400: oklch(80% 0.12 350);
      --c-rose-500: oklch(70% 0.14 350);
      --c-rose-600: oklch(56% 0.15 350);

      --c-aurora-cyan: oklch(82% 0.12 215);
      --c-aurora-violet: oklch(72% 0.16 290);
      --c-aurora-rose: oklch(78% 0.13 350);

      --c-cyan-400: oklch(88% 0.08 230);
      --c-cyan-500: oklch(78% 0.1 230);

      --c-danger: oklch(64% 0.18 12);
    }
  }
}

/* ============================================================================
   reset
   ============================================================================ */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body,
  #shell {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body,
  button,
  input {
    font-family: var(--font-ui);
  }

  button,
  input {
    font: inherit;
  }
}

/* ============================================================================
   base — body backdrop, canvas, focus, skip-link
   ============================================================================ */

@layer base {
  body {
    color: var(--ink);
    font-feature-settings: "palt" 1, "kern" 1;
    background:
      radial-gradient(ellipse 120% 80% at 50% 110%, rgba(155, 140, 255, 0.10), transparent 60%),
      radial-gradient(ellipse 80% 60% at 12% 0%, rgba(95, 205, 242, 0.08), transparent 55%),
      radial-gradient(ellipse 80% 60% at 88% 0%, rgba(238, 142, 184, 0.08), transparent 55%),
      linear-gradient(180deg, #131c3b 0%, #0e1530 48%, #07090f 100%);
    isolation: isolate;
  }

  /* Layer 1: drifting constellation grid (fine, decorative) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      radial-gradient(circle, rgba(242, 211, 137, 0.62) 0 1px, transparent 1.5px),
      radial-gradient(circle, rgba(158, 231, 255, 0.38) 0 1px, transparent 1.5px),
      radial-gradient(circle, rgba(238, 142, 184, 0.30) 0 1px, transparent 1.5px);
    background-size: 146px 122px, 211px 157px, 287px 201px;
    background-position: 22px 18px, 70px 44px, 130px 92px;
    opacity: 0.34;
  }

  /* Layer 2: static aurora veil. Avoid full-screen blur/animated filters. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(ellipse 44% 24% at 18% 18%, rgba(109, 214, 238, 0.16), transparent 72%),
      radial-gradient(ellipse 48% 24% at 82% 20%, rgba(238, 142, 184, 0.15), transparent 72%),
      linear-gradient(118deg, transparent 0 36%, rgba(130, 227, 184, 0.08) 42% 45%, transparent 51%),
      linear-gradient(64deg, transparent 0 58%, rgba(155, 140, 255, 0.10) 64% 68%, transparent 74%);
    opacity: 0.48;
  }

  /* Ambient menu-side decorations: hidden during gameplay (no .screen.active) */
  .ambient,
  .ambient-strip {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    color: var(--ink-muted);
    opacity: 0;
    transition: opacity var(--d-slow) var(--ease-out);
  }

  body:has(.screen.active) .ambient,
  body:has(.screen.active) .ambient-strip {
    opacity: 1;
  }

  body:has(.hud.active) .ambient,
  body:has(.hud.active) .ambient-strip {
    opacity: 0;
    transition-duration: 0ms;
  }

  .ambient {
    top: 0;
    bottom: 0;
    width: clamp(56px, 14vw, 240px);
    overflow: hidden;
  }

  .ambient-left {
    left: 0;
  }

  .ambient-right {
    right: 0;
  }

  .ambient-streamer {
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(242, 211, 137, 0.36) 18%,
      rgba(130, 227, 184, 0.30) 50%,
      rgba(238, 142, 184, 0.30) 82%,
      transparent 100%);
    opacity: 0.7;
    box-shadow: 0 0 12px rgba(242, 211, 137, 0.18);
  }

  .ambient-left .ambient-streamer {
    right: 26%;
  }

  .ambient-right .ambient-streamer {
    left: 26%;
  }

  .ambient-rune {
    position: absolute;
    color: rgba(242, 211, 137, 0.22);
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 0 18px rgba(242, 211, 137, 0.18);
    animation: ambient-drift 18s var(--ease-soft) infinite;
  }

  .ambient-rune-a {
    top: 14%;
    left: 22%;
    animation-delay: 0s;
  }

  .ambient-rune-b {
    top: 46%;
    left: 38%;
    animation-delay: -6s;
    color: rgba(130, 227, 184, 0.20);
  }

  .ambient-rune-c {
    top: 76%;
    left: 18%;
    animation-delay: -12s;
    color: rgba(238, 142, 184, 0.22);
  }

  .ambient-right .ambient-rune-a {
    left: auto;
    right: 22%;
  }

  .ambient-right .ambient-rune-b {
    left: auto;
    right: 38%;
  }

  .ambient-right .ambient-rune-c {
    left: auto;
    right: 18%;
  }

  .ambient-spark {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 247, 213, 0.85);
    box-shadow: 0 0 10px rgba(242, 211, 137, 0.65);
    animation: ambient-twinkle 4.6s var(--ease-soft) infinite;
  }

  /* v1.2.4 — only fine-pointer surfaces grow the spark to a clickable hit area for the hunt */
  @media (hover: hover) and (pointer: fine) {
    .ambient.hunt-on .ambient-spark {
      pointer-events: auto;
      cursor: pointer;
    }

    .ambient.hunt-on .ambient-spark::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
    }
  }

  .ambient-spark-1 {
    top: 22%;
    left: 64%;
    animation-delay: 0s;
  }

  .ambient-spark-2 {
    top: 58%;
    left: 12%;
    animation-delay: -1.4s;
    background: rgba(180, 240, 255, 0.85);
    box-shadow: 0 0 10px rgba(109, 214, 238, 0.7);
  }

  .ambient-spark-3 {
    top: 84%;
    left: 52%;
    animation-delay: -3s;
    background: rgba(255, 220, 232, 0.85);
    box-shadow: 0 0 10px rgba(238, 142, 184, 0.7);
  }

  /* v1.2.4 — constellation-hunt feedback. Sparks gain a one-shot lit glow when discovered. */
  .ambient-spark.lit {
    animation: spark-lit 1400ms var(--ease-soft) forwards;
  }

  .ambient-right .ambient-spark-1 {
    left: auto;
    right: 64%;
  }

  .ambient-right .ambient-spark-2 {
    left: auto;
    right: 12%;
  }

  .ambient-right .ambient-spark-3 {
    left: auto;
    right: 52%;
  }

  .ambient-constellation {
    position: absolute;
    top: 28%;
    right: 22%;
    width: clamp(72px, 9vw, 130px);
    height: auto;
    opacity: 0.7;
    animation: ambient-constellation-pulse 8s var(--ease-soft) infinite;
  }

  .ambient-strip {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 16px;
    background:
      linear-gradient(180deg, transparent 0%, rgba(7, 11, 24, 0.42) 70%, rgba(7, 11, 24, 0.7) 100%);
    color: var(--ink-muted);
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .ambient-strip-mark {
    color: var(--c-gold-300);
    font-size: 13px;
    text-shadow: 0 0 10px rgba(242, 211, 137, 0.55);
    animation: ambient-twinkle 5.4s var(--ease-soft) infinite;
  }

  .ambient-strip-text {
    color: var(--c-gold-200);
    font-feature-settings: "ss01" 1, "tnum" 1;
    letter-spacing: 0.22em;
  }

  .ambient-strip-quote {
    color: var(--ink-soft);
    letter-spacing: 0.12em;
    font-style: italic;
    opacity: 0.84;
  }

  .ambient-strip-credit {
    color: rgba(232, 240, 255, 0.55);
    letter-spacing: 0.12em;
  }

  .ambient-strip-divider {
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 211, 137, 0.32), transparent);
  }

  /* Pointer trail used by cursor-trail.js */
  .cursor-trail {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
    pointer-events: none;
    contain: layout paint;
  }

  .cursor-spark {
    position: absolute;
    width: var(--size, 9px);
    height: var(--size, 9px);
    margin: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(255, 247, 213, 0.95) 0 22%, rgba(242, 211, 137, 0.6) 38%, transparent 70%);
    box-shadow:
      0 0 2px rgba(255, 247, 213, 0.8),
      0 0 16px rgba(242, 211, 137, 0.62),
      0 0 28px rgba(242, 211, 137, 0.18);
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: cursor-spark-fade 960ms var(--ease-out) forwards;
  }

  .cursor-spark::after {
    content: "";
    position: absolute;
    inset: 36%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px rgba(255, 247, 213, 0.7);
  }

  .cursor-spark.tone-rose {
    background:
      radial-gradient(circle, rgba(255, 220, 232, 0.95) 0 22%, rgba(238, 142, 184, 0.6) 38%, transparent 70%);
    box-shadow: 0 0 14px rgba(238, 142, 184, 0.55);
  }

  .cursor-spark.tone-jade {
    background:
      radial-gradient(circle, rgba(216, 255, 233, 0.95) 0 22%, rgba(130, 227, 184, 0.6) 38%, transparent 70%);
    box-shadow: 0 0 14px rgba(130, 227, 184, 0.55);
  }

  .cursor-spark.tone-cyan {
    background:
      radial-gradient(circle, rgba(220, 250, 255, 0.95) 0 22%, rgba(109, 214, 238, 0.58) 38%, transparent 70%);
    box-shadow:
      0 0 2px rgba(220, 250, 255, 0.8),
      0 0 16px rgba(109, 214, 238, 0.6),
      0 0 28px rgba(109, 214, 238, 0.18);
  }

  /* Romantic easter-egg overlays */
  .love-letter,
  .love-heart,
  .love-toast {
    position: fixed;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
  }

  .love-letter.show,
  .love-heart.show,
  .love-toast.show {
    opacity: 1;
  }

  .love-letter {
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(7, 11, 24, 0.56), rgba(7, 11, 24, 0.84));
  }

  .love-letter.show {
    pointer-events: auto;
  }

  .love-letter-card {
    position: relative;
    max-width: min(440px, 90vw);
    padding: 28px 32px 24px;
    border-radius: var(--r-l);
    color: var(--ink);
    background:
      radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255, 220, 232, 0.18), transparent 60%),
      linear-gradient(160deg, rgba(31, 44, 84, 0.96), rgba(14, 21, 48, 0.98));
    box-shadow:
      inset 0 0 0 1px rgba(242, 211, 137, 0.36),
      inset 0 1px rgba(255, 247, 213, 0.22),
      0 36px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(238, 142, 184, 0.08);
    transform: translateY(12px) scale(0.96);
    transition: transform var(--d-base) var(--ease-spring);
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  .love-letter.show .love-letter-card {
    transform: translateY(0) scale(1);
  }

  .love-letter-card::before {
    content: "❦";
    display: block;
    margin-bottom: 6px;
    color: var(--c-rose-400);
    font-size: 22px;
    text-shadow: 0 0 14px rgba(238, 142, 184, 0.55);
  }

  .love-letter-card .love-letter-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--c-gold-300);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }

  .love-letter-card .love-letter-body {
    color: var(--ink-soft);
  }

  .love-letter-card .love-letter-sign {
    display: block;
    margin-top: 14px;
    color: var(--c-gold-200);
    font-size: 13px;
    letter-spacing: 0.18em;
  }

  .love-letter-card .love-letter-close {
    margin-top: 18px;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--c-gold-200), var(--c-gold-400));
    color: #1a1f2e;
    font-weight: 700;
    pointer-events: auto;
    cursor: pointer;
  }

  .love-heart {
    inset: 0;
    display: grid;
    place-items: center;
  }

  .love-heart svg {
    width: clamp(180px, 32vw, 320px);
    height: auto;
    filter: drop-shadow(0 0 24px rgba(238, 142, 184, 0.55));
    animation: love-heart-beat 1.6s var(--ease-soft) infinite;
  }

  .love-toast {
    top: max(28px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    color: var(--ink);
    background:
      linear-gradient(180deg, rgba(255, 247, 213, 0.14), transparent 70%),
      rgba(7, 11, 24, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(242, 211, 137, 0.42),
      0 18px 40px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    letter-spacing: 0.18em;
    transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
  }

  .love-toast.show {
    transform: translateX(-50%) translateY(0);
  }

  .love-toast .love-toast-mark {
    color: var(--c-rose-400);
    margin-right: 8px;
  }

  /* A tiny clickable hidden gem on the cover that only reveals on hover */
  .menu-heroes .secret-gem {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    top: 14%;
    right: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 247, 213, 0.0), rgba(242, 211, 137, 0.0));
    cursor: pointer;
    pointer-events: auto;
    transition: background var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring);
  }

  @media (hover: hover) {
    .menu-heroes .secret-gem:hover,
    .menu-heroes .secret-gem:focus-visible {
      background: radial-gradient(circle, rgba(255, 247, 213, 0.92) 0 30%, rgba(242, 211, 137, 0.42) 50%, transparent 80%);
      transform: scale(1.4);
      box-shadow: 0 0 16px rgba(242, 211, 137, 0.7);
      outline: none;
    }
  }

  /* Buttons — base tactile chip */
  button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--r-s);
    color: var(--ink);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(255, 255, 255, 0.04);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.14),
      inset 0 0 0 1px rgba(245, 242, 234, 0.10),
      0 14px 30px rgba(0, 0, 0, 0.24);
    color-scheme: dark;
    cursor: pointer;
    touch-action: manipulation;
    transition-property: transform, background-color, box-shadow, color, opacity;
    transition-duration: var(--d-fast);
    transition-timing-function: var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  button,
  button *,
  .brand h1,
  .brand h1 *,
  .menu-heroes,
  .menu-heroes *,
  #touchControls,
  #touchControls * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
  }

  button:active {
    transform: translateY(2px) scale(0.97);
  }

  button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  button:focus-visible,
  input:focus-visible,
  .skip-link:focus-visible {
    outline: 2px solid var(--c-gold-300);
    outline-offset: 3px;
  }

  @media (hover: hover) {
    button:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.06);
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(242, 211, 137, 0.34),
        0 18px 40px rgba(217, 165, 79, 0.16);
      transform: translateY(-1px);
    }

    button:hover::after {
      opacity: 1;
    }
  }

  button.primary {
    color: #1a1f2e;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 60%),
      linear-gradient(135deg, var(--c-gold-200), var(--c-gold-400) 56%, #f39b68);
    box-shadow:
      inset 0 1px rgba(255, 250, 220, 0.7),
      inset 0 0 0 1px rgba(255, 220, 150, 0.5),
      0 14px 30px rgba(217, 165, 79, 0.28),
      0 28px 64px rgba(217, 165, 79, 0.16);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  button.primary::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--r-s) - 1px);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 36%);
  }

  @media (hover: hover) {
    button.primary:hover {
      box-shadow:
        inset 0 1px rgba(255, 250, 220, 0.85),
        inset 0 0 0 1px rgba(255, 230, 170, 0.65),
        0 18px 38px rgba(217, 165, 79, 0.36),
        0 32px 72px rgba(217, 165, 79, 0.22);
    }
  }

  button.danger {
    color: #ffecef;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 60%),
      rgba(171, 46, 70, 0.55);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px rgba(226, 86, 111, 0.46),
      0 14px 30px rgba(126, 24, 50, 0.28);
  }

  /* Skip link — accessible entry point */
  .skip-link {
    position: fixed;
    z-index: 50;
    left: 16px;
    top: 12px;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: var(--r-s);
    color: #1a1f2e;
    background: var(--c-gold-200);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    font-weight: 700;
    transition: transform var(--d-base) var(--ease-spring);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  /* Game canvas — sits behind everything */
  #game {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--c-night-900);
    z-index: 0;
  }

  #shell {
    position: relative;
    z-index: 1;
  }
}

/* ============================================================================
   surface — screens, panels, ink-vellum treatment
   ============================================================================ */

@layer surface {
  .screen {
    position: fixed;
    inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    display: none;
    pointer-events: auto;
    z-index: 5;
  }

  .screen.active {
    display: grid;
    animation: screen-enter 480ms var(--ease-out) both;
  }

  .panel {
    position: relative;
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    gap: 24px;
    padding: 44px;
    overflow: auto;
    border-radius: var(--r-l);
    background:
      /* top-light gilded edge */
      linear-gradient(180deg, rgba(255, 247, 213, 0.06) 0 1px, transparent 1px 100%),
      /* warm top-corner light */
      radial-gradient(ellipse 90% 60% at 50% -20%, rgba(242, 211, 137, 0.16), transparent 60%),
      /* low-corner aurora wash */
      radial-gradient(ellipse 70% 50% at 100% 100%, rgba(155, 140, 255, 0.10), transparent 70%),
      radial-gradient(ellipse 70% 50% at 0% 100%, rgba(93, 212, 168, 0.08), transparent 70%),
      /* ink vellum body */
      linear-gradient(160deg, rgba(19, 28, 59, 0.94), rgba(14, 21, 48, 0.98) 60%, rgba(10, 15, 36, 0.99)),
      var(--panel);
    box-shadow:
      inset 0 0 0 1px var(--line),
      inset 0 1px rgba(255, 255, 255, 0.14),
      inset 0 -1px rgba(255, 255, 255, 0.04),
      var(--shadow-3);
  }

  /* Inner gold cartography frame (hairline) */
  .panel::before {
    content: "";
    position: absolute;
    inset: 16px;
    pointer-events: none;
    border-radius: calc(var(--r-l) - 6px);
    background:
      linear-gradient(90deg, transparent, rgba(242, 211, 137, 0.36), transparent) top left / 100% 1px no-repeat,
      linear-gradient(90deg, transparent, rgba(242, 211, 137, 0.20), transparent) bottom left / 100% 1px no-repeat,
      linear-gradient(0deg, transparent, rgba(242, 211, 137, 0.18), transparent) top left / 1px 100% no-repeat,
      linear-gradient(0deg, transparent, rgba(242, 211, 137, 0.18), transparent) top right / 1px 100% no-repeat;
    opacity: 0.9;
  }

  /* Atlas corner notches — four small gold ticks */
  .panel::after {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border-radius: calc(var(--r-l) - 4px);
    background:
      linear-gradient(135deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) top left / 18px 18px no-repeat,
      linear-gradient(225deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) top right / 18px 18px no-repeat,
      linear-gradient(45deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) bottom left / 18px 18px no-repeat,
      linear-gradient(315deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) bottom right / 18px 18px no-repeat;
    opacity: 0.55;
  }
}

/* ============================================================================
   type — eyebrow, brand, headings
   ============================================================================ */

@layer type {
  .eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    color: var(--c-gold-300);
    background:
      linear-gradient(180deg, rgba(242, 211, 137, 0.08), rgba(242, 211, 137, 0.02)),
      rgba(7, 11, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(242, 211, 137, 0.24);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-feature-settings: "ss01" 1, "tnum" 1;
  }

  .brand {
    align-self: center;
    position: relative;
  }

  /* v1.2.4 — sub-aurora brushwork that sweeps under the wordmark on first paint */
  .brand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 6px;
    pointer-events: none;
    border-radius: 999px;
    background:
      radial-gradient(ellipse 50% 100% at 18% 50%, rgba(242, 211, 137, 0.55), transparent 70%),
      radial-gradient(ellipse 40% 100% at 46% 50%, rgba(238, 142, 184, 0.42), transparent 70%),
      radial-gradient(ellipse 38% 100% at 72% 50%, rgba(130, 227, 184, 0.40), transparent 70%),
      radial-gradient(ellipse 28% 100% at 92% 50%, rgba(109, 214, 238, 0.36), transparent 70%);
    filter: blur(0.6px);
    opacity: 0;
    transform-origin: 0% 50%;
    animation: aurora-sweep 1400ms var(--ease-out) 220ms forwards;
  }

  .brand h1 {
    display: grid;
    gap: 4px;
    margin: 8px 0 12px;
    font-size: clamp(56px, 7.4vw, 96px);
    line-height: 0.94;
    letter-spacing: 0.012em;
    text-wrap: balance;
    color: var(--ink);
    text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.2),
      0 12px 36px rgba(242, 211, 137, 0.18),
      0 28px 80px rgba(155, 140, 255, 0.22);
    background: linear-gradient(180deg, var(--c-gold-100) 0%, var(--ink) 60%, var(--c-rose-300) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brand-reveal 1100ms var(--ease-out) both;
  }

  .brand h1 span {
    display: block;
  }

  .brand h1 span:first-child {
    font-size: 0.84em;
    color: var(--c-gold-200);
    -webkit-background-clip: initial;
    background-clip: initial;
    background: none;
    letter-spacing: 0.05em;
    opacity: 0.92;
  }

  .brand p,
  .screen-head p,
  .character-card p,
  .modal-card p {
    color: var(--ink-muted);
  }

  .brand p {
    margin: 0;
    max-width: 38ch;
    font-size: 18px;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--ink-soft);
  }

  .screen-head h2,
  .modal-card h2 {
    margin: 4px 0 0;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.04;
    letter-spacing: 0.012em;
    color: var(--ink);
    text-wrap: balance;
  }
}

/* ============================================================================
   component — menu, characters, levels, settings, HUD, modal, touch
   ============================================================================ */

@layer component {
  /* ------- Main menu ----------------------------------------------------- */

  #menu.panel {
    min-height: min(680px, calc(100dvh - 32px));
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.75fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    overflow: hidden auto;
  }

  #menu .brand,
  #menu .menu-actions,
  #menu .save-strip {
    grid-column: 1;
  }

  .menu-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  .menu-actions button {
    min-width: 0;
    height: 60px;
    padding: 0 18px;
    font-size: 17px;
    letter-spacing: 0.02em;
  }

  .menu-heroes {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 4;
    min-height: 498px;
    align-self: center;
    overflow: hidden;
    border-radius: var(--r-l);
    isolation: isolate;
    /* v1.2.4 — pointer-driven parallax custom props (set by cursor-trail.js) */
    --mx: 0;
    --my: 0;
  }

  /* v1.2.4 — touch-only breath tilt fallback when fine-pointer parallax is unavailable */
  @media (hover: none) and (pointer: coarse) {
    .menu-heroes {
      animation: hero-breath 7s var(--ease-soft) infinite;
    }
  }

  /* Aurora halo behind the heroes */
  .menu-heroes::before {
    content: "";
    position: absolute;
    inset: -8% -12%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 46% 34% at 30% 48%, rgba(238, 142, 184, 0.36), transparent 72%),
      radial-gradient(ellipse 48% 34% at 72% 54%, rgba(109, 214, 238, 0.34), transparent 72%),
      linear-gradient(118deg, transparent 0 55%, rgba(130, 227, 184, 0.30) 58% 60%, transparent 63%),
      radial-gradient(ellipse 64% 34% at 50% 18%, rgba(242, 211, 137, 0.18), transparent 72%);
  }

  .menu-heroes::after {
    content: "";
    position: absolute;
    inset: 18px;
    pointer-events: none;
    border-radius: var(--r-m);
    background:
      radial-gradient(circle at 18% 24%, rgba(242, 211, 137, 0.72) 0 1.4px, transparent 1.8px),
      radial-gradient(circle at 28% 36%, rgba(245, 242, 234, 0.52) 0 1px, transparent 1.5px),
      radial-gradient(circle at 66% 21%, rgba(130, 227, 184, 0.58) 0 1.3px, transparent 1.8px),
      radial-gradient(circle at 82% 34%, rgba(109, 214, 238, 0.50) 0 1.1px, transparent 1.6px),
      radial-gradient(circle at 72% 70%, rgba(242, 211, 137, 0.50) 0 1px, transparent 1.5px),
      linear-gradient(28deg, transparent 0 20%, rgba(242, 211, 137, 0.16) 20.2% 20.5%, transparent 21%),
      linear-gradient(150deg, transparent 0 61%, rgba(109, 214, 238, 0.14) 61.2% 61.5%, transparent 62%),
      linear-gradient(90deg, transparent, rgba(242, 211, 137, 0.20), transparent) 50% 14% / 78% 1px no-repeat,
      linear-gradient(90deg, transparent, rgba(130, 227, 184, 0.16), transparent) 50% 86% / 72% 1px no-repeat,
      radial-gradient(ellipse 42% 4% at 50% 82%, rgba(0, 0, 0, 0.34), transparent 72%);
    box-shadow: inset 0 0 0 1px rgba(242, 211, 137, 0.10);
    opacity: 0.72;
  }

  .hero-card {
    position: absolute;
    bottom: 6%;
    width: 58%;
    height: 82%;
    overflow: hidden;
    border-radius: var(--r-m);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.14),
      inset 0 1px rgba(255, 255, 255, 0.10),
      inset 0 0 0 2px rgba(217, 182, 106, 0.06),
      0 38px 80px rgba(0, 0, 0, 0.42);
    transition: transform var(--d-slow) var(--ease-spring);
  }

  .hero-card::before,
  .hero-card::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .hero-card::before {
    top: 8%;
    width: 46%;
    height: 72%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(245, 242, 234, 0.2), rgba(245, 242, 234, 0.04) 70%, transparent 100%);
  }

  .hero-card::after {
    bottom: 8%;
    width: 46%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.36), transparent 70%);
  }

  .nini-hero {
    left: 2%;
    background:
      url("./assets/characters/nini-v2.png") center bottom / contain no-repeat,
      radial-gradient(ellipse 90% 70% at 50% 30%, rgba(240, 138, 176, 0.32), transparent 70%),
      linear-gradient(160deg, rgba(240, 138, 176, 0.34), rgba(217, 182, 106, 0.12) 45%, rgba(93, 212, 168, 0.10)),
      var(--c-night-700);
    /* v1.2.4 — parallax: nini drifts with the pointer */
    transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * -4px), 0)
      rotate(-4deg) translateY(16px);
    transition: transform var(--d-base) var(--ease-out);
  }

  .yuan-hero {
    right: 2%;
    height: 87%;
    background:
      url("./assets/characters/yuan-v2.png") center bottom / contain no-repeat,
      radial-gradient(ellipse 90% 70% at 50% 30%, rgba(95, 205, 242, 0.30), transparent 70%),
      linear-gradient(120deg, transparent 0 63%, rgba(93, 212, 168, 0.42) 64% 66.5%, transparent 67%),
      linear-gradient(160deg, rgba(95, 205, 242, 0.24), rgba(93, 212, 168, 0.20) 52%, rgba(242, 211, 137, 0.10)),
      var(--c-night-600);
    /* v1.2.4 — parallax: yuan counter-drifts so the pair feels three-dimensional */
    transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0)
      rotate(3deg);
    transition: transform var(--d-base) var(--ease-out);
  }

  @media (hover: hover) {
    .menu-heroes:hover .nini-hero {
      transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * -4px), 0)
        rotate(-3deg) translateY(10px);
    }

    .menu-heroes:hover .yuan-hero {
      transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0)
        rotate(2deg) translateY(-4px);
    }
  }

  /* ------- Save strip ---------------------------------------------------- */

  .save-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-self: start;
    min-height: 72px;
  }

  .save-chip {
    position: relative;
    padding: 14px 16px;
    border-radius: var(--r-m);
    color: var(--ink-muted);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.0)),
      rgba(7, 11, 24, 0.52);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.10),
      inset 0 1px rgba(255, 255, 255, 0.06),
      0 10px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    isolation: isolate;
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .save-chip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, var(--c-gold-300), transparent 70%);
    opacity: 0.7;
  }

  .save-chip strong {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
    letter-spacing: 0.01em;
  }

  /* ------- Screen head --------------------------------------------------- */

  .screen-head {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .icon {
    width: 48px;
    min-width: 48px;
    padding: 0;
    font-size: 30px;
    line-height: 1;
    border-radius: var(--r-pill);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)),
      rgba(7, 11, 24, 0.6);
    box-shadow:
      inset 0 0 0 1px rgba(242, 211, 137, 0.22),
      0 12px 28px rgba(0, 0, 0, 0.28);
  }

  /* ------- Character grid ------------------------------------------------ */

  .character-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .character-card {
    position: relative;
    display: grid;
    min-height: 488px;
    padding: 22px;
    overflow: hidden;
    border-radius: var(--r-l);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(242, 211, 137, 0.10), transparent 70%),
      rgba(7, 11, 24, 0.54);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.10),
      inset 0 1px rgba(255, 255, 255, 0.08),
      0 24px 60px rgba(0, 0, 0, 0.32);
    opacity: 0.76;
    transition-property: transform, opacity, box-shadow;
    transition-duration: var(--d-base);
    transition-timing-function: var(--ease-out);
    isolation: isolate;
  }

  /* Character-specific halo (only visible when selected/hovered) */
  .character-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
  }

  .character-card[data-character="nini"]::after {
    background:
      radial-gradient(ellipse 60% 60% at 50% 30%, rgba(240, 138, 176, 0.34), transparent 70%);
    box-shadow: 0 0 0 1px rgba(240, 138, 176, 0.42), 0 24px 60px rgba(240, 138, 176, 0.20);
  }

  .character-card[data-character="yuan"]::after {
    background:
      radial-gradient(ellipse 60% 60% at 50% 30%, rgba(130, 227, 184, 0.34), transparent 70%);
    box-shadow: 0 0 0 1px rgba(130, 227, 184, 0.42), 0 24px 60px rgba(130, 227, 184, 0.20);
  }

  .character-card.selected,
  .character-card:focus-within {
    opacity: 1;
    box-shadow:
      var(--glow-gold),
      inset 0 0 0 1px rgba(242, 211, 137, 0.34),
      inset 0 1px rgba(255, 255, 255, 0.14),
      0 28px 70px rgba(0, 0, 0, 0.4);
  }

  .character-card.selected::after,
  .character-card:focus-within::after {
    opacity: 1;
  }

  .character-card.selected::before {
    content: "已选定";
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    color: #1a1f2e;
    background: linear-gradient(180deg, var(--c-gold-200), var(--c-gold-400));
    box-shadow: 0 6px 18px rgba(217, 165, 79, 0.42);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  @media (hover: hover) {
    .character-card:hover {
      opacity: 1;
      transform: translateY(-3px);
    }

    .character-card:hover::after {
      opacity: 0.7;
    }
  }

  .character-card h3 {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .character-card p {
    margin: 0;
    line-height: 1.7;
  }

  .portrait {
    position: relative;
    height: 240px;
    margin-bottom: 18px;
    border-radius: var(--r-m);
    background-size: 100% 100%;
    background-position: center;
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.14),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 22px 50px rgba(0, 0, 0, 0.34);
    overflow: hidden;
  }

  .portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent 60%, rgba(7, 11, 24, 0.55) 100%);
  }

  .portrait.nini {
    background:
      url("./assets/characters/nini-v2.png") center 9% / auto 185% no-repeat,
      radial-gradient(ellipse 70% 60% at 50% 30%, rgba(240, 138, 176, 0.38), transparent 70%),
      linear-gradient(135deg, rgba(240, 138, 176, 0.26), rgba(242, 211, 137, 0.08) 46%, rgba(95, 205, 242, 0.16));
  }

  .portrait.yuan {
    background:
      url("./assets/characters/yuan-v2.png") center 10% / auto 178% no-repeat,
      radial-gradient(ellipse 70% 60% at 50% 30%, rgba(95, 205, 242, 0.30), transparent 70%),
      linear-gradient(120deg, transparent 0 63%, rgba(93, 212, 168, 0.46) 64% 66.5%, transparent 67%),
      linear-gradient(135deg, rgba(93, 212, 168, 0.18), rgba(95, 205, 242, 0.20));
  }

  .ability-list {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    color: var(--ink-muted);
  }

  .ability-list div {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-m);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
      rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 0 1px rgba(245, 242, 234, 0.08);
  }

  .ability-list dt {
    color: var(--c-gold-300);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .ability-list dd {
    margin: 0;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .character-card button {
    margin-top: auto;
    width: 100%;
    height: 52px;
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  /* ------- Level grid ---------------------------------------------------- */

  .level-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    grid-auto-rows: minmax(112px, auto);
    gap: 12px;
  }

  .level-world {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: var(--r-m);
    color: var(--c-gold-200);
    background:
      linear-gradient(90deg, rgba(242, 211, 137, 0.14), rgba(130, 227, 184, 0.08), transparent),
      rgba(7, 11, 24, 0.38);
    box-shadow:
      inset 0 0 0 1px rgba(242, 211, 137, 0.16),
      inset 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  .level-world::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 211, 137, 0.5), rgba(130, 227, 184, 0.34), transparent);
  }

  .level-world-name {
    color: var(--c-gold-200);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .level-world-subtitle {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .level-world[data-world="world3"] {
    color: var(--c-cyan-400);
    background:
      linear-gradient(90deg, rgba(158, 231, 255, 0.16), rgba(130, 227, 184, 0.08), transparent),
      rgba(7, 11, 24, 0.42);
    box-shadow:
      inset 0 0 0 1px rgba(158, 231, 255, 0.20),
      inset 0 1px rgba(255, 255, 255, 0.07);
  }

  .level-world[data-world="world3"] .level-world-name {
    color: var(--c-cyan-400);
  }

  .level-world[data-world="world3"]::before {
    background: linear-gradient(90deg, transparent, rgba(158, 231, 255, 0.55), rgba(130, 227, 184, 0.34), transparent);
  }

  .level-item {
    position: relative;
    display: grid;
    grid-template-rows: minmax(78px, auto) auto;
    align-content: stretch;
    align-items: start;
    justify-content: stretch;
    justify-items: start;
    gap: 10px;
    min-height: 118px;
    padding: 20px 22px;
    text-align: left;
    border-radius: var(--r-m);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
      linear-gradient(135deg, rgba(242, 211, 137, 0.08), transparent 42%),
      rgba(255, 255, 255, 0.04);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.10),
      inset 0 1px rgba(255, 255, 255, 0.06),
      0 14px 32px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
  }

  .level-item[data-world="world3"] {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
      linear-gradient(135deg, rgba(158, 231, 255, 0.10), transparent 44%),
      rgba(255, 255, 255, 0.04);
    box-shadow:
      inset 0 0 0 1px rgba(158, 231, 255, 0.12),
      inset 0 1px rgba(255, 255, 255, 0.07),
      0 14px 32px rgba(0, 0, 0, 0.24);
  }

  .level-item.featured {
    grid-column: span 2;
    min-height: 214px;
    align-content: end;
    grid-template-rows: auto auto;
    padding: 22px;
    background:
      linear-gradient(180deg, transparent 0 38%, rgba(7, 11, 24, 0.78) 100%),
      var(--level-banner),
      rgba(255, 255, 255, 0.05);
    background-size: cover;
    box-shadow:
      var(--glow-gold),
      inset 0 0 0 1px rgba(242, 211, 137, 0.26),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 30px 70px rgba(0, 0, 0, 0.42);
  }

  /* Atlas compass on the featured chapter — v1.2.4 rotates slowly to feel cartographic */
  .level-item.featured::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid transparent;
    background:
      linear-gradient(rgba(7, 11, 24, 0.24), rgba(7, 11, 24, 0.24)) padding-box,
      conic-gradient(
        from 18deg,
        rgba(242, 211, 137, 0) 0deg,
        rgba(242, 211, 137, 0.6) 64deg,
        rgba(255, 255, 255, 0.8) 118deg,
        rgba(130, 227, 184, 0.52) 178deg,
        rgba(242, 211, 137, 0) 360deg
      ) border-box;
    pointer-events: none;
    animation: compass-rotate 18s linear infinite;
  }

  .level-item.featured::after {
    content: "✦";
    position: absolute;
    top: 30px;
    right: 30px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: var(--c-gold-200);
    font-size: 22px;
    text-shadow: 0 2px 12px rgba(242, 211, 137, 0.7);
  }

  /* v1.2.4/v1.3.0 — meridian rail revealed on grid hover, now crossing grouped starfields */
  .level-list {
    position: relative;
  }

  .level-list::after {
    content: "";
    position: absolute;
    inset: 18% 10% 18% 10%;
    pointer-events: none;
    border-radius: 22px;
    background:
      linear-gradient(120deg, transparent 0 18%, rgba(242, 211, 137, 0.32) 19% 19.4%, transparent 20%) center / 100% 100% no-repeat,
      linear-gradient(60deg, transparent 0 36%, rgba(130, 227, 184, 0.20) 37% 37.4%, transparent 38%) center / 100% 100% no-repeat,
      radial-gradient(circle at 18% 24%, rgba(242, 211, 137, 0.55) 0 1.5px, transparent 2px),
      radial-gradient(circle at 78% 22%, rgba(255, 247, 213, 0.65) 0 1.6px, transparent 2px),
      radial-gradient(circle at 28% 78%, rgba(130, 227, 184, 0.45) 0 1.4px, transparent 2px),
      radial-gradient(circle at 72% 76%, rgba(238, 142, 184, 0.45) 0 1.4px, transparent 2px);
    opacity: 0;
    transition: opacity var(--d-slow) var(--ease-out);
  }

  @media (hover: hover) {
    .level-list:hover::after {
      opacity: 0.42;
    }
  }

  @media (hover: hover) {
    .level-item:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 0 1px rgba(242, 211, 137, 0.32),
        inset 0 1px rgba(255, 255, 255, 0.10),
        0 22px 50px rgba(0, 0, 0, 0.36);
    }
  }

  .level-item.locked {
    opacity: 0.42;
  }

  .level-item.locked::before,
  .level-item.locked::after {
    display: none;
  }

  .level-item strong {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }

  .level-copy {
    display: grid;
    justify-items: start;
    gap: 4px;
    width: 100%;
  }

  .level-vibe,
  .level-hint {
    display: block;
  }

  .level-item span {
    color: var(--ink-soft);
    line-height: 1.5;
  }

  .level-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    align-self: end;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
  }

  .level-item .level-stars {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    letter-spacing: 0.02em;
  }

  .level-item .level-stars .star {
    display: inline-block;
    line-height: 1;
    font-size: 16px;
    transition: transform var(--d-fast) var(--ease-out);
  }

  .level-item .level-stars .star.filled {
    color: var(--c-gold-200);
    text-shadow:
      0 0 1px rgba(255, 240, 192, 0.85),
      0 0 10px rgba(242, 211, 137, 0.55),
      0 0 18px rgba(242, 211, 137, 0.28);
  }

  .level-item .level-stars .star.empty {
    color: rgba(245, 242, 234, 0.22);
  }

  .level-item .level-sep {
    color: rgba(242, 211, 137, 0.42);
  }

  .level-item .level-best {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  .level-item .level-best-label {
    color: var(--ink-muted);
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .level-item .level-best-value {
    color: var(--c-gold-200);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(242, 211, 137, 0.28);
  }

  .level-item.locked .level-stars .star.filled,
  .level-item.locked .level-best-value {
    color: rgba(245, 242, 234, 0.32);
    text-shadow: none;
  }

  @media (hover: hover) {
    .level-item:hover .level-stars .star.filled {
      transform: translateY(-1px);
    }
  }

  /* ------- Settings ------------------------------------------------------ */

  .settings-list {
    display: grid;
    gap: 22px;
    max-width: 660px;
  }

  .settings-list label {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: center;
    padding: 14px 16px 14px 44px;
    border-radius: var(--r-m);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
      rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 0 1px rgba(245, 242, 234, 0.08);
    color: var(--ink-soft);
    font-size: 15px;
  }

  /* v1.2.4 — gold rune chip + ribbon notch on each settings row */
  .settings-list label[data-rune]::before {
    content: attr(data-rune);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--c-gold-200);
    background:
      radial-gradient(circle at 50% 30%, rgba(255, 247, 213, 0.18), rgba(242, 211, 137, 0.06) 70%, transparent),
      rgba(7, 11, 24, 0.62);
    box-shadow: inset 0 0 0 1px rgba(242, 211, 137, 0.42), 0 4px 10px rgba(0, 0, 0, 0.32);
    font-size: 12px;
    text-shadow: 0 0 6px rgba(242, 211, 137, 0.55);
  }

  .settings-list label[data-rune]::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: linear-gradient(90deg, rgba(242, 211, 137, 0.55), transparent);
    transform: translateY(-50%);
    pointer-events: none;
  }

  input[type="range"] {
    accent-color: var(--c-gold-300);
    height: 28px;
  }

  .toggle-row input {
    width: 26px;
    height: 26px;
    accent-color: var(--c-jade-400);
  }

  .copyright {
    padding: 18px 0 8px;
    color: var(--c-gold-300);
    box-shadow: inset 0 1px rgba(242, 211, 137, 0.22);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-align: right;
  }

  /* ------- HUD ----------------------------------------------------------- */

  .hud {
    position: fixed;
    inset: 0;
    display: none;
    pointer-events: none;
    z-index: 6;
  }

  .hud.active {
    display: block;
  }

  .top-hud {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 7;
  }

  .hud-pill,
  .hud-button {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    color: var(--ink);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)),
      rgba(7, 11, 24, 0.7);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.14),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 10px 24px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
    transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
  }

  .hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .hud-pill.character {
    color: #1a1f2e;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 60%),
      linear-gradient(135deg, var(--c-gold-200), var(--c-gold-400));
    box-shadow:
      inset 0 1px rgba(255, 250, 220, 0.7),
      inset 0 0 0 1px rgba(255, 220, 150, 0.45),
      0 10px 24px rgba(217, 165, 79, 0.32);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .hud-icon {
    color: var(--c-gold-300);
    font-size: 13px;
    text-shadow: 0 0 8px rgba(242, 211, 137, 0.45);
  }

  .hud-pill.hearts {
    color: var(--c-rose-300);
  }

  .hud-pill.hearts .hud-icon {
    color: var(--c-rose-400);
    text-shadow: 0 0 10px rgba(240, 138, 176, 0.6);
  }

  .hud-button {
    width: 56px;
    margin-left: auto;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    border-radius: var(--r-pill);
    color: var(--c-gold-200);
    letter-spacing: 0;
  }

  .hud-pill.status {
    min-width: 104px;
    justify-content: center;
    color: var(--c-gold-200);
    font-weight: 500;
  }

  .hud-pill.skill-state {
    min-width: 140px;
    justify-content: center;
    color: var(--c-jade-300);
    box-shadow:
      inset 0 -2px var(--c-jade-500),
      inset 0 0 0 1px rgba(245, 242, 234, 0.12),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 10px 24px rgba(93, 212, 168, 0.18);
  }

  .hud-pill.skill-state.cooling {
    color: var(--ink-muted);
    box-shadow:
      inset 0 -2px var(--c-gold-400),
      inset 0 0 0 1px rgba(245, 242, 234, 0.12),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 10px 24px rgba(0, 0, 0, 0.22);
  }

  /* v1.2.4 — HUD ink-bloom: one-shot pulse when character or skill state flips */
  .hud-pill.pulse {
    animation: hud-pulse 420ms var(--ease-spring);
  }

  .bossbar {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 50px);
    left: 50%;
    width: min(560px, calc(100vw - 36px));
    height: 8px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: rgba(245, 242, 234, 0.12);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.10),
      0 4px 12px rgba(0, 0, 0, 0.24);
    transform: translateX(-50%);
    z-index: 7;
  }

  /* v1.2.4 — auroral wash with a slow leading-edge gleam */
  .bossbar span {
    position: relative;
    display: block;
    width: 0%;
    height: 100%;
    overflow: hidden;
    background:
      linear-gradient(90deg,
        var(--c-cyan-500) 0%,
        var(--c-jade-400) 28%,
        var(--c-gold-300) 58%,
        var(--c-rose-400) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    box-shadow: 0 0 12px rgba(242, 211, 137, 0.45);
    transition: width var(--d-base) var(--ease-out);
    animation: bossbar-shimmer 7s linear infinite;
  }

  .bossbar span::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    width: 18px;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at 100% 50%, rgba(255, 247, 213, 0.85), transparent 70%);
    opacity: var(--gleam-opacity, 0.85);
    filter: blur(0.4px);
  }

  .chapter-intro {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 92px);
    left: 50%;
    width: min(540px, calc(100vw - 36px));
    padding: 18px 20px 16px;
    border-radius: var(--r-m);
    background:
      linear-gradient(135deg, rgba(242, 211, 137, 0.14), rgba(93, 212, 168, 0.08)),
      rgba(7, 11, 24, 0.96);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.14),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 26px 70px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px) scale(0.98);
    transition-property: opacity, transform;
    transition-duration: var(--d-base);
    transition-timing-function: var(--ease-out);
    z-index: 7;
  }

  .chapter-intro.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  /* v1.2.4 — orchestrated entrance: bossbar / intro / control tips arrive in stagger */
  body:has(.chapter-intro.active) .bossbar {
    animation: bossbar-rise 420ms var(--ease-out) 0ms both;
  }

  body:has(.chapter-intro.active) #controlTips {
    animation: tips-rise 480ms var(--ease-out) 160ms both;
  }

  .chapter-intro span {
    display: block;
    color: var(--c-gold-300);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .chapter-intro strong {
    display: block;
    margin-top: 4px;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: 0.012em;
    color: var(--ink);
  }

  .chapter-intro p {
    margin: 10px 0 0;
    color: var(--ink-soft);
    line-height: 1.6;
  }

  .chapter-intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .chapter-intro-meta span {
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(242, 211, 137, 0.22);
    color: rgba(245, 242, 234, 0.88);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: none;
  }

  .control-tips {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 60px);
    right: max(14px, env(safe-area-inset-right));
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(540px, calc(100vw - 32px));
    gap: 7px;
    pointer-events: none;
    z-index: 7;
  }

  .control-tips span {
    padding: 6px 11px;
    border-radius: var(--r-pill);
    color: rgba(245, 242, 234, 0.84);
    background: rgba(7, 11, 24, 0.62);
    box-shadow: inset 0 0 0 1px rgba(245, 242, 234, 0.12);
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .toast {
    position: fixed;
    top: calc(max(12px, env(safe-area-inset-top)) + 256px);
    left: 50%;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    padding: 14px 18px;
    border-radius: var(--r-m);
    color: var(--ink);
    background: rgba(10, 15, 28, 0.96);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.14),
      inset 0 1px rgba(255, 255, 255, 0.10),
      0 24px 56px rgba(0, 0, 0, 0.36);
    opacity: 0;
    text-align: center;
    transform: translateX(-50%) translateY(-12px);
    transition-property: opacity, transform;
    transition-duration: var(--d-base);
    transition-timing-function: var(--ease-spring);
    z-index: 8;
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ------- Modal --------------------------------------------------------- */

  .modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(3, 8, 18, 0.78);
    pointer-events: auto;
    z-index: 10;
    animation: modal-veil var(--d-base) var(--ease-out);
  }

  .respawn-veil {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 9;
    background:
      radial-gradient(circle at 50% 55%, rgba(242, 211, 137, 0.18), transparent 65%),
      var(--c-night-1000);
  }

  .respawn-veil.playing {
    animation: respawn-veil-flash var(--respawn-veil-duration, 180ms) var(--ease-out);
  }

  .modal.active {
    display: grid;
  }

  .modal-card {
    position: relative;
    width: min(540px, calc(100vw - 32px));
    padding: 32px;
    border-radius: var(--r-l);
    background:
      /* v1.2.4 — paper grain at low opacity for inked feel */
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.94  0 0 0 0 0.78  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(242, 211, 137, 0.18), transparent 70%),
      radial-gradient(ellipse 60% 40% at 100% 100%, rgba(155, 140, 255, 0.12), transparent 70%),
      linear-gradient(160deg, rgba(19, 28, 59, 0.94), rgba(10, 15, 36, 0.98)),
      var(--panel-strong);
    background-size: 160px 160px, auto, auto, auto, auto;
    background-blend-mode: overlay, normal, normal, normal, normal;
    box-shadow:
      inset 0 0 0 1px var(--line),
      inset 0 1px rgba(255, 255, 255, 0.14),
      0 40px 100px rgba(0, 0, 0, 0.55);
    animation: modal-pop 360ms var(--ease-spring) both;
  }

  .modal-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border-radius: calc(var(--r-l) - 4px);
    background:
      linear-gradient(135deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) top left / 18px 18px no-repeat,
      linear-gradient(225deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) top right / 18px 18px no-repeat,
      linear-gradient(45deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) bottom left / 18px 18px no-repeat,
      linear-gradient(315deg, var(--c-gold-400) 0 1px, transparent 1px 8px, var(--c-gold-400) 8px 9px, transparent 9px) bottom right / 18px 18px no-repeat;
    opacity: 0.65;
  }

  /* v1.2.4 — gold atlas seal in the lower-right corner of pause/completion modals */
  .modal-card::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 40%, rgba(255, 247, 213, 0.55), rgba(242, 211, 137, 0.18) 60%, transparent 78%),
      conic-gradient(from 0deg,
        rgba(242, 211, 137, 0.55),
        rgba(238, 142, 184, 0.40),
        rgba(130, 227, 184, 0.40),
        rgba(109, 214, 238, 0.45),
        rgba(242, 211, 137, 0.55));
    box-shadow:
      inset 0 0 0 1px rgba(255, 220, 150, 0.55),
      inset 0 0 14px rgba(242, 211, 137, 0.35),
      0 8px 22px rgba(0, 0, 0, 0.45);
    -webkit-mask-image: radial-gradient(circle, #000 0 60%, rgba(0, 0, 0, 0.65) 62% 76%, transparent 78%);
    mask-image: radial-gradient(circle, #000 0 60%, rgba(0, 0, 0, 0.65) 62% 76%, transparent 78%);
    pointer-events: none;
    opacity: 0.82;
    animation: seal-breathe 9s var(--ease-soft) infinite;
  }

  .modal-card .eyebrow {
    margin-bottom: 8px;
  }

  .modal-card p {
    margin: 12px 0 0;
    line-height: 1.7;
    color: var(--ink-soft);
  }

  .modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
  }

  /* ------- Touch controls ------------------------------------------------ */

  #touchControls {
    position: fixed;
    inset: auto max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
    display: none;
    justify-content: space-between;
    pointer-events: none;
    z-index: 9;
  }

  .touch-left,
  .touch-right {
    display: flex;
    gap: 12px;
    pointer-events: auto;
  }

  .touch-btn {
    position: relative;
    width: min(var(--touch-size), 20vw);
    height: min(var(--touch-size), 20vw);
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 32px;
    font-weight: 700;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04) 60%),
      rgba(13, 19, 33, 0.78);
    box-shadow:
      inset 0 0 0 1px rgba(245, 242, 234, 0.16),
      inset 0 1px rgba(255, 255, 255, 0.18),
      inset 0 -2px rgba(0, 0, 0, 0.24),
      0 18px 40px rgba(0, 0, 0, 0.36);
    isolation: isolate;
  }

  /* Breath ring — visual hint that the action button is ready */
  .touch-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, transparent 56%, rgba(255, 255, 255, 0.24) 60%, transparent 64%);
    opacity: 0;
    z-index: -1;
  }

  .touch-btn.jump::before,
  .touch-btn.skill::before,
  .touch-btn.shoot::before {
    animation: touch-breath var(--d-breath) ease-in-out infinite;
  }

  .touch-btn.active,
  .touch-btn:active {
    transform: translateY(3px) scale(0.94);
    box-shadow:
      var(--glow-gold),
      inset 0 0 0 1px rgba(242, 211, 137, 0.55),
      inset 0 -1px rgba(0, 0, 0, 0.18);
  }

  .touch-btn.active::before,
  .touch-btn:active::before {
    animation: none;
    opacity: 0;
  }

  .touch-btn.jump {
    color: #1f2732;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.32), transparent 50%),
      linear-gradient(160deg, var(--c-gold-200), var(--c-gold-400) 60%, #f39b68);
    box-shadow:
      inset 0 0 0 1px rgba(255, 220, 150, 0.55),
      inset 0 1px rgba(255, 250, 220, 0.7),
      inset 0 -2px rgba(0, 0, 0, 0.18),
      0 18px 38px rgba(217, 165, 79, 0.32);
  }

  .touch-btn.skill {
    color: #062a35;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.30), transparent 50%),
      linear-gradient(160deg, var(--c-cyan-400), var(--c-jade-400));
    box-shadow:
      inset 0 0 0 1px rgba(180, 245, 230, 0.6),
      inset 0 1px rgba(255, 255, 255, 0.7),
      inset 0 -2px rgba(0, 0, 0, 0.18),
      0 18px 38px rgba(95, 205, 242, 0.32);
  }

  .touch-btn.shoot {
    color: #2a1605;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.30), transparent 50%),
      linear-gradient(160deg, var(--c-gold-300), var(--c-rose-400));
    box-shadow:
      inset 0 0 0 1px rgba(255, 200, 200, 0.5),
      inset 0 1px rgba(255, 250, 220, 0.65),
      inset 0 -2px rgba(0, 0, 0, 0.18),
      0 18px 38px rgba(240, 138, 176, 0.30);
  }

  /* v1.2.4 — refined glyph mark above the centered label, no DOM change */
  .touch-btn.jump,
  .touch-btn.skill,
  .touch-btn.shoot {
    padding-top: 32%;
    line-height: 1;
    font-size: 22px;
    letter-spacing: 0.12em;
  }

  .touch-btn.jump::after,
  .touch-btn.skill::after,
  .touch-btn.shoot::after {
    content: "";
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 32%;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0.82;
    pointer-events: none;
  }

  .touch-btn.jump::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4l2.6 6.2 6.6.5-5 4.4 1.6 6.5L12 16.6 6.2 20l1.6-6.5-5-4.4 6.6-.5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4l2.6 6.2 6.6.5-5 4.4 1.6 6.5L12 16.6 6.2 20l1.6-6.5-5-4.4 6.6-.5z'/></svg>");
  }

  .touch-btn.skill::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12c4-2 6-6 9-9 0 4 2 6 5 7-3 1-5 4-5 8 0 0-3-1-4-3-1 1-3 1-5-3z' fill='currentColor'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 12c4-2 6-6 9-9 0 4 2 6 5 7-3 1-5 4-5 8 0 0-3-1-4-3-1 1-3 1-5-3z' fill='currentColor'/></svg>");
  }

  .touch-btn.shoot::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l4.4 4.4L20 12l-4 4-4 5-4-5-4-4 4-5.6L12 2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l4.4 4.4L20 12l-4 4-4 5-4-5-4-4 4-5.6L12 2z'/></svg>");
  }
}

/* ============================================================================
   motion — keyframes
   ============================================================================ */

@layer motion {
  @keyframes screen-enter {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.992);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes brand-reveal {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes touch-breath {
    0%,
    100% {
      opacity: 0;
      transform: scale(0.96);
    }
    50% {
      opacity: 0.55;
      transform: scale(1.04);
    }
  }

  @keyframes modal-veil {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes modal-pop {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes ambient-drift {
    0%, 100% {
      transform: translateY(0) translateX(0);
      opacity: 0.42;
    }
    50% {
      transform: translateY(-6px) translateX(2px);
      opacity: 0.78;
    }
  }

  @keyframes ambient-twinkle {
    0%, 100% {
      opacity: 0.18;
      transform: scale(0.85);
    }
    45% {
      opacity: 0.95;
      transform: scale(1.15);
    }
  }

  @keyframes ambient-constellation-pulse {
    0%, 100% {
      opacity: 0.45;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.85;
      transform: rotate(-2deg);
    }
  }

  @keyframes cursor-spark-fade {
    0% {
      opacity: 0.95;
      transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
    }
    60% {
      opacity: 0.6;
      transform: translate(-50%, -50%) translate3d(var(--drift-mid, 0px), var(--rise-mid, -16px), 0) scale(0.76);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) translate3d(var(--drift, 0px), var(--rise, -36px), 0) scale(0.28);
    }
  }

  @keyframes love-heart-beat {
    0%, 100% {
      transform: scale(0.96);
    }
    25% {
      transform: scale(1.06);
    }
    40% {
      transform: scale(0.98);
    }
    60% {
      transform: scale(1.04);
    }
  }

  /* v1.2.4 — Aurora Cartography keyframes */

  @keyframes compass-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes aurora-sweep {
    0% {
      opacity: 0;
      transform: scaleX(0.2);
    }
    55% {
      opacity: 0.95;
      transform: scaleX(1.05);
    }
    100% {
      opacity: 0.5;
      transform: scaleX(0.6);
    }
  }

  @keyframes hud-pulse {
    0% {
      transform: scale(1);
      box-shadow:
        inset 0 0 0 1px rgba(245, 242, 234, 0.14),
        inset 0 1px rgba(255, 255, 255, 0.10),
        0 10px 24px rgba(0, 0, 0, 0.28);
    }
    50% {
      transform: scale(1.04);
      box-shadow:
        inset 0 0 0 1px rgba(242, 211, 137, 0.85),
        inset 0 1px rgba(255, 247, 213, 0.55),
        0 0 24px rgba(242, 211, 137, 0.55),
        0 14px 30px rgba(0, 0, 0, 0.32);
    }
    100% {
      transform: scale(1);
      box-shadow:
        inset 0 0 0 1px rgba(245, 242, 234, 0.14),
        inset 0 1px rgba(255, 255, 255, 0.10),
        0 10px 24px rgba(0, 0, 0, 0.28);
    }
  }

  @keyframes bossbar-shimmer {
    from {
      background-position: 0% 50%;
    }
    to {
      background-position: 200% 50%;
    }
  }

  @keyframes bossbar-rise {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  @keyframes tips-rise {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes hero-breath {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(0.6deg);
    }
  }

  @keyframes seal-breathe {
    0%, 100% {
      transform: scale(0.96);
      opacity: 0.78;
    }
    50% {
      transform: scale(1.04);
      opacity: 0.92;
    }
  }

  @keyframes spark-lit {
    0% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(242, 211, 137, 0.65);
    }
    40% {
      transform: scale(2.2);
      box-shadow:
        0 0 18px rgba(255, 247, 213, 0.95),
        0 0 36px rgba(242, 211, 137, 0.7);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 16px rgba(242, 211, 137, 0.6);
    }
  }

  @keyframes respawn-veil-flash {
    0% {
      opacity: 0;
    }
    22% {
      opacity: 0.92;
    }
    55% {
      opacity: 0.92;
    }
    100% {
      opacity: 0;
    }
  }
}

/* ============================================================================
   responsive — mobile portrait, mobile landscape, narrow handset
   ============================================================================ */

@layer responsive {
  @media (pointer: coarse), (max-width: 900px) {
    .ambient {
      display: none;
    }

    .ambient-strip {
      gap: 8px;
      padding: 6px 12px;
      font-size: 11px;
      letter-spacing: 0.14em;
    }

    .ambient-strip-credit,
    .ambient-strip-divider {
      display: none;
    }

    #touchControls.playing {
      display: flex;
    }

    .screen {
      inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .panel {
      width: min(720px, calc(100vw - 24px));
      max-height: calc(100dvh - 24px);
      align-content: start;
      padding: 32px;
      gap: 18px;
    }

    .character-grid,
    .level-list {
      grid-template-columns: 1fr;
    }

    .level-list::after {
      display: none;
    }

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

    .save-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #menu.panel {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    #menu .brand,
    #menu .menu-actions,
    #menu .save-strip,
    .menu-heroes {
      grid-column: 1;
    }

    .menu-heroes {
      grid-row: auto;
      order: -1;
      min-height: 280px;
    }

    .hero-card {
      top: 22px;
      bottom: auto;
      width: 44%;
      height: 224px;
    }

    .nini-hero,
    .yuan-hero {
      background-size: auto 88%, auto, auto, auto, auto;
      background-position: center bottom, center, center, center, center;
    }

    .brand h1 {
      font-size: clamp(48px, 11vw, 70px);
    }

    .brand p {
      font-size: 17px;
    }

    .menu-actions button {
      height: 58px;
      padding: 0 12px;
      font-size: 18px;
    }

    .save-chip {
      min-height: 68px;
      padding: 11px 10px;
      font-size: 12px;
      letter-spacing: 0.03em;
    }

    .save-chip strong {
      font-size: 20px;
    }

    .character-card {
      min-height: 0;
    }

    .character-card button {
      height: 56px;
    }

    .portrait {
      height: 200px;
    }

    .level-item.featured {
      grid-column: 1;
      grid-row: auto;
      min-height: 232px;
    }

    .top-hud {
      flex-wrap: wrap;
    }

    .hud-pill {
      min-height: 34px;
      padding: 6px 11px;
      font-size: 13px;
    }

    .hud-pill.character {
      order: -2;
    }

    .hud-button {
      order: -1;
      width: 48px;
      min-height: 40px;
    }

    .hud-pill.status {
      min-width: 86px;
    }

    .hud-pill.skill-state {
      min-width: 110px;
    }

    .bossbar {
      top: calc(max(12px, env(safe-area-inset-top)) + 104px);
    }

    .chapter-intro {
      top: calc(max(12px, env(safe-area-inset-top)) + 138px);
      width: min(450px, calc(100vw - 36px));
      padding: 14px 16px;
    }

    .chapter-intro strong {
      font-size: 24px;
    }

    .control-tips {
      top: auto;
      right: max(18px, env(safe-area-inset-right));
      bottom: calc(max(18px, env(safe-area-inset-bottom)) + min(var(--touch-size), 20vw) + 16px);
      left: max(18px, env(safe-area-inset-left));
      justify-content: center;
    }

    .control-tips span {
      padding: 5px 9px;
      font-size: 11px;
    }

    .toast {
      top: calc(max(12px, env(safe-area-inset-top)) + 304px);
    }

    .settings-list label {
      grid-template-columns: 1fr;
    }
  }

  @media (pointer: coarse) and (orientation: landscape) {
    :root {
      --touch-size: 72px;
    }

    .ambient-strip {
      padding: 4px 10px;
      font-size: 10px;
    }

    .screen {
      inset: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .panel {
      width: min(1080px, calc(100vw - 48px));
      max-height: calc(100dvh - 20px);
      gap: 14px;
      padding: 24px;
    }

    .panel::before {
      inset: 12px;
    }

    .panel::after {
      inset: 8px;
    }

    #menu.panel {
      min-height: calc(100dvh - 20px);
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr);
      align-content: center;
    }

    #menu .brand,
    #menu .menu-actions,
    #menu .save-strip {
      grid-column: 1;
    }

    .brand h1 {
      margin-bottom: 8px;
      font-size: clamp(46px, 6vw, 60px);
    }

    .brand p {
      max-width: 42ch;
      font-size: 15px;
    }

    .menu-actions {
      grid-template-columns: repeat(4, minmax(86px, 1fr));
      gap: 10px;
    }

    .menu-actions button {
      min-width: 0;
      height: 48px;
      padding: 0 12px;
      font-size: 14px;
      letter-spacing: 0;
    }

    .save-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      min-height: 60px;
    }

    .save-chip {
      padding: 11px 14px;
      font-size: 12px;
    }

    .save-chip strong {
      margin-top: 4px;
      font-size: 18px;
    }

    .menu-heroes {
      grid-column: 2;
      grid-row: 1 / 4;
      order: initial;
      min-height: min(312px, calc(100dvh - 80px));
      border-radius: var(--r-m);
    }

    .hero-card {
      top: auto;
      bottom: 4%;
      width: 58%;
      height: 82%;
    }

    .screen-head {
      gap: 12px;
    }

    .screen-head h2,
    .modal-card h2 {
      font-size: 32px;
    }

    .icon {
      width: 42px;
      min-height: 42px;
      font-size: 28px;
    }

    .character-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .character-card {
      min-height: 0;
      padding: 16px;
    }

    .character-card h3 {
      font-size: 24px;
    }

    .character-card p,
    .ability-list {
      font-size: 13px;
      line-height: 1.5;
    }

    .ability-list {
      margin: 12px 0;
    }

    .character-card button {
      height: 44px;
      font-size: 14px;
    }

    .portrait {
      height: min(150px, 31dvh);
      margin-bottom: 12px;
    }

    .level-list {
      grid-template-columns: minmax(280px, 1.15fr) minmax(220px, 0.85fr);
      gap: 12px;
    }

    .level-item {
      padding: 16px 18px;
    }

    .level-item.featured {
      grid-row: span 2;
      min-height: min(230px, calc(100dvh - 150px));
    }

    .level-item.featured::before,
    .level-item.featured::after {
      transform: scale(0.8);
      transform-origin: top right;
    }

    .settings-list {
      gap: 12px;
    }

    .settings-list label {
      grid-template-columns: minmax(120px, 0.65fr) minmax(180px, 1fr);
      padding: 10px 12px;
    }

    .top-hud {
      top: max(8px, env(safe-area-inset-top));
      left: max(10px, env(safe-area-inset-left));
      right: max(10px, env(safe-area-inset-right));
      flex-wrap: nowrap;
      gap: 6px;
      overflow: hidden;
    }

    .hud-pill,
    .hud-button {
      min-height: 32px;
      padding: 5px 10px;
      border-radius: var(--r-pill);
      font-size: 12px;
    }

    .hud-pill {
      gap: 5px;
    }

    .hud-pill.character {
      order: initial;
    }

    .hud-pill.status {
      display: none;
    }

    .hud-pill.skill-state {
      min-width: 96px;
    }

    .hud-button {
      order: 99;
      width: 40px;
      min-height: 32px;
      margin-left: auto;
      font-size: 16px;
    }

    .bossbar {
      top: calc(max(8px, env(safe-area-inset-top)) + 40px);
      width: min(420px, calc(100vw - 240px));
      height: 6px;
    }

    .chapter-intro {
      top: calc(max(8px, env(safe-area-inset-top)) + 58px);
      width: min(420px, calc(100vw - 260px));
      padding: 10px 14px;
    }

    .chapter-intro strong {
      font-size: 20px;
    }

    .chapter-intro p {
      margin-top: 4px;
      font-size: 12px;
    }

    .chapter-intro-meta {
      display: none;
    }

    .control-tips {
      display: none;
    }

    #touchControls {
      inset: auto max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
    }

    .touch-left,
    .touch-right {
      gap: 10px;
    }

    .touch-btn {
      width: min(var(--touch-size), 11vw);
      height: min(var(--touch-size), 11vw);
      font-size: 24px;
    }

    .toast {
      top: calc(max(8px, env(safe-area-inset-top)) + 110px);
      padding: 10px 14px;
    }
  }

  @media (max-width: 430px) {
    :root {
      --touch-size: 82px;
    }

    .panel {
      padding: 22px;
    }

    .panel::before {
      inset: 10px;
    }

    .panel::after {
      inset: 6px;
    }

    .brand h1 {
      font-size: clamp(48px, 13vw, 60px);
    }

    .menu-heroes {
      min-height: 240px;
    }

    .hero-card {
      top: 18px;
      height: 198px;
    }

    .nini-hero,
    .yuan-hero {
      background-size: auto 84%, auto, auto, auto, auto;
    }

    .screen-head h2,
    .modal-card h2 {
      font-size: 30px;
    }

    .touch-left,
    .touch-right {
      gap: 8px;
    }

    .touch-btn {
      width: min(var(--touch-size), 16.5vw);
      height: min(var(--touch-size), 16.5vw);
      font-size: 26px;
    }
  }
}

/* ============================================================================
   a11y — reduced motion, increased contrast
   ============================================================================ */

@layer a11y {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    body::after {
      opacity: 0.35;
    }

    .touch-btn::before {
      animation: none;
      opacity: 0;
    }

    .ambient-rune,
    .ambient-spark,
    .ambient-strip-mark,
    .ambient-constellation {
      animation: none;
    }

    .cursor-trail {
      display: none;
    }

    .love-heart svg {
      animation: none;
    }

    /* v1.2.4 — pause Aurora Cartography animations under reduced-motion */
    .level-item.featured::before,
    .brand::after,
    .menu-heroes,
    .bossbar span,
    .modal-card::after,
    .ambient-spark.lit {
      animation: none !important;
    }

    .nini-hero {
      transform: rotate(-4deg) translateY(16px);
    }

    .yuan-hero {
      transform: rotate(3deg);
    }

    body:has(.chapter-intro.active) .bossbar,
    body:has(.chapter-intro.active) #controlTips {
      animation: none !important;
    }

    .hud-pill.pulse {
      animation: none;
    }

    .respawn-veil.playing {
      animation-duration: 40ms !important;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --line: rgba(242, 211, 137, 0.5);
      --line-strong: rgba(242, 211, 137, 0.85);
      --ink-soft: rgba(255, 250, 230, 0.95);
      --ink-muted: rgba(232, 240, 255, 0.85);
      --hairline: rgba(255, 255, 255, 0.22);
    }

    button {
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(245, 242, 234, 0.35),
        0 14px 30px rgba(0, 0, 0, 0.4);
    }
  }
}