:root {
      --bg: #2b1a12;
      --panel: rgba(42, 26, 18, 0.97);
      --ink: #fdf3e1;
      --muted: #c9a883;
      --line: rgba(240, 180, 0, 0.18);
      --teal: #2f9d8f;
      --blue: #4d7ac2;
      --gold: #f0b400;
      --red: #ef5b42;
      --green: #93d768;
      --paper: #fdf3e1;
      --paper-ink: #241c1a;

      /* Care Squad — Comic-Zentrale-Palette (Konzept A) */
      --cs-paper: #fdf3e1;
      --cs-ink: #241c1a;
      --cs-crimson: #e0432c;
      --cs-cobalt: #2e5fa3;
      --cs-gold: #f0b400;
      --cs-mint: #2f9d8f;
      --action: var(--cs-mint);
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      /* Kein Doppeltipp-Zoom / Pinch-Zoom (Spiel), Scrollen bleibt erlaubt */
      touch-action: manipulation;
      /* Kein Pull-to-Refresh / Overscroll-Bounce: auf Mobilgeräten flog man sonst
         beim Scrollen an einem Panel-Rand (Log, Kampagnenliste, Menü) aus dem
         laufenden Spiel, weil der Browser die Seite neu lud. */
      overscroll-behavior: none;
    }

    body {
      background:
        radial-gradient(rgba(36,28,26,0.10) 1.1px, transparent 1.2px) 0 0/9px 9px,
        radial-gradient(circle at 25% 10%, rgba(240, 180, 0, 0.4), transparent 45%),
        linear-gradient(180deg, #f6d98f 0%, #f0a850 32%, var(--cs-crimson) 68%, #7a1f14 100%);
      background-attachment: fixed;
      color: var(--ink);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      min-height: 100vh;
      -webkit-text-size-adjust: 100%;
    }

    button {
      font: inherit;
      touch-action: manipulation;
    }

    /* Jeder interne Scrollbereich hält seine Scroll-Kette bei sich: reicht sie
       sich nicht zum Browser durch (Pull-to-Refresh). Zusammen mit
       html,body{overscroll-behavior:none} das Sicherheitsnetz gegen den
       „Browser lädt neu und ich fliege aus dem Spiel"-Effekt auf Mobilgeräten. */
    .log-panel, .log, .panel, .side, .main,
    .home-tab-panel, .menu-popup-body, .menu-popup-modal, .menu-popup-overlay,
    .quiz-options, .combat-options, .combat-choice-panel,
    .result-card, .stairs-boost-card, .telefon-card, .help-content,
    .worldmap-campaign-panel, .home-screen, .creator-screen {
      overscroll-behavior: contain;
    }

    /* ── Titelanimation-Screen (Comic-Superhelden) ────────────────────────────
       4 Beats: Bühne → Kaiju stampft rein → Care Squad fliegt an → Titel-Slam.
       Kaiju/Halbton/Skyline im Stil des Kampagnen-Intros (.ci-*). ── */
    .title-anim-screen {
      background: #0b0710;
      inset: 0;
      overflow: hidden;
      position: fixed;
      z-index: 200;
    }
    .title-anim-screen.tas-shake { animation: tasShake 0.4s cubic-bezier(.36,.07,.19,.97); }
    @keyframes tasShake {
      10%,90% { transform: translate(-2px, 1px); }
      30%,70% { transform: translate(4px, -2px); }
      50%     { transform: translate(-5px, 2px); }
    }

    #tas-sky {
      position: absolute; inset: 0; opacity: 0;
      transition: opacity 0.9s ease;
      background:
        radial-gradient(circle at 78% 16%, rgba(67,216,224,0.20), transparent 42%),
        radial-gradient(circle at 22% 22%, rgba(240,180,0,0.5), transparent 46%),
        linear-gradient(180deg, #1a0736 0%, #4a1030 32%, var(--cs-crimson) 72%, #6b1400 100%);
    }
    #tas-sky.on { opacity: 1; }
    .tas-star { position: absolute; background: #fff; border-radius: 50%; opacity: 0; transition: opacity 1s ease; }
    #tas-sky.on .tas-star { opacity: var(--o, .8); }

    #tas-halftone {
      position: absolute; inset: 0; pointer-events: none; z-index: 8;
      background-image: radial-gradient(var(--cs-ink) 1.2px, transparent 1.2px);
      background-size: 9px 9px; mix-blend-mode: multiply;
      opacity: 0; transition: opacity 0.9s ease;
    }
    #tas-halftone.on { opacity: 0.16; }
    #tas-halftone.flash { animation: tasHtFlash 0.5s ease; }
    @keyframes tasHtFlash { 0% { opacity: .5; } 100% { opacity: .16; } }

    #tas-skyline {
      position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 4;
      transform: translateY(30px); opacity: 0;
      transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,1,.36,1);
      background:
        linear-gradient(var(--cs-ink) 0 0) 2%  40%/8%  60% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 13% 55%/9%  45% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 25% 25%/11% 75% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 40% 50%/8%  50% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 52% 30%/10% 70% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 66% 46%/9%  54% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 78% 20%/12% 80% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 92% 42%/7%  58% no-repeat;
      background-position-y: bottom;
    }
    #tas-skyline.on { opacity: 1; transform: translateY(0); }
    .tas-window { position: absolute; width: 5px; height: 5px; background: var(--cs-gold);
      box-shadow: 0 0 6px var(--cs-gold); opacity: 0; transition: opacity .6s ease; }
    #tas-skyline.on .tas-window { opacity: .85; }

    #tas-badge {
      position: absolute; top: 22px; left: 22px; z-index: 22;
      background: var(--cs-paper); color: var(--cs-ink);
      border: 2px solid var(--cs-ink); border-radius: 999px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
      padding: 5px 13px; text-transform: uppercase;
      opacity: 0; transform: rotate(-6deg) scale(0.4);
      transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.6,.64,1);
    }
    #tas-badge.on { opacity: 1; transform: rotate(-6deg) scale(1); }

    /* ── Kaiju ── */
    #tas-kaiju {
      position: absolute; left: 50%; bottom: 8%;
      width: 240px; height: 280px; z-index: 5;
      transform: translate(-50%, 120%) scale(0.9);
      transition: transform 1.1s cubic-bezier(.22,1,.36,1);
    }
    #tas-kaiju.rise { transform: translate(-50%, 0) scale(1); }
    #tas-kaiju.stomp .tk-leg { animation: tkStomp 0.6s ease-in-out infinite; }
    #tas-kaiju .tk-body {
      position: absolute; left: 34px; bottom: 66px; width: 172px; height: 160px;
      background: var(--cs-ink); border-radius: 32% 32% 24% 24%;
      box-shadow: inset -14px 0 0 rgba(0,0,0,0.35);
    }
    #tas-kaiju .tk-spike {
      position: absolute; top: -22px; width: 28px; height: 36px;
      background: var(--cs-crimson); clip-path: polygon(50% 0, 0 100%, 100% 100%);
    }
    #tas-kaiju .tk-spike.s1 { left: 26px; height: 26px; }
    #tas-kaiju .tk-spike.s2 { left: 68px; top: -32px; }
    #tas-kaiju .tk-spike.s3 { left: 112px; height: 24px; }
    #tas-kaiju .tk-head {
      position: absolute; left: 66px; top: 8px; width: 104px; height: 90px;
      background: var(--cs-ink); border-radius: 42% 42% 46% 46%;
      box-shadow: inset -10px 0 0 rgba(0,0,0,0.3);
    }
    #tas-kaiju .tk-eye {
      position: absolute; top: 36px; width: 13px; height: 13px; border-radius: 50%;
      background: #43d8e0; box-shadow: 0 0 12px 3px #43d8e0;
      animation: tkEye 2.6s ease-in-out infinite;
    }
    #tas-kaiju .tk-eye.e1 { left: 24px; }
    #tas-kaiju .tk-eye.e2 { left: 62px; animation-delay: .15s; }
    @keyframes tkEye { 0%,100% { margin-left: 0; } 25% { margin-left: 5px; } 75% { margin-left: -5px; } }
    #tas-kaiju .tk-mouth {
      position: absolute; left: 30px; top: 56px; width: 46px; height: 0;
      background: var(--cs-crimson); border-radius: 0 0 16px 16px; opacity: 0;
    }
    #tas-kaiju.roar .tk-mouth { animation: tkRoar 0.5s ease-out forwards; }
    @keyframes tkRoar { to { height: 22px; opacity: 1; } }
    #tas-kaiju .tk-arm {
      position: absolute; top: 100px; width: 66px; height: 24px;
      background: var(--cs-ink); border-radius: 12px;
    }
    #tas-kaiju .tk-arm.l { left: -36px; transform: rotate(20deg); }
    #tas-kaiju .tk-arm.r { left: 208px; transform: rotate(-20deg); }
    #tas-kaiju .tk-leg {
      position: absolute; bottom: 0; width: 50px; height: 72px;
      background: var(--cs-ink); border-radius: 12px;
    }
    #tas-kaiju .tk-leg.l { left: 50px; }
    #tas-kaiju .tk-leg.r { left: 128px; animation-delay: .3s; }
    @keyframes tkStomp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    #tas-kaiju .tk-tail {
      position: absolute; left: 176px; bottom: 92px; width: 120px; height: 26px;
      background: var(--cs-ink); border-radius: 20px; transform-origin: left center;
      transform: rotate(12deg); animation: tkTail 2.4s ease-in-out infinite;
    }
    @keyframes tkTail { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-6deg); } }

    #tas-roar {
      position: absolute; left: calc(50% + 90px); bottom: 42%; z-index: 12;
      opacity: 0; transform: scale(0.2) rotate(-8deg);
      transition: opacity .2s ease, transform .4s cubic-bezier(.34,1.7,.64,1);
    }
    #tas-roar.on { opacity: 1; transform: scale(1) rotate(-8deg); }
    #tas-roar .tas-burst {
      background: var(--cs-paper); color: var(--cs-ink); border: 3px solid var(--cs-ink);
      padding: 14px 22px; font-size: clamp(1.1rem, 4vw, 1.6rem); font-weight: 900;
      font-family: "Arial Black", Arial, sans-serif;
      clip-path: polygon(0% 15%, 12% 0%, 26% 12%, 40% 0%, 54% 12%, 70% 0%, 84% 14%, 100% 4%,
                         92% 26%, 100% 44%, 88% 60%, 100% 78%, 84% 88%, 66% 100%, 50% 88%,
                         34% 100%, 18% 88%, 4% 96%, 10% 72%, 0% 54%, 8% 34%);
    }

    /* ── Helden (echte Pixel-Avatare) ── */
    #tas-sprites {
      position: absolute; left: 0; right: 0; bottom: 15%; z-index: 10;
      display: flex; justify-content: center; align-items: flex-end;
      gap: clamp(24px, 6vw, 56px); pointer-events: none;
    }
    .tas-char {
      position: relative; transform-origin: bottom center;
      transform: var(--fly); opacity: 0;
      transition: transform 0.55s cubic-bezier(.16,.9,.3,1.15), opacity 0.25s ease;
    }
    .tas-char .pixel-avatar { display: block; transform: scale(1.75); transform-origin: bottom center; }
    @media (max-width: 620px) {
      .tas-char .pixel-avatar { transform: scale(1.15); }
      #tas-sprites { gap: 10px; bottom: 17%; }
      #tas-kaiju { width: 190px; height: 224px; }
    }
    .tas-char.land { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
    .tas-char.bob { animation: tasBob 1.7s ease-in-out infinite; animation-delay: var(--bd, 0s); }
    @keyframes tasBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    .tas-char::before {
      content: ""; position: absolute; inset: -6px -70px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
      opacity: 0; filter: blur(2px);
    }
    .tas-char.flying::before { animation: tasTrail 0.55s ease-out; }
    @keyframes tasTrail { 0% { opacity: .9; } 100% { opacity: 0; } }

    .tas-puff {
      position: absolute; bottom: 15%; width: 40px; height: 18px; z-index: 9;
      background: var(--cs-paper); border: 2px solid var(--cs-ink); border-radius: 50%;
      opacity: 0; transform: scale(0.3);
    }
    .tas-puff.go { animation: tasPuff 0.5s ease-out forwards; }
    @keyframes tasPuff {
      0%   { opacity: .9; transform: scale(0.3); }
      100% { opacity: 0;  transform: scale(1.6) translateY(-6px); }
    }

    #tas-speedlines {
      position: absolute; inset: -20%; z-index: 7; pointer-events: none; opacity: 0;
      background: repeating-conic-gradient(from 0deg at 50% 55%,
        rgba(67,216,224,0) 0deg 2.4deg, rgba(67,216,224,0.5) 2.4deg 3deg);
      -webkit-mask: radial-gradient(circle at 50% 55%, transparent 30%, #000 62%);
      mask: radial-gradient(circle at 50% 55%, transparent 30%, #000 62%);
    }
    #tas-speedlines.gold { background: repeating-conic-gradient(from 0deg at 50% 55%,
        rgba(255,255,255,0) 0deg 2.4deg, rgba(255,255,255,0.35) 2.4deg 3deg); }
    #tas-speedlines.flash { animation: tasSlFlash 0.6s ease-out; }
    @keyframes tasSlFlash { 0% { opacity: .9; } 100% { opacity: 0; } }

    .tas-onom {
      position: absolute; z-index: 21; font-weight: 900;
      font-family: "Arial Black", Arial, sans-serif;
      color: var(--cs-gold); -webkit-text-stroke: 3px var(--cs-ink); paint-order: stroke fill;
      font-size: clamp(1.6rem, 6vw, 3.4rem);
      opacity: 0; transform: scale(0.2) rotate(var(--rot, -10deg));
    }
    .tas-onom.go { animation: tasOnom 0.9s cubic-bezier(.34,1.6,.64,1) forwards; }
    @keyframes tasOnom {
      0%   { opacity: 0; transform: scale(0.2) rotate(var(--rot,-10deg)); }
      30%  { opacity: 1; transform: scale(1.15) rotate(var(--rot,-10deg)); }
      70%  { opacity: 1; transform: scale(1) rotate(var(--rot,-10deg)); }
      100% { opacity: 0; transform: scale(1.1) rotate(var(--rot,-10deg)); }
    }

    /* ── Titel-Slam ── */
    #tas-impact {
      position: absolute; left: 50%; top: 30%; z-index: 18;
      width: min(760px, 96vw); aspect-ratio: 1;
      transform: translate(-50%,-50%) scale(0); opacity: 0.9;
      background: conic-gradient(from 0deg,
        var(--cs-gold) 0 8deg, transparent 8deg 22deg, var(--cs-gold) 22deg 30deg,
        transparent 30deg 44deg, var(--cs-gold) 44deg 52deg, transparent 52deg 66deg,
        var(--cs-gold) 66deg 74deg, transparent 74deg 90deg, var(--cs-gold) 90deg 98deg,
        transparent 98deg 112deg, var(--cs-gold) 112deg 120deg, transparent 120deg 134deg,
        var(--cs-gold) 134deg 142deg, transparent 142deg 156deg, var(--cs-gold) 156deg 164deg,
        transparent 164deg 180deg, var(--cs-gold) 180deg 188deg, transparent 188deg 202deg,
        var(--cs-gold) 202deg 210deg, transparent 210deg 224deg, var(--cs-gold) 224deg 232deg,
        transparent 232deg 246deg, var(--cs-gold) 246deg 254deg, transparent 254deg 268deg,
        var(--cs-gold) 268deg 276deg, transparent 276deg 290deg, var(--cs-gold) 290deg 298deg,
        transparent 298deg 312deg, var(--cs-gold) 312deg 320deg, transparent 320deg 334deg,
        var(--cs-gold) 334deg 342deg, transparent 342deg 360deg);
      border-radius: 50%;
      -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%);
      mask: radial-gradient(circle, #000 30%, transparent 72%);
    }
    #tas-impact.go { animation: tasImpact 0.6s cubic-bezier(.2,1.4,.5,1) forwards, tasSpin 14s linear 0.6s infinite; }
    @keyframes tasImpact { to { transform: translate(-50%,-50%) scale(1); } }
    @keyframes tasSpin { to { transform: translate(-50%,-50%) scale(1) rotate(360deg); } }

    #tas-title {
      position: absolute; left: 50%; top: 30%; z-index: 20;
      transform: translate(-50%,-50%);
      text-align: center; white-space: nowrap; pointer-events: none;
    }
    #tas-title h1 {
      font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
      font-size: clamp(2.6rem, 11vw, 7rem); line-height: 0.86;
      -webkit-text-stroke: 4px var(--cs-ink); paint-order: stroke fill;
      text-shadow: 6px 6px 0 var(--cs-ink);
      transform: skewY(-3deg); display: inline-block;
    }
    #tas-title .w { display: inline-block; opacity: 0; }
    #tas-title .care  { color: var(--cs-crimson); transform: translateX(-120vw) rotate(-18deg); }
    #tas-title .squad { color: var(--cs-gold);    transform: translateX(120vw)  rotate(18deg); }
    #tas-title.show .w { animation: tasSlam 0.5s cubic-bezier(.2,1.3,.4,1) forwards; }
    #tas-title.show .squad { animation-delay: 0.12s; }
    @keyframes tasSlam { to { opacity: 1; transform: translateX(0) rotate(0); } }
    #tas-title p {
      display: block; margin-top: 14px; color: var(--cs-paper);
      font-size: clamp(0.7rem, 2.4vw, 1.1rem); letter-spacing: 0.22em;
      text-transform: uppercase; -webkit-text-stroke: 0;
      text-shadow: 2px 2px 0 var(--cs-ink);
      opacity: 0; transition: opacity 0.6s ease 0.4s;
    }
    #tas-title.show p { opacity: 1; }
    .care  { color: var(--cs-crimson); }
    .squad { color: var(--cs-crimson); }

    #tas-frame {
      position: absolute; inset: 0; z-index: 25; pointer-events: none;
      box-shadow: inset 0 0 0 6px var(--cs-ink), inset 0 0 90px 30px rgba(0,0,0,0.55);
      opacity: 0; transition: opacity 0.9s ease;
    }
    #tas-frame.on { opacity: 1; }

    .tas-skip {
      background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2);
      border-radius: 6px; bottom: 18px; color: rgba(255,255,255,.55);
      cursor: pointer; font-size: .78rem; padding: 6px 14px;
      position: absolute; right: 18px; z-index: 30;
    }
    /* Slide-out beim Übergang zum Startscreen */
    .title-anim-screen.slide-out {
      animation: tasSlideOut 0.7s ease-in forwards;
    }
    @keyframes tasSlideOut {
      0%   { opacity:1; transform:scale(1); }
      100% { opacity:0; transform:scale(1.04); }
    }
    @media (prefers-reduced-motion: reduce) {
      #tas-kaiju, #tas-kaiju.rise { transition: none; transform: translate(-50%, 0) scale(1); }
      .tas-char { transition: none; }
      #tas-kaiju .tk-leg, #tas-kaiju .tk-tail, #tas-kaiju .tk-eye, .tas-char.bob { animation: none; }
    }

    /* ── Startscreen: Vulkan-Theme ──────────────────────────────────────────── */
    .start-title-cq {
      color: var(--cs-crimson) !important;
      font-family: "Arial Black", Arial, sans-serif !important;
      font-size: clamp(2rem,7vw,3.8rem) !important;
      -webkit-text-stroke: 3px var(--cs-ink);
      text-shadow: 5px 5px 0 var(--cs-ink), 0 0 30px rgba(240,180,0,0.35) !important;
      transform: skewY(-2deg);
      display: inline-block;
    }
    .start-title-cq .care,
    .start-title-cq .squad { color: var(--cs-crimson); }
    .start-vulkan-bg {
      animation: startVulkanPulse 4s ease-in-out infinite;
      background:
        radial-gradient(circle at 30% 15%, rgba(240,180,0,0.5), transparent 46%),
        linear-gradient(180deg, #f6d98f 0%, #f0a850 38%, var(--cs-crimson) 78%, #a52a1e 100%);
      inset: 0; pointer-events: none; position: absolute; z-index: 0;
    }
    @keyframes startVulkanPulse {
      0%,100% { opacity:.8; }
      50%      { opacity:1; }
    }

    .start-screen {
      align-items: center;
      display: grid;
      min-height: 100vh;
      padding: 18px;
    }

    .start-stage {
      background:
        radial-gradient(circle at 30% 15%, rgba(240,180,0,0.35), transparent 45%),
        linear-gradient(180deg, #f6d98f 0%, #f0a850 38%, var(--cs-crimson) 78%, #a52a1e 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow:
        0 22px 54px rgba(2, 6, 23, 0.42),
        inset 0 0 0 4px rgba(253, 243, 225, 0.18);
      margin: 0 auto;
      max-width: 980px;
      min-height: 620px;
      overflow: hidden;
      position: relative;
      width: min(100%, 980px);
    }

    /* Halbton-Raster über der gesamten Bühne (Comic-Druckoptik) */
    .start-stage::before {
      background-image: radial-gradient(var(--cs-ink) 1.2px, transparent 1.2px);
      background-size: 10px 10px;
      content: "";
      inset: 0;
      mix-blend-mode: multiply;
      opacity: 0.14;
      pointer-events: none;
      position: absolute;
    }

    /* Skyline-Silhouette der Zentrale, per Solid-Gradient-Trick ohne Zusatzmarkup */
    .start-stage::after {
      background:
        linear-gradient(var(--cs-ink) 0 0) 4%  46%/9%  54% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 17% 60%/10% 40% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 32% 30%/12% 70% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 49% 58%/9%  42% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 63% 38%/11% 62% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 79% 52%/8%  48% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 90% 44%/7%  56% no-repeat;
      background-position-y: bottom;
      bottom: 112px;
      content: "";
      height: 200px;
      left: 0;
      opacity: 0.92;
      position: absolute;
      right: 0;
    }

    .start-ground {
      background:
        linear-gradient(90deg, rgba(253,243,225,0.15) 0 2px, transparent 2px 64px),
        linear-gradient(180deg, rgba(224,67,44,0) 0%, var(--cs-ink) 96%);
      bottom: 0;
      height: 180px;
      left: 0;
      position: absolute;
      right: 0;
    }

    .start-reset-bar {
      bottom: 10px;
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      text-align: center;
      z-index: 20;
    }

    .start-reset-btn {
      background: transparent;
      border: none;
      color: rgba(148, 163, 184, 0.28);
      cursor: pointer;
      font-size: 0.65rem;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      pointer-events: auto;
      transition: color 0.2s;
    }
    .start-reset-btn:hover {
      color: rgba(248, 113, 113, 0.75);
    }

    .lightning-flash {
      background:
        radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.92), transparent 30%),
        linear-gradient(180deg, rgba(147, 197, 253, 0.58), rgba(255, 255, 255, 0.16));
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    .lightning-bolt {
      clip-path: polygon(46% 0, 62% 0, 53% 34%, 70% 34%, 38% 100%, 46% 48%, 31% 48%);
      background: linear-gradient(180deg, #ffffff, #fde68a 45%, rgba(96, 165, 250, 0.82));
      filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.92)) drop-shadow(0 0 34px rgba(96, 165, 250, 0.72));
      height: 210px;
      left: 56%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 28px;
      transform: translateX(-50%) rotate(5deg);
      width: 96px;
      z-index: 3;
    }

    .start-stage.flash-now .lightning-flash {
      animation: lightningFlash 900ms ease-out;
    }

    .start-stage.flash-now .lightning-bolt {
      animation: lightningBolt 900ms ease-out;
    }

    @keyframes lightningFlash {
      0%, 100% {
        opacity: 0;
      }
      8% {
        opacity: 0.88;
      }
      16% {
        opacity: 0.08;
      }
      24% {
        opacity: 0.62;
      }
      46% {
        opacity: 0;
      }
    }

    @keyframes lightningBolt {
      0%, 100% {
        opacity: 0;
      }
      6% {
        opacity: 1;
      }
      14% {
        opacity: 0.12;
      }
      22% {
        opacity: 0.92;
      }
      42% {
        opacity: 0;
      }
    }

    .start-content {
      align-items: center;
      display: grid;
      gap: 18px;
      justify-items: center;
      padding: 42px 20px;
      position: relative;
      text-align: center;
      z-index: 2;
    }

    .start-content::after {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 999px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      content: "FOLGE 1 · PFLEGEPROZESS";
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      padding: 0.3rem 0.9rem;
    }

    .start-content h1 {
      color: var(--cs-crimson);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: clamp(2.3rem, 6.8vw, 5.4rem);
      font-weight: 900;
      line-height: 0.88;
      max-width: 800px;
      -webkit-text-stroke: 3px var(--cs-ink);
      text-shadow: 5px 5px 0 var(--cs-ink), 0 0 26px rgba(240,180,0,0.35);
      transform: skewY(-2deg);
    }

    .start-content p {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 6px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.45;
      margin: 0;
      max-width: 560px;
      padding: 10px 14px;
    }

    .start-button {
      appearance: none;
      background: var(--cs-mint);
      border: 3px solid var(--cs-ink);
      border-radius: 6px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-paper);
      cursor: pointer;
      font-family: "Arial Black", Arial, sans-serif;
      font-weight: 900;
      letter-spacing: 0.02em;
      min-height: 48px;
      padding: 12px 20px;
      text-transform: uppercase;
      transition: transform 120ms;
    }
    .start-button:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cs-ink); }
    .start-button:active:not(:disabled) { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--cs-ink); }

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

    .start-install-btn {
      background: var(--cs-cobalt);
      display: block;
      font-size: 0.78rem;
      margin: 12px auto 0;
      min-height: 38px;
      padding: 8px 16px;
    }

    /* Install-Hinweis: bewusst KEIN Popup/Overlay — wird direkt unter dem Button
       eingeblendet (normaler Dokumentfluss), damit er nie das Tippen/Scrollen
       auf der restlichen Seite blockieren kann. */
    .install-hint-inline {
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      margin: 10px auto 0;
      max-width: 340px;
      padding: 12px 14px;
      text-align: left;
    }
    .install-hint-inline.is-hidden { display: none; }
    .install-hint-inline p {
      color: var(--cs-ink);
      font-size: 0.82rem;
      line-height: 1.5;
      margin: 0 0 8px;
    }
    .install-hint-inline p:last-of-type { margin-bottom: 0; }
    .install-hint-inline-close {
      appearance: none;
      background: none;
      border: none;
      color: var(--cs-crimson);
      cursor: pointer;
      display: block;
      font-size: 0.72rem;
      font-weight: 800;
      margin-top: 8px;
      padding: 0;
      text-decoration: underline;
    }

    /* ── News-Kasten auf dem Startbildschirm ──────────────────────────────
       Desktop: immer sichtbare kleine Box. Mobile: hinter einem festen Button
       im Startbildschirm, klappt inline auf (kein Popup/Overlay). */
    .news-toggle-btn {
      background: var(--cs-gold, #f0b400);
      display: block;
      font-size: 0.78rem;
      margin: 10px auto 0;
      min-height: 38px;
      padding: 8px 16px;
    }
    .news-box {
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      display: none;
      margin: 10px auto 0;
      max-width: 340px;
      padding: 12px 14px;
      text-align: left;
    }
    .news-box.is-open { display: block; }
    .news-box-title {
      color: var(--cs-ink);
      font-size: 0.85rem;
      font-weight: 900;
      margin: 0 0 8px;
    }
    .news-box-list {
      color: var(--cs-ink);
      margin: 0;
      padding-left: 20px;
    }
    .news-box-list li {
      font-size: 0.8rem;
      line-height: 1.5;
      margin-bottom: 6px;
    }
    .news-box-list li:last-child { margin-bottom: 0; }
    .news-box-note {
      display: block;
      font-size: 0.72rem;
      margin-top: 2px;
      opacity: 0.65;
    }
    @media (min-width: 821px) {
      .news-toggle-btn { display: none; }
      .news-box { display: block; }
    }

    /* ── Saved character block on start screen ────────────────────────────── */
    .saved-char-block {
      background: rgba(244,185,66,0.08);
      border: 1px solid rgba(244,185,66,0.35);
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
      padding: 10px 14px;
      width: 100%;
      max-width: 340px;
    }
    .saved-char-avatar {
      flex-shrink: 0;
    }
    .saved-char-avatar .pixel-avatar {
      animation: startDance 1600ms ease-in-out infinite;
      transform-origin: center bottom;
    }
    .saved-char-info {
      flex: 1;
      min-width: 0;
    }
    .saved-char-name {
      color: var(--gold);
      font-family: Georgia, serif;
      font-size: 1rem;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .saved-char-sub {
      color: var(--muted);
      font-size: 0.75rem;
      margin-top: 2px;
    }
    .saved-char-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }
    .saved-char-load-btn {
      appearance: none;
      background: linear-gradient(180deg, #f4d37c, #b77935 54%, #6f421f);
      border: 2px solid #2b1a0e;
      border-radius: 5px;
      box-shadow: 0 3px 0 #2b1a0e;
      color: #211305;
      cursor: pointer;
      font-family: Georgia, serif;
      font-size: 0.78rem;
      font-weight: 900;
      padding: 6px 12px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .saved-char-delete-btn {
      appearance: none;
      background: transparent;
      border: 1px solid rgba(239,111,108,0.5);
      border-radius: 4px;
      color: #ef6f6c;
      cursor: pointer;
      font-size: 0.7rem;
      padding: 3px 8px;
    }
    .saved-char-delete-btn:hover { background: rgba(239,111,108,0.12); }
    .saved-char-highscore {
      align-items: center;
      color: var(--gold);
      display: flex;
      font-size: 0.7rem;
      gap: 5px;
      margin-top: 3px;
      opacity: 0.85;
    }
    .saved-char-highscore-avatar {
      display: inline-block;
      flex-shrink: 0;
      height: 27px;
      position: relative;
      width: 20px;
    }
    .saved-char-highscore-avatar .pixel-avatar {
      left: 0;
      position: absolute;
      top: 0;
      transform: scale(0.37);
      transform-origin: top left;
    }

    /* Bestenlisten-Zeilen: kleiner Avatar-Schnappschuss pro Eintrag */
    .lb-avatar {
      display: inline-block;
      height: 22px;
      position: relative;
      vertical-align: middle;
      width: 16px;
    }
    .lb-avatar .pixel-avatar {
      left: 0;
      position: absolute;
      top: 0;
      transform: scale(0.3);
      transform-origin: top left;
    }

    .creator-screen {
      align-items: center;
      display: grid;
      min-height: 100vh;
      padding: 18px;
    }

    /* Start- & Charakter-/Story-Screen auf Viewport-Höhe halten → Inhalt scrollt
       (falls überhaupt nötig) INNERHALB der Bühne/Karte, nicht die Seite → kein
       Pull-to-Refresh. Greift auf allen Nicht-Riesen-Screens (Tablet, Handy). */
    @media (max-width: 1100px), (max-height: 900px) {
      .start-screen, .creator-screen {
        align-items: stretch;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 8px;
      }
      .start-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
      }
      .start-content {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 20px 18px;
      }
      .creator-card {
        max-height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
    }

    /* ── World Map ── */
    /* ── Worldmap: bunter Pixel-Hintergrund auf allen Geräten ── */
    .worldmap-screen {
      background-color: #2b1a12;
      background-image:
        repeating-linear-gradient(0deg,  transparent, transparent 15px, rgba(224,67,44,0.16) 15px, rgba(224,67,44,0.16) 16px),
        repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(224,67,44,0.16) 15px, rgba(224,67,44,0.16) 16px),
        radial-gradient(ellipse at 10% 90%, rgba(224,67,44,0.35) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(46,95,163,0.42) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(47,157,143,0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 80%, rgba(240,180,0,0.22) 0%, transparent 35%),
        radial-gradient(ellipse at 25% 25%, rgba(240,180,0,0.16) 0%, transparent 35%);
      background-size: 16px 16px, 16px 16px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      height: 100dvh;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    /* Meta-Perks-Badge gehört ins Zuhause-Menü, nicht auf die Map */
    #worldmapMetaBadge { display: none; }

    /* Zweispaltiges Layout: links Kampagnen, rechts die Map der gewählten Kampagne.
       Der animierte Hintergrund (Kaiju/Skyline) darf ruhig hinter die fixe
       #worldmapPopupBar laufen — nur die interaktiven Elemente (Kampagnen-Buttons,
       Map-Knoten) müssen darüber enden (Padding unten), sonst muss gescrollt
       werden und der Browser lädt bei Pull-to-Refresh die Seite neu. */
    .worldmap-layout {
      bottom: 0;
      display: flex;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    .worldmap-campaign-panel {
      background: rgba(36, 22, 15, 0.65);
      border-right: 3px solid var(--cs-ink);
      display: flex;
      flex: 0 0 210px;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 16px 10px 104px;
      position: relative;
    }

    .worldmap-campaign-btn {
      background: linear-gradient(145deg, rgba(60,36,24,0.9), rgba(36,22,15,0.92));
      border: 2.5px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--ink);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 10px 12px;
      text-align: left;
      transition: border-color 160ms, filter 160ms, transform 120ms;
    }
    .worldmap-campaign-btn:hover { filter: brightness(1.12); transform: translate(-1px,-1px); }
    .worldmap-campaign-btn.active {
      border-color: var(--cs-gold);
      box-shadow: 3px 3px 0 var(--cs-ink), 0 0 14px rgba(240,180,0,0.35) inset;
    }
    .worldmap-campaign-icon { font-size: 1.5rem; line-height: 1; }
    .worldmap-campaign-name { font-size: 0.9rem; font-weight: 800; }
    .worldmap-campaign-sub  { color: var(--muted); font-size: 0.68rem; }
    .worldmap-campaign-progress { color: var(--gold); font-size: 0.7rem; font-weight: 700; margin-top: 2px; }

    .worldmap-map-pane {
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 0;
    }

    /* Pflegeprozess-Kampagne: urbane Comic-Skyline wie im Intro-Video, mit
       großem, mittig thronendem Kaiju, das dezent „atmet" (Schwanken, Augen-
       wandern) — die Heldenfiguren aus dem Intro bewusst weggelassen. */
    .worldmap-map-pane.campaign-bg-pflegeplanung {
      background-image:
        radial-gradient(circle at 50% 12%, rgba(240,180,0,0.38), transparent 55%),
        linear-gradient(180deg, #f6d98f 0%, #f0a850 35%, var(--cs-crimson) 75%, #7a1f14 100%);
      background-position: center;
      background-size: cover;
      overflow: hidden;
    }

    /* Deko-Bühne: nur sichtbar, wenn die Pane die Kampagnenklasse trägt */
    .wm-scene {
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 0;
    }
    .worldmap-map-pane:not(.campaign-bg-pflegeplanung) .wm-scene-pflegeplanung { display: none; }

    .wm-scene-halftone {
      background-image: radial-gradient(var(--cs-ink) 1.1px, transparent 1.1px);
      background-size: 9px 9px;
      inset: 0;
      mix-blend-mode: multiply;
      opacity: 0.12;
      position: absolute;
    }
    .wm-scene-skyline {
      background:
        linear-gradient(var(--cs-ink) 0 0) 1%  38%/9%  62% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 12% 54%/10% 46% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 24% 22%/12% 78% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 39% 48%/9%  52% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 51% 30%/11% 70% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 65% 45%/10% 55% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 78% 18%/13% 82% no-repeat,
        linear-gradient(var(--cs-ink) 0 0) 92% 40%/8%  60% no-repeat;
      background-position-y: bottom;
      bottom: 0;
      height: 46%;
      position: absolute;
      width: 100%;
      z-index: 1;
    }

    /* ── Worldmap-Kaiju: groß & mittig, im Leerlauf schwankend ── */
    .wm-kaiju {
      position: absolute;
      left: 50%;
      bottom: 30%;
      width: 340px;
      height: 400px;
      transform: translateX(-50%);
      transform-origin: 50% 100%;
      animation: wmKaijuSway 7s ease-in-out infinite;
      z-index: 2;
    }
    @keyframes wmKaijuSway {
      0%, 100% { transform: translateX(-50%) rotate(-1.4deg) scaleY(1);      }
      50%      { transform: translateX(-50%) rotate(1.4deg)  scaleY(1.015);  }
    }
    .wm-kaiju-body {
      position: absolute; left: 44px; bottom: 92px; width: 252px; height: 232px;
      background: var(--cs-ink); border-radius: 32% 32% 24% 24%;
      box-shadow: inset -20px 0 0 rgba(0,0,0,0.35);
    }
    .wm-kaiju-spike {
      position: absolute; top: -30px; width: 40px; height: 50px;
      background: var(--cs-crimson); clip-path: polygon(50% 0, 0 100%, 100% 100%);
    }
    .wm-kaiju-spike.s1 { left: 36px;  height: 36px; }
    .wm-kaiju-spike.s2 { left: 100px; top: -46px; }
    .wm-kaiju-spike.s3 { left: 168px; height: 34px; }
    .wm-kaiju-head {
      position: absolute; left: 92px; top: 10px; width: 150px; height: 128px;
      background: var(--cs-ink); border-radius: 42% 42% 46% 46%;
      box-shadow: inset -14px 0 0 rgba(0,0,0,0.3);
    }
    .wm-kaiju-eye {
      position: absolute; top: 50px; width: 18px; height: 18px; border-radius: 50%;
      background: var(--cs-gold); box-shadow: 0 0 16px 4px rgba(240,180,0,0.85);
      animation: wmKaijuEye 3.4s ease-in-out infinite, wmKaijuGlow 2.6s ease-in-out infinite;
    }
    .wm-kaiju-eye.e1 { left: 34px; }
    .wm-kaiju-eye.e2 { left: 90px; animation-delay: .2s, .4s; }
    @keyframes wmKaijuEye  { 0%,100% { margin-left: 0; } 30% { margin-left: 6px; } 70% { margin-left: -6px; } }
    @keyframes wmKaijuGlow { 0%,100% { opacity: 1; } 50% { opacity: 0.72; } }
    .wm-kaiju-arm {
      position: absolute; top: 150px; width: 96px; height: 34px;
      background: var(--cs-ink); border-radius: 16px;
      transform-origin: top center;
    }
    .wm-kaiju-arm-l { left: -52px;  transform: rotate(20deg);  animation: wmKaijuArmL 7s ease-in-out infinite; }
    .wm-kaiju-arm-r { left: 296px;  transform: rotate(-20deg); animation: wmKaijuArmR 7s ease-in-out infinite; }
    @keyframes wmKaijuArmL { 0%,100% { transform: rotate(20deg); }  50% { transform: rotate(13deg); } }
    @keyframes wmKaijuArmR { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(-13deg); } }
    .wm-kaiju-leg {
      position: absolute; bottom: 0; width: 72px; height: 104px;
      background: var(--cs-ink); border-radius: 16px;
    }
    .wm-kaiju-leg-l { left: 78px; }
    .wm-kaiju-leg-r { left: 190px; }
    .wm-kaiju-tail {
      position: absolute; left: 250px; bottom: 128px; width: 176px; height: 38px;
      background: var(--cs-ink); border-radius: 24px; transform-origin: left center;
      transform: rotate(12deg); animation: wmKaijuTail 3.6s ease-in-out infinite;
    }
    @keyframes wmKaijuTail { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-4deg); } }

    @media (prefers-reduced-motion: reduce) {
      .wm-kaiju, .wm-kaiju-eye, .wm-kaiju-arm, .wm-kaiju-tail { animation: none; }
      .wm-kaiju { transform: translateX(-50%); }
    }

    /* ── Demenz-Kampagne (Sci-Fi): Schwarzes Loch im Sonnensystem, umkreist
       von Raumschiffen. ─────────────────────────────────────────────────── */
    .worldmap-map-pane.campaign-bg-demenz {
      background-image:
        radial-gradient(circle at 50% 46%, rgba(90,50,160,0.30), transparent 55%),
        radial-gradient(circle at 15% 12%, rgba(255,180,90,0.18), transparent 35%),
        linear-gradient(180deg, #0a0715 0%, #120a24 45%, #1a0e2e 75%, #060410 100%);
      background-size: cover;
      overflow: hidden;
    }
    .worldmap-map-pane:not(.campaign-bg-demenz) .wm-scene-demenz { display: none; }
    .wm-scene-demenz { perspective: 620px; }

    .wm-space-stars {
      inset: 0;
      position: absolute;
      background-image:
        radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 27% 62%, #cfe6ff, transparent),
        radial-gradient(1.6px 1.6px at 41% 28%, #fff, transparent),
        radial-gradient(1px 1px   at 55% 74%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 68% 12%, #ffe9cf, transparent),
        radial-gradient(1.2px 1.2px at 77% 52%, #fff, transparent),
        radial-gradient(1px 1px   at 88% 33%, #cfe6ff, transparent),
        radial-gradient(1.4px 1.4px at 93% 78%, #fff, transparent),
        radial-gradient(1px 1px   at 8% 84%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 34% 88%, #fff, transparent),
        radial-gradient(1px 1px   at 62% 40%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 20% 44%, #fff, transparent);
      animation: wmTwinkle 5s ease-in-out infinite;
    }
    @keyframes wmTwinkle { 0%,100% { opacity: 0.9; } 50% { opacity: 0.55; } }

    .wm-space-sun {
      position: absolute; left: 9%; top: 9%;
      width: 120px; height: 120px; border-radius: 50%;
      background: radial-gradient(circle at 42% 40%, #fff6df 0%, #ffd27a 32%, #ff8a3c 60%, transparent 74%);
      filter: blur(1px);
      box-shadow: 0 0 70px 24px rgba(255,150,70,0.35);
    }

    /* Schwarzes Loch: Kern + Akkretionsscheibe (perspektivisch gekippt, rotierend) */
    .wm-blackhole {
      position: absolute; left: 50%; top: 45%;
      width: 210px; height: 210px;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    .wm-bh-disk {
      position: absolute; inset: -46px;
      border-radius: 50%;
      background: conic-gradient(from 0deg,
        #ffd98a, #ff8a4c, #d94be0, #6a7bff, #46d8e0, #ffd98a);
      mask: radial-gradient(circle, transparent 38%, #000 42%, #000 68%, transparent 72%);
      -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 68%, transparent 72%);
      filter: blur(3px) brightness(1.15);
      box-shadow: 0 0 60px 12px rgba(180,90,255,0.35);
      animation: wmDiskSpin 7s linear infinite;
    }
    @keyframes wmDiskSpin {
      from { transform: rotateX(74deg) rotate(0);      }
      to   { transform: rotateX(74deg) rotate(360deg); }
    }
    .wm-bh-core {
      position: absolute; left: 50%; top: 50%;
      width: 96px; height: 96px; border-radius: 50%;
      transform: translate(-50%, -50%);
      background: #04030a;
      box-shadow:
        0 0 0 2px rgba(210,170,255,0.55),
        0 0 22px 6px rgba(150,90,230,0.45),
        inset 0 0 30px 6px #000;
    }

    .wm-orbit {
      position: absolute; left: 50%; top: 45%;
      border: 1px dashed rgba(200,190,255,0.16);
      border-radius: 50%;
      transform-style: preserve-3d;
      animation: wmOrbitSpin 18s linear infinite;
    }
    @keyframes wmOrbitSpin {
      from { transform: translate(-50%, -50%) rotateX(70deg) rotate(0);      }
      to   { transform: translate(-50%, -50%) rotateX(70deg) rotate(360deg); }
    }
    .wm-orbit-1 { width: 300px; height: 300px; animation-duration: 13s; }
    .wm-orbit-2 { width: 430px; height: 430px; animation-duration: 21s; animation-direction: reverse; }
    .wm-orbit-3 { width: 560px; height: 560px; animation-duration: 31s; }
    .wm-ship {
      position: absolute; left: 50%; top: -7px;
      width: 0; height: 0;
      transform: translateX(-50%) rotateX(-70deg);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 16px solid #dfe8ff;
      filter: drop-shadow(0 0 6px rgba(140,190,255,0.9));
    }

    @media (prefers-reduced-motion: reduce) {
      .wm-space-stars, .wm-bh-disk, .wm-orbit { animation: none; }
      .wm-bh-disk { transform: rotateX(74deg); }
      .wm-orbit  { transform: translate(-50%, -50%) rotateX(70deg); }
    }

    /* ── Neurologie-Kampagne (Gothic Horror / Castlevania): Schloss auf dem
       Hügel, Fledermäuse in festen Abständen, Gewitternacht. ─────────────── */
    .worldmap-map-pane.campaign-bg-neurologie {
      background-image:
        radial-gradient(circle at 78% 16%, rgba(190,205,255,0.16), transparent 42%),
        linear-gradient(180deg, #0a0a16 0%, #15121f 42%, #1d1420 72%, #090610 100%);
      background-size: cover;
      overflow: hidden;
    }
    .worldmap-map-pane:not(.campaign-bg-neurologie) .wm-scene-neurologie { display: none; }

    .wm-night-sky {
      inset: 0; position: absolute;
      background-image:
        radial-gradient(1.5px 1.5px at 14% 12%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px   at 33% 22%, rgba(255,255,255,.4),  transparent),
        radial-gradient(1.4px 1.4px at 52% 9%,  rgba(255,255,255,.5),  transparent),
        radial-gradient(1px 1px   at 66% 26%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 88% 14%, rgba(255,255,255,.5),  transparent),
        radial-gradient(1px 1px   at 24% 34%, rgba(255,255,255,.3),  transparent);
    }
    .wm-moon {
      position: absolute; right: 12%; top: 8%;
      width: 92px; height: 92px; border-radius: 50%;
      background:
        radial-gradient(circle at 62% 38%, rgba(0,0,0,.10) 0 7px, transparent 8px),
        radial-gradient(circle at 40% 60%, rgba(0,0,0,.09) 0 5px, transparent 6px),
        radial-gradient(circle at 50% 45%, #f5f2e6, #cfd2da 68%, #a7abb8 100%);
      box-shadow: 0 0 48px 15px rgba(210,220,255,0.26);
    }

    /* Easter Egg (Mortal Kombat 1): alle ~28 s huscht der Schatten einer Hexe
       auf dem Besen vor dem Mond vorbei. */
    .wm-witch {                       /* der Besenstiel */
      position: absolute; right: 6%; top: 12%;
      width: 44px; height: 4px;
      background: #05040a; border-radius: 3px;
      opacity: 0; z-index: 2;
      animation: wmWitchFly 28s linear infinite;
    }
    .wm-witch::after {                /* Reisig hinten (nach rechts) */
      content: ""; position: absolute; right: -14px; top: 50%;
      transform: translateY(-50%);
      border-left: 16px solid #05040a;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .wm-witch::before {               /* Hexe mit Spitzhut, sitzt vorn auf dem Besen */
      content: ""; position: absolute; left: 6px; bottom: 0;
      width: 18px; height: 22px;
      background: #05040a;
      clip-path: polygon(50% 0%, 78% 32%, 66% 40%, 74% 66%, 88% 100%, 12% 100%, 26% 66%, 34% 40%, 22% 32%);
    }
    @keyframes wmWitchFly {
      0%, 86%   { transform: translate(130px, 8px);    opacity: 0; }
      86.5%     { transform: translate(120px, 8px);    opacity: 1; }
      94%       { transform: translate(-240px, -14px); opacity: 1; }
      95%, 100% { transform: translate(-268px, -16px); opacity: 0; }
    }

    /* Blitz: heller Vollflächen-Flash + Zackenbolzen, alle 8 s ein Doppelschlag */
    .wm-lightning {
      inset: 0; position: absolute; z-index: 5; opacity: 0;
      background: radial-gradient(circle at 66% 8%, rgba(224,232,255,0.95), rgba(150,175,255,0.32) 46%, transparent 72%);
      animation: wmFlash 8s linear infinite;
    }
    @keyframes wmFlash {
      0%, 8% { opacity: 0; } 9% { opacity: .92; } 10% { opacity: .12; }
      11.5% { opacity: .7; } 13% { opacity: 0; } 100% { opacity: 0; }
    }
    .wm-bolt {
      position: absolute; top: 0; left: 61%; width: 58px; height: 44%;
      background: linear-gradient(180deg, #eef2ff, #9fb4ff);
      clip-path: polygon(46% 0, 62% 0, 38% 34%, 54% 34%, 28% 66%, 45% 66%, 16% 100%, 33% 60%, 19% 60%, 42% 28%, 27% 28%);
      filter: drop-shadow(0 0 7px rgba(185,205,255,0.95));
      opacity: 0; z-index: 6;
      animation: wmBolt 8s linear infinite;
    }
    @keyframes wmBolt {
      0%, 8.5% { opacity: 0; } 9% { opacity: 1; } 10.5% { opacity: 0; }
      11.5% { opacity: .85; } 12.5% { opacity: 0; } 100% { opacity: 0; }
    }

    /* Dunkler Nadelwald am Horizont — hinter dem Schloss, Wipfel über der
       Hügelkuppe */
    .wm-forest {
      position: absolute; left: 0; right: 0; bottom: 35%;
      height: 60px;
      background: #050409;
      clip-path: polygon(0% 100%, 2% 55%, 4% 100%, 6.5% 30%, 9% 100%, 11% 60%, 13.5% 100%, 16% 20%, 18.5% 100%, 21% 50%, 23.5% 100%, 26% 35%, 29% 100%, 31.5% 62%, 34% 100%, 37% 25%, 40% 100%, 42.5% 55%, 45% 100%, 48% 38%, 51% 100%, 53.5% 18%, 56% 100%, 59% 58%, 62% 100%, 64.5% 42%, 67% 100%, 70% 28%, 73% 100%, 75.5% 60%, 78% 100%, 81% 22%, 84% 100%, 86.5% 52%, 89% 100%, 92% 36%, 95% 100%, 97.5% 58%, 100% 100%);
      z-index: 1;
    }
    .wm-hill {
      position: absolute; left: 50%; bottom: -36%;
      width: 160%; height: 72%;
      transform: translateX(-50%);
      background: #07050c;
      border-radius: 50% 50% 0 0 / 62% 62% 0 0;
      z-index: 2;
    }
    .wm-castle {
      position: absolute; left: 50%; bottom: 33%;
      width: 196px; height: 150px;
      transform: translateX(-50%);
      z-index: 3;
    }
    .wm-castle-keep {
      position: absolute; left: 48px; bottom: 0; width: 100px; height: 108px;
      background: #0c0a15; box-shadow: inset -12px 0 0 rgba(0,0,0,.5);
    }
    .wm-castle-keep::before {
      content: ""; position: absolute; left: -2px; right: -2px; top: -13px; height: 13px;
      background: repeating-linear-gradient(90deg, #0c0a15 0 17px, transparent 17px 29px);
    }
    .wm-castle-tower {
      position: absolute; bottom: 0; width: 42px; height: 140px; background: #0c0a15;
    }
    .wm-castle-tower-l { left: 0; }
    .wm-castle-tower-r { right: 0; }
    .wm-castle-tower::after {
      content: ""; position: absolute; left: -7px; right: -7px; top: -26px;
      border-left: 28px solid transparent; border-right: 28px solid transparent;
      border-bottom: 28px solid #0c0a15;
    }
    .wm-castle-win {
      position: absolute; width: 8px; height: 13px; border-radius: 3px 3px 0 0;
      background: #ffb44a; box-shadow: 0 0 9px 2px rgba(255,150,40,0.75);
      animation: wmWinFlicker 3.6s ease-in-out infinite;
    }
    .wm-castle-win.w1 { left: 66px; bottom: 62px; }
    .wm-castle-win.w2 { left: 84px; bottom: 62px; animation-delay: .7s; }
    .wm-castle-win.w3 { left: 17px; bottom: 92px; animation-delay: 1.4s; }
    @keyframes wmWinFlicker { 0%,100% { opacity: 1; } 45% { opacity: .55; } 70% { opacity: .9; } }

    /* Kleines Dorf vor dem Schloss (tiefer am Hang, im Vordergrund) */
    .wm-village {
      position: absolute; left: 50%; bottom: 24%;
      width: 300px; height: 40px;
      transform: translateX(-50%);
      z-index: 3;
    }
    .wm-house {
      position: absolute; bottom: 0; width: 34px; height: 24px;
      background: #0a0813;
    }
    .wm-house::before {
      content: ""; position: absolute; left: -6px; right: -6px; top: -14px;
      border-left: 23px solid transparent; border-right: 23px solid transparent;
      border-bottom: 15px solid #0a0813;
    }
    .wm-house::after {
      content: ""; position: absolute; left: 13px; top: 8px; width: 6px; height: 8px;
      background: #ffb44a; box-shadow: 0 0 6px 1px rgba(255,150,40,0.7);
      animation: wmWinFlicker 4.2s ease-in-out infinite;
    }
    .wm-house.h1 { left: 4px;   }
    .wm-house.h2 { left: 74px;  transform: scale(.82); }
    .wm-house.h2::after { animation-delay: 1.1s; }
    .wm-house.h3 { right: 74px; transform: scale(.9); }
    .wm-house.h3::after { animation-delay: 2.2s; }
    .wm-house.h4 { right: 2px;  transform: scale(1.06); }
    .wm-house.h4::after { animation-delay: .5s; }

    /* Fledermäuse: alle ~1,2 s verlässt eine das Schloss und steigt in den
       Nachthimmel, fächert dabei aus. */
    .wm-bat {
      position: absolute; left: 50%; top: 46%;
      width: 22px; height: 11px; opacity: 0;
      z-index: 4;
      animation: wmBatFly 7s linear infinite;
    }
    .wm-bat::before {
      content: ""; position: absolute; inset: 0; background: #6a6285;
      filter: drop-shadow(0 0 3px rgba(190,200,235,0.35));
      clip-path: polygon(0% 45%, 12% 22%, 22% 42%, 34% 12%, 44% 40%, 50% 25%, 56% 40%, 66% 12%, 78% 42%, 88% 22%, 100% 45%, 82% 60%, 60% 46%, 50% 66%, 40% 46%, 18% 60%);
      animation: wmBatFlap .26s ease-in-out infinite alternate;
    }
    @keyframes wmBatFlap { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
    @keyframes wmBatFly {
      0%   { transform: translate(0,0) scale(.4);                          opacity: 0; }
      10%  { opacity: 1; }
      70%  { opacity: 1; }
      100% { transform: translate(var(--bx,-40px), -300px) scale(1.15);    opacity: 0; }
    }
    .wm-bat.b1 { animation-delay: 0s;     left: 50%; --bx: -30px;  }
    .wm-bat.b2 { animation-delay: -1.17s; left: 48%; --bx: -150px; }
    .wm-bat.b3 { animation-delay: -2.33s; left: 52%; --bx:  110px; }
    .wm-bat.b4 { animation-delay: -3.5s;  left: 49%; --bx:  40px;  }
    .wm-bat.b5 { animation-delay: -4.67s; left: 51%; --bx: -90px;  }
    .wm-bat.b6 { animation-delay: -5.83s; left: 50%; --bx:  170px; }

    @media (prefers-reduced-motion: reduce) {
      .wm-lightning, .wm-bolt, .wm-castle-win, .wm-house::after,
      .wm-witch, .wm-bat, .wm-bat::before { animation: none; }
      .wm-bat, .wm-witch { opacity: 0; }
    }

    /* ── Vitalzeichen-Kampagne (Lost Island / Prehistoric): Vulkaninsel bei
       Sonnenuntergang, Dschungel-Silhouette, Brachiosaurus + T-Rex, Flugsaurier
       am Himmel. ─────────────────────────────────────────────────────────── */
    .worldmap-map-pane.campaign-bg-vitalzeichen {
      --wm-dino: #2f6b4a;
      background-image:
        radial-gradient(circle at 82% 14%, rgba(255,205,120,0.48), transparent 45%),
        linear-gradient(180deg, #f7c66b 0%, #f0985a 26%, #c97a4a 46%, #4c7a45 74%, #1c3a1e 100%);
      background-size: cover;
      overflow: hidden;
    }
    .worldmap-map-pane:not(.campaign-bg-vitalzeichen) .wm-scene-vitalzeichen { display: none; }

    .wm-jungle-cloud {
      position: absolute; top: 10%; width: 120px; height: 26px; border-radius: 50%;
      background: rgba(255, 235, 210, 0.4); filter: blur(2px);
    }
    .wm-jungle-cloud.c1 { left: 8%; width: 150px; }
    .wm-jungle-cloud.c2 { left: 40%; top: 16%; width: 90px; opacity: 0.75; }

    /* Vulkan im Hintergrund, mit glühendem Krater + aufsteigendem Rauch */
    .wm-volcano {
      position: absolute; left: 50%; bottom: 38%;
      width: 260px; height: 170px;
      transform: translateX(-50%);
      background: #2c1912;
      clip-path: polygon(50% 0%, 58% 10%, 100% 100%, 0% 100%, 42% 10%);
      z-index: 1;
    }
    .wm-volcano::after {
      content: ""; position: absolute; left: 44%; top: 4%; width: 12%; height: 8%;
      background: radial-gradient(circle, #ffb347 0%, #e8590c 60%, transparent 100%);
      border-radius: 50%;
      box-shadow: 0 0 18px 6px rgba(255,140,40,0.55);
      animation: wmLavaGlow 2.6s ease-in-out infinite;
    }
    @keyframes wmLavaGlow { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
    .wm-volcano-smoke {
      position: absolute; left: 47%; top: -6%; width: 26px; height: 26px;
      background: radial-gradient(circle, rgba(120,120,120,0.55), transparent 70%);
      border-radius: 50%;
      filter: blur(1px);
      animation: wmSmokeRise 6s ease-out infinite;
    }
    .wm-volcano-smoke.s2 { left: 52%; animation-delay: 2s; width: 20px; height: 20px; }
    .wm-volcano-smoke.s3 { left: 44%; animation-delay: 4s; width: 18px; height: 18px; }
    @keyframes wmSmokeRise {
      0%   { transform: translate(0,0) scale(0.6);   opacity: 0.6; }
      100% { transform: translate(30px,-140px) scale(2.4); opacity: 0; }
    }

    /* Dschungel-Silhouette am Horizont (Farnwipfel-Zickzack) */
    .wm-jungle-ridge {
      position: absolute; left: 0; right: 0; bottom: 30%;
      height: 70px;
      background: #0e2211;
      clip-path: polygon(0% 100%, 3% 40%, 6% 100%, 9% 55%, 12% 100%, 15% 30%, 18% 100%, 21% 60%, 24% 100%, 27% 20%, 30% 100%, 33% 50%, 36% 100%, 39% 35%, 42% 100%, 45% 55%, 48% 100%, 51% 15%, 54% 100%, 57% 45%, 60% 100%, 63% 60%, 66% 100%, 69% 25%, 72% 100%, 75% 50%, 78% 100%, 81% 30%, 84% 100%, 87% 55%, 90% 100%, 93% 40%, 96% 100%, 99% 50%, 100% 100%);
      z-index: 2;
    }
    .wm-jungle-floor {
      position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
      background: #142a16;
      z-index: 2;
    }

    /* Palmen vorne links/rechts, leicht schwankend */
    .wm-palm {
      position: absolute; bottom: 28%; width: 90px; height: 150px; z-index: 3;
      animation: wmPalmSway 5s ease-in-out infinite;
      transform-origin: 50% 100%;
    }
    .wm-palm.p1 { left: 3%; z-index: 5; }
    .wm-palm.p2 { right: 10%; bottom: 22%; transform: scaleX(-1); animation-delay: 1.4s; z-index: 2; }
    .wm-palm-trunk {
      position: absolute; left: 44%; bottom: 0; width: 12px; height: 120px;
      background: #0c1c0e;
      border-radius: 40% 10% 40% 10% / 60% 20% 60% 20%;
      transform: rotate(-6deg); transform-origin: bottom center;
    }
    .wm-palm-fronds { position: absolute; left: 50%; top: 0; width: 4px; height: 4px; }
    .wm-palm-frond {
      position: absolute; left: 0; top: 0; width: 74px; height: 20px;
      background: #0c1c0e;
      border-radius: 0 100% 100% 0 / 0 100% 100% 0;
      transform-origin: 4px 10px;
    }
    .wm-palm-frond.f1 { transform: rotate(-52deg); }
    .wm-palm-frond.f2 { transform: rotate(-20deg); }
    .wm-palm-frond.f3 { transform: rotate(8deg); }
    .wm-palm-frond.f4 { transform: rotate(36deg); }
    .wm-palm-frond.f5 { transform: rotate(64deg); }
    @keyframes wmPalmSway {
      0%,100% { transform: rotate(-1.6deg); }
      50%     { transform: rotate(1.6deg); }
    }
    .wm-palm.p2 { animation-name: wmPalmSwayMirrored; }
    @keyframes wmPalmSwayMirrored {
      0%,100% { transform: scaleX(-1) rotate(-1.6deg); }
      50%     { transform: scaleX(-1) rotate(1.6deg); }
    }

    /* Brachiosaurus: großer Langhals-Saurier im Hintergrund, aus Körperteilen
       zusammengesetzt (wie der Kaiju) — Hals wiegt sich sanft beim Grasen. */
    .wm-brachio {
      position: absolute; left: 15%; bottom: 27%;
      width: 300px; height: 260px;
      z-index: 3;
      animation: wmBrachioSway 6.5s ease-in-out infinite;
      transform-origin: 40% 100%;
    }
    .wm-brachio-leg {
      position: absolute; bottom: 0; width: 24px; height: 92px;
      background: var(--wm-dino); border-radius: 10px;
    }
    .wm-brachio-leg.l1 { left: 36px;  height: 88px; }
    .wm-brachio-leg.l2 { left: 70px;  height: 92px; }
    .wm-brachio-leg.l3 { left: 148px; height: 92px; }
    .wm-brachio-leg.l4 { left: 182px; height: 96px; }
    .wm-brachio-tail {
      position: absolute; left: -104px; bottom: 92px; width: 180px; height: 46px;
      background: var(--wm-dino);
      clip-path: polygon(0% 42%, 100% 6%, 100% 94%, 0% 58%);
      transform: rotate(10deg); transform-origin: right center;
    }
    .wm-brachio-body {
      position: absolute; left: 18px; bottom: 76px; width: 220px; height: 102px;
      background: var(--wm-dino);
      border-radius: 50% 50% 42% 42% / 66% 66% 34% 34%;
    }
    .wm-brachio-neck-wrap {
      position: absolute; left: 190px; bottom: 150px; width: 40px; height: 112px;
      transform: rotate(18deg); transform-origin: bottom center;
      animation: wmBrachioGraze 15s ease-in-out infinite;
    }
    .wm-brachio-neck {
      position: absolute; inset: 0;
      background: var(--wm-dino);
      clip-path: polygon(26% 0%, 74% 0%, 100% 100%, 0% 100%);
    }
    /* Gelenk auf halber Halshöhe: der obere Abschnitt hat eine eigene, leicht
       phasenversetzte Wippe, damit der Hals nicht wie ein starrer Stab wirkt. */
    .wm-brachio-neck-upper-wrap {
      position: absolute; left: 6px; top: -84px; width: 30px; height: 96px;
      transform-origin: bottom center;
      animation: wmBrachioJoint 4.6s ease-in-out infinite;
    }
    .wm-brachio-neck-upper {
      position: absolute; inset: 0;
      background: var(--wm-dino);
      clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    }
    .wm-brachio-head {
      position: absolute; left: -8px; top: -22px; width: 48px; height: 27px;
      background: #5fb87e; border-radius: 50% 50% 35% 65% / 65% 65% 35% 35%;
      box-shadow: 0 2px 0 0 rgba(15,40,25,0.45);
    }
    .wm-brachio-eye {
      position: absolute; left: 32px; top: 6px; width: 6px; height: 6px; border-radius: 50%;
      background: var(--cs-gold);
      box-shadow: 0 0 6px 2px rgba(240,180,0,0.8);
      animation: wmKaijuGlow 2.6s ease-in-out infinite;
    }
    @keyframes wmBrachioJoint {
      0%,100% { transform: rotate(-6deg); }
      50%     { transform: rotate(4deg); }
    }
    @media (prefers-reduced-motion: reduce) { .wm-brachio-neck-upper-wrap { animation: none; } }
    @keyframes wmBrachioSway {
      0%,100% { transform: rotate(-0.6deg); }
      50%     { transform: rotate(0.6deg); }
    }
    /* Der Hals wiegt sich meist sanft und senkt sich alle ~15 s einmal zum
       Grasen Richtung Palme hinab (User: „ab und zu mal den Kopf an den Baum
       macht und frisst"). */
    @keyframes wmBrachioGraze {
      0%, 58%  { transform: rotate(15deg); }
      29%      { transform: rotate(21deg); }
      68%      { transform: rotate(52deg); }
      76%      { transform: rotate(66deg); }
      86%      { transform: rotate(64deg); }
      94%      { transform: rotate(34deg); }
      100%     { transform: rotate(15deg); }
    }
    @media (prefers-reduced-motion: reduce) { .wm-brachio, .wm-brachio-neck-wrap { animation: none; } }

    /* Flugsaurier ziehen in festen Abständen über den Himmel */
    .wm-ptero {
      position: absolute; top: 18%; left: 100%;
      width: 30px; height: 12px; opacity: 0;
      z-index: 2;
      animation: wmPteroFly 13s linear infinite;
    }
    .wm-ptero::before {
      content: ""; position: absolute; inset: 0;
      background: #1c1410;
      clip-path: polygon(0% 50%, 30% 0%, 40% 42%, 50% 20%, 60% 42%, 70% 0%, 100% 50%, 62% 60%, 50% 46%, 38% 60%);
      animation: wmPteroFlap 0.5s ease-in-out infinite alternate;
    }
    @keyframes wmPteroFlap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }
    @keyframes wmPteroFly {
      0%   { transform: translate(0, 0);       opacity: 0; }
      6%   { opacity: 0.85; }
      92%  { opacity: 0.85; }
      100% { transform: translate(-620px, 40px); opacity: 0; }
    }
    .wm-ptero.p1 { top: 14%; animation-delay: 0s; }
    .wm-ptero.p2 { top: 24%; animation-delay: -4.3s; }
    .wm-ptero.p3 { top: 10%; animation-delay: -8.6s; }

    @media (prefers-reduced-motion: reduce) {
      .wm-volcano::after, .wm-volcano-smoke, .wm-palm, .wm-ptero, .wm-ptero::before {
        animation: none;
      }
      .wm-ptero { opacity: 0; }
    }

    /* 5×5 Worldmap-Grid — endet über der fixen #worldmapPopupBar (~92px). */
    .worldmap-grid {
      bottom: 96px;
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      left: 0;
      padding: 12px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
    }

    .worldmap-cell {
      align-items: center;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
      padding: 6px 3px;
      text-align: center;
    }

    .worldmap-cell-empty { /* unsichtbarer Platzhalter */ }

    .worldmap-cell-fog {
      background: rgba(4, 2, 20, 0.70);
      border-radius: 14px;
    }

    .worldmap-cell-locked {
      background: rgba(30, 15, 60, 0.55);
      border: 2px dashed rgba(160, 100, 255, 0.25);
      border-radius: 14px;
    }

    .worldmap-cell-main {
      background: linear-gradient(145deg, rgba(30,15,70,0.92), rgba(15,8,40,0.95));
      border: 2px solid rgba(255, 220, 100, 0.55);
      box-shadow: 0 0 12px rgba(255,200,80,0.15) inset;
      cursor: pointer;
      transition: filter 160ms, transform 160ms, border-color 160ms, box-shadow 160ms;
    }
    .worldmap-cell-main:hover {
      border-color: rgba(255, 230, 120, 1);
      box-shadow: 0 0 20px rgba(255,210,80,0.4) inset, 0 0 16px rgba(255,210,80,0.35);
      filter: brightness(1.15);
      transform: scale(1.08);
    }

    .worldmap-cell-challenge {
      background: linear-gradient(145deg, rgba(20,10,50,0.88), rgba(10,5,30,0.92));
      border: 2px solid rgba(255, 170, 40, 0.50);
      box-shadow: 0 0 10px rgba(255,150,30,0.12) inset;
      cursor: pointer;
      transition: filter 160ms, transform 160ms, border-color 160ms;
    }
    .worldmap-cell-challenge:hover {
      border-color: rgba(255, 180, 60, 1);
      box-shadow: 0 0 18px rgba(255,160,40,0.45) inset, 0 0 14px rgba(255,160,40,0.35);
      filter: brightness(1.2);
      transform: scale(1.08);
    }

    /* Dungeon-spezifische Akzentfarben */
    .wm-cell-tutorial         { border-color: rgba(106,184,42,0.6) !important; box-shadow: 0 0 12px rgba(106,184,42,0.18) inset !important; }
    .wm-cell-tutorial:hover   { border-color: #8ad438 !important; box-shadow: 0 0 22px rgba(106,184,42,0.5) inset, 0 0 18px rgba(106,184,42,0.4) !important; }
    .wm-cell-pflegeprozess       { border-color: rgba(46,95,163,0.7) !important; box-shadow: 0 0 12px rgba(46,95,163,0.2) inset !important; }
    .wm-cell-pflegeprozess:hover { border-color: #5a8fd6 !important; box-shadow: 0 0 22px rgba(46,95,163,0.5) inset, 0 0 18px rgba(240,180,0,0.35) !important; }
    .wm-cell-pflegemassnahmen       { border-color: rgba(255,100,100,0.6) !important; box-shadow: 0 0 12px rgba(255,80,80,0.18) inset !important; }
    .wm-cell-pflegemassnahmen:hover { border-color: #f87171 !important; box-shadow: 0 0 22px rgba(255,80,80,0.5) inset, 0 0 18px rgba(255,80,80,0.4) !important; }
    .wm-cell-pflege-haus       { border-color: rgba(47,157,143,0.7) !important; box-shadow: 0 0 12px rgba(47,157,143,0.2) inset !important; }
    .wm-cell-pflege-haus:hover { border-color: #5fd0c2 !important; box-shadow: 0 0 22px rgba(47,157,143,0.5) inset, 0 0 18px rgba(95,208,194,0.4) !important; }

    /* Kachel-Motive der Pflegeprozess-Kampagne (urban): jede Kachel zeigt ihren Ort als Miniatur */
    /* Einführungsstation: Regal mit bunten Buchrücken */
    .worldmap-cell-main.wm-cell-tutorial {
      background:
        linear-gradient(180deg, transparent 0 62%, #6b4320 62% 66%, transparent 66%),
        repeating-linear-gradient(90deg, #d9534f 0 6%, #f0b400 6% 12%, #2e5fa3 12% 18%, #6ab82a 18% 24%, #8b5cf6 24% 30%) 0 66%/100% 28% no-repeat,
        linear-gradient(180deg, #1d3a14 0%, #2a5a1e 100%);
    }
    /* Stadtpark: Nacht, Mond, Straßenlaterne mit Lichtkegel, Rasenstreifen */
    .worldmap-cell-main.wm-cell-pflegeprozess {
      background:
        radial-gradient(circle at 84% 20%, #f4f8ff 0 4px, rgba(220,232,255,0.40) 5px 10px, transparent 11px),
        radial-gradient(circle at 24% 46%, rgba(255,222,120,0.75) 0 3px, rgba(255,214,102,0.22) 4px 16px, transparent 17px),
        linear-gradient(#3b4a66, #3b4a66) 24% 100%/3% 62% no-repeat,
        linear-gradient(0deg, #0f3a24 0 20%, transparent 20%),
        linear-gradient(180deg, #091428 0%, #12304a 62%, #1c4a38 100%);
    }
    /* Pflegeziel-Dungeon: Klinikfassade mit erleuchteten Fenstern und rotem Kreuz */
    .worldmap-cell-main.wm-cell-pflege-haus {
      background:
        repeating-linear-gradient(90deg, transparent 0 11%, rgba(255,232,150,0.78) 11% 19%, transparent 19% 25%) 50% 78%/84% 16% no-repeat,
        repeating-linear-gradient(90deg, transparent 0 11%, rgba(255,232,150,0.78) 11% 19%, transparent 19% 25%) 50% 56%/84% 16% no-repeat,
        linear-gradient(180deg, #123c44 0%, #1f6b68 100%);
    }
    /* Heizkanal: dunkler Tunnel, zwei Fernwärmerohre, aufsteigender Dampf */
    .worldmap-cell-main.wm-cell-pflegemassnahmen {
      background:
        radial-gradient(circle at 72% 26%, rgba(255,255,255,0.34), transparent 24%),
        radial-gradient(circle at 54% 14%, rgba(255,255,255,0.20), transparent 20%),
        linear-gradient(0deg, transparent 0 18%, #566170 18% 21%, #9aa8b8 21% 25%, #424b58 25% 29%, transparent 29%),
        linear-gradient(0deg, transparent 0 40%, #566170 40% 43%, #9aa8b8 43% 47%, #424b58 47% 51%, transparent 51%),
        linear-gradient(180deg, #2a0e08 0%, #5c1e0c 62%, #b8441a 100%);
    }
    /* Finale: brennende Stadt, Kaiju-Kopf mit gelben Augen vor der Skyline */
    .wm-cell-kaiju       { border-color: rgba(255,210,60,0.75) !important; box-shadow: 0 0 12px rgba(255,120,40,0.28) inset !important; }
    .wm-cell-kaiju:hover { border-color: #ffd23c !important; box-shadow: 0 0 22px rgba(255,120,40,0.55) inset, 0 0 18px rgba(255,210,60,0.45) !important; }
    .wm-cell-kaiju:hover .wm-cell-label { color: #ffe08a; }
    .worldmap-cell-main.wm-cell-kaiju {
      background:
        radial-gradient(ellipse 5px 4px at 36% 16%, #ffd23c 0 70%, transparent 72%),
        radial-gradient(ellipse 5px 4px at 64% 16%, #ffd23c 0 70%, transparent 72%),
        radial-gradient(ellipse 30% 20% at 50% 20%, #120a14 0 90%, transparent 92%),
        repeating-linear-gradient(90deg, #0d0a14 0 9%, #1b1422 9% 14%, #0d0a14 14% 22%) 0 100%/100% 30% no-repeat,
        linear-gradient(180deg, #2a0a1c 0%, #8a2418 66%, #e0702a 100%);
    }
    .worldmap-cell-main.worldmap-cell-locked.wm-cell-kaiju,
    .worldmap-cell-main.worldmap-cell-locked.wm-cell-tutorial,
    .worldmap-cell-main.worldmap-cell-locked.wm-cell-pflegeprozess,
    .worldmap-cell-main.worldmap-cell-locked.wm-cell-pflege-haus,
    .worldmap-cell-main.worldmap-cell-locked.wm-cell-pflegemassnahmen { filter: grayscale(0.75) brightness(0.55); }
    .wm-cell-pflege-haus:hover .wm-cell-label { color: #9ae6dc; }
    .wm-cell-komotiu       { border-color: rgba(147,51,234,0.6) !important; box-shadow: 0 0 12px rgba(120,30,220,0.18) inset !important; }
    .wm-cell-komotiu:hover { border-color: #a855f7 !important; box-shadow: 0 0 22px rgba(120,30,220,0.55) inset, 0 0 18px rgba(147,51,234,0.45) !important; }
    .wm-cell-apoplex       { border-color: rgba(45,212,191,0.6) !important; box-shadow: 0 0 12px rgba(45,212,191,0.18) inset !important; }
    .wm-cell-apoplex:hover { border-color: #2dd4bf !important; box-shadow: 0 0 22px rgba(45,212,191,0.5) inset, 0 0 18px rgba(45,212,191,0.4) !important; }

    .wm-cell-parkinson       { border-color: rgba(255,215,0,0.55) !important; box-shadow: 0 0 12px rgba(255,215,0,0.15) inset !important; }
    .wm-cell-parkinson:hover { border-color: #ffd700 !important; box-shadow: 0 0 22px rgba(255,215,0,0.45) inset, 0 0 18px rgba(255,215,0,0.35) !important; }

    .wm-cell-demenz-krankheitsbild       { border-color: rgba(148,163,184,0.5) !important; box-shadow: 0 0 12px rgba(148,163,184,0.12) inset !important; }
    .wm-cell-demenz-krankheitsbild:hover { border-color: #94a3b8 !important; box-shadow: 0 0 22px rgba(148,163,184,0.4) inset, 0 0 18px rgba(148,163,184,0.3) !important; }
    .wm-cell-demenz-kommunikation       { border-color: rgba(167,139,250,0.5) !important; box-shadow: 0 0 12px rgba(167,139,250,0.12) inset !important; }
    .wm-cell-demenz-kommunikation:hover { border-color: #a78bfa !important; box-shadow: 0 0 22px rgba(167,139,250,0.4) inset, 0 0 18px rgba(167,139,250,0.3) !important; }
    .wm-cell-demenz-kitwood       { border-color: rgba(251,191,36,0.5) !important; box-shadow: 0 0 12px rgba(251,191,36,0.12) inset !important; }
    .wm-cell-demenz-kitwood:hover { border-color: #fbbf24 !important; box-shadow: 0 0 22px rgba(251,191,36,0.4) inset, 0 0 18px rgba(251,191,36,0.3) !important; }
    .wm-cell-demenz-expertenstandard       { border-color: rgba(52,211,153,0.5) !important; box-shadow: 0 0 12px rgba(52,211,153,0.12) inset !important; }
    .wm-cell-demenz-expertenstandard:hover { border-color: #34d399 !important; box-shadow: 0 0 22px rgba(52,211,153,0.4) inset, 0 0 18px rgba(52,211,153,0.3) !important; }

    .wm-cell-fiebervulkan       { border-color: rgba(255,140,60,0.6) !important; box-shadow: 0 0 12px rgba(255,120,40,0.18) inset !important; }
    .wm-cell-puls-plateau       { border-color: rgba(140,210,90,0.65) !important; box-shadow: 0 0 12px rgba(120,200,70,0.2) inset !important; }
    .wm-cell-puls-plateau:hover { border-color: #9be36a !important; box-shadow: 0 0 22px rgba(120,200,70,0.5) inset, 0 0 18px rgba(120,200,70,0.4) !important; }
    .wm-cell-hochdruck          { border-color: rgba(230,90,70,0.65) !important; box-shadow: 0 0 12px rgba(220,70,50,0.22) inset !important; }
    .wm-cell-hochdruck:hover    { border-color: #ff6a4a !important; box-shadow: 0 0 22px rgba(220,70,50,0.5) inset, 0 0 18px rgba(220,70,50,0.4) !important; }
    .wm-cell-urzeit-bonus        { border-color: rgba(255,200,90,0.75) !important; box-shadow: 0 0 14px rgba(255,180,60,0.28) inset !important; }
    .wm-cell-urzeit-bonus:hover { border-color: #ffd066 !important; box-shadow: 0 0 24px rgba(255,180,60,0.55) inset, 0 0 20px rgba(255,180,60,0.45) !important; }
    .wm-cell-fiebervulkan:hover { border-color: #ff8c3c !important; box-shadow: 0 0 22px rgba(255,120,40,0.5) inset, 0 0 18px rgba(255,120,40,0.4) !important; }

    .worldmap-cell-tutorial-pending {
      animation: tutorial-flicker 2.4s ease-in-out infinite;
    }

    .wm-cell-icon { font-size: 2rem; line-height: 1; }
    .wm-cell-label {
      background: rgba(0,0,0,0.55);
      border-radius: 6px;
      color: #fde68a;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1.25;
      padding: 2px 6px;
    }
    .wm-lock-icon { font-size: 1.3rem; opacity: 0.35; }

    /* Home-Base-Button: oben in der Kampagnen-Leiste (links) */
    .worldmap-home-btn {
      appearance: none;
      background: var(--cs-mint);
      border: 2.5px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-paper);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font: inherit;
      font-weight: 900;
      padding: 10px 8px;
      position: relative;
      margin-bottom: 4px;
      transition: transform 120ms, box-shadow 120ms;
      width: 100%;
    }
    .worldmap-home-btn .wm-home-icon  { font-size: 1.4rem; line-height: 1; }
    .worldmap-home-btn .wm-home-label { font-size: 0.72rem; letter-spacing: .02em; }
    .worldmap-home-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--cs-ink); }
    .worldmap-home-btn:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--cs-ink); }
    .worldmap-meta-badge:empty { display: none; }
    .worldmap-meta-badge {
      font-size: 0.78rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 260px;
    }

    /* ── Dungeon-Intro: Pflegediagnosen-Hain ─────────────────────────────── */
    .dungeon-intro-screen {
      align-items: center;
      background:
        linear-gradient(180deg, #07160f 0%, #10261a 44%, #0b150e 100%);
      color: var(--ink);
      display: grid;
      min-height: 100vh;
      overflow: hidden;
      padding: 18px;
      position: relative;
    }

    .dungeon-intro-screen.is-hidden { display: none; }

    .dungeon-intro-card {
      display: grid;
      gap: 16px;
      margin: 0 auto;
      max-width: 920px;
      position: relative;
      width: min(100%, 920px);
      z-index: 1;
    }

    .dungeon-intro-copy {
      background: rgba(6, 21, 13, 0.86);
      border: 2px solid rgba(134, 239, 172, 0.42);
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
      padding: 18px 20px;
      text-align: center;
    }

    .dungeon-intro-copy h1 {
      color: #bbf7d0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.5rem, 4vw, 3rem);
      margin: 0 0 8px;
      text-shadow: 0 3px 0 #052e16, 0 0 18px rgba(74, 222, 128, 0.34);
    }

    .dungeon-intro-copy p {
      color: #d9f99d;
      line-height: 1.55;
      margin: 0;
    }

    .hain-scroll-stage {
      background:
        linear-gradient(180deg, #10203a 0%, #153b35 42%, #1f5a2d 43%, #112313 100%);
      border: 3px solid rgba(187, 247, 208, 0.48);
      border-radius: 8px;
      box-shadow: inset 0 -18px 0 rgba(4, 18, 9, 0.44), 0 22px 60px rgba(0,0,0,0.42);
      height: min(54vh, 440px);
      min-height: 280px;
      overflow: hidden;
      position: relative;
    }

    .hain-scroll-stage::before {
      background:
        repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,0.035) 13px 14px),
        repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,0.035) 13px 14px);
      content: "";
      inset: 0;
      opacity: 0.28;
      pointer-events: none;
      position: absolute;
      z-index: 8;
    }

    .hain-moon {
      background: #d9f99d;
      box-shadow: 0 0 34px rgba(217, 249, 157, 0.58);
      height: 44px;
      position: absolute;
      right: 12%;
      top: 10%;
      width: 44px;
    }

    .hain-track {
      animation: hainForestLoop 11s linear infinite;
      bottom: 54px;
      display: flex;
      left: 0;
      position: absolute;
      width: 200%;
    }

    .hain-track.back {
      animation-duration: 18s;
      bottom: 88px;
      filter: brightness(0.72);
      opacity: 0.72;
    }

    .hain-segment {
      flex: 0 0 50%;
      height: 190px;
      position: relative;
    }

    @keyframes hainForestLoop {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .hain-tree,
    .hain-bush,
    .hain-cactus {
      bottom: 0;
      position: absolute;
    }

    .hain-tree {
      background: #5b3518;
      height: 80px;
      width: 18px;
    }

    .hain-tree::before {
      background: #166534;
      box-shadow:
        -22px 18px 0 #14532d,
        22px 18px 0 #15803d,
        0 36px 0 #166534,
        -14px 52px 0 #14532d,
        16px 54px 0 #15803d;
      content: "";
      height: 42px;
      left: -12px;
      position: absolute;
      top: -48px;
      width: 42px;
    }

    .hain-tree.tall {
      height: 110px;
      width: 22px;
    }

    .hain-tree.tall::before {
      box-shadow:
        -26px 18px 0 #14532d,
        26px 18px 0 #15803d,
        0 42px 0 #166534,
        -18px 62px 0 #14532d,
        18px 64px 0 #15803d;
      height: 50px;
      left: -14px;
      top: -58px;
      width: 50px;
    }

    .hain-bush {
      background: #22c55e;
      box-shadow: -18px 10px 0 #15803d, 18px 8px 0 #16a34a, 4px -8px 0 #4ade80;
      height: 34px;
      width: 48px;
    }

    .hain-cactus {
      background: #65a30d;
      box-shadow: inset 6px 0 0 rgba(255,255,255,0.12);
      height: 74px;
      width: 20px;
    }

    .hain-cactus::before,
    .hain-cactus::after {
      background: #65a30d;
      content: "";
      height: 32px;
      position: absolute;
      top: 24px;
      width: 14px;
    }

    .hain-cactus::before { left: -14px; }
    .hain-cactus::after { right: -14px; top: 16px; }

    /* Stadtpark bei Nacht: Skyline im Hintergrund, Laternen und Bänke */
    .hain-skyline { bottom: 112px; height: 96px; left: 0; opacity: 0.92; position: absolute; width: 100%; }
    .hain-lamp { background: #2b3550; bottom: 0; height: 118px; position: absolute; width: 6px; }
    .hain-lamp::before {
      background: #ffe6a0; border: 2px solid #2b3550; border-radius: 4px 4px 9px 9px;
      box-shadow: 0 0 22px 10px rgba(255, 222, 120, 0.5);
      content: ""; height: 12px; left: -10px; position: absolute; top: -8px; width: 26px;
    }
    .hain-lamp::after {
      background: linear-gradient(180deg, rgba(255, 222, 120, 0.26), transparent);
      clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
      content: ""; height: 112px; left: -34px; position: absolute; top: 6px; width: 74px;
    }
    .hain-bench {
      background:
        linear-gradient(#7a5230, #7a5230) 0 38%/100% 5px no-repeat,
        linear-gradient(#7a5230, #7a5230) 0 6%/100% 4px no-repeat,
        linear-gradient(#2b2118, #2b2118) 5px 100%/5px 14px no-repeat,
        linear-gradient(#2b2118, #2b2118) calc(100% - 5px) 100%/5px 14px no-repeat;
      bottom: 0; height: 30px; position: absolute; width: 50px;
    }

    /* ── Heizkanal-Intro (Pflegemaßnahmen): Betontunnel mit Rohren, Gitterrosten und Dampf ── */
    .dungeon-intro-screen.heizkanal-theme { background: linear-gradient(180deg, #0b0908 0%, #26160e 48%, #0b0908 100%); }
    .dungeon-intro-card.heizkanal-intro .dungeon-intro-copy { background: rgba(14, 10, 8, 0.92); border-color: rgba(148, 163, 184, 0.5); }
    .dungeon-intro-card.heizkanal-intro .dungeon-intro-copy h1 { color: #e2e8f0; text-shadow: 0 3px 0 #3a2410, 0 0 18px rgba(251, 146, 60, 0.5); }
    .dungeon-intro-card.heizkanal-intro .dungeon-intro-copy p { color: #fdba74; }
    .vulkan-scroll-stage.heizkanal-scroll-stage {
      background: linear-gradient(180deg, #0e0b0a 0%, #201510 30%, #3a2012 60%, #8a3c12 100%);
      border-color: rgba(148, 163, 184, 0.5);
      box-shadow: inset 0 -20px 0 rgba(30, 15, 5, 0.55), 0 22px 60px rgba(200, 90, 20, 0.25);
    }
    .vulkan-scroll-stage.heizkanal-scroll-stage::before {
      background:
        repeating-linear-gradient(90deg, transparent 0 90px, rgba(255, 214, 102, 0.6) 90px 102px, transparent 102px 180px),
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(255, 120, 30, 0.05) 11px 12px);
      background-position: 0 16px, 0 0;
      background-repeat: repeat-x, repeat;
      background-size: 100% 6px, auto;
    }
    .heizkanal-scroll-stage .vulkan-lava-floor {
      background:
        radial-gradient(ellipse 90px 14px at 12% 70%, rgba(255, 170, 60, 0.5) 0%, transparent 100%),
        radial-gradient(ellipse 110px 12px at 60% 78%, rgba(255, 170, 60, 0.38) 0%, transparent 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 30px),
        linear-gradient(0deg, #06241d 0%, #0c3a30 55%, transparent 100%);
    }
    .heizkanal-scroll-stage .vulkan-stone::before {
      background: repeating-linear-gradient(90deg, #4b5563 0 7px, #2b3340 7px 10px);
      border-radius: 3px;
      border-top: 4px solid #ffd23c;
      box-shadow: 0 7px 0 #14181f, 0 14px 22px rgba(255, 140, 40, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
    }
    .heizkanal-scroll-stage .vulkan-rock {
      background: linear-gradient(90deg, #3a4452, #8794a6 42%, #3a4452);
      border-radius: 10px 10px 0 0;
      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
    }
    .heizkanal-scroll-stage .vulkan-rock::before {
      background: #2c3441; border-radius: 3px; content: ""; height: 7px; left: -5px; position: absolute; right: -5px; top: 30%;
    }
    .heizkanal-scroll-stage .vulkan-track.back { filter: none; opacity: 0.85; }

    /* ── Kaiju-Alarm (Finale der Pflegeprozess-Kampagne): brennende Skyline, Kaiju-Silhouette, Trümmer-Plattformen ── */
    .dungeon-intro-screen.kaiju-theme { background: linear-gradient(180deg, #12060a 0%, #3b0f1a 50%, #12060a 100%); }
    .dungeon-intro-card.kaiju-intro .dungeon-intro-copy { background: rgba(20, 6, 10, 0.92); border-color: rgba(255, 210, 60, 0.5); }
    .dungeon-intro-card.kaiju-intro .dungeon-intro-copy h1 { color: #ffe08a; text-shadow: 0 3px 0 #7a1f12, 0 0 18px rgba(255, 90, 60, 0.55); }
    .dungeon-intro-card.kaiju-intro .dungeon-intro-copy p { color: #fdba74; }
    .vulkan-scroll-stage.kaiju-scroll-stage {
      background: linear-gradient(180deg, #0d0510 0%, #2a0a1c 34%, #6a1a24 62%, #d4501c 100%);
      border-color: rgba(255, 210, 60, 0.5);
      box-shadow: inset 0 -20px 0 rgba(40, 8, 8, 0.5), 0 22px 60px rgba(220, 60, 30, 0.3);
    }
    .kaiju-scroll-stage .hain-skyline { bottom: 64px; filter: brightness(0.7); height: 130px; opacity: 0.9; }
    .kaiju-intro-boss { bottom: 36px; filter: brightness(0.62); pointer-events: none; position: absolute; right: 3%; transform: scale(1.3); transform-origin: bottom right; z-index: 1; }
    .kaiju-scroll-stage .vulkan-lava-floor {
      background:
        repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 214, 60, 0.55) 40px 70px, transparent 70px 120px) 0 55%/100% 4px no-repeat,
        linear-gradient(0deg, #16121a 0%, #2a242e 70%, transparent 100%);
    }
    .kaiju-scroll-stage .vulkan-stone::before {
      background: linear-gradient(180deg, #5b5560, #2e2a33);
      border-radius: 4px 9px 3px 8px;
      box-shadow: 0 7px 0 #14111a, 0 14px 22px rgba(255, 80, 20, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.12);
    }
    .kaiju-scroll-stage .vulkan-rock { background: #2a2230; border-radius: 3px 3px 0 0; }
    .kaiju-scroll-stage .vulkan-track.back { filter: brightness(0.8); opacity: 0.6; }

    /* Kaiju-Alarm: Dungeon-Raster (Asphalt mit Rissen, Räume = glühende Trümmerfelder) */
    .dg-theme-kaiju_finale {
      --dg-bg: #12060a;
      --dg-floor: #2a1018; --dg-floor2: #200c12;
      --dg-wall-col: #d4501c; --dg-wall-bg: #0e0408;
      --dg-door-col: #ffd23c; --dg-fog: #0a0306;
      --dg-player-ring: #ff9a4a; --dg-accent: #d4501c;
      --dg-tile-corr-a: #3a3340; --dg-tile-corr-b: #4a4352;
      --dg-tile-room-a: #7a2a2a; --dg-tile-room-b: #f0b400;
    }
    .dg-grid.dg-theme-kaiju_finale .dg-cell.dg-is-corridor {
      background-image:
        linear-gradient(115deg, transparent 46%, rgba(0, 0, 0, 0.36) 48% 49.5%, transparent 51%),
        linear-gradient(-72deg, transparent 62%, rgba(0, 0, 0, 0.26) 64% 65%, transparent 67%),
        radial-gradient(circle at 70% 70%, rgba(255, 120, 40, 0.12), transparent 55%);
    }
    .dg-grid.dg-theme-kaiju_finale .dg-cell.dg-is-room {
      background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 140, 60, 0.30), transparent 62%),
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(0, 0, 0, 0.14) 10px 11px);
    }
    .dg-grid.dg-theme-kaiju_finale .dg-cell[style*="border-"]::before {
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1;
    }

    .hain-ground {
      background:
        repeating-linear-gradient(90deg, #173c1b 0 28px, #1f5f28 28px 56px);
      bottom: 0;
      height: 68px;
      left: 0;
      position: absolute;
      right: 0;
    }

    .hain-player {
      bottom: 58px;
      left: 24%;
      position: absolute;
      transform: scale(1.55);
      transform-origin: bottom center;
      z-index: 6;
    }

    .hain-player .pixel-avatar {
      animation: hainWalk 0.62s steps(2, end) infinite;
      transform-origin: bottom center;
    }

    @keyframes hainWalk {
      0%   { transform: translateY(0) scaleX(1) scaleY(1); }
      50%  { transform: translateY(2px) scaleX(1.08) scaleY(0.92); }
      100% { transform: translateY(0) scaleX(1) scaleY(1); }
    }

    .dungeon-intro-actions {
      display: flex;
      justify-content: center;
    }

    /* ── Vulkan-Intro ──────────────────────────────────────────── */
    .dungeon-intro-screen.vulkan-theme {
      background: linear-gradient(180deg, #1a0800 0%, #420d00 44%, #160400 100%);
    }
    .dungeon-intro-card.vulkan-intro .dungeon-intro-copy {
      background: rgba(22, 8, 0, 0.9);
      border-color: rgba(251, 146, 60, 0.45);
    }
    .dungeon-intro-card.vulkan-intro .dungeon-intro-copy h1 {
      color: #fed7aa;
      text-shadow: 0 3px 0 #7c2d12, 0 0 18px rgba(251, 146, 60, 0.45);
    }
    .dungeon-intro-card.vulkan-intro .dungeon-intro-copy p {
      color: #fdba74;
    }

    .vulkan-scroll-stage {
      background: linear-gradient(
        180deg,
        #1c0500 0%, #3a0d00 18%, #651400 38%,
        #b03000 60%, #d84e00 78%, #ff5e00 100%
      );
      border: 3px solid rgba(251, 146, 60, 0.5);
      border-radius: 8px;
      box-shadow: inset 0 -20px 0 rgba(80, 15, 0, 0.5), 0 22px 60px rgba(200, 50, 0, 0.3);
      height: min(54vh, 440px);
      min-height: 280px;
      overflow: hidden;
      position: relative;
    }

    /* heat-shimmer scanlines */
    .vulkan-scroll-stage::before {
      animation: vulkanHeat 2.4s ease-in-out infinite;
      background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(255, 90, 0, 0.05) 11px 12px);
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 9;
    }
    @keyframes vulkanHeat {
      0%, 100% { opacity: 0.35; }
      50%       { opacity: 1; }
    }

    /* scrolling lava track — 8s = 100 % stage in one pass */
    .vulkan-track {
      animation: vulkanLoop 8s linear infinite;
      bottom: 0;
      display: flex;
      height: 110px;
      left: 0;
      position: absolute;
      width: 200%;
      z-index: 3;
    }
    /* slower back track: rock silhouettes */
    .vulkan-track.back {
      animation-duration: 22s;
      bottom: 50px;
      filter: brightness(0.42);
      height: 72px;
      opacity: 0.5;
      z-index: 2;
    }
    .vulkan-segment {
      flex: 0 0 50%;
      height: 100%;
      position: relative;
    }
    @keyframes vulkanLoop {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* lava floor */
    .vulkan-lava-floor {
      animation: lavaPulse 1.6s ease-in-out infinite;
      background:
        radial-gradient(ellipse 90px 22px at 12% 72%, rgba(255,220,0,0.72) 0%, transparent 100%),
        radial-gradient(ellipse 110px 18px at 40% 82%, rgba(255,140,0,0.62) 0%, transparent 100%),
        radial-gradient(ellipse 80px 20px at 68% 74%, rgba(255,180,0,0.66) 0%, transparent 100%),
        radial-gradient(ellipse 100px 16px at 88% 78%, rgba(255,100,0,0.52) 0%, transparent 100%),
        linear-gradient(0deg, #ff4800 0%, #cc2000 45%, #8a1200 82%, transparent 100%);
      bottom: 0;
      height: 80px;
      left: 0;
      position: absolute;
      right: 0;
    }
    @keyframes lavaPulse {
      0%, 100% { opacity: 0.82; }
      50%       { opacity: 1; }
    }

    /* stones: centered via translateX(-50%), at 13/38/63/88 % per segment */
    .vulkan-stone {
      bottom: 56px;
      height: 26px;
      position: absolute;
      transform: translateX(-50%);
      width: 72px;
    }
    .vulkan-stone::before {
      background: linear-gradient(180deg, #3a2618 0%, #211308 100%);
      border-radius: 6px 11px 4px 9px;
      box-shadow:
        0 7px 0 #0f0704,
        0 14px 22px rgba(255, 55, 0, 0.65),
        inset 0 3px 0 rgba(180, 110, 50, 0.22);
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    /* back rock shapes */
    .vulkan-rock {
      background: #3d1a00;
      border-radius: 45% 55% 0 0;
      bottom: 0;
      position: absolute;
      transform: translateX(-50%);
    }

    /* player — bottom = stone-bottom(56) + stone-height(26) + 2px gap */
    .vulkan-player {
      bottom: 84px;
      left: 13%;
      position: absolute;
      transform: translateX(-50%) scale(1.55);
      transform-origin: bottom center;
      z-index: 6;
    }
    /* hop synced to 8s / 4 stones = 2s per stone */
    .vulkan-player .pixel-avatar {
      animation: vulkanHop 2s ease-in-out infinite;
      transform-origin: bottom center;
    }
    @keyframes vulkanHop {
      0%   { transform: translateY(0px)   scaleX(1.14) scaleY(0.86); } /* land on stone */
      5%   { transform: translateY(-5px)  scaleX(0.97) scaleY(1.04); } /* lift-off */
      32%  { transform: translateY(-38px) scaleX(0.87) scaleY(1.14); } /* rising */
      50%  { transform: translateY(-50px) scaleX(0.84) scaleY(1.18); } /* peak */
      70%  { transform: translateY(-26px) scaleX(0.9)  scaleY(1.1);  } /* falling */
      88%  { transform: translateY(-7px)  scaleX(1.06) scaleY(0.94); } /* almost */
      100% { transform: translateY(0px)   scaleX(1.14) scaleY(0.86); } /* land = next stone arrives */
    }

    /* Cavemen, die hinter dem Charakter über die Lava springen (Fiebervulkan-
       Intro) — gleiche Hüpf-Animation wie der Spieler, aber gedimmt, kleiner,
       hinter dem Spieler (z-index 4 < 6) und mit eigener Verzögerung je Figur
       (--hop-delay, inline gesetzt) damit es nicht wie ein synchroner Klon wirkt. */
    .vulkan-caveman {
      bottom: 84px;
      position: absolute;
      transform: translateX(-50%) scale(1.05);
      transform-origin: bottom center;
      filter: brightness(0.75) saturate(0.85);
      z-index: 4;
    }
    .vulkan-caveman .pixel-avatar {
      animation: vulkanHop 2s ease-in-out infinite;
      animation-delay: var(--hop-delay, 0s);
      transform-origin: bottom center;
    }
    @media (prefers-reduced-motion: reduce) {
      .vulkan-caveman .pixel-avatar { animation: none; }
    }

    /* ember particles */
    .vulkan-embers {
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      position: absolute;
      z-index: 5;
    }
    .vulkan-ember {
      background: #ff6600;
      border-radius: 50%;
      bottom: 20px;
      box-shadow: 0 0 5px #ff9900;
      height: 4px;
      opacity: 0;
      position: absolute;
      width: 4px;
    }
    @keyframes emberRise {
      0%   { opacity: 0;   transform: translateY(0)      translateX(0); }
      12%  { opacity: 0.9; }
      78%  { opacity: 0.35; }
      100% { opacity: 0;   transform: translateY(-180px) translateX(var(--drift, 15px)); }
    }

    /* Tutorial-Icon: Buchstapel */
    .book-icon {
      align-items: flex-end;
      display: flex;
      gap: 3px;
      height: 64px;
      justify-content: center;
    }
    .book-icon .book-spine {
      border-radius: 2px 2px 0 0;
      width: 16px;
    }
    .book-icon .book-spine:nth-child(1) { background: #4ade80; height: 54px; }
    .book-icon .book-spine:nth-child(2) { background: #a3e635; height: 44px; }
    .book-icon .book-spine:nth-child(3) { background: #34d399; height: 60px; }
    .book-icon .book-spine:nth-child(4) { background: #86efac; height: 36px; }

    /* Flackern-Animation für Tutorial-Node bis abgeschlossen */
    @keyframes tutorial-flicker {
      0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(74,222,128,0.7)); }
      30%       { opacity: 0.7; filter: drop-shadow(0 0 4px rgba(74,222,128,0.3)); }
      60%       { opacity: 0.9; filter: drop-shadow(0 0 12px rgba(74,222,128,0.9)); }
      80%       { opacity: 0.65; }
    }
        .worldmap-node-tutorial-pending {
      animation: tutorial-flicker 2.4s ease-in-out infinite;
    }
    .worldmap-node-tutorial-pending .worldmap-label {
      border-color: rgba(74,222,128,0.55);
      color: #86efac;
    }

    /* Tutorial-Popup — eigenständiges Overlay, unabhängig von choiceFeedback */
    .tutorial-popup-overlay {
      align-items: center;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px);
      bottom: 0;
      display: flex;
      justify-content: center;
      left: 0;
      padding: 24px 16px;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 9000;
    }
    .tutorial-popup-overlay.is-hidden { display: none; }

    .tutorial-popup-box {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      box-shadow: 0 8px 60px rgba(0,0,0,0.5), 5px 5px 0 var(--cs-ink);
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 400px;
      padding: 24px 22px 20px;
      width: 100%;
      animation: menuPopupPop 0.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .tutorial-popup-title {
      color: var(--cs-crimson);
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: 0.02em;
    }
    .tutorial-popup-body {
      color: var(--cs-ink);
      font-size: 0.85rem;
      line-height: 1.65;
    }
    .tutorial-popup-body p { margin-bottom: 6px; }
    .tutorial-popup-body p:last-child { margin-bottom: 0; }
    .tutorial-popup-body strong { color: var(--cs-crimson); }
    .tutorial-popup-confirm {
      align-self: flex-end;
      appearance: none;
      background: var(--cs-mint);
      border: 2.5px solid var(--cs-ink);
      border-radius: 6px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-paper);
      cursor: pointer;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 0.82rem;
      font-weight: 900;
      padding: 8px 20px;
      transition: transform 120ms, box-shadow 120ms;
    }
    .tutorial-popup-confirm:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--cs-ink); }

    /* ── Hilfefenster ── */
    .help-overlay {
      align-items: center;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px);
      bottom: 0; left: 0; right: 0; top: 0;
      display: flex;
      justify-content: center;
      padding: 16px;
      position: fixed;
      z-index: 8500;
    }
    .help-overlay.is-hidden { display: none; }

    .help-box {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      box-shadow: 0 8px 60px rgba(0,0,0,0.5), 5px 5px 0 var(--cs-ink);
      display: flex;
      flex-direction: column;
      max-height: 88vh;
      max-width: 480px;
      overflow: hidden;
      width: 100%;
      animation: menuPopupPop 0.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
      --action: var(--cs-mint);
    }

    .help-header {
      align-items: center;
      background: var(--cs-crimson);
      border-bottom: 4px solid var(--cs-ink);
      display: flex;
      justify-content: space-between;
      padding: 14px 18px 12px;
      flex-shrink: 0;
    }
    .help-title {
      color: var(--cs-paper);
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: 0.02em;
    }
    .help-close {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 50%;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      font-size: 1rem;
      font-weight: 800;
      height: 32px;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      transition: transform 120ms;
    }
    .help-close:hover { background: var(--cs-crimson); color: var(--cs-paper); transform: translate(-1px,-1px); }

    .help-tabs {
      background: var(--cs-paper);
      border-bottom: 3px solid var(--cs-ink);
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding: 10px 12px;
      flex-shrink: 0;
    }
    .help-tab {
      appearance: none;
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 6px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      font: inherit;
      font-size: 0.72rem;
      font-weight: 800;
      padding: 6px 10px;
      transition: transform 120ms, background 150ms;
      white-space: nowrap;
    }
    .help-tab.active, .help-tab:hover {
      background: var(--cs-gold);
    }
    .help-tab:hover:not(.active) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cs-ink); }

    .help-content {
      color: var(--cs-ink);
      font-size: 0.82rem;
      line-height: 1.65;
      overflow-y: auto;
      padding: 18px;
    }
    .help-content h4 {
      color: var(--cs-crimson);
      font-size: 0.85rem;
      font-weight: 900;
      margin: 14px 0 4px;
    }
    .help-content h4:first-child { margin-top: 0; }
    .help-content p { margin: 0 0 8px; }
    .help-content ul { margin: 0 0 8px; padding-left: 18px; }
    .help-content li { margin-bottom: 4px; }
    .help-content strong { color: var(--cs-ink); }
    .help-content .help-chip {
      background: var(--cs-gold);
      border: 1.5px solid var(--cs-ink);
      border-radius: 4px;
      color: var(--cs-ink);
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 800;
      margin: 2px 2px;
      padding: 2px 7px;
    }

    .help-open-btn {
      background: rgba(15,23,42,0.85);
      border: 1px solid rgba(244,185,66,0.28);
      border-radius: 8px;
      color: var(--gold);
      cursor: pointer;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 7px 14px;
      transition: border-color 0.15s, background 0.15s;
    }
    .help-open-btn:hover {
      background: rgba(244,185,66,0.1);
      border-color: rgba(244,185,66,0.6);
    }

    /* ══════════════════════════════════════════
       HOME SCREEN
    ══════════════════════════════════════════ */
    .home-screen {
      align-items: flex-start;
      display: grid;
      justify-items: center;
      min-height: 100vh;
      padding: 24px 18px 40px;
    }

    .home-wrap {
      display: grid;
      gap: 20px;
      max-width: 860px;
      width: 100%;
    }

    .home-header {
      align-items: center;
      display: flex;
      gap: 14px;
    }

    .home-header {
      background: var(--cs-crimson);
      border: 3px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      padding: 14px 16px;
    }

    .home-header h1 {
      color: var(--cs-paper);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: clamp(1.5rem, 4vw, 2.1rem);
      font-weight: 900;
      margin: 0;
      letter-spacing: 0.01em;
    }

    .home-back-btn {
      appearance: none;
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 7px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 800;
      padding: 7px 14px;
      transition: transform 120ms;
    }
    .home-back-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--cs-ink); }

    .home-tabs {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 640px) {
      .home-tabs { grid-template-columns: repeat(2, 1fr); }
    }

    .home-tab-btn {
      appearance: none;
      background: var(--cs-paper);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font: inherit;
      padding: 16px 10px;
      text-align: center;
      transition: transform 120ms, box-shadow 120ms, background 150ms;
    }
    .home-tab-icon { font-size: 1.8rem; line-height: 1; }
    .home-tab-label { font-size: 0.82rem; font-weight: 900; white-space: nowrap; }
    .home-tab-btn.active {
      background: var(--cs-gold);
      color: var(--cs-ink);
    }
    .home-tab-btn:hover:not(.active) { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cs-ink); }
    .home-tab-btn:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--cs-ink); }

    /* Ein Tab geöffnet = eigener Vollbild-Screen statt Inhalt in einem kleinen
       Bereich unter der Kachel-Auswahl (User-Feedback). Kacheln raus, Zurück-
       Button rein, Panel bekommt die volle Fläche. */
    .home-tab-back-btn {
      display: none;
      appearance: none;
      align-items: center;
      align-self: start;
      background: var(--cs-paper);
      border: 3px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      font: inherit;
      font-size: 0.88rem;
      font-weight: 800;
      gap: 6px;
      padding: 9px 16px;
      transition: transform 120ms, box-shadow 120ms;
    }
    .home-tab-back-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cs-ink); }
    .home-tab-back-btn:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--cs-ink); }
    .home-wrap.tab-open .home-tab-back-btn { display: inline-flex; }
    .home-wrap.tab-open .home-tabs { display: none; }
    .home-wrap:not(.tab-open) .home-tab-panel { display: none; }

    .home-tab-panel {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 0 8px 8px 8px;
      box-shadow: 5px 5px 0 var(--cs-ink);
      padding: 24px;
      /* Re-scope shared tokens so inline styles/JS-authored markup inside
         this panel read dark ink text on the light comic-paper ground
         instead of the site-wide light-on-dark palette. */
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
      --action: var(--cs-mint);
    }

    /* Home Base auf Viewport-Höhe fixieren → nur das Tab-Panel scrollt intern
       (Erfolge/Bestiarium sind lang), die Seite selbst nicht → kein
       Pull-to-Refresh, kein Rausfliegen. Greift auf allen Nicht-Riesen-Screens. */
    @media (max-width: 1100px), (max-height: 900px) {
      .home-screen {
        align-items: stretch;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 12px 12px 14px;
      }
      .home-wrap {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        gap: 12px;
        height: 100%;
        min-height: 0;
      }
      /* Übersicht (nur Kacheln, kein Panel): nicht auf volle Höhe strecken —
         sonst hängt darunter eine leere Fläche. */
      .home-wrap:not(.tab-open) {
        height: auto;
        align-self: start;
      }
      .home-tab-panel {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px;
      }
    }


    /* ── Achievements tab ── */
    .achievement-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .achievement-card {
      align-items: flex-start;
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      display: flex;
      gap: 12px;
      opacity: 0.5;
      padding: 12px 14px;
      transition: opacity 200ms, transform 120ms;
    }
    .achievement-card.earned {
      background: var(--cs-gold);
      border-color: var(--cs-ink);
      box-shadow: 3px 3px 0 var(--cs-ink);
      opacity: 1;
    }
    .achievement-card.earned:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--cs-ink); }

    .achievement-icon {
      font-size: 1.6rem;
      line-height: 1;
      flex-shrink: 0;
    }

    .achievement-info { display: grid; gap: 2px; }
    .achievement-name { color: var(--cs-crimson); font-size: 0.85rem; font-weight: 800; }
    .achievement-desc { color: rgba(36,28,26,0.65); font-size: 0.72rem; line-height: 1.4; }
    .achievement-dungeon { color: rgba(36,28,26,0.5); font-size: 0.68rem; margin-top: 2px; }
    .achievement-card.earned .achievement-name { color: var(--cs-ink); }
    .achievement-card.earned .achievement-desc,
    .achievement-card.earned .achievement-dungeon { color: rgba(36,28,26,0.72); }

    /* Legendäres Gear: eigene Schriftfarbe überall, wo sein Name auftaucht */
    .legendary-name {
      color: var(--cs-gold);
      font-weight: 900;
      text-shadow: 0 0 5px rgba(240,180,0,0.55);
    }

    /* ── Wardrobe tab ── */
    .wardrobe-layout {
      display: grid;
      gap: 24px;
      grid-template-columns: auto 1fr;
    }
    @media (max-width: 580px) { .wardrobe-layout { grid-template-columns: 1fr; } }

    .wardrobe-preview {
      align-items: center;
      background: var(--cs-cobalt);
      border: 2.5px solid var(--cs-ink);
      box-shadow: 3px 3px 0 var(--cs-ink);
      border-radius: 10px;
      display: grid;
      gap: 8px;
      justify-items: center;
      min-width: 120px;
      padding: 20px 16px;
    }
    .wardrobe-preview-name { color: var(--cs-paper); font-size: 0.8rem; font-weight: 700; }

    .wardrobe-options { display: grid; gap: 16px; }

    .wardrobe-row { display: grid; gap: 7px; }
    .wardrobe-row-label { color: rgba(36,28,26,0.62); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    .wardrobe-row-effects {
      border-top: 1px solid rgba(36,28,26,0.16);
      margin-top: 4px;
      padding-top: 12px;
    }
    .wardrobe-row-effects .wardrobe-row-label {
      color: var(--cs-crimson);
    }
    .wardrobe-effects-hint {
      color: rgba(36,28,26,0.55);
      font-size: 0.7rem;
      opacity: 0.85;
    }
    .wardrobe-swatches { display: flex; flex-wrap: wrap; gap: 7px; }

    .wardrobe-swatch {
      align-items: center;
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 6px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      font-size: 0.68rem;
      gap: 4px;
      padding: 5px 8px;
      position: relative;
      transition: transform 120ms, background 150ms;
    }
    .wardrobe-swatch:hover:not(.locked) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cs-ink); }
    .wardrobe-swatch.active { border-color: var(--cs-ink); background: var(--cs-gold); box-shadow: 2px 2px 0 var(--cs-ink); }

    .swatch-dot {
      border: 2px solid rgba(255,255,255,0.28);
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
      height: 24px;
      width: 24px;
    }
    /* White swatch needs extra contrast border */
    [data-wkey="weiss"] .swatch-dot {
      border-color: rgba(0,0,0,0.35);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    }
    .swatch-label { color: rgba(36,28,26,0.65); }
    .wardrobe-swatch.active .swatch-label { color: var(--cs-ink); font-weight: 800; }

    /* locked swatches — visible but blocked */
    .wardrobe-swatch.locked {
      cursor: default;
      opacity: 0.55;
      pointer-events: none;
      position: relative;
    }
    .wardrobe-swatch.locked .swatch-dot {
      filter: grayscale(40%);
    }
    .swatch-lock-overlay {
      font-size: 0.75rem;
      line-height: 1;
      position: absolute;
      right: 3px;
      top: 3px;
    }
    .swatch-unlock-hint {
      color: rgba(224,67,44,0.75);
      font-size: 0.62rem;
      line-height: 1.2;
      margin-top: 1px;
      max-width: 64px;
      text-align: center;
    }

    /* ── Meta-Perks tab ── */
    .meta-perks-intro {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: rgba(36,28,26,0.75);
      font-size: 0.85rem;
      line-height: 1.5;
      margin-bottom: 18px;
      padding: 12px 16px;
    }
    .meta-perks-intro strong { color: var(--cs-crimson); }

    .meta-perk-slots {
      display: flex;
      gap: 10px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    .meta-perk-slot {
      background: var(--cs-paper);
      border: 2.5px dashed var(--cs-ink);
      border-radius: 8px;
      color: rgba(36,28,26,0.5);
      font-size: 0.8rem;
      min-height: 52px;
      min-width: 160px;
      padding: 10px 14px;
      transition: border-color 200ms;
    }
    .meta-perk-slot.filled {
      border-style: solid;
      border-color: var(--cs-ink);
      box-shadow: 3px 3px 0 var(--cs-ink);
      background: var(--cs-gold);
      color: var(--cs-ink);
      font-weight: 700;
    }

    .meta-perks-list { display: grid; gap: 8px; }

    .meta-perk-card {
      align-items: center;
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      cursor: pointer;
      display: flex;
      gap: 12px;
      padding: 11px 14px;
      transition: transform 120ms;
    }
    .meta-perk-card:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--cs-ink); }
    .meta-perk-card.selected {
      background: var(--cs-gold);
      border-color: var(--cs-ink);
    }
    .meta-perk-card.disabled { cursor: default; opacity: 0.5; }
    .meta-perk-card.disabled:hover { transform: none; box-shadow: 3px 3px 0 var(--cs-ink); }

    .meta-perk-check {
      border: 2px solid rgba(36,28,26,0.3);
      border-radius: 4px;
      flex-shrink: 0;
      height: 18px;
      transition: background 150ms, border-color 150ms;
      width: 18px;
    }
    .meta-perk-card.selected .meta-perk-check {
      background: var(--cs-ink);
      border-color: var(--cs-ink);
    }

    .meta-perk-info { flex: 1; }
    .meta-perk-name { color: var(--cs-crimson); font-size: 0.85rem; font-weight: 800; }
    .meta-perk-effect { color: rgba(36,28,26,0.65); font-size: 0.72rem; line-height: 1.4; }
    .meta-perk-card.selected .meta-perk-name,
    .meta-perk-card.selected .meta-perk-effect { color: var(--cs-ink); }

    .meta-perks-empty {
      color: rgba(36,28,26,0.55);
      font-size: 0.88rem;
      padding: 24px;
      text-align: center;
    }

    .creator-card {
      background:
        radial-gradient(circle at top, rgba(244, 185, 66, 0.18), transparent 22rem),
        rgba(8, 13, 24, 0.96);
      border: 2px solid rgba(244, 185, 66, 0.36);
      border-radius: 8px;
      box-shadow: 0 22px 54px rgba(2, 6, 23, 0.42);
      margin: 0 auto;
      max-width: 780px;
      padding: 24px;
      width: min(100%, 780px);
    }

    .creator-card h1 {
      color: #f4d37c;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.8rem, 5vw, 3.4rem);
      margin-bottom: 8px;
      text-shadow: 0 3px 0 #111827, 0 0 18px rgba(244, 185, 66, 0.28);
    }

    .creator-card p {
      color: var(--muted);
      line-height: 1.45;
      margin: 0 0 18px;
    }

    .creator-form {
      display: grid;
      gap: 14px;
    }

    .creator-phase {
      display: grid;
      gap: 14px;
    }

    .creator-phase.is-hidden {
      display: none;
    }

    .creator-top {
      align-items: center;
      background: rgba(90, 169, 230, 0.12);
      border: 1px solid rgba(90, 169, 230, 0.34);
      border-radius: 8px;
      display: grid;
      gap: 12px;
      grid-template-columns: 82px 1fr;
      padding: 12px;
    }

    .creator-top .pixel-avatar {
      transform: scale(1.05);
      transform-origin: center bottom;
    }

    .creator-top strong {
      color: var(--ink);
      display: block;
      margin-bottom: 3px;
    }

    .creator-step {
      color: var(--gold);
      font-size: 0.82rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .creator-form label {
      color: var(--ink);
      display: grid;
      font-weight: 800;
      gap: 7px;
    }

    .creator-form input,
    .creator-form select {
      background: rgba(248, 250, 252, 0.95);
      border: 2px solid rgba(244, 185, 66, 0.3);
      border-radius: 8px;
      color: #111827;
      font: inherit;
      min-height: 46px;
      padding: 10px 12px;
    }

    .creator-preview {
      background: rgba(90, 169, 230, 0.12);
      border: 1px solid rgba(90, 169, 230, 0.34);
      border-radius: 8px;
      color: var(--muted);
      line-height: 1.45;
      padding: 12px;
    }

    .creator-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
    }

    .attribute-builder {
      border: 1px solid rgba(244, 185, 66, 0.32);
      border-radius: 8px;
      display: grid;
      gap: 10px;
      grid-column: 1 / -1;
      margin: 0;
      padding: 12px;
    }

    .attribute-builder legend {
      color: var(--gold);
      font-weight: 900;
      padding: 0 6px;
    }

    .attribute-builder p {
      color: var(--muted);
      grid-column: 1 / -1;
      margin: 0;
    }

    .attribute-row {
      align-items: center;
      background: rgba(248, 250, 252, 0.06);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 10px;
    }

    .attribute-row span {
      color: var(--ink);
      font-weight: 900;
    }

    .attribute-row small {
      color: var(--muted);
      display: block;
      font-weight: 700;
      line-height: 1.35;
      margin-top: 3px;
    }

    .attribute-stepper {
      align-items: center;
      display: flex;
      flex-shrink: 0;
      gap: 6px;
    }

    .attribute-stepper input {
      -moz-appearance: textfield;
      text-align: center;
      width: 48px;
    }
    .attribute-stepper input::-webkit-outer-spin-button,
    .attribute-stepper input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .attr-step-btn {
      appearance: none;
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 7px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      flex-shrink: 0;
      font-size: 1.1rem;
      font-weight: 900;
      height: 34px;
      line-height: 1;
      transition: transform 120ms;
      width: 34px;
    }
    .attr-step-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cs-ink); }
    .attr-step-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--cs-ink); }
    .attr-step-btn:disabled { cursor: not-allowed; opacity: 0.4; box-shadow: 2px 2px 0 var(--cs-ink); transform: none; }

    /* ── Charakter-Ersteller: Schritt-für-Schritt ── */
    .creator-progress {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .creator-progress-dot {
      background: rgba(248, 250, 252, 0.16);
      border: 1px solid var(--line);
      border-radius: 50%;
      height: 12px;
      width: 12px;
    }
    .creator-progress-dot.is-done { background: rgba(244, 185, 66, 0.55); }
    .creator-progress-dot.is-current { background: var(--gold); box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.28); }

    .creator-phase[data-step] {
      background: rgba(248, 250, 252, 0.04);
      border: 1px solid var(--line);
      border-radius: 8px;
      min-height: 300px;
      padding: 16px;
      align-content: start;
    }
    .creator-step-help { color: var(--muted); margin: 0; }
    .creator-hidden-select { display: none; }
    .creator-random-btn { justify-self: start; }

    .class-cards {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .class-card {
      appearance: none;
      background: rgba(248, 250, 252, 0.06);
      border: 2px solid var(--line);
      border-radius: 8px;
      color: var(--ink);
      cursor: pointer;
      display: grid;
      font: inherit;
      gap: 6px;
      padding: 12px;
      text-align: left;
      transition: border-color 120ms, background 120ms;
    }
    .class-card:hover { border-color: rgba(244, 185, 66, 0.6); }
    .class-card.is-selected {
      background: rgba(244, 185, 66, 0.14);
      border-color: var(--gold);
    }
    .class-card-icon { font-size: 1.8rem; line-height: 1; }
    .class-card strong { color: var(--gold); font-size: 1.05rem; }
    .class-card-blurb, .class-card-power { color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
    .class-card-power { color: var(--ink); font-weight: 700; }
    .class-card-tip { color: #8fd3b6; font-size: 0.8rem; font-weight: 800; }

    .attribute-points { color: var(--gold) !important; font-size: 1.1rem; font-weight: 900; }
    .creator-auto-btn { justify-self: start; }
    .creator-auto-hint { color: #8fd3b6 !important; font-weight: 800; min-height: 1.2em; }

    .creator-summary { display: grid; gap: 8px; }
    .creator-summary-row {
      background: rgba(248, 250, 252, 0.06);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      gap: 2px;
      padding: 10px 12px;
    }
    .creator-summary-row span { color: var(--muted); font-size: 0.8rem; font-weight: 800; }

    @media (max-width: 560px) {
      .class-cards { grid-template-columns: 1fr; }
      .creator-phase[data-step] { min-height: 0; }
    }

    .creator-points-hint {
      color: var(--cs-crimson);
      font-size: 0.82rem;
      font-weight: 700;
      margin: 8px 0 0;
      text-align: center;
    }

    .app {
      background: var(--cs-paper);
      border: 4px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 6px 6px 0 var(--cs-ink);
      margin: 18px auto;
      max-width: 1220px;
      padding: 18px;
    }

    .app .topbar h1 {
      color: var(--cs-ink);
    }

    .app .topbar p {
      color: var(--cs-ink);
      opacity: 0.7;
    }

    .app .pill {
      background: #fff8e8;
      border: 2px solid var(--cs-ink);
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
    }

    .app .pill strong {
      color: var(--cs-crimson);
    }

    /* !important: die Screen-Umschaltung (Startscreen / Worldmap / Creator /
       Home / Titelanimation / #gameApp …) läuft ausschließlich über diese Klasse.
       Ohne !important überstimmen die Tablet-/Kampf-Layoutregeln
       (`body… .app { display: flex }`) das Ausblenden — dann scheint z. B. die
       Dungeon-Ansicht unter der Weltkarte durch. */
    .is-hidden {
      display: none !important;
    }

    .topbar {
      align-items: center;
      display: flex;
      gap: 16px;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    h1 {
      font-size: 1.55rem;
      line-height: 1.1;
      margin: 0;
    }

    .topbar p {
      color: var(--muted);
      margin: 4px 0 0;
    }

    .hud {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .pill {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      display: inline-flex;
      gap: 8px;
      min-height: 34px;
      padding: 7px 11px;
    }

    .pill strong {
      color: var(--ink);
    }

    .shell {
      background: #182d44;
      border: 3px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      overflow: hidden;
    }

    .scene {
      aspect-ratio: 16 / 7;
      background:
        linear-gradient(90deg, rgba(60, 80, 100, 0.28), transparent 26%, transparent 74%, rgba(60, 80, 100, 0.28)),
        linear-gradient(180deg, #dceef8 0%, #c2dff0 35%, #90bcd4 36%, #3a6070 100%);
      min-height: 310px;
      overflow: hidden;
      position: relative;
    }

    .scene.screen-shake {
      animation: screenShake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }

    @keyframes screenShake {
      0%, 100% {
        transform: translate(0, 0);
      }
      12% {
        transform: translate(-8px, 2px);
      }
      24% {
        transform: translate(7px, -2px);
      }
      36% {
        transform: translate(-6px, 1px);
      }
      48% {
        transform: translate(5px, 2px);
      }
      60% {
        transform: translate(-4px, -1px);
      }
      72% {
        transform: translate(3px, 1px);
      }
      84% {
        transform: translate(-2px, 0);
      }
    }

    .wall-left,
    .wall-right,
    .ceiling,
    .floor,
    .door,
    .torch,
    .room-visual,
    .scene-card,
    .intent-card,
    .side-door {
      position: absolute;
    }

    .wall-left {
      background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 48px),
        linear-gradient(90deg, rgba(80,100,120,0.18) 0 6px, transparent 6px),
        linear-gradient(115deg, #eef0ec, #c8ccc6 74%);
      clip-path: polygon(0 0, 40% 18%, 40% 82%, 0 100%);
      inset: 0 auto 0 0;
      width: 52%;
    }

    .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 48px),
        linear-gradient(270deg, rgba(80,100,120,0.18) 0 6px, transparent 6px),
        linear-gradient(245deg, #eef0ec, #c8ccc6 74%);
      clip-path: polygon(60% 18%, 100% 0, 100% 100%, 60% 82%);
      inset: 0 0 0 auto;
      width: 52%;
    }

    /* Einkauf-NPC im Shop-Raum */
    .shop-npc-wrap {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%) translateY(90px);
      opacity: 0;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      z-index: 10;
    }
    .shop-npc-wrap.entered {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .shop-euro-badge {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #1c1917;
      font-size: 1.05rem;
      font-weight: 900;
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 10px rgba(251,191,36,0.7), 0 2px 4px rgba(0,0,0,0.4);
      border: 2px solid #fff8;
      line-height: 1;
    }
    .einkauf-pixel {
      --scrub: #f59e0b;
      --pants: #1c1917;
      position: relative;
      transform: scale(1.35) !important;
      transform-origin: bottom center !important;
    }
    .einkauf-pixel .px-body::after {
      content: "";
      position: absolute;
      width: 10px; height: 7px;
      background: #fef3c7;
      border-radius: 2px;
      top: 4px; right: 4px;
      box-shadow: 0 0 0 1px #d97706;
    }
    .einkauf-pixel .px-arm-right::after {
      content: "";
      position: absolute;
      width: 11px; height: 14px;
      background: #fef3c7;
      border: 2px solid #d97706;
      border-radius: 2px;
      bottom: -4px; right: -9px;
    }
    .shop-speech-bubble {
      position: absolute;
      bottom: 110px;
      left: 50%;
      transform-origin: bottom center;
      translate: -50% 0;
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 2.5px solid var(--cs-ink);
      border-radius: 12px 12px 12px 4px;
      padding: 9px 13px;
      max-width: 175px;
      font-size: 0.73rem;
      line-height: 1.45;
      color: var(--cs-ink);
      box-shadow: 3px 3px 0 var(--cs-ink);
      z-index: 20;
      opacity: 0;
      transform: scale(0.85) translateY(6px);
      transform-origin: bottom right;
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }
    .shop-speech-bubble.visible { opacity: 1; transform: scale(1) translateY(0); }
    .shop-speech-bubble strong {
      display: block; font-size: 0.68rem;
      color: var(--cs-crimson); margin-bottom: 3px; letter-spacing: 0.5px;
    }
    .shop-speech-bubble::after {
      content: ""; position: absolute;
      bottom: -10px; left: 50%; translate: -50% 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid rgba(245,158,11,0.6);
    }
    .shop-speech-bubble::before {
      content: ""; position: absolute;
      bottom: -7px; left: 50%; translate: -50% 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 9px solid #1e293b;
      z-index: 1;
    }

    /* ── Shop-Raum ── */
    .scene.room-tile.room-type-shop {
      background:
        linear-gradient(90deg, rgba(120,60,180,0.22), transparent 24%, transparent 76%, rgba(120,60,180,0.22)),
        linear-gradient(180deg, #e8d8f8 0%, #c4a0e8 36%, #7c3aed 37%, #2e1a4a 100%);
    }
    .scene.room-tile.room-type-shop .wall-left,
    .scene.room-tile.room-type-shop .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 48px),
        linear-gradient(115deg, #e8d8f8, #a878d8 74%);
    }

    .shop-counter {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
    }
    .shop-counter-top {
      background: linear-gradient(180deg, #7c3aed, #5b21b6);
      border-radius: 6px 6px 0 0;
      height: 18px;
      width: 120px;
    }
    .shop-counter-front {
      background: linear-gradient(180deg, #4c1d95, #2e1065);
      border-radius: 0 0 4px 4px;
      height: 48px;
      width: 120px;
    }
    .shop-counter-front::before {
      content: "";
      display: block;
      margin: 10px auto 0;
      width: 80px;
      height: 8px;
      background: rgba(167,139,250,0.4);
      border-radius: 4px;
      box-shadow: 0 12px 0 rgba(167,139,250,0.3);
    }
    .shop-sign {
      font-size: 1.8rem;
      line-height: 1;
      position: absolute;
      top: -36px;
      left: 50%;
      transform: translateX(-50%);
      filter: drop-shadow(0 0 6px rgba(167,139,250,0.8));
    }

    /* Shop-Modal */
    .shop-card { max-width: 520px; }
    .shop-score-display { font-size: 0.95rem; color: #a78bfa; margin: 4px 0 12px; }
    .shop-section-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #a78bfa;
      margin: 14px 0 6px;
      border-bottom: 1px solid rgba(167,139,250,0.25);
      padding-bottom: 4px;
    }
    .shop-list { display: flex; flex-direction: column; gap: 4px; }
    .shop-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 6px 8px;
      background: rgba(255,255,255,0.04);
      border-radius: 6px;
    }
    .shop-row-special { background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.3); }
    .shop-item-name { font-size: 0.82rem; font-weight: 600; }
    .shop-item-effect { font-size: 0.72rem; color: #9ca3af; text-align: right; }
    .shop-buy-btn {
      background: #7c3aed;
      border: none;
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 10px;
      white-space: nowrap;
    }
    .shop-buy-btn:hover:not(:disabled) { background: #6d28d9; }
    .shop-cant-afford { background: #374151 !important; color: #6b7280 !important; cursor: not-allowed; }
    .shop-open-btn { background: #7c3aed; color: #fff; width: 100%; margin-top: 4px; }
    .shop-open-btn:hover { background: #6d28d9; }
    .shop-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
    .shop-tab {
      flex: 1; padding: 6px; border: 1px solid rgba(167,139,250,0.3);
      border-radius: 6px; background: transparent; color: #9ca3af;
      cursor: pointer; font-size: 0.82rem; font-weight: 600;
    }
    .shop-tab.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
    .shop-tab-panel.hidden { display: none; }
    .shop-qty { color: #6b7280; font-size: 0.75rem; font-weight: 400; }
    .shop-sell-empty { color: #6b7280; font-size: 0.8rem; text-align: center; padding: 16px 0; }

    /* ── Spezialräume (Modal) ─────────────────────────────────────────────── */
    .special-card { max-width: 480px; }
    .special-card .special-sub { color: var(--muted); font-size: 0.9rem; margin: 2px 0 12px; }
    .special-choice {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .special-opt {
      appearance: none;
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      display: grid;
      gap: 3px;
      padding: 12px 14px;
      text-align: left;
    }
    .special-opt:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--cs-ink); }
    .special-opt:active:not(:disabled) { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--cs-ink); }
    .special-opt:disabled { opacity: 0.5; cursor: not-allowed; }
    .special-opt strong { color: var(--cs-crimson); font-size: 1rem; }
    .special-opt span { color: rgba(36,28,26,0.66); font-size: 0.84rem; }
    .special-opt-icon { font-size: 1.4rem; line-height: 1; }
    .special-choice-quiz .special-opt-quiz { box-shadow: 2px 2px 0 var(--cs-ink); }
    .special-opt-quiz { font-weight: 600; }
    .special-opt-correct { border-color: var(--cs-mint, #28c6a2); box-shadow: inset 0 0 0 2px rgba(40,198,162,0.35), 3px 3px 0 var(--cs-ink); }
    .special-opt-weak { border-color: var(--cs-crimson); box-shadow: inset 0 0 0 2px rgba(224,67,44,0.28), 3px 3px 0 var(--cs-ink); }
    .special-card .combat-question { margin-bottom: 4px; }
    .special-open-btn { background: #7c3aed; color: #fff; width: 100%; margin-top: 4px; }
    .special-open-btn:hover { background: #6d28d9; }

    /* Spezialraum-Marker im Dungeon-Grid */
    .dg-special-obj {
      background: linear-gradient(160deg, #4a2d7a, #2a1a4a) !important;
      border-color: #a97ff0 !important;
      color: #fff;
      box-shadow: 0 0 8px rgba(169,127,240,0.6);
    }
    .dg-special-cleared { filter: grayscale(1); opacity: 0.5; box-shadow: none; }
    .dg-sprite-special {
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      filter: drop-shadow(0 0 5px rgba(169,127,240,0.8));
    }

    @keyframes rainbow-shift {
      0%   { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }
    .rainbow-text { animation: rainbow-shift 3s linear infinite; display: inline-block; }

    /* Vulkanthema: Pflegemaßnahmen Vulkan – rötliche Wände */
    .dungeon-pflegemassnahmen .wall-left {
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 48px),
        linear-gradient(90deg, rgba(120,30,10,0.25) 0 6px, transparent 6px),
        linear-gradient(115deg, #f0d0c0, #c87050 74%);
    }
    .dungeon-pflegemassnahmen .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 48px),
        linear-gradient(270deg, rgba(120,30,10,0.25) 0 6px, transparent 6px),
        linear-gradient(245deg, #f0d0c0, #c87050 74%);
    }

    /* ── Werwolf-Boss-Pixel ─────────────────────────────────────── */
    .werwolf-pixel {
      filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
      transform: scale(1.75) !important;
      transform-origin: bottom center !important;
      animation: werwolfBlitz 1.8s ease-in-out infinite;
    }

    @keyframes werwolfBlitz {
      0%, 100% { filter: drop-shadow(0 0 10px rgba(168,85,247,0.8)); }
      25%       { filter: drop-shadow(0 0 18px rgba(250,204,21,0.95)) drop-shadow(0 -8px 12px rgba(250,204,21,0.7)); }
      50%       { filter: drop-shadow(0 0 10px rgba(168,85,247,0.8)); }
      75%       { filter: drop-shadow(0 0 22px rgba(250,204,21,1))    drop-shadow(0 -14px 16px rgba(250,204,21,0.9)); }
    }

    .werwolf-pixel .px-hair {
      background: var(--hair);
      border-radius: 6px 6px 0 0;
      height: 16px;
      left: 4px;
      width: 46px;
    }

    /* Blitze über dem Werwolf-Kopf via px-hair::before / ::after */
    .werwolf-pixel .px-hair::before,
    .werwolf-pixel .px-hair::after {
      content: "⚡";
      font-size: 10px;
      position: absolute;
      top: -14px;
      animation: blitzZap 1.8s ease-in-out infinite;
    }
    .werwolf-pixel .px-hair::before { left: 4px; animation-delay: 0s; }
    .werwolf-pixel .px-hair::after  { right: 4px; animation-delay: 0.9s; }

    @keyframes blitzZap {
      0%, 40%, 100% { opacity: 0.15; transform: translateY(0)   scale(0.9); }
      20%            { opacity: 1;    transform: translateY(-3px) scale(1.2); }
      60%            { opacity: 1;    transform: translateY(-4px) scale(1.3); }
      80%            { opacity: 0.3;  transform: translateY(-1px) scale(1);   }
    }

    .werwolf-pixel .px-face {
      height: 30px;
      left: 6px;
      width: 42px;
    }
    .werwolf-pixel .px-body {
      height: 30px;
      left: 4px;
      width: 46px;
    }
    .werwolf-pixel .px-arm-left,
    .werwolf-pixel .px-arm-right {
      height: 24px;
      width: 12px;
    }
    /* Zähne / Fangmaul */
    .werwolf-pixel .px-face::after {
      content: "";
      position: absolute;
      width: 22px; height: 8px;
      background: rgba(255,255,255,0.7);
      border-radius: 0 0 6px 6px;
      bottom: 4px; left: 50%;
      transform: translateX(-50%);
      clip-path: polygon(0 0, 20% 100%, 40% 0, 60% 100%, 80% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* ── Komotiu Cerebri Kerker Intro ──────────────────────────────── */
    .dungeon-intro-screen.komotiu-theme {
      background: linear-gradient(180deg, #06020f 0%, #120528 50%, #06020f 100%);
    }
    .dungeon-intro-card.komotiu-intro .dungeon-intro-copy {
      background: rgba(8, 2, 20, 0.92);
      border-color: rgba(147, 51, 234, 0.5);
    }
    .dungeon-intro-card.komotiu-intro .dungeon-intro-copy h1 {
      color: #e9d5ff;
      text-shadow: 0 3px 0 #4c1d95, 0 0 20px rgba(147, 51, 234, 0.6);
    }
    .dungeon-intro-card.komotiu-intro .dungeon-intro-copy p {
      color: #c4b5fd;
    }
    .komotiu-flavor {
      margin-top: 0 !important;
    }
    .komotiu-flavor p {
      font-style: italic;
      text-align: center;
    }

    /* Stage */
    .komotiu-scroll-stage {
      background: linear-gradient(
        180deg,
        #06020f 0%, #0f0520 25%,
        #1a0840 50%, #120528 75%, #06020f 100%
      );
      border: 3px solid rgba(147, 51, 234, 0.55);
      border-radius: 8px;
      box-shadow: inset 0 -20px 0 rgba(20, 0, 50, 0.6), 0 22px 60px rgba(80, 0, 180, 0.3);
      height: min(54vh, 440px);
      min-height: 280px;
      overflow: hidden;
      position: relative;
    }

    /* Lightning flash overlay */
    .komotiu-lightning-layer {
      animation: kotiuFlash 2.7s ease-in-out infinite;
      background:
        radial-gradient(ellipse 60% 40% at 72% 25%, rgba(200, 160, 255, 0.22) 0%, transparent 100%),
        radial-gradient(ellipse 30% 20% at 55% 10%, rgba(250, 230, 255, 0.18) 0%, transparent 100%);
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 10;
    }
    @keyframes kotiuFlash {
      0%, 22%, 26%, 60%, 65%, 100% { opacity: 0; }
      24%                            { opacity: 1; }
      62%                            { opacity: 0.5; }
    }

    /* Scrolling tracks */
    .komotiu-track {
      animation: kotiuScroll 6s linear infinite;
      bottom: 0;
      display: flex;
      height: 72px;
      left: 0;
      position: absolute;
      width: 200%;
      z-index: 3;
    }
    .komotiu-track.back {
      animation-duration: 16s;
      bottom: 60px;
      filter: brightness(0.45);
      height: 100px;
      opacity: 0.6;
      z-index: 1;
    }
    @keyframes kotiuScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Floor segment */
    .kotiu-floor-seg {
      flex: 0 0 50%;
      height: 100%;
      position: relative;
      background: linear-gradient(180deg, #1a0e2e 0%, #0d0820 100%);
    }
    .kotiu-stone {
      background: linear-gradient(180deg, #2a1f3d 0%, #1a1028 100%);
      border: 1px solid rgba(80, 40, 120, 0.4);
      bottom: 0;
      height: 68px;
      position: absolute;
      width: 12.5%;
    }
    .kotiu-stone:nth-child(odd) {
      background: linear-gradient(180deg, #231a35 0%, #160e24 100%);
    }

    /* Wall segment */
    .kotiu-wall-seg {
      flex: 0 0 50%;
      height: 100%;
      position: relative;
      background: linear-gradient(180deg, #0a0516 0%, #150a28 100%);
    }
    .kotiu-brick {
      background: linear-gradient(180deg, #1e1030 0%, #140a22 100%);
      border: 1px solid rgba(60, 20, 100, 0.5);
      bottom: 0;
      height: 90px;
      position: absolute;
      width: 20%;
    }
    .kotiu-torch {
      background: transparent;
      bottom: 40px;
      font-size: 1.4rem;
      line-height: 1;
      position: absolute;
      animation: torchFlicker 0.8s ease-in-out infinite alternate;
    }
    .kotiu-torch::after {
      content: "🕯️";
    }
    @keyframes torchFlicker {
      0%   { filter: brightness(1) drop-shadow(0 0 4px rgba(255,200,80,0.8)); }
      100% { filter: brightness(1.3) drop-shadow(0 0 10px rgba(255,160,40,1)); }
    }

    /* Player */
    .komotiu-player {
      bottom: 62px;
      left: 22%;
      position: absolute;
      transform: scale(1.55);
      transform-origin: bottom center;
      z-index: 6;
    }
    .komotiu-player .pixel-avatar {
      animation: kotiuRun 0.4s steps(2, end) infinite;
      transform-origin: bottom center;
    }
    @keyframes kotiuRun {
      0%   { transform: translateY(0)   scaleX(1)    scaleY(1); }
      50%  { transform: translateY(3px) scaleX(1.1) scaleY(0.9); }
      100% { transform: translateY(0)   scaleX(1)    scaleY(1); }
    }

    /* Werewolf chaser */
    .komotiu-chaser {
      bottom: 58px;
      position: absolute;
      right: 12%;
      transform: scaleX(-1); /* face left = chasing player */
      z-index: 5;
    }
    .komotiu-wolf-wrap {
      animation: kotiuChase 1.6s ease-in-out infinite;
      position: relative;
    }
    @keyframes kotiuChase {
      0%, 100% { transform: translateX(0)   translateY(0); }
      25%       { transform: translateX(6px)  translateY(-5px); }
      50%       { transform: translateX(12px) translateY(0); }
      75%       { transform: translateX(6px)  translateY(-3px); }
    }

    /* Blitze über dem Kopf */
    .komotiu-bolt {
      animation: kotiuBoltZap 1.6s ease-in-out infinite;
      color: #facc15;
      font-size: 1.2rem;
      position: absolute;
      text-shadow: 0 0 8px rgba(250, 204, 21, 0.9);
      top: -22px;
      z-index: 8;
    }
    .komotiu-bolt-left  { left: 4px;  animation-delay: 0s; }
    .komotiu-bolt-right { right: 4px; animation-delay: 0.8s; }
    @keyframes kotiuBoltZap {
      0%, 40%, 100% { opacity: 0.1; transform: translateY(0)   scale(0.8); }
      20%            { opacity: 1;   transform: translateY(-4px) scale(1.3); }
      60%            { opacity: 1;   transform: translateY(-6px) scale(1.4); }
      80%            { opacity: 0.2; transform: translateY(-2px) scale(1);   }
    }

    /* Werwolf im Kampf-View: größer, keine Lauf-Animation */
    .komotiu-wolf-boss {
      animation: kotiuBossPulse 2s ease-in-out infinite;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      transform-origin: center bottom;
    }
    .komotiu-wolf-boss .komotiu-wolf-body {
      transform: scale(2);
      transform-origin: center bottom;
      margin-bottom: 48px;
    }
    @keyframes kotiuBossPulse {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-6px); }
    }

    /* Pixel-Werwolf aus reinem CSS */
    .komotiu-wolf-body {
      position: relative;
      width: 48px;
      height: 76px;
    }
    .komotiu-wolf-ears {
      background: #2d1b4e;
      box-shadow:
        0 0 0 3px #4c1d95,
        -14px 0 0 0 #2d1b4e, -14px 0 0 3px #4c1d95;  /* left ear */
      height: 14px;
      left: 50%;
      position: absolute;
      top: -10px;
      transform: translateX(-50%);
      width: 14px;
    }
    .komotiu-wolf-head {
      background: linear-gradient(180deg, #3b1f5e 0%, #2d1848 100%);
      border: 2px solid #6d28d9;
      border-radius: 8px 8px 4px 4px;
      box-shadow:
        0 0 12px rgba(109,40,217,0.7),
        inset 6px 6px 0 rgba(0,0,0,0.25),
        inset -4px 8px 0 rgba(255,255,255,0.07);
      height: 30px;
      left: 4px;
      position: absolute;
      top: 0;
      width: 40px;
    }
    /* eyes */
    .komotiu-wolf-head::before {
      background: #facc15;
      box-shadow:
        0 0 5px #fbbf24,
        20px 0 0 0 #facc15, 20px 0 0 5px #fbbf24;
      content: "";
      height: 5px;
      left: 7px;
      position: absolute;
      top: 10px;
      width: 5px;
    }
    /* snout */
    .komotiu-wolf-head::after {
      background: #1e0a32;
      border-radius: 4px;
      box-shadow: inset 0 2px 0 rgba(255,255,255,0.15);
      content: "";
      bottom: 4px;
      height: 8px;
      left: 12px;
      position: absolute;
      width: 16px;
    }
    .komotiu-wolf-torso {
      background: linear-gradient(180deg, #4c1d95 0%, #2d1060 100%);
      border: 2px solid #7c3aed;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(109,40,217,0.5);
      height: 32px;
      left: 6px;
      position: absolute;
      top: 32px;
      width: 36px;
    }
    .komotiu-wolf-claws {
      background: #6d28d9;
      box-shadow:
        10px 0 0 0 #6d28d9,
        28px 0 0 0 #6d28d9,
        38px 0 0 0 #6d28d9;
      bottom: 0;
      height: 12px;
      left: 2px;
      position: absolute;
      width: 6px;
    }

    /* ── Schlaganfall-Bot: klobiger Pixel-Roboter mit Antenne ────────────── */
    .apoplex-robot-wrap {
      animation: apoplexRobotIdle 1.8s ease-in-out infinite;
      position: relative;
    }
    .apoplex-robot-boss {
      display: flex;
      justify-content: center;
      margin: 0 auto;
      transform-origin: center bottom;
    }
    .apoplex-robot-boss .apoplex-robot-body {
      transform: scale(2);
      transform-origin: center bottom;
      margin-bottom: 48px;
    }
    @keyframes apoplexRobotIdle {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-4px); }
    }
    .apoplex-robot-body {
      position: relative;
      width: 52px;
      height: 80px;
    }
    .apoplex-robot-antenna {
      background: #94a3b8;
      height: 16px;
      left: 50%;
      position: absolute;
      top: -16px;
      transform: translateX(-50%);
      width: 3px;
    }
    .apoplex-robot-antenna-light {
      animation: apoplexAntennaBlink 1.2s ease-in-out infinite;
      background: #2dd4bf;
      border-radius: 50%;
      box-shadow: 0 0 8px 2px rgba(45,212,191,0.9);
      height: 7px;
      left: 50%;
      position: absolute;
      top: -6px;
      transform: translateX(-50%);
      width: 7px;
    }
    @keyframes apoplexAntennaBlink {
      0%, 100% { opacity: 0.3; }
      50%       { opacity: 1; }
    }
    .apoplex-robot-head {
      background: linear-gradient(180deg, #64748b 0%, #475569 100%);
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      box-shadow:
        0 0 10px rgba(148,163,184,0.6),
        inset 4px 4px 0 rgba(255,255,255,0.12),
        inset -4px -6px 0 rgba(0,0,0,0.25);
      height: 24px;
      left: 8px;
      position: absolute;
      top: 0;
      width: 36px;
    }
    .apoplex-robot-eye {
      background: #2dd4bf;
      border-radius: 2px;
      box-shadow: 0 0 6px rgba(45,212,191,0.9);
      height: 6px;
      position: absolute;
      top: 8px;
      width: 8px;
    }
    .apoplex-robot-eye.left  { left: 6px; }
    .apoplex-robot-eye.right { right: 6px; }
    .apoplex-robot-torso {
      background: linear-gradient(180deg, #475569 0%, #334155 100%);
      border: 2px solid #94a3b8;
      border-radius: 6px;
      box-shadow:
        0 0 10px rgba(100,116,139,0.5),
        inset 0 6px 0 rgba(255,255,255,0.08);
      height: 38px;
      left: 4px;
      position: absolute;
      top: 26px;
      width: 44px;
    }
    .apoplex-robot-arm {
      background: #64748b;
      border: 2px solid #cbd5e1;
      border-radius: 3px;
      height: 26px;
      position: absolute;
      top: 30px;
      width: 8px;
    }
    .apoplex-robot-arm.left  { left: -8px; }
    .apoplex-robot-arm.right { right: -8px; }
    .apoplex-robot-leg {
      background: #334155;
      border: 2px solid #94a3b8;
      border-radius: 2px;
      height: 14px;
      position: absolute;
      top: 66px;
      width: 10px;
    }
    .apoplex-robot-leg.left  { left: 10px; }
    .apoplex-robot-leg.right { right: 10px; }

    /* ── Parkinsonschloss Dungeon Intro ────────────────────────────── */
    .dungeon-intro-screen.parkinsonschloss-theme {
      background: linear-gradient(180deg, #111 0%, #1e1e1e 50%, #111 100%);
    }
    .dungeon-intro-card.parkinson-intro .dungeon-intro-copy {
      background: rgba(15, 15, 15, 0.92);
      border-color: rgba(255, 215, 0, 0.45);
    }
    .dungeon-intro-card.parkinson-intro .dungeon-intro-copy h1 {
      color: #ffd700;
      text-shadow: 0 3px 0 #7a6000, 0 0 20px rgba(255,215,0,0.35);
    }
    .dungeon-intro-card.parkinson-intro .dungeon-intro-copy p {
      color: #d4c07a;
    }
    .parkinson-flavor {
      margin-top: 0 !important;
    }
    .parkinson-flavor p {
      font-style: italic;
      text-align: center;
    }

    /* Asphalt stage */
    .parkinson-scroll-stage {
      background: linear-gradient(180deg, #3a3a3a 0%, #4a4a4a 45%, #585858 70%, #3a3a3a 100%);
      border: 3px solid rgba(255, 215, 0, 0.3);
      border-radius: 8px;
      box-shadow: inset 0 -18px 0 rgba(0,0,0,0.45), 0 22px 60px rgba(0,0,0,0.55);
      height: min(54vh, 440px);
      min-height: 280px;
      overflow: hidden;
      position: relative;
    }

    /* Asphalt floor strip */
    .parkinson-floor {
      background: linear-gradient(180deg, #555 0%, #444 100%);
      border-top: 2px solid #686868;
      bottom: 0;
      height: 52px;
      left: 0;
      position: absolute;
      width: 100%;
    }
    .parkinson-floor::before {
      content: "";
      inset: 0;
      position: absolute;
      background:
        repeating-linear-gradient(90deg, transparent 0px, transparent 38px, rgba(0,0,0,0.18) 38px, rgba(0,0,0,0.18) 39px),
        repeating-linear-gradient(0deg, transparent 0px, transparent 12px, rgba(0,0,0,0.12) 12px, rgba(0,0,0,0.12) 13px);
    }

    /* Diktator standing in background */
    .parkinson-diktator {
      bottom: 50px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      z-index: 4;
    }
    .parkinson-diktator .dopamin-diktator-body {
      transform: scale(2.4);
      transform-origin: center bottom;
      margin-bottom: 58px;
    }
    .parkinson-diktator .dopamin-diktator-wrap {
      animation: parkDiktatorWaddle 1.3s ease-in-out infinite;
    }
    @keyframes parkDiktatorWaddle {
      0%,100% { transform: translateX(0)   rotate(0deg); }
      20%     { transform: translateX(4px)  rotate(2.5deg); }
      40%     { transform: translateX(0)    rotate(0deg); }
      60%     { transform: translateX(-4px) rotate(-2.5deg); }
      80%     { transform: translateX(0)    rotate(0deg); }
    }

    /* Pill parade lane */
    .parkinson-pill-lane {
      bottom: 52px;
      height: 14px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 6;
    }
    .park-pill {
      animation: parkPillMarch 4s linear infinite;
      background: linear-gradient(90deg, #e05050 50%, #f5f5f5 50%);
      border: 1.5px solid #888;
      border-radius: 7px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 5px rgba(0,0,0,0.5);
      height: 13px;
      left: 0;
      position: absolute;
      top: 0;
      width: 28px;
    }
    @keyframes parkPillMarch {
      0%   { transform: translateX(-50px)  translateY(0); }
      25%  { transform: translateX(120px)  translateY(-5px); }
      50%  { transform: translateX(280px)  translateY(0); }
      75%  { transform: translateX(430px)  translateY(-5px); }
      100% { transform: translateX(600px)  translateY(0); }
    }

    /* ── Demenz-Kampagne Dungeon Intro ────────────────────────────── */
    .dungeon-intro-screen.demenz-theme {
      background: linear-gradient(180deg, #0e1118 0%, #151a26 50%, #0e1118 100%);
    }
    .dungeon-intro-card.demenz-intro .dungeon-intro-copy {
      border-color: rgba(148,163,184,0.35);
    }
    .dungeon-intro-card.demenz-intro .dungeon-intro-copy h1 {
      color: #cbd5e1;
      text-shadow: 0 0 20px rgba(148,163,184,0.3);
    }
    .dungeon-intro-card.demenz-intro .dungeon-intro-copy p {
      color: #94a3b8;
    }
    .demenz-flavor p { font-style: italic; text-align: center; }

    .demenz-scroll-stage {
      background: linear-gradient(180deg, #0f1520 0%, #1a2035 60%, #0f1520 100%);
      border: 2px solid rgba(100,116,139,0.3);
      border-radius: 8px;
      height: min(40vh, 200px);
      min-height: 140px;
      overflow: hidden;
      position: relative;
    }
    .demenz-stage-kitwood { background: linear-gradient(180deg, #150d20 0%, #1f1030 60%, #150d20 100%); border-color: rgba(251,191,36,0.25); }
    .demenz-stage-standard { background: linear-gradient(180deg, #0a1a10 0%, #0f2018 60%, #0a1a10 100%); border-color: rgba(52,211,153,0.25); }

    .demenz-fog {
      animation: demenzFogDrift 8s ease-in-out infinite;
      background: radial-gradient(ellipse 180px 60px at 50% 50%, rgba(148,163,184,0.18) 0%, transparent 70%);
      height: 100%;
      left: -20%;
      position: absolute;
      top: 0;
      width: 140%;
    }
    .demenz-fog-2 { animation-delay: -3s; animation-duration: 11s; opacity: 0.7; top: 20%; }
    .demenz-fog-3 { animation-delay: -6s; animation-duration: 9s;  opacity: 0.5; top: 40%; }
    .demenz-fog-comm { background: radial-gradient(ellipse 180px 60px at 50% 50%, rgba(167,139,250,0.15) 0%, transparent 70%); }
    @keyframes demenzFogDrift {
      0%,100% { transform: translateX(0) scaleX(1); }
      50%      { transform: translateX(8%) scaleX(1.08); }
    }

    .demenz-hearts {
      display: flex;
      height: 100%;
      position: relative;
      width: 100%;
    }
    .demenz-heart {
      animation: demenzHeartFloat 3s ease-in-out infinite;
      font-size: 1.4rem;
      opacity: 0.7;
      position: absolute;
      bottom: 20%;
    }
    @keyframes demenzHeartFloat {
      0%,100% { transform: translateY(0); opacity: 0.7; }
      50%      { transform: translateY(-18px); opacity: 1; }
    }

    .demenz-charts {
      align-items: flex-end;
      bottom: 10%;
      display: flex;
      gap: 12%;
      height: 70%;
      left: 10%;
      position: absolute;
      width: 80%;
    }
    .demenz-chart-bar {
      animation: demenzBarGrow 1.6s ease-out both;
      background: linear-gradient(180deg, #34d399 0%, #059669 100%);
      border-radius: 3px 3px 0 0;
      flex: 1;
      min-height: 10%;
      opacity: 0.75;
    }
    @keyframes demenzBarGrow {
      from { transform: scaleY(0); transform-origin: bottom; }
      to   { transform: scaleY(1); transform-origin: bottom; }
    }

    /* ── Die Leere Dungeon-Intro: Spieler kreist um schwarzes Loch ── */
    .dungeon-intro-screen.leere-intro-theme {
      background: radial-gradient(ellipse at 50% 50%, #0d0018 0%, #000008 60%, #000000 100%);
    }
    .dungeon-intro-card.leere-intro .dungeon-intro-copy {
      background: rgba(5, 0, 20, 0.92);
      border-color: rgba(168, 85, 247, 0.4);
    }
    .dungeon-intro-card.leere-intro .dungeon-intro-copy h1 {
      color: #e9d5ff;
      text-shadow: 0 0 20px rgba(168,85,247,0.6);
    }
    .dungeon-intro-card.leere-intro .dungeon-intro-copy p { color: #c4b5fd; }
    .leere-orbit-stage {
      position: relative;
      height: 180px;
      overflow: hidden;
      border-radius: 12px;
    }
    .leere-space-bg {
      position: absolute;
      inset: 0;
      background: #000010;
    }
    .leere-star {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      animation: leereTwinkle 2s ease-in-out infinite alternate;
    }
    @keyframes leereTwinkle {
      from { opacity: 0.2; }
      to   { opacity: 0.9; }
    }
    .leere-hole-wrap {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
    }
    .leere-hole-core {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, #000 50%, #1a003a 80%, transparent 100%);
      z-index: 2;
    }
    .leere-hole-glow {
      position: absolute;
      inset: -20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(139,0,255,0.5) 0%, rgba(80,0,180,0.2) 50%, transparent 70%);
      animation: leereGlowPulse 2.2s ease-in-out infinite;
      z-index: 1;
    }
    @keyframes leereGlowPulse {
      0%,100% { transform: scale(1); opacity: 0.7; }
      50%      { transform: scale(1.15); opacity: 1; }
    }
    .leere-hole-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(180,100,255,0.5);
      z-index: 3;
    }
    .leere-hole-ring.r1 { inset: -12px; animation: leereRingSpin 3s linear infinite; }
    .leere-hole-ring.r2 { inset: -22px; animation: leereRingSpin 5s linear infinite reverse; opacity: 0.4; }
    @keyframes leereRingSpin {
      from { transform: rotate(0deg) scaleX(1) scaleY(0.35); }
      to   { transform: rotate(360deg) scaleX(1) scaleY(0.35); }
    }
    .leere-orbit-arm {
      position: absolute;
      top: 50%; left: 50%;
      width: 0; height: 0;
      animation: leereOrbitArm 4s linear infinite;
      transform-origin: 0 0;
      z-index: 4;
    }
    @keyframes leereOrbitArm {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .leere-orbiting-player {
      position: absolute;
      top: -22px;
      left: 68px;
      transform: scale(0.6);
      filter: drop-shadow(0 0 6px rgba(200,100,255,0.8));
      animation: leerePlayerTilt 4s linear infinite;
    }
    @keyframes leerePlayerTilt {
      0%   { transform: scale(0.6) rotate(0deg); }
      25%  { transform: scale(0.6) rotate(-90deg); }
      50%  { transform: scale(0.6) rotate(-180deg); }
      75%  { transform: scale(0.6) rotate(-270deg); }
      100% { transform: scale(0.6) rotate(-360deg); }
    }

    /* ── Die Liebe Dungeon-Intro: Großes Herz mit Regenbogen ────────── */
    .dungeon-intro-screen.liebe-intro-theme {
      background: radial-gradient(ellipse at 50% 40%, #3d0030 0%, #1a0010 50%, #0d0008 100%);
    }
    .dungeon-intro-card.liebe-intro .dungeon-intro-copy {
      background: rgba(30, 0, 20, 0.9);
      border-color: rgba(251,182,206,0.4);
    }
    .dungeon-intro-card.liebe-intro .dungeon-intro-copy h1 {
      color: #fce7f3;
      text-shadow: 0 0 24px rgba(244,114,182,0.7);
    }
    .dungeon-intro-card.liebe-intro .dungeon-intro-copy p { color: #fbcfe8; }
    .liebe-intro-stage {
      position: relative;
      height: 200px;
      overflow: hidden;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .liebe-bg-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(244,63,94,0.18) 0%, transparent 70%);
      animation: liebeBgBreath 3s ease-in-out infinite;
    }
    @keyframes liebeBgBreath {
      0%,100% { opacity: 0.6; }
      50%      { opacity: 1; }
    }
    .liebe-big-heart-wrap {
      position: relative;
      width: 120px; height: 120px;
      z-index: 2;
      animation: liebeBigHeartbeat 1.4s ease-in-out infinite;
    }
    @keyframes liebeBigHeartbeat {
      0%,100% { transform: scale(1); }
      14%      { transform: scale(1.12); }
      28%      { transform: scale(1); }
      42%      { transform: scale(1.07); }
    }
    .liebe-big-rainbow-ring {
      position: absolute;
      inset: -18px;
      border-radius: 50%;
      background: conic-gradient(
        #ff4dc4 0%, #ff9933 14%, #ffee33 28%,
        #33ee66 42%, #33aaff 56%, #9933ff 70%,
        #ff4dc4 100%
      );
      animation: liebeBigRainbow 3s linear infinite;
      mask: radial-gradient(circle, transparent 55%, black 56%);
      -webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
    }
    @keyframes liebeBigRainbow {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .liebe-big-heart {
      position: absolute;
      inset: 0;
    }
    .liebe-big-heart .die-liebe-heart-left,
    .liebe-big-heart .die-liebe-heart-right {
      width: 60px;
      height: 60px;
    }
    .liebe-big-heart .die-liebe-heart-left  { top: 10px; left: 0px; }
    .liebe-big-heart .die-liebe-heart-right { top: 10px; right: 0px; }
    .liebe-big-pulse {
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 2px solid rgba(244,114,182,0.5);
      animation: liebeBigPulseRing 2.4s ease-out infinite;
    }
    .liebe-big-pulse.r2 { animation-delay: 0.8s; border-color: rgba(251,207,232,0.4); }
    .liebe-big-pulse.r3 { animation-delay: 1.6s; border-color: rgba(196,181,253,0.4); }
    @keyframes liebeBigPulseRing {
      0%   { transform: scale(1); opacity: 0.9; }
      100% { transform: scale(2.2); opacity: 0; }
    }
    .liebe-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .liebe-particle {
      position: absolute;
      bottom: 0;
      font-size: 18px;
      animation: liebieParticleFloat linear infinite;
    }
    @keyframes liebieParticleFloat {
      0%   { transform: translateY(0) scale(0.5); opacity: 0; }
      20%  { opacity: 1; }
      80%  { opacity: 0.8; }
      100% { transform: translateY(-180px) scale(1); opacity: 0; }
    }

    /* ── Validator-Chase Dungeon-Intro: Verfolgung vor Stadtkulisse ── */
    .dungeon-intro-screen.validator-chase-theme {
      background: linear-gradient(180deg, #0a0a1a 0%, #0f0f28 50%, #050510 100%);
    }
    .dungeon-intro-card.validator-chase-intro .dungeon-intro-copy {
      background: rgba(5, 5, 20, 0.92);
      border-color: rgba(239,68,68,0.4);
    }
    .dungeon-intro-card.validator-chase-intro .dungeon-intro-copy h1 {
      color: #fecaca;
      text-shadow: 0 0 18px rgba(239,68,68,0.5);
    }
    .dungeon-intro-card.validator-chase-intro .dungeon-intro-copy p { color: #fca5a5; }
    .validator-chase-stage {
      position: relative;
      height: 170px;
      overflow: hidden;
      border-radius: 12px;
      background: linear-gradient(180deg, #080818 0%, #0c0c22 40%, #141428 100%);
    }
    .vchase-sky {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, #05051a 0%, #0a0a28 60%, #0f1030 100%);
    }
    .vchase-city-layer {
      position: absolute;
      bottom: 28px;
      left: 0; right: 0;
      animation: vchaseCityScroll 8s linear infinite;
    }
    @keyframes vchaseCityScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .vchase-building {
      position: absolute;
      bottom: 0;
      background: #1a1a3a;
      border-top: 2px solid #2a2a5a;
      box-shadow: inset -2px 0 0 rgba(0,0,150,0.3);
    }
    .vchase-building::before {
      content: '';
      position: absolute;
      top: 6px; left: 4px; right: 4px;
      height: 3px;
      background: rgba(239,200,68,0.3);
      box-shadow: 0 8px 0 rgba(239,200,68,0.2), 0 16px 0 rgba(239,200,68,0.2);
    }
    .vchase-ground {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 28px;
      background: linear-gradient(180deg, #1c1c3a 0%, #0f0f22 100%);
      border-top: 2px solid #2a2a5a;
    }
    .vchase-player {
      position: absolute;
      bottom: 28px;
      left: 28%;
      transform: scale(0.7) scaleX(-1);
      filter: drop-shadow(0 0 4px rgba(100,200,255,0.5));
      animation: vchaseRun 0.5s steps(2) infinite;
      z-index: 3;
    }
    @keyframes vchaseRun {
      0%,100% { bottom: 28px; }
      50%      { bottom: 31px; }
    }
    .vchase-validator {
      position: absolute;
      bottom: 26px;
      right: 8%;
      z-index: 4;
      animation: vchaseValidatorStalk 1.4s ease-in-out infinite;
      filter: drop-shadow(0 0 8px rgba(239,68,68,0.6));
    }
    @keyframes vchaseValidatorStalk {
      0%,100% { transform: translateX(0) scaleX(-1); }
      50%      { transform: translateX(-8px) scaleX(-1); }
    }

    /* ── Die Leere Boss-Pixel: Schwarzes Loch mit Brille ─────────── */
    @keyframes dieLeerePull {
      0%   { transform: scale(1) rotate(0deg); }
      50%  { transform: scale(1.04) rotate(2deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
    @keyframes dieLeerePulsieren {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.9), 0 0 30px 12px rgba(80,0,120,0.45); }
      50%       { box-shadow: 0 0 0 8px rgba(0,0,0,0.4), 0 0 50px 24px rgba(100,0,160,0.6); }
    }
    @keyframes dieLeereSog {
      0%   { transform: rotate(0deg); opacity: 0.5; }
      100% { transform: rotate(360deg); opacity: 0.5; }
    }
    @keyframes dieLeereSog2 {
      0%   { transform: rotate(0deg); opacity: 0.3; }
      100% { transform: rotate(-360deg); opacity: 0.3; }
    }
    .die-leere-wrap {
      animation: dieLeerePull 3.5s ease-in-out infinite;
      position: relative;
      width: 90px;
      height: 90px;
    }
    .die-leere-body {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Äußere Sogring-Ringe */
    .die-leere-ring {
      position: absolute;
      border-radius: 50%;
      border-style: solid;
      border-color: transparent;
      pointer-events: none;
    }
    .die-leere-ring.r1 {
      width: 86px; height: 86px;
      border-top-color: rgba(120, 0, 200, 0.55);
      border-right-color: rgba(80, 0, 140, 0.35);
      animation: dieLeereSog 4s linear infinite;
    }
    .die-leere-ring.r2 {
      width: 70px; height: 70px;
      border-top-color: rgba(160, 0, 255, 0.4);
      border-left-color: rgba(100, 0, 180, 0.25);
      animation: dieLeereSog2 2.8s linear infinite;
    }
    /* Das schwarze Loch selbst */
    .die-leere-hole {
      position: absolute;
      width: 52px; height: 52px;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 38%, #1a0030 0%, #000000 60%);
      animation: dieLeerePulsieren 2.8s ease-in-out infinite;
      z-index: 2;
    }
    /* Brillengestell — liegt über dem Loch */
    .die-leere-glasses {
      position: absolute;
      z-index: 3;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .die-leere-lens {
      width: 14px; height: 10px;
      border-radius: 3px;
      border: 2px solid rgba(200, 180, 255, 0.85);
      background: rgba(100, 0, 180, 0.18);
    }
    .die-leere-bridge {
      width: 5px; height: 2px;
      background: rgba(200, 180, 255, 0.7);
      border-radius: 1px;
      margin-bottom: 4px;
    }
    .die-leere-temple {
      width: 7px; height: 2px;
      background: rgba(200, 180, 255, 0.55);
      border-radius: 1px;
      margin-bottom: 4px;
    }
    .die-leere-temple.left  { margin-right: -3px; }
    .die-leere-temple.right { margin-left: -3px; }

    /* ── Die Liebe Boss: Großes Herz mit Regenbogen-Rahmen ──────── */
    @keyframes dieLiebeHeartbeat {
      0%, 100% { transform: scale(1); }
      14%       { transform: scale(1.12); }
      28%       { transform: scale(1.04); }
      42%       { transform: scale(1.10); }
    }
    @keyframes dieLiebeRainbow {
      0%   { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }
    @keyframes dieLiebePulseRing {
      0%   { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
      100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
    }
    .die-liebe-wrap {
      position: relative;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Regenbogen-Rahmen — rotierender Kreis mit conic-gradient */
    .die-liebe-rainbow-ring {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: conic-gradient(
        #ff0000, #ff7700, #ffff00, #00ff00,
        #00ffff, #0000ff, #ff00ff, #ff0000
      );
      animation: dieLiebeRainbow 2s linear infinite;
      z-index: 0;
    }
    .die-liebe-rainbow-ring::after {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      background: var(--bg, #1a1a2e);
    }
    /* Herz-Container */
    .die-liebe-heart {
      position: relative;
      z-index: 2;
      width: 72px;
      height: 66px;
      animation: dieLiebeHeartbeat 1.2s ease-in-out infinite,
                 dieLiebeRainbow 3s linear infinite;
    }
    /* Herz aus zwei rotierten Rechtecken mit Halbkreis oben */
    .die-liebe-heart-left,
    .die-liebe-heart-right {
      position: absolute;
      width: 36px;
      height: 54px;
      background: #ff2d78;
      border-radius: 18px 18px 0 0;
    }
    .die-liebe-heart-left {
      left: 0; top: 0;
      transform-origin: bottom right;
      transform: rotate(-45deg);
      background: linear-gradient(135deg, #ff6ec7, #ff2d78);
    }
    .die-liebe-heart-right {
      right: 0; top: 0;
      transform-origin: bottom left;
      transform: rotate(45deg);
      background: linear-gradient(225deg, #ff6ec7, #ff2d78);
    }
    /* Pulsierende Ringe */
    .die-liebe-pulse-ring {
      position: absolute;
      top: 50%; left: 50%;
      width: 80px; height: 80px;
      border-radius: 50%;
      border: 3px solid rgba(255, 100, 180, 0.6);
      animation: dieLiebePulseRing 2.4s ease-out infinite;
      z-index: 1;
    }
    .die-liebe-pulse-ring.r2 { animation-delay: 0.8s; border-color: rgba(255, 200, 100, 0.5); }
    .die-liebe-pulse-ring.r3 { animation-delay: 1.6s; border-color: rgba(100, 200, 255, 0.5); }

    /* ── Der Validator Boss-Pixel: Terminator mit Sonnenbrille ───── */
    @keyframes validatorIdle {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-4px); }
    }
    @keyframes validatorGlint {
      0%, 85%, 100% { opacity: 1; }
      90%            { opacity: 0.4; }
      95%            { opacity: 1; }
    }
    .validator-wrap {
      animation: validatorIdle 2.8s ease-in-out infinite;
      position: relative;
      width: 72px;
      height: 128px;
    }
    .validator-body {
      position: relative;
      width: 100%;
      height: 100%;
    }
    /* Kopf — kantig */
    .validator-head {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 34px; height: 32px;
      background: #2a2420;
      border-radius: 3px 3px 2px 2px;
    }
    /* Haare — kurz, dunkel */
    .validator-hair {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 34px; height: 10px;
      background: #111;
      border-radius: 3px 3px 0 0;
    }
    /* Sonnenbrille — ein Stück, zwei Gläser */
    .validator-shades {
      position: absolute;
      top: 11px; left: 50%;
      transform: translateX(-50%);
      width: 32px; height: 9px;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .validator-lens {
      width: 13px; height: 9px;
      border-radius: 2px;
      background: #e8000a;
      animation: validatorGlint 3.5s ease-in-out infinite;
      box-shadow: 0 0 4px 1px rgba(232,0,10,0.7);
    }
    .validator-nose-bridge {
      width: 4px; height: 3px;
      background: #555;
      border-radius: 1px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    /* Kiefer / Mund */
    .validator-jaw {
      position: absolute;
      top: 22px; left: 50%;
      transform: translateX(-50%);
      width: 28px; height: 10px;
      background: #1e1a16;
      border-radius: 1px 1px 4px 4px;
    }
    /* Hals */
    .validator-neck {
      position: absolute;
      top: 32px; left: 50%;
      transform: translateX(-50%);
      width: 16px; height: 8px;
      background: #2a2420;
    }
    /* Lederjacke — Torso */
    .validator-torso {
      position: absolute;
      top: 38px; left: 50%;
      transform: translateX(-50%);
      width: 52px; height: 52px;
      background: #111;
      border-radius: 2px 2px 0 0;
    }
    /* Revers links */
    .validator-lapel {
      position: absolute;
      top: 38px;
      width: 12px; height: 30px;
      background: #222;
      border-right: 2px solid #333;
    }
    .validator-lapel.left  { left: calc(50% - 26px); transform: skewY(6deg); border-radius: 0 0 0 2px; }
    .validator-lapel.right { left: calc(50% + 14px); transform: skewY(-6deg); border-radius: 0 0 2px 0; }
    /* Schultern — breit */
    .validator-shoulder {
      position: absolute;
      top: 36px;
      width: 14px; height: 14px;
      background: #111;
      border-radius: 50% 50% 0 0;
    }
    .validator-shoulder.left  { left: calc(50% - 32px); }
    .validator-shoulder.right { left: calc(50% + 18px); }
    /* Arme */
    .validator-arm {
      position: absolute;
      top: 48px;
      width: 14px; height: 42px;
      background: #111;
      border-radius: 3px;
    }
    .validator-arm.left  { left: calc(50% - 34px); transform: rotate(-4deg); }
    .validator-arm.right { left: calc(50% + 20px); transform: rotate(4deg); }
    /* Hände */
    .validator-hand {
      position: absolute;
      top: 88px;
      width: 12px; height: 10px;
      background: #2a2420;
      border-radius: 2px;
    }
    .validator-hand.left  { left: calc(50% - 33px); }
    .validator-hand.right { left: calc(50% + 21px); }
    /* Klemmbrett */
    .validator-clipboard {
      position: absolute;
      top: 62px; left: calc(50% + 20px);
      width: 18px; height: 24px;
      background: #c8a96e;
      border-radius: 2px;
      border: 1px solid #8a6a30;
    }
    .validator-clipboard::before {
      content: "";
      position: absolute;
      top: -4px; left: 50%;
      transform: translateX(-50%);
      width: 8px; height: 5px;
      background: #555;
      border-radius: 2px 2px 0 0;
    }
    .validator-clipboard::after {
      content: "";
      position: absolute;
      top: 5px; left: 3px;
      width: 12px; height: 2px;
      background: rgba(0,0,0,0.25);
      box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 0 rgba(0,0,0,0.15);
    }
    /* Beine */
    .validator-leg {
      position: absolute;
      top: 88px;
      width: 18px; height: 40px;
      background: #1a1a2e;
      border-radius: 2px;
    }
    .validator-leg.left  { left: calc(50% - 22px); }
    .validator-leg.right { left: calc(50% + 4px); }

    /* ── Mumie des Standards: Boss-Sprite + Dungeon-Intro ──────────── */
    @keyframes mumieFloat {
      0%,100% { transform: translateY(0px); }
      50%      { transform: translateY(-5px); }
    }
    @keyframes mumieEyeGlow {
      0%,100% { box-shadow: 0 0 6px 2px #e8b400, 0 0 12px #e8b400; opacity: 1; }
      50%      { box-shadow: 0 0 14px 4px #ffdd00, 0 0 24px #ffdd00; opacity: 0.7; }
    }
    @keyframes mumieTrailDrift {
      0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.7; }
      100% { transform: translateY(-30px) translateX(8px) rotate(15deg); opacity: 0; }
    }
    @keyframes mumieArmRaise {
      0%,100% { transform: rotate(20deg); }
      50%      { transform: rotate(35deg); }
    }
    @keyframes mumieAwaken {
      0%   { transform: translateY(40px) scale(0.7); opacity: 0; }
      60%  { transform: translateY(-4px) scale(1.05); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    .mumie-wrap {
      animation: mumieFloat 3.2s ease-in-out infinite;
      position: relative;
      width: 90px;
      height: 140px;
      margin: 0 auto;
    }
    .mumie-boss { display: flex; justify-content: center; align-items: center; }
    .mumie-glow {
      position: absolute;
      inset: -16px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(220,170,30,0.3) 0%, transparent 70%);
      animation: mumieEyeGlow 2.8s ease-in-out infinite;
      z-index: 0;
    }
    .mumie-body { position: relative; width: 100%; height: 100%; z-index: 1; }
    .mumie-head {
      position: absolute;
      left: 50%; top: 0;
      transform: translateX(-50%);
      width: 38px; height: 40px;
      background: #d4b896;
      border-radius: 50% 50% 40% 40%;
      border: 2px solid #a88060;
    }
    .mumie-bandage {
      position: absolute;
      background: #e8d5b0;
      border-radius: 3px;
      opacity: 0.85;
    }
    .mumie-bandage.bh1 { top: 6px; left: -2px; right: -2px; height: 5px; transform: rotate(-4deg); }
    .mumie-bandage.bh2 { top: 16px; left: -2px; right: -2px; height: 5px; transform: rotate(3deg); }
    .mumie-eye {
      position: absolute;
      top: 22px;
      width: 8px; height: 8px;
      background: #e8b400;
      border-radius: 50%;
      animation: mumieEyeGlow 2.8s ease-in-out infinite;
    }
    .mumie-eye.left  { left: 6px; }
    .mumie-eye.right { right: 6px; }
    .mumie-neck {
      position: absolute;
      left: 50%; top: 38px;
      transform: translateX(-50%);
      width: 16px; height: 10px;
      background: #c4a880;
    }
    .mumie-torso {
      position: absolute;
      left: 50%; top: 46px;
      transform: translateX(-50%);
      width: 52px; height: 52px;
      background: #c8aa80;
      border-radius: 6px;
      border: 2px solid #a08060;
    }
    .mumie-bandage.bt1 { top: 4px;  left: -2px; right: -2px; height: 6px; transform: rotate(-2deg); }
    .mumie-bandage.bt2 { top: 16px; left: -2px; right: -2px; height: 6px; transform: rotate(2deg); }
    .mumie-bandage.bt3 { top: 28px; left: -2px; right: -2px; height: 6px; transform: rotate(-1deg); }
    .mumie-scroll {
      position: absolute;
      bottom: 6px; right: 6px;
      width: 16px; height: 20px;
      background: #f5e8c0;
      border-radius: 2px;
      border: 1px solid #c8a040;
    }
    .mumie-scroll::before {
      content: '';
      position: absolute;
      top: 3px; left: 2px; right: 2px;
      height: 2px;
      background: #a08030;
      box-shadow: 0 4px 0 #a08030, 0 8px 0 #a08030;
    }
    .mumie-arm {
      position: absolute;
      top: 50px;
      width: 12px; height: 40px;
      background: #c8aa80;
      border-radius: 6px;
      border: 1px solid #a08060;
    }
    .mumie-arm.left  { left: 8px;  animation: mumieArmRaise 3s ease-in-out infinite; transform-origin: top center; }
    .mumie-arm.right { right: 8px; animation: mumieArmRaise 3s ease-in-out infinite 1.5s; transform-origin: top center; }
    .mumie-bandage.ba1 { top: 10px; left: -2px; right: -2px; height: 4px; }
    .mumie-bandage.ba2 { top: 10px; left: -2px; right: -2px; height: 4px; }
    .mumie-hand {
      position: absolute;
      top: 86px;
      width: 14px; height: 14px;
      background: #b89870;
      border-radius: 4px;
      border: 1px solid #907050;
    }
    .mumie-hand.left  { left: 6px; }
    .mumie-hand.right { right: 6px; }
    .mumie-leg {
      position: absolute;
      top: 96px;
      width: 16px; height: 38px;
      background: #c8aa80;
      border-radius: 4px;
      border: 1px solid #a08060;
    }
    .mumie-leg.left  { left: calc(50% - 20px); }
    .mumie-leg.right { right: calc(50% - 20px); }
    .mumie-bandage.bl1 { top: 8px; left: -2px; right: -2px; height: 4px; transform: rotate(3deg); }
    .mumie-bandage.bl2 { top: 8px; left: -2px; right: -2px; height: 4px; transform: rotate(-3deg); }
    .mumie-trail {
      position: absolute;
      width: 20px; height: 4px;
      background: #e8d5b0;
      border-radius: 2px;
      opacity: 0.7;
      animation: mumieTrailDrift 2s ease-in infinite;
    }
    .mumie-trail.t1 { bottom: 10px; left: 10px; animation-delay: 0s; }
    .mumie-trail.t2 { bottom: 20px; right: 8px;  animation-delay: 0.7s; width: 14px; }
    .mumie-trail.t3 { bottom: 30px; left: 20px;  animation-delay: 1.3s; width: 10px; }

    /* Mumie Dungeon-Intro */
    .dungeon-intro-screen.mumie-intro-theme {
      background: radial-gradient(ellipse at 50% 70%, #1a0e00 0%, #0d0800 50%, #060400 100%);
    }
    .dungeon-intro-card.mumie-intro .dungeon-intro-copy {
      background: rgba(15, 8, 0, 0.92);
      border-color: rgba(220,170,30,0.4);
    }
    .dungeon-intro-card.mumie-intro .dungeon-intro-copy h1 {
      color: #fde68a;
      text-shadow: 0 0 20px rgba(220,170,30,0.6);
    }
    .dungeon-intro-card.mumie-intro .dungeon-intro-copy p { color: #fcd34d; }
    .mumie-awakening-stage {
      position: relative;
      height: 190px;
      overflow: hidden;
      border-radius: 12px;
      background: linear-gradient(180deg, #0a0500 0%, #150a00 60%, #0d0700 100%);
    }
    .mawake-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 80%, rgba(200,140,20,0.15) 0%, transparent 60%);
      animation: mawakeBgPulse 3s ease-in-out infinite;
    }
    @keyframes mawakeBgPulse {
      0%,100% { opacity: 0.5; }
      50%      { opacity: 1; }
    }
    .mawake-dust {
      position: absolute;
      width: 60px; height: 30px;
      background: radial-gradient(ellipse, rgba(210,180,120,0.25) 0%, transparent 70%);
      border-radius: 50%;
      animation: mawakeDustDrift 4s ease-in-out infinite;
    }
    .mawake-dust.d1 { bottom: 40px; left: 10%;  animation-delay: 0s; }
    .mawake-dust.d2 { bottom: 50px; left: 50%;  animation-delay: 1.3s; width: 80px; }
    .mawake-dust.d3 { bottom: 35px; right: 10%; animation-delay: 2.1s; }
    @keyframes mawakeDustDrift {
      0%,100% { transform: translateX(0) translateY(0); opacity: 0.5; }
      50%      { transform: translateX(10px) translateY(-8px); opacity: 1; }
    }
    .mawake-sarcophagus {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
    }
    .mawake-sarc-body {
      width: 70px; height: 80px;
      background: linear-gradient(180deg, #8B6914 0%, #5c4410 100%);
      border: 2px solid #c8a020;
      border-radius: 8px 8px 4px 4px;
      position: relative;
    }
    .mawake-sarc-body::before {
      content: '☥';
      position: absolute;
      top: 20px; left: 50%;
      transform: translateX(-50%);
      font-size: 20px;
      opacity: 0.6;
    }
    .mawake-sarc-lid {
      position: absolute;
      bottom: 76px; left: 0;
      width: 70px; height: 20px;
      background: #a07820;
      border: 2px solid #e8c040;
      border-radius: 4px;
      transform-origin: left center;
      animation: mawakeLidOpen 3s ease-out forwards;
    }
    @keyframes mawakeLidOpen {
      0%   { transform: rotate(0deg); }
      30%  { transform: rotate(-5deg); }
      100% { transform: rotate(-75deg); }
    }
    .mawake-sarc-glow {
      position: absolute;
      bottom: 76px; left: 0; right: 0;
      height: 40px;
      background: radial-gradient(ellipse, rgba(255,220,80,0.5) 0%, transparent 70%);
      animation: mawakeGlowPulse 1.5s ease-in-out infinite;
    }
    @keyframes mawakeGlowPulse {
      0%,100% { opacity: 0.3; }
      50%      { opacity: 1; }
    }
    .mawake-mumie {
      position: absolute;
      bottom: 76px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
    }

    /* ── Dopamin-Diktator Boss-Pixel ────────────────────────────── */
    .dopamin-diktator-wrap {
      animation: dopaminDiktatorIdle 2.6s ease-in-out infinite;
      position: relative;
    }
    .dopamin-diktator-boss {
      display: flex;
      justify-content: center;
      margin: 0 auto;
      transform-origin: center bottom;
    }
    .dopamin-diktator-boss .dopamin-diktator-body {
      transform: scale(2);
      transform-origin: center bottom;
      margin-bottom: 48px;
    }
    @keyframes dopaminDiktatorIdle {
      0%,100% { transform: translateY(0) translateX(0); }
      12%     { transform: translateY(-3px) translateX(0.7px); }
      24%     { transform: translateY(-2px) translateX(-0.7px); }
      36%     { transform: translateY(-3px) translateX(0.5px); }
      50%     { transform: translateY(0)   translateX(0); }
      70%     { transform: translateY(-1px) translateX(-0.4px); }
      85%     { transform: translateY(0)   translateX(0.4px); }
    }
    .dopamin-diktator-body {
      position: relative;
      width: 52px;
      height: 88px;
    }
    /* Mütze */
    .dopamin-diktator-cap {
      background: #1e3d0e;
      border: 1.5px solid #0f2206;
      border-radius: 3px 3px 0 0;
      height: 15px;
      left: 6px;
      position: absolute;
      top: -15px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .dopamin-diktator-cap::before {
      content: "★  ★  ★";
      color: #cc1111;
      font-size: 5px;
      line-height: 1;
      letter-spacing: 1px;
    }
    /* Schirm der Mütze */
    .dopamin-diktator-cap::after {
      background: #162e09;
      border-radius: 0 0 4px 4px;
      bottom: -4px;
      content: "";
      height: 4px;
      left: -4px;
      position: absolute;
      width: 48px;
    }
    /* Gesicht */
    .dopamin-diktator-head {
      background: #d4956a;
      border: 1.5px solid #b07a52;
      border-radius: 3px;
      box-shadow: inset -3px -4px 0 rgba(0,0,0,0.12);
      height: 23px;
      left: 9px;
      position: absolute;
      top: 0;
      width: 34px;
    }
    /* Sonnenbrille */
    .dopamin-diktator-glasses {
      background: #111122;
      border-radius: 2px;
      box-shadow: 0 0 3px rgba(0,0,0,0.7);
      height: 6px;
      left: 4px;
      position: absolute;
      top: 10px;
      width: 26px;
    }
    /* Mitteltrenner Brille */
    .dopamin-diktator-glasses::before {
      background: #d4956a;
      content: "";
      height: 6px;
      left: 50%;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      width: 2px;
    }
    /* Uniformkörper */
    .dopamin-diktator-torso {
      background: linear-gradient(180deg, #2d5a1b 0%, #1e3d0e 100%);
      border: 2px solid #162d0a;
      border-radius: 4px;
      box-shadow: inset 0 4px 0 rgba(255,255,255,0.07), inset -4px -6px 0 rgba(0,0,0,0.18);
      height: 44px;
      left: 4px;
      position: absolute;
      top: 24px;
      width: 44px;
    }
    /* Kragen */
    .dopamin-diktator-torso::before {
      background: #1a3009;
      border-radius: 2px 2px 0 0;
      content: "";
      height: 6px;
      left: 10px;
      position: absolute;
      top: 0;
      width: 24px;
    }
    /* Goldener Stern-Orden (links) */
    .dopamin-diktator-medal-star {
      color: #ffd700;
      font-size: 12px;
      left: 4px;
      line-height: 1;
      position: absolute;
      text-shadow: 0 0 5px rgba(255,215,0,0.9), 0 1px 0 #b8860b;
      top: 10px;
    }
    /* Roter Kreuz-Orden (rechts) */
    .dopamin-diktator-medal-cross {
      background: #cc1111;
      border-radius: 1px;
      box-shadow: 0 0 3px rgba(200,0,0,0.6);
      height: 10px;
      position: absolute;
      right: 8px;
      top: 10px;
      width: 4px;
    }
    .dopamin-diktator-medal-cross::before {
      background: #cc1111;
      border-radius: 1px;
      content: "";
      height: 4px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
    }
    /* Zweiter kleiner Orden (mitte-unten) */
    .dopamin-diktator-medal-ribbon {
      background: linear-gradient(90deg, #c0a020 0%, #ffd700 50%, #c0a020 100%);
      border-radius: 1px;
      height: 4px;
      left: 50%;
      position: absolute;
      top: 26px;
      transform: translateX(-50%);
      width: 16px;
    }
    /* Arme */
    .dopamin-diktator-arm {
      background: linear-gradient(180deg, #2d5a1b, #1e3d0e);
      border: 1.5px solid #162d0a;
      border-radius: 2px;
      height: 28px;
      position: absolute;
      top: 26px;
      width: 8px;
    }
    .dopamin-diktator-arm.left  { left: -6px; }
    .dopamin-diktator-arm.right { right: -6px; }
    /* Beine */
    .dopamin-diktator-leg {
      background: #162d0a;
      border: 1.5px solid #0f2206;
      border-radius: 2px;
      height: 12px;
      position: absolute;
      top: 70px;
      width: 10px;
    }
    .dopamin-diktator-leg.left  { left: 10px; }
    .dopamin-diktator-leg.right { right: 10px; }

    /* ── Werwolf-Boss-Pixel ─────────────────────────────────────── */
    .dungeon-pflegeprozess .wall-left {
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 48px),
        linear-gradient(90deg, rgba(30,90,40,0.22) 0 6px, transparent 6px),
        linear-gradient(115deg, #d4e8d0, #9dc89a 74%);
    }
    .dungeon-pflegeprozess .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 48px),
        linear-gradient(270deg, rgba(30,90,40,0.22) 0 6px, transparent 6px),
        linear-gradient(245deg, #d4e8d0, #9dc89a 74%);
    }

    .ceiling {
      background: linear-gradient(180deg, rgba(255, 252, 248, 0.98) 0%, rgba(240, 236, 228, 0));
      clip-path: polygon(0 0, 100% 0, 62% 24%, 38% 24%);
      inset: 0;
    }

    .floor {
      background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 80px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 2px, transparent 2px 80px),
        linear-gradient(180deg, rgba(185, 198, 210, 0), rgba(68, 90, 108, 0.92));
      clip-path: polygon(38% 76%, 62% 76%, 100% 100%, 0 100%);
      inset: 0;
    }

    .door {
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.12)),
        linear-gradient(180deg, #5a9090, #2e6068);
      border: 4px solid #1e4850;
      border-radius: 5px 5px 0 0;
      bottom: 24%;
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.18),
        0 18px 32px rgba(10, 40, 60, 0.35);
      height: 42%;
      left: 50%;
      transform: translateX(-50%);
      width: 18%;
    }

    .door::after,
    .side-door::after {
      background: var(--gold);
      border-radius: 50%;
      content: "";
      height: 8px;
      position: absolute;
      right: 18%;
      top: 52%;
      width: 8px;
    }

    .side-door {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%),
        linear-gradient(180deg, #4e8888, #2a5a60);
      border: 4px solid #1e4050;
      border-radius: 6px 6px 0 0;
      bottom: 7%;
      box-shadow: 0 10px 24px rgba(10, 40, 60, 0.28);
      display: none;
      height: 75%;
      width: 27%;
    }

    .side-door.left {
      clip-path: polygon(10% 0, 100% 7%, 100% 93%, 10% 100%);
      left: 0;
      transform: perspective(520px) rotateY(44deg);
      transform-origin: left center;
    }

    .side-door.right {
      clip-path: polygon(0 7%, 90% 0, 90% 100%, 0 93%);
      right: 0;
      transform: perspective(520px) rotateY(-44deg);
      transform-origin: right center;
    }

    .scene.left-door .side-door.left,
    .scene.right-door .side-door.right,
    .scene.left-open .side-door.left,
    .scene.right-open .side-door.right {
      display: block;
    }

    .scene.left-open .side-door.left,
    .scene.right-open .side-door.right {
      background:
        radial-gradient(circle at 50% 44%, rgba(45, 212, 176, 0.08), transparent 40%),
        linear-gradient(180deg, #0d1e2a, #060e16);
      border-color: rgba(10, 30, 44, 0.3);
      border-width: 2px;
      bottom: 3%;
      box-shadow:
        inset 0 0 38px rgba(0, 0, 0, 0.9),
        0 12px 24px rgba(10, 30, 50, 0.32);
      height: 84%;
      width: 32%;
    }

    .scene.left-open .side-door.left::after,
    .scene.right-open .side-door.right::after {
      display: none;
    }

    .scene.front-open .door {
      background:
        radial-gradient(circle at 50% 35%, rgba(45, 212, 176, 0.1), transparent 30%),
        linear-gradient(180deg, #0d1e2a, #060e16);
      border-color: rgba(10, 30, 44, 0.94);
      box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.88),
        0 18px 32px rgba(10, 30, 50, 0.44);
    }

    .scene.front-open .door::after {
      display: none;
    }

    .scene.front-wall .door {
      background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 28px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 3px, transparent 3px 40px),
        linear-gradient(180deg, #dce8e8, #b8cece);
      border-color: rgba(80, 120, 120, 0.7);
      bottom: 23%;
      box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.12),
        0 14px 28px rgba(10, 40, 60, 0.22);
      height: 48%;
      width: 34%;
    }

    .scene.front-wall .door::after {
      display: none;
    }

    .scene.room-tile.room-type-combat {
      background:
        linear-gradient(90deg, rgba(160, 60, 40, 0.22), transparent 24%, transparent 76%, rgba(160, 60, 40, 0.22)),
        linear-gradient(180deg, #f0d4c4 0%, #d4a890 36%, #a07060 37%, #3a1810 100%);
    }

    .scene.room-tile.room-type-combat .wall-left,
    .scene.room-tile.room-type-combat .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 48px),
        linear-gradient(115deg, #f0d4c4, #c09080 74%);
    }

    .scene.room-tile.room-type-treasure {
      background:
        linear-gradient(90deg, rgba(180, 130, 20, 0.26), transparent 24%, transparent 76%, rgba(180, 130, 20, 0.26)),
        linear-gradient(180deg, #fceea0 0%, #e8cc50 36%, #a08828 37%, #3c2e08 100%);
    }

    .scene.room-tile.room-type-treasure .wall-left,
    .scene.room-tile.room-type-treasure .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 48px),
        linear-gradient(115deg, #fceea0, #c8a838 74%);
    }

    .scene.room-tile.room-type-break {
      background:
        linear-gradient(90deg, rgba(20, 130, 110, 0.24), transparent 24%, transparent 76%, rgba(20, 130, 110, 0.24)),
        linear-gradient(180deg, #b8ece0 0%, #7ad4c0 36%, #40988a 37%, #0e3028 100%);
    }

    .scene.room-tile.room-type-break .wall-left,
    .scene.room-tile.room-type-break .wall-right {
      background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 48px),
        linear-gradient(115deg, #b8ece0, #58a898 74%);
    }

    .scene.room-tile.room-type-break .room-visual::before {
      background:
        linear-gradient(180deg, rgba(140, 220, 255, 0.7), rgba(45, 212, 176, 0.5)),
        linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.85) 47% 53%, transparent 54%);
      border: 4px solid rgba(40, 110, 110, 0.7);
      box-shadow: 0 8px 18px rgba(10, 50, 60, 0.2), inset 0 0 12px rgba(255,255,255,0.3);
      content: "";
      height: 48px;
      left: 50%;
      position: absolute;
      top: -50px;
      transform: translateX(-50%);
      width: 72px;
    }

    .scene.explore::after {
      border: 8px solid rgba(28, 50, 72, 0.55);
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
      content: "";
      inset: 14px;
      pointer-events: none;
      position: absolute;
      z-index: 2;
    }

    .scene.combat .side-door,
    .scene.combat .stairs-glow {
      display: none;
    }

    /* Deckenleuchten statt Fackeln */
    .torch {
      background: linear-gradient(180deg, #d8e8e8, #a0c8c8);
      border: 2px solid rgba(60, 100, 100, 0.4);
      border-radius: 4px 4px 6px 6px;
      box-shadow:
        0 6px 24px 6px rgba(200, 240, 240, 0.55),
        0 2px 8px rgba(45, 212, 176, 0.3);
      height: 16px;
      top: 1%;
      width: 36px;
    }

    .torch::after {
      background: linear-gradient(180deg, rgba(220, 248, 248, 0.9), rgba(180, 230, 230, 0.3));
      border-radius: 0 0 40% 40%;
      content: "";
      height: 28px;
      left: 50%;
      position: absolute;
      top: 100%;
      transform: translateX(-50%);
      width: 30px;
    }

    .torch.left {
      left: 26%;
      transform: none;
    }

    .torch.right {
      right: 26%;
      transform: none;
    }

    /* ── Stairs room: door visual ─────────────────────────────────────────── */
    .stairs-door-wrap {
      align-items: flex-end;
      bottom: 14%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
    }

    .stairs-door {
      background: linear-gradient(180deg, #7c4f2a 0%, #3d2209 100%);
      border: 4px solid #1a0e06;
      border-radius: 6px 6px 0 0;
      box-shadow: inset -6px 0 0 rgba(0,0,0,0.35), inset 6px 0 0 rgba(255,255,255,0.06);
      height: 100px;
      position: relative;
      width: 62px;
    }

    /* door handle */
    .stairs-door::after {
      background: var(--gold);
      border-radius: 50%;
      box-shadow: 0 0 6px rgba(244,185,66,0.6);
      content: "";
      height: 10px;
      left: 8px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
    }

    /* door panels */
    .stairs-door::before {
      border: 2px solid rgba(0,0,0,0.3);
      border-radius: 3px;
      content: "";
      height: 34px;
      left: 8px;
      position: absolute;
      right: 8px;
      top: 10px;
    }

    /* door frame */
    .stairs-door-frame {
      background: #2b1a0e;
      border-radius: 6px 6px 0 0;
      bottom: 0;
      height: 108px;
      left: -6px;
      position: absolute;
      width: 74px;
      z-index: -1;
    }

    .stairs-sign {
      background: linear-gradient(180deg, #d4a843, #8a5e1a);
      border: 3px solid #2b1a0e;
      border-radius: 4px;
      box-shadow: 0 3px 0 #2b1a0e, 0 0 12px rgba(244,185,66,0.3);
      color: #211305;
      font-family: Georgia, serif;
      font-size: 0.65rem;
      font-weight: 900;
      left: 50%;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
      padding: 4px 8px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    /* glow under door */
    .stairs-door-glow {
      animation: stairsDoorPulse 2.2s ease-in-out infinite;
      background: rgba(40, 198, 162, 0.3);
      border-radius: 50%;
      bottom: -4px;
      height: 16px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 80px;
    }

    @keyframes stairsDoorPulse {
      0%, 100% { opacity: 0.5; box-shadow: 0 0 14px 4px rgba(40,198,162,0.2); }
      50%       { opacity: 1;   box-shadow: 0 0 28px 8px rgba(40,198,162,0.4); }
    }

    /* stairs prompt overlay in main panel */
    .stairs-prompt {
      align-items: center;
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      display: grid;
      gap: 14px;
      justify-items: center;
      padding: 24px 28px;
      text-align: center;
    }
    .stairs-prompt h3 {
      color: var(--cs-crimson);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 1.3rem;
      margin: 0;
    }
    .stairs-prompt p {
      color: var(--cs-ink);
      font-size: 0.9rem;
      margin: 0;
    }
    .stairs-prompt-btns {
      display: flex;
      gap: 12px;
    }
    /* Optionen gleich groß */
    .stairs-prompt-btns .next,
    .stairs-prompt-btns .reset {
      display: flex;
      flex: 1 1 0;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    /* Treppen-Boost-Auswahl */
    .stairs-boost-overlay {
      align-items: center;
      background: rgba(2,6,23,0.88);
      display: flex;
      inset: 0;
      justify-content: center;
      padding: 16px;
      position: fixed;
      z-index: 600;
    }
    .stairs-boost-card {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      box-shadow: 0 8px 60px rgba(0,0,0,0.5), 5px 5px 0 var(--cs-ink);
      max-width: 700px;
      padding: 28px 24px 24px;
      width: 100%;
    }
    .stairs-boost-title {
      color: var(--cs-crimson);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 1.4rem;
      margin: 0 0 6px;
      text-align: center;
    }
    .stairs-boost-sub {
      color: var(--cs-ink);
      font-size: 0.85rem;
      margin: 0 0 20px;
      text-align: center;
    }
    .stairs-boost-options {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .stairs-boost-btn {
      appearance: none;
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 16px;
      text-align: left;
      transition: transform 120ms, box-shadow 120ms;
    }
    .stairs-boost-btn:hover {
      transform: translate(-1px,-1px);
      box-shadow: 3px 3px 0 var(--cs-ink);
      background: var(--cs-gold);
    }
    .stairs-boost-btn .boost-icon {
      font-size: 1.6rem;
      line-height: 1;
    }
    .stairs-boost-btn .boost-label {
      color: var(--cs-crimson);
      font-size: 0.95rem;
      font-weight: 800;
    }
    .stairs-boost-btn .boost-desc {
      color: rgba(36,28,26,0.72);
      font-size: 0.8rem;
      line-height: 1.35;
    }

    /* Stationstelefon Klingel-Cutscene */
    .telefon-ring-scene {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 18px;
      justify-content: center;
      min-height: 200px;
      padding: 24px 0 8px;
    }
    .telefon-phone {
      font-size: 4.5rem;
      line-height: 1;
      transform-origin: center;
    }
    .telefon-phone.ringing {
      animation: phoneRing 0.44s ease-in-out;
    }
    @keyframes phoneRing {
      0%   { transform: rotate(0deg)   scale(1); }
      15%  { transform: rotate(-18deg) scale(1.12); }
      35%  { transform: rotate(18deg)  scale(1.15); }
      55%  { transform: rotate(-12deg) scale(1.1); }
      75%  { transform: rotate(10deg)  scale(1.05); }
      90%  { transform: rotate(-4deg)  scale(1.02); }
      100% { transform: rotate(0deg)   scale(1); }
    }
    .telefon-ring-dots {
      color: var(--cs-crimson);
      font-size: 1.8rem;
      letter-spacing: 0.3em;
      min-height: 2rem;
    }
    .telefon-ring-dots span {
      display: inline-block;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .telefon-ring-dots span.lit { opacity: 1; }
    .telefon-ring-label {
      color: var(--cs-ink);
      font-size: 0.85rem;
    }

    /* Stationstelefon-Untermenü */
    .telefon-overlay {
      align-items: center;
      background: rgba(2,6,23,0.82);
      display: flex;
      inset: 0;
      justify-content: center;
      padding: 16px;
      position: fixed;
      z-index: 700;
    }
    .telefon-card {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      box-shadow: 0 8px 60px rgba(0,0,0,0.5), 5px 5px 0 var(--cs-ink);
      max-width: 420px;
      padding: 24px 20px 20px;
      width: 100%;
    }
    .telefon-title {
      color: var(--cs-crimson);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 1.2rem;
      margin: 0 0 16px;
      text-align: center;
    }
    .telefon-options {
      display: grid;
      gap: 8px;
    }
    .telefon-option-btn {
      align-items: flex-start;
      appearance: none;
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 10px 14px;
      text-align: left;
      transition: transform 120ms, box-shadow 120ms, background 0.15s;
    }
    .telefon-option-btn:hover { background: var(--cs-gold); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cs-ink); }
    .telefon-option-btn:disabled { opacity: 0.4; cursor: default; }
    .telefon-option-btn strong { color: var(--cs-crimson); font-size: 0.9rem; }
    .telefon-option-btn small { color: rgba(36,28,26,0.62); font-size: 0.78rem; }
    .telefon-cancel {
      background: transparent;
      border: 1.5px solid var(--cs-ink);
      border-radius: 6px;
      color: var(--cs-ink);
      cursor: pointer;
      font-size: 0.82rem;
      margin-top: 12px;
      padding: 6px 12px;
      width: 100%;
    }

    .stairs-glow {
      background: rgba(40, 198, 162, 0.22);
      border-radius: 50%;
      bottom: 17%;
      box-shadow: 0 0 42px 18px rgba(40, 198, 162, 0.2);
      height: 54px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 120px;
    }

    .room-visual {
      bottom: 24%;
      height: 190px;
      left: 50%;
      pointer-events: none;
      transform: translateX(-50%);
      width: 220px;
      z-index: 1;
    }

    .room-visual.decor {
      pointer-events: auto;
      z-index: 3;
    }

    /* ══════════════════════════════════════════════════════════════════════════
       Top-Down Dungeon Grid  (Shiren-Style 5×5 Kacheln)
    ══════════════════════════════════════════════════════════════════════════ */

    /* Szene im Topdown-Modus: viel höher, quadratischer */
    .scene.topdown-mode {
      aspect-ratio: unset !important;
      min-height: min(96vw, 560px) !important;
    }

    /* First-Person-Dekorationen ausblenden */
    .scene.topdown-mode .wall-left,
    .scene.topdown-mode .wall-right,
    .scene.topdown-mode .ceiling,
    .scene.topdown-mode .floor,
    .scene.topdown-mode .side-door,
    .scene.topdown-mode .door,
    .scene.topdown-mode .torch,
    .scene.topdown-mode .stairs-glow,
    .scene.topdown-mode .intent-card { display: none !important; }
    .scene.topdown-mode::after { display: none; }

    /* Szenen-Hintergrund */
    .scene.topdown-mode { background: var(--dg-bg, #050508); }

    /* room-visual = voller Inhalt, füllt Szene über der Scene-Card */
    .scene.topdown-mode .room-visual.dg-view {
      position: absolute;
      inset: 0 0 52px 0;
      transform: none;
      width: auto; height: auto;
      pointer-events: auto;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      box-sizing: border-box;
      /* macht cqh/cqw für .dg-grid an DIESER Fläche fest (statt Viewport-Fallback,
         der das Grid oft riesig oder winzig machte). */
      container-type: size;
    }

    /* Adaptives Steuerkreuz: im Explore-Modus darf der Browser die Wisch-Geste
       nirgends als Scroll/Pan übernehmen (sonst bleibt das touchend aus und die
       Figur läuft weiter). Scrollbare Bereiche unten wieder freigeben. */
    body.in-explore .shell,
    body.in-explore .scene,
    body.in-explore .room-visual,
    body.in-explore .wolf-bar,
    body.in-explore #bewegungPane,
    body.in-explore #mainPanel {
      touch-action: none;
    }
    body.in-explore .log-panel,
    body.in-explore .log,
    body.in-explore .menu-popup-bar {
      touch-action: pan-y;
    }

    /* Scene-Card im Top-Down-Modus ausblenden */
    .scene.topdown-mode .scene-card { display: none !important; }

    /* ── Adaptives Touch-Steuerkreuz ─────────────────────────────────────────── */
    /* Erscheint dort, wo der Finger aufgesetzt wird (JS: setupFloatingDpad). */
    .dpad-float {
      position: fixed;
      z-index: 60;
      width: 132px; height: 132px;
      margin: -66px 0 0 -66px;              /* zentriert auf den Touch-Punkt */
      border-radius: 50%;
      background: radial-gradient(circle, rgba(12,18,32,0.42), rgba(12,18,32,0.26));
      border: 2px solid rgba(255,255,255,0.28);
      box-shadow: 0 4px 20px rgba(0,0,0,0.45);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.12s ease;
      touch-action: none;
    }
    .dpad-float.is-active { opacity: 1; }
    .dpad-float .dpad-arrow {
      position: absolute;
      font-size: 1.1rem;
      line-height: 1;
      font-weight: 900;
      color: rgba(255,255,255,0.5);
      transition: color 0.1s, text-shadow 0.1s;
    }
    .dpad-float .dpad-n { top: 8px;    left: 50%; transform: translateX(-50%); }
    .dpad-float .dpad-s { bottom: 8px; left: 50%; transform: translateX(-50%); }
    .dpad-float .dpad-w { left: 9px;   top: 50%;  transform: translateY(-50%); }
    .dpad-float .dpad-e { right: 9px;  top: 50%;  transform: translateY(-50%); }
    .dpad-float .dpad-arrow.is-lit {
      color: #fff;
      text-shadow: 0 0 10px rgba(255,255,255,0.85);
    }
    .dpad-float .dpad-nub {
      position: absolute;
      width: 46px; height: 46px;
      left: 50%; top: 50%;
      margin: -23px 0 0 -23px;
      border-radius: 50%;
      background: rgba(255,255,255,0.22);
      border: 2px solid rgba(255,255,255,0.5);
      transition: transform 0.04s linear;
    }

    /* Minimap: oben rechts, semi-transparent über dem Spielfeld */
    .scene.topdown-mode .mini-map.show {
      display: grid;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 20;
      background: rgba(8, 13, 24, 0.65);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 4px 16px rgba(0,0,0,0.6);
      backdrop-filter: blur(2px);
    }

    /* ── Dungeon-Farbthemen ─────────────────────────────────────────────────── */
    /* Einführungsstation — warmes Trainingsgrün (Care-Squad-Palette) */
    .dg-theme-tutorial {
      --dg-bg: #1a1408;
      --dg-floor: #2a2410; --dg-floor2: #201c0c;
      --dg-wall-col: #6ab82a; --dg-wall-bg: #120e06;
      --dg-door-col: #d4e600; --dg-fog: #100c04;
      --dg-player-ring: #8ad438; --dg-accent: #4a9c1e;
      --dg-tile-corr-a: #4a9c30; --dg-tile-corr-b: #8ad438;
      --dg-tile-room-a: #2e5fa3; --dg-tile-room-b: #f0b400;
    }
    /* Pflegediagnosen - Stadtpark — nachts: graugrünes Pflaster, Rasen-Lichtungen, Laternengold */
    .dg-theme-pflegeprozess {
      --dg-bg: #0a1510;
      --dg-floor: #14261c; --dg-floor2: #0f1e16;
      --dg-wall-col: #3f8f66; --dg-wall-bg: #08120d;
      --dg-door-col: #f0b400; --dg-fog: #060d09;
      --dg-player-ring: #7fd6a4; --dg-accent: #3f8f66;
      --dg-tile-corr-a: #46564e; --dg-tile-corr-b: #5a6c62;
      --dg-tile-room-a: #2f7a45; --dg-tile-room-b: #e0432c;
    }
    /* Pflegeziel Dungeon — Crimson & Mint (Zentrale von innen) */
    .dg-theme-pflege_haus {
      --dg-bg: #200c0a;
      --dg-floor: #341410; --dg-floor2: #260e0c;
      --dg-wall-col: #e0432c; --dg-wall-bg: #160806;
      --dg-door-col: #f0b400; --dg-fog: #140806;
      --dg-player-ring: #ff7a5c; --dg-accent: #e0432c;
      --dg-tile-corr-a: #a3341f; --dg-tile-corr-b: #e0432c;
      --dg-tile-room-a: #2f9d8f; --dg-tile-room-b: #f0b400;
    }
    /* Pflegemaßnahmen Heizkanal — Betontunnel: Stahlgrau, Rost-Orange und Warngelb (Fernwärme unter der Zentrale) */
    .dg-theme-pflegemassnahmen {
      --dg-bg: #0e0d0c;
      --dg-floor: #1c1a18; --dg-floor2: #161412;
      --dg-wall-col: #8794a6; --dg-wall-bg: #0a0908;
      --dg-door-col: #ffd23c; --dg-fog: #080706;
      --dg-player-ring: #ffb04a; --dg-accent: #c9722a;
      --dg-tile-corr-a: #4a4f58; --dg-tile-corr-b: #5a606b;
      --dg-tile-room-a: #8a4a1c; --dg-tile-room-b: #f0b400;
    }
    /* Labyrinth der Vergänglichkeit — Nebelgrau, gedämpftes Blauviolett */
    .dg-theme-demenz_krankheitsbild {
      --dg-bg: #10141c;
      --dg-floor: #202838; --dg-floor2: #182030;
      --dg-wall-col: #8899bb; --dg-wall-bg: #0a0e16;
      --dg-door-col: #aabbdd; --dg-fog: #0a0c12;
      --dg-player-ring: #99aacc; --dg-accent: #7788aa;
      --dg-tile-corr-a: #556680; --dg-tile-corr-b: #8899bb;
      --dg-tile-room-a: #445566; --dg-tile-room-b: #aabbcc;
    }
    /* Stille Korridore — Kaltes Blau/Violett mit Alarmrot (Validator) */
    .dg-theme-demenz_kommunikation {
      --dg-bg: #0a0e1c;
      --dg-floor: #141b30; --dg-floor2: #101526;
      --dg-wall-col: #4466ee; --dg-wall-bg: #060810;
      --dg-door-col: #ff3355; --dg-fog: #05070e;
      --dg-player-ring: #6688ff; --dg-accent: #3355cc;
      --dg-tile-corr-a: #2a3a70; --dg-tile-corr-b: #5566cc;
      --dg-tile-room-a: #7733aa; --dg-tile-room-b: #ff3355;
    }
    /* Personhood-Palast — Warmes Gold, Amber, Rosa (Die Liebe) */
    .dg-theme-demenz_kitwood {
      --dg-bg: #201408;
      --dg-floor: #362010; --dg-floor2: #2a1a0c;
      --dg-wall-col: #ffaa22; --dg-wall-bg: #180e06;
      --dg-door-col: #ff6699; --dg-fog: #140c06;
      --dg-player-ring: #ffcc55; --dg-accent: #ee8822;
      --dg-tile-corr-a: #cc7722; --dg-tile-corr-b: #ffbb44;
      --dg-tile-room-a: #ff5588; --dg-tile-room-b: #ffdd77;
    }
    /* Puls Plateau — helle Erdfarben für Wände, grüner Rasen als Boden (Vitalzeichen-Kampagne) */
    .dg-theme-puls_plateau {
      --dg-bg: #1c3314;
      --dg-floor: #4f8a2c; --dg-floor2: #427a24;
      --dg-wall-col: #d8bf8e; --dg-wall-bg: #8a6f45;
      --dg-door-col: #ffe08a; --dg-fog: #16260f;
      --dg-player-ring: #9be36a; --dg-accent: #7cc24a;
      --dg-tile-corr-a: #5fa334; --dg-tile-corr-b: #74b746;
      --dg-tile-room-a: #e8d4a8; --dg-tile-room-b: #cdb27c;
      --dg-wall-line: #e9d3a3;
    }
    .dg-theme-puls_plateau .dg-cell.dg-fog { background: var(--dg-fog); }
    /* Hochdruck-Dschungel — dunkles Urwald-Grün mit Blutrot-Akzenten (Vitalzeichen-Kampagne) */
    .dg-theme-hochdruck_dschungel {
      --dg-bg: #0b1a0d;
      --dg-floor: #163a1c; --dg-floor2: #10301a;
      --dg-wall-col: #4fb85a; --dg-wall-bg: #0a1a0c;
      --dg-door-col: #ff6a4a; --dg-fog: #08140a;
      --dg-player-ring: #7be08a; --dg-accent: #e2503c;
      --dg-tile-corr-a: #1f4d2a; --dg-tile-corr-b: #2a6636;
      --dg-tile-room-a: #8a2222; --dg-tile-room-b: #c23a2c;
      --dg-wall-line: #7fd88a;
    }
    .dg-theme-hochdruck_dschungel .dg-cell.dg-fog { background: var(--dg-fog); }
    /* Tyrannos-Gipfel (Bonus) — dunkler Fels mit Bernstein-Akzenten */
    .dg-theme-urzeit_bonus {
      --dg-bg: #150f0b;
      --dg-floor: #2e2620; --dg-floor2: #241d18;
      --dg-wall-col: #d08a3a; --dg-wall-bg: #120d09;
      --dg-door-col: #ffcf66; --dg-fog: #0f0a07;
      --dg-player-ring: #ffc061; --dg-accent: #d08a3a;
      --dg-tile-corr-a: #4a3f35; --dg-tile-corr-b: #5f5043;
      --dg-tile-room-a: #7a3b1f; --dg-tile-room-b: #a85a2a;
      --dg-wall-line: #f0b866;
    }
    .dg-theme-urzeit_bonus .dg-cell.dg-fog { background: var(--dg-fog); }
    /* Fiebervulkan — Urzeit-Höhle: Glutorange & Lagerfeuer-Amber (Vitalzeichen-Kampagne) */
    .dg-theme-fiebervulkan {
      --dg-bg: #140a04;
      --dg-floor: #2c1608; --dg-floor2: #1f0f06;
      --dg-wall-col: #ff7a1a; --dg-wall-bg: #120800;
      --dg-door-col: #ffd23c; --dg-fog: #0c0602;
      --dg-player-ring: #ffb347; --dg-accent: #ff7a1a;
      --dg-tile-corr-a: #4a2410; --dg-tile-corr-b: #7a3a14;
      --dg-tile-room-a: #ff7a1a; --dg-tile-room-b: #ffd23c;
    }
    /* Standardhain — Klinisches Türkis/Grün (Qualität & Struktur) */
    .dg-theme-demenz_expertenstandard {
      --dg-bg: #081814;
      --dg-floor: #0f2a20; --dg-floor2: #0b2018;
      --dg-wall-col: #22ddaa; --dg-wall-bg: #061410;
      --dg-door-col: #55ffcc; --dg-fog: #05100c;
      --dg-player-ring: #44eebb; --dg-accent: #11bb88;
      --dg-tile-corr-a: #119977; --dg-tile-corr-b: #33ccaa;
      --dg-tile-room-a: #2288cc; --dg-tile-room-b: #66ddee;
    }

    /* ── Urzeit-Dungeons: Boden- und Wandtexturen (dezente Overlays über den Themenfarben) ───────── */
    /* Puls Plateau: Rasen mit Halmen und Kieseln */
    .dg-grid.dg-theme-puls_plateau .dg-cell.dg-is-corridor {
      background-image:
        radial-gradient(circle at 24% 32%, rgba(255,255,255,0.12) 0 1.5px, transparent 2px),
        radial-gradient(circle at 72% 70%, rgba(0,40,0,0.20) 0 2px, transparent 2.5px),
        repeating-linear-gradient(100deg, transparent 0 5px, rgba(20,70,10,0.11) 5px 6px);
    }
    .dg-grid.dg-theme-puls_plateau .dg-cell.dg-is-room {
      background-image:
        radial-gradient(circle at 30% 28%, rgba(120,90,50,0.22) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 72%, rgba(255,250,235,0.35) 0 2px, transparent 3px),
        repeating-linear-gradient(0deg, transparent 0 9px, rgba(110,80,40,0.08) 9px 10px);
    }
    /* Hochdruck-Dschungel: Moos, Blätter und Wurzeln; Räume mit dunklen Adern */
    .dg-grid.dg-theme-hochdruck_dschungel .dg-cell.dg-is-corridor {
      background-image:
        radial-gradient(ellipse at 26% 72%, rgba(90,190,100,0.20) 0 4px, transparent 5px),
        radial-gradient(ellipse at 74% 28%, rgba(0,0,0,0.24) 0 3px, transparent 4px),
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.09) 8px 9px);
    }
    .dg-grid.dg-theme-hochdruck_dschungel .dg-cell.dg-is-room {
      background-image:
        linear-gradient(115deg, transparent 46%, rgba(60,5,5,0.30) 48% 49.5%, transparent 51%),
        linear-gradient(65deg, transparent 58%, rgba(60,5,5,0.22) 60% 61%, transparent 63%),
        radial-gradient(circle at 40% 30%, rgba(255,120,100,0.14), transparent 55%);
    }
    /* Fiebervulkan: Basalt mit glühenden Rissen */
    .dg-grid.dg-theme-fiebervulkan .dg-cell.dg-is-corridor {
      background-image:
        linear-gradient(118deg, transparent 47%, rgba(255,120,30,0.26) 49% 50%, transparent 52%),
        linear-gradient(-70deg, transparent 63%, rgba(255,150,40,0.16) 65% 66%, transparent 68%),
        radial-gradient(circle at 60% 40%, rgba(255,90,0,0.08), transparent 60%);
    }
    .dg-grid.dg-theme-fiebervulkan .dg-cell.dg-is-room {
      background-image:
        radial-gradient(circle at 30% 30%, rgba(255,230,120,0.30) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 68%, rgba(120,20,0,0.25) 0 3px, transparent 4px);
    }
    /* Tyrannos-Gipfel: rissiger Fels mit Steinsprenkeln */
    .dg-grid.dg-theme-urzeit_bonus .dg-cell.dg-is-corridor {
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,240,210,0.10) 0 1.5px, transparent 2px),
        radial-gradient(circle at 78% 66%, rgba(0,0,0,0.26) 0 2px, transparent 3px),
        linear-gradient(120deg, transparent 52%, rgba(0,0,0,0.22) 54% 55%, transparent 57%);
    }
    .dg-grid.dg-theme-urzeit_bonus .dg-cell.dg-is-room {
      background-image:
        radial-gradient(circle at 30% 30%, rgba(255,200,120,0.18) 0 2px, transparent 3px),
        linear-gradient(-62deg, transparent 50%, rgba(0,0,0,0.22) 52% 53%, transparent 55%);
    }
    /* Wände (Zellen mit Wandlinie): leichter Steintiefe-Schatten in den Urzeit-Themen */
    .dg-grid.dg-theme-puls_plateau .dg-cell[style*="border-"]::before,
    .dg-grid.dg-theme-hochdruck_dschungel .dg-cell[style*="border-"]::before,
    .dg-grid.dg-theme-fiebervulkan .dg-cell[style*="border-"]::before,
    .dg-grid.dg-theme-urzeit_bonus .dg-cell[style*="border-"]::before {
      box-shadow: inset 0 0 10px rgba(0,0,0,0.38);
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    /* ── Pflegeprozess-Kampagne (urban): Boden- und Wandtexturen ──────────────────────────────── */
    /* Stadtpark: gepflasterte Wege mit Fugen, Räume = Rasenflächen im Laternenlicht */
    .dg-grid.dg-theme-pflegeprozess .dg-cell.dg-is-corridor {
      background-image:
        linear-gradient(90deg, transparent 0 48%, rgba(0,0,0,0.30) 49% 51%, transparent 52%),
        linear-gradient(0deg, transparent 0 48%, rgba(0,0,0,0.24) 49% 51%, transparent 52%),
        radial-gradient(circle at 26% 30%, rgba(255,255,255,0.12) 0 1.5px, transparent 2px),
        radial-gradient(circle at 74% 72%, rgba(255,255,255,0.08) 0 1.5px, transparent 2px);
    }
    .dg-grid.dg-theme-pflegeprozess .dg-cell.dg-is-room {
      background-image:
        radial-gradient(circle at 50% 14%, rgba(255,236,160,0.34), transparent 52%),
        radial-gradient(ellipse at 24% 74% , rgba(70,160,80,0.34) 0 3px, transparent 4px),
        radial-gradient(ellipse at 76% 66%, rgba(70,160,80,0.26) 0 2px, transparent 3px),
        repeating-linear-gradient(100deg, transparent 0 6px, rgba(20,80,30,0.10) 6px 7px);
    }
    /* Pflegeziel-Dungeon: Klinikflur mit Linoleum-Schachbrett, Räume = Stationszimmer mit Kreuz */
    .dg-grid.dg-theme-pflege_haus .dg-cell.dg-is-corridor {
      background-image:
        conic-gradient(rgba(255,255,255,0.09) 25%, transparent 0 50%, rgba(255,255,255,0.09) 0 75%, transparent 0);
      background-size: 50% 50%;
    }
    .dg-grid.dg-theme-pflege_haus .dg-cell.dg-is-room {
      background-image:
        linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)),
        linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)),
        repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,0.08) 9px 10px);
      background-position: 50% 50%, 50% 50%, 0 0;
      background-repeat: no-repeat, no-repeat, repeat;
      background-size: 38% 11%, 11% 38%, auto;
    }
    /* Heizkanal: Beton mit Fernwärmerohr entlang der Kante, Räume = Wartungsbereiche mit Warnstreifen und Dampf */
    .dg-grid.dg-theme-pflegemassnahmen .dg-cell.dg-is-corridor {
      background-image:
        linear-gradient(0deg, transparent 0 74%, rgba(255,255,255,0.14) 74% 78%, rgba(0,0,0,0.34) 78% 86%, transparent 86%),
        radial-gradient(circle at 14% 80%, rgba(255,255,255,0.20) 0 1.5px, transparent 2px),
        radial-gradient(circle at 86% 80%, rgba(255,255,255,0.20) 0 1.5px, transparent 2px),
        radial-gradient(circle at 70% 30%, rgba(255,255,255,0.07), transparent 46%);
    }
    .dg-grid.dg-theme-pflegemassnahmen .dg-cell.dg-is-room {
      background-image:
        radial-gradient(circle at 72% 28%, rgba(255,255,255,0.16), transparent 50%),
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,214,0,0.12) 8px 16px);
    }
    .dg-grid.dg-theme-pflegeprozess .dg-cell[style*="border-"]::before,
    .dg-grid.dg-theme-pflege_haus .dg-cell[style*="border-"]::before,
    .dg-grid.dg-theme-pflegemassnahmen .dg-cell[style*="border-"]::before {
      box-shadow: inset 0 0 10px rgba(0,0,0,0.38);
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }

    /* ── Grid-Container: 5×5, füllt den Platz quadratisch ──────────────────── */
    .dg-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 0;
      background: transparent; /* kein sichtbares Grid im Hintergrund */
      border: 4px solid var(--dg-wall-col);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 0 0 6px var(--dg-bg), 0 16px 48px rgba(0,0,0,0.9);
      width: min(100%, 96cqh);
      aspect-ratio: 1 / 1;
    }
    /* Ohne size-Container (alte Browser) greift der Viewport-Fallback für cqh —
       dann lieber an der Breite ausrichten. */
    @supports not (container-type: size) {
      .dg-grid { width: 100%; }
    }

    /* ── Basis-Zelle ────────────────────────────────────────────────────────── */
    .dg-cell {
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }
    /* NPC-Zelle: Sprite darf über Subtile-Grenzen hinausragen → kein Clipping */
    .dg-cell:has(.dg-decor-btn) {
      overflow: visible;
      z-index: 5;
    }

    /* ── Nebel & leere Felder ───────────────────────────────────────────────── */
    .dg-cell.dg-fog  { background: #111; }

    /* Wand-Tile: Bodenfarbe gedimmt + farbiger Rahmen */
    .dg-cell.dg-wall-cell {
      filter: brightness(0.35);
      border: 1.5px solid var(--dg-wall-col);
      box-sizing: border-box;
    }

    /* Tür-Tile: leuchtend in Tür-Farbe, klar erkennbar */
    .dg-door-question {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0px;
      color: #fff;
      font-weight: 900;
      font-size: 1.1em;
      line-height: 1;
      text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,1);
      pointer-events: none;
      z-index: 3;
      animation: dg-door-q-pulse 1.4s ease-in-out infinite;
    }
    /* Pfeil oberhalb des ? bei Nord-Tür, unterhalb bei Süd */
    .dg-door-q-north { flex-direction: column-reverse; }
    .dg-door-q-south { flex-direction: column; }
    .dg-door-q-west  { flex-direction: row-reverse; }
    .dg-door-q-east  { flex-direction: row; }
    .dg-door-arrow {
      font-size: 0.8em;
      opacity: 0.9;
    }
    @keyframes dg-door-q-pulse {
      0%,100% { opacity: 0.75; transform: scale(0.92); }
      50%      { opacity: 1;    transform: scale(1.08); }
    }

    .dg-cell.dg-door-cell {
      background: var(--dg-door-col) !important;
      outline: 2px solid #fff;
      outline-offset: -2px;
      filter: none !important;
    }

    /* Jede sichtbare Tür ist antippbar; die der eigenen Zelle pulst zur Aufforderung */
    .dg-cell.dg-door-tap { cursor: pointer; }
    .dg-cell.dg-door-tap-current {
      outline-color: var(--cs-gold);
      animation: dg-door-tap-pulse 1.3s ease-in-out infinite;
    }
    @keyframes dg-door-tap-pulse {
      0%,100% { box-shadow: inset 0 0 8px 1px rgba(240,180,0,0.55); }
      50%      { box-shadow: inset 0 0 16px 4px rgba(240,180,0,0.95); }
    }

    /* Ausgangs-Leiste unter dem Dungeon-Grid — Bewegung ganz ohne Steuerkreuz.
       Buttons alle gleich breit (flex:1) und gleich hoch (align-items:stretch). */
    .dg-exits {
      position: absolute;
      left: 0; right: 0; bottom: 6px;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 6px;
      padding: 4px 6px;
      pointer-events: none;
      z-index: 6;
    }
    .dg-exit-btn {
      pointer-events: auto;
      appearance: none;
      flex: 0 1 210px;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: rgba(20, 14, 26, 0.88);
      border: 2px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: #fdf3e1;
      cursor: pointer;
      font-size: 0.74rem;
      font-weight: 800;
      line-height: 1.15;
      min-height: 38px;
      padding: 6px 10px;
      white-space: normal;
    }
    .dg-exit-btn.is-door {
      background: rgba(46, 95, 163, 0.92);
      border-color: var(--cs-gold);
    }
    .dg-exit-btn.is-unknown { background: rgba(120, 46, 163, 0.92); }
    .dg-exit-btn.is-stairs {
      background: rgba(163, 122, 20, 0.94);
      border-color: var(--cs-gold);
    }
    .dg-exit-btn.is-crack {
      background: rgba(107, 82, 56, 0.95);
      border-color: #d8b06a;
    }
    .dg-exit-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--cs-ink); }
    @media (max-width: 600px) {
      .dg-exit-btn { font-size: 0.7rem; min-height: 38px; padding: 5px 6px; }
    }

    /* ── Flur-Kacheln: zwei alternierende Farben ───────────────────────────── */
    .dg-cell.dg-is-corridor.dg-tile-a { background: var(--dg-tile-corr-a); }
    .dg-cell.dg-is-corridor.dg-tile-b { background: var(--dg-tile-corr-b); }

    /* ── Raum-Kacheln: einfarbig (kein Schachbrett) ─────────────────────────── */
    .dg-cell.dg-is-room { background: var(--dg-tile-room-a); }

    /* Raumtyp-Akzente — flache Farben */
    .dg-cell.gc-boss     { background: #c04040 !important; }
    .dg-cell.gc-shop     { background: #c09030 !important; }
    .dg-cell.gc-treasure { background: #b07820 !important; }
    .dg-cell.gc-break    { background: #30a060 !important; }
    .dg-cell.gc-stairs   { background: #c0a020 !important;
                           animation: dg-stairs-pulse 1.8s ease-in-out infinite; }
    @keyframes dg-stairs-pulse {
      0%,100% { box-shadow: inset 0 0 16px rgba(220,200,40,0.4); }
      50%      { box-shadow: inset 0 0 28px rgba(240,220,60,0.7); }
    }

    /* Gecleared: leicht gedimmt aber Farbe bleibt sichtbar */
    .dg-cell.dg-cleared { filter: brightness(0.72) saturate(0.7); }

    /* ── Tür-Zelle (angrenzend, nicht betreten) ─────────────────────────────── */
    .dg-cell.dg-adjacent-door {
      background: var(--dg-wall-bg);
    }

    /* Tür-Hinweis: farbiger Balken auf der dem Spieler zugewandten Seite */
    .dg-door-hint {
      position: absolute;
      background: var(--dg-door-col);
      box-shadow: 0 0 10px 2px var(--dg-door-col);
      border-radius: 3px;
      z-index: 4;
    }
    .dg-door-hint-south { top: 0;    left: 20%; right: 20%; height: 5px; }
    .dg-door-hint-north { bottom: 0; left: 20%; right: 20%; height: 5px; }
    .dg-door-hint-east  { left: 0;   top: 20%;  bottom: 20%; width: 5px; }
    .dg-door-hint-west  { right: 0;  top: 20%;  bottom: 20%; width: 5px; }

    /* ── Wände: dicke Balken an den Zellkanten ──────────────────────────────── */
    .dg-door {
      position: absolute;
      background: var(--dg-door-col);
      box-shadow: 0 0 8px 2px var(--dg-door-col);
      border-radius: 2px;
      z-index: 3;
    }
    .dg-door.dg-door-north { top:    0; left: 22%; right: 22%; height: 10px; }
    .dg-door.dg-door-south { bottom: 0; left: 22%; right: 22%; height: 10px; }
    .dg-door.dg-door-east  { right:  0; top: 22%;  bottom: 22%; width: 10px; }
    .dg-door.dg-door-west  { left:   0; top: 22%;  bottom: 22%; width: 10px; }

    /* ── Brüchige Wand (Geheimraum) ─────────────────────────────────────────── */
    .dg-crack-cell { overflow: visible; }
    .dg-crack-tap { cursor: pointer; }
    .dg-crack {
      position: absolute;
      z-index: 6;
      pointer-events: none;
      opacity: 0.32;
      background:
        repeating-linear-gradient(38deg, transparent 0 4px, rgba(15,10,6,0.22) 4px 5px),
        linear-gradient(rgba(122,92,60,0.30), rgba(74,54,36,0.30));
    }
    .dg-crack::after {
      content: "";
      position: absolute; inset: -1px;
      background:
        linear-gradient(118deg, transparent 46%, rgba(5,3,2,0.34) 48% 49.5%, transparent 51%),
        linear-gradient(-64deg, transparent 42%, rgba(5,3,2,0.24) 44% 45.5%, transparent 47%);
    }
    .dg-crack.dg-crack-west,
    .dg-crack.dg-crack-east  { top: 22%; bottom: 22%; width: 26%; }
    .dg-crack.dg-crack-west  { left: 0; }
    .dg-crack.dg-crack-east  { right: 0; }
    .dg-crack.dg-crack-north,
    .dg-crack.dg-crack-south { left: 22%; right: 22%; height: 26%; }
    .dg-crack.dg-crack-north { top: 0; }
    .dg-crack.dg-crack-south { bottom: 0; }
    /* Nur wer genau hinsieht (Hover/Tippen) erkennt den Riss deutlicher */
    .dg-crack-tap:hover .dg-crack,
    .dg-crack-tap:active .dg-crack { opacity: 0.6; }

    /* ── Spieler ────────────────────────────────────────────────────────────── */
    .dg-player-wrap {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dg-avatar-mini {
      transform-origin: center bottom;
      animation: dg-dance 1.2s ease-in-out infinite;
      image-rendering: pixelated;
      max-width: 100%;
      max-height: 100%;
    }
    @keyframes dg-dance {
      0%   { transform: translateX(0px)  translateY(0px)  scaleX(var(--flip, 1))          scaleY(1)    rotate(0deg); }
      12%  { transform: translateX(-2px) translateY(-4px) scaleX(calc(0.94 * var(--flip, 1))) scaleY(1.07) rotate(-4deg); }
      24%  { transform: translateX(0px)  translateY(2px)  scaleX(calc(1.10 * var(--flip, 1))) scaleY(0.88) rotate(0deg); }
      36%  { transform: translateX(2px)  translateY(-4px) scaleX(calc(0.94 * var(--flip, 1))) scaleY(1.07) rotate(4deg); }
      48%  { transform: translateX(0px)  translateY(2px)  scaleX(calc(1.10 * var(--flip, 1))) scaleY(0.88) rotate(0deg); }
      60%  { transform: translateX(-2px) translateY(-2px) scaleX(calc(0.97 * var(--flip, 1))) scaleY(1.03) rotate(-2deg); }
      72%  { transform: translateX(0px)  translateY(1px)  scaleX(calc(1.04 * var(--flip, 1))) scaleY(0.96) rotate(0deg); }
      84%  { transform: translateX(2px)  translateY(-2px) scaleX(calc(0.97 * var(--flip, 1))) scaleY(1.03) rotate(2deg); }
      100% { transform: translateX(0px)  translateY(0px)  scaleX(var(--flip, 1))          scaleY(1)    rotate(0deg); }
    }
    /* Avatar-Zelle darf überlaufen */
    .dg-cell.dg-current { overflow: visible; }

    /* ── Flur-Dekorationen (NPCs + Pflanzen) im Top-Down-Grid ─────────────── */
    .dg-decor-btn {
      position: absolute;
      inset: 4%;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
    }
    .dg-decor-btn { transition: transform 120ms; }
    .dg-decor-btn:hover { filter: brightness(1.3) drop-shadow(0 0 6px rgba(240,180,0,0.6)); transform: scale(1.08); }
    .dg-decor-btn:active { transform: scale(0.96); }

    /* NPC-Avatar: pixel-art skaliert auf Sub-Tile */
    .dg-decor-avatar {
      width: 100% !important;
      height: 100% !important;
      image-rendering: pixelated;
      animation: dg-dance 1.8s ease-in-out infinite;
      transform-origin: center bottom;
    }

    /* Sprechblase über Flur-Dekorationen */
    .dg-cell.dg-speech-active { overflow: visible; z-index: 10; }
    .dg-speech-bubble {
      position: absolute;
      bottom: 115%;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      color: #111;
      font-size: 0.78em;
      font-weight: 600;
      line-height: 1.35;
      padding: 6px 10px;
      border-radius: 9px;
      white-space: normal;
      width: max-content;
      max-width: 160px;
      text-align: center;
      z-index: 30;
      pointer-events: none;
      box-shadow: 0 3px 10px rgba(0,0,0,0.55);
      animation: dg-bubble-pop 0.18s cubic-bezier(0.34,1.56,0.64,1);
    }
    .dg-qm-badge {
      position: absolute;
      bottom: 108%;
      left: 50%;
      background: #f59e0b;
      color: #fff;
      font-size: 0.85em;
      font-weight: 900;
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 31;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.45);
      animation: dg-qm-waber 1.8s ease-in-out infinite;
    }
    @keyframes dg-qm-waber {
      0%   { transform: translateX(-50%) translateY(0px)  scale(1)    rotate(-5deg); }
      25%  { transform: translateX(-50%) translateY(-5px) scale(1.06) rotate(0deg);  }
      50%  { transform: translateX(-50%) translateY(-8px) scale(1.10) rotate(5deg);  }
      75%  { transform: translateX(-50%) translateY(-4px) scale(1.05) rotate(1deg);  }
      100% { transform: translateX(-50%) translateY(0px)  scale(1)    rotate(-5deg); }
    }
    .dg-qm-badge.is-solved {
      background: #22c55e;
      font-size: 0.95em;
      animation: dg-qm-solved-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @keyframes dg-qm-solved-appear {
      0%   { transform: translateX(-50%) scale(0) rotate(-20deg); }
      100% { transform: translateX(-50%) scale(1) rotate(0deg); }
    }
    .dg-speech-bubble::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #fff;
    }
    @keyframes dg-bubble-pop {
      from { opacity: 0; transform: translateX(-50%) scale(0.7); }
      to   { opacity: 1; transform: translateX(-50%) scale(1); }
    }

    /* Angehörige-Buff-Sprite: steht rechts neben dem Spieler, leicht nach hinten versetzt */
    .dg-angehoerige-wrap {
      left: 68% !important;
      bottom: 2px !important;
      animation: dg-dance 2.2s ease-in-out infinite !important;
      z-index: 2 !important;
    }

    /* Companion-Avatare folgen dem Spieler */
    @keyframes dg-companion-step {
      0%   { transform: translateX(-50%) scale(0.80); }
      30%  { transform: translateX(-50%) scaleX(1.08) scaleY(0.68); }
      65%  { transform: translateX(-50%) scaleX(0.76) scaleY(0.88); }
      100% { transform: translateX(-50%) scale(0.80); }
    }
    .dg-companion-wrap {
      position: absolute;
      bottom: 0;
      transform: translateX(-50%) scale(0.80);
      transform-origin: bottom center;
      pointer-events: none;
      z-index: 3;
    }
    .dg-companion-wrap.is-stepping {
      animation: dg-companion-step 0.28s ease-out forwards;
    }

    /* ── Flur-Figuren: Patienten (☹️ laufen auf den Spieler zu) & Schüler (📖) ───────── */
    .dg-cell.dg-has-field-ent { overflow: visible; z-index: 6; }
    .dg-field-ent {
      position: absolute; inset: 4%;
      display: flex; align-items: center; justify-content: center;
      z-index: 4; pointer-events: none;
    }
    .dg-field-ent .dg-decor-npc-wrap { animation: none; }
    .dg-ent-mark {
      position: absolute; bottom: 100%; left: 50%;
      transform: translateX(-50%);
      font-size: 1.7rem; line-height: 1; z-index: 31;
      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
      animation: dgEntMark 1.8s ease-in-out infinite;
    }
    .ent-chase .dg-ent-mark { animation: dgEntMarkAngry 0.45s ease-in-out infinite; }
    .ent-chase .dg-decor-npc-wrap { animation: dgEntBob 0.4s ease-in-out infinite; }
    .ent-alert .dg-ent-mark { animation: dgEntMarkAlert 0.35s ease-out; }
    .ent-alert .dg-decor-npc-wrap { animation: dgEntStartle 0.35s ease-out; }
    .ent-lost .dg-ent-mark { animation: dgEntMarkLost 1.1s ease-in-out infinite; }
    .ent-return .dg-decor-npc-wrap { animation: dgEntBob 0.7s ease-in-out infinite; }
    .dg-ent-student .dg-ent-mark { animation: dgEntMarkBook 2.2s ease-in-out infinite; }
    .dg-ent-slide { animation: dgEntSlide 0.22s ease-out; }
    @keyframes dgEntSlide { from { transform: translate(var(--sx, 0), var(--sy, 0)); } to { transform: translate(0, 0); } }
    @keyframes dgEntMark { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
    @keyframes dgEntMarkAngry { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-8deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(8deg) scale(1.12); } }
    @keyframes dgEntMarkLost { 0%, 100% { transform: translateX(-50%) rotate(-12deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(12deg); } }
    @keyframes dgEntMarkBook { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
    @keyframes dgEntMarkAlert { 0% { transform: translateX(-50%) scale(0.2); } 60% { transform: translateX(-50%) translateY(-6px) scale(1.4); } 100% { transform: translateX(-50%) scale(1); } }
    @keyframes dgEntStartle { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
    @keyframes dgEntBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
    @media (prefers-reduced-motion: reduce) { .dg-field-ent, .dg-field-ent * { animation: none !important; } }

    /* NPC im Top-Down-Grid: Pixel-Avatar skaliert wie Spieler/Patienten */
    .dg-decor-npc-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: bottom center;
      pointer-events: none;
      animation: dg-dance 1.8s ease-in-out infinite;
    }
    .dg-decor-npc-avatar {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
    @keyframes dg-npc-hop {
      /* translate/-50% und scale werden jetzt via individuelle Eigenschaften
         gesetzt, Keyframe animiert nur noch die Y-Bewegung und leichtes Squash.
         scaleX trägt --flip mit, damit ein nach links/rechts gespiegelter NPC
         beim Hüpfen nicht kurz in die falsche Richtung zurückklappt. */
      0%   { transform: translateY(0)     scaleX(var(--flip, 1))          scaleY(1); }
      30%  { transform: translateY(-14px) scaleX(calc(0.94 * var(--flip, 1))) scaleY(1.06); }
      55%  { transform: translateY(-4px)  scaleX(calc(1.07 * var(--flip, 1))) scaleY(0.94); }
      75%  { transform: translateY(-8px)  scaleX(calc(0.97 * var(--flip, 1))) scaleY(1.03); }
      100% { transform: translateY(0)     scaleX(var(--flip, 1))          scaleY(1); }
    }
    .dg-decor-npc-wrap.is-hopping {
      animation: dg-npc-hop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .dg-decor-npc-avatar {
      /* Pixel-Avatar hat seine eigene Größe (54×74px), der Wrap skaliert ihn */
    }

    /* Mini-Sprite: skalierter Wrapper für Original-CSS-Grafiken im Top-Down-Grid */
    .dg-decor-mini-sprite {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 192px;
      height: 207px;
      transform: translateX(-50%) scale(0.27);
      transform-origin: bottom center;
      pointer-events: none;
    }
    .dg-decor-mini-sprite.decor-pflanze {
      width: 80px;
      height: 120px;
      transform: translateX(-50%) scale(0.55);
    }
    .dg-decor-mini-sprite.decor-pflanze-klein {
      height: 80px;
      width: 60px;
    }
    .dg-decor-mini-sprite .decor-body {
      position: absolute !important;
      bottom: 0 !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
    }
    /* idle sway animation for mini sprites */
    .dg-decor-btn:not(:hover) .dg-decor-mini-sprite {
      animation: dg-plant-sway 2.8s ease-in-out infinite;
    }
    @keyframes dg-plant-sway {
      0%,100% { transform: translateX(-50%) scale(0.27) rotate(-2deg); }
      50%      { transform: translateX(-50%) scale(0.27) rotate(2deg); }
    }
    .dg-decor-btn:not(:hover) .dg-decor-mini-sprite.decor-pflanze {
      animation: dg-plant-sway-s 2.4s ease-in-out infinite;
    }
    @keyframes dg-plant-sway-s {
      0%,100% { transform: translateX(-50%) scale(0.55) rotate(-3deg); }
      50%      { transform: translateX(-50%) scale(0.55) rotate(3deg); }
    }

    /* ── Dubioser Werbeaufsteller (Flur-Schrein) ──────────────────────────── */
    /* Kräftig leuchtender Aufsteller: Tafel auf Fuß, Glüh-Aura, Funkeln. */
    .dg-decor-mini-sprite.decor-shrine {
      width: 120px;
      height: 150px;
      transform: translateX(-50%) scale(0.5);
    }
    /* Eigene Schwing-Animation — die generische dg-plant-sway würde die Skalierung
       auf 0.27 zurücksetzen. */
    .dg-decor-btn:not(:hover) .dg-decor-mini-sprite.decor-shrine {
      animation: dg-shrine-sway 2.6s ease-in-out infinite;
    }
    @keyframes dg-shrine-sway {
      0%, 100% { transform: translateX(-50%) scale(0.5) rotate(-2.5deg); }
      50%      { transform: translateX(-50%) scale(0.5) rotate(2.5deg); }
    }
    .dg-decor-mini-sprite.decor-shrine .decor-body {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 92px;
      height: 118px;
      transform: translateX(-50%);
      /* Fuß */
      background:
        linear-gradient(#c07a2a, #6b3f12) center bottom / 20px 46px no-repeat,
        /* Tafel */
        linear-gradient(135deg, #fff2b0 0%, #ffd23f 38%, #ff7a1a 70%, #ff2e88 100%) center top / 92px 84px no-repeat;
      border-radius: 6px;
      box-shadow:
        0 0 14px 4px rgba(255, 200, 60, 0.9),
        0 0 30px 10px rgba(255, 120, 180, 0.55),
        inset 0 0 8px rgba(255, 255, 255, 0.8);
      animation: dg-shrine-pulse 1.6s ease-in-out infinite;
    }
    .dg-decor-mini-sprite.decor-shrine .decor-body::before {
      /* „%“-Werbezeichen auf der Tafel */
      content: "%";
      position: absolute;
      top: 6px; left: 0; right: 0;
      text-align: center;
      font-size: 46px;
      font-weight: 900;
      line-height: 84px;
      color: #7a1f14;
      text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
    }
    .dg-decor-mini-sprite.decor-shrine .decor-body::after {
      /* Funkeln oben rechts */
      content: "";
      position: absolute;
      top: -6px; right: 2px;
      width: 16px; height: 16px;
      background:
        radial-gradient(circle, #fff 0 22%, transparent 24%),
        conic-gradient(from 0deg, transparent 0 42%, #fff 46% 54%, transparent 58% 100%);
      filter: drop-shadow(0 0 6px #fff);
      animation: dg-shrine-sparkle 1.9s linear infinite;
    }
    .dg-decor-mini-sprite.decor-shrine.decor-shrine-used .decor-body {
      filter: grayscale(0.85) brightness(0.6);
      box-shadow: none;
      animation: none;
      opacity: 0.7;
    }
    .dg-decor-mini-sprite.decor-shrine.decor-shrine-used .decor-body::after { display: none; }
    @keyframes dg-shrine-pulse {
      0%, 100% { box-shadow: 0 0 12px 3px rgba(255,200,60,0.8), 0 0 26px 8px rgba(255,120,180,0.45), inset 0 0 8px rgba(255,255,255,0.8); }
      50%      { box-shadow: 0 0 20px 7px rgba(255,220,90,1),   0 0 44px 16px rgba(255,140,200,0.7), inset 0 0 12px rgba(255,255,255,0.95); }
    }
    @keyframes dg-shrine-sparkle {
      0%   { transform: rotate(0deg)   scale(0.7); opacity: 0.5; }
      50%  { transform: rotate(180deg) scale(1.2); opacity: 1; }
      100% { transform: rotate(360deg) scale(0.7); opacity: 0.5; }
    }

    /* Leuchtender Boden-Ring unter der Figur — schrumpft mit dem Segenstimer.
       Die Ellipse wird rein per radial-gradient gezeichnet (Element füllt die
       Zelle, kein eigenes Sizing) — robust gegen die Avatar-Flexbox.
       --shrine-frac 1→0 skaliert über background-size,
       --shrine-glow = Farbe des aktiven Segens. */
    .dg-shrine-ring {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
      --sf: calc(0.35 + 0.65 * var(--shrine-frac, 1));
      background-image: radial-gradient(ellipse at center,
        transparent 0 42%,
        color-mix(in srgb, var(--shrine-glow, #f0b400) 85%, transparent) 50% 58%,
        color-mix(in srgb, var(--shrine-glow, #f0b400) 22%, transparent) 68%,
        transparent 80%);
      background-repeat: no-repeat;
      background-position: center 68%;
      background-size: calc(96% * var(--sf)) calc(46% * var(--sf));
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--shrine-glow, #f0b400) 60%, transparent));
      animation: dg-shrine-ring-pulse 1.8s ease-in-out infinite;
    }
    @keyframes dg-shrine-ring-pulse {
      0%, 100% { opacity: 0.75; }
      50%      { opacity: 1; }
    }

    /* Diablo-Style Restzeit-Zifferblatt oben links in der Szene. */
    .shrine-hud {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 30;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px 5px 5px;
      border-radius: 999px;
      background: rgba(15, 20, 30, 0.72);
      backdrop-filter: blur(3px);
      border: 1.5px solid color-mix(in srgb, var(--shrine-glow, #f0b400) 70%, #0a0f18);
      box-shadow: 0 0 14px 1px color-mix(in srgb, var(--shrine-glow, #f0b400) 45%, transparent);
      color: #fff;
      font-size: 0.72rem;
      pointer-events: none;
      max-width: 62%;
    }
    .shrine-hud-dial {
      position: relative;
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      /* Restanteil als konischer Sektor (--shrine-deg 360→0) */
      background: conic-gradient(
        var(--shrine-glow, #f0b400) var(--shrine-deg, 360deg),
        rgba(255, 255, 255, 0.12) 0);
    }
    .shrine-hud-dial::after {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: rgba(15, 20, 30, 0.92);
    }
    .shrine-hud-icon {
      position: relative;
      z-index: 1;
      font-size: 15px;
      line-height: 1;
    }
    .shrine-hud-body {
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.15;
    }
    .shrine-hud-label {
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .shrine-hud-time {
      font-variant-numeric: tabular-nums;
      color: color-mix(in srgb, var(--shrine-glow, #f0b400) 80%, #fff);
      font-weight: 700;
    }
    .shrine-hud.is-ending {
      animation: shrine-hud-blink 0.8s steps(2, jump-none) infinite;
    }
    @keyframes shrine-hud-blink {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }

    @media (prefers-reduced-motion: reduce) {
      .dg-decor-mini-sprite.decor-shrine .decor-body,
      .dg-decor-mini-sprite.decor-shrine .decor-body::after,
      .dg-shrine-ring,
      .shrine-hud.is-ending {
        animation: none;
      }
    }

    /* Truhen-Sprites im Top-Down-Grid */
    .dg-chest-sprite {
      position: absolute;
      inset: 4% 6%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    /* Pixel-Sprite (SVG aus chestSvg): Holz = braun, Metall = Stahl, Gold = glänzend mit Schimmer */
    .dg-chest-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 2px 0 rgba(0,0,0,0.38));
    }
    /* Pixel-Dekor (PX_SPRITES): Betten, Pflegewagen, Rollstuhl … */
    .dg-px-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35)); }
    .dg-px-bed { position: absolute; inset: 16% 3% 6% 3%; display: flex; align-items: flex-end; z-index: 2; }
    .dg-px-bed.is-cleared { opacity: 0.5; filter: grayscale(0.6); }
    .dg-px-decor { position: absolute; inset: 6% 4% 2% 4%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
    .dg-prop-px { opacity: 1; align-items: flex-end; }
    .dg-prop-px .dg-px-svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); }
    .px-fire .dg-px-svg { animation: pxFire 0.9s steps(2) infinite; filter: drop-shadow(0 0 6px rgba(255,150,40,0.8)); }
    @keyframes pxFire { 0% { filter: drop-shadow(0 0 5px rgba(255,150,40,0.7)) brightness(1); } 50% { filter: drop-shadow(0 0 9px rgba(255,190,70,0.95)) brightness(1.12); } 100% { filter: drop-shadow(0 0 5px rgba(255,150,40,0.7)) brightness(1); } }
    .px-crystal .dg-px-svg { animation: pxCrystal 2.2s ease-in-out infinite; }
    @keyframes pxCrystal { 0%,100% { filter: drop-shadow(0 0 3px rgba(120,200,255,0.5)); } 50% { filter: drop-shadow(0 0 9px rgba(170,140,255,0.95)); } }
    .px-used .dg-px-svg { animation: none; filter: grayscale(0.85) brightness(0.7); }
    .px-shrine .dg-px-svg { filter: drop-shadow(0 0 5px rgba(240,180,0,0.65)); }
    .px-dino .dg-px-svg { animation: pxBob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
    @keyframes pxBob { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } }
    @media (prefers-reduced-motion: reduce) { .px-fire .dg-px-svg, .px-crystal .dg-px-svg, .px-dino .dg-px-svg { animation: none; } }
    /* Kontakt vor dem Kampf: ⚔️ erscheint groß über dem Gegner, der kurz zittert */
    .ent-contact .dg-ent-mark { animation: dgEntMarkAlert 0.3s ease-out; font-size: 2.1rem; }
    .ent-contact .dg-decor-npc-wrap { animation: dgEntStartle 0.35s ease-out; }
    .dg-player-wrap.res-pickup { animation: dgResPickup 0.28s ease-out; }
    @keyframes dgResPickup { 0% { transform: scale(1); } 40% { transform: scale(1.12); filter: brightness(1.35); } 100% { transform: scale(1); } }
    /* Ressourcen, die aus einer Truhe in den Spieler fliegen */
    .fly-res { position: fixed; z-index: 9999; left: 0; top: 0; pointer-events: none; font-size: 1.7rem; line-height: 1; will-change: transform, opacity; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
    .dg-chest-t-metall .dg-chest-svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 3px rgba(190,215,240,0.45)); }
    .dg-chest-t-gold .dg-chest-svg   { animation: dg-chest-gold-glow 1.8s ease-in-out infinite; }
    .dg-chest-t-gold.dg-chest-open .dg-chest-svg { animation: none; filter: drop-shadow(0 0 5px rgba(255,215,64,0.7)); }
    @keyframes dg-chest-gold-glow {
      0%,100% { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.38)) drop-shadow(0 0 3px rgba(255,215,64,0.55)); }
      50%     { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.38)) drop-shadow(0 0 9px rgba(255,230,110,1)); }
    }
    .dg-chest-open::before {
      content: "✨";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75em;
      line-height: 1;
      pointer-events: none;
      animation: dg-chest-sparkle 0.6s ease-out forwards;
    }
    @keyframes dg-chest-sparkle {
      0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    }

    /* Sub-Tile-Objekt: füllt fast die ganze Zelle, klarer Rahmen */
    /* Deko in mehrzelligen Räumen: reine Optik, keine Kollision */
    .dg-prop {
      position: absolute;
      inset: 12%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1em;
      line-height: 1;
      opacity: 0.85;
      pointer-events: none;
      z-index: 1;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    }

    .dg-subtile-obj {
      position: absolute;
      inset: 8% 8%;
      border: 2px solid;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1em;
      line-height: 1;
      z-index: 2;
    }

    /* ── Patientenbett (Seitenansicht) ──────────────────────────────────────── */
    .dg-bed {
      position: absolute;
      bottom: 24%; left: 5%; right: 5%;
      height: 42%;
      z-index: 2;
      overflow: visible;
      /* Kopfende | Matratze | Fußende */
      background: linear-gradient(90deg,
        #8b5e3c 0 14%,
        #f0ece4 14% 84%,
        #7a4828 84% 100%
      );
      border: 2px solid #4a2c10;
      border-radius: 3px 3px 1px 1px;
    }
    .dg-bed::before { /* Kissen + Decke auf der Matratze */
      content: "";
      position: absolute;
      inset: 10% 15% 10% 15%;
      background: linear-gradient(90deg,
        #f8f2ea 0 34%,    /* Kissen */
        #7bb8e8 34% 100%  /* Decke */
      );
      border-radius: 1px;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .dg-bed::after { /* Beine */
      content: "";
      position: absolute;
      top: 100%; left: 13%; right: 13%;
      height: 50%;
      background: linear-gradient(90deg,
        #6b4020 0 20%, transparent 20% 80%, #6b4020 80% 100%
      );
    }
    .dg-bed.dg-bed-cleared {
      opacity: 0.5;
      filter: grayscale(0.6);
    }

    /* ── Pausenraumtisch (Seitenansicht) ─────────────────────────────────── */
    .dg-table {
      position: absolute;
      bottom: 5%; left: 8%; right: 8%;
      height: 58%;
      z-index: 2;
      overflow: visible;
      /* Beine: zwei dünne Säulen über die volle Höhe */
      background: linear-gradient(90deg,
        transparent 0 9%,
        #9a7050 9% 23%,
        transparent 23% 77%,
        #9a7050 77% 91%,
        transparent 91%
      );
    }
    .dg-table::before { /* Tischplatte (oberes Drittel) */
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 28%;
      background: #c8a07a;
      border: 2px solid #7a5238;
      border-radius: 2px;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), 0 2px 0 #9a7050;
    }
    .dg-table::after { /* Kaffeebecher auf der Platte */
      content: "☕";
      position: absolute;
      bottom: 74%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.58em;
      line-height: 1;
    }
    .dg-table.dg-table-cleared {
      opacity: 0.45;
    }
    .dg-table.dg-table-cleared::after { content: ""; }

    /* ── Discovery-Toast beim Betreten eines Ereignisraums ───────────────── */
    .dg-room-toast {
      position: fixed; top: 28%; left: 50%;
      transform: translateX(-50%);
      background: rgba(10,10,10,0.88);
      color: #fff; font-weight: 700; font-size: 1.05em;
      padding: 8px 20px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.18);
      pointer-events: none; z-index: 9999;
      white-space: nowrap;
      animation: dg-toast-anim 2.6s ease-out forwards;
    }
    @keyframes dg-toast-anim {
      0%   { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.88); }
      14%  { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1); }
      75%  { opacity: 1; }
      100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    }
    /* ── Combo-Banner ─────────────────────────────────────────────────────── */
    .combo-banner {
      position: fixed; top: 38%; left: 50%;
      transform: translateX(-50%) scale(0.6);
      pointer-events: none; z-index: 9998;
      text-align: center; white-space: nowrap;
      animation: combo-pop 1.8s cubic-bezier(0.22,1,0.36,1) forwards;
    }

    .combo-banner .combo-text {
      display: block;
      font-size: 3rem; font-weight: 900; letter-spacing: 0.04em;
      text-shadow: 0 0 30px currentColor, 0 4px 0 rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,1);
      line-height: 1;
    }

    .combo-banner .combo-sub {
      display: block;
      font-size: 0.9rem; font-weight: 700; letter-spacing: 0.15em;
      text-transform: uppercase; opacity: 0.85;
      text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    }

    .combo-banner.combo-normal .combo-text { color: #fff; }
    .combo-banner.combo-gold   .combo-text { color: var(--gold); }
    .combo-banner.combo-ultra  .combo-text {
      background: linear-gradient(90deg,#f87171,#fb923c,#fbbf24,#34d399,#60a5fa,#a78bfa,#f472b6);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; filter: drop-shadow(0 0 12px rgba(255,200,80,0.7));
      animation: combo-pop 1.8s cubic-bezier(0.22,1,0.36,1) forwards,
                 combo-rainbow 0.6s linear infinite;
    }

    @keyframes combo-pop {
      0%   { opacity: 0; transform: translateX(-50%) scale(0.5) rotate(-4deg); }
      18%  { opacity: 1; transform: translateX(-50%) scale(1.18) rotate(2deg); }
      30%  { transform: translateX(-50%) scale(1) rotate(0deg); }
      70%  { opacity: 1; transform: translateX(-50%) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-20px); }
    }

    @keyframes combo-rainbow {
      0%   { filter: hue-rotate(0deg)   drop-shadow(0 0 12px rgba(255,200,80,0.7)); }
      100% { filter: hue-rotate(360deg) drop-shadow(0 0 12px rgba(255,200,80,0.7)); }
    }

    .dg-player-dot {
      width: 40%; aspect-ratio: 1;
      border-radius: 50%;
      background: var(--dg-player-ring);
      box-shadow: 0 0 10px 4px var(--dg-player-ring);
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }

    /* Spieler-Zelle: kein Glow mehr */
    .dg-cell.dg-current { box-shadow: none; }

    /* ── Sprites (CSS-only Objekte in Räumen) ───────────────────────────────── */
    .dg-sprite {
      position: absolute;
      border-radius: 3px;
    }
    /* Bett (Patientenzimmer) */
    .dg-sprite-bed {
      bottom: 18%; left: 25%; right: 25%; height: 40%;
      background: #4466aa;
      border: 2px solid #88aadd;
      box-shadow: inset 0 -6px 0 rgba(0,0,0,0.3);
    }
    .dg-sprite-bed::before {
      content: "";
      position: absolute;
      top: -6px; left: 10%; right: 10%; height: 8px;
      background: #ccddff;
      border-radius: 3px 3px 0 0;
    }
    /* Boss */
    .dg-sprite-boss {
      bottom: 10%; left: 30%; right: 30%; height: 50%;
      background: linear-gradient(180deg, #880000 0%, #440000 100%);
      border: 2px solid #ff4444;
      border-radius: 4px;
      box-shadow: 0 0 16px 4px rgba(200,0,0,0.5);
      animation: dg-boss-pulse 1.5s ease-in-out infinite;
    }
    @keyframes dg-boss-pulse { 0%,100% { opacity:.8; } 50% { opacity:1; } }
    /* Shop-Theke */
    .dg-sprite-shop {
      bottom: 15%; left: 15%; right: 15%; height: 30%;
      background: linear-gradient(180deg, #8b6914 0%, #5a4008 100%);
      border: 2px solid #ddaa44;
      box-shadow: inset 0 -4px 0 rgba(0,0,0,0.4);
    }
    .dg-sprite-shop::before {
      content: "";
      position: absolute;
      top: -8px; left: 20%; right: 20%; height: 10px;
      background: #ffcc44;
      border-radius: 2px;
      box-shadow: 0 0 8px 2px rgba(255,200,0,0.6);
    }
    /* Truhe */
    .dg-sprite-chest {
      bottom: 22%; left: 30%; right: 30%; height: 35%;
      background: linear-gradient(180deg, #8b5a0a 0%, #5a3800 100%);
      border: 2px solid #ddaa44;
      border-radius: 3px;
    }
    .dg-sprite-chest::before {
      content: "";
      position: absolute;
      top: -6px; left: -2px; right: -2px; height: 8px;
      background: #aa7020;
      border: 2px solid #ddaa44;
      border-radius: 3px 3px 0 0;
    }
    .dg-sprite-chest::after {
      content: "";
      position: absolute;
      top: 40%; left: 40%; right: 40%; bottom: 20%;
      background: #ffcc44;
      border-radius: 1px;
      box-shadow: 0 0 4px rgba(255,200,0,0.8);
    }
    /* Tisch (Pausenraum) */
    .dg-sprite-table {
      bottom: 20%; left: 20%; right: 20%; height: 25%;
      background: #3a6040;
      border: 2px solid #66aa77;
      border-radius: 4px;
    }
    .dg-sprite-table::before {
      content: "";
      position: absolute;
      top: -10px; left: 10%; right: 10%; height: 12px;
      background: #4a8050;
      border: 2px solid #88cc99;
      border-radius: 3px;
    }
    /* Treppe */
    .dg-sprite-stairs {
      bottom: 10%; left: 20%; right: 20%; height: 60%;
      background: repeating-linear-gradient(
        180deg,
        #aaaa40 0px, #aaaa40 6px,
        #666620 6px, #666620 12px
      );
      border: 2px solid #dddd66;
      border-radius: 3px;
      box-shadow: 0 0 14px 3px rgba(220,200,40,0.5);
    }
    /* Gecleared */
    .dg-sprite-cleared {
      top: 30%; left: 35%; right: 35%; height: 40%;
      border-bottom: 3px solid rgba(255,255,255,0.25);
      border-right:  3px solid rgba(255,255,255,0.25);
      transform: rotate(45deg);
      transform-origin: 60% 60%;
      border-radius: 0;
    }

    /* ── Exit-Glow an Durchgangsseiten ──────────────────────────────────────── */
    .dg-exit-glow {
      position: absolute;
      background: var(--dg-door-col);
      box-shadow: 0 0 12px 4px var(--dg-door-col);
      border-radius: 2px;
      z-index: 4;
      opacity: 0.85;
    }
    .dg-exit-north { top: 0;    left: 15%; right: 15%; height: 4px; }
    .dg-exit-south { bottom: 0; left: 15%; right: 15%; height: 4px; }
    .dg-exit-west  { left: 0;   top: 15%;  bottom: 15%; width: 4px; }
    .dg-exit-east  { right: 0;  top: 15%;  bottom: 15%; width: 4px; }

    /* ── Klickbare Nachbarn ──────────────────────────────────────────────────── */
    .dg-cell.dg-clickable { cursor: pointer; }
    .dg-cell.dg-clickable::after {
      content: "";
      position: absolute; inset: 0;
      background: rgba(255,255,255,0);
      transition: background 0.1s;
      pointer-events: none;
      z-index: 10;
    }
    .dg-cell.dg-clickable:hover::after { background: rgba(255,255,255,0.12); }


    .corridor-decor {
      appearance: none;
      background: transparent;
      border: 0;
      bottom: 8px;
      cursor: pointer;
      height: 207px;
      position: absolute;
      /* default: off-centre to the right (facing north) */
      right: 14%;
      transform: none;
      transform-origin: bottom center;
      transition: right 220ms ease, left 220ms ease, transform 220ms ease;
      width: 192px;
    }

    /* ── Perspective shift per facing direction ────────────────────────────── */

    /* Facing north  → decoration on right wall, close & full-size            */
    .scene.facing-north .corridor-decor {
      left: auto;
      right: 12%;
      transform: scale(1.5);
    }

    /* Facing east   → turned right; wall object slides to far right, smaller */
    .scene.facing-east .corridor-decor {
      left: auto;
      right: 5%;
      transform: scale(1.08);
      transform-origin: bottom right;
    }

    /* Facing south  → 180°; object now on opposite (left) wall, far/small    */
    .scene.facing-south .corridor-decor {
      left: 8%;
      right: auto;
      transform: scale(0.93);
      transform-origin: bottom left;
    }

    /* Facing west   → turned left; object coming back on left, mid-size      */
    .scene.facing-west .corridor-decor {
      left: 14%;
      right: auto;
      transform: scale(1.26);
      transform-origin: bottom left;
    }

    .corridor-decor:hover {
      filter: drop-shadow(0 0 10px rgba(244, 185, 66, 0.55));
    }

    .corridor-decor .pixel-avatar {
      bottom: 0;
      left: 50%;
      position: absolute;
      transform: translateX(-50%) scale(1.7);
      transform-origin: bottom center;
    }

    #item-target-picker {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .item-picker-box {
      background: var(--panel);
      border: 2px solid var(--gold);
      border-radius: 10px;
      padding: 1.2rem 1.5rem;
      min-width: 220px;
      width: min(420px, calc(100vw - 24px));
      max-height: calc(100dvh - 24px);
      box-sizing: border-box;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: .7rem;
    }
    .item-picker-title {
      font-weight: bold;
      color: var(--gold);
      font-size: .95rem;
      text-align: center;
    }
    .item-picker-members {
      display: flex;
      flex-direction: column;
      gap: .4rem;
    }
    .item-picker-member {
      background: var(--btn);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .5rem .8rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      color: inherit;
      font-size: .9rem;
      transition: background .15s;
      flex-wrap: wrap;
      overflow-wrap: anywhere;
    }
    .item-picker-member:hover { background: var(--btn-hover); }
    .item-picker-member:disabled { opacity: .45; cursor: not-allowed; }
    .item-picker-member.item-picker-ko em { color: #ef4444; font-style: normal; font-size: .75rem; }
    .picker-stats { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
    .picker-hp { color: var(--muted); font-size: .8rem; }
    .picker-sp { color: #60a5fa; font-size: .8rem; }
    .item-picker-cancel {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: .35rem;
      cursor: pointer;
      color: var(--muted);
      font-size: .8rem;
      transition: color .15s;
    }
    .item-picker-cancel:hover { color: var(--text); }
    .combat-item-effect { display: block; font-size: .8em; font-weight: normal; margin-top: .2rem; }

    .corridor-decor:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 4px;
    }

    /* Objekte ohne Figur brauchen negativen bottom-Offset, weil .room-visual bei 24%
       über dem Szenenboden hängt — sollen auf dem Boden stehen */
    .corridor-decor.decor-cart,
    .corridor-decor.decor-wheelchair {
      bottom: -45px;
    }
    .corridor-decor.decor-pflanze-gross,
    .corridor-decor.decor-pflanze-klein,
    .corridor-decor.decor-pflanze-kaktus {
      bottom: -55px;
    }

    .decor-speech {
      background: rgba(248, 250, 252, 0.95);
      border: 2px solid rgba(244, 185, 66, 0.55);
      border-radius: 8px;
      color: #111827;
      font-size: 0.78rem;
      font-weight: 900;
      left: 50%;
      line-height: 1.2;
      max-width: 220px;
      padding: 8px 10px;
      position: absolute;
      text-align: center;
      top: -28px;
      transform: translateX(-50%);
      width: max-content;
      z-index: 20;
    }

    .decor-doctor .decor-body,
    .decor-cart .decor-body,
    .decor-wheelchair .decor-body,
    .decor-pflegekraft .decor-body,
    .decor-reinigungskraft .decor-body,
    .decor-handwerker .decor-body,
    .decor-pflanze .decor-body {
      bottom: 0;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
    }

    .decor-doctor .decor-body {
      background:
        linear-gradient(180deg, #3b2416 0 12px, transparent 12px),
        linear-gradient(180deg, transparent 0 16px, #f2c7a5 16px 40px, transparent 40px),
        linear-gradient(180deg, transparent 0 44px, #f8fafc 44px 94px, transparent 94px),
        linear-gradient(90deg, transparent 0 19px, #0f172a 19px 34px, transparent 34px),
        linear-gradient(90deg, transparent 0 45px, #0f172a 45px 60px, transparent 60px);
      height: 132px;
      image-rendering: pixelated;
      width: 82px;
    }

    .decor-doctor .decor-body::before {
      background:
        linear-gradient(90deg, transparent 0 18px, #1f2937 18px 23px, transparent 23px 34px, #1f2937 34px 39px, transparent 39px),
        linear-gradient(180deg, transparent 0 36px, #f2c7a5 36px 84px, transparent 84px);
      content: "";
      height: 96px;
      left: 12px;
      position: absolute;
      top: 0;
      width: 58px;
    }

    .decor-doctor .decor-body::after {
      background:
        linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 34px, #cbd5e1 34px 40px),
        linear-gradient(90deg, transparent 0 17px, #ef4444 17px 23px, transparent 23px),
        linear-gradient(180deg, transparent 0 18px, #e2e8f0 18px 62px, #1f2937 62px 90px);
      box-shadow:
        -27px -12px 0 -6px #f2c7a5,
        27px -12px 0 -6px #f2c7a5;
      content: "";
      height: 90px;
      left: 50%;
      position: absolute;
      top: 42px;
      transform: translateX(-50%);
      width: 68px;
    }

    .decor-cart .decor-body {
      background: linear-gradient(180deg, #94a3b8, #475569);
      border: 4px solid #1f2937;
      border-radius: 8px;
      height: 88px;
      width: 104px;
    }

    .decor-cart .decor-body::before {
      background:
        linear-gradient(90deg, transparent 0 28px, #1f2937 28px 32px, transparent 32px 64px, #1f2937 64px 68px, transparent 68px),
        linear-gradient(180deg, #e2e8f0 0 18px, #64748b 18px 22px, #e2e8f0 22px 44px, #64748b 44px 48px, #e2e8f0 48px);
      content: "";
      height: 58px;
      left: 10px;
      position: absolute;
      top: 12px;
      width: 78px;
    }

    .decor-cart .decor-body::after {
      background: #111827;
      border-radius: 50%;
      bottom: -13px;
      box-shadow: 68px 0 0 #111827;
      content: "";
      height: 20px;
      left: 10px;
      position: absolute;
      width: 20px;
    }

    .decor-wheelchair .decor-body {
      border: 7px solid #1f2937;
      border-left-color: #60a5fa;
      border-radius: 50%;
      height: 86px;
      width: 86px;
    }

    .decor-wheelchair .decor-body::before {
      background:
        linear-gradient(90deg, #1f2937 0 8px, transparent 8px),
        linear-gradient(180deg, #60a5fa 0 38px, transparent 38px);
      content: "";
      height: 78px;
      left: 44px;
      position: absolute;
      top: -44px;
      transform: rotate(-8deg);
      width: 58px;
    }

    .decor-wheelchair .decor-body::after {
      background: #1f2937;
      bottom: -6px;
      content: "";
      height: 8px;
      left: 58px;
      position: absolute;
      transform: rotate(24deg);
      width: 58px;
    }

    /* Zimmerpflanzen */
    .decor-pflanze .decor-body {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      position: relative;
      width: 80px;
      height: 120px;
    }
    /* Topf */
    .decor-pflanze .decor-body::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 28px;
      background: linear-gradient(180deg, #92400e, #78350f);
      border-radius: 0 0 8px 8px;
      clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
    }
    /* Großpflanze: breite Blätter */
    .decor-pflanze-gross .decor-body::before {
      content: "";
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 50px;
      background: #15803d;
      border-radius: 4px;
      box-shadow:
        -22px 10px 0 4px #16a34a, -28px 0px 0 2px #15803d,
        22px 10px 0 4px #16a34a,  28px 0px 0 2px #15803d,
        -10px -10px 0 6px #22c55e, 10px -5px 0 6px #22c55e,
        0px -20px 0 5px #4ade80;
    }
    /* Kleinpflanze: kompakte Blätter */
    .decor-pflanze-klein .decor-body {
      height: 80px;
      width: 60px;
    }
    .decor-pflanze-klein .decor-body::before {
      content: "";
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 28px;
      background: #15803d;
      border-radius: 4px;
      box-shadow:
        -12px 8px 0 3px #16a34a,
        12px 8px 0 3px #16a34a,
        -6px -4px 0 4px #22c55e,
        6px -2px 0 4px #22c55e;
    }
    .decor-pflanze-klein .decor-body::after {
      width: 30px;
      height: 22px;
    }
    /* Kaktus */
    .decor-pflanze-kaktus .decor-body::before {
      content: "";
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 56px;
      background: #16a34a;
      border-radius: 8px 8px 4px 4px;
      box-shadow:
        -18px 20px 0 0 #16a34a, -18px 20px 0 5px #15803d,
        18px 28px 0 0 #16a34a,  18px 28px 0 5px #15803d;
    }

    /* ── Lagerfeuer (Vitalzeichen-Kampagne / Fiebervulkan) ──────────────────── */
    .corridor-decor.decor-lagerfeuer { bottom: -45px; }
    .decor-lagerfeuer .decor-body {
      bottom: 0;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 84px;
      height: 92px;
    }
    /* Steinkreis */
    .decor-lagerfeuer .decor-body::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 78px;
      height: 20px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, #4a4238 0%, #2a251e 70%);
      box-shadow:
        -30px 2px 0 -6px #6b6152, -14px 6px 0 -8px #55493a,
         14px 6px 0 -8px #55493a,  30px 2px 0 -6px #6b6152;
    }
    /* Flamme */
    .decor-lagerfeuer .decor-body::after {
      content: "";
      position: absolute;
      bottom: 14px;
      left: 50%;
      width: 30px;
      height: 46px;
      transform: translateX(-50%);
      background: radial-gradient(circle at 50% 85%, #fff6c8 0%, #ffd23c 30%, #ff8a1a 58%, transparent 72%);
      border-radius: 50% 50% 45% 45% / 65% 65% 40% 40%;
      filter: drop-shadow(0 0 12px rgba(255, 140, 30, 0.85));
      animation: torchFlicker 0.65s ease-in-out infinite alternate;
    }
    .dg-decor-mini-sprite.decor-lagerfeuer {
      width: 84px;
      height: 92px;
      transform: translateX(-50%) scale(0.5);
    }
    /* Eigene (leere) Idle-Animation — verhindert, dass die generische
       dg-plant-sway die Skalierung auf 0.27 zurücksetzt; die Flamme selbst
       flackert bereits über ihre eigene ::after-Animation. */
    .dg-decor-btn:not(:hover) .dg-decor-mini-sprite.decor-lagerfeuer {
      animation: none;
    }

    /* ── Wissens-Kristall (Vitalzeichen-Kampagne): stellt eine leichte Temperatur-Frage ── */
    .corridor-decor.decor-kristall { bottom: -45px; }
    .decor-kristall .decor-body {
      bottom: 0;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 72px;
      height: 96px;
      background: radial-gradient(ellipse at 50% 96%, rgba(110, 231, 255, 0.45) 0, transparent 62%);
    }
    .decor-kristall .decor-body::before {
      content: "";
      position: absolute;
      bottom: 6px;
      left: 50%;
      width: 34px;
      height: 82px;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #e0fbff 0%, #6ee7ff 35%, #8b5cf6 100%);
      clip-path: polygon(50% 0, 100% 28%, 84% 100%, 16% 100%, 0 28%);
      filter: drop-shadow(0 0 8px rgba(110, 231, 255, 0.9));
      animation: kristallPulse 1.6s ease-in-out infinite alternate;
    }
    .decor-kristall .decor-body::after {
      content: "";
      position: absolute;
      bottom: 4px;
      left: 2px;
      width: 22px;
      height: 44px;
      background: linear-gradient(135deg, #c4f1ff, #38bdf8 60%, #7c3aed);
      clip-path: polygon(50% 0, 100% 30%, 80% 100%, 10% 100%, 0 34%);
      opacity: 0.9;
      animation: kristallPulse 1.6s ease-in-out 0.4s infinite alternate;
    }
    @keyframes kristallPulse {
      0%   { filter: brightness(0.9) drop-shadow(0 0 5px rgba(110, 231, 255, 0.6)); }
      100% { filter: brightness(1.25) drop-shadow(0 0 14px rgba(140, 200, 255, 1)); }
    }
    .dg-decor-mini-sprite.decor-kristall {
      width: 72px;
      height: 96px;
      transform: translateX(-50%) scale(0.6);
    }
    .dg-decor-btn:not(:hover) .dg-decor-mini-sprite.decor-kristall { animation: none; }
    /* Aufgebraucht: erloschen und grau */
    .decor-kristall-used .decor-body { filter: grayscale(1) brightness(0.5); background: none; }
    .decor-kristall-used .decor-body::before,
    .decor-kristall-used .decor-body::after { animation: none; filter: none; }

    /* ── Haus-Dino (Vitalzeichen-Kampagne): kleiner Flintstones-Dino, streichelbar ── */
    .corridor-decor.decor-hausdino { bottom: -45px; }
    .decor-hausdino .decor-body {
      bottom: 0;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 100px;
      height: 80px;
      background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M16 50 Q1 48 3 33 Q14 45 28 42 Z' fill='%2322a052' stroke='%2314532d' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='30' y='58' width='11' height='18' rx='4' fill='%2322a052' stroke='%2314532d' stroke-width='2'/%3E%3Crect x='58' y='58' width='11' height='18' rx='4' fill='%2322a052' stroke='%2314532d' stroke-width='2'/%3E%3Cellipse cx='48' cy='46' rx='32' ry='21' fill='%234ade80' stroke='%2314532d' stroke-width='2'/%3E%3Cellipse cx='52' cy='55' rx='20' ry='9' fill='%23bbf7d0'/%3E%3Cpolygon points='27%2C29 33%2C16 40%2C27' fill='%23fb923c' stroke='%239a3412' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='41%2C26 48%2C12 56%2C25' fill='%23fb923c' stroke='%239a3412' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='57%2C28 64%2C16 71%2C30' fill='%23fb923c' stroke='%239a3412' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M66 40 Q68 27 78 25 L80 40 Z' fill='%234ade80' stroke='%2314532d' stroke-width='2' stroke-linejoin='round'/%3E%3Cellipse cx='82' cy='29' rx='15' ry='11' fill='%234ade80' stroke='%2314532d' stroke-width='2'/%3E%3Ccircle cx='86' cy='26' r='3.4' fill='white' stroke='%2314532d' stroke-width='1.2'/%3E%3Ccircle cx='87' cy='26' r='1.5' fill='%23111'/%3E%3Ccircle cx='80' cy='33' r='2.6' fill='%23f9a8d4' opacity='0.75'/%3E%3Cpath d='M85 34 Q91 37 95 32' fill='none' stroke='%2314532d' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='94' cy='27' r='1' fill='%2314532d'/%3E%3C/svg%3E") center / contain no-repeat;
      animation: hausdinoBob 1.1s ease-in-out infinite alternate;
    }
    @keyframes hausdinoBob {
      from { transform: translateX(-50%) translateY(0); }
      to   { transform: translateX(-50%) translateY(-3px) rotate(-1.5deg); }
    }
    .dg-decor-mini-sprite.decor-hausdino {
      width: 100px;
      height: 80px;
      transform: translateX(-50%) scale(0.55);
    }
    .dg-decor-btn:not(:hover) .dg-decor-mini-sprite.decor-hausdino {
      animation: dgDinoBob 1.1s ease-in-out infinite alternate;
    }
    @keyframes dgDinoBob {
      from { transform: translateX(-50%) scale(0.55) translateY(0); }
      to   { transform: translateX(-50%) scale(0.55) translateY(-4px) rotate(-2deg); }
    }

    /* ── Feuerhelm (Brandschutzbeauftragte:r) ───────────────────────────── */
    .head-hut-feuerhelm .px-hair {
      background: var(--headwear);
      border-radius: 10px 10px 2px 2px;
      height: 15px;
      left: 8px;
      top: 0;
      width: 38px;
      box-shadow: 0 28px 0 -9px var(--hair);
    }
    /* Krempe */
    .head-hut-feuerhelm .px-hair::before {
      background: color-mix(in srgb, var(--headwear) 72%, black 28%);
      border-radius: 0 0 3px 3px;
      content: "";
      display: block;
      height: 4px;
      left: -4px;
      position: absolute;
      top: 14px;
      width: 46px;
    }
    /* goldenes Abzeichen */
    .head-hut-feuerhelm .px-hair::after {
      background: #fbbf24;
      border-radius: 2px 2px 50% 50%;
      box-shadow: 0 0 3px #fde68a;
      content: "";
      display: block;
      height: 7px;
      left: 50%;
      position: absolute;
      top: 4px;
      transform: translateX(-50%);
      width: 7px;
    }

    /* T-Rex-Kopf (Erfolg "Urzeit-Champion", Bonus-Dungeon Tyrannos-Gipfel): grüner
       Schädel über dem ganzen Kopf, mit Auge und einem animierten Unterkiefer, der
       sich in einer Ruheschleife kurz öffnet und wieder schließt. */
    .head-hut-trex .px-hair {
      background: var(--headwear);
      border-radius: 55% 55% 35% 35% / 65% 65% 35% 35%;
      height: 19px;
      left: 6px;
      top: -3px;
      width: 40px;
      box-shadow: 0 30px 0 -13px var(--hair);
    }
    /* Auge */
    .head-hut-trex .px-hair::before {
      background: #16210f;
      border-radius: 50%;
      content: "";
      display: block;
      height: 3px;
      left: 7px;
      position: absolute;
      top: 6px;
      width: 3px;
    }
    /* Unterkiefer — öffnet und schließt sich alle paar Sekunden */
    .head-hut-trex .px-hair::after {
      animation: trexJaw 3.4s ease-in-out infinite;
      background: color-mix(in srgb, var(--headwear) 78%, black 22%);
      border-radius: 2px 8px 6px 4px;
      content: "";
      display: block;
      height: 7px;
      left: 24px;
      position: absolute;
      top: 11px;
      transform-origin: left top;
      width: 19px;
    }
    @keyframes trexJaw {
      0%, 14%, 100% { transform: rotate(0deg); }
      7%            { transform: rotate(22deg); }
    }

    /* ── Puls Plateau: Intro ─────────────────────────────────────────────── */
    .dungeon-intro-screen.puls-theme {
      background: linear-gradient(180deg, #16301a 0%, #2f5a26 50%, #12240f 100%);
    }
    .dungeon-intro-card.puls-intro .dungeon-intro-copy {
      background: rgba(14, 30, 12, 0.9);
      border-color: rgba(155, 227, 106, 0.5);
    }
    .dungeon-intro-card.puls-intro .dungeon-intro-copy h1 {
      color: #e6f7c9;
      text-shadow: 0 3px 0 #2f5a26, 0 0 18px rgba(155, 227, 106, 0.45);
    }
    .dungeon-intro-card.puls-intro .dungeon-intro-copy p { color: #c5e8a0; }
    .puls-scroll-stage {
      background: linear-gradient(180deg, #8fd0f2 0%, #c9ecff 46%, #e8f5c8 78%, #9ed16a 100%);
      border-color: rgba(155, 227, 106, 0.55);
      box-shadow: inset 0 -20px 0 rgba(40, 90, 30, 0.35), 0 22px 60px rgba(60, 140, 40, 0.3);
      animation: pulsQuake 7s ease-in-out infinite;
    }
    .puls-scroll-stage::before { background: none; animation: none; }
    @keyframes pulsQuake {
      0%, 86%, 100% { transform: translate(0, 0); }
      88% { transform: translate(-4px, 3px); }
      90% { transform: translate(5px, -3px); }
      92% { transform: translate(-3px, 2px); }
      94% { transform: translate(3px, -2px); }
      96% { transform: translate(-1px, 1px); }
    }
    .puls-heart {
      animation: pulsBeat 0.9s ease-in-out infinite;
      font-size: 2.4rem;
      position: absolute;
      right: 7%;
      top: 8%;
      z-index: 8;
      filter: drop-shadow(0 0 10px rgba(255, 84, 112, 0.7));
    }
    @keyframes pulsBeat {
      0%, 100% { transform: scale(1); }
      12% { transform: scale(1.28); }
      24% { transform: scale(1); }
      36% { transform: scale(1.18); }
      50% { transform: scale(1); }
    }
    .puls-grass-floor {
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 14px, transparent 14px 28px),
        linear-gradient(0deg, #2f6b22 0%, #4f9a34 55%, #79c24a 100%);
      border-top: 4px solid #98d95d;
      bottom: 0;
      height: 80px;
      left: 0;
      position: absolute;
      right: 0;
    }
    .puls-stone {
      bottom: 56px;
      height: 26px;
      position: absolute;
      transform: translateX(-50%);
      width: 72px;
    }
    .puls-stone::before {
      background: linear-gradient(180deg, #e2cfa2 0%, #b39a68 100%);
      border-radius: 6px 11px 4px 9px;
      box-shadow: 0 7px 0 #6b5a36, 0 12px 14px rgba(0, 40, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.35);
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    .puls-hill {
      background: #b9a171;
      border-radius: 50% 50% 0 0;
      bottom: 0;
      position: absolute;
      transform: translateX(-50%);
    }
    .puls-scroll-stage .vulkan-track.back { filter: none; opacity: 0.95; }

    /* Bodenbeben (Erkundung im Puls Plateau) */
    body.ground-quake .scene { animation: groundQuake 1.2s ease-in-out; }
    @keyframes groundQuake {
      0%, 100% { transform: translate(0, 0); }
      10% { transform: translate(-5px, 3px); }
      20% { transform: translate(6px, -4px); }
      30% { transform: translate(-6px, 2px); }
      42% { transform: translate(5px, -3px); }
      55% { transform: translate(-3px, 2px); }
      70% { transform: translate(3px, -1px); }
      85% { transform: translate(-1px, 1px); }
    }

    /* ── Hochdruck-Dschungel: Intro ──────────────────────────────────────── */
    .dungeon-intro-screen.jungle-theme {
      background: linear-gradient(180deg, #06140a 0%, #123a1a 50%, #06140a 100%);
    }
    .dungeon-intro-card.jungle-intro .dungeon-intro-copy {
      background: rgba(6, 22, 10, 0.92);
      border-color: rgba(226, 80, 60, 0.55);
    }
    .dungeon-intro-card.jungle-intro .dungeon-intro-copy h1 {
      color: #d8f7d0;
      text-shadow: 0 3px 0 #123a1a, 0 0 18px rgba(226, 80, 60, 0.5);
    }
    .dungeon-intro-card.jungle-intro .dungeon-intro-copy p { color: #a9dca4; }
    .jungle-scroll-stage {
      background: linear-gradient(180deg, #0c2a12 0%, #1b5a26 48%, #3a7a2c 78%, #7a2a1c 100%);
      border-color: rgba(226, 80, 60, 0.55);
      box-shadow: inset 0 -20px 0 rgba(20, 50, 15, 0.5), 0 22px 60px rgba(180, 50, 30, 0.28);
    }
    .jungle-scroll-stage::before { background: none; animation: none; }
    .jungle-floor {
      background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 16px, transparent 16px 34px),
        linear-gradient(0deg, #0e2a12 0%, #1f5a28 60%, #2f7a36 100%);
      border-top: 4px solid #46a04e;
      bottom: 0;
      height: 80px;
      left: 0;
      position: absolute;
      right: 0;
    }
    .jungle-bush {
      bottom: 56px;
      height: 30px;
      position: absolute;
      transform: translateX(-50%);
      width: 72px;
    }
    .jungle-bush::before {
      background: radial-gradient(ellipse at 50% 100%, #1c6a2c 0%, #114a1f 70%, transparent 72%);
      border-radius: 50% 50% 0 0;
      content: "";
      inset: 0;
      position: absolute;
    }
    .jungle-tree {
      background: linear-gradient(90deg, #0b2410, #14401c 55%, #0b2410);
      border-radius: 8px 8px 0 0;
      bottom: 0;
      position: absolute;
      transform: translateX(-50%);
    }
    .jungle-scroll-stage .vulkan-track.back { filter: none; opacity: 0.9; }
    .jungle-gauge {
      animation: pulsBeat 1.1s ease-in-out infinite;
      filter: drop-shadow(0 0 10px rgba(255, 70, 50, 0.8));
      font-size: 2.2rem;
      position: absolute;
      right: 7%;
      top: 8%;
      z-index: 8;
    }
    .jungle-steam-layer { inset: 0; pointer-events: none; position: absolute; z-index: 7; }
    .jungle-steam {
      background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%);
      border-radius: 50%;
      bottom: 70px;
      height: 46px;
      opacity: 0;
      position: absolute;
      width: 46px;
    }
    @keyframes jungleSteamRise {
      0%   { opacity: 0;   transform: translateY(0) scale(0.5); }
      25%  { opacity: 0.9; }
      100% { opacity: 0;   transform: translateY(-190px) scale(1.9); }
    }

    /* ── Dampf-Ohren (Effekt, Hyperpflegekraft): Dampf steigt ständig aus den Ohren ── */
    .pixel-avatar .px-dampf {
      height: 8px;
      pointer-events: none;
      position: absolute;
      top: 25px;
      width: 8px;
      z-index: 7;
    }
    .pixel-avatar .px-dampf.l { left: 8px; --dx: -5px; }
    .pixel-avatar .px-dampf.r { left: 38px; --dx: 5px; }
    .pixel-avatar .px-dampf i {
      animation: pxDampfRise 1.7s ease-out infinite;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 50%;
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
      height: 6px;
      left: 1px;
      opacity: 0;
      position: absolute;
      top: 2px;
      width: 6px;
    }
    .pixel-avatar .px-dampf i:nth-child(2) { animation-delay: 0.55s; }
    .pixel-avatar .px-dampf i:nth-child(3) { animation-delay: 1.1s; }
    @keyframes pxDampfRise {
      0%   { opacity: 0;    transform: translate(0, 0) scale(0.5); }
      20%  { opacity: 0.95; }
      100% { opacity: 0;    transform: translate(var(--dx, 0), -20px) scale(1.7); }
    }

    /* Gegner-Debuffs (Perk Hypertonie-Erfahren) */
    .enemy-debuff-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .enemy-debuff-chip {
      background: rgba(50, 120, 90, 0.92);
      border-radius: 6px;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 800;
      padding: 2px 6px;
    }

    /* ── Tyrannos-Gipfel (Bonus): Intro + T-Rex ───────────────────────────── */
    .dungeon-intro-screen.trex-theme {
      background: linear-gradient(180deg, #1c0e08 0%, #4a2412 48%, #150a05 100%);
    }
    .dungeon-intro-card.trex-intro .dungeon-intro-copy {
      background: rgba(22, 11, 5, 0.92);
      border-color: rgba(255, 190, 90, 0.55);
    }
    .dungeon-intro-card.trex-intro .dungeon-intro-copy h1 {
      color: #ffe2b0;
      text-shadow: 0 3px 0 #7a3a12, 0 0 18px rgba(255, 170, 60, 0.5);
    }
    .dungeon-intro-card.trex-intro .dungeon-intro-copy p { color: #f0c489; }
    .trex-scroll-stage {
      background: linear-gradient(180deg, #2a140a 0%, #6b3316 40%, #c26a25 74%, #f0a250 100%);
      border-color: rgba(255, 190, 90, 0.6);
      box-shadow: inset 0 -20px 0 rgba(60, 30, 10, 0.5), 0 22px 60px rgba(210, 110, 30, 0.32);
      animation: trexQuake 3.6s ease-in-out infinite;
    }
    .trex-scroll-stage::before { background: none; animation: none; }
    @keyframes trexQuake {
      0%, 70%, 100% { transform: translate(0, 0); }
      74% { transform: translate(-3px, 2px); }
      78% { transform: translate(3px, -2px); }
      82% { transform: translate(-2px, 2px); }
      86% { transform: translate(2px, -1px); }
    }
    .trex-silhouette {
      bottom: 62px;
      opacity: 0.85;
      position: absolute;
      right: 4%;
      width: min(46%, 300px);
      z-index: 1;
      animation: trexStride 3.6s ease-in-out infinite;
    }
    .trex-silhouette svg { display: block; height: auto; width: 100%; }
    @keyframes trexStride {
      0%, 70%, 100% { transform: translateY(0); }
      74% { transform: translateY(5px); }
      80% { transform: translateY(0); }
    }
    .trex-floor {
      background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 18px, transparent 18px 40px),
        linear-gradient(0deg, #1c120b 0%, #3a2a1d 60%, #5a4130 100%);
      border-top: 4px solid #8a6540;
      bottom: 0;
      height: 80px;
      left: 0;
      position: absolute;
      right: 0;
    }
    .trex-stone {
      bottom: 56px;
      height: 26px;
      position: absolute;
      transform: translateX(-50%);
      width: 72px;
    }
    .trex-stone::before {
      background: linear-gradient(180deg, #8a7458 0%, #5b4834 100%);
      border-radius: 6px 11px 4px 9px;
      box-shadow: 0 7px 0 #2a1e12, 0 12px 14px rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 230, 190, 0.25);
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    .trex-peak {
      background: #3a2517;
      border-radius: 45% 55% 0 0;
      bottom: 0;
      position: absolute;
      transform: translateX(-50%);
    }
    .trex-scroll-stage .vulkan-track.back { filter: none; opacity: 0.9; }

    .trex-boss {
      animation: trampelBob 1.6s ease-in-out infinite;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      transform-origin: center bottom;
    }
    .trex-svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); height: auto; width: 190px; }

    /* ── Pflegeprozess-Kampagne (Urban Myths): Die Weiße Dame, Der Gesichtslose, Das Kanal-Krokodil ── */
    .weisse-dame-boss { animation: weisseDameFloat 3.4s ease-in-out infinite; display: flex; justify-content: center; margin: 0 auto; transform-origin: center bottom; }
    .weisse-dame-svg { filter: drop-shadow(0 0 12px rgba(170, 205, 255, 0.65)); height: auto; overflow: visible; width: 150px; }
    @keyframes weisseDameFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    .wd-veil { animation: wdSway 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
    @keyframes wdSway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-3deg); } }
    .wd-gown { animation: wdHem 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
    @keyframes wdHem { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.03); } }
    .wd-mote { animation: wdMote 3.6s ease-in-out infinite; opacity: 0; }
    .wd-mote.m2 { animation-delay: 1.2s; }
    .wd-mote.m3 { animation-delay: 2.2s; }
    @keyframes wdMote { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-22px); } }

    .gesichtslos-boss { animation: glSway 4.2s ease-in-out infinite; display: flex; justify-content: center; margin: 0 auto; transform-origin: center bottom; }
    .gesichtslos-svg { filter: drop-shadow(0 0 10px rgba(150, 120, 255, 0.55)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); height: auto; overflow: visible; width: 132px; }
    @keyframes glSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
    .gl-card { animation: glFloat 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .gl-card.c2 { animation-delay: -1s; }
    .gl-card.c3 { animation-delay: -2s; }
    @keyframes glFloat { 0%, 100% { translate: 0 0; rotate: -5deg; } 50% { translate: 0 -6px; rotate: 5deg; } }

    .kroko-boss { animation: krokoLurk 2.6s ease-in-out infinite; display: flex; justify-content: center; margin: 0 auto; transform-origin: center bottom; }
    .kroko-svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); height: auto; overflow: visible; width: 210px; }
    @keyframes krokoLurk { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-1deg); } }
    .kroko-steam { animation: krokoSteam 2.4s ease-out infinite; opacity: 0; transform-box: fill-box; transform-origin: center; }
    .kroko-steam.s2 { animation-delay: 0.8s; }
    .kroko-steam.s3 { animation-delay: 1.6s; }
    @keyframes krokoSteam { 0% { opacity: 0; transform: translateY(6px) scale(0.5); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-30px) scale(1.7); } }
    /* Der Kaiju (Finale): wuchtiger Idle-Stampf, pulsierende Augen und Maul-Glut */
    .kaiju-boss { animation: kaijuStomp 2.2s ease-in-out infinite; display: flex; justify-content: center; margin: 0 auto; transform-origin: center bottom; }
    .kaiju-svg { filter: drop-shadow(0 0 14px rgba(255, 90, 60, 0.55)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.55)); height: auto; overflow: visible; width: 230px; }
    @keyframes kaijuStomp { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(2px) scale(1.02, 0.985); } }
    .kaiju-eye { animation: kaijuEye 1.6s ease-in-out infinite; }
    @keyframes kaijuEye { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45) drop-shadow(0 0 6px #ffd23c); } }
    .kaiju-mouth-glow { animation: kaijuMouth 1.6s ease-in-out infinite; }
    @keyframes kaijuMouth { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .weisse-dame-boss, .gesichtslos-boss, .kroko-boss, .kaiju-boss, .kaiju-eye, .kaiju-mouth-glow, .wd-veil, .wd-gown, .wd-mote, .gl-card, .kroko-steam { animation: none; }
    }

    /* ── Urzeitliche Belohnung: Steinzeit-Look für alle Belohnungsfenster der Vitalzeichen-Kampagne ── */
    body.theme-urzeit .loot-box {
      background: linear-gradient(180deg, #dccaa3 0%, #bfa77c 100%);
      border: 4px solid #4b3620;
      border-radius: 16px 22px 14px 20px;
      box-shadow: 0 18px 42px rgba(20, 10, 0, 0.45), 6px 6px 0 #4b3620, inset 0 0 0 3px rgba(255, 240, 210, 0.35), inset 0 -12px 20px rgba(90, 60, 30, 0.25);
      color: #2e2010;
      --ink: #2e2010;
      --muted: rgba(46, 32, 16, 0.72);
      --gold: #8a2f12;
    }
    body.theme-urzeit .loot-box strong {
      color: #7a2a10;
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: 0.04em;
      text-shadow: 0 2px 0 rgba(255, 240, 210, 0.65);
    }
    body.theme-urzeit .loot-box.grand::before,
    body.theme-urzeit .loot-box.grand::after {
      content: "🦴";
      font-size: 1.5rem;
      opacity: 0.85;
      position: absolute;
      top: 6px;
    }
    body.theme-urzeit .loot-box.grand::before { left: 10px;  transform: rotate(-28deg); }
    body.theme-urzeit .loot-box.grand::after  { right: 10px; transform: rotate(28deg) scaleX(-1); }
    body.theme-urzeit .loot-chip {
      background: #efe0bd;
      border: 2px solid #4b3620;
      border-radius: 8px;
      color: #2e2010;
      font-weight: 800;
    }
    body.theme-urzeit .loot-box .next,
    body.theme-urzeit .loot-box button.next {
      background: linear-gradient(180deg, #8a5a2e, #6b3f1d);
      border-color: #3a2410;
      color: #fff3dc;
    }

    /* Dampfkopfsaurus: Boss-Grafik + Anzeige */
    .dampf-boss {
      animation: trampelBob 1.4s ease-in-out infinite;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      transform-origin: center bottom;
    }
    .dampf-svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.45)); height: auto; overflow: visible; width: 176px; }
    .dampf-steam { animation: dampfRise 2.2s ease-out infinite; opacity: 0; transform-box: fill-box; transform-origin: center; }
    .dampf-steam.s2 { animation-delay: 0.7s; }
    .dampf-steam.s3 { animation-delay: 1.4s; }
    @keyframes dampfRise {
      0%   { opacity: 0;   transform: translateY(6px) scale(0.5); }
      30%  { opacity: 0.95; }
      100% { opacity: 0;   transform: translateY(-30px) scale(1.7); }
    }
    .dampf-boss.venting .dampf-steam { animation-duration: 0.7s; }
    .dampf-boss.venting .dampf-svg { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) brightness(1.1); }
    .boss-phase-chip.phase-druck { background: rgba(190, 45, 35, 0.92); color: #fff; }
    .boss-phase-chip.phase-dampf { background: rgba(240, 150, 60, 0.95); color: #2a1206; }

    /* Trampelsaurus: Boss-Grafik + Takt-Anzeige */
    .trampel-boss {
      animation: trampelBob 1.4s ease-in-out infinite;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      transform-origin: center bottom;
    }
    .trampel-svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.45)); height: auto; width: 168px; }
    .trampel-heart { animation: pulsBeat 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    @keyframes trampelBob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-5px) rotate(-1.5deg); }
    }
    .trampel-boss.phase-stampf { animation: trampelStomp 0.5s ease-in-out infinite; }
    .trampel-boss.phase-stampf .trampel-svg { filter: drop-shadow(0 0 10px rgba(255, 90, 60, 0.8)); }
    .trampel-boss.phase-panzer .trampel-svg { filter: drop-shadow(0 0 12px rgba(120, 190, 255, 0.9)) saturate(0.7) brightness(0.9); }
    .trampel-boss.phase-pause { animation: none; }
    .trampel-boss.phase-pause .trampel-svg { filter: grayscale(0.6) brightness(0.85); transform: rotate(-4deg); }
    @keyframes trampelStomp {
      0%, 100% { transform: translateY(0) scale(1); }
      50%      { transform: translateY(4px) scale(1.04, 0.96); }
    }
    .boss-phase-chip {
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 800;
      margin-top: 4px;
      padding: 3px 8px;
      text-align: center;
    }
    .boss-phase-chip.phase-stampf { background: rgba(226, 80, 60, 0.9);  color: #fff; }
    .boss-phase-chip.phase-panzer { background: rgba(70, 130, 200, 0.9); color: #fff; }
    .boss-phase-chip.phase-pause  { background: rgba(120, 120, 130, 0.9); color: #fff; }

    /* ── Status "Fieberverbrennung": rote Haut (Palette), Stirnrunzeln, Schweißperlen ── */
    .pixel-avatar.status-verbrannt .px-mouth {
      background: transparent;
      border: 2px solid rgba(90, 10, 10, 0.9);
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      height: 3px;
      left: 22px;
      top: 33px;
      width: 9px;
    }
    .pixel-avatar.status-verbrannt .px-eye-left,
    .pixel-avatar.status-verbrannt .px-eye-right {
      height: 2px;
    }
    .pixel-avatar .px-sweat {
      height: 12px;
      left: 17px;
      pointer-events: none;
      position: absolute;
      top: 15px;
      width: 20px;
      z-index: 6;
    }
    .pixel-avatar .px-sweat i {
      animation: pxSweatDrip 1.6s ease-in infinite;
      background: #cfeeff;
      border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
      box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
      height: 4px;
      opacity: 0;
      position: absolute;
      top: 0;
      width: 3px;
    }
    .pixel-avatar .px-sweat i:nth-child(1) { left: 2px;  animation-delay: 0s; }
    .pixel-avatar .px-sweat i:nth-child(2) { left: 9px;  animation-delay: 0.55s; }
    .pixel-avatar .px-sweat i:nth-child(3) { left: 16px; animation-delay: 1.1s; }
    @keyframes pxSweatDrip {
      0%   { opacity: 0;   transform: translateY(0) scale(0.6); }
      15%  { opacity: 1;   transform: translateY(1px) scale(1); }
      85%  { opacity: 0.9; transform: translateY(9px) scale(1); }
      100% { opacity: 0;   transform: translateY(11px) scale(0.8); }
    }
    .wolf-face-wrap.mood-verbrannt {
      animation: wolfBurnPulse 0.9s ease-in-out infinite alternate;
      border-color: #ff5a2a;
    }
    @keyframes wolfBurnPulse {
      from { box-shadow: 0 0 8px rgba(255, 90, 42, 0.5), inset 0 0 6px rgba(0, 0, 0, 0.4); }
      to   { box-shadow: 0 0 18px rgba(255, 140, 40, 0.95), inset 0 0 6px rgba(0, 0, 0, 0.4); }
    }
    /* Status-Symbole neben dem Gesicht in der Wolf-Bar */
    .wolf-status {
      align-items: center;
      display: flex;
      gap: 2px;
      left: 30px;
      pointer-events: none;
      position: absolute;
      top: 29px;
      z-index: 5;
    }
    .wolf-status-chip {
      animation: torchFlicker 0.7s ease-in-out infinite alternate;
      background: rgba(10, 6, 4, 0.85);
      border: 1px solid rgba(255, 140, 40, 0.8);
      border-radius: 50%;
      font-size: 11px;
      height: 16px;
      line-height: 14px;
      text-align: center;
      width: 16px;
    }

    /* ── Cavemen in der Party-Leiste: kompakte Karten, Auftauchen, Sprüche, Aktions-Effekte ───────── */
    .combat-party-bar .cpm-caveman { flex: 0 1 158px; padding: 5px 10px 5px 5px; position: relative; }
    .combat-party-bar .cpm-caveman .cpm-face {
      animation: cpmBob 1.1s ease-in-out infinite;
      height: 34px;
      width: 34px;
    }
    .combat-party-bar .cpm-caveman .cpm-face .pixel-avatar { top: -13px; transform: translateX(-50%) scale(1.12); }
    @keyframes cpmBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-2px); }
    }
    .combat-party-bar .cpm.cpm-spawn { animation: cpmSpawn 0.75s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
    .combat-party-bar .cpm.cpm-spawn::after {
      animation: cpmPuff 0.8s ease-out both;
      animation-delay: inherit;
      bottom: -10px;
      content: "💨";
      font-size: 1.5rem;
      left: -8px;
      pointer-events: none;
      position: absolute;
    }
    @keyframes cpmSpawn {
      0%   { opacity: 0; transform: translateY(26px) scale(0.2) rotate(-14deg); }
      55%  { opacity: 1; transform: translateY(-8px) scale(1.12) rotate(4deg); }
      100% { opacity: 1; transform: none; }
    }
    @keyframes cpmPuff {
      0%   { opacity: 0; transform: scale(0.4); }
      30%  { opacity: 1; }
      100% { opacity: 0; transform: translate(-6px, -14px) scale(1.7); }
    }
    .combat-party-bar .cpm-say {
      animation: cpmSay 3.6s ease both;
      background: #fff8e6;
      border: 2px solid var(--cs-ink);
      border-radius: 10px;
      bottom: calc(100% + 8px);
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: 0.68rem;
      font-weight: 800;
      left: 4px;
      line-height: 1.2;
      max-width: 200px;
      padding: 4px 8px;
      pointer-events: none;
      position: absolute;
      width: max-content;
      z-index: 30;
    }
    .combat-party-bar .cpm-say::after {
      border: 6px solid transparent;
      border-top-color: var(--cs-ink);
      content: "";
      left: 16px;
      position: absolute;
      top: 100%;
    }
    @keyframes cpmSay {
      0%   { opacity: 0; transform: translateY(6px) scale(0.85); }
      10%  { opacity: 1; transform: none; }
      85%  { opacity: 1; }
      100% { opacity: 0; }
    }
    .combat-party-bar .cpm.cpm-fx-attack,
    .combat-party-bar .cpm.cpm-fx-summon { animation: cpmHop 0.55s ease-out both; }
    .combat-party-bar .cpm.cpm-fx-miss   { animation: cpmShake 0.5s ease both; }
    /* Begleiter: Aktion (Hop + aufsteigendes Symbol), Team-Glow für Empfänger, Idle-Nicken, Sprechblasen-Geste */
    .combat-party-bar .cpm { position: relative; }
    .combat-party-bar .cpm.cpm-fx-act  { animation: cpmHop 0.55s ease-out both; }
    .combat-party-bar .cpm.cpm-fx-glow { animation: cpmGlow 0.7s ease-out both; }
    .combat-party-bar .cpm.cpm-fx-idle .cpm-face { animation: cpmNod 0.6s ease-in-out both; }
    .combat-party-bar .cpm-fxicon {
      animation: cpmFxIcon 1.4s ease-out both;
      font-size: 1.4rem;
      left: 50%;
      pointer-events: none;
      position: absolute;
      top: -6px;
      z-index: 31;
    }
    .combat-party-bar .cpm-dmg-float {
      animation: damageFloat 2000ms ease-out forwards;
      color: #ef6f6c;
      font-size: 1rem;
      font-weight: 900;
      left: 50%;
      pointer-events: none;
      position: absolute;
      text-shadow: 0 2px 6px rgba(2,6,23,0.8), 0 0 12px rgba(239,111,108,0.6);
      top: 0;
      transform: translateX(-50%);
      z-index: 33;
    }
    .combat-party-bar .cpm-say.cpm-say-c { animation-duration: 2.6s; max-width: 170px; }
    .combat-party-bar .cpm-say.cpm-say-act { background: #eef4ff; font-weight: 700; }
    @keyframes cpmGlow {
      0%   { box-shadow: 0 0 0 0 rgba(120, 220, 140, 0.9), 3px 3px 0 var(--cs-ink); }
      40%  { box-shadow: 0 0 0 8px rgba(120, 220, 140, 0.55), 3px 3px 0 var(--cs-ink); transform: translateY(-3px); }
      100% { box-shadow: 0 0 0 0 rgba(120, 220, 140, 0), 3px 3px 0 var(--cs-ink); }
    }
    @keyframes cpmNod {
      0%, 100% { transform: translateY(0); }
      30%      { transform: translateY(2px) rotate(-4deg); }
      65%      { transform: translateY(-1px) rotate(3deg); }
    }
    @keyframes cpmFxIcon {
      0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.4); }
      25%  { opacity: 1; transform: translate(-50%, -8px) scale(1.25); }
      70%  { opacity: 1; transform: translate(-50%, -22px) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -34px) scale(0.9); }
    }
    .combat-party-bar .cpm.cpm-fx-dance .cpm-face { animation: cpmDance 0.45s ease-in-out 2 both; }
    .combat-party-bar .cpm.cpm-fx-summon::before {
      content: "📣";
      font-size: 1.1rem;
      pointer-events: none;
      position: absolute;
      right: -4px;
      top: -14px;
    }
    @keyframes cpmHop {
      0%   { transform: translateY(0); }
      35%  { transform: translateY(-12px) rotate(-3deg); }
      70%  { transform: translateY(2px); }
      100% { transform: none; }
    }
    @keyframes cpmShake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-4px) rotate(-2deg); }
      40% { transform: translateX(4px) rotate(2deg); }
      60% { transform: translateX(-3px); }
      80% { transform: translateX(3px); }
    }
    @keyframes cpmDance {
      0%, 100% { transform: rotate(0deg) translateY(0); }
      25% { transform: rotate(-12deg) translateY(-3px); }
      75% { transform: rotate(12deg) translateY(-3px); }
    }
    .combat-party-bar .cpm-ghost { animation: cpmGhost 1s ease-in forwards; flex: 0 0 auto; pointer-events: none; }
    @keyframes cpmGhost {
      0%   { opacity: 0.9; transform: none; max-width: 158px; }
      60%  { opacity: 0.55; transform: translateY(-8px) scale(0.95); max-width: 158px; }
      100% { opacity: 0; transform: translateY(-16px) scale(0.8); max-width: 0; padding: 0; border-width: 0; margin: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .combat-party-bar .cpm-caveman .cpm-face { animation: none; }
    }

    /* Status-Chip "Fieberverbrennung" in der Kampf-Party-Leiste */
    .combat-party-bar .cpm-status {
      animation: torchFlicker 0.7s ease-in-out infinite alternate;
      display: inline-block;
      font-size: 0.85em;
      margin-left: 2px;
    }

    /* Pflegekraft – türkise Scrubs, helle Haare */
    .decor-pflegekraft .decor-body {
      background:
        linear-gradient(180deg, #c9956a 0 12px, transparent 12px),
        linear-gradient(180deg, transparent 0 16px, #f2c7a5 16px 40px, transparent 40px),
        linear-gradient(180deg, transparent 0 44px, #28c6a2 44px 94px, transparent 94px),
        linear-gradient(90deg, transparent 0 19px, #0f172a 19px 34px, transparent 34px),
        linear-gradient(90deg, transparent 0 45px, #0f172a 45px 60px, transparent 60px);
      height: 132px;
      image-rendering: pixelated;
      width: 82px;
    }
    .decor-pflegekraft .decor-body::before {
      background:
        linear-gradient(90deg, transparent 0 18px, #1f6e5c 18px 23px, transparent 23px 34px, #1f6e5c 34px 39px, transparent 39px),
        linear-gradient(180deg, transparent 0 36px, #f2c7a5 36px 84px, transparent 84px);
      content: "";
      height: 96px;
      left: 12px;
      position: absolute;
      top: 0;
      width: 58px;
    }
    .decor-pflegekraft .decor-body::after {
      background:
        linear-gradient(90deg, #a7f3e8 0 6px, transparent 6px 34px, #a7f3e8 34px 40px),
        linear-gradient(180deg, transparent 0 18px, #28c6a2 18px 62px, #1f6e5c 62px 90px);
      box-shadow: -27px -12px 0 -6px #f2c7a5, 27px -12px 0 -6px #f2c7a5;
      content: "";
      height: 90px;
      left: 50%;
      position: absolute;
      top: 42px;
      transform: translateX(-50%);
      width: 68px;
    }

    /* Reinigungskraft – gelbe Weste, Mop-Stiel */
    .decor-reinigungskraft .decor-body {
      background:
        linear-gradient(180deg, #8b5e3c 0 12px, transparent 12px),
        linear-gradient(180deg, transparent 0 16px, #f2c7a5 16px 40px, transparent 40px),
        linear-gradient(180deg, transparent 0 44px, #f59e0b 44px 94px, transparent 94px),
        linear-gradient(90deg, transparent 0 19px, #0f172a 19px 34px, transparent 34px),
        linear-gradient(90deg, transparent 0 45px, #0f172a 45px 60px, transparent 60px);
      height: 132px;
      image-rendering: pixelated;
      width: 82px;
    }
    .decor-reinigungskraft .decor-body::before {
      /* Mop-Stiel rechts neben der Figur */
      background: linear-gradient(180deg, #d97706 0 100%);
      content: "";
      height: 120px;
      left: 70px;
      position: absolute;
      top: 8px;
      width: 6px;
    }
    .decor-reinigungskraft .decor-body::after {
      /* Mop-Kopf am Boden */
      background: linear-gradient(90deg, #fde68a, #fbbf24, #fde68a);
      border-radius: 2px;
      content: "";
      height: 10px;
      left: 58px;
      position: absolute;
      top: 122px;
      width: 24px;
    }

    /* Handwerker – blaue Latzhose, Helm */
    .decor-handwerker .decor-body {
      background:
        linear-gradient(180deg, #f59e0b 0 14px, transparent 14px),
        linear-gradient(180deg, transparent 0 16px, #f2c7a5 16px 40px, transparent 40px),
        linear-gradient(180deg, transparent 0 44px, #1d4ed8 44px 94px, transparent 94px),
        linear-gradient(90deg, transparent 0 19px, #0f172a 19px 34px, transparent 34px),
        linear-gradient(90deg, transparent 0 45px, #0f172a 45px 60px, transparent 60px);
      height: 132px;
      image-rendering: pixelated;
      width: 82px;
    }
    .decor-handwerker .decor-body::before {
      background:
        linear-gradient(90deg, transparent 0 18px, #1e3a8a 18px 23px, transparent 23px 34px, #1e3a8a 34px 39px, transparent 39px),
        linear-gradient(180deg, transparent 0 36px, #f2c7a5 36px 84px, transparent 84px);
      content: "";
      height: 96px;
      left: 12px;
      position: absolute;
      top: 0;
      width: 58px;
    }
    .decor-handwerker .decor-body::after {
      /* Schraubenschlüssel in der Hand */
      background: #6b7280;
      border-radius: 3px;
      box-shadow: -27px -12px 0 -6px #f2c7a5, 27px -12px 0 -6px #f2c7a5;
      content: "";
      height: 90px;
      left: 50%;
      position: absolute;
      top: 42px;
      transform: translateX(-50%);
      width: 68px;
    }

    .room-visual.patient-group {
      align-items: end;
      display: flex;
      gap: 8px;
      justify-content: center;
      width: min(420px, 48%);
    }

    .room-visual.patient-group .patient-pixel {
      left: auto;
      margin: 60px 10px 38px;
      position: relative;
      top: auto;
      transform: scale(1.68);
      transform-origin: center bottom;
    }

    .room-visual.patient-group .patient-pixel:nth-child(2) {
      transform: scale(1.58);
    }

    .room-visual.patient-group .patient-pixel:nth-child(3),
    .room-visual.patient-group .patient-pixel:nth-child(4) {
      transform: scale(1.48);
    }

    .room-visual .patient-pixel {
      left: 50%;
      position: absolute;
      top: 28px;
      transform: translateX(-50%) scale(2.08);
      transform-origin: center bottom;
    }

    .room-visual .prop {
      position: absolute;
      z-index: 3;
    }

    .room-visual .prop-water {
      background: linear-gradient(180deg, rgba(191, 219, 254, 0.9), rgba(37, 99, 235, 0.55));
      border: 2px solid rgba(248, 250, 252, 0.82);
      border-radius: 3px 3px 8px 8px;
      height: 36px;
      right: 52px;
      top: 86px;
      width: 22px;
    }

    .room-visual .prop-crutch {
      background: #94a3b8;
      border-radius: 999px;
      height: 126px;
      left: 46px;
      top: 52px;
      transform: rotate(-12deg);
      width: 7px;
    }

    .room-visual .prop-crutch::before {
      background: #94a3b8;
      border-radius: 999px;
      content: "";
      height: 8px;
      left: -10px;
      position: absolute;
      top: 14px;
      width: 28px;
    }

    .room-visual .prop-foot {
      background: #f8fafc;
      border: 3px solid #1f2937;
      border-radius: 12px;
      bottom: 10px;
      height: 32px;
      right: 36px;
      width: 62px;
    }

    .room-visual .prop-book {
      background: linear-gradient(90deg, #f8fafc 0 47%, #dbeafe 47% 53%, #f8fafc 53%);
      border: 3px solid #1f2937;
      border-radius: 5px;
      bottom: 20px;
      height: 40px;
      right: 30px;
      transform: rotate(-6deg);
      width: 68px;
    }

    .room-visual .treasure-chest {
      background: linear-gradient(180deg, #8b5a2b, #5b3418);
      border: 4px solid #2b1a0e;
      border-radius: 8px;
      bottom: -55px;
      box-shadow: 0 12px 22px rgba(2, 6, 23, 0.35);
      height: 88px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%) scale(1.5);
      transform-origin: bottom center;
      width: 150px;
    }

    .room-visual .treasure-chest::before {
      background: linear-gradient(180deg, #b77935, #6f421f);
      border: 4px solid #2b1a0e;
      border-bottom: 0;
      border-radius: 70px 70px 0 0;
      content: "";
      height: 60px;
      left: -4px;
      position: absolute;
      top: -52px;
      width: 150px;
    }

    .room-visual .treasure-chest.open::before {
      top: -78px;
      transform: rotate(-12deg);
      transform-origin: left bottom;
    }

    .room-visual .treasure-chest.open {
      background:
        linear-gradient(180deg, rgba(244, 185, 66, 0.38), transparent 34px),
        linear-gradient(180deg, #8b5a2b, #5b3418);
    }

    .room-visual .treasure-chest::after {
      background: var(--gold);
      border: 3px solid #2b1a0e;
      border-radius: 4px;
      content: "";
      height: 28px;
      left: 50%;
      position: absolute;
      top: 22px;
      transform: translateX(-50%);
      width: 24px;
    }

    .room-visual .break-table {
      background: #513425;
      border: 4px solid #2b1a0e;
      border-radius: 8px;
      bottom: 34px;
      height: 42px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 150px;
    }

    .room-visual .break-table::before {
      background: var(--paper);
      border: 3px solid #1f2937;
      border-radius: 50% 50% 8px 8px;
      content: "";
      height: 42px;
      left: 24px;
      position: absolute;
      top: -44px;
      width: 32px;
    }

    .room-visual .break-table::after {
      background: #f4b942;
      border: 3px solid #1f2937;
      border-radius: 14px;
      content: "";
      height: 24px;
      position: absolute;
      right: 24px;
      top: -26px;
      width: 44px;
    }

    .combat-overlay {
      align-items: stretch;
      bottom: 82px;
      display: grid;
      gap: 14px;
      grid-template-columns: 174px minmax(420px, 1fr) 310px;
      left: 32px;
      min-height: 0;
      pointer-events: none;
      position: absolute;
      right: 32px;
      top: 118px;
      z-index: 3;
    }
    /* Party-Leiste: eigene volle Zeile unten (nur Desktop-3-Spalten-Layout) */
    @media (min-width: 981px) {
      .combat-overlay > .combat-party-bar { grid-column: 1 / -1; align-self: end; }
    }

    .poke-hud-enemy,
    .poke-hud-player { display: none; }

    .scene.intro-ready .combat-overlay {
      align-items: end;
      bottom: 30px;
      display: flex;
      justify-content: center;
      left: 24px;
      pointer-events: none;
      right: 24px;
      top: auto;
    }

    .intro-start-panel {
      align-items: stretch;
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 14px 30px rgba(2, 6, 23, 0.4);
      display: flex;
      gap: 12px;
      justify-content: center;
      max-width: 620px;
      padding: 12px;
      pointer-events: auto;
      width: min(620px, 100%);
    }
    /* Optionen gleich groß */
    .intro-start-panel .next,
    .intro-start-panel .reset {
      display: flex;
      flex: 1 1 0;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .combatant {
      align-items: center;
      background: rgba(8, 13, 24, 0.86);
      border: 1px solid rgba(226, 232, 240, 0.2);
      border-radius: 8px;
      display: grid;
      gap: 12px;
      justify-items: center;
      padding: 16px 10px 12px;
      width: 100%;
    }

    .active-combatant {
      align-self: stretch;
      align-content: center;
    }

    .damage-cameo {
      animation: damageFlicker 1100ms ease-out;
      position: absolute;
      right: 34px;
      top: 0;
    }

    .active-combatant.is-hit {
      animation: activeHitFlicker 1200ms ease-out;
    }

    .combatant .pixel-avatar {
      animation: combatDance 1600ms ease-in-out infinite;
      transform-origin: center bottom;
    }

    .combat-label,
    .speech-bubble {
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      font-size: 0.82rem;
      line-height: 1.25;
      padding: 8px 10px;
      text-align: center;
    }

    .combat-label {
      background: var(--teal, #28c6a2);
      color: #06281f;
      font-weight: 900;
      margin-top: 28px;
      width: min(140px, 100%);
    }

    .combat-patient-panel {
      align-self: stretch;
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 14px 30px rgba(2, 6, 23, 0.4);
      display: grid;
      gap: 10px;
      grid-template-rows: minmax(150px, 1fr) auto;
      min-width: 0;
      padding: 12px;
      pointer-events: none;
    }

    .combat-patient {
      align-self: end;
      animation: patientDance 1800ms ease-in-out infinite;
      display: grid;
      justify-items: center;
      position: relative;
    }

    .combat-patient .patient-pixel {
      margin: 58px 0 54px;
      transform: scale(1.98);
      transform-origin: center bottom;
    }

    .combat-patient .prop {
      position: absolute;
      z-index: 3;
    }

    .combat-patient .prop-water {
      background: linear-gradient(180deg, rgba(191, 219, 254, 0.9), rgba(37, 99, 235, 0.55));
      border: 2px solid rgba(248, 250, 252, 0.82);
      border-radius: 3px 3px 8px 8px;
      height: 34px;
      right: 40px;
      top: 84px;
      width: 20px;
    }

    .combat-patient .prop-crutch {
      background: #94a3b8;
      border-radius: 999px;
      height: 118px;
      left: 38px;
      top: 54px;
      transform: rotate(-12deg);
      width: 7px;
    }

    .combat-patient .prop-foot {
      background: #f8fafc;
      border: 3px solid #1f2937;
      border-radius: 12px;
      bottom: 12px;
      height: 30px;
      right: 18px;
      width: 56px;
    }

    .combat-patient .prop-book {
      background: linear-gradient(90deg, #f8fafc 0 47%, #dbeafe 47% 53%, #f8fafc 53%);
      border: 3px solid #1f2937;
      border-radius: 5px;
      bottom: 24px;
      height: 38px;
      right: 20px;
      transform: rotate(-6deg);
      width: 62px;
    }

    .patient-label {
      background: rgba(248, 250, 252, 0.92);
      border: 1px solid rgba(15, 23, 42, 0.22);
      border-radius: 8px;
      color: #111827;
      font-size: 0.8rem;
      font-weight: 900;
      line-height: 1.2;
      margin-top: -8px;
      padding: 7px 9px;
      text-align: center;
    }

    .patient-brief {
      background: rgba(248, 250, 252, 0.95);
      border: 1px solid rgba(15, 23, 42, 0.2);
      border-radius: 8px;
      color: var(--paper-ink);
      display: grid;
      gap: 6px;
      line-height: 1.32;
      padding: 12px;
    }

    .patient-brief strong {
      font-size: 1rem;
    }

    .patient-brief p {
      color: #1f2937;
      font-size: 0.92rem;
      margin: 0;
    }

    .patient-need-bar {
      background: rgba(0,0,0,0.12);
      border-radius: 6px;
      height: 8px;
      overflow: hidden;
    }
    .patient-need-fill {
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(90deg, #f59e0b, #ef4444);
      transition: width 0.35s ease;
    }
    .patient-need-label {
      font-size: 0.75rem;
      color: #6b7280;
      display: flex;
      justify-content: space-between;
    }

    @keyframes patientDance {
      0%   { transform: translateX(0px)  translateY(0px) scaleX(1)    scaleY(1)    rotate(0deg); }
      14%  { transform: translateX(3px)  translateY(-4px) scaleX(0.94) scaleY(1.07) rotate(4deg); }
      28%  { transform: translateX(0px)  translateY(2px)  scaleX(1.1)  scaleY(0.88) rotate(0deg); }
      42%  { transform: translateX(-3px) translateY(-4px) scaleX(0.94) scaleY(1.07) rotate(-4deg); }
      56%  { transform: translateX(0px)  translateY(2px)  scaleX(1.1)  scaleY(0.88) rotate(0deg); }
      72%  { transform: translateX(2px)  translateY(-2px) scaleX(0.97) scaleY(1.03) rotate(2deg); }
      86%  { transform: translateX(0px)  translateY(1px)  scaleX(1.04) scaleY(0.96) rotate(0deg); }
      100% { transform: translateX(0px)  translateY(0px)  scaleX(1)    scaleY(1)    rotate(0deg); }
    }
    @keyframes combatantIdle {
      0%, 100% { transform: scale(1.24) translateY(0px); }
      50%       { transform: scale(1.24) translateY(-4px); }
    }
    @keyframes combatDance {
      0%   { transform: scale(1.24) translateX(0px)  translateY(0px)  scaleX(1)    scaleY(1)    rotate(0deg); }
      12%  { transform: scale(1.24) translateX(-4px) translateY(-5px) scaleX(0.93) scaleY(1.08) rotate(-5deg); }
      24%  { transform: scale(1.24) translateX(0px)  translateY(2px)  scaleX(1.12) scaleY(0.86) rotate(0deg); }
      36%  { transform: scale(1.24) translateX(4px)  translateY(-5px) scaleX(0.93) scaleY(1.08) rotate(5deg); }
      48%  { transform: scale(1.24) translateX(0px)  translateY(2px)  scaleX(1.12) scaleY(0.86) rotate(0deg); }
      60%  { transform: scale(1.24) translateX(-3px) translateY(-3px) scaleX(0.96) scaleY(1.04) rotate(-3deg); }
      72%  { transform: scale(1.24) translateX(0px)  translateY(1px)  scaleX(1.06) scaleY(0.94) rotate(0deg); }
      84%  { transform: scale(1.24) translateX(3px)  translateY(-3px) scaleX(0.96) scaleY(1.04) rotate(3deg); }
      100% { transform: scale(1.24) translateX(0px)  translateY(0px)  scaleX(1)    scaleY(1)    rotate(0deg); }
    }

    /* Flächenpflege-Sweep: kurzer Energie-Wisch quer über die Bühne */
    .combat-sweep {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 40;
    }
    .combat-sweep .cs-band {
      position: absolute;
      top: -12%; bottom: -12%;
      left: -34%;
      width: 30%;
      background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 28%,
        rgba(255, 244, 190, 0.98) 50%,
        rgba(255, 255, 255, 0.12) 72%,
        transparent 100%);
      filter: blur(2px);
      transform: skewX(-16deg);
      animation: csBand 560ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    .combat-sweep .cs-slash {
      position: absolute;
      top: 0; bottom: 0;
      left: -20%;
      width: 4px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 14px 3px rgba(255, 240, 180, 0.9);
      transform: skewX(-18deg);
      opacity: 0;
      animation: csSlash 460ms ease-out forwards;
    }
    .combat-sweep .cs-slash.s1 { animation-delay: 40ms;  top: 8%;  bottom: 40%; }
    .combat-sweep .cs-slash.s2 { animation-delay: 110ms; top: 30%; bottom: 14%; }
    .combat-sweep .cs-slash.s3 { animation-delay: 180ms; top: 52%; bottom: 0;   }
    @keyframes csBand  { from { left: -34%; } to { left: 120%; } }
    @keyframes csSlash {
      0%   { left: -20%; opacity: 0; }
      15%  { opacity: 1; }
      100% { left: 118%; opacity: 0; }
    }
    /* Motiv je Ketten-Aktion: zentrales Emoji + Name poppen kurz auf, Wisch farbig getönt */
    .combat-sweep .cs-emoji {
      position: absolute; left: 50%; top: 42%;
      font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1;
      transform: translate(-50%, -50%) scale(0.3); opacity: 0;
      filter: drop-shadow(0 3px 0 rgba(36, 28, 26, 0.55));
      animation: csEmoji 640ms cubic-bezier(.34, 1.56, .64, 1) 80ms forwards;
    }
    .combat-sweep .cs-name {
      position: absolute; left: 50%; top: 62%;
      transform: translate(-50%, 0) scale(0.7); opacity: 0; white-space: nowrap;
      font-weight: 900; font-size: clamp(0.9rem, 2.6vw, 1.3rem); color: #fff;
      -webkit-text-stroke: 0.5px var(--cs-ink, #241c1a); text-shadow: 0 2px 0 var(--cs-ink, #241c1a);
      animation: csEmoji 560ms cubic-bezier(.34, 1.56, .64, 1) 160ms forwards;
    }
    .combat-sweep.cs-schnellangriff .cs-band { filter: blur(2px) hue-rotate(-30deg) saturate(1.6); }
    .combat-sweep.cs-betriebsversammlung .cs-band { filter: blur(2px) hue-rotate(150deg) saturate(1.4); }
    .combat-sweep.cs-gruppenanleitung .cs-band,
    .combat-sweep.cs-hilfe_holen .cs-band { filter: blur(2px) hue-rotate(60deg) saturate(1.3); }
    @keyframes csEmoji {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
      55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .combat-sweep { display: none; }
    }

    .damage-screen-flash {
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      z-index: 9999;
    }
    .damage-screen-flash.show {
      animation: damageScreenFlash 600ms ease-out forwards;
    }
    @keyframes damageScreenFlash {
      0%   { opacity: 0.55; background: rgba(220, 38, 38, 0.55); }
      100% { opacity: 0;    background: rgba(220, 38, 38, 0); }
    }

    .mobile-damage-pop {
      display: none;
    }
    @keyframes mobileDamagePop {
      0%   { opacity: 0; transform: translate(-50%, 0px) scale(0.7); }
      18%  { opacity: 1; transform: translate(-50%, -8px) scale(1.15); }
      55%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -28px) scale(0.9); }
    }
    @keyframes startDance {
      0%   { transform: translateX(0px)  translateY(0px)  scaleX(1)    scaleY(1)    rotate(0deg); }
      12%  { transform: translateX(-4px) translateY(-5px) scaleX(0.93) scaleY(1.08) rotate(-5deg); }
      24%  { transform: translateX(0px)  translateY(2px)  scaleX(1.12) scaleY(0.86) rotate(0deg); }
      36%  { transform: translateX(4px)  translateY(-5px) scaleX(0.93) scaleY(1.08) rotate(5deg); }
      48%  { transform: translateX(0px)  translateY(2px)  scaleX(1.12) scaleY(0.86) rotate(0deg); }
      60%  { transform: translateX(-3px) translateY(-3px) scaleX(0.96) scaleY(1.04) rotate(-3deg); }
      72%  { transform: translateX(0px)  translateY(1px)  scaleX(1.06) scaleY(0.94) rotate(0deg); }
      84%  { transform: translateX(3px)  translateY(-3px) scaleX(0.96) scaleY(1.04) rotate(3deg); }
      100% { transform: translateX(0px)  translateY(0px)  scaleX(1)    scaleY(1)    rotate(0deg); }
    }

    .combat-choice-panel {
      align-self: stretch;
      /* Comic-Look: Papier-Panel mit dickem Tinten-Rahmen + harter Schatten,
         wie die übrigen Karten im Spiel (Loot-Box, Truhe, Treppen-Prompt). */
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 14px 30px rgba(2, 6, 23, 0.4);
      color: var(--cs-ink);
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: none;
      min-width: 0;
      overflow: hidden;
      padding: 14px;
      pointer-events: auto;
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
    }
    /* Flex-Rollen: Frage/Überschrift fest oben, Optionen füllen den Rest,
       Zurück-Button klein und mittig darunter. (Früher grid-template-rows —
       da rutschte der Zurück-Button in die 1fr-Zeile, wenn keine <h3> da war
       und wurde riesig.) */
    .combat-choice-panel > h3,
    .combat-choice-panel > p,
    .combat-choice-panel > .combat-question,
    .combat-choice-panel > .combat-chain-status { flex: 0 0 auto; }
    .combat-choice-panel > .combat-options { flex: 1 1 auto; min-height: 0; }
    .combat-choice-panel > .combat-back-btn { flex: 0 0 auto; }
    .combat-choice-panel > .next {
      align-self: center;
      flex: 0 0 auto;
      max-height: 104px;
    }

    .combat-choice-panel h3 {
      color: var(--cs-crimson);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 1.02rem;
      letter-spacing: 0.02em;
      line-height: 1.2;
      margin: 0;
      text-transform: uppercase;
    }

    .combat-choice-panel p {
      color: rgba(36, 28, 26, 0.68);
      font-size: 0.86rem;
      font-weight: 600;
      line-height: 1.35;
      margin: 0;
    }

    .combat-question,
    .combat-choice-panel .combat-question {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: 1.02rem;
      font-weight: 800;
      line-height: 1.4;
      margin: 0;
      padding: 10px 12px;
    }

    .combat-chain-status {
      align-items: center;
      background: var(--cs-gold, #f4b942);
      border: 2px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      display: flex;
      font-size: 0.78rem;
      font-weight: 800;
      justify-content: space-between;
      padding: 6px 10px;
    }

    .combat-chain-status span {
      color: var(--gold);
      font-weight: 800;
    }

    .enemy-action-stage {
      align-items: center;
      background:
        linear-gradient(90deg, rgba(90, 169, 230, 0.08), rgba(239, 111, 108, 0.1)),
        rgba(248, 250, 252, 0.04);
      border: 1px solid rgba(226, 232, 240, 0.14);
      border-radius: 8px;
      display: grid;
      min-height: 150px;
      overflow: hidden;
      padding: 14px;
      position: relative;
    }

    .enemy-speech {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: 0.8rem;
      font-weight: 800;
      left: 50%;
      line-height: 1.25;
      max-width: min(360px, 78%);
      padding: 9px 12px;
      position: absolute;
      text-align: center;
      top: 12px;
      transform: translateX(-50%);
      z-index: 2;
    }

    .enemy-action-stage.is-resolving .enemy-speech {
      opacity: 0;
      transform: translate(-50%, 6px) scale(0.96);
      visibility: hidden;
      animation: enemySpeechAfterArrival 5000ms ease-out both;
    }

    .enemy-speech::after {
      border: 8px solid transparent;
      border-left-color: rgba(248, 250, 252, 0.96);
      bottom: -13px;
      content: "";
      left: 50%;
      position: absolute;
      transform: translateX(-50%) rotate(45deg);
    }

    .enemy-runner {
      bottom: 34px;
      position: absolute;
      right: 18px;
      transform: scale(1.15);
      transform-origin: center bottom;
    }

    .enemy-runner.moving {
      animation: enemyApproach 5000ms ease-in-out forwards;
    }

    .enemy-hit-stage {
      align-items: center;
      display: grid;
      gap: 16px;
      grid-template-columns: 110px 1fr;
      justify-items: center;
      width: 100%;
    }

    .enemy-hit-target {
      animation: activeHitFlicker 1200ms ease-out;
      transform: scale(1.18);
      transform-origin: center bottom;
    }

    .damage-star {
      align-items: center;
      animation: damageStarPop 920ms ease-out both;
      aspect-ratio: 1;
      background: #f4b942;
      clip-path: polygon(50% 0%, 61% 30%, 94% 12%, 75% 43%, 100% 50%, 75% 57%, 94% 88%, 61% 70%, 50% 100%, 39% 70%, 6% 88%, 25% 57%, 0% 50%, 25% 43%, 6% 12%, 39% 30%);
      color: #2b1a0e;
      display: grid;
      font-size: 1.1rem;
      font-weight: 1000;
      justify-items: center;
      line-height: 1;
      padding: 22px;
      text-align: center;
      text-transform: uppercase;
      width: 128px;
    }

    .damage-star small {
      display: block;
      font-size: 0.62rem;
      margin-top: 3px;
    }

    @keyframes enemyApproach {
      0% {
        opacity: 0.2;
        transform: translateX(120px) scale(0.92);
      }
      18% {
        opacity: 1;
      }
      60%, 100% {
        opacity: 1;
        transform: translateX(-260px) scale(1.18);
      }
    }

    @keyframes enemySpeechAfterArrival {
      0%, 58% {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.96);
        visibility: hidden;
      }
      59% {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.96);
        visibility: visible;
      }
      64%, 100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
        visibility: visible;
      }
    }

    @keyframes damageStarPop {
      0% {
        opacity: 0;
        transform: scale(0.45) rotate(-16deg);
      }
      58% {
        opacity: 1;
        transform: scale(1.12) rotate(4deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0);
      }
    }

    .combat-options {
      display: grid;
      gap: 8px;
      overflow: auto;
      padding-right: 2px;
      /* Optionen NICHT auf die volle Höhe strecken — sonst werden 3 Buttons je
         ~180 px hoch (Phone) und der letzte landet unter dem Spieler-HUD. */
      align-content: start;
    }

    .combat-options .option {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.3;
      min-height: 56px;
      padding: 12px 15px;
    }
    .combat-options .option:hover:not(:disabled) {
      background: #fff;
      box-shadow: 3px 3px 0 var(--cs-ink);
      transform: translate(-1px, -1px);
    }
    .combat-options .option:active:not(:disabled) {
      box-shadow: 1px 1px 0 var(--cs-ink);
      transform: translate(1px, 1px);
    }

    /* ── Vollbild-Quiz-Popup ("Pflege!") ──────────────────────────────────
       Frage + Antworten sonst in der schmalen .combat-choice-panel neben
       Zugfolge/Gegner/Party — bei vielen Kombattanten so gequetscht, dass am
       Handy nicht mal eine Antwort ohne Scrollen zu sehen war (User-Feedback).
       Deckt jetzt den ganzen Bildschirm ab, bis eine Antwort gewählt wurde. */
    .combat-quiz-overlay {
      align-items: center;
      background: rgba(8, 13, 24, 0.82);
      backdrop-filter: blur(3px);
      bottom: 0; left: 0; right: 0; top: 0;
      display: flex;
      justify-content: center;
      padding: 16px;
      position: fixed;
      z-index: 8400;   /* über Zugfolge/Menü-Bar (900), unter Hilfe (8500) */
    }
    .combat-quiz-overlay.is-hidden { display: none; }

    .combat-quiz-card {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      box-shadow: 0 8px 60px rgba(0,0,0,0.5), 5px 5px 0 var(--cs-ink);
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-height: 92dvh;
      overflow: hidden;
      padding: 22px;
      width: min(720px, 100%);
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
      --action: var(--cs-mint);
      animation: menuPopupPop 0.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .combat-quiz-card h3 {
      color: var(--cs-crimson);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 1.15rem;
      margin: 0;
      text-transform: uppercase;
    }
    .combat-quiz-card .combat-question { font-size: 1.05rem; padding: 12px 16px; }
    .combat-quiz-card .combat-options {
      flex: 1 1 auto;
      gap: 12px;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 4px;
    }
    .combat-quiz-card .combat-options .option {
      font-size: 1.02rem;
      min-height: 64px;
      padding: 14px 18px;
    }
    .combat-quiz-card .combat-back-btn { flex: 0 0 auto; }

    @media (max-width: 600px) {
      .combat-quiz-overlay { padding: 0; align-items: flex-end; }
      .combat-quiz-card {
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        max-height: 94dvh;
        width: 100%;
      }
    }

    .scene.quiz-scene .combat-overlay {
      bottom: 36px;
      grid-template-columns: 1fr;
      left: clamp(24px, 8vw, 150px);
      pointer-events: auto;
      right: clamp(24px, 8vw, 150px);
      top: 74px;
      z-index: 5;
    }

    .quiz-panel {
      align-self: stretch;
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 16px 38px rgba(2, 6, 23, 0.45);
      color: var(--cs-ink);
      display: grid;
      gap: 12px;
      /* kicker · frage · antworten(füllen+scrollen) · actions — die Frage darf
         NICHT die 1fr-Zeile sein, sonst wird sie bei wenig Platz abgeschnitten. */
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-height: 0;
      overflow: hidden;
      padding: 16px;
      pointer-events: auto;
    }
    .quiz-panel .quiz-options { overflow-y: auto; min-height: 0; }

    .quiz-kicker {
      align-items: center;
      color: var(--cs-crimson);
      display: flex;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 0.82rem;
      font-weight: 900;
      gap: 8px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .quiz-kicker::before,
    .quiz-kicker::after {
      background: linear-gradient(90deg, var(--red), var(--gold), var(--teal));
      content: "";
      flex: 1;
      height: 3px;
    }

    .quiz-question {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      display: grid;
      gap: 6px;
      padding: 14px;
    }

    .quiz-question strong {
      color: var(--cs-ink);
      font-size: clamp(1.15rem, 2vw, 1.8rem);
      font-weight: 800;
      line-height: 1.18;
    }

    .quiz-panel .quiz-options {
      min-height: 0;
    }

    .quiz-panel .option {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: clamp(1rem, 1.35vw, 1.2rem);
      font-weight: 700;
      min-height: 58px;
    }
    .quiz-panel .option:hover:not(:disabled) {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0 var(--cs-ink);
    }
    .quiz-panel .option.correct { background: #bbf7d0; }
    .quiz-panel .option.weak    { background: #fecaca; }

    .initiative-strip {
      align-items: center;
      background: linear-gradient(180deg, #2a1c12 0%, #1c120c 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 4px 4px 0 var(--cs-ink), 0 10px 24px rgba(2, 6, 23, 0.4);
      display: none;
      gap: 9px;
      left: 410px;
      max-width: calc(100% - 750px);
      min-height: 70px;
      padding: 10px 12px;
      pointer-events: none;
      position: absolute;
      top: 6px;
      z-index: 5;
    }

    .initiative-strip.show {
      display: flex;
    }

    .initiative-label {
      color: var(--cs-gold, #f4b942);
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      flex: 0 0 auto;
    }
    /* Im Kampf ist die Leiste das obere Band — das Label „Zugfolge" kostet nur
       Platz (Vorschau braucht Breite), der aktive Zug ist am Gold-Glühen klar. */
    body.in-combat .initiative-label { display: none; }
    /* … und der Werbeaufsteller-Segen ("Segen"-HUD) bekommt links seinen festen
       Platz, statt die ersten Kacheln zu verdecken. */
    body.in-combat.has-shrine .initiative-strip.show { padding-left: 82px; }
    body.in-combat .shrine-hud {
      top: 5px;
      left: 7px;
      right: auto;
      z-index: 14;
      max-width: 76px;
      padding: 4px 8px 4px 4px;
    }
    body.in-combat .shrine-hud-label { display: none; }

    /* Einheitliche Kachel für Team UND Gegner: gleiche Größe, nur ein
       Kopf-Ausschnitt. Rahmenfarbe kodiert die Zugehörigkeit. */
    .initiative-entry {
      background: rgba(255, 253, 246, 0.12);
      border: 3px solid rgba(253, 243, 225, 0.4);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      opacity: 0.72;
      padding: 0;
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    }

    .initiative-entry.is-ally  { border-color: #46b880; }
    .initiative-entry.is-enemy { border-color: #e5484d; }

    .initiative-entry.active {
      opacity: 1;
      transform: translateY(-2px);
      box-shadow: 0 0 0 3px var(--cs-gold, #f4b942), 3px 3px 0 var(--cs-ink);
    }
    .initiative-entry.is-ally.active  { background: rgba(70, 184, 128, 0.28); }
    .initiative-entry.is-enemy.active { background: rgba(229, 72, 77, 0.28); }

    /* Vorschau auf die nächsten Runden: kleiner + gedimmt */
    .initiative-entry.is-preview {
      width: 36px;
      height: 36px;
      border-width: 2px;
      opacity: 0.42;
    }
    /* Rundentrenner in der Zugfolge */
    .init-round-sep {
      flex: 0 0 auto;
      align-self: stretch;
      width: 2px;
      margin: 4px 3px;
      border-radius: 2px;
      background: repeating-linear-gradient(180deg, rgba(253,243,225,0.45) 0 4px, transparent 4px 8px);
    }

    /* Kopf-Ausschnitt (Kopf + Schulteransatz), füllt die Kachel */
    .init-head-frame {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      border-radius: 4px;
    }

    .init-head-frame .pixel-avatar,
    .init-head-frame > .pixel-avatar {
      position: absolute;
      top: -14px;                                 /* Haaransatz oben raus, Gesicht mittig */
      left: 50%;
      transform: translateX(-50%) scale(1.4);     /* ins Gesicht zoomen — sonst kaum erkennbar */
      transform-origin: top center;
    }

    .initiative-name {
      color: #fff;
      font-size: 0.62rem;
      font-weight: 800;
      max-width: 100%;
      overflow: hidden;
      padding: 0 2px;
      text-align: center;
      text-overflow: ellipsis;
      text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.8);
      white-space: nowrap;
      width: 100%;
    }

    .init-hp-bar-wrap {
      width: 100%;
      height: 6px;
      background: rgba(0,0,0,.75);
      border: 1.5px solid rgba(255,255,255,.6);
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0,0,0,.8);
      overflow: hidden;
      flex-shrink: 0;
    }
    .init-hp-bar {
      height: 100%;
      border-radius: 3px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
      transition: width .35s ease, background .35s ease;
    }

    .initiative-patient {
      height: 36px;
      position: relative;
      width: 32px;
    }

    .initiative-patient::before {
      background: #f2c7a5;
      border: 2px solid #1f2937;
      border-radius: 50%;
      content: "";
      height: 15px;
      left: 50%;
      position: absolute;
      top: 2px;
      transform: translateX(-50%);
      width: 15px;
    }

    .initiative-patient::after {
      background: linear-gradient(180deg, #60a5fa, #2563eb);
      border: 2px solid #1f2937;
      border-radius: 12px 12px 5px 5px;
      content: "";
      height: 19px;
      left: 50%;
      position: absolute;
      top: 18px;
      transform: translateX(-50%);
      width: 24px;
    }

    .mini-map {
      background: linear-gradient(180deg, #2a1c12 0%, #1c120c 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      display: none;
      gap: 4px;
      grid-template-columns: repeat(6, 18px);
      padding: 8px;
      position: absolute;
      right: 18px;
      top: 18px;
      z-index: 5;
    }

    .mini-map.show {
      display: grid;
    }

    /* Sichtbarer Stop-Button, solange der Auto-Modus läuft (User-Feedback:
       „hätte gerne im Bild einen Stop-Button" — der Auto-Modus ist schnell,
       man will ihn ohne Suchen in der Menü-Leiste abbrechen können). */
    .auto-stop-btn {
      align-items: center;
      background: linear-gradient(180deg, #ef6f6c 0%, #c94a3f 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 999px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: #fff;
      cursor: pointer;
      display: flex;
      font: inherit;
      font-weight: 900;
      font-size: 0.8rem;
      gap: 6px;
      left: 50%;
      padding: 8px 16px;
      position: absolute;
      top: 10px;
      transform: translateX(-50%);
      transition: transform 120ms, box-shadow 120ms;
      z-index: 20;
    }
    .auto-stop-btn.is-hidden { display: none; }
    .auto-stop-btn:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 4px 4px 0 var(--cs-ink); }
    .auto-stop-btn:active { transform: translateX(-50%) translateY(1px); box-shadow: 1px 1px 0 var(--cs-ink); }
    body.in-combat .auto-stop-btn { display: none !important; }

    .mini-cell {
      aspect-ratio: 1;
      background: rgba(2, 6, 23, 0.7);
      border: 1px solid rgba(226, 232, 240, 0.12);
      border-radius: 3px;
      color: var(--ink);
      display: grid;
      font-size: 0.56rem;
      font-weight: 900;
      place-items: center;
    }

    .mini-cell.unknown {
      background: rgba(2, 6, 23, 0.82);
      border-color: rgba(15, 23, 42, 0.72);
    }

    .mini-cell.corridor {
      background: rgba(90, 169, 230, 0.22);
    }

    .mini-cell.room {
      background: rgba(239, 111, 108, 0.3);
    }

    .mini-cell.room.type-combat {
      background: rgba(238, 218, 186, 0.52);
      color: #5f4325;
    }

    .mini-cell.room.type-treasure {
      background: rgba(244, 185, 66, 0.56);
      color: #3b2608;
    }

    .mini-cell.room.type-break {
      background: rgba(90, 169, 230, 0.4);
      color: #dff6ff;
    }

    .mini-cell.current {
      border-color: var(--teal);
      box-shadow: inset 0 0 0 1px rgba(40, 198, 162, 0.7);
      color: var(--teal);
    }

    .mini-cell.stairs {
      background: rgba(244, 185, 66, 0.28);
      color: var(--gold);
    }

    .mini-cell.type-boss {
      animation: boss-pulse 1.8s ease-in-out infinite;
      background: rgba(220, 50, 50, 0.55);
      color: #ffaaaa;
    }

    .speech-bubble {
      background: rgba(248, 250, 252, 0.96);
      color: #111827;
      font-weight: 800;
      max-width: 174px;
      position: relative;
    }

    .damage-toast {
      align-items: center;
      animation: damageToast 3000ms ease-out forwards;
      background: rgba(248, 250, 252, 0.97);
      border: 2px solid rgba(239, 111, 108, 0.6);
      border-radius: 8px;
      box-shadow: 0 18px 44px rgba(2, 6, 23, 0.46);
      color: #111827;
      display: grid;
      gap: 14px;
      grid-template-columns: 68px 1fr;
      left: 50%;
      max-width: min(460px, calc(100% - 32px));
      opacity: 0;
      padding: 12px 14px;
      pointer-events: none;
      position: fixed;
      top: 46%;
      transform: translate(-50%, -50%);
      width: 460px;
      z-index: 30;
    }

    .damage-toast .pixel-avatar {
      transform: scale(1.15);
      transform-origin: center;
    }

    .damage-toast strong {
      display: block;
      margin-bottom: 4px;
    }

    .damage-toast p {
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.35;
      margin: 0;
    }

    .speech-bubble::after {
      border: 8px solid transparent;
      border-top-color: rgba(248, 250, 252, 0.96);
      bottom: -16px;
      content: "";
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
    }

    @keyframes damageFlicker {
      0% {
        opacity: 0;
        transform: translateY(12px) scale(0.94);
      }
      12%, 32%, 52% {
        filter: brightness(1.85) saturate(1.3);
        opacity: 1;
      }
      22%, 42%, 68% {
        filter: brightness(0.72);
        opacity: 0.64;
      }
      100% {
        filter: none;
        opacity: 0;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes activeHitFlicker {
      0%, 100% {
        filter: none;
      }
      16%, 42%, 68% {
        filter: brightness(1.8) saturate(1.35);
      }
      28%, 54% {
        filter: brightness(0.72);
      }
    }

    @keyframes damageToast {
      0% {
        opacity: 0;
        transform: translate(-50%, -42%) scale(0.94);
      }
      10%, 88% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -56%) scale(0.98);
      }
    }

    .intent-card {
      background: rgba(239, 111, 108, 0.16);
      border: 1px solid rgba(239, 111, 108, 0.38);
      border-radius: 8px;
      color: var(--ink);
      font-size: 0.9rem;
      left: 18px;
      max-width: 330px;
      padding: 10px 12px;
      top: 18px;
    }

    .intent-card span {
      color: var(--red);
      display: block;
      font-size: 0.76rem;
      font-weight: 800;
      margin-bottom: 3px;
      text-transform: uppercase;
    }

    .scene.explore .intent-card {
      background: rgba(90, 169, 230, 0.14);
      border-color: rgba(90, 169, 230, 0.36);
    }

    .scene.explore .intent-card span {
      color: var(--blue);
    }

    .scene.clean-explore .intent-card,
    .scene.quiz-scene .intent-card,
    .scene.clean-explore .scene-card,
    .scene.quiz-scene .scene-card {
      display: none;
    }

    /* Im Kampf-Vollbild liegt die Zugfolge oben links — die Intent-Karte
       (Aktions-Hinweis) würde darunter durchscheinen. Der Zug-Text im
       Overlay erklärt die Aktion ohnehin. */
    body.in-combat .intent-card { display: none !important; }

    .scene-card {
      align-items: center;
      background: var(--cs-paper);
      border: 3px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      bottom: 18px;
      color: var(--cs-ink);
      display: block;
      gap: 14px;
      left: 50%;
      max-width: min(880px, calc(100% - 32px));
      padding: 16px 18px;
      transform: translateX(-50%);
      width: 88%;
      z-index: 4;
    }

    .scene-card.has-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .scene-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .scene-card-actions:empty {
      display: none;
    }

    .scene-card-actions .next,
    .scene-card-actions .reset {
      margin: 0;
      min-height: 38px;
      padding: 8px 12px;
      white-space: normal;
    }

    .figure {
      height: 82px;
      position: relative;
    }

    .figure span {
      display: block;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
    }

    .head {
      background: #f2c7a5;
      border: 3px solid #334155;
      border-radius: 50%;
      height: 30px;
      top: 0;
      width: 30px;
    }

    .body {
      background: linear-gradient(180deg, var(--blue), #2563eb);
      border-radius: 18px 18px 8px 8px;
      height: 49px;
      top: 32px;
      width: 52px;
    }

    .scene-card strong {
      display: block;
      font-size: 1.15rem;
      margin-bottom: 5px;
    }

    .scene-card p {
      font-size: 1.05rem;
      line-height: 1.45;
      margin: 0;
    }

    .scene.combat .scene-card {
      display: none;
    }

    .scene.intro .scene-card {
      bottom: auto;
      left: auto;
      max-width: 430px;
      right: 24px;
      top: 74px;
      transform: none;
      width: min(430px, calc(54% - 28px));
    }

    .scene.intro .scene-card.has-actions {
      grid-template-columns: minmax(0, 1fr);
    }

    .scene.intro .scene-card-actions {
      justify-content: flex-start;
      margin-top: 10px;
    }

    .scene.combat .scene-card strong {
      font-size: 0.92rem;
    }

    .scene.combat .scene-card p {
      font-size: 0.82rem;
      line-height: 1.3;
    }

    .meter-row { display: none; }

    /* ── Kampf: Wolf-Bar raus, Spieler-Status zeigt die Party-Leiste unten ──
       (User: „die Wolfbar kann aus dem Kampf raus") */
    body.in-combat .wolf-bar { display: none; }
    body.in-combat .scene.combat .poke-hud-enemy,
    body.in-combat .scene.combat .poke-hud-player { display: none !important; }
    body.in-combat #gameApp { display: flex; flex-direction: column; }

    /* ── Spieler-Party-Leiste im Kampf (Spieler + Azubis) ───────────────── */
    .combat-party-bar {
      display: flex;
      gap: 8px;
      align-items: stretch;
      justify-content: flex-start;   /* links einsortiert (User) */
      flex-wrap: wrap;
      pointer-events: auto;
    }
    .combat-party-bar .cpm {
      display: flex;
      gap: 9px;
      align-items: center;
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      padding: 8px 14px 8px 8px;
      flex: 0 1 260px;
      max-width: 320px;
      min-width: 0;
    }
    .combat-party-bar .cpm.is-turn {
      border-color: var(--cs-gold, #f4b942);
      box-shadow: 0 0 0 3px var(--cs-gold, #f4b942), 3px 3px 0 var(--cs-ink);
    }
    .combat-party-bar .cpm.ko { opacity: 0.5; filter: grayscale(0.7); }
    .combat-party-bar .cpm-face {
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      overflow: hidden;
      border-radius: 8px;
      border: 2px solid var(--cs-ink);
      background: rgba(36, 28, 26, 0.08);
      position: relative;
    }
    /* Legendary-Eckbadges auf der Party-Kachel: .cpm-face croppt auf den Kopf
       (overflow:hidden), Körper-/Schuh-/Hand-Legendaries wären dort unsichtbar.
       Die Badges sitzen BINNEN der 44×44-Box (kein Clipping), unten rechts. */
    .cpm-leg-badges {
      position: absolute;
      right: 1px;
      bottom: 1px;
      display: flex;
      gap: 1px;
      z-index: 6;
      pointer-events: none;
    }
    .cpm-leg-badge.leg-ico {
      width: 11px;
      height: 11px;
      font-size: 11px;
      filter: drop-shadow(0 0 1px rgba(0,0,0,0.95)) drop-shadow(0 0 2px rgba(240,180,0,0.6));
    }
    .combat-party-bar .cpm-face .pixel-avatar {
      position: absolute;
      top: -17px;                                 /* Haaransatz oben raus, Gesicht mittig */
      left: 50%;
      transform: translateX(-50%) scale(1.4);
      transform-origin: top center;
    }
    .combat-party-bar .cpm-info {
      display: grid;
      gap: 2px;
      min-width: 0;
      flex: 1 1 auto;
      color: var(--cs-ink);
    }
    .combat-party-bar .cpm-name {
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .combat-party-bar .cpm-num {
      font-size: 0.66rem;
      font-weight: 700;
      color: rgba(36, 28, 26, 0.68);
      font-variant-numeric: tabular-nums;
    }
    .combat-party-bar .cpm-num-sp { color: var(--cs-cobalt, #3b6fb5); }
    /* Aktive Buffs (Icon + Restrunden) */
    .combat-party-bar .cpm-buffs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
    .combat-party-bar .cpm-buff {
      display: inline-flex; align-items: center; gap: 1px;
      font-size: 0.72rem; line-height: 1;
      padding: 1px 4px; border-radius: 8px;
      background: #fff6d8; border: 1px solid var(--cs-ink); box-shadow: 1px 1px 0 var(--cs-ink);
      cursor: help;
    }
    .combat-party-bar .cpm-buff-new { animation: cpmBuffPop 0.45s cubic-bezier(.34,1.56,.64,1) both; }
    .combat-party-bar .cpm-buff i { font-style: normal; font-size: 0.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    @keyframes cpmBuffPop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .combat-party-bar .cpm-bar {
      height: 6px;
      background: rgba(36, 28, 26, 0.18);
      border: 1px solid var(--cs-ink);
      border-radius: 4px;
      overflow: hidden;
    }
    .combat-party-bar .cpm-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.35s ease;
    }
    .combat-party-bar .cpm-bar-fill.hp { background: linear-gradient(90deg, #22c55e, #4ade80); }
    .combat-party-bar .cpm.tier-mid  .cpm-bar-fill.hp { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .combat-party-bar .cpm.tier-low  .cpm-bar-fill.hp { background: linear-gradient(90deg, #ef4444, #f87171); }
    .combat-party-bar .cpm-bar-fill.sp { background: linear-gradient(90deg, var(--cs-cobalt, #3b6fb5), var(--cs-gold, #f4b942)); }

    /* ── Wolfenstein-Statusbar ─────────────────────────────────────────────── */
    .wolf-bar {
      background: linear-gradient(180deg, #2a1c12 0%, #1c120c 100%);
      border-bottom: 3px solid var(--cs-ink);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0;
      padding: 6px 14px;
      min-height: 58px;
    }

    .wolf-left, .wolf-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .wolf-stat-label {
      color: #4b5563;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .wolf-stat-value {
      color: var(--gold);
      font-size: 1rem;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .wolf-center {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: 10px;
      padding: 0 16px;
    }

    .wolf-main {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .wolf-face-wrap {
      width: 44px;
      height: 44px;
      border: 2px solid #1e2d40;
      border-radius: 4px;
      background: #0a0f1a;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 0 10px rgba(0,0,0,0.7), inset 0 0 6px rgba(0,0,0,0.4);
    }

    .wolf-face-wrap .pixel-avatar {
      transform: scale(0.72);
      transform-origin: top center;
      position: absolute;
      top: -2px;
    }

    /* HP-Zustand: Gesichtsrahmen-Farbe nach HP */
    .wolf-face-wrap.hp-high   { border-color: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.35), inset 0 0 6px rgba(0,0,0,0.4); }
    .wolf-face-wrap.hp-mid    { border-color: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,0.35), inset 0 0 6px rgba(0,0,0,0.4); }
    .wolf-face-wrap.hp-low    { border-color: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.5), inset 0 0 6px rgba(0,0,0,0.4); animation: wolf-pulse 1s ease-in-out infinite; }

    @keyframes wolf-pulse {
      0%, 100% { box-shadow: 0 0 10px rgba(239,68,68,0.5), inset 0 0 6px rgba(0,0,0,0.4); }
      50%       { box-shadow: 0 0 20px rgba(239,68,68,0.9), inset 0 0 6px rgba(0,0,0,0.4); }
    }

    .wolf-hp-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      width: 120px;
    }

    .wolf-hp-label {
      color: var(--muted);
      font-size: 0.68rem;
      letter-spacing: 0.05em;
    }

    .wolf-hp-label span {
      color: var(--ink);
      font-weight: 700;
    }

    .wolf-hp-track {
      width: 100%;
      height: 8px;
      background: rgba(255,255,255,0.08);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .wolf-hp-fill {
      height: 100%;
      border-radius: 999px;
      background: #22c55e;
      transition: width 0.3s ease, background 0.3s ease;
    }

    .wolf-hp-fill.hp-mid { background: #f59e0b; }
    .wolf-hp-fill.hp-low { background: #ef4444; }

    .wolf-sp-label {
      color: #8fb8e8;
      font-size: 0.68rem;
      letter-spacing: 0.05em;
    }
    .wolf-sp-label span {
      color: #cfe0f7;
      font-weight: 700;
    }
    .wolf-sp-track {
      width: 100%;
      height: 8px;
      background: rgba(46,95,163,0.2);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(46,95,163,0.25);
    }
    .wolf-sp-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--cs-cobalt), var(--cs-gold));
      transition: width 0.3s ease;
    }

    .wolf-attrs {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .wolf-attr-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .wolf-attr-key {
      color: #4b5563;
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      width: 22px;
    }

    .wolf-attr-dots {
      display: flex;
      gap: 2px;
    }

    .wolf-attr-dot {
      width: 7px;
      height: 7px;
      border-radius: 2px;
      background: rgba(255,255,255,0.08);
    }

    .wolf-attr-dot.filled { background: var(--gold); }

    .wolf-attr-num {
      color: var(--ink);
      font-size: 0.7rem;
      font-weight: 700;
      min-width: 14px;
      text-align: right;
    }

    /* ── Begleiter (Schüler etc.) direkt neben dem Hauptcharakter ─────────── */
    .wolf-companions {
      align-items: center;
      display: flex;
      gap: 8px;
    }

    .wolf-companions:empty { display: none; }

    .wolf-companion {
      align-items: center;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      gap: 2px;
      transition: opacity 200ms;
    }

    .wolf-companion.ko { opacity: 0.5; }

    .wolf-companion-face {
      background: #0a0f1a;
      border: 2px solid var(--cs-cobalt);
      border-radius: 5px;
      height: 32px;
      overflow: hidden;
      position: relative;
      width: 32px;
    }

    .wolf-companion-face .pixel-avatar {
      left: 50%;
      margin-left: -16px;
      position: absolute;
      top: -1px;
      transform: scale(0.52);
      transform-origin: top center;
    }

    .wolf-companion-name {
      color: #8fb8e8;
      font-size: 0.56rem;
      font-weight: 800;
      line-height: 1;
      max-width: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wolf-companion-hp-track {
      background: rgba(255,255,255,0.1);
      border-radius: 999px;
      height: 3px;
      overflow: hidden;
      width: 32px;
    }

    .wolf-companion-hp-fill {
      background: #22c55e;
      border-radius: 999px;
      height: 100%;
    }
    .wolf-companion-hp-fill.mid { background: #f59e0b; }
    .wolf-companion-hp-fill.low { background: #ef4444; }

    body.in-combat .wolf-companion-face { width: 24px; height: 24px; }
    body.in-combat .wolf-companion-face .pixel-avatar { transform: scale(0.4); }
    body.in-combat .wolf-companion-name { display: none; }
    body.in-combat .wolf-companion-hp-track { width: 24px; }

    .bar {
      align-self: center;
      background: rgba(248, 250, 252, 0.14);
      border-radius: 999px;
      height: 10px;
      overflow: hidden;
    }

    .bar span {
      background: linear-gradient(90deg, var(--red), var(--gold), var(--teal));
      display: block;
      height: 100%;
      transition: width 180ms ease;
    }

    .bar.progress span {
      background: linear-gradient(90deg, var(--blue), var(--teal), var(--green));
    }

    .main {
      background: #0b1020;
      display: grid;
      gap: 1px;
      grid-template-columns: 1fr minmax(220px, 22%);
    }

    #mainPanel {
      margin-top: 8px;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 10px;
    }
    #mainPanel:empty { display: none; }

    /* Platz für die Popup-Bar am unteren Rand */
    .game-app { padding-bottom: 56px; }

    .panel,
    .inventory-panel,
    .log-panel {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      padding: 18px;
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
      --action: var(--cs-mint);
    }

    .panel h2,
    .inventory-panel h2,
    .log-panel h2 {
      color: var(--cs-crimson);
      font-size: 1rem;
      margin: 0 0 12px;
    }

    .team,
    .case,
    .side,
    .map-wrap {
      display: grid;
      gap: 10px;
    }

    /* ── Menü-Popup-Bar ──────────────────────────────────────────────── */
    .menu-popup-bar {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: none; /* wird per JS eingeblendet wenn Dungeon aktiv */
      align-items: stretch;
      background: #1c120c;
      border: 3px solid var(--cs-ink);
      border-bottom: none;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
      gap: 0;
      padding: 0;
      z-index: 900;
      width: min(960px, 100vw);
    }

    .popup-lb-section { margin-bottom: 20px; }
    .popup-lb-section h3 { font-size: 0.85rem; color: var(--muted); margin: 0 0 8px; }

    .menu-popup-bar.visible {
      display: flex;
    }

    /* Blockierende Popups (Loot-Rad, Truhe, Quiz …) liegen über allem — die
       fixe Menü-Bar (z-index 900) stach sonst durch den Dim-Layer und verdeckte
       den Weiter-Button. Während ein Popup offen ist, Bar ausblenden. */
    body.popup-open .menu-popup-bar { display: none; }

    .mpb-btn {
      background: #3a2418;
      border: none;
      border-right: 3px solid var(--cs-ink);
      color: #fdf3e1;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1 1 0;
      min-width: 0;         /* darf unter Label-Breite schrumpfen (8 Buttons auf schmalen Phones) */
      gap: 4px;
      padding: 10px 6px 12px;
      transition: filter 0.15s;
    }

    .mpb-btn:last-child { border-right: none; }

    .mpb-btn:hover { filter: brightness(1.18); }
    .mpb-btn:active { filter: brightness(0.9); }

    .mpb-btn-active { filter: brightness(1.25); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35); }

    /* ── Comic-Farbkacheln pro Menüpunkt: kräftige Vollfarbe, helle Labels ── */
    .mpb-btn[data-menu-popup="team"],
    .mpb-btn[data-menu-popup="map"],
    .mpb-btn[data-menu-popup="metaperks"],
    .mpb-btn[data-menu-popup="leaderboard"] { background: #2e5fa3; }

    .mpb-btn[data-menu-popup="bag"],
    .mpb-btn.mpb-btn-exit,
    .mpb-btn[data-menu-popup="wardrobe"] { background: #d1402b; }

    .mpb-btn[data-menu-popup="equip"],
    .mpb-btn.mpb-btn-help,
    .mpb-btn[data-menu-popup="dungeons"] { background: #2f9d8f; }

    .mpb-btn[data-menu-popup="achievements"],
    .mpb-btn[data-menu-popup="medals"] { background: #e0a21c; }
    .mpb-btn[data-menu-popup="achievements"] .mpb-label,
    .mpb-btn[data-menu-popup="medals"] .mpb-label { color: #2b1a0e; }

    .mpb-btn[data-menu-popup="spezial"] { background: #b8862b; }
    .mpb-btn[data-menu-popup="spezial"] .mpb-label { color: #2b1a0e; }

    /* Auto-Erkundung: violett im Aus-Zustand, grün + pulsierend/rotierend wenn aktiv */
    .mpb-btn.mpb-btn-auto { background: #6b46c1; }
    .mpb-btn.mpb-btn-auto[aria-pressed="true"] {
      background: #2f9d8f;
      box-shadow: inset 0 0 0 3px rgba(255,255,255,0.55);
      animation: mpbAutoPulse 1.5s ease-in-out infinite;
    }
    .mpb-btn.mpb-btn-auto[aria-pressed="true"] .mpb-icon {
      animation: mpbAutoSpin 3s linear infinite;
    }
    @keyframes mpbAutoPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
    @keyframes mpbAutoSpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .mpb-btn.mpb-btn-auto[aria-pressed="true"],
      .mpb-btn.mpb-btn-auto[aria-pressed="true"] .mpb-icon { animation: none; }
    }

    /* ── Auto-Modus: Comic-Splash vor einem Kampf ──────────────────────────── */
    .auto-combat-splash {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(22px, 6vh, 48px);
      overflow: hidden;
      background: radial-gradient(circle at 50% 44%, #ffd651 0%, #f0a850 34%, var(--cs-crimson) 72%, #6d1b12 100%);
      opacity: 0;
      transition: opacity 0.18s ease;
    }
    .auto-combat-splash.is-in { opacity: 1; }
    .auto-combat-splash.is-boss {
      background: radial-gradient(circle at 50% 44%, #b0463a 0%, #7a1f14 40%, #2a0b08 100%);
    }
    .auto-combat-splash .acs-rays {
      position: absolute;
      inset: -30%;
      background: repeating-conic-gradient(from 0deg at 50% 46%,
        rgba(36,28,26,0.30) 0deg 7deg, transparent 7deg 15deg);
      animation: acsSpin 16s linear infinite;
      pointer-events: none;
    }
    .auto-combat-splash .acs-halftone {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(var(--cs-ink) 1.4px, transparent 1.6px);
      background-size: 11px 11px;
      opacity: 0.13;
      pointer-events: none;
    }
    @keyframes acsSpin { to { transform: rotate(360deg); } }
    .auto-combat-splash .acs-burst {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: min(76vw, 46vh, 330px);
      aspect-ratio: 1;
      background: var(--cs-paper);
      color: var(--cs-ink);
      border: 4px solid var(--cs-ink);
      clip-path: polygon(0% 15%, 12% 0%, 26% 12%, 40% 0%, 54% 12%, 70% 0%, 84% 14%, 100% 4%,
                         92% 26%, 100% 44%, 88% 60%, 100% 78%, 84% 88%, 66% 100%, 50% 88%,
                         34% 100%, 18% 88%, 4% 96%, 10% 72%, 0% 54%, 8% 34%);
      transform: scale(0.3) rotate(-6deg);
      transition: transform 0.42s cubic-bezier(.34,1.7,.64,1);
    }
    .auto-combat-splash.is-in .acs-burst { transform: scale(1) rotate(-4deg); }
    .auto-combat-splash .acs-bang {
      font-family: "Arial Black", Arial, sans-serif;
      font-weight: 900;
      font-size: clamp(4rem, 22vw, 8rem);
      line-height: 0.85;
      color: var(--cs-crimson);
      -webkit-text-stroke: 4px var(--cs-ink);
      paint-order: stroke fill;
    }
    .auto-combat-splash.is-boss .acs-bang { color: #7a1f14; }
    .auto-combat-splash .acs-word {
      font-family: "Arial Black", Arial, sans-serif;
      font-weight: 900;
      font-size: clamp(1rem, 5.5vw, 1.7rem);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .auto-combat-splash .acs-btn {
      position: relative;
      appearance: none;
      background: var(--cs-mint);
      color: #fff;
      border: 4px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink);
      font-weight: 900;
      font-size: clamp(1rem, 4.5vw, 1.35rem);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 14px 44px;
      cursor: pointer;
    }
    .auto-combat-splash .acs-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 3px 3px 0 var(--cs-ink);
    }
    @media (prefers-reduced-motion: reduce) {
      .auto-combat-splash .acs-rays { animation: none; }
      .auto-combat-splash .acs-burst { transition: opacity 0.18s ease; transform: none; }
      .auto-combat-splash.is-in .acs-burst { transform: none; }
    }

    .mpb-icon {
      font-size: 1.5rem;
      line-height: 1;
      filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
    }

    .mpb-label {
      color: inherit;
      font-size: clamp(0.54rem, 1.6vw, 0.66rem);
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1.05;
      max-width: 100%;
      text-align: center;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
      text-transform: uppercase;
      overflow-wrap: anywhere;   /* „AUSRÜSTUNG"/„WELTKARTE" dürfen umbrechen statt abgeschnitten zu werden */
      hyphens: auto;
    }

    /* Schmale Phones: 8 Menü-Buttons passen nicht in eine Reihe → 2 Reihen à 4.
       (Im Kampf zeigen nur Team+Hilfe, dort bleibt es eine Reihe.) */
    @media (max-width: 560px) {
      .menu-popup-bar { width: 100vw; flex-wrap: wrap; }
      .mpb-btn {
        flex: 1 0 25%;
        border-bottom: 2px solid var(--cs-ink);
        padding: 8px 4px 9px;
      }
      .mpb-btn:nth-last-child(-n+4) { border-bottom: none; }
      .mpb-icon { font-size: 1.35rem; }
      .mpb-label { font-size: 0.6rem; }
      body.in-combat .menu-popup-bar { flex-wrap: nowrap; }
      body.in-combat .mpb-btn { border-bottom: none; }
      /* Die 2-reihige Bar ist ~110px hoch — abhängige Abstände nachziehen.
         (.menu-popup-overlay bottom → siehe nach dessen Basisregel weiter unten.) */
      body:not(.in-combat) .panel { padding-bottom: 118px; }
      body:not(.in-combat) .side { padding-bottom: 118px; }
      .worldmap-grid { bottom: 118px; }
      .worldmap-campaign-panel { padding-bottom: 124px; }
    }

    /* ── Kampfmodus: nur Team + Hilfe sichtbar ───────────────── */
    body.in-combat .mpb-btn:not([data-menu-popup="team"]):not(.mpb-btn-help) {
      display: none;
    }
    body.in-combat .mpb-btn[data-menu-popup="team"],
    body.in-combat .mpb-btn.mpb-btn-help {
      flex: 1;
      font-size: 0.9rem;
      padding: 10px 0;
    }
    body.in-combat .mpb-btn[data-menu-popup="team"] .mpb-icon,
    body.in-combat .mpb-btn.mpb-btn-help .mpb-icon {
      font-size: 1.4rem;
    }
    body.in-combat .mpb-btn[data-menu-popup="team"] .mpb-label,
    body.in-combat .mpb-btn.mpb-btn-help .mpb-label {
      font-size: 0.75rem;
    }

    /* ── Spezial-Button Badge ─────────────────────────────────── */
    .mpb-btn-spezial { position: relative; background: rgba(240,180,0,0.24); }
    .mpb-btn-spezial .mpb-label { color: #ffdf8a; }
    .mpb-btn-spezial:hover { background: rgba(240,180,0,0.4); color: #fff2cc; }
    .mpb-btn-spezial.mpb-btn-active { background: rgba(240,180,0,0.5) !important; color: var(--cs-ink) !important; }
    .mpb-sp-badge {
      background: linear-gradient(135deg, var(--cs-cobalt), #5a8fd6);
      border-radius: 999px;
      color: #fff;
      display: none;
      font-size: 0.58rem;
      font-weight: 800;
      line-height: 1;
      min-width: 16px;
      padding: 2px 4px;
      position: absolute;
      right: 6px;
      text-align: center;
      top: 4px;
    }
    .mpb-sp-badge.sp-badge-low { background: linear-gradient(135deg, #a3341f, var(--cs-crimson)); opacity: 0.7; }

    /* ── Spezial-Panel ──────────────────────────────────────────── */
    .spez-sp-header {
      background: var(--cs-cobalt);
      border: 2.5px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      margin-bottom: 16px;
      padding: 12px 14px;
    }
    .spez-sp-info {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
    }
    .spez-sp-label { color: var(--cs-paper); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
    .spez-sp-value { color: var(--cs-gold); font-size: 1.1rem; font-weight: 900; }
    .spez-sp-track {
      background: rgba(36,28,26,0.3);
      border-radius: 999px;
      height: 8px;
      overflow: hidden;
    }
    .spez-sp-fill {
      background: var(--cs-gold);
      border-radius: 999px;
      height: 100%;
      transition: width 0.35s ease;
    }
    .spez-sp-hint { color: var(--cs-paper); opacity: 0.85; font-size: 0.75rem; margin: 6px 0 0; }

    .spez-groups { display: flex; flex-direction: column; gap: 16px; }
    .spez-group {}
    .spez-group-label {
      color: #5a8fd6;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      margin: 0 0 8px;
      text-transform: uppercase;
    }
    .spez-empty {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.5;
      padding: 10px 4px;
    }
    .spez-card {
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      margin-bottom: 8px;
      padding: 10px 12px;
    }
    .spez-card-disabled { opacity: 0.55; }
    .spez-card-head {
      align-items: center;
      display: flex;
      gap: 8px;
      margin-bottom: 4px;
    }
    .spez-icon { font-size: 1.1rem; }
    .spez-name { color: var(--cs-ink); flex: 1; font-weight: 700; font-size: 0.9rem; }
    .spez-cost {
      background: var(--cs-cobalt);
      border: 1.5px solid var(--cs-ink);
      border-radius: 6px;
      color: var(--cs-paper);
      font-size: 0.75rem;
      font-weight: 800;
      padding: 2px 7px;
    }
    .spez-cost-low { background: var(--cs-crimson); color: var(--cs-paper); }
    .spez-desc { color: rgba(36,28,26,0.65); font-size: 0.8rem; margin: 0 0 6px; line-height: 1.45; }
    .spez-reason { color: var(--cs-crimson); font-size: 0.75rem; margin: 0 0 6px; font-weight: 700; }
    .spez-use-btn {
      background: var(--cs-cobalt);
      border: 2px solid var(--cs-ink);
      border-radius: 6px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-paper);
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 700;
      padding: 5px 12px;
      transition: transform 0.12s;
    }
    .spez-use-btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cs-ink); }
    .spez-use-btn:disabled { cursor: not-allowed; opacity: 0.5; }
    .spez-passiv-card {
      background: var(--cs-mint);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      padding: 8px 10px;
      margin-bottom: 6px;
      color: var(--cs-paper);
    }
    .spez-passiv-badge {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--cs-ink);
      background: var(--cs-paper);
      border: 1px solid var(--cs-ink);
      border-radius: 4px;
      padding: 1px 6px;
    }
    .spez-passiv-group { border-top: 2px solid rgba(36,28,26,0.16); margin-top: 12px; padding-top: 10px; opacity: 0.82; }
    .spez-passiv-hint { color: var(--muted, rgba(36,28,26,0.55)); font-size: 0.66rem; font-weight: 600; text-transform: none; letter-spacing: 0; }

    /* ── Spezial Animation Overlay ─────────────────────────────────────── */
    .sa-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.82);
      display: flex; align-items: center; justify-content: center;
    }
    .sa-overlay[hidden] { display: none; }
    .sa-card {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      padding: 24px 20px 20px;
      width: min(340px, 92vw);
      text-align: center;
      box-shadow: 6px 6px 0 var(--cs-ink);
    }
    .sa-title {
      font-size: 1.25rem; font-weight: 800; letter-spacing: 0.03em;
      color: var(--cs-crimson);
      -webkit-text-stroke: 0.6px var(--cs-ink);
      margin-bottom: 20px;
      animation: sa-title-in 0.35s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes sa-title-in {
      from { opacity: 0; transform: scale(0.7) translateY(-10px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .sa-stage {
      min-height: 110px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .sa-char { font-size: 2.6rem; display: inline-block; line-height: 1; }
    /* Pixel-Art-Requisiten und Pixel-Bühne der Spezial-Animationen (pixelart-spezial.js) */
    .sa-px { display: inline-block; line-height: 0; }
    .sa-px svg { display: block; width: 1em; height: 1em; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.3)); }
    .sa-steam .sa-px { font-size: 2.2rem; opacity: 0.8; }
    .sa-arzt-heal { display: flex; gap: 2px; align-items: center; }
    .sa-arzt-heal .sa-px { font-size: 1.5rem; }
    .sa-stage.sa-pixel { background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; border: 3px solid var(--cs-ink); border-radius: 6px; min-height: 132px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); }
    .sa-stage.sa-pixel .sa-kaffee-count, .sa-stage.sa-pixel .sb-tag { text-shadow: 1px 1px 0 #000; }
    .sa-stage.sa-pixel .sb-tag { color: #ffe9a0; background: rgba(20,14,34,0.78); border-radius: 6px; padding: 1px 8px; }
    /* Echte Ingame-Sprites in Spezial-Animationen: eigener Skalierungs-Layer,
       damit die Positions-/Bewegungs-Transforms der .sa-char-Wrapper unangetastet bleiben. */
    .sa-char .pixel-avatar { transform: scale(0.8); transform-origin: center top; }
    .sa-weiter {
      margin-top: 20px;
      background: var(--cs-mint);
      color: var(--cs-paper); font-size: 1rem; font-weight: 800;
      border: 2.5px solid var(--cs-ink); border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      padding: 10px 28px; cursor: pointer;
      opacity: 0; transition: opacity 0.3s, transform 0.12s;
      pointer-events: none;
    }
    .sa-weiter.visible { opacity: 1; pointer-events: auto; }
    .sa-weiter:hover { transform: translate(-1px,-1px); }
    .sa-weiter:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--cs-ink); }

    /* ── Neue Spezial-Animationen (Bühnen für Aktionen ohne eigene Animation) ── */
    .sb-stage { position: relative; width: 200px; height: 104px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
    .sb-stage.sb-wide { width: 260px; }
    .sb-hero { position: relative; z-index: 2; }
    .sb-ico { position: absolute; font-size: 1.9rem; line-height: 1; opacity: 0; z-index: 3; }
    .sb-tag {
      position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 4;
      font-size: 0.85rem; font-weight: 900; color: var(--cs-crimson); -webkit-text-stroke: 0.4px var(--cs-ink);
      opacity: 0; animation: sb-tag-in 0.45s 0.9s cubic-bezier(.34,1.56,.64,1) both;
    }
    .sb-glow { position: absolute; inset: 0; border-radius: 50%; opacity: 0; animation: sb-glow-in 0.8s 0.1s ease both; }
    .sb-glow-ice { background: radial-gradient(circle, rgba(125,211,252,0.55) 0%, transparent 70%); }
    .sb-ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
      border: 3px solid rgba(94,200,150,0.75); opacity: 0; animation: sb-ring 1.3s ease-out both; }
    .sb-ring-gold { border-color: rgba(244,185,66,0.85); }
    .sb-ring1 { animation-delay: 0.2s; } .sb-ring2 { animation-delay: 0.6s; } .sb-ring3 { animation-delay: 1s; }
    .sb-spark { position: absolute; font-size: 1.2rem; opacity: 0; z-index: 3; animation: sb-spark 0.9s 0.8s ease-out both; }
    .sb-spark1 { left: 38%; top: 6%; } .sb-spark2 { right: 36%; top: 14%; animation-delay: 1s; }

    /* Pumpen */
    .sb-pump-hero { animation: sb-pump 0.5s 0.2s cubic-bezier(.34,1.56,.64,1) 2 alternate both; }
    .sb-pump-l { left: 14%; top: 28%; animation: sb-pop 0.45s 0.4s cubic-bezier(.34,1.56,.64,1) both; }
    .sb-pump-r { right: 14%; top: 28%; animation: sb-pop-flip 0.45s 0.6s cubic-bezier(.34,1.56,.64,1) both; }
    /* Massephase */
    .sb-mass-hero { animation: sb-pump 0.45s 1s cubic-bezier(.34,1.56,.64,1) 2 alternate both; }
    .sb-fall { top: -8%; animation: sb-fall 0.7s ease-in both; }
    .sb-fall1 { left: 20%; animation-delay: 0.2s; } .sb-fall2 { left: 44%; animation-delay: 0.45s; } .sb-fall3 { right: 18%; animation-delay: 0.7s; }
    /* Fiebermessung */
    .sb-fever-hero { animation: sb-shake 0.4s 0.5s ease 2 both; }
    .sb-fever-thermo { right: 12%; top: 10%; animation: sb-pop 0.4s 0.2s cubic-bezier(.34,1.56,.64,1) both; }
    .sb-fever-merc { position: absolute; right: 5%; top: 18%; width: 6px; height: 52px; border: 2px solid var(--cs-ink); border-radius: 4px; background: #fff; overflow: hidden; z-index: 3; opacity: 0; animation: sb-show 0.3s 0.4s both; }
    .sb-fever-merc span { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg,#f59e0b,#ef4444); animation: sb-fill 1s 0.5s ease-out both; }
    /* Kühlende Wickel / Beruhigen */
    .sb-snow { top: -6%; animation: sb-snow 1.4s ease-in both; }
    .sb-snow1 { left: 18%; animation-delay: 0.1s; } .sb-snow2 { left: 46%; animation-delay: 0.4s; } .sb-snow3 { right: 18%; animation-delay: 0.7s; }
    .sb-face { right: 22%; top: 8%; animation: sb-pop 0.45s 0.5s cubic-bezier(.34,1.56,.64,1) both; }
    /* Druckentlastung */
    .sb-nudge { animation: sb-nudge 0.9s 0.2s ease both; }
    .sb-puff { top: 26%; animation: sb-puff 0.9s ease-out both; }
    .sb-puff1 { right: 30%; animation-delay: 0.5s; } .sb-puff2 { right: 22%; animation-delay: 0.7s; } .sb-puff3 { right: 14%; animation-delay: 0.9s; }
    /* Auf die Zeit achten */
    .sb-time-hero { animation: sb-nudge 0.6s 0.2s ease both; }
    .sb-clock { right: 14%; top: 8%; animation: sb-pop 0.4s 0.3s cubic-bezier(.34,1.56,.64,1) both, sb-spin 1.2s 0.7s cubic-bezier(.45,0,.2,1) both; }
    /* Angehörige / Alle für einen */
    .sb-rel-l { left: 2%; top: 30%; animation: sb-in-l 0.7s 0.2s cubic-bezier(.34,1.3,.64,1) both; }
    .sb-rel-r { right: 2%; top: 30%; animation: sb-in-r 0.7s 0.45s cubic-bezier(.34,1.3,.64,1) both; }
    .sb-rel-t { left: 68%; top: -8%; animation: sb-in-t 0.7s 0.7s cubic-bezier(.34,1.3,.64,1) both; }
    .sb-heart { left: 47%; top: 6%; animation: sb-heart 1.1s 1.1s ease-out both; }
    .sb-boom { left: 43%; top: 28%; font-size: 2.4rem; animation: sb-boom 0.6s 1.2s cubic-bezier(.34,1.56,.64,1) both; }
    /* Raum durchsuchen */
    .sb-box { top: 38%; }
    .sb-box1 { left: 8%; animation: sb-pop 0.4s 0.1s cubic-bezier(.34,1.56,.64,1) both; }
    .sb-box2 { right: 8%; animation: sb-pop 0.4s 0.25s cubic-bezier(.34,1.56,.64,1) both; }
    .sb-search { left: 14%; top: 20%; font-size: 2.3rem; animation: sb-search 1.3s 0.5s ease-in-out both; }
    .sb-found { left: 44%; top: 30%; font-size: 2.2rem; animation: sb-found 0.6s 1.3s cubic-bezier(.34,1.56,.64,1) both; }
    /* Zusammenhalten */
    .sb-hug-l { position: absolute; left: 22%; animation: sb-hug-l 0.7s 0.3s cubic-bezier(.34,1.4,.64,1) both; }
    .sb-hug-r { position: absolute; right: 22%; animation: sb-hug-r 0.7s 0.3s cubic-bezier(.34,1.4,.64,1) both; }
    .sb-hug { left: 44%; top: 8%; animation: sb-pop 0.45s 1s cubic-bezier(.34,1.56,.64,1) both; }
    /* Etwas zeigen */
    .sb-show-l { position: absolute; left: 20%; animation: sb-nudge 0.6s 0.3s ease both; }
    .sb-show-r { position: absolute; right: 20%; }
    .sb-bulb { left: 44%; top: 2%; font-size: 2.2rem; animation: sb-pop 0.5s 0.7s cubic-bezier(.34,1.56,.64,1) both; }

    @keyframes sb-pop { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1); } }
    @keyframes sb-pop-flip { 0% { opacity: 0; transform: scaleX(-1) scale(0.2); } 100% { opacity: 1; transform: scaleX(-1) scale(1); } }
    @keyframes sb-show { from { opacity: 0; } to { opacity: 1; } }
    @keyframes sb-tag-in { from { opacity: 0; transform: translateX(-50%) scale(0.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
    @keyframes sb-glow-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1.1); } }
    @keyframes sb-ring { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(3.2); } }
    @keyframes sb-spark { 0% { opacity: 0; transform: scale(0.3) rotate(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(90deg) translateY(-8px); } }
    @keyframes sb-pump { from { transform: scale(1); } to { transform: scale(1.18); } }
    @keyframes sb-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
    @keyframes sb-fall { 0% { opacity: 0; transform: translateY(-14px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(56px) scale(0.6); } }
    @keyframes sb-snow { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px) rotate(160deg); } }
    @keyframes sb-fill { from { height: 0; } to { height: 88%; } }
    @keyframes sb-nudge { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-6px); } 70% { transform: translateX(4px); } }
    @keyframes sb-puff { 0% { opacity: 0; transform: translate(0,0) scale(0.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(30px,-26px) scale(1.3); } }
    @keyframes sb-spin { from { transform: rotate(0); } to { transform: rotate(720deg); } }
    @keyframes sb-in-l { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes sb-in-r { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes sb-in-t { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes sb-heart { 0% { opacity: 0; transform: translateY(8px) scale(0.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.4); } }
    @keyframes sb-boom { 0% { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0.85; transform: scale(1); } }
    @keyframes sb-search { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 40% { transform: translate(60px,12px) rotate(-15deg); } 70% { transform: translate(110px,0) rotate(10deg); } 100% { opacity: 1; transform: translate(70px,6px); } }
    @keyframes sb-found { 0% { opacity: 0; transform: translateY(14px) scale(0.2); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes sb-hug-l { from { transform: translateX(-34px); } to { transform: translateX(12px); } }
    @keyframes sb-hug-r { from { transform: translateX(34px); } to { transform: translateX(-12px); } }
    @media (prefers-reduced-motion: reduce) { .sb-stage *, .sb-stage { animation-duration: 0.01s !important; animation-delay: 0s !important; } }

    /* Gather (Gruppenanleitung) */
    .sa-gather { display: flex; align-items: center; gap: 0; position: relative; width: 200px; height: 80px; margin: 0 auto; }
    .sa-gather-sl { position: absolute; left: 0; animation: sa-gather-l 0.7s 0.2s cubic-bezier(.34,1.4,.64,1) both; }
    .sa-gather-sc { position: absolute; left: 50%; transform: translateX(-50%); }
    .sa-gather-sr { position: absolute; right: 0; animation: sa-gather-r 0.7s 0.2s cubic-bezier(.34,1.4,.64,1) both; }
    .sa-gather-glow {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 60px; height: 60px; border-radius: 50%;
      background: radial-gradient(circle, rgba(253,230,138,0.4) 0%, transparent 70%);
      animation: sa-glow-pulse 0.6s 0.9s ease-out both;
    }
    @keyframes sa-gather-l  { from { transform: translateX(0);   } to { transform: translateX(40px);  } }
    @keyframes sa-gather-r  { from { transform: translateX(0);   } to { transform: translateX(-40px); } }
    @keyframes sa-glow-pulse { from { opacity:0; transform:translate(-50%,-50%) scale(0.5); } to { opacity:1; transform:translate(-50%,-50%) scale(1.4); } }

    /* Pause (Pause schicken) */
    .sa-pause { display: flex; align-items: center; justify-content: center; gap: 10px; width: 240px; height: 80px; position: relative; margin: 0 auto; }
    .sa-pause-sl { animation: sa-leave-l 0.7s 0.3s cubic-bezier(.4,0,.2,1) both; }
    .sa-pause-sr { animation: sa-leave-r 0.7s 0.3s cubic-bezier(.4,0,.2,1) both; }
    .sa-pause-label { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 1.6rem; animation: sa-bubble-pop 0.4s 1s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes sa-leave-l  { from { transform: translateX(0) } to { transform: translateX(-60px); opacity: 0.3; } }
    @keyframes sa-leave-r  { from { transform: translateX(0) } to { transform: translateX(60px);  opacity: 0.3; } }

    /* Reflexionsgespräch */
    .sa-reflex { display: flex; align-items: flex-end; justify-content: center; gap: 14px; width: 260px; margin: 0 auto; }
    .sa-reflex-person { display: flex; flex-direction: column; align-items: center; }
    .sa-bubble { font-size: 1.4rem; margin-bottom: 4px; opacity: 0; animation: sa-bubble-pop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-b1 { animation-delay: 0.3s; }
    .sa-b2 { animation-delay: 0.7s; }
    .sa-b3 { animation-delay: 1.1s; }
    @keyframes sa-bubble-pop { from { opacity:0; transform:scale(0) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

    /* Fusion */
    .sa-fusion { position: relative; width: 240px; height: 100px; margin: 0 auto; }
    .sa-fusion-s1 {
      position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
      animation: sa-fuse-left 0.55s 0.1s cubic-bezier(.4,0,.6,1) forwards;
    }
    .sa-fusion-s2 {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      animation: sa-fuse-right 0.55s 0.1s cubic-bezier(.4,0,.6,1) forwards;
    }
    .sa-fusion-flash {
      position: absolute; inset: -10px; border-radius: 12px;
      background: #fff; opacity: 0;
      animation: sa-flash-burst 0.5s 0.7s ease-in-out forwards;
    }
    .sa-fusion-result-wrap {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      opacity: 0; animation: sa-result-appear 0.6s 1.2s cubic-bezier(.34,1.56,.64,1) both;
    }
    .sa-fusion-aura {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 72px; height: 72px; border-radius: 50%;
      border: 3px solid rgba(253,230,138,0.7);
      box-shadow: 0 0 16px 4px rgba(124,58,237,0.7), 0 0 30px 10px rgba(253,230,138,0.3);
      animation: sa-aura-spin 1.2s 1.2s linear infinite, sa-aura-fade 0.5s 1.2s ease both;
    }
    .sa-fusion-result { font-size: 3rem; position: relative; z-index: 2; }
    @keyframes sa-fuse-left  { to { transform: translateY(-50%) translateX(85px); } }
    @keyframes sa-fuse-right { to { transform: translateY(-50%) translateX(-85px); } }
    @keyframes sa-flash-burst { 0%{opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
    @keyframes sa-result-appear { from{opacity:0;transform:translate(-50%,-50%) scale(0.3)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
    @keyframes sa-aura-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
    @keyframes sa-aura-fade { from{opacity:0} to{opacity:1} }

    /* Schattenschritt */
    .sa-shadow { position: relative; width: 200px; height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
    .sa-shadow-main  { position: absolute; animation: sa-dash 0.5s 0.2s cubic-bezier(.34,1.4,.64,1) both; z-index: 3; }
    .sa-shadow-ghost1 { position: absolute; opacity: 0; animation: sa-ghost 0.4s 0.35s ease both; transform: translateX(-28px); filter: hue-rotate(240deg) brightness(0.5); z-index: 1; }
    .sa-shadow-ghost2 { position: absolute; opacity: 0; animation: sa-ghost 0.4s 0.55s ease both; transform: translateX(-14px); filter: hue-rotate(180deg) brightness(0.6); z-index: 2; }
    .sa-shadow-trail  { position: absolute; left: 20%; top: 40%; width: 60%; height: 3px; background: linear-gradient(90deg, transparent, rgba(167,139,250,0.8), transparent); animation: sa-trail 0.6s 0.3s ease both; opacity: 0; }
    @keyframes sa-dash  { from{transform:translateX(-50px);opacity:0} to{transform:translateX(30px);opacity:1} }
    @keyframes sa-ghost { 0%{opacity:0.5} 100%{opacity:0} }
    @keyframes sa-trail { 0%{opacity:0;transform:scaleX(0)} 50%{opacity:1;transform:scaleX(1)} 100%{opacity:0} }

    /* Nachtangriff */
    .sa-nacht { position: relative; width: 160px; height: 100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
    .sa-nacht-aura { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,0.5) 0%, transparent 70%); animation: sa-nacht-charge 0.8s 0.1s ease both; opacity: 0; }
    .sa-nacht-char { position: relative; z-index: 2; animation: sa-nacht-shake 0.6s 0.3s ease both; }
    .sa-nacht-slash { position: absolute; right: 4px; top: 10px; font-size: 2rem; opacity: 0; animation: sa-slash-in 0.4s 1s cubic-bezier(.34,1.56,.64,1) both; z-index: 3; }
    @keyframes sa-nacht-charge { 0%{opacity:0;transform:scale(0.4)} 60%{opacity:1;transform:scale(1.3)} 100%{opacity:0.7;transform:scale(1)} }
    @keyframes sa-nacht-shake  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
    @keyframes sa-slash-in     { from{opacity:0;transform:scale(0) rotate(-45deg)} to{opacity:1;transform:scale(1.4) rotate(15deg)} }

    /* Kaffee kochen */
    .sa-kaffee { position: relative; width: 140px; height: 110px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; }
    .sa-kaffee-cup { font-size: 3rem; animation: sa-cup-bounce 0.5s 0.1s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-steam { position: absolute; font-size: 1.1rem; opacity: 0; color: #a78bfa; }
    .sa-steam1 { bottom: 72%; left: 30%; animation: sa-steam-rise 0.8s 0.5s ease both; }
    .sa-steam2 { bottom: 72%; left: 50%; animation: sa-steam-rise 0.8s 0.7s ease both; }
    .sa-steam3 { bottom: 72%; left: 65%; animation: sa-steam-rise 0.8s 0.9s ease both; }
    .sa-kaffee-count { position: absolute; top: 0; right: 10%; font-size: 1.6rem; font-weight: 900; color: #fde68a; text-shadow: 0 0 8px rgba(253,230,138,0.7); opacity: 0; animation: sa-count-pop 0.5s 1s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes sa-cup-bounce  { from{opacity:0;transform:scale(0.5) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
    @keyframes sa-steam-rise  { 0%{opacity:0;transform:translateY(0)} 40%{opacity:0.9} 100%{opacity:0;transform:translateY(-28px)} }
    @keyframes sa-count-pop   { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }

    /* Flächenpflege */
    .sa-flaeche { position:relative; width:220px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-fl-hero { position:absolute; left:10px; top:50%; transform:translateY(-50%); animation:sa-fl-hero-in 0.4s 0.1s cubic-bezier(.34,1.4,.64,1) both; }
    .sa-fl-target { position:absolute; font-size:1.4rem; opacity:0; }
    .sa-fl-t1 { right:10px; top:10%; animation:sa-fl-hit 0.4s 0.5s ease both; }
    .sa-fl-t2 { right:10px; top:40%; animation:sa-fl-hit 0.4s 0.7s ease both; }
    .sa-fl-t3 { right:10px; top:70%; animation:sa-fl-hit 0.4s 0.9s ease both; }
    .sa-fl-wave { position:absolute; left:30%; top:50%; transform:translateY(-50%); width:0; height:3px; background:linear-gradient(90deg,rgba(251,191,36,0.9),transparent); border-radius:2px; animation:sa-fl-wave-expand 0.6s 0.3s ease both; }
    @keyframes sa-fl-hero-in { from{opacity:0;transform:translateY(-50%) scale(0.6)} to{opacity:1;transform:translateY(-50%) scale(1)} }
    @keyframes sa-fl-hit     { 0%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.3)} 100%{opacity:1;transform:scale(1)} }
    @keyframes sa-fl-wave-expand { from{width:0;opacity:0} to{width:55%;opacity:1} }

    /* Schnellangriff */
    .sa-schnell { position:relative; width:200px; height:90px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-sn-hero { position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:2; }
    .sa-sn-slash { position:absolute; right:20px; font-size:1.8rem; opacity:0; }
    .sa-sn-s1 { top:10%; animation:sa-sn-hit 0.3s 0.3s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-sn-s2 { top:40%; animation:sa-sn-hit 0.3s 0.55s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-sn-s3 { top:68%; animation:sa-sn-hit 0.3s 0.8s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes sa-sn-hit { 0%{opacity:0;transform:translateX(20px) scale(0.5)} 50%{opacity:1;transform:translateX(-8px) scale(1.2)} 100%{opacity:0.7;transform:translateX(0) scale(1)} }

    /* Motivationsruf */
    .sa-motiv { position:relative; width:220px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-mv-hero { position:absolute; left:10px; top:50%; transform:translateY(-50%); animation:sa-mv-pump 0.5s 0.2s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-mv-mega { position:absolute; left:55px; top:15%; font-size:1.8rem; opacity:0; animation:sa-bubble-pop 0.4s 0.4s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-mv-wave { position:absolute; right:5px; font-size:1.4rem; opacity:0; }
    .sa-mv-w1 { top:15%; animation:sa-mv-wave-in 0.4s 0.6s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-mv-w2 { top:42%; animation:sa-mv-wave-in 0.4s 0.8s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-mv-w3 { top:68%; animation:sa-mv-wave-in 0.4s 1.0s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes sa-mv-pump     { from{transform:translateY(-50%) scale(0.7)} to{transform:translateY(-50%) scale(1.15)} }
    @keyframes sa-mv-wave-in  { from{opacity:0;transform:translateX(16px) scale(0.4)} to{opacity:1;transform:translateX(0) scale(1)} }

    /* Betriebsversammlung */
    .sa-versamml { position:relative; width:220px; height:110px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-vs-center { position:absolute; z-index:3; animation:sa-vs-pulse 0.5s 0.1s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-vs-p1 { position:absolute; left:0; top:20%; opacity:0; animation:sa-vs-gather 0.5s 0.4s cubic-bezier(.34,1.4,.64,1) both; }
    .sa-vs-p2 { position:absolute; right:0; top:20%; opacity:0; animation:sa-vs-gather 0.5s 0.6s cubic-bezier(.34,1.4,.64,1) both; }
    .sa-vs-p3 { position:absolute; left:30%; bottom:0; opacity:0; animation:sa-vs-gather 0.5s 0.8s cubic-bezier(.34,1.4,.64,1) both; }
    .sa-vs-boom { position:absolute; right:5%; top:5%; font-size:2rem; opacity:0; animation:sa-bubble-pop 0.5s 1.4s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes sa-vs-pulse  { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
    @keyframes sa-vs-gather { from{opacity:0;transform:scale(0.4) translateX(var(--dx,0))} to{opacity:1;transform:scale(1) translateX(0)} }

    /* Gewerkschaftlicher Schutz */
    .sa-gewerkschaft { position:relative; width:180px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-gw-hero { position:absolute; left:15%; top:50%; transform:translateY(-50%); }
    .sa-gw-shield { position:absolute; right:10%; top:50%; transform:translateY(-50%); font-size:3rem; opacity:0; animation:sa-gw-raise 0.5s 0.3s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-gw-ring { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80px; height:80px; border-radius:50%; border:3px solid rgba(99,102,241,0.7); box-shadow:0 0 16px rgba(99,102,241,0.5); opacity:0; animation:sa-gw-ring-in 0.6s 0.7s ease both; }
    @keyframes sa-gw-raise   { from{opacity:0;transform:translateY(20px) scale(0.5)} to{opacity:1;transform:translateY(-50%) scale(1)} }
    @keyframes sa-gw-ring-in { from{opacity:0;transform:translate(-50%,-50%) scale(0.3)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }

    /* Betriebsarztbesuch */
    .sa-arztbesuch { position:relative; width:180px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-arzt-char { position:absolute; left:10%; top:50%; transform:translateY(-50%); animation:sa-cup-bounce 0.4s 0.1s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-arzt-icon { position:absolute; right:15%; top:15%; font-size:2.2rem; opacity:0; animation:sa-bubble-pop 0.4s 0.4s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-arzt-heal { position:absolute; right:10%; bottom:10%; font-size:1.4rem; font-weight:900; color:#34d399; text-shadow:0 0 8px rgba(52,211,153,0.7); opacity:0; animation:sa-count-pop 0.4s 0.9s cubic-bezier(.34,1.56,.64,1) both; }

    /* Glücksrad (Glückskind) — echtes Drehrad */
    .sa-gluecksrad { position:relative; width:240px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
    .gr-pointer { font-size:2rem; line-height:1; color:#ffd23f; filter:drop-shadow(0 2px 0 #7a3b00); margin-bottom:-12px; z-index:4; animation:sa-count-pop .3s .1s both; }
    .gr-wheel {
      position:relative; width:220px; height:220px; border-radius:50%; box-sizing:border-box;
      border:7px solid #3a2a12;
      background:conic-gradient(
        #f4c53d 0 51.43deg, #e07a2c 51.43deg 102.86deg,
        #f4c53d 102.86deg 154.29deg, #e07a2c 154.29deg 205.71deg,
        #f4c53d 205.71deg 257.14deg, #e07a2c 257.14deg 308.57deg,
        #c94f8a 308.57deg 360deg);
      box-shadow:0 0 0 5px #ffd23f, 0 10px 26px rgba(0,0,0,.45);
      transition:transform 3s cubic-bezier(0.13,0.73,0.06,1);
    }
    .gr-seg {
      position:absolute; top:50%; left:50%; width:1.6em; height:1.6em; margin:-0.8em; font-size:1.5rem;
      display:flex; align-items:center; justify-content:center;
      transform:rotate(var(--a)) translateY(-78px) rotate(calc(-1 * var(--a)));
    }
    .gr-hub { position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px; border-radius:50%; background:#3a2a12; border:3px solid #ffd23f; z-index:3; }
    .gr-result { margin-top:14px; font-weight:900; font-size:1.05rem; color:#ffd23f; text-shadow:0 2px 0 rgba(0,0,0,.4); text-align:center; min-height:1.3em; opacity:0; transition:opacity .3s; }
    .gr-result.show { opacity:1; animation:sa-count-pop .4s cubic-bezier(.34,1.56,.64,1) both; }

    /* Recherche! (Pflegenerd) */
    .sa-recherche { position:relative; width:180px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-rs-hero { position:relative; z-index:2; animation:sa-mv-pump 0.5s 0.2s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-rs-icon { position:absolute; right:20%; top:15%; font-size:2rem; opacity:0; animation:sa-bubble-pop 0.4s 0.5s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-rs-glow { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(94,200,248,0.35) 0%, transparent 70%); opacity:0; animation:sa-nacht-charge 0.8s 0.1s ease both; }

    /* Forza ist runtergeladen (Drachenlord) */
    .sa-forza { position:relative; width:180px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-forza-hero { position:relative; z-index:2; animation:sa-nacht-shake 0.5s 0.2s ease both; }
    .sa-forza-bar { position:absolute; left:15%; right:15%; bottom:15%; height:6px; border-radius:3px; background:linear-gradient(90deg,#34d399,#5ec8f8); opacity:0; animation:sa-fl-wave-expand 0.7s 0.3s ease both; }
    .sa-forza-icon { position:absolute; right:12%; top:10%; font-size:1.8rem; opacity:0; animation:sa-bubble-pop 0.4s 0.8s cubic-bezier(.34,1.56,.64,1) both; }

    /* Drachenschanze (Drachenlord) */
    .sa-schanze { position:relative; width:180px; height:110px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-schanze-aura { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(248,113,113,0.4) 0%, transparent 70%); animation:sa-nacht-charge 0.8s 0.1s ease both; opacity:0; }
    .sa-schanze-hero { position:relative; z-index:2; animation:sa-mv-pump 0.5s 0.2s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-schanze-icon { position:absolute; right:15%; top:10%; font-size:2rem; opacity:0; animation:sa-bubble-pop 0.4s 0.5s cubic-bezier(.34,1.56,.64,1) both; }

    /* Zur Entlastung beraten (Kardioschwester) */
    .sa-entlastung { position:relative; width:220px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
    .sa-el-hero { position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:2; }
    .sa-el-icon { position:absolute; left:60px; top:15%; font-size:1.8rem; opacity:0; animation:sa-bubble-pop 0.4s 0.3s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-el-arrow { position:absolute; right:60px; top:50%; transform:translateY(-50%); font-size:1.6rem; opacity:0; color:#fbbf24; animation:sa-bubble-pop 0.4s 0.6s cubic-bezier(.34,1.56,.64,1) both; }
    .sa-el-patient { position:absolute; right:10px; font-size:1.6rem; opacity:0; }
    .sa-el-p1 { top:15%; animation:sa-leave-r 0.6s 0.9s cubic-bezier(.4,0,.2,1) both, sa-bubble-pop 0.3s 0.9s ease both; }
    .sa-el-p2 { bottom:10%; animation:sa-leave-r 0.6s 1.1s cubic-bezier(.4,0,.2,1) both, sa-bubble-pop 0.3s 1.1s ease both; }

    @media (min-width: 601px) {
      .menu-popup-bar {
        width: min(960px, 100vw);
        border-radius: 20px 20px 0 0;
      }
      .mpb-btn {
        padding: 16px 10px 20px;
        gap: 7px;
      }
      .mpb-icon { font-size: 2rem; }
      .mpb-label { font-size: 0.78rem; }
    }

    /* ── Menü-Popup-Overlay ─────────────────────────────────────────── */
    .menu-popup-overlay {
      position: fixed;
      inset: 0;
      bottom: 56px; /* über der Bar */
      background: rgba(0,0,0,0.75);
    }
    /* Schmale Phones: 2-reihige Menü-Bar (~110px) — Overlay hört darüber auf. */
    @media (max-width: 560px) {
      .menu-popup-overlay { bottom: 110px; }
    }
    .menu-popup-overlay {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 950;
      backdrop-filter: blur(4px);
      padding: 16px;
    }

    .menu-popup-modal {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 16px;
      box-shadow: 0 8px 60px rgba(0,0,0,0.5), 5px 5px 0 var(--cs-ink);
      display: flex;
      flex-direction: column;
      width: min(700px, 100%);
      height: auto;
      max-height: min(85dvh, 640px);
      overflow: hidden;
      animation: menuPopupPop 0.2s cubic-bezier(0.34,1.56,0.64,1) forwards;
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
      --action: var(--cs-mint);
    }

    @keyframes menuPopupPop {
      from { transform: scale(0.88); opacity: 0; }
      to   { transform: scale(1);   opacity: 1; }
    }

    .menu-popup-header {
      align-items: center;
      background: var(--cs-crimson);
      border-bottom: 4px solid var(--cs-ink);
      display: flex;
      justify-content: space-between;
      padding: 14px 18px 12px;
      flex-shrink: 0;
    }

    .menu-popup-title {
      font-size: 1.05rem;
      font-weight: 900;
      color: var(--cs-paper);
    }

    .menu-popup-close {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 50%;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      cursor: pointer;
      font-size: 1rem;
      font-weight: 800;
      height: 32px;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, transform 0.12s;
    }

    .menu-popup-close:hover {
      background: var(--cs-crimson);
      color: var(--cs-paper);
      transform: translate(-1px,-1px);
    }

    .menu-popup-body {
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16px 18px 20px;
      flex: 0 1 auto;
      min-height: 0;
    }

    .menu-pane {
      display: none;
    }

    .menu-pane > * + * { margin-top: 10px; }
    .menu-pane h3 { font-size: 0.9rem; color: var(--muted); margin: 0 0 8px; }

    .equipment-controls {
      display: grid;
      gap: 10px;
    }

    .equipment-controls label,
    .slot-row {
      display: grid;
      gap: 5px;
    }

    .equipment-controls select {
      background: rgba(248, 250, 252, 0.94);
      border: 1px solid rgba(15, 23, 42, 0.24);
      border-radius: 8px;
      color: #111827;
      font: inherit;
      min-height: 38px;
      padding: 8px 10px;
      width: 100%;
    }

    .slot-row span {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .owned-gear-list {
      display: grid;
      gap: 8px;
      width: 100%;
    }

    .owned-gear {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      box-shadow: 2px 2px 0 var(--cs-ink);
      border-radius: 8px;
      color: var(--cs-ink);
      display: grid;
      gap: 2px;
      padding: 9px 10px;
    }

    .owned-gear span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .member {
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--ink);
      display: grid;
      gap: 10px;
      grid-template-columns: 46px minmax(0, 1fr);
      min-height: 112px;
      max-width: 100%;
      overflow: visible;
      padding: 10px;
      position: relative;
      text-align: left;
    }
    .member > span { min-width: 0; }
    .member small { overflow-wrap: anywhere; }

    .damage-float {
      animation: damageFloat 2000ms ease-out forwards;
      color: #ef6f6c;
      font-size: 1.6rem;
      font-weight: 900;
      left: 50%;
      pointer-events: none;
      position: absolute;
      text-shadow: 0 2px 6px rgba(2,6,23,0.8), 0 0 14px rgba(239,111,108,0.55);
      top: 0;
      transform: translateX(-50%);
      z-index: 20;
    }

    @keyframes damageFloat {
      0%   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1.3); }
      25%  { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-52px) scale(0.85); }
    }

    .member.active {
      border-color: var(--cs-gold);
      box-shadow: 3px 3px 0 var(--cs-ink), 0 0 0 2px rgba(240,180,0,0.4) inset;
    }

    .member.exhausted {
      border-color: rgba(239, 111, 108, 0.55);
      opacity: 0.78;
    }

    .pixel-avatar {
      --hair: #3b2416;
      --skin: #f2c7a5;
      --scrub: #28c6a2;
      --trim: rgba(248, 250, 252, 0.9);
      --pants: #0f172a;
      height: 74px;
      image-rendering: pixelated;
      position: relative;
      width: 54px;
    }

    .pixel-avatar.avatar-large {
      height: 148px;
      transform: scale(2);
      transform-origin: top center;
      margin-bottom: 74px;
      width: 54px;
    }

    /* Generischer Horizontal-Flip fürs Pixel-Avatar selbst (z. B. Spieler in der Base,
       ohne den .base-npc/.dg-decor-npc-wrap-Umweg, den NPCs nutzen). Läuft über die
       --flip-Variable, die dg-dance direkt mit einrechnet — so friert die Lauf-/Idle-
       Animation nicht ein, sobald sich die Figur zur Seite dreht. */
    .pixel-avatar.face-left {
      --flip: -1;
      transform: scaleX(var(--flip, 1));   /* Ruhe-Fallback, falls mal keine Animation läuft */
    }
    .pixel-avatar.face-left.avatar-large {
      transform: scale(2) scaleX(-1);
    }

    .pixel-avatar span {
      display: block;
      position: absolute;
    }

    .px-hair {
      background: var(--hair);
      height: 14px;
      left: 15px;
      top: 4px;
      width: 24px;
      box-shadow:
        -5px 6px 0 var(--hair),
        5px 6px 0 var(--hair),
        -3px 12px 0 var(--hair),
        3px 12px 0 var(--hair),
        inset -4px -5px 0 rgba(0, 0, 0, 0.16);
    }

    .px-hair::before,
    .px-hair::after {
      content: "";
      display: none;
      position: absolute;
    }

    /* ── Frisurvarianten (unabhängig von Kopfbedeckung) ─────────────────────
       Bewusst kräftig dimensioniert, damit sich die Frisuren auch in der
       tatsächlichen Spielgröße (nicht nur vergrößert) klar unterscheiden.
       Die Strähnen sitzen deutlich außerhalb der Gesichtsbox
       (px-face: left 17px/width 20px, also Gesichtskante bei ~12–42px) und
       bekommen z-index:3 (über px-face/px-body, die beide z-index:2 haben),
       damit sie nicht dahinter verschwinden. ── */
    .frisur-lang .px-hair::before,
    .frisur-lang .px-hair::after {
      background: var(--hair);
      border-radius: 4px;
      display: block;
      height: 32px;
      top: 8px;
      width: 9px;
      z-index: 3;
    }
    .frisur-lang .px-hair::before { left: -9px; }
    .frisur-lang .px-hair::after  { right: -9px; }

    .frisur-zopf .px-hair::after {
      background: var(--hair);
      border-radius: 4px;
      display: block;
      height: 26px;
      right: -11px;
      top: 6px;
      transform: rotate(18deg);
      width: 8px;
      z-index: 3;
    }

    /* Irokese: schmaler, hoher Streifen in der Mitte */
    .frisur-irokese .px-hair {
      box-shadow:
        0 6px 0 var(--hair),
        0 -8px 0 var(--hair),
        0 -15px 0 var(--hair),
        0 -21px 0 var(--hair);
      width: 10px;
      left: 22px;
    }

    /* Afro: große runde Wolke */
    .frisur-afro .px-hair {
      border-radius: 50%;
      box-shadow: none;
      height: 38px;
      left: 6px;
      top: -10px;
      width: 42px;
    }

    /* Seitenzopf: ein langer Strang, der seitlich herunterhängt */
    .frisur-seitenzopf .px-hair::after {
      background: var(--hair);
      border-radius: 4px;
      display: block;
      height: 40px;
      right: -12px;
      top: 7px;
      width: 8px;
      z-index: 3;
    }

    /* Legacy: "Zwei Zöpfe mit Dutt" — nicht mehr auswählbar, aber CSS bleibt,
       damit ältere gespeicherte Charaktere weiterhin korrekt rendern. */
    .frisur-zoepfedutt .px-hair {
      box-shadow:
        -5px 6px 0 var(--hair),
        5px 6px 0 var(--hair),
        -3px 12px 0 var(--hair),
        3px 12px 0 var(--hair),
        0 -9px 0 var(--hair);
    }
    .frisur-zoepfedutt .px-hair::before,
    .frisur-zoepfedutt .px-hair::after {
      background: var(--hair);
      border-radius: 4px;
      display: block;
      height: 26px;
      top: 8px;
      width: 8px;
      z-index: 3;
    }
    .frisur-zoepfedutt .px-hair::before { left: -11px; }
    .frisur-zoepfedutt .px-hair::after  { right: -11px; }

    /* Zwei Zöpfe: je ein Zopf links und rechts, leicht nach außen geneigt.
       Grundhaar (Standard-box-shadow) bleibt unverändert — KEIN Dutt. */
    .frisur-zoepfe .px-hair::before,
    .frisur-zoepfe .px-hair::after {
      background: var(--hair);
      border-radius: 4px;
      display: block;
      height: 30px;
      top: 6px;
      width: 8px;
      z-index: 3;
    }
    .frisur-zoepfe .px-hair::before { left: -11px;  transform: rotate(-16deg); }
    .frisur-zoepfe .px-hair::after  { right: -11px; transform: rotate(16deg); }

    /* Dutt: normales Haar, darüber eine schmale Haarsäule, darüber ein
       runder kleiner Dutt. KEINE seitlichen Zöpfe. */
    .frisur-dutt .px-hair::before {   /* schmale Säule */
      background: var(--hair);
      display: block;
      width: 7px;
      height: 9px;
      left: 8px;
      top: -8px;
      z-index: 3;
    }
    .frisur-dutt .px-hair::after {    /* runder Dutt */
      background: var(--hair);
      border-radius: 50%;
      display: block;
      width: 16px;
      height: 16px;
      left: 3px;
      top: -21px;
      z-index: 3;
    }

    /* Mittelscheitel: kräftige, zentrierte Trennlinie */
    .frisur-mittelscheitel .px-hair::before {
      background: var(--skin);
      display: block;
      height: 11px;
      left: 10px;
      top: -1px;
      width: 4px;
      z-index: 1;
    }

    /* Seitenscheitel: asymmetrische Trennlinie */
    .frisur-seitenscheitel .px-hair::before {
      background: var(--skin);
      display: block;
      height: 11px;
      left: 5px;
      top: -1px;
      transform: rotate(15deg);
      width: 4px;
      z-index: 1;
    }

    .head-kopftuch-blau .px-hair,
    .head-kopftuch-gruen .px-hair,
    .head-kopftuch-violett .px-hair {
      background: var(--headwear);
      border-radius: 14px 14px 8px 8px;
      height: 45px;
      left: 9px;
      top: 3px;
      width: 36px;
      z-index: 1;
      box-shadow: 0 34px 0 -9px var(--hair);
    }

    .head-kopftuch-blau .px-hair::before,
    .head-kopftuch-gruen .px-hair::before,
    .head-kopftuch-violett .px-hair::before {
      background: var(--hair);
      border-radius: 0 0 8px 8px;
      display: block;
      height: 8px;
      left: 8px;
      top: 37px;
      width: 20px;
    }

    .head-kopftuch-blau .px-hair::after,
    .head-kopftuch-gruen .px-hair::after,
    .head-kopftuch-violett .px-hair::after {
      background: var(--hair);
      border-radius: 0 8px 8px 6px;
      display: block;
      height: 20px;
      right: 1px;
      top: 23px;
      width: 8px;
    }

    .head-kopftuch-blau .px-face,
    .head-kopftuch-gruen .px-face,
    .head-kopftuch-violett .px-face {
      left: 17px;
      top: 16px;
      z-index: 3;
    }

    /* ── Hüte ────────────────────────────────────────────────────────────── */

    /* Basecap — Schirmmütze */
    .head-hut-basecap .px-hair {
      background: var(--headwear);
      border-radius: 6px 6px 0 0;
      height: 14px;
      left: 11px;
      top: 1px;
      width: 30px;
      box-shadow:
        -8px 8px 0 0 var(--headwear),
        0 28px 0 -9px var(--hair);
    }
    .head-hut-basecap .px-hair::before {
      background: rgba(255,255,255,0.18);
      border-radius: 3px;
      content: "";
      display: block;
      height: 2px;
      left: 6px;
      position: absolute;
      top: 4px;
      width: 14px;
    }
    .head-hut-basecap .px-hair::after {
      background: rgba(0,0,0,0.28);
      border-radius: 50%;
      content: "";
      display: block;
      height: 4px;
      left: 50%;
      position: absolute;
      top: -3px;
      transform: translateX(-50%);
      width: 4px;
    }

    /* Pflegehaube — kleines Schwesternhäubchen, sitzt oben auf dem normalen Haar
       (ersetzt die Frisur nicht, sondern liegt als kleine Haube mit rotem Kreuz obenauf) */
    .head-hut-haube .px-hair::before {
      background: #fdf3e1;
      border: 1px solid rgba(36,28,26,0.35);
      border-radius: 4px 4px 2px 2px;
      content: "";
      display: block;
      height: 7px;
      left: 6px;
      position: absolute;
      top: -5px;
      width: 12px;
      z-index: 3;
    }
    .head-hut-haube .px-hair::after {
      background:
        linear-gradient(#d63838, #d63838) center / 34% 100% no-repeat,
        linear-gradient(#d63838, #d63838) center / 100% 34% no-repeat;
      content: "";
      display: block;
      height: 5px;
      left: 9.5px;
      position: absolute;
      top: -3.5px;
      width: 5px;
      z-index: 4;
    }

    /* Bommelmütze — Strickmütze */
    .head-hut-beanie .px-hair {
      background: var(--headwear);
      border-radius: 10px 10px 0 0;
      height: 16px;
      left: 10px;
      top: 0;
      width: 34px;
      box-shadow:
        0 30px 0 -9px var(--hair);
    }
    .head-hut-beanie .px-hair::before {
      background: rgba(255,255,255,0.65);
      border-radius: 50%;
      content: "";
      display: block;
      height: 6px;
      left: 50%;
      position: absolute;
      top: -4px;
      transform: translateX(-50%);
      width: 6px;
    }
    .head-hut-beanie .px-hair::after {
      background: rgba(0,0,0,0.16);
      content: "";
      display: block;
      height: 4px;
      left: 0;
      position: absolute;
      top: 12px;
      width: 34px;
    }

    /* Schleierhaube (Key hut-zipfelmuetze, früher Elfenhut) – Haube + Schleier der Weißen Dame (Stadtpark-Boss) */
    .head-hut-zipfelmuetze .px-hair {
      background:
        radial-gradient(circle at 50% 38%, #cfdcf7 0 2px, transparent 2.6px),
        var(--headwear);
      border-radius: 11px 11px 2px 2px;
      filter: drop-shadow(0 0 2px rgba(170, 200, 255, 0.85));
      height: 10px;
      left: 8px;
      top: 3px;
      width: 38px;
      box-shadow: 0 30px 0 -9px var(--hair), inset 0 -2px 0 rgba(150, 168, 205, 0.55);
    }
    .head-hut-zipfelmuetze .px-hair::before,
    .head-hut-zipfelmuetze .px-hair::after {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.42) 100%);
      border-radius: 0 0 6px 6px;
      box-shadow: inset 0 -3px 0 rgba(150, 168, 205, 0.35);
      content: "";
      display: block;
      height: 36px;
      position: absolute;
      top: 6px;
      width: 8px;
    }
    .head-hut-zipfelmuetze .px-hair::before { left: -3px; right: auto; bottom: auto; transform: none; border: 0; }
    .head-hut-zipfelmuetze .px-hair::after  { right: -3px; left: auto; bottom: auto; transform: none; filter: none; }

    .px-face {
      background: var(--skin);
      height: 20px;
      left: 17px;
      top: 16px;
      width: 20px;
      box-shadow:
        5px 5px 0 var(--skin),
        -5px 5px 0 var(--skin),
        0 13px 0 var(--skin),
        inset -3px -3px 0 rgba(0, 0, 0, 0.08);
      z-index: 2;
    }

    .px-eye-left,
    .px-eye-right {
      background: #111827;
      height: 3px;
      top: 25px;
      width: 3px;
      z-index: 4;
      transform-origin: center;
      animation: pxBlink 5.4s ease-in-out infinite, pxEyeWander 8s ease-in-out infinite;
    }

    .px-eye-left {
      left: 20px;
    }

    .px-eye-right {
      right: 20px;
      animation-delay: 0.1s, 0.35s;
    }

    .face-left .px-eye-left,
    .face-left .px-eye-right,
    .face-right .px-eye-left,
    .face-right .px-eye-right {
      --eye-bias: 2px;
    }

    @keyframes pxBlink {
      0%, 90%, 100% { transform: scaleY(1); }
      93%, 96% { transform: scaleY(0.12); }
    }

    /* Läuft die Figur zur Seite, schauen die Augen mit in diese Richtung (--eye-bias) —
       das liest sich als "dreht sich zur Seite", ganz ohne eigene Seitenansicht.
       Der Bias ist für face-left UND face-right identisch: face-left spiegelt die
       ganze Figur (scaleX(-1)), das dreht den lokal positiven Versatz von selbst um. */
    @keyframes pxEyeWander {
      0%, 100% { margin-left: var(--eye-bias, 0px); }
      15% { margin-left: calc(var(--eye-bias, 0px) + 1.5px); }
      30% { margin-left: var(--eye-bias, 0px); }
      55% { margin-left: calc(var(--eye-bias, 0px) - 1.5px); }
      70% { margin-left: var(--eye-bias, 0px); }
    }

    /* ── Wolf-Bar-Gesicht: Ausdruck je nach LP-Zustand ────────────────────── */
    @keyframes pxBlinkTired {
      0%, 90%, 100% { transform: scaleY(0.55); }
      93%, 96% { transform: scaleY(0.12); }
    }
    .wolf-face-wrap.mood-happy .px-mouth {
      background: transparent;
      border: 2px solid rgba(127,29,29,0.75);
      border-top: none;
      border-radius: 0 0 6px 6px;
      height: 3px;
      left: 22px;
      width: 9px;
    }
    .wolf-face-wrap.mood-mid .px-mouth {
      background: transparent;
      border: 2px solid rgba(110,60,90,0.7);
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      height: 2px;
      width: 7px;
    }
    .wolf-face-wrap.mood-sick .px-mouth {
      background: transparent;
      border: 2px solid rgba(70,70,150,0.85);
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      height: 3px;
      left: 23px;
      width: 8px;
    }
    .wolf-face-wrap.mood-mid .px-face {
      filter: saturate(0.75) brightness(0.95) hue-rotate(110deg);
    }
    .wolf-face-wrap.mood-sick .px-face {
      filter: saturate(0.5) brightness(0.9) hue-rotate(160deg);
    }
    .wolf-face-wrap.mood-sick .px-eye-left,
    .wolf-face-wrap.mood-sick .px-eye-right {
      animation-name: pxBlinkTired, pxEyeWander;
    }

    /* ── Status-Effekt "Erheitert": Lachmund + hüpfende Augen ─────────────── */
    @keyframes pxLaugh {
      0%, 100% { height: 3px; border-radius: 0 0 6px 6px; }
      50%      { height: 6px; border-radius: 0 0 8px 8px; }
    }
    @keyframes pxEyeBounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-2px); }
    }
    .wolf-face-wrap.mood-erheitert .px-mouth {
      background: transparent;
      border: 2px solid rgba(127,29,29,0.85);
      border-top: none;
      border-radius: 0 0 6px 6px;
      height: 3px;
      left: 21px;
      width: 11px;
      animation: pxLaugh 0.55s ease-in-out infinite;
    }
    .wolf-face-wrap.mood-erheitert .px-eye-left,
    .wolf-face-wrap.mood-erheitert .px-eye-right {
      animation: pxEyeBounce 0.55s ease-in-out infinite;
    }

    /* ── Wolf-Bar Herzchen-Pop (nur nach Kampfsieg / Flur-Gespräch) ───────── */
    .wolf-main { position: relative; }
    .wolf-heart-pop {
      animation: heart-float 2.2s ease-out forwards;
      color: #ff6b8a;
      font-size: 13px;
      left: 12px;
      line-height: 1;
      pointer-events: none;
      position: absolute;
      top: -2px;
      z-index: 30;
    }

    .px-mouth {
      background: rgba(127, 29, 29, 0.72);
      height: 2px;
      left: 24px;
      top: 34px;
      width: 7px;
      z-index: 4;
    }

    /* ── Rückansicht: läuft die Figur nach oben/weg von der Kamera, zeigen wir
       den Hinterkopf statt des Gesichts. Gesicht/Bart/Anstecker ausblenden,
       die Gesichtsfläche in Haarfarbe einfärben (bei Kopfbedeckung: deren Farbe) —
       die vorhandene Kopf-Silhouette bleibt exakt gleich, nur die Farbe/Details ändern sich. ── */
    .px-facing-back .px-face,
    .px-facing-back .px-eye-left,
    .px-facing-back .px-eye-right,
    .px-facing-back .px-mouth,
    .px-facing-back .px-beard,
    .px-facing-back .px-badge,
    .px-facing-back .px-collar,
    .px-facing-back .px-tie,
    .px-facing-back .px-metal-sign,
    .px-facing-back .px-dress-heart {
      display: none;
    }
    .px-facing-back .px-face {
      display: block;
      background: var(--hair);
      box-shadow:
        5px 5px 0 var(--hair),
        -5px 5px 0 var(--hair),
        0 13px 0 var(--hair),
        inset -3px -3px 0 rgba(0, 0, 0, 0.12);
    }
    [class*="head-hut-"].px-facing-back .px-face,
    [class*="head-kopftuch"].px-facing-back .px-face {
      background: var(--headwear);
      box-shadow:
        5px 5px 0 var(--headwear),
        -5px 5px 0 var(--headwear),
        0 13px 0 var(--headwear),
        inset -3px -3px 0 rgba(0, 0, 0, 0.12);
    }

    .px-beard {
      display: none;
    }

    .beard-kurz .px-beard,
    .beard-voll .px-beard {
      background: var(--beard);
      border-radius: 0 0 3px 3px;
      display: block;
      height: 6px;
      left: 17px;
      top: 34px;
      width: 24px;
      z-index: 3;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
    }

    .beard-voll .px-beard {
      height: 13px;
      top: 31px;
      box-shadow:
        -4px -4px 0 var(--beard),
        4px -4px 0 var(--beard),
        inset 0 -3px 0 rgba(0, 0, 0, 0.16);
    }

    .px-body {
      background: var(--scrub);
      height: 24px;
      left: 15px;
      top: 43px;
      width: 24px;
      z-index: 2;
      box-shadow:
        -8px 3px 0 var(--scrub),
        8px 3px 0 var(--scrub),
        0 22px 0 var(--pants);
    }

    .px-collar {
      background: var(--trim);
      height: 5px;
      left: 21px;
      top: 43px;
      width: 12px;
      z-index: 4;
    }

    .px-badge {
      background: var(--gold);
      height: 4px;
      left: 31px;
      top: 52px;
      width: 4px;
      z-index: 4;
    }

    .px-metal-sign {
      font-size: 8px;
      left: 17px;
      line-height: 1;
      position: absolute;
      top: 50px;
      z-index: 5;
    }

    /* Krawatte für Hemd-Kasack */
    .px-tie {
      background: linear-gradient(180deg, #8b1a1a 0%, #6b0f0f 60%, #5a0e0e 100%);
      border-radius: 0 0 3px 3px;
      height: 14px;
      left: 26px;
      position: absolute;
      top: 47px;
      width: 5px;
      z-index: 5;
    }
    .px-tie::before {
      background: #8b1a1a;
      border-radius: 1px;
      content: "";
      height: 4px;
      left: -1px;
      position: absolute;
      top: -3px;
      width: 7px;
    }

    /* ── Goblin-Boss-Avatar ── */
    .goblin-pixel {
      filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.7));
      transform: scale(1.55) !important;
      transform-origin: bottom center !important;
    }
    .goblin-pixel .px-mouth {
      background: rgba(30, 80, 30, 0.9);
      height: 3px;
      left: 22px;
      width: 11px;
    }
    /* Große Ohren als box-shadow auf den Augen */
    .goblin-pixel .px-eye-left {
      box-shadow: -5px 0 0 3px var(--skin);
    }
    .goblin-pixel .px-eye-right {
      box-shadow: 5px 0 0 3px var(--skin);
    }

    /* ── Goblin: Glatze + dicke Nase (nur noch Fallback-Avatar für Bosse ohne eigene Grafik) ── */
    .goblin-pixel .px-hair {
      background: var(--skin);
    }
    .goblin-pixel .px-face {
      position: relative;
    }
    .goblin-pixel .px-face::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 7px;
      background: rgba(20, 100, 20, 0.45);
      border-radius: 50%;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: -4px 1px 0 1px rgba(20,100,20,0.3), 4px 1px 0 1px rgba(20,100,20,0.3);
    }

    /* worldmap cell color overrides per dungeon */
    .wm-cell-pflegemassnahmen:hover .wm-cell-label { color: #fca5a5; }
    .wm-cell-pflegeprozess:hover    .wm-cell-label { color: #90b8e8; }
    .wm-cell-tutorial:hover         .wm-cell-label { color: #86efac; }
    .wm-cell-komotiu:hover          .wm-cell-label { color: #d8b4fe; }
    .wm-cell-apoplex:hover          .wm-cell-label { color: #5eead4; }
    .wm-cell-parkinson:hover        .wm-cell-label { color: #ffd700; }
    .wm-cell-demenz-krankheitsbild:hover  .wm-cell-label { color: #cbd5e1; }
    .wm-cell-demenz-kommunikation:hover   .wm-cell-label { color: #c4b5fd; }
    .wm-cell-demenz-kitwood:hover         .wm-cell-label { color: #fde68a; }
    .wm-cell-demenz-expertenstandard:hover .wm-cell-label { color: #6ee7b7; }

    /* ── Avatar-Effekte ── */
    @keyframes glanz-sweep {
      0%   { left: -70%; opacity: 0; }
      12%  { opacity: 0.7; }
      88%  { opacity: 0.7; }
      100% { left: 140%; opacity: 0; }
    }
    /* ── Militärhut (Parkinsonschloss) ──────────────────────────────── */
    .head-hut-militaer .px-hair {
      background: var(--headwear);
      border-radius: 3px 3px 0 0;
      height: 14px;
      left: 9px;
      top: 1px;
      width: 36px;
      box-shadow: 0 28px 0 -9px var(--hair);
    }
    /* Schirm/Visor */
    .head-hut-militaer .px-hair::before {
      background: color-mix(in srgb, var(--headwear) 70%, black 30%);
      border-radius: 0 0 3px 3px;
      content: "";
      display: block;
      height: 4px;
      left: -4px;
      position: absolute;
      top: 14px;
      width: 44px;
    }
    /* Stern-Streifen oben */
    .head-hut-militaer .px-hair::after {
      content: "★  ★";
      color: #cc1111;
      display: block;
      font-size: 5px;
      left: 50%;
      letter-spacing: 2px;
      line-height: 1;
      position: absolute;
      top: 3px;
      transform: translateX(-50%);
    }

    /* ── Ninja-Kopftuch ───────────────────────────────────────────────── */
    .head-hut-ninja .px-hair {
      background: var(--headwear);
      border-radius: 4px;
      height: 22px;
      left: 10px;
      top: 5px;
      width: 34px;
      box-shadow: 0 28px 0 -9px var(--hair);
    }
    /* Augenband-Schlitz (nur Augen sichtbar) */
    .head-hut-ninja .px-face {
      background: var(--headwear);
    }
    .head-hut-ninja .px-face::before {
      content: "";
      position: absolute;
      background: var(--skin);
      height: 5px;
      left: 2px;
      right: 2px;
      top: 6px;
      border-radius: 1px;
    }
    /* Stirnband-Knoten rechts */
    .head-hut-ninja .px-hair::after {
      content: "";
      display: block;
      position: absolute;
      background: var(--headwear);
      width: 8px;
      height: 10px;
      right: -7px;
      top: 4px;
      border-radius: 2px;
      box-shadow: 0 5px 0 2px var(--headwear);
    }

    /* ── Ninjasterne-Effekt ────────────────────────────────────────────── */
    @keyframes ninjaStarFly {
      0%   { left: -14px; opacity: 0; transform: rotate(0deg);   }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { left: 62px;  opacity: 0; transform: rotate(360deg); }
    }
    .px-effect-stern {
      position: absolute;
      width: 10px;
      height: 10px;
      animation: ninjaStarFly 1.4s linear infinite;
      pointer-events: none;
      z-index: 30;
    }
    .px-effect-stern::before {
      content: "✦";
      font-size: 10px;
      color: #c0c0c0;
      filter: drop-shadow(0 0 3px rgba(200,220,255,0.9));
      position: absolute;
      line-height: 1;
    }

    /* ── Rainbow Kassack ──────────────────────────────────────────────── */
    @keyframes rainbowScrub {
      0%   { filter: hue-rotate(0deg)   brightness(1.15) saturate(1.3); }
      100% { filter: hue-rotate(360deg) brightness(1.15) saturate(1.3); }
    }
    @keyframes rainbowGlow {
      0%   { filter: drop-shadow(0 0 5px hsl(0,   90%, 65%)); }
      16%  { filter: drop-shadow(0 0 5px hsl(60,  90%, 65%)); }
      33%  { filter: drop-shadow(0 0 5px hsl(120, 90%, 65%)); }
      50%  { filter: drop-shadow(0 0 5px hsl(180, 90%, 65%)); }
      66%  { filter: drop-shadow(0 0 5px hsl(240, 90%, 65%)); }
      83%  { filter: drop-shadow(0 0 5px hsl(300, 90%, 65%)); }
      100% { filter: drop-shadow(0 0 5px hsl(360, 90%, 65%)); }
    }
    /* Sentai-Helm (Belohnung für den Kaiju, Key hut-sentai): roter Helm mit dunklem Visier über den Augen und weißem Mittelstreifen */
    .head-hut-sentai .px-hair {
      background: linear-gradient(90deg, transparent 0 44%, #ffffff 44% 56%, transparent 56%), var(--headwear);
      border-radius: 13px 13px 3px 3px;
      box-shadow: -3px 14px 0 -1px var(--headwear), 3px 14px 0 -1px var(--headwear), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
      height: 19px;
      left: 8px;
      top: 0;
      width: 38px;
      z-index: 6;
    }
    .head-hut-sentai .px-hair::before {
      background: linear-gradient(180deg, #0c1a24 0%, #1d4a5e 55%, #0c1a24 100%);
      border: 1.5px solid #ffffff;
      border-radius: 3px 3px 7px 7px;
      box-shadow: inset 4px 2px 0 rgba(160, 230, 255, 0.35);
      content: "";
      display: block;
      height: 9px;
      left: 3px;
      position: absolute;
      top: 15px;
      width: 29px;
    }
    .head-hut-sentai .px-hair::after {
      background: #ffd84a;
      border-radius: 50%;
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
      content: "";
      display: block;
      height: 4px;
      left: 50%;
      position: absolute;
      top: 6px;
      transform: translateX(-50%);
      width: 4px;
    }

    /* Sentai-Outfit Rot (Belohnung für den Kaiju): roter Ganzkörperanzug, weißer Gürtel/Schal/Handschuhe/Stiefel, goldenes Emblem */
    .pixel-avatar.px-sentai { --pants: #c61e14; }
    .px-sentai .px-body {
      background: linear-gradient(180deg, var(--scrub) 0 62%, #ffffff 62% 76%, var(--scrub) 76%);
    }
    .px-sentai .px-collar { background: #ffffff; }
    .px-sentai .px-badge {
      background: #ffd84a; border-radius: 50%; box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
      height: 6px; left: 24px; top: 47px; width: 6px;
    }
    .px-sentai .px-arm-left,
    .px-sentai .px-arm-right { background: var(--scrub); box-shadow: inset 0 -6px 0 #ffffff; }
    .px-sentai .px-legs { box-shadow: inset 0 -3px 0 #ffffff; }

    .px-rainbow { animation: rainbowGlow 3s linear infinite; }
    .px-rainbow .px-body,
    .px-rainbow .px-arm-left,
    .px-rainbow .px-arm-right { animation: rainbowScrub 3s linear infinite; }

    .pixel-avatar.avatar-effect-glanz {
      overflow: hidden;
    }
    .pixel-avatar.avatar-effect-glanz::after {
      animation: glanz-sweep 3s ease-in-out infinite;
      animation-delay: 0.8s;
      background: linear-gradient(110deg, transparent 25%, rgba(255, 240, 80, 0.6) 50%, transparent 75%);
      content: "";
      height: 100%;
      left: -70%;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 65%;
      z-index: 30;
    }

    @keyframes heart-float {
      0%   { opacity: 1; transform: translateY(0) scale(1); }
      70%  { opacity: 0.5; }
      100% { opacity: 0; transform: translateY(-38px) scale(0.55); }
    }
    .px-effect-heart {
      animation: heart-float 2.2s ease-out infinite;
      color: #ff6b8a;
      font-size: 9px;
      line-height: 1;
      pointer-events: none;
      position: absolute;
      z-index: 30;
    }

    .px-arm-left,
    .px-arm-right {
      background: var(--skin);
      border-radius: 2px;
      height: 19px;
      top: 48px;
      transform-origin: top center;
      width: 7px;
    }

    .px-arm-left {
      left: 4px;
    }

    .px-arm-right {
      right: 4px;
    }

    /* ── Gesten: Arme schwingen um die Schulter (transform-origin: top center).
       Positive Rotation schwenkt den linken Arm nach außen/oben, negative den rechten —
       für „zur Mitte" (Kinn) dreht der rechte Arm stattdessen positiv (nach innen). ── */
    @keyframes pxGestureCheerL {
      0%, 100% { height: 19px; transform: rotate(0deg); }
      25%      { height: 30px; transform: rotate(158deg); }
      45%      { height: 30px; transform: rotate(146deg); }
      65%      { height: 30px; transform: rotate(158deg); }
      85%      { height: 26px; transform: rotate(130deg); }
    }
    @keyframes pxGestureCheerR {
      0%, 100% { height: 19px; transform: rotate(0deg); }
      25%      { height: 30px; transform: rotate(-158deg); }
      45%      { height: 30px; transform: rotate(-146deg); }
      65%      { height: 30px; transform: rotate(-158deg); }
      85%      { height: 26px; transform: rotate(-130deg); }
    }
    .gesture-cheer .px-arm-left  { animation: pxGestureCheerL 1.3s ease-out; z-index: 6; }
    .gesture-cheer .px-arm-right { animation: pxGestureCheerR 1.3s ease-out; z-index: 6; }

    @keyframes pxGestureChin {
      0%, 100%   { transform: rotate(0deg); }
      18%, 90%   { transform: rotate(122deg); }
      35%        { transform: rotate(112deg); }
      52%        { transform: rotate(124deg); }
      70%        { transform: rotate(112deg); }
    }
    .gesture-chin .px-arm-right { animation: pxGestureChin 2.6s ease-in-out; z-index: 6; }

    @keyframes pxGestureScratch {
      0%, 100%  { height: 19px; transform: rotate(0deg); }
      18%, 88%  { height: 25px; transform: rotate(162deg); }
      33%       { height: 25px; transform: rotate(150deg); }
      48%       { height: 25px; transform: rotate(168deg); }
      63%       { height: 25px; transform: rotate(150deg); }
    }
    .gesture-scratch .px-arm-left { animation: pxGestureScratch 2.6s ease-in-out; z-index: 6; }

    .px-legs {
      background: var(--pants);
      height: 9px;
      left: 15px;
      top: 65px;
      width: 8px;
      box-shadow: 16px 0 0 var(--pants);
    }

    .patient-pixel {
      --trim: rgba(255, 255, 255, 0);
      --pants: #374151;
    }

    /* Kleid-Variante: A-Linie, Beine versteckt, Rock ausgestellt */
    .px-kleid .px-body {
      width: 28px;
      left: 13px;
      height: 28px;
      /* Rock: breiter nach unten */
      box-shadow:
        -10px 4px 0 var(--scrub),
         10px 4px 0 var(--scrub),
        -14px 14px 0 var(--scrub),
         14px 14px 0 var(--scrub),
          0px 22px 0 var(--scrub);
    }
    .px-kleid .px-legs { display: none; }
    .px-kleid .px-collar { display: none; }
    .px-kleid .px-badge  { display: none; }

    .px-dress-heart {
      position: absolute;
      left: 50%;
      top: 16px;
      transform: translateX(-50%);
      font-size: 7px;
      color: rgba(255,255,255,0.75);
      pointer-events: none;
      z-index: 4;
      line-height: 1;
    }

    /* Cavemen-Variante (Vitalzeichen-Kampagne): Fell-Wickel mit gezacktem Saum
       statt Kasack/Kittel, kein Kragen/Abzeichen. Bein-Farbe (--pants) bleibt
       als schmaler Streifen unter dem Fell sichtbar — wirkt wie ein Lendenschurz. */
    .px-fell .px-body {
      width: 36px;
      left: 9px;
      height: 25px;
      background: var(--scrub);
      clip-path: polygon(
        0% 14%, 18% 0%, 82% 0%, 100% 14%,
        100% 68%, 86% 100%, 71% 76%, 57% 100%, 43% 76%, 29% 100%, 14% 76%, 0% 68%
      );
      box-shadow: none;
    }
    .px-fell .px-collar { display: none; }
    .px-fell .px-badge  { display: none; }
    .px-fell .px-legs   { box-shadow: 16px 0 0 var(--pants); }

    /* Knochen im Haar — kleiner Caveman-Flourish */
    .px-bone {
      position: absolute;
      left: 36px;
      top: 3px;
      width: 14px;
      height: 4px;
      background: #f2ead9;
      border-radius: 2px;
      transform: rotate(-28deg);
      z-index: 6;
    }
    .px-bone::before,
    .px-bone::after {
      content: "";
      position: absolute;
      top: -2px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #f2ead9;
    }
    .px-bone::before { left: -2px; }
    .px-bone::after   { right: -2px; }

    .patient-pixel .px-body {
      border-radius: 8px 8px 2px 2px;
      height: 26px;
      top: 42px;
    }

    .patient-pixel .px-collar,
    .patient-pixel .px-badge {
      display: none;
    }

    .patient-pixel .px-mouth {
      background: rgba(127, 29, 29, 0.86);
      height: 3px;
      left: 23px;
      width: 9px;
    }

    .member strong,
    .member small {
      display: block;
    }

    .member small {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.25;
      margin-top: 3px;
    }

    .hp-row {
      display: grid;
      gap: 5px;
      grid-column: 1 / -1;
      min-width: 0;
    }

    .hp-text {
      align-items: baseline;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;          /* langer Wert bricht um statt überzulaufen */
      column-gap: 10px;
      font-size: 0.82rem;
      justify-content: space-between;
      min-width: 0;
    }
    .hp-text > span { flex: 0 0 auto; }
    .hp-text > strong {
      min-width: 0;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .hp-text.perk-line {
      align-items: start;
      display: grid;
      gap: 2px;
    }

    .hp-text.perk-line strong {
      color: var(--ink);
      line-height: 1.25;
    }

    .perk-list {
      display: grid;
      gap: 4px;
    }

    .perk-list em {
      color: var(--gold);
      display: block;
      font-style: normal;
      font-weight: 900;
    }

    .perk-list small {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.25;
    }

    .hp-bar {
      background: rgba(248, 250, 252, 0.14);
      border-radius: 999px;
      height: 9px;
      overflow: hidden;
    }

    .hp-bar span {
      background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
      display: block;
      height: 100%;
      transition: width 180ms ease;
    }

    .sp-bar {
      background: rgba(46, 95, 163, 0.18);
      border-radius: 999px;
      height: 7px;
      overflow: hidden;
      margin-top: 2px;
    }
    .sp-bar span {
      background: linear-gradient(90deg, var(--cs-cobalt), var(--cs-gold));
      display: block;
      height: 100%;
      transition: width 180ms ease;
    }

    .info-box,
    .problem,
    .turn-box {
      border-radius: 8px;
      padding: 12px;
    }

    .info-box {
      background: rgba(90, 169, 230, 0.12);
      border: 1px solid rgba(90, 169, 230, 0.34);
      color: var(--muted);
      line-height: 1.45;
    }

    .problem {
      background: rgba(244, 185, 66, 0.12);
      border: 1px solid rgba(244, 185, 66, 0.36);
    }

    .intro-briefing {
      align-items: stretch;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .intro-actions {
      align-items: center;
      justify-content: flex-end;
      min-width: min(260px, 34vw);
    }

    .intro-actions .next,
    .intro-actions .reset {
      margin: 0;
    }

    .problem span {
      color: var(--gold);
      display: block;
      font-size: 0.78rem;
      font-weight: 800;
      margin-bottom: 4px;
      text-transform: uppercase;
    }

    .turn-box {
      background: rgba(90, 169, 230, 0.12);
      border: 1px solid rgba(90, 169, 230, 0.34);
      color: var(--muted);
      line-height: 1.45;
    }

    .explore-status {
      display: grid;
      gap: 4px;
    }

    .explore-status span {
      color: var(--gold);
      display: block;
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .turn-box strong,
    .info-box strong {
      color: var(--ink);
    }

    .options {
      display: grid;
      gap: 10px;
    }

    .option,
    .next,
    .reset,
    .item,
    .gear,
    .map-cell {
      appearance: none;
      border: 1px solid var(--line);
      border-radius: 8px;
      cursor: pointer;
    }

    .option {
      background: var(--paper);
      color: var(--paper-ink);
      line-height: 1.35;
      min-height: 62px;
      padding: 12px 14px;
      text-align: left;
    }

    .option:hover:not(:disabled),
    .item:hover:not(:disabled),
    .gear:hover:not(:disabled),
    .map-cell:hover:not(:disabled) {
      border-color: var(--blue);
      transform: translateY(-1px);
    }

    .option:disabled,
    .next:disabled,
    .item:disabled,
    .gear:disabled,
    .map-cell:disabled {
      cursor: not-allowed;
      opacity: 0.56;
    }

    .map-cell:disabled {
      opacity: 0.72;
    }

    .option.correct {
      border-color: var(--teal);
      box-shadow: inset 0 0 0 2px rgba(40, 198, 162, 0.28);
    }

    .option.weak {
      border-color: var(--red);
      box-shadow: inset 0 0 0 2px rgba(239, 111, 108, 0.22);
    }

    .option.option-secondary {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .option.option-dimmed {
      opacity: 0.6;
    }
    .combat-back-btn {
      align-self: center;
      margin-top: 2px;
      max-width: 220px;
      opacity: 0.62;
      font-size: 0.78rem;
      font-weight: 700;
      min-height: 30px !important;
      padding: 5px 12px !important;
      text-align: center;
    }
    .item-qty {
      color: var(--muted);
      font-size: 0.8em;
      font-weight: 500;
    }

    .map {
      display: grid;
      gap: 6px;
      grid-template-columns: repeat(3, 1fr);
    }

    .map-cell {
      aspect-ratio: 1 / 0.78;
      background: rgba(248, 250, 252, 0.08);
      color: var(--muted);
      display: grid;
      font-size: 0.68rem;
      font-weight: 800;
      min-height: 18px;
      padding: 2px;
      place-items: center;
      text-align: center;
    }

    .map-cell.wall {
      background: rgba(10, 25, 45, 0.55);
      border-color: rgba(20, 40, 70, 0.55);
      cursor: default;
      opacity: 0.5;
    }

    .map-cell.unknown {
      background: rgba(12, 28, 50, 0.72);
      border-color: rgba(20, 40, 70, 0.6);
      color: transparent;
      cursor: default;
      opacity: 0.68;
    }

    .map-cell.current {
      border-color: var(--teal);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px rgba(45, 212, 176, 0.4);
    }

    .map-cell.cleared {
      background: rgba(45, 212, 176, 0.16);
    }

    .map-cell.corridor {
      background: rgba(100, 160, 200, 0.18);
      color: var(--blue);
    }

    .map-cell.room {
      background: rgba(244, 112, 104, 0.22);
      color: #fecaca;
    }

    .map-cell.room.type-combat {
      background: rgba(240, 180, 150, 0.38);
      color: #f8d8c0;
    }

    .map-cell.room.type-treasure {
      background: rgba(249, 200, 66, 0.44);
      color: #ffe8a0;
    }

    .map-cell.room.type-break {
      background: rgba(45, 212, 176, 0.3);
      color: #a0f0e0;
    }

    .map-cell.stairs {
      background: rgba(249, 200, 66, 0.18);
      color: var(--gold);
    }

    .map-cell.room.type-boss {
      animation: boss-pulse 1.8s ease-in-out infinite;
      background: rgba(220, 50, 50, 0.45);
      color: #ffaaaa;
    }

    @keyframes boss-pulse {
      0%, 100% { background: rgba(220, 50, 50, 0.45); }
      50%       { background: rgba(220, 50, 50, 0.75); }
    }

    .map-cell.entrance {
      grid-column: 2;
      background: rgba(94, 200, 248, 0.18);
      color: var(--blue);
    }

    .map-legend {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.35;
      margin: 0;
    }

    .feedback {
      border-radius: 8px;
      padding: 12px;
    }

    .feedback.success {
      background: rgba(40, 198, 162, 0.16);
      border: 1px solid rgba(40, 198, 162, 0.42);
    }

    .feedback.warning {
      background: rgba(239, 111, 108, 0.15);
      border: 1px solid rgba(239, 111, 108, 0.42);
    }

    .feedback strong {
      display: block;
      margin-bottom: 4px;
    }

    .feedback p {
      color: var(--muted);
      line-height: 1.4;
      margin: 0;
    }

    .loot-box {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 10px;
      bottom: 22px;
      box-shadow: 0 18px 42px rgba(2, 6, 23, 0.35), 5px 5px 0 var(--cs-ink);
      color: var(--cs-ink);
      left: 50%;
      max-width: min(520px, calc(100% - 36px));
      opacity: 0;
      padding: 16px;
      pointer-events: none;
      position: fixed;
      transform: translate(-50%, 18px) scale(0.96);
      transition: opacity 180ms ease, transform 180ms ease;
      z-index: 20;
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
    }

    body.popup-open::before {
      background: rgba(2, 6, 23, 0.46);
      content: "";
      inset: 0;
      pointer-events: auto;
      position: fixed;
      z-index: 65;
    }

    body.popup-open .app,
    body.popup-open .start-screen,
    body.popup-open .creator-screen {
      pointer-events: none;
    }

    .loot-box.show {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
      z-index: 72;
    }

    .loot-box.grand {
      align-items: center;
      bottom: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      left: 50%;
      max-height: calc(100dvh - 16px);
      max-width: min(720px, calc(100% - 32px));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 20px 26px;
      pointer-events: auto;
      text-align: center;
      top: 50%;
      transform: translate(-50%, -46%) scale(0.96);
      z-index: 76;
    }

    .loot-box.grand.show {
      transform: translate(-50%, -50%) scale(1);
    }

    /* Der Weiter-Button darf nie unter den Rand rutschen: Reihenfolge fixieren,
       nur die Walzen-Bühne schrumpfen lassen. */
    .loot-box.grand .slot-machine   { flex: 1 1 auto; min-height: 0; width: 100%; position: relative; }
    .loot-box.grand .slot-reels-stage { flex: 0 1 auto; min-height: 0; overflow: visible; }
    .loot-box.grand .slot-result    { flex: 0 0 auto; }
    .loot-box.grand .slot-btn-row   { flex: 0 0 auto; }
    .loot-box.grand > strong,
    .loot-box.grand > p             { flex: 0 0 auto; }

    .popup-confirm {
      margin-top: 14px;
      min-width: 120px;
    }

    /* ── Bestätigungs-Popup (Treppe / Boss): gleich große Comic-Buttons ─────── */
    .loot-box.grand.confirm-box {
      gap: 4px;
      max-width: min(420px, calc(100vw - 28px));
      padding: 22px 24px 20px;
    }
    .loot-box.grand.confirm-box > strong { margin-bottom: 4px; }
    .loot-box.grand.confirm-box > p {
      color: var(--cs-ink);
      line-height: 1.45;
      margin-bottom: 4px;
    }
    .popup-confirm-row {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-top: 16px;
    }
    .popup-confirm-row > .next,
    .popup-confirm-row > .reset {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: nowrap;
      min-height: 50px;
      padding: 10px 8px;
      border-width: 2.5px;
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      font-size: clamp(0.82rem, 3.4vw, 0.98rem);
      font-weight: 800;
      line-height: 1.15;
    }
    .popup-confirm-row > .next {
      background: var(--teal, #28c6a2);
      color: var(--cs-ink);
    }
    .popup-confirm-row > .next:active,
    .popup-confirm-row > .reset:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--cs-ink);
    }

    .choice-feedback .popup-confirm {
      background: #28c6a2;
      border-color: #1a9e82;
      box-shadow: 0 4px 0 #1a9e82;
      color: #042a22;
      font-weight: 900;
      transition: filter 120ms;
    }

    .choice-feedback .popup-confirm:hover {
      filter: brightness(1.08);
    }

    .loot-box strong {
      color: var(--cs-crimson);
      display: block;
      font-size: 1.05rem;
      margin-bottom: 6px;
    }

    .loot-box.grand strong {
      font-size: clamp(1.3rem, 3vw, 2rem);
      margin-bottom: 8px;
    }

    .loot-box p {
      color: var(--muted);
      line-height: 1.4;
      margin: 0;
    }

    .loot-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .loot-chip {
      background: var(--cs-gold);
      border: 2px solid var(--cs-ink);
      border-radius: 999px;
      color: var(--cs-ink);
      font-size: 0.86rem;
      font-weight: 800;
      padding: 6px 10px;
    }

    .loot-box.grand .loot-list {
      justify-content: center;
      margin: 18px 0;
    }

    .loot-wheel-wrap {
      align-items: center;
      display: grid;
      gap: 12px;
      justify-items: center;
      margin: 18px auto;
    }

    .loot-wheel {
      --spin: 0deg;
      aspect-ratio: 1;
      background:
        repeating-conic-gradient(rgba(2, 6, 23, 0.88) 0deg 2deg, transparent 2deg 18deg),
        conic-gradient(
          #28c6a2 0deg    216deg,
          #5b8def 216deg  288deg,
          #f4b942 288deg  324deg,
          #334155 324deg  342deg,
          #ef6f6c 342deg  360deg
      );
    }
    /* Medaillen-Variante: sichtbar sobald erster Dungeon abgeschlossen */
    .loot-wheel.has-medal {
      background:
        repeating-conic-gradient(rgba(2, 6, 23, 0.88) 0deg 2deg, transparent 2deg 18deg),
        conic-gradient(
          #28c6a2 0deg      208.8deg,
          #5b8def 208.8deg  280.8deg,
          #f4b942 280.8deg  316.8deg,
          #334155 316.8deg  334.8deg,
          #c084fc 334.8deg  342deg,
          #ef6f6c 342deg    360deg
      );
      border: 8px solid rgba(248, 250, 252, 0.9);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 5px rgba(2, 6, 23, 0.72),
        inset 0 0 0 20px rgba(248, 250, 252, 0.12),
        0 18px 38px rgba(0, 0, 0, 0.38);
      height: 230px;
      position: relative;
      transform: rotate(var(--spin));
      transition: transform 3600ms cubic-bezier(0.08, 0.68, 0.05, 1);
      width: 230px;
    }

    .loot-wheel::before {
      background: #f8fafc;
      border: 4px solid #1f2937;
      border-radius: 50%;
      content: "";
      height: 34px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 34px;
    }

    .loot-wheel::after {
      background:
        radial-gradient(circle, #f8fafc 0 4px, transparent 5px),
        radial-gradient(circle, #f8fafc 0 4px, transparent 5px),
        radial-gradient(circle, #f8fafc 0 4px, transparent 5px),
        radial-gradient(circle, #f8fafc 0 4px, transparent 5px),
        radial-gradient(circle, #f8fafc 0 4px, transparent 5px),
        radial-gradient(circle, #f8fafc 0 4px, transparent 5px);
      background-position: 50% 4%, 88% 25%, 88% 75%, 50% 96%, 12% 75%, 12% 25%;
      background-repeat: no-repeat;
      background-size: 12px 12px;
      content: "";
      inset: 0;
      position: absolute;
    }

    .loot-wheel-pointer {
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-top: 30px solid #f8fafc;
      filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
      height: 0;
      width: 0;
    }

    .loot-odds {
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      font-size: 0.8rem;
      gap: 7px;
      justify-content: center;
    }

    .loot-odds span {
      background: var(--cs-paper);
      border: 1.5px solid var(--cs-ink);
      border-radius: 999px;
      display: inline-flex;
      gap: 6px;
      align-items: center;
      padding: 5px 8px;
    }

    .loot-odds span::before {
      border-radius: 3px;
      content: "";
      height: 10px;
      width: 10px;
    }

    .loot-odds .wheel-items::before {
      background: #28c6a2;
    }

    .loot-odds .wheel-gear::before {
      background: #5b8def;
    }

    .loot-odds .wheel-attribute::before {
      background: #f4b942;
    }

    .loot-odds .wheel-nothing::before {
      background: #334155;
    }

    .loot-odds .wheel-jackpot::before {
      background: #ef6f6c;
    }

    /* ══════════════════════════════════════════
       JACKPOT TRIPLE-WHEEL OVERLAY
    ══════════════════════════════════════════ */
    .jackpot-overlay {
      backdrop-filter: blur(8px);
      background: rgba(8, 16, 32, 0.9);
      display: none;
      inset: 0;
      overflow-y: auto;
      padding: 28px 16px 40px;
      position: fixed;
      text-align: center;
      z-index: 90;
    }

    .jackpot-overlay.show { display: block; }

    /* Rainbow wabe during spin */
    @keyframes rainbowWabe {
      0%   { background-position: 0%   50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0%   50%; }
    }

    .jackpot-overlay.rainbow-active {
      animation: rainbowWabe 2.4s ease infinite;
      background:
        linear-gradient(
          135deg,
          rgba(255,80,80,0.18),
          rgba(255,180,40,0.18),
          rgba(80,240,120,0.18),
          rgba(60,200,255,0.18),
          rgba(160,100,255,0.18),
          rgba(255,80,160,0.18),
          rgba(255,80,80,0.18)
        );
      background-size: 400% 400%;
    }

    .jackpot-overlay.rainbow-active::before {
      animation: rainbowWabe 1.8s ease infinite reverse;
      background:
        linear-gradient(
          225deg,
          rgba(255,80,80,0.1),
          rgba(255,180,40,0.1),
          rgba(80,240,120,0.1),
          rgba(60,200,255,0.1),
          rgba(160,100,255,0.1),
          rgba(255,80,80,0.1)
        );
      background-size: 400% 400%;
      content: "";
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    .jackpot-inner {
      margin: 0 auto;
      max-width: 740px;
      position: relative;
    }

    .jackpot-title {
      animation: jackpotTitlePulse 1.1s ease-in-out infinite alternate;
      color: var(--gold);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2rem, 6vw, 3.6rem);
      font-weight: 900;
      letter-spacing: 0.07em;
      margin: 0 0 6px;
      text-shadow: 0 0 24px rgba(249,200,66,0.6);
    }

    @keyframes jackpotTitlePulse {
      from { text-shadow: 0 0 12px rgba(249,200,66,0.4), 0 2px 0 #4b2e12; }
      to   { text-shadow: 0 0 40px rgba(249,200,66,1), 0 0 80px rgba(255,200,60,0.4), 0 2px 0 #4b2e12; }
    }

    .jackpot-subtitle {
      color: var(--muted);
      font-size: 0.9rem;
      margin: 0 0 22px;
    }

    .triple-wheels {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
      margin-bottom: 22px;
    }

    @media (max-width: 580px) {
      .triple-wheels { grid-template-columns: 1fr; }
    }

    .mini-wheel-wrap {
      align-items: center;
      display: grid;
      gap: 8px;
      justify-items: center;
    }

    .mini-wheel-label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .mini-wheel-pointer {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 22px solid #f8fafc;
      filter: drop-shadow(0 3px 0 rgba(0,0,0,0.4));
      height: 0;
      width: 0;
    }

    .mini-wheel {
      --spin: 0deg;
      aspect-ratio: 1;
      border: 6px solid rgba(248,250,252,0.85);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 4px rgba(2,6,23,0.72),
        0 10px 28px rgba(0,0,0,0.4);
      height: 160px;
      position: relative;
      transform: rotate(var(--spin));
      width: 160px;
    }

    .mini-wheel.spinning {
      transition: transform 3400ms cubic-bezier(0.08, 0.68, 0.05, 1);
    }

    .mini-wheel::before {
      background: #f8fafc;
      border: 3px solid #1f2937;
      border-radius: 50%;
      content: "";
      height: 26px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 26px;
    }

    /* Item wheel: 6 equal segments */
    .mini-wheel.type-item {
      background:
        repeating-conic-gradient(rgba(2,6,23,0.82) 0deg 2deg, transparent 2deg 60deg),
        conic-gradient(
          #2dd4b0   0deg  60deg,
          #5ec8f8  60deg 120deg,
          #7de8a8 120deg 180deg,
          #f9c842 180deg 240deg,
          #a78bfa 240deg 300deg,
          #f47068 300deg 360deg
        );
    }

    /* Gear wheel: 4 equal segments */
    .mini-wheel.type-gear {
      background:
        repeating-conic-gradient(rgba(2,6,23,0.82) 0deg 2deg, transparent 2deg 90deg),
        conic-gradient(
          #5b8def   0deg  90deg,
          #2dd4b0  90deg 180deg,
          #f9c842 180deg 270deg,
          #a78bfa 270deg 360deg
        );
    }

    /* Bonus/attribute wheel: 5 equal segments */
    .mini-wheel.type-attribute {
      background:
        repeating-conic-gradient(rgba(2,6,23,0.82) 0deg 2deg, transparent 2deg 72deg),
        conic-gradient(
          #f9c842   0deg  72deg,
          #5ec8f8  72deg 144deg,
          #7de8a8 144deg 216deg,
          #f47068 216deg 288deg,
          #a78bfa 288deg 360deg
        );
    }

    .mini-result {
      background: rgba(249,200,66,0.1);
      border: 1px solid rgba(249,200,66,0.3);
      border-radius: 8px;
      color: var(--gold);
      font-size: 0.82rem;
      font-weight: 700;
      min-height: 36px;
      padding: 8px 10px;
      width: 100%;
    }

    .jackpot-total {
      background: rgba(249,200,66,0.08);
      border: 2px solid rgba(249,200,66,0.35);
      border-radius: 10px;
      color: var(--ink);
      font-size: 0.95rem;
      margin: 0 auto 18px;
      max-width: 500px;
      min-height: 52px;
      padding: 14px 18px;
    }

    .jackpot-total strong { color: var(--gold); }

    /* Confetti */
    .confetti-particle {
      animation: confettiDrop 1.5s ease-in both;
      border-radius: 2px;
      height: 10px;
      pointer-events: none;
      position: fixed;
      width: 10px;
      z-index: 200;
    }

    @keyframes confettiDrop {
      0%   { opacity: 1; transform: translate(var(--tx0), 0) rotate(0deg) scale(1); }
      100% { opacity: 0; transform: translate(var(--tx1), var(--ty)) rotate(var(--rot)) scale(0.5); }
    }

    .loot-result-burst {
      animation: lootResultBurst 900ms ease-out both;
      background: var(--cs-gold);
      border: 3px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: clamp(1.2rem, 3vw, 2.2rem);
      font-weight: 1000;
      margin: 8px auto 0;
      max-width: 560px;
      padding: 14px;
      text-transform: uppercase;
    }

    .loot-result-burst .loot-list {
      justify-content: center;
      margin-top: 10px;
    }

    .treasure-choice {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 16px;
    }

    .treasure-board {
      align-content: start;
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
      display: grid;
      gap: 10px;
      min-height: 220px;
      padding: 16px;
      text-align: left;
      width: 100%;
    }

    .treasure-board:hover {
      border-color: var(--cs-ink);
      box-shadow: 5px 5px 0 var(--cs-ink);
      transform: translate(-1px,-1px);
    }

    .treasure-board strong {
      color: var(--cs-crimson);
      font-size: 1.05rem;
    }

    .treasure-board span {
      color: rgba(36,28,26,0.65);
      display: block;
      font-size: 0.88rem;
      line-height: 1.3;
    }

    .treasure-board ul {
      display: grid;
      gap: 7px;
      margin: 0;
      padding-left: 18px;
    }

    /* Chest opening animation */
    .treasure-chest-wrap {
      display: flex;
      justify-content: center;
      margin: 80px 0 6px;
      min-height: 120px;
      perspective: 600px;
    }

    .chest-anim {
      position: relative;
      width: 88px;
      height: 68px;
      transform: scale(1.5);
      transform-origin: top center;
    }

    .chest-lid {
      background: linear-gradient(180deg, #c88b3a 0%, #6f421f 100%);
      border: 3px solid #2b1a0e;
      border-radius: 6px 6px 0 0;
      box-shadow: inset 0 3px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(244,185,66,0.3);
      height: 30px;
      left: 0;
      position: absolute;
      top: 0;
      transform-origin: bottom center;
      width: 88px;
      z-index: 2;
    }

    .chest-lid::before {
      background: linear-gradient(90deg, transparent 28%, rgba(244,185,66,0.55) 50%, transparent 72%);
      border-radius: 2px;
      content: "";
      height: 5px;
      left: 8px;
      position: absolute;
      right: 8px;
      top: 7px;
    }

    .chest-lid::after {
      background: rgba(244,185,66,0.22);
      border: 2px solid rgba(244,185,66,0.5);
      border-radius: 50% 50% 0 0;
      content: "";
      height: 10px;
      left: 50%;
      position: absolute;
      top: -6px;
      transform: translateX(-50%);
      width: 22px;
    }

    .chest-body {
      background: linear-gradient(180deg, #8b5e2a 0%, #3d2209 100%);
      border: 3px solid #2b1a0e;
      border-top: none;
      border-radius: 0 0 6px 6px;
      bottom: 0;
      height: 42px;
      left: 0;
      position: absolute;
      width: 88px;
    }

    .chest-body::before {
      background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
      border-radius: 2px;
      content: "";
      height: 3px;
      left: 6px;
      position: absolute;
      right: 6px;
      top: 4px;
    }

    .chest-body::after {
      background: linear-gradient(180deg, rgba(244,185,66,0.9), rgba(180,110,15,0.9));
      border: 2px solid #2b1a0e;
      border-radius: 50%;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
      content: "";
      height: 16px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
    }

    .chest-shine {
      border-radius: 50%;
      height: 0;
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 30px;
      transform: translateX(-50%);
      width: 0;
    }

    .chest-anim.is-open .chest-lid {
      animation: chestLidOpen 1100ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

    .chest-anim.is-open .chest-shine {
      animation: chestShine 1400ms ease-out 200ms forwards;
    }

    @keyframes chestLidOpen {
      0%   { transform: rotateX(0deg); }
      100% { transform: rotateX(-115deg); }
    }

    @keyframes chestShine {
      0%   { opacity: 0; width: 0;     height: 0;     box-shadow: none; }
      35%  { opacity: 1; width: 110px; height: 110px; box-shadow: 0 0 36px 18px rgba(244,185,66,0.55); }
      100% { opacity: 0; width: 170px; height: 170px; box-shadow: 0 0 60px 30px rgba(244,185,66,0); }
    }

    .treasure-choice.boards-hidden {
      opacity: 0;
      pointer-events: none;
    }

    .treasure-choice.boards-reveal {
      opacity: 1;
      pointer-events: auto;
      transition: opacity 150ms ease;
    }

    .treasure-choice.boards-reveal .treasure-board {
      animation: boardFlyOut 800ms cubic-bezier(0.34, 1.5, 0.64, 1) both;
    }

    .treasure-choice.boards-reveal .treasure-board:nth-child(1) { animation-delay: 0ms; }
    .treasure-choice.boards-reveal .treasure-board:nth-child(2) { animation-delay: 160ms; }
    .treasure-choice.boards-reveal .treasure-board:nth-child(3) { animation-delay: 320ms; }

    @keyframes boardFlyOut {
      0%   { opacity: 0; transform: translateY(28px) scale(0.72); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes treasureRainbow {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ── Schatztruhe (Tablet + Desktop): Kiste öffnet sich, danach überblendet
       die Auswahl den ganzen Bildschirm — eigene Bildsprache, keine 1:1-Kopie
       der Mobil-Version (3 Spalten nebeneinander statt gestapelte Reihen).
       Greift ab 601px, damit Tablets (Hoch- wie Querformat) dasselbe Vollbild-
       Interface bekommen wie Desktop — vorher fielen 601–820px in eine Lücke
       zwischen Phone-Block (≤600) und Desktop-Block und bekamen die kleine
       zentrierte Karte. */
    @media (min-width: 601px) {
      .result-card {
        transition: max-width 420ms ease, width 420ms ease, height 420ms ease, border-radius 420ms ease;
      }
      .result-modal:has(.treasure-choice.boards-reveal),
      .result-modal:has(.milestone-choice.boards-reveal) {
        align-items: stretch;
        padding: 0;
      }
      .result-card:has(.treasure-choice.boards-reveal) {
        border-radius: 0;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        max-width: 100vw;
        width: 100vw;
      }
      .result-card:has(.treasure-choice.boards-reveal) h2,
      .result-card:has(.treasure-choice.boards-reveal) > p,
      .result-card:has(.treasure-choice.boards-reveal) .treasure-chest-wrap {
        display: none;
      }
      /* Meilenstein: Titel + Hinweis sichtbar lassen (zeigt Attribut & Schwelle) */
      .result-card.milestone-card:has(.milestone-choice.boards-reveal) h2 {
        display: block;
        background: linear-gradient(180deg, #2a1c12 0%, #1c120c 100%);
        color: #fdf3e1;
        font-size: 1.35rem;
        margin: 0;
        padding: 14px 20px 4px;
      }
      .result-card.milestone-card:has(.milestone-choice.boards-reveal) > p {
        display: block;
        background: linear-gradient(180deg, #2a1c12 0%, #1c120c 100%);
        color: rgba(253,243,225,0.85);
        font-size: 0.9rem;
        margin: 0;
        padding: 0 20px 12px;
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-choice {
        animation: treasureRainbow 6s ease infinite;
        background: linear-gradient(120deg,#ff6b6b,#ffd93d,#6bcb77,#4dabf7,#cc6bff,#ff6b6b);
        background-size: 400% 400%;
        flex: 1;
        gap: 3px;
        margin-top: 0;
        padding: 3px;
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board {
        border-radius: 4px;
        border-width: 0;
        justify-content: center;
        min-height: 0;
        overflow-y: auto;
        padding: clamp(16px, 4vw, 40px) clamp(14px, 3vw, 34px);
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board strong { font-size: clamp(1.15rem, 2.6vw, 1.6rem); }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board span { font-size: clamp(0.86rem, 1.5vw, 1.02rem); }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board li { font-size: clamp(0.85rem, 1.5vw, 1rem); }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:nth-child(1) {
        background: linear-gradient(160deg, #1a1040 0%, #2d1b6e 60%, #3d0f5a 100%);
        border-left: 6px solid #cc6bff;
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:nth-child(2) {
        background: linear-gradient(160deg, #0a2540 0%, #0e4d6e 60%, #0a3d5a 100%);
        border-left: 6px solid #4dabf7;
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:nth-child(3) {
        background: linear-gradient(160deg, #0a2e1a 0%, #0f5c35 60%, #0a3d28 100%);
        border-left: 6px solid #6bcb77;
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:nth-child(1) strong { color: #cc6bff; }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:nth-child(2) strong { color: #4dabf7; }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:nth-child(3) strong { color: #6bcb77; }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board span,
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board li {
        color: rgba(255,255,255,0.82);
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board:hover {
        filter: brightness(1.15);
        transform: scale(1.015);
      }
    }

    /* Tablet Hochformat: die 3 Tafeln gestapelt (wie auf dem Smartphone) statt
       3 schmaler, sehr hoher Spalten. Querformat bleibt 3-spaltig. */
    @media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
      .result-card:has(.treasure-choice.boards-reveal) .treasure-choice {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
      }
      .result-card:has(.treasure-choice.boards-reveal) .treasure-board {
        justify-content: flex-start;
      }
    }

    /* ── Attribut-Meilenstein-Perks (nutzt die Schatztruhen-Balkenoptik) ── */
    .result-card.milestone-card h2 { text-align: center; color: var(--cs-crimson); }
    .milestone-board strong { display: block; margin-bottom: 6px; }
    .result-card:has(.milestone-choice.boards-reveal) .milestone-board:only-child {
      flex: 0 1 auto;
      max-width: 640px;
      margin: 0 auto;
    }
    .result-card.milestone-card #msClaim { margin-top: 14px; align-self: center; }

    /* ── Supertruhe ── */
    .super-chest-card {
      position: relative;
      overflow: hidden;
    }
    .super-chest-rainbow {
      animation: superRainbowBg 1.4s linear infinite;
      background: linear-gradient(270deg,
        #ff0080, #ff8c00, #ffe100, #00e676, #00b0ff, #b24bff, #ff0080);
      background-size: 400% 400%;
      border-radius: 16px;
      inset: -4px;
      opacity: 0.28;
      pointer-events: none;
      position: absolute;
      z-index: 0;
    }
    @keyframes superRainbowBg {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .super-chest-card > *:not(.super-chest-rainbow) { position: relative; z-index: 1; }
    .super-chest-card h2 {
      animation: superTitlePulse 0.9s ease-in-out infinite alternate;
      font-size: 1.6rem;
    }
    @keyframes superTitlePulse {
      from { text-shadow: 0 0 8px #fff, 0 0 20px #ff0080, 0 0 40px #ff8c00; }
      to   { text-shadow: 0 0 8px #fff, 0 0 24px #00e676, 0 0 50px #00b0ff; }
    }
    .super-boards .super-board {
      animation: superBoardGlow 1.1s ease-in-out infinite alternate;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .super-boards .super-board:nth-child(1) { animation-delay: 0s; }
    .super-boards .super-board:nth-child(2) { animation-delay: 0.3s; }
    .super-boards .super-board:nth-child(3) { animation-delay: 0.6s; }
    @keyframes superBoardGlow {
      from { box-shadow: 0 0 8px 2px #ff0080aa; border-color: #ff0080; }
      to   { box-shadow: 0 0 18px 4px #00b0ffaa; border-color: #00b0ff; }
    }
    .chest-tier-metall .chest-body { background: linear-gradient(180deg, #7d8a99, #2b3440); }
    .chest-tier-metall .chest-lid  { background: linear-gradient(180deg, #c9d3de, #6c7a8b); }
    .chest-tier-gold .chest-body   { background: linear-gradient(180deg, #e0a800, #7a5200); }
    .chest-tier-gold .chest-lid    { background: linear-gradient(180deg, #ffe680, #e0a800); }
    .chest-tier-gold               { filter: drop-shadow(0 0 10px rgba(255,215,64,0.8)); }
    .super-chest-anim .chest-body  { background: linear-gradient(180deg, #ffd700, #ff8c00); }
    .super-chest-anim .chest-lid   { background: linear-gradient(180deg, #ffe566, #ffd700); }
    .super-claim-btn {
      animation: superClaimPulse 0.8s ease-in-out infinite alternate;
      display: block;
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      margin: 14px auto 0;
      padding: 12px 28px;
      width: fit-content;
    }
    @keyframes superClaimPulse {
      from { box-shadow: 0 0 10px 2px #ff8c00; transform: scale(1); }
      to   { box-shadow: 0 0 22px 6px #ffe100; transform: scale(1.04); }
    }

    /* ── Overcare Flash ── */
    .overcare-flash {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 38%;
      transform: translate(-50%, -50%);
      z-index: 200;
    }

    .overcare-flash.show {
      animation: overcareFlash 1300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      display: block;
    }

    .overcare-flash strong {
      background: linear-gradient(90deg, #ef6f6c, #f4b942, #28c6a2, #5aa9e6, #a78bfa, #ef6f6c);
      border: 3px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      box-shadow:
        0 0 40px rgba(244, 185, 66, 0.55),
        inset 0 0 0 2px rgba(255,255,255,0.12);
      color: #08111f;
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.6rem, 7vw, 6rem);
      font-weight: 900;
      line-height: 1;
      padding: 16px 32px;
      text-align: center;
      text-shadow: 0 2px 0 rgba(255,255,255,0.4), 0 5px 0 rgba(2,6,23,0.22);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .overcare-flash small {
      color: #f4d37c;
      display: block;
      font-size: 1.1rem;
      font-weight: 900;
      margin-top: 6px;
      text-align: center;
      text-shadow: 0 2px 4px rgba(2,6,23,0.6);
    }

    @keyframes overcareFlash {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-6deg); }
      14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(2deg); }
      38%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
      70%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
      100% { opacity: 0; transform: translate(-50%, -56%) scale(1.08) rotate(3deg); }
    }

    .miss-flash {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 38%;
      transform: translate(-50%, -50%);
      z-index: 200;
    }

    .miss-flash.show {
      animation: missFlash 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      display: block;
    }

    .miss-flash strong {
      background: linear-gradient(90deg, #38bdf8, #6ee7b7);
      border: 2px solid rgba(255,255,255,0.22);
      border-radius: 10px;
      box-shadow: 0 0 28px rgba(56, 189, 248, 0.45);
      color: #0a1829;
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.8rem, 5vw, 3.6rem);
      font-weight: 900;
      line-height: 1;
      padding: 12px 28px;
      text-align: center;
      text-shadow: 0 2px 0 rgba(255,255,255,0.35);
      text-transform: uppercase;
      white-space: nowrap;
    }

    @keyframes missFlash {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(4deg); }
      16%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(-2deg); }
      40%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(0deg); }
      72%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(0deg); }
      100% { opacity: 0; transform: translate(-50%, -58%) scale(1.05) rotate(2deg); }
    }

    /* ── Crit-Flash (beim Gegner) ─────────────────────────── */
    .crit-flash {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 22%;
      transform: translate(-50%, -50%);
      z-index: 200;
    }

    .crit-flash.show {
      animation: critFlash 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .crit-flash.show.supercrit {
      animation: critFlash 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .crit-flash strong {
      background: linear-gradient(90deg, #facc15, #f97316);
      border: 2px solid rgba(255,255,255,0.25);
      border-radius: 10px;
      box-shadow: 0 0 32px rgba(251, 191, 36, 0.6);
      color: #1a0a00;
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.6rem, 4.5vw, 3.2rem);
      font-weight: 900;
      line-height: 1;
      padding: 10px 24px;
      text-align: center;
      text-shadow: 0 2px 0 rgba(255,255,255,0.3);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .crit-flash.supercrit strong {
      background: linear-gradient(90deg, #ff4444, #ff0080, #ff4444);
      box-shadow: 0 0 48px rgba(255, 0, 80, 0.8), 0 0 16px rgba(255, 80, 0, 0.6);
      color: #fff;
      font-size: clamp(1.8rem, 5vw, 3.6rem);
      text-shadow: 0 0 12px rgba(255,0,80,0.9), 0 2px 0 rgba(0,0,0,0.5);
    }

    @keyframes critFlash {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-6deg); }
      14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
      35%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
      70%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
      100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05) rotate(2deg); }
    }

    /* ── Doppelmove-Banner ──────────────────────────────────── */
    .double-move-flash {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 32%;
      transform: translate(-50%, -50%);
      z-index: 200;
    }

    .double-move-flash.show {
      animation: doubleMoveAnim 1400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .double-move-flash strong {
      background: linear-gradient(90deg, #38bdf8, #6366f1);
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 10px;
      box-shadow: 0 0 36px rgba(99, 102, 241, 0.7);
      color: #fff;
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.4rem, 4vw, 2.8rem);
      font-weight: 900;
      line-height: 1;
      padding: 10px 24px;
      text-align: center;
      text-shadow: 0 2px 4px rgba(0,0,0,0.4);
      text-transform: uppercase;
      white-space: nowrap;
    }

    @keyframes doubleMoveAnim {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(6deg); }
      14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-3deg); }
      35%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
      70%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
      100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05) rotate(-2deg); }
    }

    /* ── Heal-Pop (am Lebensbalken des Spielers) ──────────── */
    .heal-pop {
      bottom: calc(56px + 52px);
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      transform: translateX(-50%);
      z-index: 200;
    }

    .heal-pop.show {
      animation: healPop 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .heal-pop span {
      background: rgba(16, 185, 129, 0.18);
      border: 2px solid #10b981;
      border-radius: 8px;
      box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
      color: #6ee7b7;
      display: block;
      font-size: clamp(1.1rem, 3vw, 1.8rem);
      font-weight: 900;
      padding: 4px 14px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      white-space: nowrap;
    }

    /* ── Boss-Selbstheilung (Troll) ──────────────────────────── */
    .boss-heal-flash {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 32%;
      transform: translateX(-50%);
      z-index: 200;
    }
    .boss-heal-flash.show {
      animation: healPop 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .boss-heal-flash span {
      background: rgba(239, 68, 68, 0.18);
      border: 2px solid #ef4444;
      border-radius: 8px;
      box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
      color: #fca5a5;
      display: block;
      font-size: clamp(1rem, 3vw, 1.6rem);
      font-weight: 900;
      padding: 4px 14px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      white-space: nowrap;
    }

    /* ── Goblin-Klauen-Flash ─────────────────────────────────── */
    .steal-flash {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 40%;
      transform: translate(-50%, -50%);
      z-index: 201;
    }
    .steal-flash.show {
      animation: doubleMoveAnim 1600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .steal-flash strong {
      background: linear-gradient(90deg, #7c3aed, #ec4899);
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 10px;
      box-shadow: 0 0 36px rgba(236, 72, 153, 0.65);
      color: #fff;
      display: block;
      font-size: clamp(1rem, 3vw, 1.4rem);
      padding: 8px 18px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.6);
      white-space: nowrap;
    }

    @keyframes healPop {
      0%   { opacity: 0; transform: translateX(-50%) translateY(0)    scale(0.7); }
      18%  { opacity: 1; transform: translateX(-50%) translateY(-4px)  scale(1.1); }
      45%  { opacity: 1; transform: translateX(-50%) translateY(-8px)  scale(1);   }
      75%  { opacity: 1; transform: translateX(-50%) translateY(-14px) scale(1);   }
      100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(0.9); }
    }

    @keyframes lootResultBurst {
      0% {
        opacity: 0;
        transform: scale(0.68) rotate(-3deg);
      }
      60% {
        opacity: 1;
        transform: scale(1.08) rotate(1deg);
      }
      100% {
        transform: scale(1) rotate(0);
      }
    }

    .result-list {
      display: grid;
      gap: 8px;
      margin: 12px 0 0;
      padding: 0;
    }

    .result-list li {
      background: rgba(248, 250, 252, 0.08);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      line-height: 1.35;
      list-style: none;
      padding: 10px 12px;
    }

    .result-modal {
      align-items: center;
      background: rgba(2, 6, 23, 0.66);
      display: none;
      inset: 0;
      justify-content: center;
      padding: 18px;
      position: fixed;
      /* Muss ueber dem popup-open-Backdrop (z-index 65) und ueber der
         Loot-Box (z-index 72) liegen, damit Bestaetigungs-Popups wie die
         Schatzauswahl immer ganz oben und klickbar sind. */
      z-index: 90;
    }

    .result-modal.show {
      display: flex;
    }

    .result-card {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 4px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 0 24px 70px rgba(2, 6, 23, 0.4), 6px 6px 0 var(--cs-ink);
      display: grid;
      gap: 14px;
      max-height: min(82vh, 720px);
      max-width: min(720px, 100%);
      overflow: auto;
      padding: 22px;
      width: 720px;
      --ink: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
    }

    .result-card h2 {
      color: var(--cs-crimson);
      font-size: 1.35rem;
      margin: 0;
    }

    .result-card p {
      color: var(--muted);
      line-height: 1.45;
      margin: 0;
    }

    /* Victory card golden border */
    .victory-card {
      border-color: var(--cs-gold);
      box-shadow: 0 0 0 4px var(--cs-gold), 6px 6px 0 var(--cs-ink);
    }

    /* Abschluss- / Game-Over-Fenster: IMMER intern scrollbar, Aktions-Buttons
       bleiben angeheftet sichtbar. Auf kurzen Landscape-Viewports und schmalen
       Hochkant-Tablets rutschten „← Zurück zur Karte" / „Nochmal" sonst unter
       den Rand und waren nicht erreichbar (Karte hatte overflow ohne Scroll). */
    .result-card.recap-card {
      max-height: min(88dvh, 760px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .result-card.recap-card .recap-actions {
      position: sticky;
      bottom: 0;
      margin: 12px -22px -22px;
      padding: 14px 22px;
      background: #fbe7c8;
      box-shadow: 0 -10px 16px -6px #fbe7c8;
    }
    .result-card.recap-card .recap-actions > .next {
      flex: 1 1 0;
      min-width: 0;
      white-space: nowrap;
    }

    /* End-screen score block */
    .end-score-block {
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      box-shadow: 3px 3px 0 var(--cs-ink);
      border-radius: 8px;
      display: grid;
      gap: 2px 16px;
      grid-template-columns: 1fr auto;
      padding: 14px 18px;
    }
    .end-score-label {
      color: rgba(36,28,26,0.62);
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .end-score-value {
      color: var(--cs-ink);
      font-family: Georgia, serif;
      font-size: 1.15rem;
      font-weight: bold;
      text-align: right;
    }
    .end-score-value.score-highlight {
      color: var(--cs-crimson);
      font-size: 2rem;
      text-shadow: none;
    }

    /* ── Abschlussfenster: Run-Zusammenfassung + Erfolg-Fortschritt ── */
    .run-summary { margin: 12px 0 0; }
    .run-summary h3 {
      color: var(--cs-crimson); font-size: 0.82rem; font-weight: 800;
      margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em;
    }
    .run-stat-grid {
      display: grid; grid-template-columns: 1fr auto; gap: 3px 16px;
      font-size: 0.86rem; color: var(--cs-ink);
    }
    .run-stat-grid strong { font-variant-numeric: tabular-nums; }
    .run-rewards { font-size: 0.8rem; color: rgba(36,28,26,.7); margin: 8px 0 0; }
    .run-earned { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .run-earned .re-chip {
      background: var(--cs-gold); border: 2px solid var(--cs-ink); border-radius: 6px;
      padding: 2px 8px; font-size: 0.78rem; font-weight: 700; color: var(--cs-ink);
    }
    .run-summary .ach-row {
      display: grid; grid-template-columns: 1fr; gap: 2px; margin: 6px 0;
    }
    .run-summary .ach-row-name { font-size: 0.82rem; color: var(--cs-ink); }
    .ach-progress { margin-top: 4px; }
    .ach-progress .bar {
      background: rgba(36,28,26,0.12);
      border: 1.5px solid var(--cs-ink);
      height: 8px;
    }
    .ach-progress .bar span { transition: none; }
    .ach-progress .bar-caption {
      display: block; font-size: 0.7rem; color: var(--muted, rgba(36,28,26,.55)); margin-top: 1px;
    }

    .choice-feedback {
      left: 50%;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 32%;
      transform: translate(-50%, -50%) scale(0.82);
      z-index: 70;
    }

    .choice-feedback.requires-confirm {
      background: rgba(8, 13, 24, 0.9);
      border: 1px solid rgba(248, 250, 252, 0.2);
      border-radius: 8px;
      box-shadow: 0 20px 50px rgba(2, 6, 23, 0.5);
      display: grid;
      gap: 12px;
      justify-items: center;
      padding: 12px;
      pointer-events: auto;
    }

    .choice-feedback.show {
      animation: choiceFeedbackPop 980ms ease-out forwards;
    }

    .choice-feedback.requires-confirm.show {
      animation: none;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .choice-feedback strong {
      border: 2px solid rgba(248, 250, 252, 0.72);
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(2, 6, 23, 0.48);
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2rem, 5vw, 4.4rem);
      line-height: 1;
      padding: 16px 24px;
      text-shadow: 0 3px 0 rgba(2, 6, 23, 0.42);
      text-transform: uppercase;
    }

    .choice-feedback.good strong {
      background: rgba(40, 198, 162, 0.95);
      color: #042a22;
    }

    .choice-feedback.ok strong {
      background: rgba(244, 185, 66, 0.96);
      color: #2b1a0e;
    }

    .choice-feedback.weak strong {
      background: rgba(239, 111, 108, 0.96);
      color: #2b0808;
    }

    .choice-feedback.quiztime {
      top: 36%;
      z-index: 82;
    }

    .choice-feedback.quiztime.show {
      animation: quizTimePop 1400ms ease-out forwards;
    }

    .choice-feedback.quiztime strong {
      background:
        linear-gradient(90deg, #ef6f6c, #f4b942, #28c6a2, #5aa9e6);
      color: #08111f;
      font-size: clamp(3rem, 8vw, 7.5rem);
      padding: 18px 30px;
      text-shadow:
        0 2px 0 rgba(248, 250, 252, 0.72),
        0 7px 0 rgba(2, 6, 23, 0.22);
    }

    .choice-feedback.event-pop.show {
      animation: quizTimePop 1500ms ease-out forwards;
    }

    .choice-feedback.event-pop strong {
      color: #08111f;
      font-size: clamp(2.2rem, 6vw, 5.8rem);
      padding: 16px 28px;
      text-shadow:
        0 2px 0 rgba(248, 250, 252, 0.72),
        0 6px 0 rgba(2, 6, 23, 0.2);
    }

    .choice-feedback.event-bonus strong {
      background: linear-gradient(90deg, #f4b942, #28c6a2, #5aa9e6);
    }

    .choice-feedback.event-motivation strong {
      background: linear-gradient(90deg, #28c6a2, #a7f3d0, #f4b942);
    }

    .choice-feedback.event-relative strong {
      background: linear-gradient(90deg, #5aa9e6, #f8fafc, #f4b942);
    }

    .choice-feedback.event-apprentice strong {
      background: linear-gradient(90deg, #a78bfa, #f8fafc, #28c6a2);
    }

    .choice-feedback.event-achievement strong {
      background: linear-gradient(90deg, #f8fafc, #f4b942, #28c6a2);
    }

    /* ── Blockierendes Event-Popup ("Raum durchsuchen"-Fund u. Ä.) ────────────
       Muss bis zum "Weiter"-Klick STEHEN bleiben. Die generische
       .choice-feedback.event-pop.show-Regel würde es sonst per quizTimePop nach
       1,5 s auf opacity:0 wegblenden (forwards) — das Interface bliebe gesperrt
       (body.popup-open, popupIsOpen()=true → Steuerkreuz tot), der "Weiter"-
       Button unsichtbar = Soft-Lock. Zusätzlich Comic-Papier-Look statt
       dunkel-auf-dunkel, lesbare Fließschrift, \n als echter Zeilenumbruch. */
    .choice-feedback.event-pop.requires-confirm {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 22px 50px rgba(2, 6, 23, 0.45);
      color: var(--cs-ink);
      gap: 14px;
      max-width: min(440px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      padding: 20px 22px;
    }
    /* Kein Ein-/Ausblende-Effekt: statisch sichtbar, bis „Weiter" geklickt wird.
       (Eine Transition/Animation, die unterbrochen wird oder bei gedrosseltem
       Tab bei 0 hängen bleibt, würde das Popup unsichtbar lassen = Soft-Lock.) */
    .choice-feedback.event-pop.requires-confirm.show {
      animation: none !important;
      opacity: 1 !important;
      transform: translate(-50%, -50%) scale(1) !important;
    }
    .choice-feedback.event-pop.requires-confirm strong {
      background: none;
      border: none;
      box-shadow: none;
      color: var(--cs-ink);
      font-family: inherit;
      font-size: clamp(1rem, 3.4vw, 1.3rem);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.4;
      padding: 0;
      text-shadow: none;
      text-transform: none;
      white-space: pre-line;
    }

    @keyframes choiceFeedbackPop {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.74);
      }
      16% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
      }
      72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
      }
    }

    /* ── Achievement Toast (non-blocking) ────────────────────────────────── */
    .achievement-toast {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 4px 4px 0 var(--cs-ink), 0 24px 60px rgba(2,6,23,0.5);
      color: var(--cs-ink);
      display: none;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: clamp(0.85rem, 2vw, 1rem);
      left: 50%;
      max-width: min(520px, 90vw);
      padding: 18px 22px 16px;
      pointer-events: none;
      position: fixed;
      text-align: center;
      top: 18px;
      transform: translateX(-50%);
      width: max-content;
      z-index: 210;
    }
    .achievement-toast.show {
      animation: achievementToastAnim 5200ms ease forwards;
      display: block;
    }
    .achievement-toast-icon {
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 6px;
    }
    .achievement-toast-title {
      color: var(--cs-crimson);
      display: block;
      font-size: clamp(0.7rem, 1.6vw, 0.8rem);
      letter-spacing: 0.12em;
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    .achievement-toast-text {
      color: var(--cs-ink);
      display: block;
      font-size: clamp(0.88rem, 2vw, 1.05rem);
      font-weight: bold;
      line-height: 1.35;
    }
    @keyframes achievementToastAnim {
      0%   { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.88); }
      8%   { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1.04); }
      14%  { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);   }
      80%  { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);   }
      100% { opacity: 0; transform: translateX(-50%) translateY(-10px)  scale(0.95); }
    }

    @keyframes quizTimePop {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45) rotate(-8deg);
      }
      18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12) rotate(2deg);
      }
      66% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -52%) scale(1.18) rotate(4deg);
      }
    }

    .cutscene-box {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 24px 60px rgba(2, 6, 23, 0.4);
      color: var(--cs-ink);
      display: none;
      gap: 14px;
      grid-template-columns: 110px 1fr 110px;
      left: 50%;
      max-width: min(720px, calc(100% - 28px));
      max-height: calc(100dvh - 20px);
      overflow-y: auto;
      overscroll-behavior: contain;
      min-height: 156px;
      padding: 16px;
      pointer-events: none;
      position: fixed;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 720px;
      z-index: 84;
      --ink: var(--cs-ink);
      --paper: var(--cs-ink);
      --muted: rgba(36, 28, 26, 0.62);
      --gold: var(--cs-crimson);
    }

    .cutscene-box.show {
      animation: cutsceneIn 4600ms ease-out forwards;
      display: grid;
      pointer-events: auto;
    }

    .cutscene-box.requires-confirm.show {
      animation: cutsceneInHold 360ms ease-out forwards;
    }

    .cutscene-avatar,
    .cutscene-npc {
      align-self: end;
      display: grid;
      justify-items: center;
      min-height: 110px;
      position: relative;
    }

    .cutscene-avatar .pixel-avatar,
    .cutscene-npc .pixel-avatar {
      transform: scale(1.55);
      transform-origin: center bottom;
    }

    .cutscene-avatar {
      animation: cutscenePlayerStep 4600ms ease-out forwards;
    }

    .cutscene-npc {
      animation: cutsceneNpcStep 4600ms ease-out forwards;
    }

    .cutscene-npc .person {
      height: 106px;
      position: relative;
      width: 74px;
    }

    .cutscene-npc .person::before {
      background: #f2c7a5;
      border: 3px solid #1f2937;
      border-radius: 50%;
      content: "";
      height: 32px;
      left: 50%;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      width: 32px;
    }

    .cutscene-npc .person::after {
      background: linear-gradient(180deg, #60a5fa, #2563eb);
      border: 3px solid #1f2937;
      border-radius: 22px 22px 9px 9px;
      content: "";
      height: 64px;
      left: 50%;
      position: absolute;
      top: 36px;
      transform: translateX(-50%);
      width: 54px;
    }

    /* Name-Label unter dem NPC-Sprite in der Cutscene */
    .cutscene-npc-name {
      color: var(--gold);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      margin-top: 6px;
      max-width: 110px;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Name-Label unter dem laufenden Sprite im Kampfangriff */
    .enemy-runner-name {
      color: #f8fafc;
      font-size: 0.7rem;
      font-weight: 700;
      margin-top: 4px;
      max-width: 100px;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      text-shadow: 0 1px 4px rgba(0,0,0,0.9);
      white-space: nowrap;
    }

    .cutscene-text {
      align-self: center;
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .cutscene-text span {
      color: var(--gold);
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .cutscene-text strong {
      color: var(--paper);
      font-size: clamp(1.15rem, 2.2vw, 1.85rem);
      line-height: 1.12;
    }

    .cutscene-text p {
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.35;
      margin: 0;
    }

    .cutscene-effect {
      color: var(--gold);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 4.2rem;
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 0 18px rgba(244, 185, 66, 0.55);
    }

    .cutscene-box.aura .cutscene-avatar {
      filter: drop-shadow(0 0 16px rgba(244, 185, 66, 0.95));
    }

    .cutscene-box.aura .cutscene-avatar::before {
      animation: auraPulse 900ms ease-in-out infinite;
      background: radial-gradient(circle, rgba(244, 185, 66, 0.45), rgba(40, 198, 162, 0.18), transparent 68%);
      border-radius: 50%;
      content: "";
      height: 120px;
      position: absolute;
      width: 96px;
      z-index: -1;
    }

    .cutscene-box.student-sick {
      grid-template-columns: 110px 110px 1fr;
    }

    .cutscene-box.student-sick.show {
      animation: cutsceneStudentSickIn 6200ms ease-out forwards;
    }

    .cutscene-box.student-sick.requires-confirm.show {
      animation: cutsceneInHold 360ms ease-out forwards;
    }

    .cutscene-box.student-sick .cutscene-avatar {
      order: 1;
    }

    .cutscene-box.student-sick .cutscene-npc {
      animation: studentSickExit 6200ms ease-out forwards;
      order: 2;
      pointer-events: none;
    }

    .cutscene-box.student-sick .cutscene-text {
      order: 3;
    }

    @keyframes cutsceneIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
      }
      12%, 82% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -54%) scale(0.98);
      }
    }

    @keyframes cutsceneInHold {
      0% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes cutsceneStudentSickIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.94);
      }
      10%, 84% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -54%) scale(0.98);
      }
    }

    @keyframes cutscenePlayerStep {
      0% {
        opacity: 0;
        transform: translateX(-40px);
      }
      20%, 100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes cutsceneNpcStep {
      0% {
        opacity: 0;
        transform: translateX(90px) rotate(4deg);
      }
      18% {
        opacity: 1;
        transform: translateX(-8px) rotate(-3deg);
      }
      30% {
        opacity: 1;
        transform: translateX(4px) rotate(2deg);
      }
      42%, 100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
      }
    }

    @keyframes studentSickExit {
      0% {
        opacity: 0;
        transform: translateX(-34px) rotate(-2deg);
      }
      16%, 48% {
        opacity: 1;
        transform: translateX(0) rotate(0);
      }
      58% {
        opacity: 1;
        transform: translateX(10px) rotate(3deg);
      }
      100% {
        opacity: 0;
        transform: translateX(260px) rotate(5deg);
      }
    }

    /* ── Combat Outro ───────────────────────────────────────────────────────── */
    .cutscene-box.combat-outro {
      overflow: hidden;
    }
    .cutscene-box.combat-outro.show {
      animation: cutsceneOutroBox 5200ms ease-out forwards;
    }
    @keyframes cutsceneOutroBox {
      0%   { opacity:0; transform:translate(-50%,-46%) scale(0.94); }
      10%, 78% { opacity:1; transform:translate(-50%,-50%) scale(1); }
      100% { opacity:0; transform:translate(-50%,-54%) scale(0.98); }
    }
    /* Pflegekraft: steht links, rückt leicht nach rechts */
    .cutscene-box.combat-outro .cutscene-avatar {
      animation: outroPlayerStand 5200ms ease-out forwards;
    }
    @keyframes outroPlayerStand {
      0%   { opacity:0; transform:translateX(-30px); }
      14%, 100% { opacity:1; transform:translateX(0); }
    }
    /* Patient: kommt von rechts rein, steht kurz, geht dann nach rechts raus */
    .cutscene-box.combat-outro .cutscene-npc {
      animation: outroPatientWalk 5200ms ease-out forwards;
    }
    @keyframes outroPatientWalk {
      0%   { opacity:0; transform:translateX(80px) scaleX(-1); }
      16%  { opacity:1; transform:translateX(-6px) scaleX(-1); }
      25%, 55% { opacity:1; transform:translateX(0) scaleX(-1); }
      68%  { opacity:1; transform:translateX(16px) scaleX(-1); }
      100% { opacity:0; transform:translateX(300px) scaleX(-1); }
    }
    /* Herz-Regen Container */
    .outro-hearts {
      pointer-events: none;
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 2;
    }
    .outro-heart {
      animation: outroHeartRise var(--dur) ease-out var(--delay) forwards;
      color: #ff6b9d;
      font-size: var(--size);
      opacity: 0;
      position: absolute;
      bottom: 10%;
      left: var(--x);
    }
    @keyframes outroHeartRise {
      0%   { opacity:0;   transform:translateY(0)     scale(0.6) rotate(var(--rot)); }
      15%  { opacity:0.9; transform:translateY(-20px)  scale(1)   rotate(0deg); }
      70%  { opacity:0.7; transform:translateY(-90px)  scale(1.1) rotate(var(--rot2)); }
      100% { opacity:0;   transform:translateY(-140px) scale(0.8) rotate(var(--rot2)); }
    }

    @keyframes auraPulse {
      0%, 100% {
        opacity: 0.65;
        transform: scale(0.9);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
    }

    .door-cinematic {
      align-items: end;
      background:
        radial-gradient(circle at 50% 24%, rgba(244, 185, 66, 0.18), transparent 24%),
        linear-gradient(180deg, #172033, #050914);
      border: 1px solid rgba(226, 232, 240, 0.18);
      border-radius: 8px;
      display: grid;
      grid-template-columns: 1fr 140px 1fr;
      height: 210px;
      margin: 18px 0;
      overflow: hidden;
      position: relative;
    }

    .door-cinematic .cinematic-avatar {
      align-self: end;
      animation: walkToDoor 4200ms ease-in-out forwards;
      display: grid;
      justify-items: center;
      margin-bottom: 18px;
      transform-origin: center bottom;
      z-index: 3;
    }

    .door-cinematic .cinematic-avatar .pixel-avatar {
      transform: scale(1.35);
      transform-origin: center bottom;
    }

    .cinematic-door {
      align-self: end;
      background: linear-gradient(180deg, #2b3648, #0f172a);
      border: 5px solid rgba(2, 6, 23, 0.94);
      border-radius: 8px 8px 0 0;
      box-shadow:
        0 0 0 2px rgba(248, 250, 252, 0.12),
        0 0 32px rgba(244, 185, 66, 0.1);
      height: 172px;
      justify-self: center;
      margin-bottom: 0;
      overflow: hidden;
      position: relative;
      width: 118px;
    }

    .cinematic-door::before,
    .cinematic-door::after {
      background: linear-gradient(180deg, #334155, #101827);
      content: "";
      height: 100%;
      position: absolute;
      top: 0;
      width: 50%;
      z-index: 2;
    }

    .cinematic-door::before {
      animation: doorLeftOpen 4200ms ease-in-out forwards;
      border-right: 2px solid rgba(244, 185, 66, 0.32);
      left: 0;
      transform-origin: left center;
    }

    .cinematic-door::after {
      animation: doorRightOpen 4200ms ease-in-out forwards;
      border-left: 2px solid rgba(244, 185, 66, 0.32);
      right: 0;
      transform-origin: right center;
    }

    .cinematic-door span {
      background: radial-gradient(circle, rgba(244, 185, 66, 0.95), rgba(244, 185, 66, 0.2) 38%, transparent 68%);
      inset: 16px;
      opacity: 0;
      position: absolute;
      animation: doorGlow 4200ms ease-in-out forwards;
    }

    @keyframes walkToDoor {
      0% {
        opacity: 0;
        transform: translateX(-190px) scale(0.82);
      }
      12% {
        opacity: 1;
      }
      72% {
        transform: translateX(0) scale(1.05);
      }
      100% {
        opacity: 0.98;
        transform: translateX(0) scale(1.05);
      }
    }

    @keyframes doorLeftOpen {
      0%, 45% {
        transform: perspective(220px) rotateY(0deg);
      }
      100% {
        transform: perspective(220px) rotateY(-74deg);
      }
    }

    @keyframes doorRightOpen {
      0%, 45% {
        transform: perspective(220px) rotateY(0deg);
      }
      100% {
        transform: perspective(220px) rotateY(74deg);
      }
    }

    @keyframes doorGlow {
      0%, 45% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .actions,
    .inventory,
    .equipment {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .next,
    .reset,
    .item {
      font-weight: 800;
      min-height: 42px;
      padding: 9px 13px;
    }

    .next {
      background: var(--teal);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
    }

    .reset {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--cs-ink);
    }

    .item,
    .gear {
      background: var(--cs-paper);
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      color: var(--ink);
      display: grid;
      font-weight: 700;
      gap: 2px;
      min-width: 112px;
      text-align: left;
      transition: transform 120ms;
    }
    .next:hover, .reset:hover, .item:hover, .gear:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--cs-ink); }
    .next:active, .reset:active, .item:active, .gear:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--cs-ink); }

    .item span,
    .gear span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .gear {
      min-width: 150px;
    }

    .equipment-title {
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 800;
      margin: 10px 0 8px;
      width: 100%;
    }

    .empty {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.4;
      margin: 0;
    }

    .log {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
    }

    .log li {
      background: var(--cs-paper);
      border: 2px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.35;
      list-style: none;
      padding: 9px 10px;
    }

    .log strong {
      color: var(--ink);
    }

    @media (max-width: 980px) {
      .meter-row,
      .main {
        grid-template-columns: 1fr;
      }

      .side {
        display: contents;
      }
    }

    @media (max-width: 820px) {
      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .hud {
        justify-content: flex-start;
      }

      .scene {
        aspect-ratio: auto;
        min-height: 420px;
      }

      .intent-card {
        left: 14px;
        right: 14px;
        max-width: none;
      }

      .scene-card {
        width: calc(100% - 20px);
        max-width: none;
      }

      .scene-card strong { font-size: 1.05rem; }
      .scene-card p { font-size: 1rem; }

      .cutscene-box {
        grid-template-columns: 72px 1fr 72px;
        min-height: 132px;
        padding: 12px;
      }

      .cutscene-avatar .pixel-avatar,
      .cutscene-npc .pixel-avatar {
        transform: scale(1.18);
      }

      .cutscene-text p {
        font-size: 0.9rem;
      }

      .scene-card.has-actions {
        grid-template-columns: 1fr;
      }

      .scene-card-actions {
        justify-content: flex-start;
        margin-top: 10px;
      }

      .intro-briefing {
        grid-template-columns: 1fr;
      }

      .intro-actions {
        justify-content: flex-start;
        min-width: 0;
      }

      .scene.combat .scene-card {
        left: 14px;
        max-width: none;
        right: 14px;
        width: auto;
      }

      .scene.intro .scene-card {
        left: 14px;
        max-width: none;
        right: 14px;
        top: 70px;
        width: auto;
      }

      .room-visual {
        bottom: 28%;
        transform: translateX(-50%) scale(0.78);
      }

      .combat-overlay {
        bottom: 82px;
        grid-template-columns: 1fr;
        left: 14px;
        right: 14px;
        top: 92px;
      }

      .active-combatant {
        display: none;
      }

      .combat-patient {
        display: none;
      }

      .combat-patient-panel {
        grid-template-rows: auto;
      }

      .combat-choice-panel {
        max-width: none;
      }

      .initiative-strip {
        left: 14px;
        max-width: none;
        overflow: hidden;
        right: 14px;
      }
    }

    /* ── Mobile Overworld: Button-Liste statt Karte ────────────────────────── */
    @media (orientation: portrait) and (max-width: 600px) {

      /* Worldmap Mobile: kompakteres Grid — endet über der (2-reihigen ~112px)
         Menü-Bar, damit nichts überlappt und nicht gescrollt werden muss. */
      .worldmap-grid {
        bottom: 118px;
        gap: 4px;
        padding: 7px;
      }
      .worldmap-campaign-panel { padding-bottom: 126px; }
      .worldmap-cell { border-radius: 10px; gap: 2px; padding: 3px 1px; }
      .wm-cell-icon  { font-size: 1.3rem; }
      .wm-cell-label { font-size: 0.5rem; padding: 1px 4px; }
      .wm-lock-icon  { font-size: 1rem; }

      /* Mobil ist die Karte eine Button-Liste über die volle Fläche — das Kaiju
         rückt weiter in den Hintergrund: kleiner, blasser, tiefer. */
      .wm-scene { opacity: 0.34; }
      .wm-kaiju {
        bottom: 1%;
        transform: translateX(-50%) scale(0.46);
        transform-origin: 50% 100%;
      }
      .wm-kaiju, .wm-kaiju-eye, .wm-kaiju-arm, .wm-kaiju-tail { animation: none; }
      .wm-scene-skyline { height: 30%; opacity: 0.85; }

      /* Demenz: Schwarzes Loch + Orbits kleiner, damit die Button-Liste frei bleibt */
      .wm-blackhole { transform: translate(-50%, -50%) scale(0.6); }
      .wm-orbit-1 { width: 190px; height: 190px; }
      .wm-orbit-2 { width: 270px; height: 270px; }
      .wm-orbit-3 { width: 350px; height: 350px; }
      .wm-space-sun { width: 84px; height: 84px; }

      /* Neurologie: Schloss/Dorf kleiner, Fledermäuse fliegen kürzer */
      .wm-castle  { transform: translateX(-50%) scale(0.66); }
      .wm-village { transform: translateX(-50%) scale(0.66); bottom: 20%; }
      .wm-forest  { bottom: 33%; height: 44px; }
      .wm-moon { width: 64px; height: 64px; }
      .wm-hill { bottom: -30%; height: 60%; }

      /* Vitalzeichen: Insel-Szene kleiner/blasser, damit die Button-Liste frei bleibt */
      .wm-volcano { transform: translateX(-50%) scale(0.6); bottom: 34%; }
      .wm-brachio { transform: scale(0.6); left: 2%; bottom: 24%; }
      .wm-brachio, .wm-brachio-neck-wrap, .wm-palm, .wm-ptero, .wm-ptero::before { animation: none; }
      .wm-jungle-ridge { bottom: 28%; height: 44px; }

      /* Kampagnen-Panel: schmale Icon-Spalte statt breiter Karten */
      .worldmap-campaign-panel { flex-basis: 72px; gap: 8px; padding: 8px 4px; }
      .worldmap-campaign-btn   { align-items: center; padding: 6px 3px; min-width: 0; }
      .worldmap-campaign-icon  { font-size: 1.25rem; }
      .worldmap-campaign-name  {
        font-size: 0.52rem;
        text-align: center;
        line-height: 1.1;
        max-width: 100%;
        overflow-wrap: anywhere;   /* „Pflegeprozess" darf umbrechen statt abgeschnitten */
      }
      .worldmap-campaign-sub   { display: none; }
      .worldmap-campaign-progress { font-size: 0.55rem; }
      .worldmap-home-btn { padding: 8px 2px; }
      .worldmap-home-btn .wm-home-icon  { font-size: 1.25rem; }
      .worldmap-home-btn .wm-home-label { font-size: 0.5rem; text-align: center; overflow-wrap: anywhere; line-height: 1.1; }

      /* Mobile: Spieler und NPCs verkleinern */
      .dg-player-wrap { transform: scale(0.75); }
      .dg-decor-npc-wrap { transform: scale(0.75); }
      .dg-companion-wrap { transform: translateX(-50%) scale(0.60); }
      /* Größere Trefferzone für NPC-Buttons auf Touch-Geräten */
      .dg-decor-btn { inset: 0; }
    }

    /* ── Portrait Mobile (hochkant Smartphone, Breite ≤ 600 px) ────────────── */
    @media (orientation: portrait) and (max-width: 600px) {
      .mobile-damage-pop {
        animation: mobileDamagePop 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
        background: rgba(220, 38, 38, 0.92);
        border-radius: 20px;
        bottom: 54%;
        color: #fff;
        display: block;
        font-size: 1.5rem;
        font-weight: 900;
        left: 50%;
        opacity: 0;
        padding: 6px 18px;
        pointer-events: none;
        position: fixed;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 10000;
      }

      /* Topbar ausblenden */
      .topbar  { display: none; }
      .side    { display: none; }
      .meter-row { display: none; }
      .wolf-bar { padding: 4px 10px; min-height: 48px; }
      .wolf-face-wrap { width: 36px; height: 36px; }
      .wolf-hp-section { width: 90px; }
      .wolf-center { padding: 0 10px; gap: 3px; }

      /* Shell: Szene oben, Steuerung unten */
      .app {
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: 100%;
        padding: 0;
      }
      .shell {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
      }

      /* Szene: obere Hälfte */
      .scene {
        aspect-ratio: auto;
        flex: 0 0 54vh;
        min-height: 0;
        position: relative;
        width: 100%;
      }

      /* Hauptbereich: untere Hälfte, scrollbar */
      .main {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding: 4px 6px 6px;
      }

      /* Panel füllt Bereich */
      .panel { flex: 1 1 0; font-size: 0.82rem; min-height: 0; overflow-y: auto; }

      /* Explore: das Panel enthält meist nur einen leeren Event-Kasten →
         ausblenden und stattdessen das Kampflog zeigen. */
      body.in-explore .panel { flex: 0 0 auto; }
      body.in-explore .panel:not(:has(.turn-box)) { display: none; }
      body.in-explore .side { display: block; flex: 1 1 0; min-height: 0; }
      body.in-explore .side .log-panel { height: 100%; min-height: 0; }

      /* Sprite kleiner */
      .room-visual {
        bottom: 14%;
        transform: translateX(-50%) scale(0.72);
      }

      /* Menu-Tabs kompakter */
      .menu-tabs { gap: 2px; padding: 2px; }
      .menu-tab  { font-size: 0.74rem; padding: 4px 6px; }

      /* ── Kampf-Layout ── */
      .active-combatant  { display: none; }
      .combat-patient    { display: none; }
      .combat-patient-panel { display: none; }

      /* Zugfolge: minimale Avatar-Reihe ganz oben (Namen/HP raus — Platz;
         aktiver Zug bleibt hervorgehoben). Gegner-HUD rückt darunter. */
      .scene.combat .initiative-strip.show {
        display: flex;
        top: 3px;
        left: 4px;
        right: 4px;
        gap: 4px;
        max-width: none;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 3px 5px;
        pointer-events: auto;
        z-index: 13;
      }
      .scene.combat .initiative-strip.show .initiative-label {
        align-self: center;
        flex-shrink: 0;
        font-size: 0.56rem;
      }
      .scene.combat .initiative-strip.show .initiative-entry {
        flex-shrink: 0;
        height: 46px;
        min-width: 0;
        padding: 0;
        width: 46px;
        border-width: 2.5px;
      }
      .scene.combat .initiative-strip.show .initiative-entry.is-preview {
        width: 34px;
        height: 34px;
        border-width: 2px;
      }
      /* Gegner-HUD unter die Zugfolge schieben (spezifisch genug, um die
         `top:8px`-Regel weiter unten zu überstimmen) */
      body.in-combat .scene.combat .poke-hud-enemy { top: 54px; }

      /* ── Pokémon-HUD: standardmäßig versteckt ── */
      .poke-hud-enemy,
      .poke-hud-player { display: none; }

      /* ── HP-HUD im Kampfmodus (Comic-Look) ── */
      .scene.combat .poke-hud-enemy,
      .scene.combat .poke-hud-player {
        background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
        border: 2.5px solid var(--cs-ink);
        border-radius: 10px;
        box-shadow: 3px 3px 0 var(--cs-ink);
        color: var(--cs-ink);
        display: block;
        padding: 7px 10px 6px;
        position: absolute;
        width: 46%;
        z-index: 12;
      }
      .scene.combat .poke-hud-enemy { right: 8px; top: 8px; }
      .scene.combat .poke-hud-player { bottom: 8px; left: 8px; }
      .poke-hud-name {
        color: var(--cs-ink);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        line-height: 1.2;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .poke-hud-label {
        color: rgba(36, 28, 26, 0.6);
        font-size: 0.62rem;
        font-weight: 700;
        margin-bottom: 3px;
      }
      .poke-hud-track {
        background: rgba(36, 28, 26, 0.18);
        border: 1.5px solid var(--cs-ink);
        border-radius: 5px;
        height: 8px;
        overflow: hidden;
        width: 100%;
      }
      .poke-hud-fill {
        border-radius: 4px;
        height: 100%;
        transition: width 0.4s ease;
      }
      .poke-hud-fill.enemy  { background: linear-gradient(90deg, #ef4444, #f87171); }
      .poke-hud-fill.player { background: linear-gradient(90deg, #22c55e, #4ade80); }
      .poke-hud-fill.player.mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
      .poke-hud-fill.player.low { background: linear-gradient(90deg, #ef4444, #f87171); }
      .poke-hud-fill.sp-fill { background: linear-gradient(90deg, var(--cs-cobalt), var(--cs-gold)); }
      .sp-label { color: #9fc3ec; margin-top: 4px; }
      .sp-track { margin-top: 1px; }

      /* Overlay als scrollbare Flex-Spalte unter der Zugfolge-Leiste
         (Selektor bewusst spezifisch genug, um `body.in-combat .combat-overlay`
         zu schlagen). Gegner oben, Aktionen Mitte, Party unten — siehe
         @media (max-width: 980px). */
      body.in-combat .scene.combat .combat-overlay,
      .combat-overlay {
        bottom: 6px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        left: 6px;
        overflow-y: auto;
        overscroll-behavior: contain;
        right: 6px;
        top: 60px;              /* unter der Zugfolge-Leiste */
        gap: 8px;
      }

      .combat-choice-panel {
        display: flex;
        flex: 0 1 auto;
        max-height: 100%;
        flex-direction: column;
        gap: 5px;
        max-width: none;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 12px 14px;
      }

      .combat-choice-panel h3 { font-size: 0.82rem; margin: 0; }
      .combat-choice-panel p  { font-size: 0.78rem; margin: 0; }
      .combat-question        { font-size: 0.82rem; padding: 6px 8px; }
      .combat-options         { gap: 6px; }

      .option {
        font-size: 0.8rem;
        min-height: 40px;
        padding: 6px 10px;
      }

      .scene-next {
        flex-shrink: 0;
        font-size: 0.8rem;
        margin-top: 4px;
        min-height: 38px;
        padding: 6px 10px;
      }

      /* ── Karten-Buttonliste ── */
      .map-list {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 4px 2px;
      }
      .map-list-btn {
        align-items: center;
        background: rgba(30, 41, 59, 0.7);
        border: 1px solid rgba(226, 232, 240, 0.15);
        border-radius: 8px;
        color: var(--ink);
        cursor: pointer;
        display: flex;
        gap: 10px;
        padding: 8px 10px;
        text-align: left;
        width: 100%;
      }
      .map-list-btn.map-list-current {
        background: rgba(74, 222, 128, 0.12);
        border-color: rgba(74, 222, 128, 0.4);
      }
      .map-list-btn.map-list-cleared { opacity: 0.55; }
      .map-list-icon  { flex-shrink: 0; font-size: 1.1rem; width: 1.4rem; text-align: center; }
      .map-list-label { flex: 1; font-size: 0.82rem; line-height: 1.3; }
      .map-list-label small { display: block; color: var(--muted); font-size: 0.7rem; }
      .map-list-status { color: var(--muted); flex-shrink: 0; font-size: 0.8rem; }
      .map-list-btn.map-list-current .map-list-status { color: #4ade80; font-weight: 700; }

      /* ── Glücksrad: fullscreen ── */
      .loot-box.grand {
        border-radius: 0;
        display: flex;
        flex-direction: column;
        inset: 0;
        left: 0;
        max-height: 100dvh;
        max-width: 100vw;
        overflow-y: auto;
        padding: 16px;
        top: 0;
        transform: scale(0.96);
        width: 100%;
      }
      .loot-box.grand.show   { transform: scale(1); }
      .loot-box.grand strong { font-size: 1.4rem; margin-bottom: 6px; }
      .loot-wheel-wrap       { margin: 10px auto; gap: 8px; }
      .loot-wheel            { height: 150px; width: 150px; }
      .loot-wheel-pointer    { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 22px solid #f8fafc; }
      .loot-odds             { font-size: 0.72rem; gap: 5px; }
      .loot-box.grand .loot-list { margin: 8px 0; }

      /* ── Schatztruhe / Meilenstein: Platten füllen den Screen im Hochformat.
         Das Abschluss-/Game-Over-Fenster (.recap-card) NICHT — das braucht
         internes Scrollen (viele Lauf-Statistiken + Bestenliste + Namensfeld),
         sonst sind „Zurück zur Karte" / „Nochmal" nicht erreichbar. */
      .result-modal:not(:has(.recap-card)) { align-items: stretch; padding: 0; }
      .result-card:not(.recap-card) {
        border-radius: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: none;
        max-width: 100vw;
        overflow: hidden;
        padding: 0;
        width: 100%;
      }
      .result-card:not(.recap-card) h2,
      .result-card:not(.recap-card) > p { display: none; }
      .result-card.milestone-card h2 {
        display: block; background: #1c120c; color: #fdf3e1;
        font-size: 1.1rem; margin: 0; padding: 12px 16px 2px; text-align: center;
      }
      .result-card.milestone-card > p {
        display: block; background: #1c120c; color: rgba(253,243,225,0.8);
        font-size: 0.8rem; margin: 0; padding: 0 16px 10px; text-align: center;
      }
      .treasure-chest-wrap { display: none; }
      .treasure-choice {
        animation: treasureRainbow 4s ease infinite;
        background: linear-gradient(270deg,#ff6b6b,#ffd93d,#6bcb77,#4dabf7,#cc6bff,#ff6b6b);
        background-size: 400% 400%;
        flex: 1 1 0;
        gap: 6px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        min-height: 0;
        overflow: hidden;
        padding: 6px;
      }
      .treasure-board {
        border-width: 0;
        min-height: 0;
        overflow-y: auto;
        padding: 14px 16px;
      }
      .treasure-board:nth-child(1) {
        background: linear-gradient(135deg, #1a1040 0%, #2d1b6e 60%, #3d0f5a 100%);
        border-left: 4px solid #cc6bff;
      }
      .treasure-board:nth-child(2) {
        background: linear-gradient(135deg, #0a2540 0%, #0e4d6e 60%, #0a3d5a 100%);
        border-left: 4px solid #4dabf7;
      }
      .treasure-board:nth-child(3) {
        background: linear-gradient(135deg, #0a2e1a 0%, #0f5c35 60%, #0a3d28 100%);
        border-left: 4px solid #6bcb77;
      }
      .treasure-board:nth-child(1) strong { color: #cc6bff; }
      .treasure-board:nth-child(2) strong { color: #4dabf7; }
      .treasure-board:nth-child(3) strong { color: #6bcb77; }
      .treasure-board strong { font-size: 1.1rem; }
      /* Die farbigen Tafel-Hintergründe sind dunkel — Beschreibungstext und
         Belohnungsliste müssen hell sein, sonst dunkel-auf-dunkel (unlesbar).
         Gleiche Behandlung wie im Desktop-Reveal weiter oben. */
      .treasure-board span,
      .treasure-board li { color: rgba(255,255,255,0.82); }
      .treasure-board:active { filter: brightness(1.2); transform: scale(0.98); }
      /* Meilenstein-Master: nur ein Balken — volle Höhe statt 1/3 */
      .milestone-choice { grid-template-rows: repeat(3, 1fr); }
      .milestone-board:only-child { grid-row: 1 / -1; }
    }

    /* ── Mobile: Treppen-Boost + Stationstelefon ──────────────────────────── */
    @media (orientation: portrait) and (max-width: 600px) {

      /* Treppen-Boost */
      .stairs-boost-overlay {
        align-items: flex-end;
        padding: 0;
      }
      .stairs-boost-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top: 2px solid var(--gold);
        max-height: 92dvh;
        overflow-y: auto;
        padding: 18px 14px 20px;
        width: 100%;
      }
      .stairs-boost-title { font-size: 1.1rem; }
      .stairs-boost-sub   { font-size: 0.78rem; margin-bottom: 14px; }
      .stairs-boost-options {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .stairs-boost-btn {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
      }
      .stairs-boost-btn .boost-icon { font-size: 1.4rem; flex-shrink: 0; }
      .stairs-boost-btn .boost-label { font-size: 0.88rem; }
      .stairs-boost-btn .boost-desc  { font-size: 0.74rem; }

      /* Stationstelefon */
      .telefon-overlay {
        align-items: flex-end;
        padding: 0;
      }
      .telefon-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top: 3px solid var(--cs-ink);
        max-height: 92dvh;
        overflow-y: auto;
        padding: 18px 14px 20px;
        width: 100%;
      }
      .telefon-title { font-size: 1rem; margin-bottom: 12px; }
      .telefon-phone  { font-size: 3.2rem; }
      .telefon-ring-dots { font-size: 1.4rem; }
      .telefon-option-btn { padding: 9px 12px; }
      .telefon-option-btn strong { font-size: 0.84rem; }
      .telefon-option-btn small   { font-size: 0.73rem; }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       TABLET- & TOUCH-OPTIMIERUNG + KAMPF-VOLLBILD
       Bisher schaltete das Layout nur bei (portrait AND max-width:600px) auf
       die Mobil-UI; alles andere bekam das Desktop-Layout, nur linearisiert.
       Tablets (~800px portrait / ~1280x800 landscape, Touch) fielen damit in
       eine tote Zone. Die folgenden Blöcke schließen sie.
       ═══════════════════════════════════════════════════════════════════════ */

    /* ── Schritt 2: Touch-Politur (geräteunabhängig, nur ohne echten Hover) ──
       Auf Touch „klebt" ein :hover-Zustand bis zum nächsten Tap. Die als
       Feedback genutzten Hover-Transforms auf :active umhängen und kleine
       Trefferflächen auf ≥44px anheben. Maus-Desktop bleibt unberührt. */
    @media (hover: none) {
      .option:hover:not(:disabled),
      .item:hover:not(:disabled),
      .gear:hover:not(:disabled),
      .map-cell:hover:not(:disabled),
      .treasure-board:hover,
      .start-button:hover:not(:disabled),
      .mpb-btn:hover {
        transform: none;
        border-color: var(--line);
        box-shadow: none;
      }
      .option:active:not(:disabled),
      .item:active:not(:disabled),
      .gear:active:not(:disabled),
      .map-cell:active:not(:disabled),
      .start-button:active:not(:disabled) {
        transform: translateY(1px);
        filter: brightness(1.08);
      }
      .treasure-board:active { filter: brightness(1.12); transform: scale(0.99); }

      .pill { min-height: 44px; }
      .menu-tab { min-height: 44px; }
      .combat-back-btn { min-height: 44px !important; }
      .menu-popup-close { min-width: 44px; min-height: 44px; }
      .saved-char-delete-btn,
      .telefon-option-btn,
      .map-list-btn { min-height: 44px; }
    }

    /* ── Schritt 1: Höhenbudget für kurze Viewports ─────────────────────────
       Das Desktop-Layout rechnet mit hohen Monitoren; bei ≤900px Höhe
       (Landscape-Tablet, kleines Notebook) scrollt sonst die ganze Seite und
       die fixe Menü-Bar überlagert Inhalt. App auf Viewport-Höhe fixieren,
       intern scrollen. Greift NICHT im Kampf (dort eigener Vollbild-Block).
       Schwelle 820px: fängt Landscape-Tablets (~800) und 1366×768-Notebooks,
       lässt gängige 900/1080px-Desktops in Ruhe. */
    @media (min-width: 601px) and (max-height: 820px) {
      body:not(.in-combat) .app {
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        margin: 0 auto;
        max-width: 100%;
        overflow: hidden;
        padding: 6px 8px 0;
      }
      body:not(.in-combat) .topbar { margin-bottom: 6px; }
      body:not(.in-combat) .shell {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      body:not(.in-combat) .scene {
        aspect-ratio: auto;
        flex: 0 0 auto;
        height: clamp(220px, 40vh, 420px);
        min-height: 0;
      }
      body:not(.in-combat) .main {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 76px; /* Platz für die fixe Menü-Popup-Bar */
      }
      body:not(.in-combat) .panel,
      body:not(.in-combat) .side .log-panel {
        min-height: 0;
        overflow-y: auto;
      }
    }

    /* ── Schritt 3: Tablet im Hochformat (601–1024px) ──────────────────────
       Eigene Stufe statt der auf Handy-Proportionen getunten ≤600er-Regel:
       Mobil-Shell (Szene oben, Steuerung unten, interne Scrollbereiche),
       aber Team/Log zweispaltig, solange die Breite reicht. */
    @media (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) {
      .topbar { display: none; }
      .app {
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: 100%;
        padding: 0;
      }
      .shell {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
      }
      .scene {
        aspect-ratio: auto;
        flex: 0 0 46vh;
        min-height: 0;
        width: 100%;
      }
      .main {
        display: grid;
        flex: 1 1 0;
        gap: 8px;
        grid-template-columns: 1fr;
        min-height: 0;
        overflow-y: auto;
        padding: 8px 10px 84px;
      }
      /* ab ~760px ist Platz für Panel + Log nebeneinander */
      .side { display: block; }
      .panel { font-size: 0.9rem; }
      .wolf-bar { min-height: 52px; }
      /* Explore: Szene dominiert, leerer Event-Kasten weg, Log als Strip unten. */
      body.in-explore .scene { flex: 1 1 auto; }
      body.in-explore .main {
        flex: 0 0 auto;
        display: block;
        max-height: 26vh;
        padding: 8px 10px 8px;
      }
      body.in-explore .shell { padding-bottom: 94px; }  /* Menü-Bar ist hier ~91px */
      body.in-explore .panel:not(:has(.turn-box)) { display: none; }
      body.in-explore .side { min-height: 0; }
      body.in-explore .side .log-panel { min-height: 0; }
    }
    @media (orientation: portrait) and (min-width: 760px) and (max-width: 1024px) {
      body:not(.in-explore) .main { grid-template-columns: 1fr minmax(240px, 34%); }
    }

    /* ── Schritt 4: Tablet/Notebook im Querformat ──────────────────────────
       Vertikaler Stapel wie im Hochformat (Szene oben, Steuerung darunter,
       volle Breite). Die frühere 2-Spalten-Variante (Szene links / schmale
       Spalte rechts) quetschte die Wolf-Bar auf ~380px zusammen (wurde 116px
       hoch) und überlagerte das D-Pad; außerdem lag der „Kampf starten"-Button
       hinter der fixen Menü-Bar. Der Stapel vermeidet beides. */
    /* Greift bei kurzem Landscape (jedes Gerät ≤820px) ODER auf Touch-Geräten
       im Querformat unabhängig von der Höhe — sonst bekamen Tablets mit 821–
       1024px Höhe (iPad, Samsung-Tablet, Fold) das Desktop-Karten-Layout, das
       den Viewport nicht füllt. */
    @media (orientation: landscape) and (min-width: 601px) and (max-height: 820px),
           (orientation: landscape) and (min-width: 601px) and (hover: none) and (pointer: coarse) {
      body:not(.in-combat) .topbar { display: none; }
      body:not(.in-combat) .app {
        border-width: 0; border-radius: 0; box-shadow: none;
        margin: 0; max-width: 100%; padding: 0;
        height: 100dvh; overflow: hidden;
        display: flex; flex-direction: column;
      }
      body:not(.in-combat) .shell {
        display: flex; flex-direction: column;
        flex: 1 1 auto; min-height: 0; overflow: hidden;
      }
      body:not(.in-combat) .scene {
        aspect-ratio: auto; flex: 0 0 40vh; height: auto; min-height: 0; width: 100%;
      }
      body:not(.in-combat) .wolf-bar { flex: 0 0 auto; }
      body:not(.in-combat) .main {
        display: block; flex: 1 1 0;
        min-height: 0; overflow-y: auto;
        padding: 10px 16px 92px;
      }
      body:not(.in-combat) .side { display: none; }
    }

    /* ── Große Screens (Tablet + Desktop): zentrierte Hochkant-Spalte ──────────
       Care Squad ist ein Hochkant-Spiel. Auf breiten Bildschirmen lief es vorher
       im „Desktop-Karten"-Layout (.app als 1220px-Kasten mit Rand, Szene 16:7) —
       das füllte den Viewport nicht und quetschte das Spiel winzig oben rein.
       Jetzt: schmale Spalte über die volle Höhe, mittig, Seitenhintergrund
       drumherum. (min-height 600 schließt Phone-Querformat aus.) */
    @media (min-width: 813px) and (min-height: 600px) and (orientation: landscape),
           (min-width: 1025px) and (min-height: 600px) {
      body:not(.in-combat):not(.in-quiz) .topbar { display: none; }
      body:not(.in-combat):not(.in-quiz) .app {
        width: min(560px, 100vw);
        max-width: none;
        height: 100dvh;
        margin: 0 auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: 0 0 0 2px var(--cs-ink), 0 14px 60px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      body:not(.in-combat):not(.in-quiz) .shell {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        padding-bottom: 62px;   /* fixe Menü-Bar (~60px) — Inhalt endet darüber */
      }
      body:not(.in-combat):not(.in-quiz) .scene,
      body:not(.in-combat):not(.in-quiz) .scene.topdown-mode {
        aspect-ratio: auto;
        height: auto;
        min-height: 0 !important;   /* schlägt .scene.topdown-mode{min-height:min(96vw,560px)!important} */
        flex: 1 1 auto;             /* Szene = Hauptfläche */
      }
      body:not(.in-combat):not(.in-quiz) .wolf-bar { flex: 0 0 auto; }
      body:not(.in-combat):not(.in-quiz) .main {
        display: block;
        flex: 0 0 auto;
        max-height: 26vh;
        min-height: 0;
        overflow-y: auto;
        padding: 6px 8px 8px;   /* untere Menü-Bar-Freihaltung sitzt auf .shell */
      }
      /* Leerer Event-/Aktions-Kasten weg — nur zeigen wenn es Ereignis-Boxen gibt. */
      body:not(.in-combat):not(.in-quiz) .panel { display: none; }
      body:not(.in-combat):not(.in-quiz) .panel:has(.turn-box) { display: block; }
      body:not(.in-combat):not(.in-quiz) .side { display: block; min-height: 0; }
      body:not(.in-combat):not(.in-quiz) .side .log-panel { min-height: 0; }

      /* Dungeon-Menü-Bar + Popup an die Spaltenbreite koppeln (Weltkarten-Bar
         + Kampf-Vollbild bleiben unberührt). 8 Buttons auf 560px → kompaktere
         Labels. */
      body:not(.in-combat) #menuPopupBar { width: min(560px, 100vw); }
      body:not(.in-combat) #menuPopupBar .mpb-btn { padding: 10px 3px 12px; gap: 3px; }
      body:not(.in-combat) #menuPopupBar .mpb-icon { font-size: 1.4rem; }
      body:not(.in-combat) #menuPopupBar .mpb-label { font-size: 0.56rem; letter-spacing: 0; }
      body:not(.in-combat):not(.in-quiz) .menu-popup-overlay {
        left: 50%;
        right: auto;
        width: min(560px, 100vw);
        transform: translateX(-50%);
      }
    }

    /* ── Dungeon-Erkundung auf Laptop/Desktop: volle Breite ────────────────
       Die 560px-Hochkantspalte oben passt für Menüs/Events, lässt beim
       Flur-Raster aber links und rechts leere Ränder. In der Erkundung füllt
       die Szene daher das ganze Fenster (JS rendert dazu ein breiteres Raster,
       siehe renderDungeonGrid); Log-Streifen und Menü-Bar bleiben lesbar
       zentriert. */
    @media (min-width: 813px) and (min-height: 600px) and (orientation: landscape),
           (min-width: 1025px) and (min-height: 600px) {
      body.in-explore:not(.in-combat):not(.in-quiz) .app {
        width: 100vw;
        box-shadow: none;
      }
      /* Log/Ereignis-Kasten schwebt als Overlay über dem Raster-Rand (dort ist
         ohnehin nur Nebel) statt Höhe von der Szene zu fressen → größere Kacheln. */
      body.in-explore:not(.in-combat):not(.in-quiz) .shell { position: relative; }
      body.in-explore:not(.in-combat):not(.in-quiz) .main {
        position: absolute;
        right: 14px;
        bottom: 74px;
        z-index: 30;
        width: min(380px, 30vw);
        max-height: 30vh;
        padding: 6px;
        border-radius: 12px;
        background: rgba(14, 9, 5, 0.72);
        backdrop-filter: blur(2px);
      }
      /* Kampflog auf breiten Bildschirmen ausblenden (verdeckte die Wolf-Bar); Ereignis-Kasten nur, wenn es einen gibt */
      body.in-explore:not(.in-combat):not(.in-quiz) .side { display: none; }
      body.in-explore:not(.in-combat):not(.in-quiz) .main:not(:has(.turn-box)) { display: none; }
      body.in-explore:not(.in-combat) #menuPopupBar { width: min(720px, 100vw); }
      body.in-explore:not(.in-combat) #menuPopupBar .mpb-label { font-size: 0.66rem; }
    }

    /* ── Kampf-Vollbild (alle Geräte) ─────────────────────────────────────
       Wie ein Pokémon-Kampf: kein Dungeon-Hintergrund, keine Karte, keine
       Erkundungs-Panels — ausschließlich die Kampfbühne. Die Kampf-UI liegt
       vollständig im #combatOverlay (inkl. „Nächster Zug"), daher kann .main
       im Kampf entfallen. */
    body.in-combat .app {
      display: flex;
      flex-direction: column;
      height: 100dvh;
      margin: 0 auto;
      max-width: 100%;
      overflow: hidden;
      padding: 0;
      border-width: 0;
      border-radius: 0;
      box-shadow: none;
    }
    body.in-combat .topbar { display: none; }
    body.in-combat .shell {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    body.in-combat .wolf-bar { flex: 0 0 auto; }
    /* Gilt für die Kampfbühne (.scene.combat) UND die Begegnungs-Vorschau
       (.scene.intro) — beide sollen im Vollbild-Modus die Fläche füllen. */
    body.in-combat .scene {
      aspect-ratio: auto;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
    }
    /* Dungeon-Kulisse + Karte im Kampf ausblenden */
    body.in-combat .scene .wall-left,
    body.in-combat .scene .wall-right,
    body.in-combat .scene .ceiling,
    body.in-combat .scene .floor,
    body.in-combat .scene .door,
    body.in-combat .scene .torch,
    body.in-combat .mini-map {
      display: none !important;
    }
    body.in-combat .main { display: none; }

    /* Zugfolge bleibt sichtbar — als horizontaler Streifen oben in der Bühne;
       das Overlay startet darunter. Kein `display` hier setzen, damit die
       Phone-Portrait-Regel (display:none !important, bewusst wegen Platz und
       weil dort das Poké-HUD den Status zeigt) erhalten bleibt. */
    body.in-combat .initiative-strip.show {
      left: 10px;
      right: 10px;
      top: 6px;
      max-width: none;
      min-height: 0;
      overflow-x: auto;
      overflow-y: hidden;
      z-index: 6;
    }
    /* Overlay füllt die Bühne, lässt oben Platz für die Zugfolge
       (Desktop-Basis war left/right:32px, top:118px) */
    body.in-combat .combat-overlay {
      top: 122px;
      bottom: 12px;
      left: 16px;
      right: 16px;
    }
    /* Menü-Bar bleibt (nur Team/Hilfe), Overlay-Inhalt nicht dahinter klemmen */
    body.in-combat .combat-choice-panel { padding-bottom: 14px; }

    /* Kampf: unten Platz für die fixe Menü-Bar (Team/Hilfe) reservieren, damit
       die Bühne (und damit die Party-Leiste unten im Overlay) nicht dahinter
       klemmt. Gilt jetzt für ALLE Geräte (Wolf-Bar ist raus). */
    body.in-combat .shell { padding-bottom: 60px; }

    @media (orientation: landscape) and (max-height: 820px) {
      body.in-combat .initiative-strip.show { top: 4px; }
      body.in-combat .initiative-strip.show .initiative-entry { width: 50px; height: 50px; min-width: 0; }
      body.in-combat .initiative-strip.show .initiative-entry.is-preview { width: 38px; height: 38px; }
      body.in-combat .combat-overlay { top: 96px; bottom: 8px; left: 10px; right: 10px; }
    }
    /* Einspaltig, sobald das 3-Spalten-Raster (174 + 420 + 310 + Gaps ≈ 960px)
       nicht mehr in die Bühne passt — sonst wurde das Gegner-HUD rechts
       abgeschnitten (toter Bereich ~820–960px). */
    @media (max-width: 980px) {
      body.in-combat .combat-overlay { grid-template-columns: 1fr; }
      body.in-combat .active-combatant { display: none; }
      /* Overlay direkt unter die Zugfolge-Leiste (die ist hier ~62px hoch) */
      body.in-combat .combat-overlay { top: 66px; bottom: 8px; left: 8px; right: 8px; }

      /* ── Mobiles Kampf-Layout: Gegner oben, Aktionen Mitte, Party unten ──
         (User: „unten die Spielercharaktere, oben die Spalte für die Gegner") */
      body.in-combat .scene.combat .combat-patient-panel {
        order: -1;
        display: grid !important;
        flex: 0 0 auto;
        grid-template-rows: auto;
        min-height: 0;
        padding: 8px 12px;
      }
      body.in-combat .scene.combat .combat-patient { display: none !important; }
      body.in-combat .scene.combat .patient-brief { border: 0; background: none; padding: 0; display: grid; gap: 3px; }
      body.in-combat .scene.combat .patient-brief strong { font-size: 0.82rem; }
      body.in-combat .scene.combat .patient-need-label { font-size: 0.66rem; }
      body.in-combat .scene.combat .combat-choice-panel {
        order: 0;
        flex: 0 1 auto;
        min-height: 0;
      }
      body.in-combat .scene.combat .combat-party-bar {
        order: 1;
        flex: 0 0 auto;
        align-self: stretch;
        gap: 6px;
      }
      /* Hochformat: Party ans untere Ende schieben (Arena-Freiraum darüber).
         Querformat: direkt unter die Aktionen (kein riesiges Loch dazwischen). */
      @media (orientation: portrait) {
        body.in-combat .scene.combat .combat-party-bar { margin-top: auto; }
      }
      body.in-combat .scene.combat .combat-party-bar .cpm {
        padding: 6px 12px 6px 6px;
        gap: 8px;
        flex: 0 1 230px;
      }
      body.in-combat .scene.combat .combat-party-bar .cpm-face { width: 38px; height: 38px; }
      body.in-combat .scene.combat .combat-party-bar .cpm-name { font-size: 0.78rem; }
      /* Zugfolge auf eine kompakte Avatar-Reihe reduzieren (wie im Phone-Layout);
         mit Namen + HP-Balken überlappten die Einträge in diesem Bereich. */
      body.in-combat .initiative-strip.show { gap: 5px; padding: 4px 6px; overflow-x: auto; overflow-y: hidden; }
      body.in-combat .initiative-strip.show .initiative-entry {
        flex-shrink: 0;
        min-width: 0;
        width: 50px;
        height: 50px;
        padding: 0;
      }
      body.in-combat .initiative-strip.show .initiative-entry.is-preview { width: 38px; height: 38px; }
      /* Einspaltig ist das Patienten-Panel voll breit — Patient zentriert
         halten; die Deko-Requisiten (Buch/Becher/…) fielen sonst an den
         rechten Rand bzw. überlappten das Namensschild → im Vollbild raus. */
      body.in-combat .combat-patient {
        justify-self: center;
        width: min(320px, 90%);
      }
      body.in-combat .combat-patient .prop { display: none; }
    }

    /* ── Einspaltiger Kampf (Tablet / Fold / kleines Notebook, 601–980px) ──
       Das Grid gab den zwei auto-Zeilen (Aktions-/Patienten-Panel) je
       Content-Höhe; je nach Viewport gewann mal das Patienten-Panel (Optionen
       kollabiert → unsichtbar), mal streckte `align-content` die Zeilen
       unkontrolliert (nur 1 Option, Rest hinter `overflow:hidden`). Robuster
       Ansatz: das Overlay selbst ist EINE scrollbare Flex-Spalte, jedes Panel
       hat natürliche Höhe, NICHTS wird geclippt. Passt alles → kein Scroll;
       passt es nicht → die ganze Kampf-Spalte scrollt (gekapselt, der Browser
       lädt am Rand nicht neu). ≤600px behält seinen eigenen Block weiter oben. */
    @media (min-width: 601px) and (max-width: 980px) {
      body.in-combat .scene.combat .combat-overlay {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 10px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;   /* sonst lässt sich die Spalte nicht wischen */
        justify-content: flex-start;
      }
      body.in-combat .scene.combat .combat-choice-panel {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
      }
      body.in-combat .scene.combat .combat-choice-panel > .combat-options {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        gap: 6px;
        align-content: start;
      }
      body.in-combat .scene.combat .combat-options .option {
        min-height: 46px;
        padding: 8px 14px;
      }
      body.in-combat .scene.combat .combat-choice-panel > .next,
      body.in-combat .scene.combat .combat-back-btn { flex: 0 0 auto; }
      /* Patienten-Panel schlank: nur die Text-Karte (Name + Fortschritt), kein
         Deko-Avatar (analog Phone-Hochformat, wo das ganze Panel ausgeblendet
         ist). Die Aktionsliste hat Vorrang. */
      body.in-combat .scene.combat .combat-patient-panel {
        flex: 0 0 auto;
        min-height: 0;
        grid-template-rows: auto;
        overflow: visible;
      }
      body.in-combat .scene.combat .combat-patient { animation: none; }
      body.in-combat .scene.combat .combat-patient .patient-pixel,
      body.in-combat .scene.combat .combat-patient .prop { display: none; }
    }

    /* ── Querformat (Phone/Tablet quer): Buttons kompakter ──────────────────
       (User: „im Landscape sind die Buttons unten im Kampf UND im Dungeon-Run
       so groß, dass sie das Spielfenster einschränken und im Kampf für
       unnötiges Scrollen sorgen".) Greift nur bei flachem Viewport, nicht auf
       hohen Desktop-Monitoren im Querformat. */
    @media (orientation: landscape) and (max-height: 860px) {
      /* Fixe Menü-Bar unten (Dungeon-Run + Kampf) flacher */
      .menu-popup-bar .mpb-btn { padding: 5px 4px 6px; gap: 2px; }
      .menu-popup-bar .mpb-icon { font-size: 1.15rem; }
      .menu-popup-bar .mpb-label { font-size: 0.54rem; }
      body.in-combat .mpb-btn[data-menu-popup="team"],
      body.in-combat .mpb-btn.mpb-btn-help { padding: 5px 0; font-size: 0.8rem; }
      body.in-combat .mpb-btn[data-menu-popup="team"] .mpb-icon,
      body.in-combat .mpb-btn.mpb-btn-help .mpb-icon { font-size: 1.1rem; }
      body.in-combat .shell { padding-bottom: 46px; }

      /* Kampf-Optionen kompakter → passen ohne Scrollen */
      body.in-combat .scene.combat .combat-options .option {
        min-height: 34px;
        padding: 5px 12px;
        font-size: 0.88rem;
      }
      body.in-combat .scene.combat .combat-options { gap: 5px; }
      body.in-combat .scene.combat .combat-choice-panel { padding: 10px 12px; }
      body.in-combat .scene.combat .combat-choice-panel h3 { font-size: 0.9rem; }
      body.in-combat .scene.combat .combat-choice-panel p { font-size: 0.8rem; }
      body.in-combat .scene.combat .combat-party-bar .cpm { padding: 6px 14px 6px 6px; gap: 9px; flex: 0 1 250px; }
      body.in-combat .scene.combat .combat-party-bar .cpm-face { width: 42px; height: 42px; }
      body.in-combat .scene.combat .combat-party-bar .cpm-name { font-size: 0.8rem; }
    }

    /* Sehr flaches Querformat (Phone quer, ≤520px hoch): maximal kompakt, damit
       Gegner + Aktionen + Party ohne Scrollen in die Bühne passen. */
    @media (orientation: landscape) and (max-height: 520px) {
      body.in-combat .scene.combat .initiative-strip.show { top: 3px; padding: 3px 5px; }
      body.in-combat .scene.combat .initiative-strip.show .initiative-entry { width: 34px; height: 34px; }
      body.in-combat .scene.combat .initiative-strip.show .initiative-entry.is-preview { width: 26px; height: 26px; }
      body.in-combat .combat-overlay { top: 54px; }
      body.in-combat .scene.combat .combat-overlay { top: 54px; gap: 5px; }
      body.in-combat .scene.combat .combat-patient-panel { padding: 5px 10px; }
      body.in-combat .scene.combat .patient-brief strong { font-size: 0.76rem; }
      body.in-combat .scene.combat .patient-need-label { font-size: 0.6rem; }
      body.in-combat .scene.combat .combat-options .option { min-height: 30px; padding: 3px 10px; font-size: 0.82rem; }
      body.in-combat .scene.combat .combat-choice-panel { padding: 7px 10px; gap: 4px; }
      body.in-combat .scene.combat .combat-choice-panel h3 { font-size: 0.82rem; }
      /* Party: nur Gesicht + Balken, Text weg (Detail steht im Team-Menü) */
      body.in-combat .scene.combat .combat-party-bar { gap: 4px; }
      body.in-combat .scene.combat .combat-party-bar .cpm {
        flex: 0 1 auto; gap: 5px; padding: 2px 6px 2px 2px;
      }
      body.in-combat .scene.combat .combat-party-bar .cpm-face { width: 22px; height: 22px; }
      body.in-combat .scene.combat .combat-party-bar .cpm-leg-badge.leg-ico { width: 8px; height: 8px; font-size: 8px; }
      body.in-combat .scene.combat .combat-party-bar .cpm-name { font-size: 0.6rem; }
      body.in-combat .scene.combat .combat-party-bar .cpm-num { display: none; }
      body.in-combat .scene.combat .combat-party-bar .cpm-buff { font-size: 0.6rem; padding: 0 3px; }
      body.in-combat .scene.combat .combat-party-bar .cpm-info { gap: 2px; }
    }

    /* ── Quiz-Vollbild ────────────────────────────────────────────────────────
       Wissensfragen (Flur-Quiz-NPC) füllen den Bildschirm wie ein Kampf — sonst
       quetschte das kurze Szenen-Fenster (~46vh) die lange Frage weg. */
    body.in-quiz .app {
      display: flex; flex-direction: column;
      height: 100dvh; margin: 0 auto; max-width: 100%;
      overflow: hidden; padding: 0;
      border-width: 0; border-radius: 0; box-shadow: none;
    }
    body.in-quiz .topbar { display: none; }
    body.in-quiz .shell {
      display: flex; flex-direction: column;
      flex: 1 1 auto; min-height: 0; overflow: hidden;
    }
    body.in-quiz .wolf-bar { flex: 0 0 auto; }
    body.in-quiz .scene {
      aspect-ratio: auto; flex: 1 1 auto; min-height: 0; height: auto;
    }
    body.in-quiz .scene .wall-left,
    body.in-quiz .scene .wall-right,
    body.in-quiz .scene .ceiling,
    body.in-quiz .scene .floor,
    body.in-quiz .scene .door,
    body.in-quiz .scene .torch,
    body.in-quiz .mini-map { display: none !important; }
    body.in-quiz .main { display: none; }
    body.in-quiz .scene.quiz-scene .combat-overlay {
      left: 16px; right: 16px; top: 50%; bottom: auto;
      transform: translateY(-50%);
      max-width: 780px; margin: 0 auto;
    }
    /* Panel als Flex-Spalte: Kicker + Frage + Actions fest, Antworten füllen
       nur so viel wie da ist und scrollen bei Bedarf (statt Frage zu clippen). */
    body.in-quiz .quiz-panel {
      display: flex;
      flex-direction: column;
      max-height: calc(100dvh - 40px);
    }
    body.in-quiz .quiz-panel > .quiz-kicker,
    body.in-quiz .quiz-panel > .quiz-question,
    body.in-quiz .quiz-panel > .actions { flex: 0 0 auto; }
    body.in-quiz .quiz-panel > .quiz-options {
      flex: 0 1 auto;
      min-height: 0;
      overflow-y: auto;
    }
    body.in-quiz .quiz-panel .option {
      align-items: center;
      display: flex;
      min-height: 62px;
    }
    body.in-quiz .quiz-question { overflow: visible; }

    /* ── Sieg-Lauf-Animation (Worldmap) ─────────────────────────────────────── */
    .victory-walk-overlay {
      inset: 0;
      pointer-events: none;
      position: fixed;
      z-index: 900;
    }

    .victory-walk-sprite {
      position: absolute;
      transform-origin: bottom center;
      animation: victoryBob 0.42s ease-in-out infinite alternate;
    }
    .victory-walk-sprite .pixel-avatar {
      position: relative;
      width: 40px;
      height: 40px;
    }
    .victory-walk-sprite .pixel-avatar img {
      position: absolute;
      inset: 0;
      width: 100%;
      image-rendering: pixelated;
    }
    @keyframes victoryBob {
      0%   { transform: translateY(0)   scaleX(var(--sx, 1)); }
      100% { transform: translateY(-7px) scaleX(var(--sx, 1)); }
    }
    .victory-walk-companion {
      animation-delay: 0.12s;
      opacity: 0.9;
    }
    .victory-walk-companion .pixel-avatar {
      transform: scale(0.82);
      transform-origin: bottom center;
    }
    .victory-walk-sprite.victory-cheer {
      animation: victoryCheer 0.35s ease-out 3 alternate;
    }
    @keyframes victoryCheer {
      0%   { transform: translateY(0)    scale(1);    }
      50%  { transform: translateY(-16px) scale(1.15); }
      100% { transform: translateY(0)    scale(1);    }
    }

    .victory-sparkle {
      position: absolute;
      font-size: 1.2rem;
      pointer-events: none;
      animation: sparklePop 0.85s ease-out forwards;
    }
    @keyframes sparklePop {
      0%   { opacity: 1; transform: scale(0.4) translateY(0); }
      60%  { opacity: 1; transform: scale(1.3) translateY(-18px); }
      100% { opacity: 0; transform: scale(0.8) translateY(-28px); }
    }

    /* Neue-Dungeon-Zelle Enthüllungs-Glow */
    .wm-cell-new-reveal {
      animation: newDungeonReveal 2.2s ease-out forwards !important;
    }
    @keyframes newDungeonReveal {
      0%   { box-shadow: 0 0 0 0 rgba(255,220,60,0),  transform: scale(1);   filter: brightness(1);   }
      8%   { box-shadow: 0 0 0 12px rgba(255,220,60,0.9), transform: scale(1.22); filter: brightness(2.2); }
      20%  { box-shadow: 0 0 32px 8px rgba(255,200,30,0.7), transform: scale(1.12); filter: brightness(1.6); }
      55%  { box-shadow: 0 0 18px 4px rgba(255,180,20,0.4), transform: scale(1.05); filter: brightness(1.2); }
      100% { box-shadow: 0 0 0 0 rgba(255,220,60,0),  transform: scale(1);   filter: brightness(1);   }
    }

    /* Burst-Partikel bei Dungeon-Enthüllung */
    .reveal-burst {
      position: absolute;
      font-size: 1.3rem;
      pointer-events: none;
      opacity: 0;
      animation: burstFly 0.9s ease-out forwards;
    }
    @keyframes burstFly {
      0%   { opacity: 1; transform: translate(0, 0)                   scale(0.5); }
      55%  { opacity: 1; transform: translate(var(--bx), var(--by))    scale(1.4); }
      100% { opacity: 0; transform: translate(var(--bx), var(--by))    scale(0.9); }
    }

    /* Glanz-Ring */
    .reveal-ring {
      position: absolute;
      width:  110px;
      height: 110px;
      border-radius: 50%;
      border: 3px solid rgba(255, 220, 60, 0.9);
      pointer-events: none;
      animation: ringExpand 0.8s ease-out forwards;
    }
    @keyframes ringExpand {
      0%   { opacity: 0.9; transform: scale(0.3); }
      60%  { opacity: 0.6; transform: scale(1.1); }
      100% { opacity: 0;   transform: scale(1.6); }
    }

    /* ── Input-Dude Dialogoverlay ────────────────────────────────────────────── */
    .input-dude-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3000;
      padding: 16px;
      animation: fadeIn 0.2s ease;
    }
    .input-dude-box {
      background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 14px;
      max-width: 480px;
      width: 100%;
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
      display: flex;
      gap: 16px;
      padding: 20px;
      box-shadow: 5px 5px 0 var(--cs-ink), 0 14px 30px rgba(2, 6, 23, 0.4);
    }
    /* Kurze Querformat-Viewports: NPC-Spalte über die Sprechblase stapeln, damit
       der „Auf Wiedersehen"-Knopf nicht unter den Rand rutscht (sonst Sackgasse
       — Overlay liegt auf z-3000 über allem). */
    @media (orientation: landscape) and (max-height: 520px) {
      .input-dude-box { flex-direction: column; gap: 10px; padding: 14px; }
      .input-dude-npc { flex-direction: row; min-width: 0; gap: 8px; }
      .input-dude-name { margin-top: 0; align-self: center; }
    }
    .input-dude-npc {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 64px;
    }
    .input-dude-book {
      font-size: 1.6rem;
      line-height: 1;
      animation: idBookBob 1.8s ease-in-out infinite;
    }
    @keyframes idBookBob {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    .input-dude-avatar {
      font-size: 2.4rem;
      line-height: 1;
    }
    .input-dude-name {
      font-size: 0.65rem;
      color: var(--cs-crimson);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 2px;
    }
    .input-dude-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .input-dude-bubble {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink);
      padding: 12px 14px;
      font-size: 0.82rem;
      color: var(--cs-ink);
      font-weight: 600;
      line-height: 1.5;
      min-height: 60px;
      position: relative;
    }
    .input-dude-bubble::before {
      content: "";
      position: absolute;
      left: -12px;
      top: 16px;
      border: 7px solid transparent;
      border-right-color: var(--cs-ink);
    }
    .input-dude-questions {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .input-dude-btn {
      background: #fffdf6;
      border: 2.5px solid var(--cs-ink);
      border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink);
      color: var(--cs-ink);
      font-size: 0.78rem;
      font-weight: 700;
      padding: 8px 12px;
      cursor: pointer;
      text-align: left;
      transition: transform 0.12s, box-shadow 0.12s;
    }
    .input-dude-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0 var(--cs-ink);
    }
    .input-dude-bye {
      opacity: 0.7;
      margin-top: 4px;
    }
    .input-dude-bye:hover { opacity: 1; }

    /* ── Game-Over Rausschmiss-Animation (Worldmap) ─────────────────────────── */
    .gameover-eject-overlay {
      inset: 0;
      pointer-events: none;
      position: fixed;
      z-index: 900;
    }

    .gameover-eject-sprite {
      position: absolute;
      transform-origin: bottom center;
    }
    .gameover-eject-sprite .pixel-avatar {
      position: relative;
      width: 40px;
      height: 40px;
    }
    .gameover-eject-sprite .pixel-avatar img {
      position: absolute;
      inset: 0;
      width: 100%;
      image-rendering: pixelated;
    }

    .gameover-eject-sprite.flying {
      animation: ejectRotate 1.25s linear forwards;
    }
    @keyframes ejectRotate {
      0%   { transform: rotate(0deg)   scale(1.1); }
      100% { transform: rotate(540deg) scale(0.9); }
    }

    .gameover-eject-sprite.bounce-land {
      animation: ejectLand 0.18s ease-out forwards;
    }
    @keyframes ejectLand {
      0%   { transform: scaleX(1.4) scaleY(0.6); }
      60%  { transform: scaleX(0.85) scaleY(1.15); }
      100% { transform: scaleX(1) scaleY(1); }
    }

    .gameover-eject-dust {
      position: absolute;
      pointer-events: none;
    }
    .gameover-eject-dust span {
      position: absolute;
      font-size: 1.5rem;
      opacity: 0;
      bottom: 0;
      left: 0;
    }
    .gameover-eject-dust span.pop {
      animation: dustPop 0.65s ease-out forwards;
    }
    @keyframes dustPop {
      0%   { opacity: 1; transform: translate(0, 0)           scale(0.6); }
      50%  { opacity: 0.8; }
      100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3); }
    }

    .gameover-eject-star {
      position: absolute;
      font-size: 1.1rem;
      opacity: 0;
      pointer-events: none;
    }
    .gameover-eject-star.pop {
      animation: starPop 0.9s ease-out forwards;
    }
    @keyframes starPop {
      0%   { opacity: 1; transform: translate(0,0) scale(0.5); }
      55%  { opacity: 1; transform: translate(var(--sx),var(--sy)) scale(1.3); }
      100% { opacity: 0; transform: translate(var(--sx),var(--sy)) scale(0.9); }
    }

    /* ── Abstieg-Überleitung ─────────────────────────────────────────────────── */
    .descend-overlay {
      align-items: center;
      background: #000;
      display: flex;
      flex-direction: column;
      inset: 0;
      justify-content: flex-end;
      overflow: hidden;
      pointer-events: none;
      position: fixed;
      z-index: 1200;
    }

    /* Tiefenperspektive: Korridorwände nach oben zusammenlaufend */
    .descend-tunnel {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .descend-tunnel::before,
    .descend-tunnel::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 0;
      height: 0;
    }
    /* Linke Wand */
    .descend-tunnel::before {
      border-bottom: 100vh solid #1a1a2e;
      border-right: 42vw solid transparent;
      left: 0;
    }
    /* Rechte Wand */
    .descend-tunnel::after {
      border-bottom: 100vh solid #1a1a2e;
      border-left: 42vw solid transparent;
      right: 0;
    }

    /* Treppenstufen: horizontal Linien die zur Mitte konvergieren */
    .descend-steps {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .descend-step {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.07);
      height: 2px;
    }

    /* Nebelschleier aus dem Abgrund */
    .descend-fog {
      animation: descendFog 2.8s ease-in forwards;
      background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(0,0,0,0.95) 70%);
      inset: 0;
      pointer-events: none;
      position: absolute;
    }
    @keyframes descendFog {
      0%   { opacity: 0; }
      40%  { opacity: 0.3; }
      100% { opacity: 1; }
    }

    /* Spieler läuft in die Tiefe: startet unten, geht nach oben-mittig, schrumpft */
    .descend-player {
      animation: descendWalk 2.8s ease-in forwards;
      bottom: 12%;
      left: 50%;
      position: absolute;
      transform-origin: bottom center;
      z-index: 2;
    }
    .descend-player .pixel-avatar {
      transform: scale(1.8);
      transform-origin: bottom center;
    }
    @keyframes descendWalk {
      0%   { opacity: 1; transform: translateX(-50%) scale(1)    translateY(0); }
      15%  { opacity: 1; transform: translateX(-50%) scale(0.85) translateY(-8%); }
      40%  { opacity: 1; transform: translateX(-50%) scale(0.55) translateY(-28%); }
      70%  { opacity: 0.6; transform: translateX(-50%) scale(0.28) translateY(-54%); }
      88%  { opacity: 0.1; transform: translateX(-50%) scale(0.12) translateY(-70%); }
      100% { opacity: 0;   transform: translateX(-50%) scale(0.06) translateY(-78%); }
    }
    /* Schwebende Beine-Animation während des Gehens */
    .descend-player .pixel-avatar {
      animation: descendStep 0.38s steps(2, end) infinite;
    }
    @keyframes descendStep {
      0%   { transform: scale(1.8) translateY(0)   scaleX(1); }
      50%  { transform: scale(1.8) translateY(3px)  scaleX(1.06); }
      100% { transform: scale(1.8) translateY(0)   scaleX(1); }
    }

    /* Ebenentext */
    .descend-label {
      animation: descendLabel 2.8s ease-out forwards;
      color: rgba(255,255,255,0.0);
      font-size: clamp(1.2rem, 4vw, 2rem);
      font-weight: 700;
      letter-spacing: 0.15em;
      position: absolute;
      text-align: center;
      text-transform: uppercase;
      top: 18%;
      width: 100%;
      z-index: 3;
    }
    @keyframes descendLabel {
      0%,30% { color: rgba(255,255,255,0);   text-shadow: none; }
      55%    { color: rgba(255,255,255,0.9);  text-shadow: 0 0 30px rgba(244,185,66,0.8); }
      80%    { color: rgba(255,255,255,0.7);  text-shadow: 0 0 20px rgba(244,185,66,0.4); }
      100%   { color: rgba(255,255,255,0);   text-shadow: none; }
    }

    /* Gesamtoverlay: Einblende + Ausblende */
    .descend-overlay {
      animation: descendOverlay 2.8s ease-out forwards;
    }
    @keyframes descendOverlay {
      0%   { opacity: 0; }
      12%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { opacity: 0; }
    }

    /* ── Intro Overlay ───────────────────────────────────────────────────────── */
    #introOverlay {
      align-items: center;
      background: linear-gradient(180deg, #0d1a2e 0%, #14223a 60%, #0a1628 100%);
      display: flex;
      inset: 0;
      justify-content: center;
      pointer-events: all;
      position: fixed;
      transition: opacity 0.9s ease;
      z-index: 9999;
    }
    #introOverlay.intro-fade-out {
      opacity: 0;
      pointer-events: none;
    }
    #introOverlay.intro-gone {
      display: none;
    }
    .intro-content {
      position: relative;
      text-align: center;
      z-index: 2;
    }
    .intro-title {
      animation: introFadeUp 2s ease 0.3s both;
      color: #f4d37c;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.8rem, 8vw, 6rem);
      font-weight: 900;
      line-height: 0.92;
      text-shadow:
        0 2px 0 #4b2e12,
        0 5px 0 #111827,
        0 0 40px rgba(244, 185, 66, 0.65);
    }
    .intro-sub {
      animation: introFadeUp 1.6s ease 1.8s both;
      color: #e2e8f0;
      font-size: 1.15rem;
      margin-top: 20px;
    }
    .intro-hint {
      animation: introPulse 2.2s ease 3s infinite both;
      color: rgba(244, 185, 66, 0.55);
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      margin-top: 40px;
      text-transform: uppercase;
    }
    @keyframes introFadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes introPulse {
      0%, 100% { opacity: 0.35; }
      50%       { opacity: 1; }
    }
    .intro-lflash {
      background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.9), transparent 32%),
        linear-gradient(180deg, rgba(147, 197, 253, 0.55), rgba(255, 255, 255, 0.12));
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }
    .intro-lbolt {
      background: linear-gradient(180deg, #ffffff, #fde68a 45%, rgba(96, 165, 250, 0.82));
      clip-path: polygon(46% 0, 62% 0, 53% 34%, 70% 34%, 38% 100%, 46% 48%, 31% 48%);
      filter: drop-shadow(0 0 16px rgba(255,255,255,0.92)) drop-shadow(0 0 34px rgba(96,165,250,0.72));
      height: 260px;
      left: 55%;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 20px;
      transform: translateX(-50%) rotate(5deg);
      width: 100px;
      z-index: 3;
    }
    #introOverlay.intro-flash .intro-lflash {
      animation: lightningFlash 900ms ease-out;
    }
    #introOverlay.intro-flash .intro-lbolt {
      animation: lightningBolt 900ms ease-out;
    }

    /* ── Combo Burst Starburst Popup ── */
    body.in-combat .scene { overflow: visible; }

    .combo-burst-pop {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translateX(-50%) scale(0);
      pointer-events: none;
      z-index: 9998;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      opacity: 0;
    }
    .combo-burst-pop.show {
      animation: comboBurstAnim 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .combo-burst-star {
      position: absolute;
      inset: -18px;
      background: conic-gradient(
        from 0deg,
        transparent 0deg 18deg, gold 18deg 26deg,
        transparent 26deg 54deg, gold 54deg 62deg,
        transparent 62deg 90deg, gold 90deg 98deg,
        transparent 98deg 126deg, gold 126deg 134deg,
        transparent 134deg 162deg, gold 162deg 170deg,
        transparent 170deg 198deg, gold 198deg 206deg,
        transparent 206deg 234deg, gold 234deg 242deg,
        transparent 242deg 270deg, gold 270deg 278deg,
        transparent 278deg 306deg, gold 306deg 314deg,
        transparent 314deg 342deg, gold 342deg 350deg,
        transparent 350deg 360deg
      );
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      opacity: 0.85;
      border-radius: 2px;
      animation: comboBurstSpin 1.4s ease-out forwards;
    }
    .combo-burst-inner {
      position: relative;
      background: radial-gradient(circle, #fff8 0%, #ffcc0088 60%, transparent 100%);
      border-radius: 50%;
      width: 90px;
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
    }
    .combo-burst-mult {
      font-size: 1.7rem;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 0 18px #ffcc00, 0 2px 6px rgba(0,0,0,0.8);
      line-height: 1;
    }
    .combo-burst-label {
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #ffe680;
      text-shadow: 0 1px 4px rgba(0,0,0,0.9);
      margin-top: 1px;
    }
    .combo-burst-pop.is-supercrit .combo-burst-inner {
      background: radial-gradient(circle, #fff8 0%, #ff440088 60%, transparent 100%);
    }
    .combo-burst-pop.is-supercrit .combo-burst-mult { text-shadow: 0 0 18px #ff6600, 0 2px 6px rgba(0,0,0,0.8); }
    .combo-burst-pop.is-supercrit .combo-burst-label { color: #ffb380; }
    .combo-burst-pop.is-supercrit .combo-burst-star  { filter: hue-rotate(200deg); }

    @keyframes comboBurstAnim {
      0%   { opacity: 0; transform: translateX(-50%) scale(0.3);   }
      18%  { opacity: 1; transform: translateX(-50%) scale(1.25);  }
      30%  { opacity: 1; transform: translateX(-50%) scale(1.0);   }
      70%  { opacity: 1; transform: translateX(-50%) scale(1.0);   }
      100% { opacity: 0; transform: translateX(-50%) scale(0.85) translateY(-24px); }
    }
    @keyframes comboBurstSpin {
      0%   { transform: rotate(0deg)   scale(1.0); opacity: 0.85; }
      18%  { transform: rotate(12deg)  scale(1.3); opacity: 1; }
      40%  { transform: rotate(-6deg)  scale(1.15); }
      70%  { transform: rotate(4deg)   scale(1.1); opacity: 0.9; }
      100% { transform: rotate(0deg)   scale(0.9); opacity: 0; }
    }

    /* ── Floating damage number ── */
    .progress-hit-pop {
      position: fixed;
      top: 18%;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
      font-size: 1.6rem;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.7);
      opacity: 0;
      z-index: 9999;
      transition: none;
    }
    .progress-hit-pop.show {
      animation: progressHitFloat 1.1s ease-out forwards;
    }
    .progress-hit-pop.crit { color: #facc15; text-shadow: 0 0 12px #facc15, 0 2px 8px rgba(0,0,0,0.7); }
    .progress-hit-pop.supercrit { color: #f87171; text-shadow: 0 0 18px #f87171, 0 2px 8px rgba(0,0,0,0.7); }
    @keyframes progressHitFloat {
      0%   { opacity: 0; transform: translateX(-50%) translateY(0)   scale(0.7); }
      15%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.2); }
      60%  { opacity: 1; transform: translateX(-50%) translateY(-28px) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-55px) scale(0.9); }
    }

    /* ── Combo Rainbow Background ── */
    @keyframes rainbowBg {
      0%   { background-color: hsl(0,   70%, 6%); }
      16%  { background-color: hsl(60,  70%, 6%); }
      33%  { background-color: hsl(120, 70%, 6%); }
      50%  { background-color: hsl(180, 70%, 6%); }
      67%  { background-color: hsl(240, 70%, 6%); }
      83%  { background-color: hsl(300, 70%, 6%); }
      100% { background-color: hsl(360, 70%, 6%); }
    }
    @keyframes rainbowBgUltra {
      0%   { background-color: hsl(0,   90%, 8%); }
      16%  { background-color: hsl(60,  90%, 8%); }
      33%  { background-color: hsl(120, 90%, 8%); }
      50%  { background-color: hsl(180, 90%, 8%); }
      67%  { background-color: hsl(240, 90%, 8%); }
      83%  { background-color: hsl(300, 90%, 8%); }
      100% { background-color: hsl(360, 90%, 8%); }
    }
    body.combo-rainbow .scene.topdown-mode {
      animation: rainbowBg 4s linear infinite;
    }
    body.combo-ultra-rainbow .scene.topdown-mode {
      animation: rainbowBgUltra 1.5s linear infinite;
    }

    /* ── Dungeon Overview Cards ── */
    .dov-card {
      background: var(--surface, #1a1a2e);
      border: 1px solid var(--border, #333);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 12px;
    }
    .dov-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .dov-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
    .dov-name { font-size: 1rem; font-weight: 700; }
    .dov-sub  { font-size: 0.78rem; color: var(--muted, #888); margin-top: 2px; }
    .dov-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
    }
    .dov-tag {
      background: var(--surface2, #222);
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 0.75rem;
    }
    .dov-best {
      font-size: 0.8rem;
      color: var(--muted, #888);
      border-top: 1px solid var(--border, #333);
      padding-top: 8px;
      margin-top: 4px;
    }
    .dov-best strong { color: #facc15; }

/* ── Slot Machine (Glücksmaschine) ──────────────────────────────────────── */
.slot-machine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.slot-reels-stage {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  min-height: 264px;
}
.slot-reel-unit { flex: 0 0 96px; position: relative; }
.slot-reel-window {
  height: 264px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cs-ink);
  border: 3px solid var(--cs-ink);
  box-shadow:
    3px 3px 0 var(--cs-ink),
    inset 0 5px 14px rgba(0,0,0,0.65),
    inset 0 -5px 14px rgba(0,0,0,0.5);
  position: relative;
}
.slot-reel-window::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(8,10,18,0.92) 0%, transparent 26%,
    transparent 74%, rgba(8,10,18,0.92) 100%
  );
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
.slot-reel-window::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom, transparent 0px 3px, rgba(0,0,0,0.07) 3px 4px
  );
  pointer-events: none;
  z-index: 6;
  border-radius: inherit;
}
.slot-reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.slot-reel-cell {
  height: 88px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  user-select: none;
}
.slot-cell-icon  { font-size: 2.1rem; line-height: 1; }
.slot-cell-label {
  font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85;
}
.slot-reel-cell[data-s="items"]     { color: #28c6a2; }
.slot-reel-cell[data-s="gear"]      { color: #5b8def; }
.slot-reel-cell[data-s="attribute"] { color: #f4b942; }
.slot-reel-cell[data-s="medal"]     { color: #c084fc; }
.slot-reel-cell[data-s="jackpot"]   { color: #ef9f6c; }
.slot-reel-cell[data-s="nothing"]   { color: #3a4060; }

/* Niedrige Viewports (Landscape-Handy, kleines Fenster): Walzen kompakter, damit
   der Weiter-Button in der Höhe Platz behält. Fenster bleibt exakt 3 Zellen hoch
   (die Lande-Mathematik misst die Zellhöhe zur Laufzeit). */
@media (max-height: 720px) {
  .slot-reels-stage { min-height: 0; }
  .slot-reel-window { height: 180px; }
  .slot-reel-cell   { height: 60px; }
  .slot-cell-icon   { font-size: 1.5rem; }
}
@media (max-height: 560px) {
  .slot-reel-window { height: 138px; }
  .slot-reel-cell   { height: 46px; }
  .slot-cell-icon   { font-size: 1.15rem; }
  .slot-cell-label  { font-size: 0.5rem; }
}
@keyframes slotFlash {
  0%,100% { background: transparent; }
  40%     { background: rgba(244,185,66,0.13); }
}
.slot-reel-window.slot-flash { animation: slotFlash 0.4s ease; }
@keyframes slotReelIn {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}
.slot-reel-bonus { animation: slotReelIn 0.35s cubic-bezier(0.34,1.4,0.64,1) both; }
.slot-sep {
  color: var(--muted, #555);
  font-size: 1rem; font-weight: 300;
  flex-shrink: 0; opacity: 0;
  transition: opacity 0.3s;
}
.slot-sep.slot-sep-show { opacity: 1; }
.slot-result { min-height: 32px; text-align: center; font-size: 0.84rem; width: 100%; }
.slot-btn-row { display: flex; gap: 8px; width: 100%; }
.slot-stop-btn {
  background: linear-gradient(180deg, #280000, #150000) !important;
  border-color: #7a1f1a !important;
  color: #e0463a !important;
}
@keyframes slotStopPulse {
  0%,100% { box-shadow: 0 0 4px rgba(224,70,58,0.25); }
  50%     { box-shadow: 0 0 16px rgba(224,70,58,0.6); }
}
.slot-stop-ready { animation: slotStopPulse 1.05s ease-in-out infinite; }
@keyframes slotGlueckPop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.8); }
  20%  { opacity: 1; transform: translateY(0) scale(1.1); }
  75%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.9); }
}
.slot-glueck-pop {
  align-self: center;
  margin: 2px 0 6px;
  background: rgba(15,14,28,0.97);
  border: 1px solid rgba(196,132,252,0.55);
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 1rem; font-weight: 800;
  color: #c084fc;
  z-index: 20; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 22px rgba(196,132,252,0.3);
  animation: slotGlueckPop 0.9s ease-in-out forwards;
}

/* ── Slot Machine Rainbow-Effekt ─────────────────────────────────────────── */
@keyframes slotBorderRainbow {
  0%   { box-shadow: 0 0 0 3px #ff6b6b, 0 0 28px rgba(255,107,107,0.45), 0 8px 40px rgba(0,0,0,0.6); }
  17%  { box-shadow: 0 0 0 3px #ffa040, 0 0 28px rgba(255,160,64,0.45),  0 8px 40px rgba(0,0,0,0.6); }
  33%  { box-shadow: 0 0 0 3px #ffe040, 0 0 28px rgba(255,224,64,0.4),   0 8px 40px rgba(0,0,0,0.6); }
  50%  { box-shadow: 0 0 0 3px #22e87a, 0 0 28px rgba(34,232,122,0.45),  0 8px 40px rgba(0,0,0,0.6); }
  67%  { box-shadow: 0 0 0 3px #22c8ff, 0 0 28px rgba(34,200,255,0.45),  0 8px 40px rgba(0,0,0,0.6); }
  83%  { box-shadow: 0 0 0 3px #c084fc, 0 0 28px rgba(192,132,252,0.45), 0 8px 40px rgba(0,0,0,0.6); }
  100% { box-shadow: 0 0 0 3px #ff6b6b, 0 0 28px rgba(255,107,107,0.45), 0 8px 40px rgba(0,0,0,0.6); }
}
@keyframes slotBgShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.loot-box.grand.slot-active {
  animation: slotBorderRainbow 2.2s linear infinite;
}
.slot-reels-stage {
  background: linear-gradient(120deg,
    rgba(255,107,107,0.28),
    rgba(255,200,64,0.24),
    rgba(34,232,122,0.24),
    rgba(34,200,255,0.28),
    rgba(192,132,252,0.28)
  );
  background-size: 300% 300%;
  animation: slotBgShimmer 4s ease-in-out infinite;
  border: 3px solid var(--cs-ink);
  box-shadow: 5px 5px 0 var(--cs-ink);
  border-radius: 14px;
  padding: 14px;
}

/* ── Glücksmaschine großzügig auf Tablet/Desktop ────────────────────────────
   Nur das Slot-Popup (.slot-active — nicht die einfachen Loot-/Confirm-Boxen):
   Vollbild-Overlay, große Walze, viel Luft links & rechts, damit die
   Bonus-Walzen (Glückskind / Glücksstern / Jackpot) nebeneinander Platz haben.
   --slot-win-h steuert Fensterhöhe UND Zellhöhe (Fenster = 3 Zellen; die
   JS-Lande-Mathematik misst die Zellhöhe zur Laufzeit). */
@media (min-width: 601px) and (min-height: 460px) {
  .loot-box.grand.slot-active {
    /* Steuert Fensterhöhe; Zellhöhe = /3, Walzenbreite ≈ ×0.52. */
    --slot-win-h: clamp(190px, 44vh, 520px);
    inset: 0;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    justify-content: safe center;
    gap: clamp(6px, 1.6vh, 16px);
    padding: clamp(16px, 3.5vh, 40px) clamp(20px, 6vw, 80px);
    transform: scale(0.96);
  }
  .loot-box.grand.slot-active.show { transform: scale(1); }

  .loot-box.grand.slot-active .slot-machine {
    flex: 0 1 auto;
    max-width: min(1240px, 100%);
    margin: 0 auto;
    justify-content: center;
    gap: clamp(12px, 2.4vh, 28px);
  }
  .loot-box.grand.slot-active .slot-reels-stage {
    min-height: 0;
    flex-wrap: nowrap;
    gap: clamp(16px, 3.5vw, 52px);
    padding: clamp(16px, 2.4vw, 34px);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* zentriert, solange alle Walzen passen — sonst linksbündig (erste Walze
       bleibt sichtbar), Rest per Scroll erreichbar. */
    justify-content: safe center;
  }
  .loot-box.grand.slot-active .slot-reel-unit   { flex: 0 0 calc(var(--slot-win-h) * 0.52); }
  .loot-box.grand.slot-active .slot-reel-window { height: var(--slot-win-h); }
  .loot-box.grand.slot-active .slot-reel-cell   { height: calc(var(--slot-win-h) / 3); }
  .loot-box.grand.slot-active .slot-cell-icon   { font-size: clamp(2.4rem, calc(var(--slot-win-h) * 0.13), 4.6rem); }
  .loot-box.grand.slot-active .slot-cell-label  { font-size: clamp(0.62rem, calc(var(--slot-win-h) * 0.028), 1rem); }
  .loot-box.grand.slot-active > strong          { font-size: clamp(1.7rem, 4vw, 2.9rem); }
  .loot-box.grand.slot-active > p               { font-size: clamp(0.92rem, 1.6vw, 1.15rem); }
  .loot-box.grand.slot-active .slot-result      { font-size: clamp(0.95rem, 1.6vw, 1.2rem); min-height: 40px; }
  .loot-box.grand.slot-active .loot-chip        { font-size: clamp(0.82rem, 1.3vw, 1rem); padding: 8px 14px; }
  .loot-box.grand.slot-active .slot-glueck-pop  { font-size: clamp(1rem, 2vw, 1.4rem); padding: 10px 26px; }
  .loot-box.grand.slot-active .slot-sep         { font-size: clamp(1.4rem, 3vw, 2.4rem); align-self: center; }
  /* Doppelkampf: mehrere Hauptwalzen nebeneinander — enger, damit sie ohne Scrollen passen */
  .loot-box.grand.slot-active .slot-reels-stage.slot-gang { gap: clamp(4px, 1.2vw, 16px); padding: clamp(8px, 1.4vw, 20px); }
  .loot-box.grand.slot-active .slot-reels-stage.slot-gang .slot-reel-unit { flex-basis: calc(var(--slot-win-h) * 0.4); }
  .loot-box.grand.slot-active .slot-reels-stage.slot-gang .slot-sep { font-size: clamp(1rem, 2vw, 1.6rem); }
  .loot-box.grand.slot-active .slot-btn-row {
    max-width: 460px;
    margin: 4px auto 0;
    justify-content: center;
  }
  .loot-box.grand.slot-active .slot-btn-row .next { min-width: 220px; }
  /* KEINE reelzahl-abhängige --slot-win-h-Änderung: sobald die Jackpot-Bonus-
     Walzen erscheinen, würde das die bereits gelandete Hauptwalze verkleinern
     und ihr sichtbares Symbol vom vergebenen Loot abkoppeln. Mehr Walzen als
     passen → horizontal scrollen (overflow-x). */
}

/* ── Kampagnen-Intro (Comic-Kaiju-Cutscene) ──────────────────────────────── */
.campaign-intro-screen {
  background: var(--cs-ink);
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 300;
}

/* Phase 1: Scroll-Crawl */
.ci-crawl-wrap {
  height: 100%;
  overflow: hidden;
  perspective: 640px;
  perspective-origin: 50% 100%;
  position: absolute;
  width: 100%;
}
.ci-crawl {
  animation: ciCrawlScroll 20s linear forwards;
  color: var(--cs-gold);
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(1.05rem, 3.4vw, 1.75rem);
  font-weight: 900;
  left: 50%;
  line-height: 2;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(-50%) translateY(100vh) rotateX(20deg);
  transform-origin: 50% 0%;
  width: min(88%, 780px);
}
/* Läuft die volle Bildschirmhöhe hoch: Start unter der Kante (100vh),
   Ende komplett über der Kante (-110 % der Eigenhöhe). */
@keyframes ciCrawlScroll {
  0%   { transform: translateX(-50%) translateY(100vh)  rotateX(20deg); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-110%)  rotateX(20deg); opacity: 0; }
}
.ci-crawl p { margin: 0 0 1.6em; }
.ci-crawl .ci-crawl-title {
  color: var(--cs-crimson);
  font-size: 1.5em;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1.5px var(--cs-ink);
}

/* Phase 2: Stadt-Szene mit Kaiju */
.ci-scene {
  inset: 0;
  position: absolute;
}
.ci-scene-sky {
  background:
    radial-gradient(circle at 25% 20%, rgba(240,180,0,0.5), transparent 45%),
    linear-gradient(180deg, #f6d98f 0%, #f0a850 35%, var(--cs-crimson) 75%, #7a1f14 100%);
  inset: 0;
  position: absolute;
}
.ci-halftone {
  background-image: radial-gradient(var(--cs-ink) 1.1px, transparent 1.1px);
  background-size: 9px 9px;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
  position: absolute;
}
.ci-skyline {
  background:
    linear-gradient(var(--cs-ink) 0 0) 2%  40%/8%  60% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 13% 55%/9%  45% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 25% 25%/11% 75% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 40% 50%/8%  50% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 52% 32%/10% 68% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 66% 46%/9%  54% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 78% 22%/12% 78% no-repeat,
    linear-gradient(var(--cs-ink) 0 0) 92% 42%/7%  58% no-repeat;
  background-position-y: bottom;
  bottom: 0;
  height: 42%;
  position: absolute;
  width: 100%;
}
.ci-kaiju {
  animation: ciKaijuWalk 11s linear forwards;
  bottom: 6%;
  height: 260px;
  left: -260px;
  position: absolute;
  width: 220px;
}
@keyframes ciKaijuWalk {
  0%   { left: -260px; }
  100% { left: 105%; }
}
.ci-kaiju-body {
  background: var(--cs-ink);
  border-radius: 30% 30% 24% 24%;
  bottom: 60px;
  height: 150px;
  left: 30px;
  position: absolute;
  width: 160px;
}
.ci-kaiju-spike {
  background: var(--cs-crimson);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 34px;
  position: absolute;
  top: -22px;
  width: 26px;
}
.ci-kaiju-spike.s1 { left: 24px; height: 26px; }
.ci-kaiju-spike.s2 { left: 62px; top: -30px; }
.ci-kaiju-spike.s3 { left: 104px; height: 24px; }
.ci-kaiju-head {
  background: var(--cs-ink);
  border-radius: 40% 40% 46% 46%;
  height: 84px;
  left: 62px;
  position: absolute;
  top: 6px;
  width: 96px;
}
.ci-kaiju-eye {
  animation: ciKaijuEyeWander 2.6s ease-in-out infinite;
  background: var(--cs-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(240,180,0,0.8);
  height: 12px;
  position: absolute;
  top: 34px;
  width: 12px;
}
.ci-kaiju-eye.e1 { left: 22px; }
.ci-kaiju-eye.e2 { left: 58px; animation-delay: 0.15s; }
@keyframes ciKaijuEyeWander {
  0%, 100% { margin-left: 0; }
  25%      { margin-left: 5px; }
  50%      { margin-left: 0; }
  75%      { margin-left: -5px; }
}
.ci-kaiju-mouth {
  animation: ciKaijuLaugh 2.2s ease-out 8.6s forwards;
  background: var(--cs-crimson);
  border-radius: 0 0 14px 14px;
  height: 0;
  left: 26px;
  opacity: 0;
  position: absolute;
  top: 54px;
  width: 44px;
}
@keyframes ciKaijuLaugh {
  0%   { height: 0;    opacity: 0; }
  35%  { height: 5px;  opacity: 1; }
  100% { height: 18px; opacity: 1; }
}
.ci-kaiju-arm {
  background: var(--cs-ink);
  border-radius: 12px;
  height: 22px;
  position: absolute;
  top: 96px;
  width: 60px;
}
.ci-kaiju-arm-l { left: -34px; transform: rotate(18deg); }
.ci-kaiju-arm-r { left: 194px; transform: rotate(-18deg); }
.ci-kaiju-leg {
  animation: ciKaijuStomp 0.6s ease-in-out infinite;
  background: var(--cs-ink);
  border-radius: 10px;
  bottom: 0;
  height: 66px;
  position: absolute;
  width: 46px;
}
.ci-kaiju-leg-l { left: 46px; }
.ci-kaiju-leg-r { animation-delay: 0.3s; left: 118px; }
@keyframes ciKaijuStomp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.ci-kaiju-tail {
  background: var(--cs-ink);
  border-radius: 20px;
  bottom: 90px;
  height: 32px;
  left: -46px;
  position: absolute;
  transform: rotate(18deg);
  width: 90px;
}

.ci-caption {
  bottom: 90px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}
.ci-caption-eyebrow {
  color: var(--cs-paper);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-shadow: 2px 2px 0 var(--cs-ink);
  text-transform: uppercase;
}
.ci-caption-title {
  color: var(--cs-crimson);
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  -webkit-text-stroke: 2.5px var(--cs-ink);
  text-shadow: 4px 4px 0 var(--cs-ink);
  transform: skewY(-1.5deg);
}
.ci-caption-sub {
  color: var(--cs-paper);
  font-size: 0.9rem;
  font-weight: 700;
  margin: 6px 0 0;
  text-shadow: 2px 2px 0 var(--cs-ink);
}

.ci-continue {
  animation: ciFadeIn 600ms ease forwards;
  appearance: none;
  background: var(--cs-mint);
  border: 3px solid var(--cs-ink);
  border-radius: 6px;
  bottom: 28px;
  box-shadow: 4px 4px 0 var(--cs-ink);
  color: var(--cs-paper);
  cursor: pointer;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  left: 50%;
  padding: 12px 22px;
  position: absolute;
  transform: translateX(-50%);
  transition: transform 120ms;
}
.ci-continue:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 6px 6px 0 var(--cs-ink); }
@keyframes ciFadeIn { from { opacity: 0; } to { opacity: 1; } }

.campaign-intro-screen .tas-skip { z-index: 40; }

    /* ═══ Basislager (Grasland) — begehbare Draufsicht wie im Dungeon ═══
       Die Sprites (Zelt, Bett, Missionsboard, Bäume …) liegen in assets/css/base-sprites.css. */
    .base-area { display: grid; gap: 12px; }
    .home-wrap.tab-open .base-area { display: none; }
    .base-resbar { display: flex; flex-wrap: wrap; gap: 8px; }
    .base-chip {
      background: #fff8e6; border: 2px solid var(--cs-ink); border-radius: 999px;
      box-shadow: 2px 2px 0 var(--cs-ink); color: var(--cs-ink);
      font-size: 0.85rem; font-weight: 900; padding: 4px 12px;
    }
    .base-chip-soft { background: #e9f6df; font-weight: 800; }

    .dg-theme-basislager {
      --dg-bg: #2d5f2a;
      --dg-floor: #6cc04a; --dg-floor2: #62b444;
      --dg-wall-col: #3f7a35; --dg-wall-bg: #2d5f2a;
      --dg-door-col: #ffe08a; --dg-fog: #2a5a27;
      --dg-player-ring: #ffd84a; --dg-accent: #ffd84a;
      --dg-tile-corr-a: #79c957; --dg-tile-corr-b: #6dbd4c;
      --dg-tile-room-a: #79c957; --dg-tile-room-b: #6dbd4c;
      --dg-wall-line: #3f7a35;
    }
    .dg-theme-basislager .dg-cell.dg-fog { background: var(--dg-fog); }

    .base-stage-wrap { position: relative; }
    .base-stage {
      align-items: center;
      background: var(--dg-bg);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      box-sizing: border-box;
      container-type: size;
      display: flex;
      height: clamp(300px, 56vh, 500px);
      justify-content: center;
      overflow: hidden;
      padding: 6px;
      touch-action: none;
    }
    .base-gridwrap { position: relative; }
    .base-gridwrap > .dg-grid { aspect-ratio: auto; border-color: #3f7a35; cursor: pointer; height: 100%; width: 100%; }
    .base-grid .dg-cell { cursor: pointer; }
    .base-obj { inset: 2% 2% 6% 2%; }
    .base-tile-label {
      background: rgba(255, 252, 240, 0.94); border: 2px solid var(--cs-ink); border-radius: 6px;
      bottom: -6%; color: var(--cs-ink); font-size: clamp(0.5rem, 1.9cqh, 0.72rem); font-weight: 900; left: 50%;
      line-height: 1.1; max-width: 190%; padding: 1px 4px; pointer-events: none; position: absolute;
      text-align: center; transform: translateX(-50%); width: max-content; z-index: 6;
    }

    /* Bewohner-Ebene: gleitet weich von Kachel zu Kachel */
    .base-npc-layer { inset: 4px; pointer-events: none; position: absolute; z-index: 8; }
    .base-npc {
      appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0;
      pointer-events: auto; position: absolute;
      transition: left 0.68s ease-in-out, top 0.68s ease-in-out;
    }
    .base-npc-body { display: block; height: 100%; position: relative; width: 100%; }
    .base-npc.face-left .dg-decor-npc-wrap { --flip: -1; transform: scaleX(var(--flip, 1)); }
    .base-npc .dg-decor-npc-wrap { position: absolute; }
    .base-npc-body.is-bumping { animation: baseBump 0.34s ease-out; }
    @keyframes baseBump {
      0%   { transform: translate(0, 0); }
      40%  { transform: translate(calc(var(--bx, 0) * 34%), calc(var(--by, 0) * 34%)); }
      100% { transform: translate(0, 0); }
    }
    /* Lauf-Zyklus: deutlich von der ruhigen Idle-Wippe (dg-dance) unterscheidbar — knappes Hüpfen im Schritttakt */
    .base-npc.is-walking .dg-decor-npc-wrap {
      animation: baseWalkBob 0.34s ease-in-out infinite;
    }
    @keyframes baseWalkBob {
      0%, 100% { transform: translateY(0)   scaleX(var(--flip, 1)) scaleY(1); }
      50%      { transform: translateY(-4px) scaleX(var(--flip, 1)) scaleY(0.94); }
    }
    /* Angeln am Teich: ruhig stehenbleiben, kleine Rute mit Schnur und Schwimmer */
    .base-npc.is-fishing .dg-decor-npc-wrap { animation: none; }
    .base-npc.is-fishing .base-npc-body::before {
      background: #8a6a3a; border-radius: 2px; bottom: 46%; content: ""; height: 42%; position: absolute;
      right: 6%; transform: rotate(32deg); transform-origin: bottom center; width: 2px; z-index: 7;
    }
    .base-npc.is-fishing .base-npc-body::after {
      animation: baseFishBob 1.7s ease-in-out infinite; background: radial-gradient(circle at 35% 30%, #fff, #e0483f 60%);
      border-radius: 50%; content: ""; height: 6px; position: absolute; right: -14%; top: 60%; width: 6px; z-index: 7;
    }
    @keyframes baseFishBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
    /* Ball zukicken: zwei Bewohner spielen sich einen Ball zu — ruhiger Stand, Ball springt zwischen ihnen hin und her */
    .base-npc.is-playing-ball .dg-decor-npc-wrap { animation-duration: 1s; }
    .base-npc.has-ball .base-npc-body::after {
      animation: baseBallHop 0.5s ease-out; content: "⚽"; font-size: 140%; position: absolute; right: -10%; bottom: 4%; z-index: 7;
    }
    @keyframes baseBallHop {
      0%   { transform: translate(-55%, -6px) scale(0.7); opacity: 0.3; }
      60%  { transform: translate(0, -5px) scale(1.1); opacity: 1; }
      100% { transform: translate(0, 0) scale(1); opacity: 1; }
    }
    .base-job-badge {
      background: #fff; border: 2px solid var(--cs-ink); border-radius: 50%; font-size: 0.7rem; height: 20px;
      line-height: 16px; position: absolute; right: 4%; text-align: center; top: 4%; width: 20px; z-index: 6;
    }
    .base-plus {
      animation: basePlus 2.2s ease-out forwards; background: #fff8e6; border: 2px solid var(--cs-ink); border-radius: 8px;
      color: var(--cs-ink); font-size: 0.75rem; font-weight: 900; left: 50%; padding: 1px 6px; position: absolute;
      top: -6%; transform: translateX(-50%); white-space: nowrap; z-index: 9;
    }
    @keyframes basePlus { 0% { opacity: 0; margin-top: 8px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -24px; } }

    /* Bewohner-Menü */
    .base-npcmenu {
      background: #fffdf5; border: 3px solid var(--cs-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-ink); display: grid; gap: 6px; padding: 10px 12px; position: absolute; right: 12px; top: 12px;
      width: min(310px, calc(100% - 24px)); z-index: 30;
    }
    .base-npcmenu[hidden] { display: none; }
    .base-menu-close {
      appearance: none; background: #fff; border: 2px solid var(--cs-ink); border-radius: 7px; cursor: pointer;
      font: inherit; font-weight: 900; position: absolute; right: 8px; top: 8px; width: 30px;
    }
    .base-menu-head { align-items: center; display: flex; gap: 10px; padding-right: 34px; }
    .base-menu-head strong { display: block; font-size: 1.05rem; }
    .base-menu-head small { color: #6b5a40; font-weight: 800; }
    .base-menu-say { background: #fff3c4; border: 2px solid #c9a227; border-radius: 8px; font-size: 0.8rem; font-weight: 700; margin: 0; padding: 4px 8px; }
    .base-menu-sect { border-bottom: 2px solid var(--cs-ink); font-size: 0.78rem; font-weight: 900; margin-top: 2px; text-transform: uppercase; }
    .base-menu-now { color: #4b3b26; font-size: 0.78rem; margin: 0; }
    .base-menu-traits { font-size: 0.8rem; line-height: 1.4; margin: 0; padding-left: 18px; }
    .base-menu-traits .soft { color: #8a7a5a; font-style: italic; }

    .base-hint { color: #f6f0dc; font-size: 0.78rem; font-weight: 700; margin: 0; text-align: center; }
    .base-dpad { display: none; gap: 6px; grid-template-columns: repeat(3, 46px); justify-content: center; }
    .base-dpad button {
      appearance: none; background: #fff8e6; border: 2px solid var(--cs-ink); border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink); color: var(--cs-ink); font-size: 1.1rem; font-weight: 900; height: 42px;
    }
    .base-dpad button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--cs-ink); }
    .base-dpad .n { grid-column: 2; }
    .base-dpad .w { grid-column: 1; grid-row: 2; }
    .base-dpad .s { grid-column: 2; grid-row: 2; }
    .base-dpad .e { grid-column: 3; grid-row: 2; }
    /* statt der festen Pfeiltasten gibt es das adaptive Steuerkreuz (Wisch im Spielfeld) */
    .base-dpad { display: none !important; }

    .base-panel { background: #fffdf5; border: 3px solid var(--cs-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--cs-ink); overflow: hidden; }
    .base-panel[hidden] { display: none; }
    .base-tabs { background: #e9f6df; border-bottom: 3px solid var(--cs-ink); display: flex; gap: 6px; padding: 8px; }
    .base-tab {
      appearance: none; background: #fff; border: 2px solid var(--cs-ink); border-radius: 7px; color: var(--cs-ink);
      cursor: pointer; flex: 1; font: inherit; font-size: 0.85rem; font-weight: 900; padding: 6px 8px;
    }
    .base-tab.active { background: #ffd84a; box-shadow: 2px 2px 0 var(--cs-ink); }
    .base-tab-close { flex: 0 0 40px; }
    .base-panel-body { display: grid; gap: 8px; padding: 10px; }
    .base-card {
      align-items: center; background: #fff; border: 2px solid var(--cs-ink); border-radius: 8px;
      color: var(--cs-ink); display: flex; gap: 10px; padding: 8px 10px;
    }
    .base-card.is-locked { opacity: 0.6; }
    .base-card-icon { font-size: 1.8rem; line-height: 1; }
    .base-card-avatar { flex: 0 0 38px; height: 52px; position: relative; width: 38px; }
    .base-card-avatar .pixel-avatar { left: 0; position: absolute; top: 0; transform: scale(0.7); transform-origin: top left; }
    .base-card-main { flex: 1; min-width: 0; }
    .base-card-main p { color: #4b3b26; font-size: 0.8rem; line-height: 1.35; margin: 2px 0 4px; }
    .base-card-main small { color: #6b5a40; font-weight: 800; }
    .base-costs, .base-jobs { display: flex; flex-wrap: wrap; gap: 6px; }
    .base-cost { background: #e9f6df; border: 2px solid #3f9a55; border-radius: 6px; font-size: 0.78rem; font-weight: 900; padding: 1px 7px; }
    .base-cost.short { background: #fde3df; border-color: #c0392b; color: #8a1f14; }
    .base-cost.ok { background: #fff3c4; border-color: #c9a227; }
    .base-btn {
      appearance: none; background: #3f9a55; border: 2px solid var(--cs-ink); border-radius: 7px;
      box-shadow: 2px 2px 0 var(--cs-ink); color: #fff; cursor: pointer; font: inherit;
      font-size: 0.85rem; font-weight: 900; padding: 6px 12px;
    }
    .base-btn.small { font-size: 0.75rem; padding: 3px 8px; }
    .base-btn:disabled { background: #c9c3b3; box-shadow: none; color: #6b6558; cursor: not-allowed; }
    .base-job {
      appearance: none; background: #fff; border: 2px solid var(--cs-ink); border-radius: 7px; color: var(--cs-ink); cursor: pointer;
      font: inherit; font-size: 0.85rem; font-weight: 800; padding: 3px 8px;
    }
    .base-job.active { background: #ffd84a; box-shadow: 2px 2px 0 var(--cs-ink); }
    .base-note { color: #5b4a30; font-size: 0.8rem; line-height: 1.4; margin: 0; }

    @media (max-width: 560px) {
      .base-card { flex-wrap: wrap; }
      .base-npcmenu { bottom: 8px; left: 8px; right: 8px; top: auto; width: auto; }
    }
    @media (max-width: 1100px), (max-height: 900px) {
      .home-wrap:not(.tab-open) { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
    }

    /* ═══ Basislager v2: Menüs als Overlay, Bauen-Button, Bauplatz-Markierung ═══ */
    .home-tabs { display: none !important; }   /* Untermenüs laufen jetzt über die Gebäude im Lager */
    .base-panel {
      left: 12px; max-height: calc(100% - 24px); overflow: hidden; position: absolute; right: 12px; top: 12px;
      z-index: 40; display: flex; flex-direction: column;
    }
    .base-panel[hidden] { display: none; }
    .base-panel-head {
      align-items: center; background: #e9f6df; border-bottom: 3px solid var(--cs-ink); color: var(--cs-ink);
      display: flex; flex: 0 0 auto; justify-content: space-between; padding: 8px 10px 8px 12px; position: relative;
    }
    .base-panel-head .base-menu-close { position: static; }
    .base-panel .base-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
    .base-build-btn {
      appearance: none; background: #ffd84a; border: 3px solid var(--cs-ink); border-radius: 10px;
      box-shadow: 3px 3px 0 var(--cs-ink); bottom: 14px; color: var(--cs-ink); cursor: pointer; font: inherit;
      font-size: 0.95rem; font-weight: 900; left: 14px; padding: 8px 14px; position: absolute; z-index: 25;
    }
    .base-build-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cs-ink); }
    .base-build-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--cs-ink); }
    /* Quest-Marker: zeigt einen ungebauten Bauplan an (z. B. frisch verdiente Heldenkammer) */
    .worldmap-home-btn.has-plan-marker::after,
    .base-build-btn.has-plan-marker::after {
      content: ""; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px;
      background: var(--cs-crimson, #d94a3f); border: 2px solid var(--cs-ink); border-radius: 50%;
      animation: planMarkerPulse 1.6s ease-in-out infinite;
    }
    @keyframes planMarkerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
    .base-card.is-unaffordable { filter: grayscale(0.85); opacity: 0.55; }
    /* Bauvorschau: Gebäude halbtransparent, Grundfläche grün (passt) / rot (geht nicht) */
    .base-ghost { inset: 0; opacity: 0.6; pointer-events: none; position: absolute; z-index: 6; }
    .base-ghost.bad { filter: grayscale(0.6) sepia(1) hue-rotate(-40deg) saturate(3); opacity: 0.5; }
    .base-ghost .base-tile-label, .base-ghost .bh-sign { display: none; }
    .dg-cell.base-ghost-foot.ok { box-shadow: inset 0 0 0 3px #3ddc6b; background-image: linear-gradient(rgba(61,220,107,0.28), rgba(61,220,107,0.28)); }
    .dg-cell.base-ghost-foot.bad { box-shadow: inset 0 0 0 3px #ff4d4d; background-image: linear-gradient(rgba(255,77,77,0.30), rgba(255,77,77,0.30)); }
    .dg-cell.base-build-target { box-shadow: inset 0 0 0 3px #ffd84a; }
    .base-target-mark {
      align-items: center; animation: baseTargetPulse 1s ease-in-out infinite alternate; background: rgba(255, 216, 74, 0.25);
      border: 3px dashed #ffd84a; border-radius: 6px; display: flex; inset: 6%; justify-content: center; position: absolute; z-index: 2;
    }
    .base-target-mark i { font-size: clamp(1rem, 4cqh, 1.8rem); font-style: normal; opacity: 0.9; }
    @keyframes baseTargetPulse { from { opacity: 0.55; } to { opacity: 1; } }

    /* Begegnung im Dungeon: „Darf ich ins Basislager ziehen?“ */
    .base-recruit-overlay {
      align-items: center; background: rgba(20, 32, 16, 0.72); display: flex; inset: 0; justify-content: center;
      padding: 16px; position: fixed; z-index: 2000;
    }
    .base-recruit-card {
      background: #fffdf5; border: 4px solid var(--cs-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--cs-ink);
      color: var(--cs-ink); display: grid; gap: 6px; justify-items: center; max-width: 380px; padding: 16px 18px; text-align: center; width: 100%;
    }
    .base-recruit-tag { background: #e9f6df; border: 2px solid #3f9a55; border-radius: 999px; font-size: 0.78rem; font-weight: 900; padding: 2px 12px; }
    .base-recruit-avatar { height: 84px; position: relative; width: 62px; }
    .base-recruit-avatar .pixel-avatar { left: 0; position: absolute; top: 0; transform: scale(1.1); transform-origin: top left; }
    .base-recruit-card strong { font-size: 1.15rem; }
    .base-recruit-card small { color: #6b5a40; font-weight: 800; margin-top: -4px; }
    .base-recruit-card p { font-size: 0.9rem; font-weight: 700; margin: 0; }
    .base-recruit-note { color: #4b3b26; font-size: 0.78rem !important; font-weight: 600 !important; }
    .base-recruit-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
    .base-btn-ghost { background: #fff; color: var(--cs-ink); }

    /* Bau-/Tauschmenü: rechts als schmale Karte, damit das Baufeld sichtbar bleibt; auf dem Handy als Sheet unten */
    .base-panel { left: auto; width: min(370px, calc(100% - 24px)); }
    @media (max-width: 700px) {
      .base-panel { bottom: 8px; left: 8px; max-height: 52%; right: 8px; top: auto; width: auto; }
      .base-build-btn { bottom: auto; top: 10px; }
    }

    /* Lagerraum-Menü */
    .base-store { display: grid; gap: 6px; }
    .base-store-row { align-items: center; color: var(--cs-ink); display: grid; font-size: 0.82rem; font-weight: 800; gap: 8px; grid-template-columns: 96px 1fr 62px; }
    .base-store-row b { text-align: right; }
    .base-store-bar { background: #e9f6df; border: 2px solid var(--cs-ink); border-radius: 6px; height: 14px; overflow: hidden; }
    .base-store-bar i { background: #3f9a55; display: block; height: 100%; }
    .base-warn { color: #8a1f14; display: block; font-size: 0.74rem; font-weight: 800; margin-top: 3px; }

    /* Dorfplatz, Zufriedenheit, Gebäude tragen/verwalten */
    .dg-cell.dg-is-corridor.base-plaza.dg-tile-a { background: #d9c9a2; }
    .dg-cell.dg-is-corridor.base-plaza.dg-tile-b { background: #cdbb90; }
    .base-chip-mood { background: #fff3c4; font-weight: 800; }
    .base-carry-icon { animation: baseCarryBob 0.9s ease-in-out infinite alternate; font-size: clamp(1.2rem, 5cqh, 2.2rem); left: 50%; position: absolute; top: -16%; transform: translateX(-50%); z-index: 9; }
    @keyframes baseCarryBob { from { margin-top: 0; } to { margin-top: -4px; } }
    .base-build-btn.is-carry { background: #ff9f43; }
    .base-cancelmove-btn {
      appearance: none; background: #fff; border: 3px solid var(--cs-ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--cs-ink);
      bottom: 14px; color: var(--cs-ink); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 900;
      left: 190px; padding: 8px 12px; position: absolute; z-index: 25;
    }
    .base-cancelmove-btn[hidden] { display: none; }
    .base-geb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .base-btn-danger { background: #c0392b; }
    @media (max-width: 700px) { .base-cancelmove-btn { bottom: auto; left: auto; right: 10px; top: 10px; } }

    /* Hinweis-❗ im Dungeon (statt Textkästen) */
    .notice-btn {
      align-items: center; animation: noticePulse 1.1s ease-in-out infinite alternate; appearance: none; background: #ffd84a;
      border: 3px solid var(--cs-ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--cs-ink); color: var(--cs-ink); cursor: pointer;
      display: none; font-size: 1.3rem; font-weight: 900; height: 44px; justify-content: center; left: 14px; position: fixed; top: 14px; width: 44px; z-index: 1800;
    }
    body.in-explore.has-notice .notice-btn { display: flex; }
    body.popup-open .notice-btn { display: none !important; }
    @keyframes noticePulse { from { transform: scale(1); } to { transform: scale(1.12); } }
    .notice-overlay { align-items: center; background: rgba(0, 0, 0, 0.55); display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 2100; }
    .notice-card {
      background: #fffdf5; border: 4px solid var(--cs-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--cs-ink); color: var(--cs-ink);
      max-width: 380px; padding: 16px 18px; position: relative; width: 100%;
    }
    .notice-card h3 { margin: 0 34px 8px 0; }
    .notice-card p { font-size: 0.92rem; font-weight: 700; line-height: 1.35; margin: 6px 0; }
    .notice-close {
      appearance: none; background: #fff; border: 2px solid var(--cs-ink); border-radius: 7px; cursor: pointer; font: inherit;
      font-weight: 900; height: 30px; position: absolute; right: 10px; top: 10px; width: 30px;
    }

    /* Kampflog entfernt — Hinweise laufen jetzt über das ❗ (Popup) */
    .side, .log-panel { display: none !important; }

    /* Überspringen: größere Trefferfläche, immer ganz oben (auch mobil) */
    .tas-skip, .campaign-intro-screen .tas-skip { min-height: 40px; min-width: 96px; touch-action: manipulation; z-index: 400; }

    /* Rekrutierungs-Popup: Vorteile im Überblick */
    .base-recruit-question { font-size: 1rem !important; font-weight: 900 !important; }
    .base-recruit-benefits { display: grid; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; text-align: left; width: 100%; }
    .base-recruit-benefits li { align-items: flex-start; background: #e9f6df; border: 2px solid #3f9a55; border-radius: 8px; display: flex; gap: 8px; padding: 5px 8px; }
    .base-recruit-benefits li > span { font-size: 1.15rem; line-height: 1.2; }
    .base-recruit-benefits b { display: block; font-size: 0.78rem; }
    .base-recruit-benefits div { font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
    .base-recruit-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

    /* Funktionsgebäude sind 2 Felder breit */
    .base-obj.w2 { inset: 2% auto 6% 2%; width: 196%; }
    .base-obj.w2.shift { left: -98%; }

    /* Gebäude über mehrere Felder (Breite --bw × Höhe --bh); --sx/--sy: Anteil, der links/oben aus dem Ausschnitt ragt */
    .base-obj.multi {
      height: calc(var(--bh, 1) * 100% - 8%); inset: auto; left: calc(2% - var(--sx, 0) * 100%);
      top: calc(2% - var(--sy, 0) * 100%); width: calc(var(--bw, 1) * 100% - 4%);
    }

    /* Mobil: kompakteres Basislager (Chips, Menüs als Sheet unten, Karten kleiner) */
    .base-grid .dg-cell.dg-current { z-index: 7; }
    .base-info-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
    .base-info-card .base-info-ok { margin-top: 8px; }
    @media (max-width: 700px) {
      .base-resbar { gap: 5px; }
      .base-chip { font-size: 0.72rem; padding: 3px 8px; }
      .base-panel { max-height: 46%; }
      .base-npcmenu { max-height: 58%; overflow-y: auto; }
      .base-panel .base-note { font-size: 0.72rem; }
      .base-panel-body { gap: 6px; padding: 8px; }
      .base-card { flex-wrap: nowrap; gap: 8px; padding: 6px 8px; }
      .base-card-icon { font-size: 1.4rem; }
      .base-card-main p {
        -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; font-size: 0.72rem; margin: 1px 0 3px; overflow: hidden;
      }
      .base-btn { font-size: 0.78rem; padding: 5px 9px; }
      .base-tile-label { font-size: 0.5rem; }
    }

    /* Mobil: Menüs (Bauen, Tausch, Bewohner, Gebäude) stehen unter dem Spielfeld statt darüber */
    @media (max-width: 700px) {
      .base-panel, .base-npcmenu {
        bottom: auto; left: auto; margin-top: 10px; max-height: none; position: relative; right: auto; top: auto; width: auto;
      }
      .base-panel { display: flex; }
      .base-panel[hidden], .base-npcmenu[hidden] { display: none; }
      .base-stage { height: min(60dvh, 520px); }
    }

    /* Mobil: alles passt auf einen Bildschirm — kompakter Kopf, quadratisches Spielfeld, Menü füllt den Rest */
    @media (max-width: 700px) {
      .home-header { gap: 8px; padding: 8px 10px; }
      .home-header h1 { font-size: 1.25rem; line-height: 1.1; }
      .home-back-btn { font-size: 0.75rem; padding: 5px 8px; }
      .base-area { gap: 8px; }
      .base-stage { aspect-ratio: 1 / 1; height: auto; }
      .base-panel { max-height: max(230px, calc(100dvh - 520px)); }
      .base-npcmenu { max-height: max(230px, calc(100dvh - 520px)); overflow-y: auto; }
      .base-hint { font-size: 0.7rem; }
    }

    /* Ertrag pro Ebene (kleines Fenster, verschwindet von selbst) */
    .base-loot-pop {
      background: #fffdf5; border: 3px solid var(--cs-ink); border-radius: 10px; bottom: 96px; box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-ink); display: grid; gap: 4px; left: 50%; max-width: min(320px, calc(100vw - 24px)); padding: 8px 12px;
      position: fixed; transform: translateX(-50%); width: max-content; z-index: 1600; animation: baseLootIn 0.25s ease-out;
    }
    @keyframes baseLootIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
    .base-loot-title { font-size: 0.78rem; font-weight: 900; }
    .base-loot-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 26px 1fr auto; font-size: 0.82rem; font-weight: 800; }
    .base-loot-av { display: block; height: 34px; overflow: hidden; position: relative; width: 26px; }
    .base-loot-av .pixel-avatar { left: -6px; position: absolute; top: -4px; transform: scale(0.56); transform-origin: top left; }
    .base-loot-more { color: #6b5a40; font-size: 0.72rem; font-weight: 700; }

    /* Mehrseitiger Dialog (Mika) */
    .base-dialog-overlay { align-items: flex-end; background: rgba(20, 32, 16, 0.55); display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 2100; }
    .base-dialog-card {
      background: #fffdf5; border: 4px solid var(--cs-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--cs-ink); color: var(--cs-ink);
      display: grid; gap: 10px; max-width: 440px; padding: 14px 16px; width: 100%;
    }
    .base-dialog-head { align-items: center; display: flex; gap: 10px; }
    .base-dialog-head strong { display: block; font-size: 1.05rem; }
    .base-dialog-head small { color: #6b5a40; font-weight: 800; }
    .base-dialog-av { flex: 0 0 40px; height: 54px; position: relative; width: 40px; }
    .base-dialog-av .pixel-avatar { left: 0; position: absolute; top: 0; transform: scale(0.72); transform-origin: top left; }
    .base-dialog-skip { appearance: none; background: none; border: 0; color: #6b5a40; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 800; margin-left: auto; padding: 4px; text-decoration: underline; }
    .base-dialog-text { font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 0; min-height: 5.6em; }
    .base-dialog-dots { display: flex; gap: 6px; justify-content: center; }
    .base-dialog-dots span { background: #d9cfb6; border: 2px solid var(--cs-ink); border-radius: 50%; height: 10px; width: 10px; }
    .base-dialog-dots span.on { background: #ffd84a; }
    .base-dialog-row { display: flex; gap: 8px; justify-content: flex-end; }

    /* Geschenke im Lager */
    .base-gift { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    .base-gift select { background: #fff; border: 2px solid var(--cs-ink); border-radius: 6px; color: var(--cs-ink); font: inherit; font-size: 0.8rem; font-weight: 800; padding: 3px 6px; }

    /* Weiche Kamera im Basislager: Rahmen > Gleit-Ebene (Kacheln + Bewohner) + feste Spieler-Ebene */
    .base-gridwrap > .dg-grid.base-grid { display: block; position: relative; }
    .base-slide { inset: 0; position: absolute; will-change: transform; }
    .base-cells { display: grid; inset: 0; position: absolute; }
    .base-slide .base-npc-layer { inset: 0; }
    .base-player-layer { inset: 0; pointer-events: none; position: absolute; z-index: 9; }
    .base-player-cell { position: absolute; }
    .base-player-cell .dg-player-wrap { inset: 0; }

    /* Bewohner: Perk, Attribute, Vertrauen */
    .base-perk { font-size: 0.8rem; line-height: 1.35; margin: 0; }
    .base-stat-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
    .base-stat-pill { background: #fff7e0; border: 2px solid var(--cs-ink); border-radius: 999px; font-size: 0.7rem; font-weight: 800; padding: 1px 7px; }
    .base-stat-pill b { color: #a4501c; }
    .base-trust { margin: 3px 0 4px; }
    .base-trust small { color: #6b5a40; font-weight: 800; }
    .base-trust-bar { background: #e9dcb8; border: 2px solid var(--cs-ink); border-radius: 999px; display: block; height: 9px; overflow: hidden; }
    .base-trust-bar i { background: #e08a3c; display: block; height: 100%; }
    .base-trust.ready .base-trust-bar i { background: #4aa564; }

    /* Basislager auf großen Bildschirmen: das Fenster ausfüllen statt in der schmalen Spalte zu sitzen */
    @media (min-width: 701px) {
      .home-wrap:not(.tab-open) { max-width: none; }
      .home-screen:has(.home-wrap:not(.tab-open)) { padding: 10px 14px 12px; }
      .home-wrap:not(.tab-open) .base-stage { height: clamp(320px, calc(100dvh - 176px), 1200px); }
    }

    /* Gespräch mit einem Bewohner: Vollbild auf jedem Gerät, rotes Kreuz oben rechts */
    #baseNpcMenu.base-npcmenu {
      background: #fffdf5; border: 0; border-radius: 0; bottom: auto; box-shadow: none; display: block; height: 100dvh;
      inset: 0; left: 0; margin: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 0;
      position: fixed; right: 0; top: 0; width: 100vw; z-index: 500;
    }
    #baseNpcMenu.base-npcmenu[hidden] { display: none; }
    #baseNpcMenu .base-menu-col { display: grid; gap: 8px; margin: 0 auto; max-width: 720px; padding: 64px 16px 40px; }
    #baseNpcMenu .base-menu-close {
      align-items: center; background: #d62828; border: 3px solid var(--cs-ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--cs-ink);
      color: #fff; display: flex; font-size: 1.5rem; height: 46px; justify-content: center; line-height: 1; position: fixed;
      right: 14px; top: 14px; width: 46px; z-index: 2;
    }
    #baseNpcMenu .base-menu-head { padding-right: 0; }
    #baseNpcMenu .base-menu-head strong { font-size: 1.3rem; }
    #baseNpcMenu .base-menu-say { font-size: 0.95rem; }
    .base-menu-msg { background: #e6f5e0; border: 2px solid #4aa564; border-radius: 8px; font-size: 0.9rem; font-weight: 800; margin: 0; padding: 6px 10px; }
    .base-giftgrid { display: flex; flex-wrap: wrap; gap: 6px; }
    .base-party-btn { background: #4aa564; color: #fff; font-size: 1.05rem; padding: 10px 14px; }
    .base-party-btn.on { background: #2f7d45; }

    /* Missionsboard: zwei große Buttons; Squad-Karten sind antippbar */
    .base-board-actions { display: grid; gap: 10px; }
    .base-board-btn { display: grid; font-size: 1.05rem; gap: 2px; padding: 12px 14px; text-align: left; }
    .base-board-btn small { font-size: 0.75rem; font-weight: 700; opacity: 0.8; }
    .base-board-btn.alt { background: #4a8fd6; color: #fff; }
    .base-card.is-clickable { cursor: pointer; }
    .base-card.is-clickable:hover, .base-card.is-clickable:focus-visible { box-shadow: 3px 3px 0 var(--cs-ink); outline: 2px solid #ffd84a; }
    .base-party-tag { background: #4aa564; border-radius: 999px; color: #fff; font-size: 0.65rem; font-weight: 900; padding: 1px 7px; }
    .base-card-go { align-self: center; color: #8a7a5a; font-size: 1.6rem; font-weight: 900; }
    .base-squad-stats { display: flex; flex-wrap: wrap; gap: 8px; }

    /* Begleiter-Hinweis: falsche Antworten werden ausgegraut */
    .option.is-eliminated { opacity: 0.35; pointer-events: none; text-decoration: line-through; }

    /* Hochformat-Handy: Die Party steht als Spalte — Sprechblasen der Begleiter rechts neben die Karte setzen,
       damit sie die LP-Anzeige der Karte darüber nicht verdecken */
    @media (max-width: 700px) and (orientation: portrait) {
      .combat-party-bar .cpm-say { bottom: auto; left: calc(100% + 8px); max-width: min(130px, 34vw); top: 0; }
      .combat-party-bar .cpm-say::after {
        border-color: transparent var(--cs-ink) transparent transparent; left: -12px; top: 10px;
      }
    }

    /* Handy quer: kaum Platz — die Aktion steht schon als Text im Kampffeld, die Sprechblase würde ihn verdecken */
    @media (max-height: 430px) and (orientation: landscape) {
      .combat-party-bar .cpm-say { display: none; }
    }

    /* Neuer Bauplan: kleines Achievement-artiges Fenster oben in der Mitte */
    .plan-pop {
      align-items: center; animation: planPopIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; background: #fff8e6; border: 3px solid var(--cs-ink);
      border-radius: 14px; box-shadow: 4px 4px 0 var(--cs-ink); color: var(--cs-ink); cursor: pointer; display: flex; gap: 12px;
      left: 50%; max-width: min(92vw, 420px); padding: 10px 16px 10px 12px; position: fixed; top: 14px; transform: translateX(-50%); z-index: 9000;
    }
    .plan-pop-icon { background: #ffd84a; border: 2px solid var(--cs-ink); border-radius: 10px; font-size: 1.8rem; padding: 4px 8px; }
    .plan-pop-body { display: grid; gap: 1px; }
    .plan-pop-body small { color: #a4501c; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; }
    .plan-pop-body strong { font-size: 1.05rem; }
    .plan-pop-body span { font-size: 0.8rem; line-height: 1.25; }
    .plan-pop-body em { color: #6b5a40; font-size: 0.72rem; font-style: normal; font-weight: 800; }
    @keyframes planPopIn { from { opacity: 0; transform: translate(-50%, -30px) scale(0.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

    /* Einstiegs-Questleiste: kurzes Handholding für neue Spielende (Weltkarte/Basislager) */
    .quest-bar {
      align-items: center;
      animation: questBarIn 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
      background: linear-gradient(180deg, #fff8e6 0%, #fbe7c8 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 14px;
      box-shadow: 4px 4px 0 var(--cs-ink);
      color: var(--cs-ink);
      display: flex;
      gap: 10px;
      left: 50%;
      max-width: min(94vw, 480px);
      padding: 8px 10px 8px 12px;
      position: fixed;
      top: 8px;
      transform: translateX(-50%);
      z-index: 150;
    }
    .quest-bar.is-hidden { display: none; }
    .quest-bar-icon { flex: 0 0 auto; font-size: 1.6rem; }
    .quest-bar-body { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
    .quest-bar-body strong { font-size: 0.85rem; }
    .quest-bar-body small { font-size: 0.72rem; line-height: 1.25; opacity: 0.85; }
    .quest-bar-reward { color: #a4501c; font-size: 0.7rem; font-weight: 900; }
    .quest-bar-count { color: #a4501c; }
    .quest-bar-dots { align-items: center; display: flex; flex: 0 0 auto; gap: 4px; }
    .quest-bar-dot { background: rgba(36,28,26,0.2); border: 1px solid var(--cs-ink); border-radius: 50%; height: 8px; width: 8px; }
    .quest-bar-dot.done { background: #78dc8c; }
    .quest-bar-dot.active { animation: questDotPulse 1.4s ease-in-out infinite; background: #ffd84a; }
    .quest-bar-close {
      background: transparent; border: none; color: var(--cs-ink); cursor: pointer; flex: 0 0 auto;
      font-size: 0.85rem; font-weight: 900; opacity: 0.55; padding: 2px 4px;
    }
    .quest-bar-close:hover { opacity: 1; }
    @keyframes questBarIn { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
    @keyframes questDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
    @media (max-width: 480px) {
      .quest-bar { gap: 8px; max-width: 94vw; padding: 6px 8px 6px 10px; }
      .quest-bar-icon { font-size: 1.3rem; }
      .quest-bar-dots { display: none; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       Inventarfenster (Paper-Doll): Figur + Slots links, Pool + Details rechts
       ═══════════════════════════════════════════════════════════════════ */
    .menu-popup-modal.is-inventory { width: min(840px, 100%); max-height: min(88dvh, 700px); }
    /* Die Dungeon-Hochkantspalte (560px) ist für das Inventar zu schmal */
    body:not(.in-combat):not(.in-quiz) .menu-popup-overlay.is-inventory { width: min(900px, 100vw); }
    @media (max-width: 720px) {
      body:not(.in-combat):not(.in-quiz) .menu-popup-overlay.is-inventory { width: 100vw; }
    }
    .inv-window {
      --inv-s: 2.5;
      --tier-normal: #8a7a6a; --tier-schlecht: #9aa0a6; --tier-gut: #43a047;
      --tier-super: #1e88e5; --tier-affix: #8e44ad; --tier-legendary: #f0b400;
      display: grid;
      grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .inv-doll-col { display: grid; gap: 8px; justify-items: center; }
    .inv-doll {
      display: grid;
      grid-template-columns: 62px auto 62px;
      grid-template-rows: 62px auto 62px;
      grid-template-areas: ". head ." "hands sprite body" ". feet .";
      gap: 8px;
      align-items: center;
      justify-items: center;
      /* Dezente Verlies-Nische statt flacher Braun-Fläche: helle Steinwand mit
         Tiefe, warmer Spotlight auf die Figur, Bodenstreifen mit Fliesenraster
         unten (derselbe Fliesen-Trick wie .floor bei den Dungeon-Räumen). */
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 20px) bottom / 100% 30% repeat-x,
        repeating-linear-gradient(0deg, rgba(10,14,22,0.16) 0 1px, transparent 1px 10px) bottom / 100% 30% repeat-x,
        linear-gradient(180deg, transparent 66%, rgba(18,22,32,0.4) 100%),
        radial-gradient(circle at 28% 14%, rgba(255,196,110,0.30), transparent 40%),
        radial-gradient(circle at 72% 14%, rgba(255,196,110,0.30), transparent 40%),
        radial-gradient(circle at 50% 42%, rgba(240,180,0,0.20), transparent 60%),
        linear-gradient(180deg, #aab6c4 0%, #74808e 55%, #454d58 100%);
      border: 3px solid var(--cs-ink);
      border-radius: 12px;
      box-shadow: 3px 3px 0 var(--cs-ink), inset 0 0 0 2px rgba(240,180,0,0.25);
      padding: 10px;
      position: relative;
      overflow: hidden;
    }
    .inv-slot-head { grid-area: head; }
    .inv-slot-weapon { grid-area: hands; }
    .inv-slot-clothing { grid-area: body; }
    .inv-slot-shoes { grid-area: feet; }
    .inv-sprite-stage { grid-area: sprite; }
    .inv-sprite {
      width: calc(54px * var(--inv-s));
      height: calc(92px * var(--inv-s));   /* Hose reicht per box-shadow bis ~89px */
      position: relative;
    }
    .inv-sprite .pixel-avatar { transform: scale(var(--inv-s)); transform-origin: top left; }

    .inv-slot {
      position: relative;
      width: 62px; height: 62px;
      display: grid; place-items: center;
      background: rgba(20, 12, 8, 0.55);
      border: 3px solid #8a6a4a;
      border-radius: 8px;
      color: var(--cs-paper);
      cursor: pointer;
      padding: 0;
      font: inherit;
      transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    }
    .inv-slot-ico { font-size: 1.9rem; line-height: 1; margin-top: -6px; }
    .inv-slot-ico .ghost { font-style: normal; opacity: 0.22; filter: grayscale(1); }
    .inv-slot-label {
      position: absolute; bottom: 2px; left: 0; right: 0;
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
      color: #f3dcb6; opacity: 0.85; text-align: center;
    }
    .inv-slot.filled { background: rgba(253, 243, 225, 0.12); border-color: var(--tier-normal); }
    .inv-slot.filled.gq-schlecht  { border-color: var(--tier-schlecht); }
    .inv-slot.filled.gq-gut       { border-color: var(--tier-gut); }
    .inv-slot.filled.gq-super     { border-color: var(--tier-super); }
    .inv-slot.filled.gq-affix     { border-color: var(--tier-affix); }
    .inv-slot.filled.gq-legendary { border-color: var(--tier-legendary); box-shadow: 0 0 10px rgba(240,180,0,0.6); background: linear-gradient(160deg, rgba(255,233,168,0.9) 0%, rgba(240,180,0,0.85) 55%, rgba(201,138,0,0.9) 100%); }
    .inv-slot:hover { transform: translateY(-1px); }
    .inv-slot.sel { box-shadow: 0 0 0 3px var(--cs-gold); }
    .inv-slot.fits { border-color: #7fe38a; box-shadow: 0 0 0 3px rgba(127,227,138,0.55); animation: invFitPulse 1.1s ease-in-out infinite; }
    .inv-window.dragging .inv-slot { opacity: 0.8; }
    @keyframes invFitPulse { 50% { box-shadow: 0 0 0 5px rgba(127,227,138,0.25); } }

    .inv-name { font-weight: 900; font-size: 1rem; color: var(--cs-ink); }
    .inv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; }
    .inv-stat {
      display: flex; align-items: baseline; gap: 6px;
      background: var(--cs-paper); border: 2px solid var(--cs-ink); border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink); padding: 4px 8px; font-size: 0.82rem; color: var(--cs-ink);
    }
    .inv-stat span { color: var(--muted); font-weight: 800; flex: 1; }
    .inv-stat strong { font-size: 1rem; }
    .inv-stat em { font-style: normal; font-size: 0.72rem; font-weight: 800; }
    .inv-stat em.up { color: #2e8b3d; }
    .inv-stat em.down { color: #c0392b; }
    .inv-vitals { font-size: 0.8rem; font-weight: 700; text-align: center; color: var(--cs-ink); line-height: 1.5; }
    .inv-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
    .inv-badge {
      display: grid; place-items: center; width: 30px; height: 30px; font-size: 1.1rem;
      background: var(--cs-paper); border: 2px solid var(--cs-ink); border-radius: 50%;
    }

    .inv-pool-col { display: grid; gap: 8px; min-width: 0; }
    .inv-tabs { display: flex; gap: 6px; }
    .inv-tab {
      flex: 1; font: inherit; font-weight: 900; font-size: 0.9rem; cursor: pointer;
      background: var(--cs-paper); color: var(--cs-ink);
      border: 2.5px solid var(--cs-ink); border-radius: 8px 8px 0 0; padding: 8px 10px;
    }
    .inv-tab small { opacity: 0.6; font-weight: 800; }
    .inv-tab.on { background: var(--cs-mint); color: #fff; box-shadow: 2px 2px 0 var(--cs-ink); }
    .inv-filters { display: flex; flex-wrap: wrap; gap: 5px; }
    .inv-chip {
      font: inherit; font-size: 0.74rem; font-weight: 800; cursor: pointer;
      background: transparent; color: var(--cs-ink);
      border: 2px solid var(--cs-ink); border-radius: 999px; padding: 3px 10px;
    }
    .inv-chip.on { background: var(--cs-ink); color: var(--cs-paper); }

    .inv-pool {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 7px;
      align-content: start;
      min-height: 150px;
      max-height: 280px;
      overflow-y: auto;
      background: rgba(36, 28, 26, 0.07);
      border: 2px dashed rgba(36, 28, 26, 0.35);
      border-radius: 10px;
      padding: 8px;
    }
    .inv-pool .empty { grid-column: 1 / -1; margin: 6px; text-align: center; }
    .inv-window.dragging .inv-pool { border-color: var(--cs-mint); background: rgba(47,157,143,0.12); }
    .inv-tile {
      position: relative;
      display: grid; justify-items: center; align-content: center; gap: 2px;
      min-height: 72px; padding: 6px 3px 4px;
      background: var(--cs-paper); color: var(--cs-ink);
      border: 2.5px solid var(--tier-normal); border-radius: 8px; box-shadow: 2px 2px 0 var(--cs-ink);
      font: inherit; cursor: pointer;
    }
    .inv-tile.gq-schlecht  { border-color: var(--tier-schlecht); }
    .inv-tile.gq-gut       { border-color: var(--tier-gut); }
    .inv-tile.gq-super     { border-color: var(--tier-super); }
    .inv-tile.gq-affix     { border-color: var(--tier-affix); }
    .inv-tile.gq-legendary { border-color: var(--tier-legendary); background: linear-gradient(160deg, #ffe9a8 0%, #f0b400 55%, #c98a00 100%); }
    .inv-tile:hover { transform: translateY(-1px); }
    .inv-tile.sel { outline: 3px solid var(--cs-gold); outline-offset: 1px; }
    .inv-tile-ico { font-size: 1.7rem; line-height: 1; }
    .inv-tile-name { font-size: 0.62rem; font-weight: 800; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
    .inv-tile-count {
      position: absolute; top: 2px; right: 3px; min-width: 18px; padding: 0 4px;
      background: var(--cs-ink); color: var(--cs-paper); border-radius: 9px;
      font-size: 0.68rem; font-weight: 900; line-height: 16px; text-align: center;
    }

    .inv-detail {
      background: var(--cs-paper); border: 2.5px solid var(--cs-ink); border-radius: 10px;
      box-shadow: 2px 2px 0 var(--cs-ink); padding: 10px 12px; min-height: 96px; color: var(--cs-ink);
      display: grid; gap: 6px; align-content: start;
    }
    .inv-detail p { margin: 0; }
    .inv-detail-head { display: flex; gap: 10px; align-items: center; }
    .inv-detail-head strong { display: block; font-size: 0.95rem; }
    .inv-detail-head small { color: var(--muted); font-weight: 700; }
    .inv-detail-ico {
      display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.7rem; flex: 0 0 auto;
      border: 3px solid var(--tier-normal); border-radius: 8px; background: rgba(36,28,26,0.06);
    }
    .inv-detail-ico.gq-schlecht { border-color: var(--tier-schlecht); }
    .inv-detail-ico.gq-gut { border-color: var(--tier-gut); }
    .inv-detail-ico.gq-super { border-color: var(--tier-super); }
    .inv-detail-ico.gq-affix { border-color: var(--tier-affix); }
    .inv-detail-ico.gq-legendary { border-color: var(--tier-legendary); background: linear-gradient(160deg, #ffe9a8 0%, #f0b400 55%, #c98a00 100%); }
    .inv-detail-effect { font-size: 0.85rem; font-weight: 700; }
    .inv-detail-cmp { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
    .inv-hint { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
    .inv-btn {
      justify-self: start; font: inherit; font-weight: 900; cursor: pointer;
      background: var(--cs-mint); color: #fff; border: 2.5px solid var(--cs-ink); border-radius: 8px;
      box-shadow: 2px 2px 0 var(--cs-ink); padding: 7px 18px;
    }
    .inv-btn:disabled { opacity: 0.45; cursor: not-allowed; }

    /* ── Item-Visualisierung: Slot-Badge + Rarity-Glanz im Item-Rahmen ──
       Karten bekommen eine zarte Farbwäsche je Qualitätsstufe (nicht nur
       Rahmenfarbe) und Legendaries zusätzlich einen animierten Glanz-Sweep,
       damit Rarity auf einen Blick erkennbar ist, auch ohne den Rahmen genau
       zu lesen. Inhalt (Icon/Name/Zähler) bekommt z-index:1, damit er über
       dem Glanz-Sweep (z-index:0) lesbar bleibt. */
    .inv-tile, .inv-slot, .inv-detail-ico { overflow: hidden; }
    .inv-detail-ico { position: relative; }
    .inv-tile-ico, .inv-tile-name, .inv-tile-count,
    .inv-slot-ico, .inv-slot-label, .ico-txt { position: relative; z-index: 1; }

    .item-slot-badge {
      position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
      background: var(--cs-ink); border: 2px solid var(--cs-paper); border-radius: 5px;
      display: grid; place-items: center; z-index: 2; pointer-events: none;
    }
    .item-slot-badge i { position: relative; display: block; box-sizing: border-box; }
    .item-slot-badge.is-head i      { width: 8px; height: 3px; background: #fbbf24; border-radius: 2px; }
    .item-slot-badge.is-clothing i  { width: 7px; height: 8px; background: #60a5fa; border-radius: 2px 2px 4px 4px; }
    .item-slot-badge.is-shoes i     { width: 9px; height: 4px; background: #f8fafc; border-bottom: 2px solid #ef4444; border-radius: 2px 2px 1px 1px; }
    .item-slot-badge.is-weapon i    { width: 6px; height: 8px; background: #c79a5b; border-radius: 1px; box-shadow: inset 0 0 0 1px #8a6a3a; }

    /* Qualitätswäsche — alle Stufen, nicht nur legendär */
    .inv-tile.gq-schlecht  { background: linear-gradient(160deg, rgba(154,160,166,0.22), var(--cs-paper) 65%); }
    .inv-tile.gq-gut       { background: linear-gradient(160deg, rgba(67,160,71,0.20), var(--cs-paper) 65%); }
    .inv-tile.gq-super     { background: linear-gradient(160deg, rgba(30,136,229,0.20), var(--cs-paper) 65%); }
    .inv-tile.gq-affix     { background: linear-gradient(160deg, rgba(142,68,173,0.22), var(--cs-paper) 65%); }
    .inv-slot.filled.gq-schlecht  { background: rgba(154,160,166,0.28); }
    .inv-slot.filled.gq-gut       { background: rgba(67,160,71,0.26); }
    .inv-slot.filled.gq-super     { background: rgba(30,136,229,0.26); }
    .inv-slot.filled.gq-affix     { background: rgba(142,68,173,0.28); }
    .inv-detail-ico.gq-schlecht { background: rgba(154,160,166,0.22); }
    .inv-detail-ico.gq-gut      { background: rgba(67,160,71,0.18); }
    .inv-detail-ico.gq-super    { background: rgba(30,136,229,0.18); }
    .inv-detail-ico.gq-affix    { background: rgba(142,68,173,0.20); }

    /* Legendär: eigener Glanz-Sweep statt nur Rahmenfarbe */
    .inv-tile.gq-legendary::before,
    .inv-slot.filled.gq-legendary::before,
    .inv-detail-ico.gq-legendary::before {
      content: "";
      position: absolute; inset: -60%;
      background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.85) 45%, rgba(255,221,110,0.95) 55%, transparent 72%);
      background-size: 240% 240%;
      animation: itemGlanzSweep 2.6s linear infinite;
      z-index: 0;
      pointer-events: none;
    }
    @keyframes itemGlanzSweep {
      0%   { background-position: -130% -130%; }
      100% { background-position: 130% 130%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .inv-tile.gq-legendary::before,
      .inv-slot.filled.gq-legendary::before,
      .inv-detail-ico.gq-legendary::before { animation: none; opacity: 0.5; }
    }

    /* ── Legendäre Item-Icons: eigene kleine CSS-Grafik je Legendary ──
       Ersetzt das generische Emoji nur bei Legendaries (invIconHtml in
       game.js) — der gearCatalog-Key ist 1:1 der legendaryCatalog-Key, also
       reicht er als Klassen-Suffix (.leg-ico-<key>). Jedes Icon besteht aus
       dem Host (eigener Hintergrund/Radius möglich) + ::before/::after +
       zwei <i class="a"/"b">-Kindern — reine Formen (keine Bilder), im
       selben flachen Pixel-Art-Stil wie .gv-* (Sprite-Overlay). Die dunkle
       Kreis-Aura im Host sorgt für Kontrast, egal welche Icon-Eigenfarbe
       auf dem goldenen Legendary-Kartenhintergrund landet. */
    .leg-ico {
      position: relative;
      display: inline-block;
      width: 1em; height: 1em;
      vertical-align: middle;
      flex-shrink: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(35,18,0,0.38) 0%, rgba(35,18,0,0.38) 55%, transparent 72%);
      filter: drop-shadow(0 0 1.5px rgba(240,180,0,0.45));
    }
    .leg-ico::before, .leg-ico::after { content: ""; position: absolute; display: block; }
    .leg-ico i.a, .leg-ico i.b { position: absolute; display: block; }

    .leg-ico-donabedians_notizbuch { background: radial-gradient(circle, rgba(35,18,0,0.38) 0%, rgba(35,18,0,0.38) 55%, transparent 72%), #2b6cb0; border-radius: 2px 5px 5px 2px; }
    .leg-ico-donabedians_notizbuch::before { left: 8%; top: 10%; width: 78%; height: 80%; background: #fdf3e1; border-radius: 1px; }
    .leg-ico-donabedians_notizbuch::after  { left: 0; top: 0; width: 16%; height: 100%; background: repeating-linear-gradient(0deg, #1a4480 0 14%, transparent 14% 28%); }

    .leg-ico-gluecksstern::before {
      left: 2%; top: 2%; width: 96%; height: 96%;
      background: linear-gradient(135deg, #fff6c8, #f0b400);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

    .leg-ico-schutzengel::before { left: 30%; top: 0; width: 40%; height: 22%; border: 2px solid #fff6c8; border-radius: 50%; box-sizing: border-box; }
    .leg-ico-schutzengel::after  { left: 35%; top: 30%; width: 30%; height: 60%; background: #eef0ec; border-radius: 50% 50% 20% 20%; }
    .leg-ico-schutzengel i.a { left: 0;   top: 35%; width: 40%; height: 45%; background: #cfd6e4; clip-path: polygon(100% 0, 0 30%, 30% 100%, 100% 60%); }
    .leg-ico-schutzengel i.b { left: 60%; top: 35%; width: 40%; height: 45%; background: #cfd6e4; clip-path: polygon(0 0, 100% 30%, 70% 100%, 0 60%); }

    .leg-ico-zweite_haut { background: radial-gradient(circle, rgba(35,18,0,0.38) 0%, rgba(35,18,0,0.38) 55%, transparent 72%), rgba(186,230,253,0.65); border: 2px solid rgba(96,165,250,0.9); border-radius: 30% 30% 10% 10%; box-sizing: border-box; }
    .leg-ico-zweite_haut::before { left: 46%; top: 0; width: 8%; height: 100%; background: rgba(59,130,246,0.7); }
    .leg-ico-zweite_haut::after  { left: 10%; top: 12%; width: 16%; height: 16%; background: #1d4ed8; border-radius: 50%; box-shadow: 44% 0 0 #1d4ed8; }

    .leg-ico-lebensspender { animation: legHeartPulse 1.4s ease-in-out infinite; }
    .leg-ico-lebensspender::before, .leg-ico-lebensspender::after { width: 55%; height: 55%; top: 10%; background: #ff5577; border-radius: 50% 50% 0 0; }
    .leg-ico-lebensspender::before { left: 0;   transform: rotate(-45deg); transform-origin: bottom right; }
    .leg-ico-lebensspender::after  { left: 45%; transform: rotate(45deg);  transform-origin: bottom left; }
    @keyframes legHeartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

    .leg-ico-the_flash::before {
      left: 18%; top: 0; width: 64%; height: 100%;
      background: linear-gradient(180deg, #fff066, #f5c400);
      clip-path: polygon(60% 0, 10% 55%, 45% 55%, 35% 100%, 90% 40%, 55% 40%);
    }

    .leg-ico-tanzschuh::before { left: 6%;  top: 34%; width: 74%; height: 40%; background: #f9a8d4; border-radius: 10% 60% 60% 60% / 50% 70% 70% 50%; transform: rotate(-6deg); }
    .leg-ico-tanzschuh::after  { left: 50%; top: 16%; width: 36%; height: 14%; background: #f472b6; border-radius: 40%; transform: rotate(-20deg); }
    .leg-ico-tanzschuh i.a     { left: 58%; top: 6%;  width: 11%; height: 11%; background: #be185d; border-radius: 50%; }

    .leg-ico-air_jordans::before { left: 4%;  top: 46%; width: 68%; height: 26%; background: #f8fafc; border-bottom: 3px solid #1d4ed8; border-radius: 4px 10px 2px 2px; box-sizing: border-box; }
    .leg-ico-air_jordans::after  { left: 66%; top: 8%;  width: 30%; height: 30%; background: radial-gradient(circle at 35% 35%, #fb923c, #c2410c); border-radius: 50%; box-shadow: inset 0 0 0 1px #7c2d12; }

    .leg-ico-ruhepuls::before { left: 35%; top: 5%;  width: 30%; height: 30%; background: #5eead4; border-radius: 50%; }
    .leg-ico-ruhepuls::after  { left: 10%; top: 40%; width: 80%; height: 54%; background: #2dd4bf; border-radius: 50% 50% 10% 10% / 60% 60% 10% 10%; }
    .leg-ico-ruhepuls i.a     { left: 6%;  top: 66%; width: 88%; border-top: 2px dashed rgba(94,234,212,0.65); }

    .leg-ico-dornenklinge::before { left: 35%; top: 0;   width: 30%; height: 82%; background: linear-gradient(180deg, #86efac, #16a34a); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
    .leg-ico-dornenklinge::after  { left: 45%; top: 80%; width: 10%; height: 20%; background: #7c3f1d; }
    .leg-ico-dornenklinge i.a { left: 8%;  top: 32%; width: 20%; height: 9%; background: #16a34a; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
    .leg-ico-dornenklinge i.b { left: 72%; top: 48%; width: 20%; height: 9%; background: #16a34a; clip-path: polygon(0 0, 100% 50%, 0 100%); }

    .leg-ico-enigma::before {
      left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
      background: conic-gradient(from 0deg, #a855f7, #7c3aed, #a855f7 60%, transparent 60%);
      -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%);
              mask: radial-gradient(circle, transparent 28%, #000 30%);
      animation: legEnigmaSpin 3s linear infinite;
    }
    @keyframes legEnigmaSpin { to { transform: rotate(360deg); } }

    .leg-ico-grossvaters_kruckstock::before { left: 45%; top: 15%; width: 10%; height: 80%; background: #a9793f; border-radius: 2px; }
    .leg-ico-grossvaters_kruckstock::after  { left: 20%; top: 0;   width: 35%; height: 30%; border: 3px solid #a9793f; border-right: none; border-bottom: none; border-radius: 60% 0 0 0; box-sizing: border-box; }

    .leg-ico-barista_buch::before { left: 5%;  top: 35%; width: 90%; height: 55%; background: #8a6a3a; border-radius: 2px; }
    .leg-ico-barista_buch::after  { left: 12%; top: 40%; width: 76%; height: 42%; background: #fdf3e1; clip-path: polygon(0 0, 48% 15%, 52% 15%, 100% 0, 100% 100%, 52% 85%, 48% 85%, 0 100%); }
    .leg-ico-barista_buch i.a { left: 35%; top: 0; width: 30%; height: 28%; background: #c08552; border-radius: 0 0 50% 50% / 0 0 70% 70%; }

    .leg-ico-brandneue_tanzschuhe::before { left: 10%; top: 35%; width: 60%; height: 25%; background: #ec4899; border-radius: 30% 50% 20% 10%; }
    .leg-ico-brandneue_tanzschuhe::after  { left: 60%; top: 55%; width: 10%; height: 40%; background: #be185d; transform: skewX(-10deg); }
    .leg-ico-brandneue_tanzschuhe i.a { left: 60%; top: 28%; width: 11%; height: 11%; background: #fff; border-radius: 50%; box-shadow: 0 0 2px #fff; }

    .leg-ico-mammutfell_kasack { background: radial-gradient(circle, rgba(35,18,0,0.38) 0%, rgba(35,18,0,0.38) 55%, transparent 72%), #8a6a3a; border-radius: 30% 30% 15% 15%; box-shadow: inset 0 0 0 2px #5c4423; }
    .leg-ico-mammutfell_kasack::before { left: 5%;  top: 60%; width: 90%; height: 20%; background: repeating-linear-gradient(90deg, #a9793f 0 10%, #8a6a3a 10% 20%); }
    .leg-ico-mammutfell_kasack::after  { left: 0;   top: 5%;  width: 30%; height: 14%; background: #fdf3e1; border-radius: 50% 10% 10% 50%; transform: rotate(-20deg); }
    .leg-ico-mammutfell_kasack i.a     { left: 70%; top: 5%;  width: 30%; height: 14%; background: #fdf3e1; border-radius: 10% 50% 50% 10%; transform: rotate(20deg); }

    .leg-ico-urzeit_stethoskop::before { left: 15%; top: 44%; width: 70%; height: 12%; background: #f1e9d8; border-radius: 4px; }
    .leg-ico-urzeit_stethoskop::after  { left: 5%;  top: 30%; width: 20%; height: 40%; background: #f1e9d8; border-radius: 50%; }
    .leg-ico-urzeit_stethoskop i.a { left: 75%; top: 30%; width: 20%; height: 40%; background: #f1e9d8; border-radius: 50%; }

    .leg-ico-dino_slipper::before { left: 30%; top: 45%; width: 40%; height: 45%; background: #4ade80; border-radius: 50% 50% 40% 40%; }
    .leg-ico-dino_slipper::after  { left: 15%; top: 10%; width: 16%; height: 30%; background: #4ade80; border-radius: 50% 50% 50% 10%; }
    .leg-ico-dino_slipper i.a { left: 42%; top: 0;   width: 16%; height: 35%; background: #4ade80; border-radius: 50%; }
    .leg-ico-dino_slipper i.b { left: 69%; top: 10%; width: 16%; height: 30%; background: #4ade80; border-radius: 50% 50% 10% 50%; }

    .leg-ico-urzeit_beschwoerungsstandard::before { left: 46%; top: 30%; width: 8%;  height: 70%; background: #c79a5b; }
    .leg-ico-urzeit_beschwoerungsstandard::after  { left: 25%; top: 0;   width: 50%; height: 40%; background: #f1e9d8; border-radius: 50% 50% 40% 40%; }
    .leg-ico-urzeit_beschwoerungsstandard i.a { left: 32%; top: 14%; width: 11%; height: 11%; background: #1c120c; border-radius: 50%; box-shadow: 25% 0 0 #1c120c; }

    @media (prefers-reduced-motion: reduce) {
      .leg-ico-lebensspender { animation: none; }
      .leg-ico-enigma::before { animation: none; }
    }

    @media (max-width: 720px) {
      .inv-window { --inv-s: 2; grid-template-columns: 1fr; gap: 12px; }
      .inv-doll { grid-template-columns: 54px auto 54px; grid-template-rows: 54px auto 54px; gap: 6px; padding: 8px; }
      .inv-slot { width: 54px; height: 54px; }
      .inv-slot-ico { font-size: 1.6rem; }
      .inv-pool { max-height: 220px; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       Ausrüstung auf dem Sprite (px-gear) — Koordinaten im 54×74-Raster des Pixel-Avatars
       ═══════════════════════════════════════════════════════════════════ */
    .px-gear { z-index: 7; pointer-events: none; }
    .px-gear i, .px-gear::before, .px-gear::after { content: ""; display: block; position: absolute; }
    .px-gear i { display: none; }
    /* Glanz nach Qualität / Schmiedestufe */
    .px-gear.gq-gut       { filter: drop-shadow(0 0 1px #4ade80); }
    .px-gear.gq-super     { filter: drop-shadow(0 0 1.5px #60a5fa); }
    .px-gear.gq-affix     { filter: drop-shadow(0 0 1.5px #c084fc); }
    .px-gear.gq-legendary { filter: drop-shadow(0 0 2px #fbbf24); }
    .px-gear.gg-bronze    { filter: drop-shadow(0 0 1.5px #cd7f32); }
    .px-gear.gg-silber    { filter: drop-shadow(0 0 1.5px #e5e7eb); }
    .px-gear.gg-gold      { filter: drop-shadow(0 0 2px #facc15); }

    /* Kopf: Pflegehaube — weiße Haube mit rotem Kreuz */
    .gv-haube { left: 14px; top: 1px; width: 26px; height: 10px; background: #f8fafc; border-radius: 6px 6px 1px 1px; box-shadow: inset 0 -2px 0 #cbd5e1; }
    .gv-haube::after { left: 11px; top: 2px; width: 4px; height: 5px;
      background: linear-gradient(#e11d48, #e11d48) center / 4px 1.5px no-repeat, linear-gradient(#e11d48, #e11d48) center / 1.5px 5px no-repeat; }
    /* Kopf: Lupenbrille — Band + zwei Gläser vor den Augen */
    .gv-lupenbrille { left: 16px; top: 25px; width: 22px; height: 2px; background: #374151; }
    .gv-lupenbrille::before, .gv-lupenbrille::after {
      top: -3px; width: 9px; height: 8px; box-sizing: border-box;
      background: rgba(147, 197, 253, 0.5); border: 1.5px solid #1f2937; border-radius: 2px; }
    .gv-lupenbrille::before { left: 0; }
    .gv-lupenbrille::after { right: 0; }
    /* Kopf: Standard / Legendär — goldener Stirnreif */
    .gv-slot-head.gv-generic, .gv-slot-head.gv-legendary { left: 15px; top: 5px; width: 24px; height: 3px; background: #fbbf24; box-shadow: 0 -2px 0 -0.5px #fde68a; }

    /* Körper: Kassack — Brusttasche mit Stift (die Kassack-Farbe bleibt die der Garderobe) */
    .gv-kassack { left: 17px; top: 50px; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.92); border-radius: 1px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18); }
    .gv-kassack::before { left: 5px; top: -2px; width: 2px; height: 5px; background: #2563eb; }
    .gv-kassack::after { left: 1px; top: 4px; width: 6px; height: 1px; background: rgba(0, 0, 0, 0.18); }
    /* Körper: Schutzkittel — durchscheinender hellblauer Überwurf */
    .gv-schutzkittel { left: 9px; top: 44px; width: 36px; height: 26px; box-sizing: border-box;
      background: rgba(186, 230, 253, 0.5); border: 1px solid rgba(96, 165, 250, 0.9); border-radius: 4px 4px 1px 1px; }
    .gv-schutzkittel::before { left: 16px; top: 0; width: 1px; height: 100%; background: rgba(59, 130, 246, 0.7); }
    .gv-schutzkittel::after { left: 12px; top: 8px; width: 2px; height: 2px; background: #1d4ed8; box-shadow: 8px 0 0 #1d4ed8, 0 6px 0 #1d4ed8, 8px 6px 0 #1d4ed8; }
    /* Körper: Standard / Legendär — Umhang */
    .gv-slot-clothing.gv-generic, .gv-slot-clothing.gv-legendary { left: 10px; top: 44px; width: 34px; height: 26px; background: rgba(124, 58, 237, 0.42); border-radius: 4px 4px 8px 8px; }

    /* Füße: Laufschuhe — weiße Sneaker mit roter Sohle */
    .gv-laufschuhe { left: 14px; top: 83px; width: 26px; height: 6px; }
    .gv-laufschuhe::before, .gv-laufschuhe::after { top: 0; width: 12px; height: 6px; box-sizing: border-box;
      background: #f8fafc; border-bottom: 2px solid #ef4444; border-radius: 4px 4px 1px 1px; }
    .gv-laufschuhe::before { left: 0; }
    .gv-laufschuhe::after { left: 14px; }
    /* Füße: Stationsroller — orange Rollschuhe mit Rädern */
    .gv-stationsroller { left: 13px; top: 81px; width: 28px; height: 9px; }
    .gv-stationsroller::before, .gv-stationsroller::after { top: 0; width: 13px; height: 9px;
      background:
        radial-gradient(circle at 3px 7.5px, #111827 1.6px, transparent 2px),
        radial-gradient(circle at 10px 7.5px, #111827 1.6px, transparent 2px),
        linear-gradient(#fb923c, #fb923c) 0 0 / 100% 5px no-repeat;
      border-radius: 3px 3px 0 0; }
    .gv-stationsroller::before { left: 0; }
    .gv-stationsroller::after { left: 15px; }
    /* Füße: Standard / Legendär — goldene Schuhe */
    .gv-slot-shoes.gv-generic, .gv-slot-shoes.gv-legendary { left: 14px; top: 83px; width: 26px; height: 6px; }
    .gv-slot-shoes.gv-generic::before, .gv-slot-shoes.gv-legendary::before,
    .gv-slot-shoes.gv-generic::after, .gv-slot-shoes.gv-legendary::after { top: 0; width: 12px; height: 6px; background: #fbbf24; border-radius: 4px 4px 1px 1px; }
    .gv-slot-shoes.gv-generic::before, .gv-slot-shoes.gv-legendary::before { left: 0; }
    .gv-slot-shoes.gv-generic::after, .gv-slot-shoes.gv-legendary::after { left: 14px; }

    /* Hände: Pflegefachbuch — blaues Buch in der Hand */
    .gv-fachbuch { left: 44px; top: 57px; width: 10px; height: 13px; background: #2563eb; border-radius: 1px 2px 2px 1px; box-shadow: inset 2px 0 0 #1e3a8a, inset -1px 0 0 #f8fafc; }
    .gv-fachbuch::before { left: 4px; top: 3px; width: 4px; height: 1px; background: #f8fafc; box-shadow: 0 3px 0 #f8fafc, 0 6px 0 #f8fafc; }
    /* Hände: Expertenstandard — Klemmbrett */
    .gv-expertenstandard { left: 44px; top: 56px; width: 11px; height: 14px; background: #c79a5b; border-radius: 1px; box-shadow: inset 0 0 0 1px #8a6a3a; }
    .gv-expertenstandard::before { left: 1px; top: 3px; width: 9px; height: 10px; background: #fdf3e1; }
    .gv-expertenstandard::after { left: 3px; top: -1px; width: 5px; height: 3px; background: #4b5563; border-radius: 1px; }
    /* Hände: Standard / Legendär — leuchtende Kugel */
    .gv-slot-weapon.gv-generic, .gv-slot-weapon.gv-legendary { left: 45px; top: 58px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #fbbf24 60%, #f59e0b); }

    /* ── Legendäre Sprite-Optik: eigene Form je Item statt der generischen
       Standard-Legendary-Optik oben (.gv-slot-*.gv-legendary — bleibt als
       Fallback stehen, falls mal ein neues Legendary ohne eigene .gv-<key>-
       Regel drankommt). Koordinaten im selben 54×74-Raster wie die GEAR_
       VISUAL_BASES-Optiken oben: Hände x≈44-55/y≈52-74, Körper x≈9-46/
       y≈44-70, Füße x≈13-42/y≈81-90. Nur Host + ::before + ::after
       (keine <i>, die sind bei .px-gear per Default ausgeblendet). Der
       Gold-Glanz (gq-legendary) kommt automatisch obendrauf. ── */

    /* Hände */
    .gv-donabedians_notizbuch { left: 44px; top: 56px; width: 10px; height: 14px; background: #1d4ed8; border-radius: 1px 2px 2px 1px; box-shadow: inset 2px 0 0 #0c2a7a, inset -1px 0 0 #fbbf24; }
    .gv-donabedians_notizbuch::before { left: 3px; top: 3px; width: 4px; height: 1px; background: #fbbf24; box-shadow: 0 3px 0 #fbbf24, 0 6px 0 #fbbf24; }

    .gv-gluecksstern { left: 45px; top: 55px; width: 11px; height: 11px; background: linear-gradient(135deg, #fff6c8, #f0b400); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

    .gv-dornenklinge { left: 45px; top: 52px; width: 9px; height: 20px; background: linear-gradient(180deg, #86efac, #16a34a); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(18deg); }
    .gv-dornenklinge::before { left: -3px; top: 7px;  width: 5px; height: 3px; background: #16a34a; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
    .gv-dornenklinge::after  { left: 7px;  top: 12px; width: 5px; height: 3px; background: #16a34a; clip-path: polygon(0 0, 100% 50%, 0 100%); }

    .gv-grossvaters_kruckstock { left: 48px; top: 48px; width: 3px; height: 24px; background: #a9793f; }
    .gv-grossvaters_kruckstock::before { left: -5px; top: -6px; width: 11px; height: 9px; border: 2.5px solid #a9793f; border-right: none; border-bottom: none; border-radius: 60% 0 0 0; box-sizing: border-box; }

    .gv-barista_buch { left: 44px; top: 58px; width: 10px; height: 12px; background: #8a6a3a; border-radius: 1px; }
    .gv-barista_buch::before { left: 1px; top: 1px;  width: 8px; height: 9px; background: #fdf3e1; }
    .gv-barista_buch::after  { left: 1px; top: -5px; width: 5px; height: 5px; background: #c08552; border-radius: 0 0 50% 50%; }

    .gv-urzeit_stethoskop { left: 44px; top: 60px; width: 11px; height: 4px; background: #f1e9d8; border-radius: 2px; }
    .gv-urzeit_stethoskop::before { left: -2px; top: -3px; width: 6px; height: 10px; background: #f1e9d8; border-radius: 50%; }
    .gv-urzeit_stethoskop::after  { left: 7px;  top: -3px; width: 6px; height: 10px; background: #f1e9d8; border-radius: 50%; }

    .gv-urzeit_beschwoerungsstandard { left: 48px; top: 50px; width: 3px; height: 22px; background: #c79a5b; }
    .gv-urzeit_beschwoerungsstandard::before { left: -4px; top: -9px; width: 11px; height: 9px; background: #f1e9d8; border-radius: 50% 50% 40% 40%; }
    .gv-urzeit_beschwoerungsstandard::after  { left: -1px; top: -6px; width: 2px; height: 2px; background: #1c120c; border-radius: 50%; box-shadow: 5px 0 0 #1c120c; }

    /* Körper */
    /* Von vorne: strahlend helle Robe (Glanz-Filter). Die Flügel ragen seitlich
       raus und bleiben daher in BEIDEN Ansichten sichtbar — siehe Rückansicht
       unten, wo nur die Robe verschwindet und die Flügel größer/zentraler stehen. */
    .gv-schutzengel { left: 9px; top: 44px; width: 36px; height: 26px; background: rgba(255,255,255,0.75); border: 1px solid rgba(240,180,0,0.5); border-radius: 40% 40% 10% 10%; box-sizing: border-box; filter: drop-shadow(0 0 2px rgba(255,255,255,0.95)) drop-shadow(0 0 4px rgba(255,236,170,0.65)); }
    .gv-schutzengel::before { left: -6px; top: 2px; width: 14px; height: 18px; background: rgba(207,214,228,0.85); clip-path: polygon(100% 0, 0 35%, 30% 100%, 100% 70%); }
    .gv-schutzengel::after  { left: 28px; top: 2px; width: 14px; height: 18px; background: rgba(207,214,228,0.85); clip-path: polygon(0 0, 100% 35%, 70% 100%, 0 70%); }

    .gv-zweite_haut { left: 9px; top: 44px; width: 36px; height: 26px; background: linear-gradient(160deg, rgba(124,58,237,0.5), rgba(91,33,182,0.65)); border-radius: 35% 35% 15% 15%; }
    .gv-zweite_haut::before { left: 16px; top: 0; width: 4px; height: 26px; background: rgba(255,255,255,0.35); }
    .gv-zweite_haut::after  { left: 5px;  top: 4px; width: 4px; height: 4px; background: #c4b5fd; border-radius: 50%; box-shadow: 22px 0 0 #c4b5fd; }

    .gv-lebensspender { left: 9px; top: 44px; width: 36px; height: 26px; background: rgba(255,119,140,0.45); border-radius: 30% 30% 12% 12%; }
    .gv-lebensspender::before, .gv-lebensspender::after { width: 7px; height: 7px; top: 7px; background: #ff5577; border-radius: 50% 50% 0 0; }
    .gv-lebensspender::before { left: 12px; transform: rotate(-45deg); }
    .gv-lebensspender::after  { left: 17px; transform: rotate(45deg); }

    /* Helle Robe + kräftiger Teal-Rand — auf dem Standard-Kasack (ebenfalls Türkis)
       verschwand die vorige rein-teale Variante fast komplett (zu wenig Kontrast). */
    .gv-ruhepuls { left: 9px; top: 44px; width: 36px; height: 26px; background: rgba(240,253,250,0.85); border: 1.5px solid #0d9488; border-radius: 45% 45% 15% 15%; box-sizing: border-box; }
    .gv-ruhepuls::before { left: 16px; top: 0;   width: 4px;  height: 26px; background: #0d9488; }
    .gv-ruhepuls::after  { left: 0;   top: 13px; width: 36px; height: 0;    border-top: 1.5px dashed #0d9488; }

    .gv-enigma { left: 9px; top: 44px; width: 36px; height: 26px; border-radius: 40% 40% 10% 10%; background: conic-gradient(from 0deg, rgba(168,85,247,0.55), rgba(124,58,237,0.65), rgba(168,85,247,0.55)); }
    .gv-enigma::before { left: 14px; top: 6px; width: 8px; height: 8px; border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; box-sizing: border-box; }

    .gv-mammutfell_kasack { left: 9px; top: 44px; width: 36px; height: 26px; background: #8a6a3a; border-radius: 30% 30% 15% 15%; box-shadow: inset 0 0 0 1.5px #5c4423; }
    .gv-mammutfell_kasack::before { left: 0;   top: 16px; width: 36px; height: 10px; background: repeating-linear-gradient(90deg, #a9793f 0 6px, #8a6a3a 6px 12px); }
    .gv-mammutfell_kasack::after  { left: -2px; top: -3px; width: 10px; height: 6px; background: #fdf3e1; border-radius: 50% 10% 10% 50%; transform: rotate(-15deg); }

    /* ── Rückansicht (.px-facing-back, siehe renderDungeonGrid/baseFacing):
       die Körper-Legendaries sind als Front-Overlay gezeichnet (Robe, Herz,
       Ring, Stoßzahn …) — von hinten ergeben diese Details keinen Sinn und
       verdeckten bisher einfach die Rücken-Silhouette. Front-only-Teile aus,
       richtungsneutrale Teile (Fell, Nahtlinie, Anzug) bleiben. Schutzengel:
       Robe aus, Flügel bleiben UND werden größer/zentrierter — "von hinten
       sieht man die Flügel". ── */
    .px-facing-back .gv-schutzengel {
      background: transparent; border: none; filter: none;
    }
    .px-facing-back .gv-schutzengel::before { left: -8px; top: -1px; width: 17px; height: 22px; filter: drop-shadow(0 0 2px rgba(255,255,255,0.85)); }
    .px-facing-back .gv-schutzengel::after  { left: 27px; top: -1px; width: 17px; height: 22px; filter: drop-shadow(0 0 2px rgba(255,255,255,0.85)); }

    .px-facing-back .gv-zweite_haut::after { display: none; }

    .px-facing-back .gv-lebensspender::before,
    .px-facing-back .gv-lebensspender::after { display: none; }

    .px-facing-back .gv-enigma::before { display: none; }

    .px-facing-back .gv-mammutfell_kasack::after { display: none; }

    /* Füße (zwei Blöcke wie .gv-laufschuhe) */
    .gv-the_flash::before, .gv-the_flash::after { top: 83px; width: 12px; height: 6px; background: #fef08a; border-bottom: 2px solid #f5c400; border-radius: 4px 4px 1px 1px; box-sizing: border-box; }
    .gv-the_flash::before { left: 14px; }
    .gv-the_flash::after  { left: 28px; }

    .gv-tanzschuh::before, .gv-tanzschuh::after { top: 84px; width: 10px; height: 5px; background: #f9a8d4; border-radius: 50% 50% 30% 30%; }
    .gv-tanzschuh::before { left: 16px; }
    .gv-tanzschuh::after  { left: 28px; }

    .gv-air_jordans::before, .gv-air_jordans::after { top: 81px; width: 13px; height: 9px; background: #f8fafc; border-bottom: 2px solid #fb923c; border-radius: 4px 4px 1px 1px; box-sizing: border-box; }
    .gv-air_jordans::before { left: 13px; }
    .gv-air_jordans::after  { left: 28px; }

    /* Kräftiges Lila statt Rosa — sonst kaum von .gv-tanzschuh (Ballerina) zu unterscheiden. */
    .gv-brandneue_tanzschuhe::before, .gv-brandneue_tanzschuhe::after { top: 82px; width: 11px; height: 6px; background: #9333ea; border-bottom: 2px solid #facc15; border-radius: 40% 50% 20% 10%; box-sizing: border-box; }
    .gv-brandneue_tanzschuhe::before { left: 15px; }
    .gv-brandneue_tanzschuhe::after  { left: 28px; }

    .gv-dino_slipper::before, .gv-dino_slipper::after { top: 82px; width: 13px; height: 8px; background: #4ade80; border-radius: 50% 50% 40% 40%; }
    .gv-dino_slipper::before { left: 13px; }
    .gv-dino_slipper::after  { left: 28px; }

    /* Minikarte: Flur-Figuren */
    .mini-cell { position: relative; }
    .mini-ent { position: absolute; right: 1px; bottom: 0; font-size: 0.55rem; line-height: 1; pointer-events: none; }
    .mini-ent-patient { color: #ef4444; font-size: 0.7rem; text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); }
    .mini-ent-hot { font-size: 0.75rem; animation: miniEntPulse 0.6s ease-in-out infinite; }
    .mini-ent-student { font-size: 0.6rem; }
    @keyframes miniEntPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }


    /* ═══ Kompakt-Layout für Smartphones (Erkundung): weniger UI, mehr Spielfeld ═══════════════════
       Hochformat ≤ 600px und flaches Querformat (≤ 480px Höhe): einreihige Menüleiste, kleine
       durchklickbare Minikarte, schlanker HUD, Log nur als schmaler Streifen — die Szene bekommt den Rest. */
    @media (orientation: portrait) and (max-width: 600px) {
      /* Menüleiste: eine Reihe, niedrig */
      .menu-popup-bar { flex-wrap: nowrap; }
      .mpb-btn { flex: 1 1 0; border-bottom: none !important; padding: 5px 1px 6px; gap: 1px; }
      .mpb-icon { font-size: 1.15rem; }
      .mpb-label { font-size: 0.5rem; letter-spacing: 0; }
      body:not(.in-combat) .panel, body:not(.in-combat) .side { padding-bottom: 54px; }
      .worldmap-grid { bottom: 54px; }
      .worldmap-campaign-panel { padding-bottom: 60px; }
      /* Szene füllt die freie Höhe; Steuer-/Logbereich nur so groß wie nötig */
      body.in-explore:not(.in-combat) .scene { flex: 1 1 auto; min-height: 0; }
      body.in-explore:not(.in-combat) .scene.topdown-mode { min-height: 0 !important; }
      body.in-explore:not(.in-combat) .main { flex: 0 0 auto; max-height: 74px; padding: 2px 6px 58px; }
      body.in-explore:not(.in-combat) .side { flex: 0 0 auto; max-height: 40px; overflow: hidden; }
      body.in-explore:not(.in-combat) .side .log-panel { height: auto; max-height: 40px; overflow-y: auto; font-size: 0.7rem; }
      /* HUD schlanker */
      .wolf-bar { min-height: 0; padding: 2px 8px; }
      .wolf-attrs { font-size: 0.62rem; line-height: 1.1; gap: 1px; }
      /* Gesicht links, LP/SP-Balken rechts daneben statt untereinander */
      body.in-explore:not(.in-combat) .wolf-main { flex-direction: row; align-items: center; gap: 6px; }
      body.in-explore:not(.in-combat) .wolf-center { padding: 0 6px; }
      body.in-explore:not(.in-combat) .wolf-hp-section { width: 96px; }
      body.in-explore:not(.in-combat) .wolf-left .wolf-stat-label { font-size: 0.55rem; }
      body.in-explore:not(.in-combat) .wolf-left .wolf-stat-value { font-size: 1rem; }
      /* Minikarte klein, halbtransparent, lässt Taps auf das Raster durch */
      .mini-map {
        grid-template-columns: repeat(6, 11px); gap: 2px; padding: 3px;
        border-width: 2px; border-radius: 7px; box-shadow: 2px 2px 0 var(--cs-ink);
        right: 6px; top: 6px; opacity: 0.88; pointer-events: none;
      }
      .mini-map .mini-cell { font-size: 0.45rem; }
      .mini-ent { font-size: 0.5rem; }
      .mini-ent-patient { font-size: 0.55rem; }
    }
    @media (orientation: landscape) and (max-height: 480px) {
      body.in-explore:not(.in-combat) .mini-map {
        grid-template-columns: repeat(6, 11px); gap: 2px; padding: 3px;
        border-width: 2px; border-radius: 7px; box-shadow: 2px 2px 0 var(--cs-ink);
        right: 6px; top: 6px; opacity: 0.88; pointer-events: none;
      }
      body.in-explore:not(.in-combat) .mini-map .mini-cell { font-size: 0.45rem; }
      body.in-explore:not(.in-combat) .wolf-bar { min-height: 0; padding: 2px 8px; }
      body:not(.in-combat) #menuPopupBar .mpb-btn { padding: 3px 2px 4px; gap: 0; }
      body:not(.in-combat) #menuPopupBar .mpb-icon { font-size: 1.05rem; }
      body:not(.in-combat) #menuPopupBar .mpb-label { font-size: 0.5rem; }
      /* Szene füllt die Höhe (die Mindesthöhe der Draufsicht sprengte sonst das Querformat) */
      body.in-explore:not(.in-combat):not(.in-quiz) .scene,
      body.in-explore:not(.in-combat):not(.in-quiz) .scene.topdown-mode { min-height: 0 !important; flex: 1 1 auto; height: auto; }
      body.in-explore:not(.in-combat):not(.in-quiz) .main:not(:has(.turn-box)) { display: none; }
      body.in-explore:not(.in-combat):not(.in-quiz) .shell { padding-bottom: 38px; }
      body.in-explore:not(.in-combat) .wolf-main { flex-direction: row; align-items: center; gap: 6px; }
      body.in-explore:not(.in-combat) .wolf-face-wrap { width: 30px; height: 30px; }
      body.in-explore:not(.in-combat) .wolf-attrs { font-size: 0.55rem; line-height: 1; }
    }

/* Truhen-Popup: Pixel-Truhe (geschlossen → offen mit Hüpfer) */
.chest-anim .chest-px { position: absolute; inset: 0; }
.chest-anim .chest-px .dg-chest-svg { width: 100%; height: 100%; display: block; overflow: visible; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.4)); }
.chest-anim .chest-px-open { opacity: 0; }
.chest-anim.is-open .chest-px-closed { opacity: 0; }
.chest-anim.is-open .chest-px-open { opacity: 1; animation: chestPxHop 0.5s ease-out; }
@keyframes chestPxHop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-10px) scale(1.06, 0.96); } 100% { transform: translateY(0) scale(1); } }
.chest-tier-gold .chest-px .dg-chest-svg, .super-chest-anim .chest-px .dg-chest-svg { filter: drop-shadow(0 0 8px rgba(255,215,64,0.8)); }
.chest-tier-metall .chest-px .dg-chest-svg { filter: drop-shadow(0 0 5px rgba(190,215,240,0.6)); }

/* Boss-Figuren als Pixelart (pixelart-boss.js) */
.pxb { display: block; height: auto; overflow: visible; image-rendering: pixelated; margin: 0 auto; }
.pxb-werwolf { width: 120px; filter: drop-shadow(0 0 10px rgba(168,85,247,0.8)); }
.pxb-dopamin { width: 104px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
.pxb-liebe { width: 100px; filter: drop-shadow(0 0 10px rgba(255,92,138,0.7)); }
.pxb-validator { width: 80px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
.pxb-leere { width: 100px; filter: drop-shadow(0 0 12px rgba(124,58,237,0.8)); }
.pxb-mumie { width: 90px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
.pxb-bot { width: 104px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
.pxb-bolt { animation: blitzZap 1.8s ease-in-out infinite; }
.pxb-bolt.b { animation-delay: 0.9s; }
.pxb-blink { animation: pxbBlink 0.9s steps(2) infinite; }
@keyframes pxbBlink { 0% { opacity: 1; } 100% { opacity: 0.25; } }
.pxb-ring.r1 { animation: pxbSpin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.pxb-ring.r2 { animation: pxbSpin 4s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
@keyframes pxbSpin { to { transform: rotate(360deg); } }
.pxb-heart { animation: pulsBeat 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .pxb-bolt, .pxb-blink, .pxb-ring, .pxb-heart { animation: none; } }

/* Spezialräume: das anklickbare Objekt in der Raummitte (Slotmaschine, Hantelbank …) */
.dg-special-prop { position: absolute; inset: -14% -18% -2% -18%; display: flex; align-items: flex-end; justify-content: center; z-index: 3; cursor: pointer; }
.dg-special-prop .dg-px-svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.45)) drop-shadow(0 0 6px rgba(255,214,90,0.55)); animation: spProp 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.dg-special-prop::after { content: "!"; position: absolute; top: -4%; right: 8%; width: 1.1em; height: 1.1em; line-height: 1.1em; text-align: center; font: 900 0.75rem/1.1em sans-serif; color: #2b1a0e; background: #ffd23c; border: 2px solid #2b1a0e; border-radius: 50%; animation: spBang 1s ease-in-out infinite alternate; }
.dg-special-prop:hover .dg-px-svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.45)) drop-shadow(0 0 10px rgba(255,230,120,0.95)); }
.dg-special-prop.is-used .dg-px-svg { animation: none; filter: grayscale(0.7) brightness(0.7) drop-shadow(0 2px 0 rgba(0,0,0,0.4)); }
.dg-special-prop.is-used::after { display: none; }
@keyframes spProp { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.03); } }
@keyframes spBang { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dg-special-prop .dg-px-svg, .dg-special-prop::after { animation: none; } }

/* Fußball auf dem Dorfplatz: echter Ball (Flugbogen), Tore, Schussbewegung */
.base-ball { position: absolute; pointer-events: none; z-index: 9; transition: left 0.62s linear, top 0.62s linear; }
.base-ball::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 38%; height: 10%; background: rgba(0,0,0,0.28); border-radius: 50%; transform: translateX(-50%); }
.base-ball .bb-in { position: absolute; left: 50%; bottom: 16%; width: 38%; aspect-ratio: 1; transform: translateX(-50%); z-index: 2; }
.base-ball .bb-svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.base-ball.flying .bb-in { animation: ballArc 0.62s ease-out; }
.base-ball.flying .bb-svg { animation: ballSpin 0.62s linear; }
@keyframes ballArc { 0% { transform: translateX(-50%) translateY(0); } 45% { transform: translateX(-50%) translateY(-120%); } 100% { transform: translateX(-50%) translateY(0); } }
@keyframes ballSpin { to { transform: rotate(540deg); } }
.base-goal { position: absolute; pointer-events: none; z-index: 6; }
.base-goal svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.3)); }
.base-goal.left svg { transform: scaleX(-1); }
.base-npc.is-kicking .dg-decor-npc-wrap { animation: baseKick 0.42s ease-out; }
@keyframes baseKick {
  0%   { transform: translateY(0) scaleX(var(--flip, 1)) rotate(0deg); }
  35%  { transform: translateY(-6%) scaleX(var(--flip, 1)) rotate(-9deg); }
  60%  { transform: translateY(-3%) translateX(10%) scaleX(var(--flip, 1)) rotate(10deg); }
  100% { transform: translateY(0) scaleX(var(--flip, 1)) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .base-ball.flying .bb-in, .base-ball.flying .bb-svg { animation: none; } }

/* Kampf: Angehörige helfen mit — klare Animation (Banner, Figur läuft ins Bild, Herzen zum Patienten, große +Zahl) */
.rel-anim { position: fixed; inset: 0; z-index: 99990; pointer-events: none; overflow: hidden; }
.rel-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(255,120,170,0.38), transparent 60%); animation: relScrim 2.6s ease-out forwards; }
.rel-banner {
  position: absolute; left: 50%; top: 9%; transform: translateX(-50%); white-space: nowrap; max-width: 94vw;
  background: #fff3f6; color: #7a1d3a; border: 3px solid #2b1a0e; border-radius: 12px; box-shadow: 4px 4px 0 #2b1a0e;
  font-weight: 900; font-size: clamp(0.95rem, 4vw, 1.4rem); line-height: 1.2; padding: 8px 18px; animation: relBanner 2.6s ease-out forwards;
}
.rel-runner { position: absolute; left: 22%; bottom: 24%; transform: scale(1.7); transform-origin: bottom center; animation: relRun 2.6s ease-out forwards; }
.rel-runner .pixel-avatar { animation: relHop 0.35s ease-in-out 3; }
.rel-bubble {
  position: absolute; left: 60%; bottom: 105%; width: max-content; max-width: 150px; background: #fff; color: #2b1a0e;
  border: 2px solid #2b1a0e; border-radius: 10px; padding: 3px 8px; font-weight: 800; font-size: 0.6rem; line-height: 1.2; animation: relBubble 2.6s ease-out forwards;
}
.rel-hearts { position: absolute; width: 0; height: 0; }
.rel-hearts i { position: absolute; left: 0; top: 0; font-style: normal; font-size: 1.4rem; opacity: 0; animation: relHeart 0.9s ease-in var(--d) forwards; filter: drop-shadow(0 0 6px rgba(255,90,140,0.9)); }
.rel-gain {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1; color: #ff4d86;
  text-shadow: 3px 3px 0 #2b1a0e, 0 0 18px rgba(255,160,190,0.9); text-align: center; opacity: 0; animation: relGain 1.5s ease-out 1.35s forwards;
}
.rel-gain small { display: block; font-size: 0.32em; letter-spacing: 0.08em; color: #fff; text-shadow: 1px 1px 0 #2b1a0e; }
@keyframes relScrim { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes relBanner { 0% { opacity: 0; transform: translate(-50%, -30px) scale(0.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 20% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes relRun { 0% { opacity: 0; transform: translateX(-70vw) scale(1.7); } 25% { opacity: 1; transform: translateX(0) scale(1.7); } 85% { opacity: 1; transform: translateX(0) scale(1.7); } 100% { opacity: 0; transform: translateX(6vw) scale(1.7); } }
@keyframes relHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes relBubble { 0%, 22% { opacity: 0; transform: scale(0.6); } 32% { opacity: 1; transform: scale(1.08); } 40% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes relHeart { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 15% { opacity: 1; } 100% { opacity: 0.9; transform: translate(var(--dx), var(--dy)) scale(1.1); } }
@keyframes relGain { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .rel-runner, .rel-runner .pixel-avatar, .rel-hearts i { animation-duration: 0.01s; } }

/* Glücksmaschine auf dem Smartphone: höchstens 2 Walzen sichtbar, der Rest dreht verdeckt als „+x“-Feld */
.slot-hidden-host { position: fixed; left: -9999px; top: 0; width: 160px; visibility: hidden; pointer-events: none; }
.slot-reels-stage.slot-compact { flex-wrap: nowrap; gap: 6px; padding: 10px; }
.slot-reels-stage.slot-compact .slot-reel-unit, .slot-reels-stage.slot-compact .slot-more { flex: 0 0 80px; }
.slot-reels-stage.slot-compact .slot-sep { font-size: 0.9rem; }
.slot-more {
  height: 264px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative;
  border-radius: 10px; background: var(--cs-ink); border: 3px solid var(--cs-ink); color: #ffe27a; text-align: center;
  box-shadow: 3px 3px 0 var(--cs-ink), inset 0 5px 14px rgba(0,0,0,0.65), inset 0 -5px 14px rgba(0,0,0,0.5);
  animation: slotReelIn 0.35s cubic-bezier(0.34,1.4,0.64,1) both;
}
.slot-more b { font-size: 2.1rem; line-height: 1; text-shadow: 2px 2px 0 #7a4a00; }
.slot-more small { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; color: #fff; }
.slot-more-q { font-size: 1.8rem; opacity: 0.85; }
.slot-more.is-spinning .slot-more-q { animation: slotMoreSpin 0.6s linear infinite; display: inline-block; }
.slot-more.is-spinning { background: linear-gradient(120deg, #2a1f3d, #3d2d63, #2a1f3d); background-size: 200% 200%; animation: slotBgShimmer 1.1s ease-in-out infinite; }
.slot-more-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: 1.5rem; line-height: 1.1; max-width: 70px; }
.slot-more.is-done .slot-more-q { display: none; }
.slot-more.is-done { border-color: #f4b942; }
@keyframes slotMoreSpin { to { transform: rotateY(360deg); } }
@media (max-height: 720px) { .slot-more { height: 180px; } .slot-more b { font-size: 1.6rem; } .slot-more-icons { font-size: 1.15rem; } }
@media (max-height: 560px) { .slot-more { height: 138px; } .slot-more b { font-size: 1.3rem; } }

/* Tablet/Desktop: immer ALLE Walzen zeigen — bei vielen Bonus-Walzen schrumpfen sie in der Breite (Höhe/Zellen bleiben, die Lande-Mathematik bleibt gleich) statt zu scrollen */
@media (min-width: 601px) and (min-height: 460px) {
  .loot-box.grand.slot-active .slot-reel-unit { flex: 0 1 calc(var(--slot-win-h) * 0.52); min-width: 58px; }
  .loot-box.grand.slot-active .slot-reels-stage { overflow-x: visible; }
  .loot-box.grand.slot-active .slot-reels-stage .slot-sep { flex: 0 0 auto; }
}

/* Brüchige Wand: deutlicher Pixel-Riss (fehlender Stein, Schutt), der alle paar Sekunden glimmt und Staub rieseln lässt */
.dg-crack {
  opacity: 1; background-color: transparent; background-image: var(--px-crack-h); background-size: 100% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; filter: drop-shadow(0 0 2px rgba(255,220,150,0.35)); animation: crackGlint 3.6s ease-in-out infinite;
}
.dg-crack.dg-crack-west, .dg-crack.dg-crack-east { background-image: var(--px-crack-v); top: 4%; bottom: 4%; width: 62%; }
.dg-crack.dg-crack-north, .dg-crack.dg-crack-south { left: 4%; right: 4%; height: 62%; }
.dg-crack::after {
  inset: auto; left: 32%; top: 46%; width: 3px; height: 3px; background: #d9c9a6;
  box-shadow: 9px -3px 0 #b9a77f, -7px 4px 0 #e6d8b8, 14px 5px 0 #cdbb94; opacity: 0; animation: crackDust 3.6s linear infinite;
}
.dg-crack-tap:hover .dg-crack, .dg-crack-tap:active .dg-crack { opacity: 1; filter: drop-shadow(0 0 7px rgba(255,235,170,0.95)) brightness(1.2); }
@keyframes crackGlint {
  0%, 68%, 100% { filter: drop-shadow(0 0 2px rgba(255,220,150,0.3)); }
  80% { filter: drop-shadow(0 0 8px rgba(255,235,170,0.95)) brightness(1.3); }
}
@keyframes crackDust { 0%, 62% { opacity: 0; transform: translateY(0); } 72% { opacity: 0.95; } 100% { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .dg-crack, .dg-crack::after { animation: none; } }

/* ── Pflegeheim-Architekt: Hinweise auf Karte und Raster ─────────────────────────────────────── */
.mini-cell, .map-cell { position: relative; }
.map-hint { position: absolute; width: 5px; height: 5px; border-radius: 1px; pointer-events: none; z-index: 4; animation: mapHintPulse 1.4s ease-in-out infinite; }
.map-hint.hint-chest { right: 1px; top: 1px; background: #ffd23c; box-shadow: 0 0 5px 1px rgba(255,210,60,0.95); }
.map-hint.hint-crack { left: 1px; top: 1px; background: #ff7a3c; box-shadow: 0 0 5px 1px rgba(255,122,60,0.95); }
.map-cell .map-hint { width: 6px; height: 6px; }
@keyframes mapHintPulse { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.25); } }
.dg-chest-sprite.chest-hint .dg-chest-svg { animation: chestHint 1.3s ease-in-out infinite; }
@keyframes chestHint {
  0%, 100% { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.38)) drop-shadow(0 0 2px rgba(255,230,120,0.5)); }
  50% { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.38)) drop-shadow(0 0 10px rgba(255,235,120,1)) brightness(1.2); }
}
.dg-crack.dg-crack-hint { animation: crackHint 1.4s ease-in-out infinite; }
@keyframes crackHint { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,150,70,0.6)); } 50% { filter: drop-shadow(0 0 11px rgba(255,170,80,1)) brightness(1.3); } }
@media (prefers-reduced-motion: reduce) { .map-hint, .dg-chest-sprite.chest-hint .dg-chest-svg, .dg-crack.dg-crack-hint { animation: none; } }

/* Spezialaktions-Animationen: Sicherheitswarnung, Wege frei halten */
.sa-sicher, .sa-wege { position: relative; width: 220px; height: 100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.sa-sw-hero { position: absolute; left: 14%; top: 50%; transform: translateY(-50%); animation: sa-mv-pump 0.5s 0.2s cubic-bezier(.34,1.56,.64,1) both; }
.sa-sw-vest { position: absolute; left: 36%; top: 6%; font-size: 1.9rem; opacity: 0; animation: sa-bubble-pop 0.4s 0.4s cubic-bezier(.34,1.56,.64,1) both; }
.sa-sw-ring { position: absolute; right: 12%; top: 50%; width: 54px; height: 54px; margin-top: -27px; border: 4px solid #ffb02e; border-radius: 50%; opacity: 0; }
.sa-sw-r1 { animation: saSwRing 1.1s 0.6s ease-out both; }
.sa-sw-r2 { animation: saSwRing 1.1s 0.95s ease-out both; }
.sa-sw-tag, .sa-wf-tag { position: absolute; bottom: -4px; left: 0; right: 0; text-align: center; font-weight: 900; font-size: 0.78rem; color: #ffb02e; text-shadow: 1px 1px 0 #2b1a0e; opacity: 0; animation: sa-bubble-pop 0.4s 1.2s both; }
.sa-wf-hero { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); animation: saWfRun 0.9s 0.3s cubic-bezier(.4,0,.2,1) both; }
.sa-wf-cone { position: absolute; font-size: 1.6rem; opacity: 0; }
.sa-wf-c1 { left: 42%; top: 16%; animation: saWfCone 0.5s 0.2s both, saWfAway 0.5s 0.9s forwards; }
.sa-wf-c2 { left: 50%; top: 46%; animation: saWfCone 0.5s 0.3s both, saWfAway 0.5s 1.0s forwards; }
.sa-wf-arrow { position: absolute; right: 10%; top: 28%; font-size: 1.8rem; opacity: 0; animation: sa-bubble-pop 0.4s 1.0s both; }
@keyframes saSwRing { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes saWfRun { from { transform: translateY(-50%) translateX(0); } to { transform: translateY(-50%) translateX(110px); } }
@keyframes saWfCone { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes saWfAway { to { opacity: 0; transform: translateX(26px) rotate(40deg); } }

/* ═══ Visuelle Ordnung: Meldungen, Basis-Menüs, Bauen-Knopf ═══════════════════════════════════════ */
/* Meldungen (Toasts): kompakt, eine nach der anderen, Zähler „+N“, Tippen überspringt, Balken zeigt die Restzeit */
.achievement-toast.show {
  align-items: center; animation: toastIn 0.28s ease-out both; cursor: pointer; display: flex; gap: 12px; overflow: hidden;
  padding: 10px 14px 12px; pointer-events: auto; text-align: left; top: 10px; width: min(430px, 92vw); z-index: 1500;
}
.achievement-toast-icon { flex: 0 0 auto; font-size: 1.8rem; margin: 0; }
.achievement-toast-body { display: block; flex: 1 1 auto; min-width: 0; }
.achievement-toast-title { font-size: 0.66rem; margin: 0 0 2px; }
.achievement-toast-text { font-size: clamp(0.8rem, 1.9vw, 0.92rem); line-height: 1.3; }
.achievement-toast-more { background: var(--cs-crimson); border: 2px solid var(--cs-ink); border-radius: 999px; color: #fff; flex: 0 0 auto; font-size: 0.72rem; padding: 2px 8px; }
.achievement-toast-more[hidden] { display: none; }
.achievement-toast.show::after {
  animation: toastBar var(--toast-ms, 4s) linear forwards; background: var(--cs-crimson); bottom: 0; content: ""; height: 4px; left: 0;
  position: absolute; transform-origin: left; width: 100%;
}
.toast-loot { display: grid; gap: 3px; margin-top: 6px; }
.toast-loot .base-loot-row { font-size: 0.78rem; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Basis-Menüs (Missionsboard, Squad, Lager, Gym …): füllen den ganzen Bildschirm wie das Bewohner-Menü, rotes Kreuz oben rechts.
   Nur der Wege-Editor bleibt als Karte neben dem Baufeld, weil man dort Felder antippt. */
.base-panel:not([data-view="wegedit"]):not([data-view=""]) {
  background: #fffdf5; border: 0; border-radius: 0; bottom: 0; box-shadow: none; display: flex; flex-direction: column; height: 100dvh; inset: 0;
  left: 0; margin: 0; max-height: none; position: fixed; right: 0; top: 0; width: 100vw; z-index: 500;
}
.base-panel:not([data-view="wegedit"]):not([data-view=""]) .base-panel-head {
  background: #e9f6df; border-bottom: 3px solid var(--cs-ink); font-size: 1.15rem; justify-content: center; padding: 14px 70px; position: relative; z-index: 3;
}
.base-panel:not([data-view="wegedit"]):not([data-view=""]) .base-panel-body {
  flex: 1 1 auto; margin: 0 auto; max-width: 760px; overflow-y: auto; padding: 16px 16px 48px; width: 100%;
}
.base-panel:not([data-view="wegedit"]):not([data-view=""]) .base-menu-close {
  align-items: center; background: #d62828; border: 3px solid var(--cs-ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--cs-ink); color: #fff;
  display: flex; font-size: 1.5rem; height: 46px; justify-content: center; line-height: 1; position: fixed; right: 14px; top: 14px; width: 46px; z-index: 4;
}

/* Bauen-Knopf: groß, leuchtend, pulsiert, wenn etwas bezahlbar ist */
.base-build-btn {
  background: linear-gradient(180deg, #ffe76a 0%, #ffc21f 100%); border-radius: 14px; box-shadow: 4px 4px 0 var(--cs-ink); font-size: 1.2rem;
  letter-spacing: 0.02em; min-height: 52px; padding: 12px 24px; z-index: 30;
}
.base-build-btn:hover { box-shadow: 5px 5px 0 var(--cs-ink); }
.base-build-btn.can-build { animation: buildBtnGlow 1.5s ease-in-out infinite; }
.base-build-btn.can-build::before {
  background: #2f9d5a; border: 2px solid var(--cs-ink); border-radius: 999px; color: #fff; content: "bezahlbar"; font-size: 0.6rem; font-weight: 900;
  left: 50%; letter-spacing: 0.06em; padding: 1px 8px; position: absolute; text-transform: uppercase; top: -11px; transform: translateX(-50%); white-space: nowrap;
}
@keyframes buildBtnGlow {
  0%, 100% { box-shadow: 4px 4px 0 var(--cs-ink), 0 0 0 0 rgba(255,214,60,0.55); }
  50% { box-shadow: 4px 4px 0 var(--cs-ink), 0 0 0 10px rgba(255,214,60,0); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .base-build-btn.can-build, .achievement-toast.show, .achievement-toast.show::after { animation: none; } }
.base-panel:not([data-view="wegedit"]):not([data-view=""]) .base-panel-body { align-content: start; grid-auto-rows: max-content; }

/* Schrein-Zifferblatt oben links: Meldungen (Toasts) rutschen darunter statt es zu verdecken */
body.has-shrine:not(.in-combat) .achievement-toast.show { top: 62px; }

/* Zwischensequenz mit Boss: der Boss-Sprite steht in der rechten Spalte (verkleinert, Füße unten) */
.cutscene-npc .cutscene-boss { position: relative; width: 110px; height: 110px; overflow: visible; display: grid; place-items: end center; }
.cutscene-npc .cutscene-boss > div { position: absolute; left: 50%; bottom: 0; translate: -50% 0; transform-origin: 50% 100%; pointer-events: none; }
.cutscene-box { overflow-x: hidden; }
/* Trampelsaurus blickt nach links (zum Team) — Sprite ist nach rechts gezeichnet */
.trampel-svg { scale: -1 1; }
.input-dude-avatar.input-dude-vet { font-size: 1rem; width: 54px; height: 76px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* Veteran-Dialog im Dungeon: aktuelles Dialog-Design (hi-dlg) unten, Szene bleibt sichtbar */
.input-dude-overlay { align-items: flex-end; background: rgba(8, 17, 31, 0.38); padding: 0; }
.input-dude-overlay .hi-dlg.qdlg { height: auto; max-height: min(62vh, 440px); display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.input-dude-overlay .hi-dlg-head { flex: none; margin-bottom: 0; }
.input-dude-overlay .hi-dlg-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.input-dude-overlay .hi-dlg-text { min-height: 0; white-space: normal; overflow-wrap: anywhere; }
.input-dude-overlay .hi-dlg-ch { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin-top: 2px; }
.input-dude-overlay .hi-dlg-btn { flex: none; }
@media (max-height: 560px), (max-width: 700px) {
  .input-dude-overlay .hi-dlg.qdlg { max-height: 54vh; padding: 6px 8px; bottom: 6px; }
  .input-dude-overlay .hi-dlg-av { width: 30px; height: 40px; }
  .input-dude-overlay .hi-dlg-av .pixel-avatar { transform: scale(0.58); left: -9px; }
  .input-dude-overlay .hi-dlg-text { font-size: 0.78rem; line-height: 1.3; }
  .input-dude-overlay .hi-dlg-btn { padding: 4px 8px; font-size: 0.72rem; }
  .input-dude-overlay .hi-dlg-ch { gap: 3px; }
}
.input-dude-overlay .hi-dlg-btn.input-dude-bye { opacity: 0.75; margin-top: 2px; }

/* ── Titelanimation: gemalte Stadtszene + Pixel-Kaiju (statt Nachthimmel/Skyline-Klötzen und hereinfliegender Figuren) ── */
#tas-sky, #tas-skyline, #tas-sprites { display: none !important; }
.title-anim-screen .tas-pixel-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 1; }
.title-anim-screen .wm-cityfx { z-index: 2; }
.title-anim-screen #tas-kaiju { width: 230px; height: 214px; bottom: 5%; z-index: 5; }
.title-anim-screen #tas-kaiju .tas-kaiju-px { position: absolute; inset: 0; transform-origin: 50% 100%; scale: var(--ks, 1); filter: drop-shadow(0 6px 0 rgba(20, 8, 28, 0.35)); }
.title-anim-screen #tas-kaiju .tas-kaiju-px > div { position: absolute; left: 50%; bottom: 0; margin-left: -115px; }
@keyframes tasKStomp { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5%; } }
.title-anim-screen #tas-kaiju.stomp .tas-kaiju-px { animation: tasKStomp 0.6s ease-in-out infinite; }
.title-anim-screen #tas-kaiju.roar .tas-kaiju-px { animation: tasKStomp 0.3s ease-in-out 3; }
@media (max-width: 620px) { .title-anim-screen #tas-kaiju { width: 230px; height: 214px; } }
@media (prefers-reduced-motion: reduce) { .title-anim-screen #tas-kaiju .tas-kaiju-px { animation: none !important; } }

/* ── Rückkehr-Übersicht („Zurück im Basislager“): gesammelte Erfolge, Baupläne, Abzeichen ── */
.run-digest-overlay { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(8, 17, 31, 0.55); backdrop-filter: blur(2px); animation: fadeIn 0.2s ease; }
.run-digest-card { width: min(520px, 100%); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 3px solid var(--cs-ink); border-radius: 14px; background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%); box-shadow: 5px 5px 0 var(--cs-ink), 0 14px 30px rgba(2, 6, 23, 0.4); color: var(--cs-ink); }
.rd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-head .rd-home { font-size: 1.9rem; line-height: 1; }
.rd-head strong { display: block; font-size: 1.1rem; font-weight: 900; }
.rd-head small { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.7; }
.rd-chips { margin-left: auto; display: flex; gap: 5px; }
.rd-chip { background: #fffdf6; border: 2px solid var(--cs-ink); border-radius: 999px; padding: 1px 8px; font-size: 0.74rem; font-weight: 900; }
.rd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; }
.rd-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; background: #fffdf6; border: 2.5px solid var(--cs-ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--cs-ink); }
.rd-ico { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.3rem; border: 2px solid var(--cs-ink); border-radius: 8px; background: #e9f2dd; }
.rd-plan .rd-ico { background: #ffe9b0; }
.rd-achievement .rd-ico { background: #ffd9d6; }
.rd-badge .rd-ico { background: #dcd6ff; }
.rd-reward .rd-ico { background: #d6ecff; }
.rd-txt { min-width: 0; font-size: 0.82rem; line-height: 1.25; }
.rd-txt b { display: block; font-weight: 800; overflow-wrap: anywhere; }
.rd-txt small { display: block; margin-top: 1px; font-size: 0.7rem; font-weight: 600; opacity: 0.75; overflow-wrap: anywhere; }
.rd-tag { font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; white-space: nowrap; }
.rd-more { font-size: 0.78rem; }
.rd-more summary { cursor: pointer; font-weight: 800; padding: 2px 0 6px; }
.rd-ok { align-self: stretch; min-height: 46px; }
@media (max-width: 480px) { .rd-tag { display: none; } .rd-row { grid-template-columns: 34px minmax(0, 1fr); } }

/* Rückkehr-Übersicht v2: Symbol-Kacheln je Kategorie (Erfolge · Möbel · Baupläne · Items), Tippen zeigt die Meldung */
.rd-hint { margin: -4px 0 0; font-size: 0.72rem; font-weight: 700; opacity: 0.65; }
.rd-secs { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.rd-sec h4 { margin: 0 0 5px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; }
.rd-sec h4 span { background: var(--cs-ink); color: #fffdf6; border-radius: 999px; padding: 0 7px; font-size: 0.68rem; }
.rd-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-tile { appearance: none; width: 58px; height: 58px; display: grid; place-items: center; font-size: 1.9rem; line-height: 1; cursor: pointer; border: 2.5px solid var(--cs-ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--cs-ink); background: #e9f2dd; transition: transform 0.1s, box-shadow 0.1s; }
.rd-tile:hover, .rd-tile:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--cs-ink); }
.rd-tile:active, .rd-tile.is-sel { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--cs-ink); outline: 3px solid var(--cs-gold, #f2c94c); outline-offset: 1px; }
.rd-achievement .rd-tile { background: #ffd9d6; }
.rd-furniture .rd-tile { background: #e9d9c0; }
.rd-plan .rd-tile { background: #ffe9b0; }
.rd-item .rd-tile { background: #d6ecff; }
.rd-detail { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 10px 10px 8px; background: #fffdf6; border: 3px solid var(--cs-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--cs-ink); animation: bxPop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rd-detail[hidden] { display: none; }
.rd-d-ico { display: grid; place-items: center; width: 46px; height: 46px; font-size: 1.9rem; border: 2px solid var(--cs-ink); border-radius: 10px; background: #e9f2dd; }
.rd-detail.rd-achievement .rd-d-ico { background: #ffd9d6; }
.rd-detail.rd-furniture .rd-d-ico { background: #e9d9c0; }
.rd-detail.rd-plan .rd-d-ico { background: #ffe9b0; }
.rd-detail.rd-item .rd-d-ico { background: #d6ecff; }
.rd-d-txt em { display: block; font-style: normal; font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.rd-d-txt b { display: block; font-size: 0.92rem; line-height: 1.25; overflow-wrap: anywhere; }
.rd-d-txt p { margin: 4px 0 0; font-size: 0.78rem; font-weight: 600; line-height: 1.35; opacity: 0.85; overflow-wrap: anywhere; }
.rd-d-x { appearance: none; border: 0; background: transparent; font-size: 1rem; font-weight: 900; cursor: pointer; color: var(--cs-ink); padding: 2px 4px; }

/* Interaktions-Hinweis (interact-hint.js): „[E] Ansprechen“ am Desktop, große Antipp-Schaltfläche auf Touch */
.ihint { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1400; display: inline-flex; align-items: center; gap: 8px; max-width: min(92vw, 420px); padding: 8px 14px 8px 10px; border: 3px solid var(--cs-ink); border-radius: 12px; background: linear-gradient(180deg, #fdf3e1, #fbe7c8); box-shadow: 3px 3px 0 var(--cs-ink); color: var(--cs-ink); font: 800 0.86rem/1.2 inherit; cursor: pointer; animation: ihintIn 0.16s ease-out; }
.ihint.is-hidden { display: none; }
.ihint kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 2px solid var(--cs-ink); border-radius: 7px; background: #fff; box-shadow: 0 2px 0 var(--cs-ink); font: 900 0.85rem/1 inherit; }
.ihint .ih-ico { font-size: 1.35rem; line-height: 1; }
.ihint .ih-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { .ihint { min-height: 52px; padding: 10px 18px 10px 14px; font-size: 1rem; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
body.in-combat .ihint { display: none !important; }
@keyframes ihintIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ihint .ih-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.ihint .ih-txt b { font-size: 0.9rem; font-weight: 900; line-height: 1.1; }
.ihint .ih-txt small { font-size: 0.68rem; font-weight: 700; opacity: 0.72; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }