:root {
    --bg-deep: #050810;
    --bg-mid: #080d1a;
    --bg-card: #0d1525;
    --bg-card2: #111c2e;
    --accent-green: #00ff88;
    --accent-green-dim: #00cc6a;
    --accent-red: #ff3355;
    --accent-blue: #3a8fff;
    --accent-yellow: #ffd700;
    --accent-purple: #9b59ff;
    --emf-glow: rgba(0,255,136,0.12);
    /* Text ramp – brighter & clearer for readability (was dim/thin) */
    --text-main: #e4eefb;
    --text-body: #c2d4ec;
    --text-dim: #97b1cb;
    --text-faint: #6f8aa8;
    --text-ghost: #b6cfee;
    --border-subtle: rgba(0,255,136,0.15);
    --border-card: rgba(58,143,255,0.2);
    --scanline: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);

    /* Motion curves (Emil Kowalski) */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* framer-motion-artiger Feder-Overshoot */

    /* Crisp neon glow – tight blur so text stays sharp */
    --glow-green: 0 0 12px rgba(0,255,136,0.35);
    --glow-green-soft: 0 0 10px rgba(0,255,136,0.20);

    /* ── Minimal monochrome system (new nav / profile design language) ── */
    --m-bg: #0a0a0b;
    --m-surface: #141416;
    --m-surface-2: #1b1b1f;
    --m-line: rgba(255,255,255,0.08);
    --m-line-strong: rgba(255,255,255,0.16);
    --m-ink: #f4f4f5;
    --m-ink-2: #a8a8b0;
    --m-ink-3: #75757f;
    --m-ink-4: #54545d;
    --m-danger: #f06b6b;
    --m-radius: 12px;
    --m-radius-sm: 8px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* NOISE OVERLAY – kept very subtle so text stays crisp */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 9999; opacity: 0.16;
  }

  /* SCANLINES – faint CRT texture, no longer a veil over text */
  body::after {
    content: '';
    position: fixed; inset: 0;
    background: var(--scanline);
    pointer-events: none; z-index: 9998; opacity: 0.07;
  }

  /* Focus visibility (a11y) – was missing entirely */
  :focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
  }
  ::selection { background: rgba(0,255,136,0.25); color: #fff; }

  /* Respect reduced-motion globally: keep meaning, drop movement */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ─── NAVBAR ─── */
  nav {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 3000px; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem;
    height: 64px;
    background: rgba(10,10,11,0.72);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid transparent;
    border-bottom-color: var(--m-line);
    /* Symmetrische, sanfte Ease-in-out-Kurve: die Leiste wird beim Hoch- UND
       Runterscrollen gleich langsam größer/kleiner (kein "Schnappen" mehr beim
       Wachsen – das verursachte zuvor die front-lastige Expo-Kurve in Verbindung
       mit der großen max-width). */
    transition: top .9s var(--ease-in-out), max-width .9s var(--ease-in-out),
                height .9s var(--ease-in-out), padding .9s var(--ease-in-out),
                border-radius .9s var(--ease-in-out), border-color .6s var(--ease-out),
                background-color .6s var(--ease-out), box-shadow .9s var(--ease-in-out);
  }

  /* Logo */
  .nav-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--m-ink);
    letter-spacing: -0.01em;
    text-transform: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.3s var(--ease-out);
  }
  .nav-logo:hover { opacity: 0.7; }
  .nav-logo span { color: var(--m-ink-3); font-weight: 400; }

  /* Center links */
  .nav-links {
    display: flex; gap: 2.2rem; list-style: none;
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  .nav-links a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--m-ink-2);
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.2s var(--ease-out);
    position: relative;
    padding: 0.25rem 0;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 1px; background: var(--m-ink);
    transform: scaleX(0); transition: transform 0.3s var(--ease-out); transform-origin: left;
  }
  .nav-links a:hover { color: var(--m-ink); }
  .nav-links a:hover::after { transform: scaleX(1); }
  /* Aktive Seite dauerhaft markieren (zeigt, wo man gerade ist) */
  .nav-links a.active { color: var(--m-ink); }
  .nav-links a.active::after { transform: scaleX(1); }

  /* Right side */
  .nav-right {
    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
  }

  /* Primary action button (Anmelden) */
  .nav-play {
    display: flex; align-items: center; gap: 0.45rem;
    background: var(--m-ink);
    color: #0a0a0b;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem; letter-spacing: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--m-ink);
    border-radius: var(--m-radius-sm);
    text-decoration: none; text-transform: none;
    font-weight: 500;
    transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.12s var(--ease-out);
    white-space: nowrap;
  }
  .nav-play:hover { background: #ffffff; box-shadow: 0 6px 22px rgba(255,255,255,0.12); }
  .nav-play:active { transform: scale(0.97); }
  .nav-play svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* ── PROFILE BUTTON + DROPDOWN ── */
  .nav-profile-wrap {
    position: relative;
  }

  .nav-profile-btn {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--m-line);
    color: var(--m-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem; letter-spacing: 0; font-weight: 500;
    padding: 0.3rem 0.65rem 0.3rem 0.4rem;
    border-radius: 10px;
    cursor: pointer; transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
    text-transform: none;
  }
  .nav-profile-btn:hover {
    border-color: var(--m-line-strong);
    background: rgba(255,255,255,0.06);
  }
  .nav-profile-wrap.open .nav-profile-btn {
    border-color: var(--m-line-strong);
    background: rgba(255,255,255,0.07);
  }

  /* Avatar circle */
  .nav-avatar {
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--m-line-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; flex-shrink: 0;
    position: relative; overflow: hidden;
  }
  .nav-avatar-ghost {
    line-height: 1; font-size: 0.95rem;
    filter: none;
  }

  /* Inline-Münz-Symbol (ersetzt das 🪙-Emoji überall) – skaliert mit der Schriftgröße */
  .coin-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.13em; flex: none; }

  /* Standalone coins chip – sits left of the profile button */
  .nav-coins-chip {
    display: flex; align-items: center; gap: 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem; letter-spacing: 0; font-weight: 500;
    color: var(--m-ink-2);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--m-line);
    padding: 0.32rem 0.7rem;
    border-radius: var(--m-radius-sm);
    white-space: nowrap; flex-shrink: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, max-width 0.3s ease;
    opacity: 1; transform: translateX(0); max-width: 200px; overflow: hidden;
  }
  .nav-right.coins-hidden .nav-coins-chip {
    opacity: 0; transform: translateX(8px); max-width: 0;
    padding-left: 0; padding-right: 0; border-color: transparent;
  }

  /* Anmelden-Button (nur sichtbar, wenn ausgeloggt) + ausgeloggter Zustand */
  .nav-login-btn { display: none; border: none; cursor: pointer; }
  .nav-right.logged-out .nav-login-btn { display: flex; }
  .nav-right.logged-out .nav-coins-chip,
  .nav-right.logged-out .nav-profile-wrap { display: none; }

  /* Profile button: only avatar + name + chevron, no coins line */
  .nav-btn-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem; letter-spacing: 0; line-height: 1; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Chevron */
  .nav-chevron {
    width: 12px; height: 12px; flex-shrink: 0;
    transition: transform 0.3s var(--ease-out);
    opacity: 0.4; margin-left: auto;
    color: var(--m-ink-2);
  }
  .nav-profile-wrap.open .nav-chevron { transform: rotate(180deg); opacity: 0.9; }

  /* Dropdown */
  .nav-dropdown {
    position: absolute; top: calc(100% + 14px); right: 0;
    min-width: 280px;
    background: rgba(18,18,21,0.98);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
    overflow: hidden;
  }
  .nav-profile-wrap.open .nav-dropdown {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* Dropdown – profile header */
  .dd-header {
    padding: 1.1rem 1.1rem 1rem;
    border-bottom: 1px solid var(--m-line);
  }
  /* Top row: avatar + name */
  .dd-header-top {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.9rem;
  }
  .dd-avatar-big {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--m-line-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0; overflow: hidden;
  }
  .dd-user-info { flex: 1; min-width: 0; }
  .dd-username {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 1rem; color: var(--m-ink); line-height: 1.15;
    margin-bottom: 0.2rem;
  }
  /* Gradient-Effekt: der EIGENE Spielername wird als Farbverlauf gezeichnet.
     Greift nur bei den immer-eigenen Namens-Elementen (Navbar/Dropdown/Mobil)
     + beim eigenen Profil/Statistik-Fenster (.name-grad-self). */
  :root { --name-grad: none; }
  body.has-name-grad #nav-username,
  body.has-name-grad #dd-username,
  body.has-name-grad #mob-username,
  #pv-name.name-grad-self,
  #ps-name.name-grad-self {
    background: var(--name-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* Verlauf auf die TEXTBREITE begrenzen, damit überall (Navbar, Dropdown,
       Profil) derselbe Ausschnitt erscheint und nicht je nach Elementbreite
       nur ein Teil des Verlaufs sichtbar ist. */
    display: inline-block; width: fit-content; max-width: 100%;
  }
  /* Title line – shop-purchaseable, shown below name */
  .dd-title-line {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.12em;
    color: var(--m-ink-3); text-transform: uppercase;
    font-weight: 500;
  }
  /* Level + XP bar below the avatar row */
  .dd-level-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.4rem; gap: 0.5rem;
  }
  .dd-level-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem; letter-spacing: 0.12em;
    color: var(--m-ink); text-transform: uppercase; font-weight: 500;
    white-space: nowrap; flex-shrink: 0;
  }
  .dd-xp-nums {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.04em;
    color: var(--m-ink-3); white-space: nowrap;
  }
  .dd-xp-track {
    height: 4px; background: rgba(255,255,255,0.08);
    border-radius: 4px; overflow: hidden;
  }
  .dd-xp-fill {
    height: 100%;
    background: var(--m-ink);
    border-radius: 4px;
    transition: width 0.6s var(--ease-out);
    width: 0%;
  }

  /* Dropdown – stats row */
  .dd-stats {
    display: flex; border-bottom: 1px solid var(--m-line);
  }
  .dd-stat {
    flex: 1; padding: 0.7rem 0.6rem;
    text-align: center; border-right: 1px solid var(--m-line);
  }
  .dd-stat:last-child { border-right: none; }
  .dd-stat-val {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1.2rem;
    color: var(--m-ink);
    line-height: 1;
  }
  .dd-stat-lbl {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.56rem;
    letter-spacing: 0.1em; color: var(--m-ink-3); text-transform: uppercase; font-weight: 500;
    margin-top: 0.3rem;
  }

  /* Dropdown – menu items */
  .dd-section {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--m-line);
  }
  .dd-section:last-child { border-bottom: none; }
  .dd-section-label {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.56rem;
    letter-spacing: 0.14em; color: var(--m-ink-3); text-transform: uppercase; font-weight: 500;
    padding: 0.45rem 1.1rem 0.25rem;
  }
  .dd-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 1.1rem;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem;
    letter-spacing: 0; color: var(--m-ink-2); text-transform: none; font-weight: 500;
    text-decoration: none; cursor: pointer; background: transparent; border: none;
    width: 100%; text-align: left;
    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), padding-left 0.18s var(--ease-out);
  }
  .dd-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--m-ink);
    padding-left: 1.35rem;
  }
  .dd-item.danger:hover { color: var(--m-danger); background: rgba(240,107,107,0.08); }
  .dd-item-icon {
    width: 20px; text-align: center; font-size: 0.9rem;
    flex-shrink: 0; opacity: 0.8;
  }
  /* Icon-Bilder (transparente PNGs in assets/icons/) statt Emojis */
  img.dd-item-icon { height: 20px; object-fit: contain; vertical-align: middle; display: block; }
  /* Inline-SVG-Icons (ersetzen die alten PNGs) – currentColor, sauber skaliert */
  svg.dd-item-icon { width: 18px; height: 18px; display: block; }
  .dd-item:hover .dd-item-icon { opacity: 1; }
  .dd-item-arrow {
    margin-left: auto; font-size: 0.7rem; opacity: 0.3;
    transition: opacity 0.18s, transform 0.18s;
  }
  .dd-item:hover .dd-item-arrow { opacity: 0.6; transform: translateX(2px); }

  /* Settings toggle rows */
  .dd-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 1.1rem;
  }
  .dd-toggle-label {
    display: flex; align-items: center; gap: 0.7rem;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem;
    letter-spacing: 0; color: var(--m-ink-2); text-transform: none; font-weight: 500;
  }
  .dd-toggle-label .dd-item-icon { opacity: 0.75; }
  .toggle-switch {
    width: 34px; height: 18px; border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--m-line-strong);
    position: relative; cursor: pointer; transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
  }
  .toggle-switch.on {
    background: var(--m-ink);
    border-color: var(--m-ink);
  }
  .toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(220,220,230,0.5);
    transition: transform 0.25s var(--ease-out), background 0.25s;
  }
  .toggle-switch.on .toggle-knob {
    transform: translateX(16px);
    background: #0a0a0b;
  }

  @media (max-width: 768px) {
    .nav-links { display: none; }
    nav { padding: 0 1.2rem; }
  }

  /* ══ Scroll-aware floating header + burger + mobile sheet ══ */
  @media (min-width: 769px) {
    body.nav-scrolled nav {
      top: 12px;
      max-width: 1060px;
      height: 56px;
      padding: 0 1.4rem;
      border-color: var(--m-line);
      border-radius: 16px;
      background: rgba(13,13,16,0.85);
      box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    }
  }

  /* Hamburger toggle (hidden on desktop, shown ≤768px) */
  .nav-burger {
    display: none;
    align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--m-line);
    color: var(--m-ink); cursor: pointer;
    border-radius: 10px;
    transition: border-color .2s var(--ease-out), color .2s var(--ease-out),
                background .2s var(--ease-out), transform .12s var(--ease-out);
  }
  .nav-burger:hover { border-color: var(--m-line-strong); background: rgba(255,255,255,0.06); }
  .nav-burger:active { transform: scale(0.95); }
  .nav-burger.open { border-color: var(--m-line-strong); }

  /* Animated menu-toggle icon (morph + rotate) */
  .menu-toggle { transition: transform .3s var(--ease-in-out); }
  .nav-burger.open .menu-toggle { transform: rotate(-45deg); }
  .menu-toggle .mt-top {
    stroke-dasharray: 12 63;
    transition: stroke-dasharray .3s var(--ease-in-out), stroke-dashoffset .3s var(--ease-in-out);
  }
  .nav-burger.open .menu-toggle .mt-top { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }

  /* Full-screen mobile menu sheet */
  .nav-mobile {
    position: fixed; inset: 0; z-index: 999;
    display: flex; flex-direction: column;
    padding: 88px 1.4rem 1.6rem;
    overflow-y: auto;
    background: rgba(10,10,11,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  body.nav-open .nav-mobile {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
  }
  body.game-play .nav-mobile { display: none; }

  .nav-mobile-links { display: flex; flex-direction: column; }
  .nav-mobile-links a {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: none; letter-spacing: 0; font-size: 1.1rem; font-weight: 500;
    color: var(--m-ink); text-decoration: none;
    padding: 1.05rem 0.3rem;
    border-bottom: 1px solid var(--m-line);
    display: flex; align-items: center; justify-content: space-between;
    opacity: 0; transform: translateY(10px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out),
                color .2s var(--ease-out), padding-left .2s var(--ease-out);
  }
  .nav-mobile-links a .arr { color: var(--m-ink-3); font-size: 1.1rem; }
  .nav-mobile-links a:hover, .nav-mobile-links a:active { color: var(--m-ink); padding-left: 0.9rem; }
  .nav-mobile-links a.active { color: var(--m-ink); padding-left: 0.9rem; }
  .nav-mobile-links a.active .arr { color: var(--m-ink); }
  body.nav-open .nav-mobile-links a { opacity: 1; transform: none; }
  body.nav-open .nav-mobile-links a:nth-child(1) { transition-delay: .05s, .05s, 0s, 0s; }
  body.nav-open .nav-mobile-links a:nth-child(2) { transition-delay: .10s, .10s, 0s, 0s; }
  body.nav-open .nav-mobile-links a:nth-child(3) { transition-delay: .15s, .15s, 0s, 0s; }

  .nav-mobile-foot { margin-top: auto; padding-top: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .nm-identity { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.4rem; }
  .nm-id-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
  .nm-id-name {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1rem; color: var(--m-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nm-id-coins { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: var(--m-ink-2); }
  .nm-btn {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; letter-spacing: 0; font-weight: 500;
    text-transform: none; text-align: left;
    padding: 0.85rem 0.9rem; cursor: pointer; border-radius: var(--m-radius-sm);
    background: rgba(255,255,255,0.03); border: 1px solid var(--m-line); color: var(--m-ink);
    transition: border-color .2s var(--ease-out), color .2s var(--ease-out),
                background .2s var(--ease-out), transform .1s var(--ease-out);
  }
  .nm-btn:hover { border-color: var(--m-line-strong); background: rgba(255,255,255,0.06); }
  .nm-btn:active { transform: scale(0.98); }
  .nm-ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
  .nm-btn.danger:hover { border-color: rgba(240,107,107,0.5); color: var(--m-danger); background: rgba(240,107,107,0.08); }
  .nm-btn.primary {
    justify-content: center; background: var(--m-ink); color: #0a0a0b;
    border-color: var(--m-ink); font-weight: 500;
  }
  .nm-btn.primary:hover { background: #ffffff; box-shadow: 0 6px 22px rgba(255,255,255,0.12); color: #0a0a0b; }

  /* Logged-in vs logged-out visibility inside the sheet */
  .nm-actions-in { display: flex; flex-direction: column; gap: 0.5rem; }
  .nav-mobile.logged-out .nm-identity,
  .nav-mobile.logged-out .nm-actions-in { display: none; }
  .nav-mobile:not(.logged-out) .nm-action-out { display: none; }

  @media (max-width: 768px) {
    .nav-right { display: none; }
    .nav-burger { display: flex; }
  }

  @media (prefers-reduced-motion: reduce) {
    nav { transition: background-color .2s, border-color .2s, box-shadow .2s; }
    .menu-toggle, .menu-toggle .mt-top { transition: none; }
    .nav-mobile { transition: opacity .2s, visibility 0s; transform: none; }
    body.nav-open .nav-mobile { transform: none; }
    .nav-mobile-links a { transition: color .2s, padding-left .2s; transform: none; opacity: 1; }
  }

  /* ─── HERO ─── */
  .hero {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 8rem 2rem 4rem;
    position: relative; overflow: hidden;
  }

  .hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 50% 60%, rgba(0,50,30,0.18) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 20% 80%, rgba(58,143,255,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 30% at 80% 20%, rgba(155,89,255,0.05) 0%, transparent 60%);
  }

  /* Floating particles */
  .particles { position: absolute; inset: 0; pointer-events: none; }
  .particle {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--accent-green);
    border-radius: 50%;
    opacity: 0;
    animation: float-particle linear infinite;
  }

  @keyframes float-particle {
    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-20vh) translateX(calc(var(--dx) * 1px)); opacity: 0; }
  }

  .ghost-icon {
    font-size: 7rem;
    line-height: 1;
    margin-bottom: 1rem;
    animation: ghost-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(0,255,136,0.4));
    position: relative; z-index: 1;
  }

  @keyframes ghost-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-18px) rotate(2deg); }
  }

  .hero-eyebrow {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 5px;
    color: var(--accent-green);
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 0.8;
    animation: fade-in 1s ease 0.3s both;
  }

  .hero-title {
    font-family: 'Creepster', cursive;
    font-size: clamp(3.25rem, 8vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: 3px;
    color: #fff;
    text-shadow:
      0 0 18px rgba(0,255,136,0.35),
      0 2px 0 rgba(0,0,0,0.8);
    animation: fade-in 1s var(--ease-out) 0.5s both;
    position: relative; z-index: 1;
  }

  .hero-title .green { color: var(--accent-green); }

  .hero-subtitle {
    max-width: 620px;
    font-size: 1.12rem;
    color: var(--text-body);
    line-height: 1.7;
    margin: 1.5rem auto;
    font-weight: 400;
    text-wrap: pretty;
    animation: fade-in 1s var(--ease-out) 0.7s both;
    position: relative; z-index: 1;
  }

  .hero-buttons {
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    margin-top: 2rem;
    animation: fade-in 1s ease 0.9s both;
    position: relative; z-index: 1;
  }

  .btn-primary {
    background: var(--m-ink);
    color: #0a0a0b;
    border: 1px solid var(--m-ink);
    border-radius: 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0;
    padding: 0.85rem 1.5rem;
    cursor: pointer;
    text-transform: none;
    font-weight: 600;
    transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.14s var(--ease-out);
  }

  .btn-primary:hover {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(255,255,255,0.12);
    transform: translateY(-1px);
  }
  .btn-primary:active { transform: translateY(0) scale(0.97); }
  .btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

  .btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-card);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 2px;
    padding: 1rem 2.5rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.16s var(--ease-out);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }

  .btn-secondary:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
    box-shadow: 0 0 18px rgba(0,255,136,0.18);
    transform: translateY(-2px);
  }
  .btn-secondary:active { transform: translateY(0) scale(0.97); }

  .hero-stats {
    display: flex; gap: 3rem; margin-top: 4rem;
    animation: fade-in 1s ease 1.1s both;
    position: relative; z-index: 1;
  }

  .stat {
    text-align: center;
  }

  .stat-number {
    font-family: 'Creepster', cursive;
    font-size: 2.4rem;
    color: var(--accent-green);
    text-shadow: var(--glow-green);
    line-height: 1;
  }

  .stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0.4rem;
  }

  .scroll-indicator {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    animation: fade-in 1s ease 1.5s both;
  }

  .scroll-indicator span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: var(--text-dim);
    text-transform: uppercase;
  }

  .scroll-arrow {
    width: 20px; height: 20px;
    border-right: 1px solid var(--accent-green);
    border-bottom: 1px solid var(--accent-green);
    transform: rotate(45deg);
    animation: scroll-bounce 2s ease-in-out infinite;
  }

  @keyframes scroll-bounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
    50% { transform: rotate(45deg) translateY(6px); opacity: 0.4; }
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── SECTIONS ─── */
  section { padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 2rem); }

  .section-header {
    text-align: center; margin-bottom: 4rem;
  }

  .section-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--accent-green);
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
  }

  .section-title {
    font-family: 'Creepster', cursive;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    color: #fff;
    text-shadow: 0 0 14px rgba(0,255,136,0.18);
    letter-spacing: 2px;
    line-height: 1.05;
    text-wrap: balance;
  }

  .section-desc {
    max-width: 560px; margin: 1.1rem auto 0;
    color: var(--text-body);
    font-size: 1.02rem; line-height: 1.7; font-weight: 400;
    text-wrap: pretty;
  }

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

  /* ─── GAME LOOP ─── */
  .gameloop-section {
    background: var(--bg-mid);
    position: relative; overflow: hidden;
  }

  .gameloop-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,255,136,0.04) 0%, transparent 70%);
  }

  .loop-diagram {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0; max-width: 900px; margin: 0 auto;
    position: relative;
  }

  .loop-step {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1.5rem 1.2rem;
    width: 150px;
    text-align: center;
    position: relative;
    transition: all 0.3s var(--ease-out);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  }

  .loop-step:hover {
    border-color: var(--accent-green);
    background: rgba(0,255,136,0.05);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,255,136,0.1);
  }

  .loop-step-icon { font-size: 2.2rem; margin-bottom: 0.6rem; }

  .loop-step-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.74rem;
    color: var(--accent-green);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
  }

  .loop-step-desc {
    font-size: 0.82rem;
    color: var(--text-body);
    line-height: 1.55;
  }

  .loop-arrow {
    font-size: 1.4rem;
    color: var(--accent-green);
    opacity: 0.5;
    padding: 0 0.3rem;
    align-self: center;
  }

  /* ─── FEATURES (asymmetric bento: big lead + 2×2 cluster + full-width strip) ─── */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(176px, auto);
    gap: 1.1rem;
  }

  .feature-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1.7rem;
    position: relative; overflow: hidden;
    transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  }

  /* Bento placement – 6 items, no empty cells */
  .feature-card:nth-child(1) { grid-column: span 2; grid-row: span 2; padding: 2.3rem; }
  .feature-card:nth-child(6) { grid-column: 1 / -1; }

  /* Featured cells get tinted depth so the grid isn't flat */
  .feature-card:nth-child(1),
  .feature-card:nth-child(6) {
    background:
      radial-gradient(130% 130% at 0% 0%, rgba(0,255,136,0.08), transparent 55%),
      var(--bg-card);
    border-color: rgba(0,255,136,0.22);
  }

  .feature-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
    opacity: 0; transition: opacity 0.4s var(--ease-out);
  }
  .feature-card:nth-child(1)::before,
  .feature-card:nth-child(6)::before { opacity: 0.45; }

  .feature-card:hover {
    border-color: rgba(0,255,136,0.4);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(0,255,136,0.08);
  }
  .feature-card:hover::before { opacity: 1; }

  .feature-icon {
    font-size: 2.3rem; margin-bottom: 1rem;
    display: block; line-height: 1;
    filter: drop-shadow(0 0 9px rgba(0,255,136,0.16));
  }
  .feature-card:nth-child(1) .feature-icon { font-size: 3.4rem; margin-bottom: 1.4rem; }

  .feature-title {
    font-family: 'Special Elite', cursive;
    font-size: 1.12rem;
    color: #fff;
    margin-bottom: 0.6rem;
    letter-spacing: 0.5px;
  }
  .feature-card:nth-child(1) .feature-title { font-size: 1.5rem; }

  .feature-desc {
    color: var(--text-body);
    font-size: 0.92rem;
    line-height: 1.7;
    font-weight: 400;
    max-width: 56ch;
  }
  .feature-card:nth-child(1) .feature-desc { font-size: 1rem; }

  .feature-tag {
    align-self: flex-start;
    margin-top: auto;
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 1.5px;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    text-transform: uppercase;
  }
  /* Pin the tag clear of the text even when the cell is short */
  .feature-card:not(:nth-child(1)) .feature-tag { margin-top: 1.1rem; }

  /* Bottom strip card → horizontal layout via grid (no markup change) */
  .feature-card:nth-child(6) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1.6rem;
    align-items: center;
    padding: 1.5rem 1.9rem;
  }
  .feature-card:nth-child(6) .feature-icon {
    grid-column: 1; grid-row: 1 / 3;
    font-size: 2.6rem; margin: 0; flex-shrink: 0;
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,255,136,0.06); border: 1px solid rgba(0,255,136,0.22);
  }
  .feature-card:nth-child(6) .feature-title { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0.25rem; }
  .feature-card:nth-child(6) .feature-desc  { grid-column: 2; grid-row: 2; align-self: start; max-width: 72ch; }
  .feature-card:nth-child(6) .feature-tag   { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; }

  /* Bento responsive collapse */
  @media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(168px, auto); }
    .feature-card:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  }
  @media (max-width: 560px) {
    .features-grid { grid-template-columns: 1fr; }
    .feature-card:nth-child(6) {
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .feature-card:nth-child(6) .feature-icon { margin-bottom: 1rem; }
    .feature-card:nth-child(6) .feature-tag { margin-top: 1.1rem; }
  }

  /* ─── PROGRESSION ─── */
  .progression-section {}

  .progression-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  @media (max-width: 768px) {
    .progression-grid { grid-template-columns: 1fr; }
    .loop-step { width: 120px; padding: 1rem; }
    .loop-arrow { font-size: 1rem; }
    nav { padding: 0 1rem; }
    .nav-links { display: none; }
  }

  .prog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 2rem;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  }

  .prog-card-title {
    font-family: 'Special Elite', cursive;
    font-size: 1.1rem;
    color: var(--accent-green);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.6rem;
  }

  /* XP Bar */
  .xp-demo {
    display: flex; flex-direction: column; gap: 1rem;
  }

  .level-row {
    display: flex; align-items: center; gap: 1rem;
  }

  .level-badge {
    font-family: 'Creepster', cursive;
    font-size: 1.4rem;
    color: var(--accent-yellow);
    min-width: 40px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
  }

  .xp-info { flex: 1; }

  .xp-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
  }

  .xp-bar-wrap {
    background: rgba(255,255,255,0.05);
    height: 6px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
  }

  .xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #00ffcc);
    box-shadow: 0 0 8px rgba(0,255,136,0.6);
    transition: width 1.5s ease;
    width: 0;
  }

  .xp-numbers {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    color: var(--text-dim);
    text-align: right;
    margin-top: 0.25rem;
  }

  /* Streak */
  .streak-demo {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;
  }

  .streak-dot {
    width: 38px; height: 38px;
    border: 1px solid var(--border-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s var(--ease-out);
    position: relative;
  }

  .streak-dot.active {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 15px rgba(255,215,0,0.3);
    background: rgba(255,215,0,0.06);
  }

  .streak-dot.fire {
    border-color: var(--accent-red);
    box-shadow: 0 0 15px rgba(255,51,85,0.4);
    background: rgba(255,51,85,0.06);
    animation: pulse-fire 1s ease-in-out infinite alternate;
  }

  @keyframes pulse-fire {
    from { box-shadow: 0 0 10px rgba(255,51,85,0.3); }
    to { box-shadow: 0 0 25px rgba(255,51,85,0.6); }
  }

  .streak-multiplier {
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--accent-yellow);
    text-shadow: 0 0 15px rgba(255,215,0,0.5);
    text-align: center;
    margin-top: 0.5rem;
  }

  .streak-multiplier span {
    font-size: 1rem;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', monospace;
  }

  /* ─── ACHIEVEMENTS ─── */
  .achievements-section { background: var(--bg-mid); }

  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
  }

  .ach-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1.2rem 1.4rem;
    display: flex; align-items: center; gap: 1rem;
    transition: all 0.3s var(--ease-out);
    position: relative; overflow: hidden;
  }

  .ach-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--rarity-color, #666);
  }

  .ach-card:hover {
    transform: translateX(4px);
    border-color: var(--rarity-color, #666);
    background: var(--bg-card2);
  }

  .ach-card.bronze { --rarity-color: #cd7f32; }
  .ach-card.silver { --rarity-color: #a8c0cc; }
  .ach-card.gold { --rarity-color: var(--accent-yellow); }
  .ach-card.master { --rarity-color: var(--accent-red); }

  .ach-icon { font-size: 1.8rem; flex-shrink: 0; width: 40px; text-align: center; }

  .ach-info { flex: 1; }

  .ach-name {
    font-family: 'Special Elite', cursive;
    font-size: 0.92rem;
    color: #fff;
    margin-bottom: 0.2rem;
  }

  .ach-desc {
    font-size: 0.8rem;
    color: var(--text-body);
    line-height: 1.5;
  }

  .ach-rarity {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: var(--rarity-color);
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--rarity-color);
    flex-shrink: 0;
    opacity: 0.85;
  }

  /* Filter tabs */
  .filter-tabs {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: center;
  }

  .filter-tab {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--border-card);
    color: var(--text-dim);
    background: transparent;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s var(--ease-out);
  }

  .filter-tab:hover, .filter-tab.active {
    border-color: var(--accent-green);
    color: var(--accent-green);
    background: rgba(0,255,136,0.05);
  }

  /* ─── COSMETICS ─── */
  .cosmetics-section {}

  .ghost-showcase {
    display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; justify-content: center;
    max-width: 900px; margin: 0 auto;
  }

  .ghost-preview {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 2.5rem 3rem;
    position: relative;
    flex-shrink: 0;
  }

  .ghost-body {
    font-size: 7rem; line-height: 1;
    animation: ghost-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0,255,136,0.3));
    transition: filter 0.5s;
    cursor: pointer;
  }

  .ghost-body:hover { filter: drop-shadow(0 0 35px rgba(0,255,136,0.6)); }

  .ghost-hat {
    font-size: 3.5rem; line-height: 1;
    margin-bottom: -1.5rem; position: relative; z-index: 1;
    transition: all 0.3s var(--ease-out);
  }

  .ghost-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: var(--accent-green);
    text-transform: uppercase;
    margin-top: 0.8rem;
    opacity: 0.7;
  }

  .cosmetic-categories {
    flex: 1; min-width: 300px;
    display: flex; flex-direction: column; gap: 1rem;
  }

  .cosm-category {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1rem 1.4rem;
  }

  .cosm-cat-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: var(--accent-green);
    text-transform: uppercase;
    margin-bottom: 0.7rem;
    opacity: 0.8;
  }

  .cosm-items {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
  }

  .cosm-item {
    font-size: 1.4rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-card);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    background: var(--bg-mid);
  }

  .cosm-item:hover, .cosm-item.selected {
    border-color: var(--accent-green);
    background: rgba(0,255,136,0.08);
    box-shadow: 0 0 10px rgba(0,255,136,0.2);
    transform: scale(1.1);
  }

  /* ─── HINT SYSTEM ─── */
  .hints-section { background: var(--bg-mid); }

  .hints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
  }

  .hint-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1.8rem;
    position: relative;
    transition: all 0.4s var(--ease-out);
  }

  .hint-card:hover { transform: translateY(-4px); border-color: rgba(255,215,0,0.4); }

  .hint-level {
    font-family: 'Creepster', cursive;
    font-size: 3.5rem;
    color: var(--hint-color);
    opacity: 0.15;
    position: absolute; top: 0.5rem; right: 1rem;
  }

  .hint-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 2px;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--hint-color);
    color: var(--hint-color);
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  .hint-card:nth-child(1) { --hint-color: #4caf50; }
  .hint-card:nth-child(2) { --hint-color: #ff9800; }
  .hint-card:nth-child(3) { --hint-color: var(--accent-red); }

  .hint-title {
    font-family: 'Special Elite', cursive;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 0.7rem;
  }

  .hint-example {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    color: var(--text-ghost);
    line-height: 1.6;
    font-style: italic;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--hint-color);
    padding: 0.7rem 0.9rem;
    margin-top: 0.8rem;
  }

  .hint-cost {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--accent-yellow);
  }

  /* ─── ACHIEVEMENT POPUP DEMO ─── */
  .popup-demo-section {}

  .popup-demo-wrap {
    max-width: 500px; margin: 0 auto;
    text-align: center;
  }

  .achievement-popup {
    background: var(--bg-card2);
    border: 1px solid var(--accent-yellow);
    padding: 1.4rem 1.8rem;
    display: flex; gap: 1.2rem; align-items: center;
    box-shadow: 0 0 40px rgba(255,215,0,0.15), 0 20px 40px rgba(0,0,0,0.5);
    position: relative; overflow: hidden;
    animation: popup-enter 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
    margin-bottom: 2rem;
  }

  @keyframes popup-enter {
    from { opacity: 0; transform: translateX(60px) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }

  .achievement-popup::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent);
    animation: shimmer 2s ease-in-out infinite;
  }

  @keyframes shimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  .popup-icon { font-size: 2.5rem; }

  .popup-content { flex: 1; text-align: left; }

  .popup-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: var(--accent-yellow);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
  }

  .popup-name {
    font-family: 'Special Elite', cursive;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 0.2rem;
  }

  .popup-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin-bottom: 0.5rem;
  }

  .popup-rewards {
    display: flex; gap: 0.8rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
  }

  .popup-reward-coins { color: var(--accent-yellow); }
  .popup-reward-xp { color: var(--accent-green); }

  .trigger-popup-btn {
    background: transparent;
    border: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 2px;
    padding: 0.7rem 1.8rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s var(--ease-out);
  }

  .trigger-popup-btn:hover {
    background: rgba(255,215,0,0.1);
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
  }

  /* ─── TECH ─── */
  .tech-section { background: var(--bg-mid); }

  .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
  }

  .tech-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1.5rem;
    transition: all 0.3s var(--ease-out);
  }

  .tech-card:hover { border-color: var(--accent-blue); background: var(--bg-card2); }

  .tech-card-icon { font-size: 2rem; margin-bottom: 0.8rem; }

  .tech-card-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    color: var(--accent-blue);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .tech-card-desc {
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.6;
    font-weight: 400;
  }

  /* ─── CTA SECTION ─── */
  .cta-section {
    text-align: center;
    padding: 8rem 2rem;
    position: relative; overflow: hidden;
  }

  .cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,255,136,0.06) 0%, transparent 70%);
  }

  .cta-ghost {
    font-size: 5rem;
    animation: ghost-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(0,255,136,0.5));
    margin-bottom: 1.5rem;
    display: block;
  }

  .cta-title {
    font-family: 'Creepster', cursive;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #fff;
    text-shadow: 0 0 20px rgba(0,255,136,0.3);
    margin-bottom: 1rem;
    position: relative;
  }

  .cta-desc {
    max-width: 480px; margin: 0 auto 2.5rem;
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
  }

  /* ─── FOOTER ─── */
  footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border-subtle);
    padding: 2.5rem 2rem;
    text-align: center;
  }

  .footer-logo {
    font-family: 'Creepster', cursive;
    font-size: 1.5rem;
    color: var(--accent-green);
    text-shadow: 0 0 12px rgba(0,255,136,0.5);
    margin-bottom: 0.8rem;
  }

  .footer-tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }

  .footer-links {
    display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .footer-links a {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.25s var(--ease-out);
  }

  .footer-links a:hover { color: var(--accent-green); }

  .footer-copy {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
  }

  /* ════════════════════════════════════════════════════════════════
     LANDING REDESIGN — minimalistisch dunkel (Hero + Sektion 1).
     Alles unter .lp-* gescoped, damit die App-Shell unberührt bleibt.
     ════════════════════════════════════════════════════════════════ */
  @keyframes lp-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  .lp-fx { opacity: 0; animation: lp-rise 0.9s var(--ease-out-expo) forwards; animation-delay: var(--d, 0s); }
  @media (prefers-reduced-motion: reduce) { .lp-fx { animation: none; opacity: 1; } }

  /* ── HERO (Vollbild-Header mit Video) ── */
  .lp-hero {
    position: relative;
    min-height: 100dvh;
    display: flex; align-items: center;
    padding: 6rem 0 5rem;
    overflow: hidden;
    isolation: isolate;
  }
  .lp-hero-media {
    position: absolute; inset: 0; z-index: -2; overflow: hidden;
    background:
      radial-gradient(120% 90% at 78% 6%, rgba(0,255,136,0.05), transparent 55%),
      linear-gradient(180deg, #04060d 0%, #070b16 45%, #04060c 100%);
  }
  .lp-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.5;
    filter: brightness(0.62) saturate(0.85) contrast(1.06);
  }
  .lp-hero-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(4,6,12,0.55) 0%, rgba(4,6,12,0.18) 30%, rgba(4,6,12,0.55) 72%, #04060c 100%),
      radial-gradient(120% 80% at 50% 45%, transparent 38%, rgba(4,6,12,0.65) 100%);
  }
  .lp-hero-grain {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 3px 3px; mix-blend-mode: overlay;
  }
  .lp-hero-inner {
    position: relative; text-align: left;
    width: 100%; max-width: 1100px; margin: 0 auto 0 0; /* links ausgerichtet statt zentriert */
    padding: 0 clamp(1.4rem, 5vw, 3rem) 0 clamp(1.4rem, 6vw, 5.5rem);
  }

  /* ── Hero-Typografie – minimalistisch, in der Sprache der Navbar
     (Space Grotesk, monochrome --m-Töne, ein einziger grüner Akzent) ── */
  .lp-eyebrow {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--m-ink-2);
  }
  .lp-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-green); box-shadow: var(--glow-green);
  }

  .lp-display {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: clamp(2.7rem, 8.2vw, 6.4rem); line-height: 0.98;
    letter-spacing: -0.038em; color: #f5f7fb;
    margin: 1.5rem 0 0; text-wrap: balance;
  }
  .lp-display .lp-mute { display: block; color: var(--m-ink-3); font-weight: 500; }
  .lp-display .lp-accent { color: var(--accent-green); }

  .lp-hero-lead {
    font-family: 'Space Grotesk', sans-serif; font-weight: 400;
    font-size: clamp(1.02rem, 1.45vw, 1.22rem); line-height: 1.62;
    color: var(--m-ink-2); max-width: 46ch; margin: 1.8rem 0 0; text-wrap: pretty;
  }
  .lp-hero-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 2.4rem; }
  .lp-btn-ghost {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: none; border: none; cursor: pointer;
    font-family: 'Share Tech Mono', monospace; font-size: 0.78rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
    padding: 1rem 0.3rem;
    transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
  }
  .lp-btn-ghost svg { width: 15px; height: 15px; }
  .lp-btn-ghost:hover { color: var(--text-main); gap: 0.85rem; }

  /* ── SEKTION 1 (Editorial + Bild) ── */
  .lp-section { position: relative; background: var(--bg-deep); padding: clamp(5.5rem, 13vh, 10rem) 0; }
  .lp-section-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 3rem); }
  .lp-intro {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  }
  .lp-h2 {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04;
    letter-spacing: -0.02em; color: #eef3f8; margin: 0;
  }
  .lp-lead {
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 1.05rem; line-height: 1.65; color: var(--text-body);
    max-width: 52ch; margin: 1.5rem 0 0; text-wrap: pretty;
  }

  .lp-frame {
    position: relative; margin: 0; aspect-ratio: 16 / 10;
    border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(155deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 55%), var(--bg-card);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 40px 80px -50px rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
  }
  .lp-frame::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 0%, rgba(0,255,136,0.05), transparent 58%);
  }
  .lp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lp-frame__hint {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
    font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint);
  }
  .lp-frame__hint svg { width: 30px; height: 30px; opacity: 0.7; }
  .lp-frame:has(img) .lp-frame__hint,
  .lp-frame:has(img)::after { display: none; }

  /* Footer-Wortmarke an das neue Display-Font angleichen */
  .footer-logo {
    font-family: 'Space Grotesk', sans-serif !important; font-weight: 700;
    text-transform: uppercase; letter-spacing: -0.01em;
    color: #eef3f8; text-shadow: none; font-size: 1.15rem;
  }
  .footer-logo span { color: var(--accent-green); }

  /* ── Landing: Mobile ── */
  @media (max-width: 860px) {
    .lp-intro { grid-template-columns: 1fr; gap: 2.2rem; }
    .lp-hero { padding: 6rem 0 4rem; }
    .lp-hero-lead { max-width: 40ch; }
  }

  /* ════════════════════════════════════════════════════════════════
     GEISTER-ARCHIV — Porträt-Browser nach Vorbild des Screenshots:
     volle Kopfleiste (Logo + Filter · zentrierter Titel · Suche/Sortieren)
     über einer Reihe gerahmter Schwarz-Weiß-Porträts mit Namen darunter.
     Minimalistisch, in der Sprache der Navbar (--m-Töne, Space Grotesk).
     ════════════════════════════════════════════════════════════════ */
  .gc-collage {
    position: relative; padding: 0 0 clamp(3.5rem, 8vh, 6rem);
    background:
      radial-gradient(135% 100% at 50% 0%, rgba(255,255,255,0.025), transparent 60%),
      #08080a;
  }

  /* Kopfleiste – volle Breite, dünn, oben + unten eine Haarlinie */
  .gc-bar {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    height: 54px; padding: 0 clamp(1.2rem, 4vw, 2.4rem);
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
  }
  .gc-bar-side { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.7rem); min-width: 0; }
  .gc-bar-side.is-right { justify-content: flex-end; }
  .gc-bar-logo {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 0.82rem; letter-spacing: 0.01em; color: var(--m-ink); white-space: nowrap;
  }
  .gc-bar-logo span { color: var(--m-ink-3); font-weight: 400; }
  .gc-filter {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: none; border: none; cursor: pointer; white-space: nowrap;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--m-ink-3); transition: color .25s var(--ease-out);
  }
  .gc-filter svg { width: 9px; height: 9px; opacity: 0.85; }
  .gc-filter:hover { color: var(--m-ink); }
  .gc-bar-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 0.86rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--m-ink-2); white-space: nowrap; pointer-events: none;
  }
  .gc-sort {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--m-ink-3); white-space: nowrap;
  }
  .gc-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
    background: none; border: 1px solid transparent; cursor: pointer; color: var(--m-ink-3);
    transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .gc-iconbtn svg { width: 15px; height: 15px; }
  .gc-iconbtn:hover { color: var(--m-ink); border-color: var(--m-line); }

  /* Porträt-Reihe */
  .gc-stage {
    max-width: 1340px; margin: 0 auto;
    padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.4rem, 5vw, 3rem) 0;
  }
  .gc-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(1rem, 2vw, 1.9rem);
  }
  .gc-card {
    display: flex; flex-direction: column; gap: 1.1rem;
    background: none; border: none; padding: 0; cursor: pointer;
    color: inherit; -webkit-tap-highlight-color: transparent;
  }
  .gc-thumb {
    position: relative; aspect-ratio: 2 / 3; overflow: hidden;
    border: 1px solid var(--m-line);
    background: linear-gradient(180deg, #18181b, #0c0c0e);
    transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
  }
  .gc-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: grayscale(1) brightness(0.8) contrast(1.06);
    transition: filter .6s var(--ease-out), transform 1s var(--ease-out-expo);
  }
  .gc-thumb::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,8,10,0.15) 0%, transparent 32%, rgba(8,8,10,0.72) 100%);
  }
  /* Platzhalter-Monogramm, solange (noch) kein Bild geladen ist */
  .gc-mono {
    position: absolute; inset: 0; z-index: -1;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem); letter-spacing: 0.04em; color: var(--m-ink-4);
  }
  .gc-card:hover .gc-thumb,
  .gc-card:focus-visible .gc-thumb {
    border-color: var(--m-line-strong);
    box-shadow: 0 30px 70px -40px rgba(0,0,0,0.95);
  }
  .gc-card:hover .gc-thumb img,
  .gc-card:focus-visible .gc-thumb img {
    filter: grayscale(0) brightness(1) contrast(1.04);
    transform: scale(1.05);
  }
  .gc-name {
    font-family: 'Space Grotesk', sans-serif; font-weight: 400;
    font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
    text-align: center; color: var(--m-ink-2);
    transition: color .3s var(--ease-out);
  }
  .gc-card:hover .gc-name,
  .gc-card:focus-visible .gc-name { color: var(--m-ink); }

  /* Höhenversatz wie im Screenshot: gerade Karten oben, ungerade tiefer (Zickzack) */
  @media (min-width: 761px) {
    .gc-grid { align-items: start; }
    .gc-card:nth-child(2n) { margin-top: 0; }
    .gc-card:nth-child(1) { margin-top: clamp(1.6rem, 3.8vw, 3.2rem); }
    .gc-card:nth-child(3) { margin-top: clamp(2.4rem, 5.6vw, 4.6rem); }
    .gc-card:nth-child(5) { margin-top: clamp(1.6rem, 3.8vw, 3.2rem); }
  }

  @media (max-width: 760px) {
    .gc-bar .gc-filter, .gc-sort { display: none; } /* Leiste ausdünnen */
    .gc-bar-title { letter-spacing: 0.24em; font-size: 0.78rem; }
    .gc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem 1rem; }
  }
  @media (max-width: 480px) {
    .gc-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* EMF decorative lines */
  .emf-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent);
    margin: 0;
  }

  /* Live popup container */
  #live-popup-container {
    position: fixed;
    top: 80px;
    right: 1.5rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    pointer-events: none;
    max-width: 340px;
  }

  .live-popup {
    background: var(--bg-card2);
    border: 1px solid var(--accent-yellow);
    padding: 1rem 1.2rem;
    display: flex; gap: 0.9rem; align-items: center;
    box-shadow: 0 0 30px rgba(255,215,0,0.15), 0 10px 30px rgba(0,0,0,0.5);
    animation: popup-enter 0.5s cubic-bezier(0.34,1.56,0.64,1) both,
               popup-exit 0.4s ease 3.5s both;
    pointer-events: none;
  }

  @keyframes popup-exit {
    to { opacity: 0; transform: translateX(60px); }
  }

  .live-popup-icon { font-size: 1.8rem; display: flex; align-items: center; color: #fff; flex-shrink: 0; }

  .live-popup-content {}

  .live-popup-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem; letter-spacing: 2px;
    color: var(--accent-yellow);
    text-transform: uppercase;
  }

  .live-popup-name {
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem; color: #fff;
  }

  .live-popup-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem; color: var(--accent-green);
  }

  /* Divider */
  .section-divider {
    display: flex; align-items: center; gap: 1rem;
    max-width: 1200px; margin: 0 auto; padding: 0 2rem;
    opacity: 0.3;
  }

  .section-divider::before, .section-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-green));
  }

  .section-divider::after { background: linear-gradient(90deg, var(--accent-green), transparent); }

  .section-divider span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem; letter-spacing: 4px;
    color: var(--accent-green); text-transform: uppercase;
    white-space: nowrap;
  }

  /* Animate on scroll */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    will-change: opacity, transform;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.08s; }
  .reveal-delay-2 { transition-delay: 0.16s; }
  .reveal-delay-3 { transition-delay: 0.24s; }
  .reveal-delay-4 { transition-delay: 0.32s; }
  /* Safety net: content must never stay invisible when motion is reduced */
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
  }

  /* ── MODAL SYSTEM: simple & reliable ── */
  @keyframes modal-in  { 0%{opacity:0;transform:scale(0.94) translateY(10px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
  @keyframes modal-out { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0.96)} }
  .modal-animate-in  { animation: modal-in  0.28s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  .modal-animate-out { animation: modal-out 0.2s ease forwards; }

  /* Settings */
  .scat-btn { display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.55rem 0.7rem;background:transparent;border:1px solid transparent;color:var(--m-ink-2);font-family:'Space Grotesk',sans-serif;font-size:0.78rem;letter-spacing:0;text-transform:none;font-weight:500;cursor:pointer;transition:all 0.2s;text-align:left;margin-bottom:0.15rem;border-radius:8px; }
  .scat-btn:hover  { color:var(--m-ink);background:rgba(255,255,255,0.04); }
  .scat-btn.active { color:var(--m-ink);background:rgba(255,255,255,0.07); }
  .scat-icon { font-size:0.9rem;flex-shrink:0;width:18px;text-align:center; }
  .srow { display:flex;align-items:center;gap:1rem;padding:0.9rem 0;border-bottom:1px solid var(--m-line); }
  .srow:last-child { border-bottom:none; }
  .srow-info { flex:1;min-width:0; }
  .srow-label { font-family:'Space Grotesk',sans-serif;font-size:0.85rem;letter-spacing:0;color:var(--m-ink);text-transform:none;font-weight:500;margin-bottom:0.2rem;display:flex;align-items:center;gap:0.5rem; }
  .srow-desc  { font-size:0.78rem;color:var(--m-ink-3);line-height:1.5;font-weight:400; }
  .srow-controls { display:flex;align-items:center;gap:0.55rem;flex-shrink:0; }
  .pin-btn { height:26px;padding:0 0.7rem;border:1px solid var(--m-line);background:transparent;color:var(--m-ink-3);font-family:'Space Grotesk',sans-serif;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all 0.2s;white-space:nowrap;display:flex;align-items:center;gap:0.35rem;border-radius:6px; }
  .pin-btn::before { content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:0.6; }
  .pin-btn:hover   { border-color:var(--m-line-strong);color:var(--m-ink); }
  .pin-btn.pinned  { border-color:var(--m-line-strong);color:var(--m-ink);background:rgba(255,255,255,0.06); }
  .pin-btn.pinned::before { background:var(--m-ink);opacity:1; }
  .pin-btn.pin-disabled { opacity:0.22;cursor:not-allowed;pointer-events:none; }
  .s-toggle { width:38px;height:20px;border-radius:12px;background:rgba(255,255,255,0.1);border:1px solid var(--m-line-strong);position:relative;cursor:pointer;transition:background 0.25s,border-color 0.25s;flex-shrink:0; }
  .s-toggle.on { background:var(--m-ink);border-color:var(--m-ink); }
  .s-toggle .knob { position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:rgba(220,220,230,0.5);transition:transform 0.25s,background 0.25s; }
  .s-toggle.on .knob { transform:translateX(18px);background:#0a0a0b; }
  .scat-heading    { font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.3rem;color:var(--m-ink);letter-spacing:-0.01em;margin-bottom:0.3rem; }
  .scat-subheading { font-family:'Space Grotesk',sans-serif;font-size:0.62rem;letter-spacing:0.12em;color:var(--m-ink-3);text-transform:uppercase;font-weight:500;margin-bottom:1.2rem;padding-bottom:0.8rem;border-bottom:1px solid var(--m-line); }
  .dd-pinned-row   { display:flex;align-items:center;justify-content:space-between;padding:0.45rem 1.1rem; }
  .dd-pinned-label { display:flex;align-items:center;gap:0.65rem;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;letter-spacing:0;color:var(--m-ink-2);text-transform:none;font-weight:500; }
  .dd-pinned-label .dd-item-icon { opacity:0.65; }
  /* Schieberegler (Soundeffekt-Lautstärke) – Settings-Modal + Schnellzugriff */
  .srange { -webkit-appearance:none;appearance:none;width:130px;height:5px;border-radius:6px;outline:none;cursor:pointer;flex-shrink:0;
    background:linear-gradient(to right,var(--m-ink) var(--vol,70%),var(--m-line-strong) var(--vol,70%));transition:background 0.12s var(--ease-out); }
  .srange.dd-range { width:108px; }
  .srange::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--m-ink);
    cursor:pointer;transition:transform 0.15s var(--ease-out);box-shadow:0 1px 4px rgba(0,0,0,0.45); }
  .srange::-webkit-slider-thumb:hover { transform:scale(1.2); }
  .srange::-moz-range-thumb { width:14px;height:14px;border-radius:50%;border:none;background:var(--m-ink);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.45); }
  .pfield-wrap  { margin-bottom:1.4rem; }
  .pfield-label { font-family:'Space Grotesk',sans-serif;font-size:0.62rem;letter-spacing:0.12em;color:var(--m-ink-3);text-transform:uppercase;font-weight:500;margin-bottom:0.4rem;display:block; }
  .pfield-input { width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--m-line);color:var(--m-ink);font-family:'Space Grotesk',sans-serif;font-size:0.85rem;letter-spacing:0;padding:0.6rem 0.85rem;outline:none;border-radius:8px;transition:border-color 0.2s; }
  .pfield-input:focus { border-color:var(--m-line-strong); }
  .pfield-hint  { font-size:0.72rem;color:var(--m-ink-3);margin-top:0.3rem;font-weight:400; }
  .skin-grid { display:flex;gap:0.6rem;flex-wrap:wrap;margin-top:0.5rem; }
  /* Avatar-Chips nutzen die .aura-opt-Zeile (Emoji-Swatch + Name) – .skin-opt
     ist nur noch eine Markierungsklasse für die Auswahl-Logik, keine eigene Größe. */
  .skin-opt  { }
  .aura-dot { width:22px;height:22px;border-radius:50%;display:block; }
  /* Effekt-Auswahl: zeigt den echten Farbverlauf + Namen statt eines Balls */
  .aura-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.5rem;margin-top:0.5rem; }
  .aura-opt  { display:flex;align-items:center;gap:0.6rem;background:rgba(255,255,255,0.03);border:1px solid var(--m-line);cursor:pointer;border-radius:10px;padding:0.5rem 0.6rem;transition:all 0.2s;min-width:0; }
  .aura-opt:hover  { border-color:var(--m-line-strong);background:rgba(255,255,255,0.06); }
  .aura-opt.active { border-color:var(--m-ink);background:rgba(255,255,255,0.1); }
  .aura-swatch { width:34px;height:20px;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,0.18);box-shadow:inset 0 0 6px rgba(0,0,0,0.35); }
  .aura-swatch.skin-swatch { width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(255,255,255,0.04);box-shadow:none; }
  .aura-opt-name { font-family:'Space Grotesk',sans-serif;font-size:0.82rem;font-weight:500;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
  .psave-btn { width:100%;padding:0.8rem;background:var(--m-ink);color:#0a0a0b;border:none;font-family:'Space Grotesk',sans-serif;font-size:0.85rem;letter-spacing:0;text-transform:none;cursor:pointer;font-weight:500;transition:all 0.2s;margin-top:0.5rem;border-radius:8px; }
  .psave-btn:hover { background:#ffffff;box-shadow:0 6px 22px rgba(255,255,255,0.12); }
  .title-opt { display:flex;align-items:center;padding:0.55rem 0.8rem;background:rgba(255,255,255,0.03);border:1px solid var(--m-line);cursor:pointer;border-radius:8px;transition:all 0.2s;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;letter-spacing:0;color:var(--m-ink-2);text-transform:none;font-weight:500; }
  .title-opt:hover  { border-color:var(--m-line-strong);color:var(--m-ink); }
  .title-opt.active { border-color:var(--m-line-strong);color:var(--m-ink);background:rgba(255,255,255,0.07); }

  /* Medals */
  .mfpill { flex:1;font-family:'Space Grotesk',sans-serif;font-size:0.78rem;letter-spacing:0;padding:0.55rem 0.5rem;border:1px solid var(--m-line);background:rgba(255,255,255,0.03);color:var(--m-ink-2);cursor:pointer;text-transform:none;font-weight:500;border-radius:9px;transition:border-color 0.2s,background 0.2s,color 0.2s;white-space:nowrap; }
  .mfpill:hover  { border-color:var(--m-line-strong);color:var(--m-ink); }
  .mfpill.active { border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.08);color:var(--accent-green); }
  .mc { position:relative;background:rgba(255,255,255,0.02);border:1px solid var(--m-line);padding:1.1rem;border-radius:12px;transition:all 0.25s;display:flex;flex-direction:column;gap:0.85rem;height:auto; }
  .mc.mc-unlocked { border-color:var(--m-line-strong);background:rgba(255,255,255,0.04); }
  .mc.mc-unlocked:hover { border-color:rgba(255,255,255,0.28);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.4); }
  .mc.mc-locked { opacity:0.4;filter:grayscale(0.4); }
  .mc.mc-locked:hover { opacity:0.55;filter:grayscale(0.25); }
  .mc-top { display:flex;align-items:flex-start;gap:0.85rem; }
  .mc-icon-wrap { width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:0;position:relative;color:var(--m-ink-3); }
  .mc-icon-wrap svg.medal-svg { width:38px;height:38px; }
  .mc-unlocked .mc-icon-wrap { color:var(--accent-yellow); }
  .mc-check { position:absolute;top:-4px;right:-6px;width:17px;height:17px;border-radius:50%;background:var(--accent-green);display:flex;align-items:center;justify-content:center;color:#04130c; }
  .mc-check svg { width:10px;height:10px; }
  .mc-text { flex:1;min-width:0; }
  .mc-name { font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.92rem;color:var(--m-ink);line-height:1.25;margin-bottom:0.28rem;word-break:break-word; }
  .mc-locked .mc-name { color:var(--m-ink-2); }
  .mc-desc { font-size:0.74rem;color:var(--m-ink-3);line-height:1.55;font-weight:400;word-break:break-word; }

  /* ════════════ Seitenübergang (Wikipedia ⇄ Spielen ⇄ Inventar) ════════════
     Die Ziel-Ansicht schiebt sich horizontal herein (nach Reihenfolge der Navbar:
     Wikipedia → Spielen → Inventar). Wechselt man nach rechts, kommt sie von rechts,
     nach links von links. Reiner transform (GPU) → ruckelfrei. */
  #game-root.pg-slide-right, #shop-root.pg-slide-right, #wiki-root.pg-slide-right{
    animation:pgSlideRight .4s var(--ease-drawer) both; }
  #game-root.pg-slide-left, #shop-root.pg-slide-left, #wiki-root.pg-slide-left{
    animation:pgSlideLeft .4s var(--ease-drawer) both; }
  @keyframes pgSlideRight{ from{ transform:translateX(100%) } to{ transform:translateX(0) } }
  @keyframes pgSlideLeft{  from{ transform:translateX(-100%) } to{ transform:translateX(0) } }
  @media (prefers-reduced-motion:reduce){
    #game-root.pg-slide-right, #shop-root.pg-slide-right, #wiki-root.pg-slide-right,
    #game-root.pg-slide-left, #shop-root.pg-slide-left, #wiki-root.pg-slide-left{ animation:none } }
  /* Altes Abdunkel-Overlay bleibt vorhanden, wird aber nicht mehr ausgelöst. */
  #view-fx{ display:none }

  /* ════════════ Skeleton-Loader (Shimmer) – weniger Flackern beim Laden ════════════ */
  @keyframes gg-shimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
  .skel{ background:linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 70%);
    background-size:200% 100%; animation:gg-shimmer 1.3s ease-in-out infinite; border-radius:7px; }
  .skel-line{ height:11px; border-radius:5px; }
  .skel-row{ display:flex; align-items:center; gap:.9rem; padding:.7rem .8rem; border:1px solid var(--m-line);
    border-radius:12px; margin-bottom:.5rem; background:rgba(255,255,255,0.015); }
  .skel-av{ width:40px; height:40px; border-radius:11px; flex-shrink:0 }
  .skel-av.sm{ width:38px; height:38px; border-radius:9px }
  .skel-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px }
  @media (prefers-reduced-motion:reduce){ .skel{ animation:none } }

  /* ════════════════════ SPIEL (Einzelspieler) – Vollbild-Overlay ════════════════════
     Alle Spiel-Variablen sind auf #game-root gescopt, damit sie nicht mit den
     ghost-guesser-Variablen (--accent-green …) kollidieren. */
  #game-root{
    --green:#00ff88; --red:#ff3355; --blue:#3a8fff;
    --yellow:#ffd700; --purple:#9b59ff;
    --bg0:#050810; --bg1:#0d1525; --bg2:#111c2e;
    --txt:#e4eefb; --dim:#97b1cb;
    --bc:rgba(58,143,255,.22); --bg:rgba(0,255,136,.2);
    display:none; position:fixed; inset:0; z-index:900;
    background:#000; color:var(--txt); font-family:'Raleway',sans-serif;
    -webkit-user-select:none; user-select:none;
  }
  body.game-on #game-root, body.game-play #game-root{ display:block }
  body.game-on, body.game-play{ overflow:hidden }

  /* Navbar bleibt während des Spielens sichtbar – sie wechselt animiert in die
     „heruntergescrollte" schwebende Variante (oben mittig, abgerundet). Der Timer
     läuft als grüner Rand um sie herum (#nav-timer). #game-root bleibt mit
     z-index 900 UNTER der Navbar (z-index 1000), damit die Leiste oben sichtbar
     ist; der Ring (#nav-timer) liegt mit z-index 1001 knapp darüber. */
  body.game-play nav{
    top:12px;max-width:1060px;height:56px;padding:0 1.4rem;
    border-color:var(--m-line);border-radius:16px;
    background:rgba(13,13,16,0.85);box-shadow:0 16px 50px rgba(0,0,0,0.5);
    /* Im Spiel KEINE Schrumpf-Animation der Geometrie mehr (die ist sofort in der
       schwebenden Form) – stattdessen wird die Leiste wie die unteren Module
       animiert ein-/ausgeblendet, nur eben VON OBEN (Slide + Fade). */
    transform:translate(-50%,0);
    transition:transform .5s var(--ease-out), opacity .45s var(--ease-out);
  }
  /* Versteckter Zustand (vor „Start!" und während Ergebnis-Popups): über den
     oberen Rand geschoben + ausgeblendet. Das Einblenden = Slide nach unten. */
  body.game-play.game-nav-hidden nav{
    transform:translate(-50%,calc(-100% - 26px)); opacity:0; pointer-events:none;
  }
  /* Der grüne Timer-Ring gehört zur Leiste → verschwindet mit ihr. */
  body.game-play.game-nav-hidden #nav-timer{display:none}
  /* In-Game-HUD unter die schwebende Navbar schieben (sonst verdeckt sie es).
     Verlassen-Knopf bleibt oben in der Ecke (Navbar schwebt mittig → kein Konflikt).
     Die Streak-Anzeige sitzt – spiegelbildlich zum Verlassen-Knopf – oben rechts
     auf gleicher Höhe (top:14px), nicht mehr unter der Navbar. */
  body.game-play #rinfo{top:14px}
  body.game-play #mp-opp{top:84px}
  body.game-play #mp-hud{top:82px}
  body.game-play .mph-st{top:126px}

  /* ── Login-Gate: ohne Anmeldung NUR der Anmeldescreen (keine Navbar) ── */
  body.auth-required nav{ display:none !important; }
  body.auth-required .login-x{ display:none !important; }

  /* STAGE */
  #stage{position:fixed;inset:0;display:flex;align-items:center;
    justify-content:center;background:#000;overflow:hidden}
  #vbg{position:absolute;inset:0;transition:background 1.4s ease;
    background:radial-gradient(ellipse 80% 70% at 50% 55%,#0a1520 0%,#050810 60%,#000 100%)}
  .mt{background:radial-gradient(ellipse 90% 80% at 40% 60%,#0c1a0e 0%,#05100a 65%,#000 100%)!important}
  .mb{background:radial-gradient(ellipse 90% 80% at 50% 70%,#0c0d1a 0%,#050510 65%,#000 100%)!important}
  .mg{background:radial-gradient(ellipse 90% 80% at 60% 40%,#1a100d 0%,#100805 65%,#000 100%)!important}
  .me{background:radial-gradient(ellipse 90% 80% at 30% 50%,#1a1508 0%,#100d05 65%,#000 100%)!important}
  .mr{background:radial-gradient(ellipse 90% 80% at 70% 60%,#120a1a 0%,#0a0510 65%,#000 100%)!important}

  /* GHOST (idle visual, hidden during real video) */
  #ge{position:relative;z-index:5;display:flex;flex-direction:column;
    align-items:center;pointer-events:none;animation:gi 4s ease-in-out infinite}
  @keyframes gi{0%,100%{transform:translateY(0) rotate(-1deg)}
    40%{transform:translateY(-22px) rotate(1.5deg)}
    70%{transform:translateY(-9px) rotate(-.5deg)}}
  #gico{line-height:0;color:#e6fff1;
    filter:drop-shadow(0 0 40px rgba(0,255,136,.35)) drop-shadow(0 0 80px rgba(0,255,136,.12));
    transition:filter .6s,color .6s}
  #gico svg{width:clamp(7rem,13vw,11rem);height:auto;display:block}
  #gico.hunt{color:#ffd6dc;filter:drop-shadow(0 0 50px rgba(255,51,85,.8)) drop-shadow(0 0 90px rgba(255,51,85,.3));
    animation:gh .25s ease-in-out infinite alternate}
  @keyframes gh{from{transform:translateX(-5px) scale(1.04)}to{transform:translateX(5px) scale(1.01)}}
  #gshadow{width:130px;height:18px;margin-top:-8px;pointer-events:none;
    background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 70%);
    animation:sp 4s ease-in-out infinite}
  @keyframes sp{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.65);opacity:.25}}

  /* OVERLAYS */
  #vig{position:fixed;inset:0;z-index:7;pointer-events:none;
    background:radial-gradient(ellipse 85% 78% at 50% 50%,transparent 38%,rgba(0,0,0,.78) 100%)}
  #scl{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.2;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px)}
  #grn{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.16;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}

  /* ── TIMER-RING um die schwebende Navbar (ersetzt die alte obere Leiste) ──
     Der Ring ist zu Beginn KOMPLETT grün und läuft dann ab: ab oben-mittig
     wandert die Lücke im Uhrzeigersinn um die Navbar, bis das Grün ganz weg ist.
     #nav-timer liegt AUSSERHALB von #game-root → globale --accent-green-Farbe. */
  #nav-timer{display:none;position:fixed;z-index:1001;pointer-events:none;overflow:visible}
  body.game-play #nav-timer{display:block}
  #nav-timer-path{
    stroke:var(--accent-green);
    stroke-dasharray:1000;stroke-dashoffset:0;   /* 0 = voller Ring (Start) */
    transition:stroke-dashoffset 1s linear;
    filter:drop-shadow(0 0 6px rgba(0,255,136,.55));
  }

  /* ROUND INFO (nur noch die Streak-Anzeige) – oben rechts, gleitet wie der
     Verlassen-Knopf mit der Navbar rein/raus. */
  #rinfo{position:fixed;top:14px;right:1.4rem;z-index:61;text-align:right;pointer-events:none;
    transition:transform .5s var(--ease-out-expo),opacity .4s var(--ease-out)}
  body.game-play.game-nav-hidden #rinfo{transform:translateY(-22px);opacity:0}
  .ri-s{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem;
    color:var(--yellow);line-height:1.1;margin-top:.15rem}

  /* EXIT button (in-game) – oben links in der Ecke, blendet mit dem HUD ein */
  #exitbtn{position:fixed;z-index:136;display:none;   /* über dem Wartescreen (135), unter Reveal/VS */
    align-items:center;gap:.5rem;backdrop-filter:blur(10px);cursor:pointer;
    top:14px;left:14px;
    transition:transform .5s var(--ease-out-expo),opacity .4s var(--ease-out),
               border-color .2s,color .2s,background .2s;
    background:rgba(10,12,18,.6);border:1px solid var(--m-line);color:var(--m-ink-2);
    font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:500;letter-spacing:0;
    text-transform:none;padding:.5rem .9rem;border-radius:9px}
  #exitbtn:hover{border-color:rgba(240,107,107,.5);color:var(--m-danger);background:rgba(240,107,107,.06)}
  #exitbtn svg{width:13px;height:13px}
  body.game-play #exitbtn{display:flex}
  /* Mit der Navbar verstecken/einblenden: gleitet von oben rein wie das HUD. */
  body.game-play.game-nav-hidden #exitbtn{transform:translateY(-22px);opacity:0;pointer-events:none}
  /* Wiederverwendbare Inline-Icons (statt Emojis) */
  .fire-ico{width:1em;height:1em;vertical-align:-0.13em;color:#ff7a2e;flex-shrink:0}
  .vs-ico{width:1.05em;height:1.05em;vertical-align:-0.16em;flex-shrink:0}
  .trophy-ico{width:1em;height:1em;vertical-align:-0.13em;flex-shrink:0}

  /* VIDEOEINSTELLUNGEN – unten links · Karte im framer-motion-Stil */
  #ctrl{position:fixed;bottom:1.6rem;left:1.6rem;z-index:60;
    display:flex;flex-direction:column;gap:.65rem}
  /* die animierte Karte (entspricht dem AnimatePresence-Panel) */
  #vpanel{
    width:344px;max-width:44vw;padding:.85rem .95rem .8rem;
    background:rgba(17,17,17,.60);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border:1px solid var(--m-line);border-radius:18px;
    box-shadow:0 24px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
    transform-origin:bottom left;
    /* Enter/Exit-Blur wie im AnimatePresence der Vorlage – Feder beim Transform */
    transition:opacity .4s var(--ease-out), transform .45s var(--ease-spring), filter .4s var(--ease-out)}
  /* Auto-Ausblenden: Karte verschwindet bei Mausruhe (blur-out + slide-down),
     kommt bei jeder Mausbewegung sofort zurück – siehe wakeControls() im JS */
  #ctrl.is-hidden{pointer-events:none}
  #ctrl.is-hidden #vpanel{opacity:0;transform:translateY(22px);filter:blur(10px)}
  @media (prefers-reduced-motion:reduce){
    #vpanel{transition:opacity .2s linear}
    #ctrl.is-hidden #vpanel{transform:none}
  }

  /* Fortschritts-Reihe: aktuelle Zeit · Slider · Dauer */
  .vp-prog{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
  .vp-time{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.04em;
    color:var(--m-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
  #tl{flex:1;height:5px;background:var(--m-line-strong);
    cursor:pointer;position:relative;border-radius:6px;transition:height .15s var(--ease-out)}
  #tl:hover{height:7px}
  #tlf{position:absolute;top:0;left:0;height:100%;background:var(--green);
    box-shadow:0 0 8px rgba(0,255,136,.6);pointer-events:none;width:0%;
    border-radius:6px;transition:width .15s linear}

  /* Steuer-Reihe */
  .vp-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
  .vp-grp{display:flex;align-items:center;gap:.35rem}

  /* Basis-Button – Feder-Hover (scale 1.1) / Tap (scale 0.9) wie whileHover/whileTap */
  .vp-btn{display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;cursor:pointer;flex-shrink:0;padding:0;line-height:1;
    color:var(--m-ink);border-radius:10px;
    transition:transform .2s var(--ease-spring),background .18s var(--ease-out),color .18s var(--ease-out)}
  .vp-btn:hover{transform:scale(1.1);background:rgba(255,255,255,.08)}
  .vp-btn:active{transform:scale(.9)}

  .vp-skip{height:30px;padding:0 .5rem;font:600 .6rem/1 'Space Grotesk',sans-serif;
    letter-spacing:.02em;color:var(--m-ink-2)}
  .vp-skip:hover{color:var(--m-ink)}

  .vp-play{width:42px;height:42px;border-radius:50%;
    background:var(--green);color:#04130c;box-shadow:0 0 18px rgba(0,255,136,.4)}
  .vp-play:hover{background:#5bffb4;box-shadow:0 0 26px rgba(0,255,136,.6);transform:scale(1.1)}
  .vp-play svg{width:16px;height:16px;fill:#04130c;display:block}

  /* Lautstärke */
  .vp-vol{display:flex;align-items:center;gap:.3rem;margin-left:.1rem}
  #mutebtn{width:32px;height:32px}
  #mutebtn svg{display:block}
  #mutebtn.muted{color:var(--red)!important}
  /* Schallwellen sichtbar wenn Ton an, X sichtbar wenn stumm */
  #mutebtn .mute-x{opacity:0}
  #mutebtn.muted .mute-wave{opacity:0}
  #mutebtn.muted .mute-x{opacity:1}
  #volslider{-webkit-appearance:none;appearance:none;
    width:72px;height:5px;border-radius:6px;outline:none;cursor:pointer;flex-shrink:0;
    background:linear-gradient(to right,var(--green) var(--vol,100%),var(--m-line-strong) var(--vol,100%));
    transition:background .18s var(--ease-spring)}
  #volslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
    width:13px;height:13px;border-radius:50%;background:#fff;
    box-shadow:0 0 8px rgba(0,255,136,.5);cursor:pointer;
    transition:transform .2s var(--ease-spring)}
  #volslider::-webkit-slider-thumb:hover{transform:scale(1.25)}
  #volslider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:none;
    background:#fff;box-shadow:0 0 8px rgba(0,255,136,.5);cursor:pointer}

  /* Geschwindigkeit – diskrete Stufen (0.5/1/1.5/2×) mit aktiver Markierung */
  .vp-spds{display:flex;align-items:center;gap:.15rem}
  .vp-spd{height:30px;min-width:34px;padding:0 .4rem;
    background:transparent;border:none;border-radius:9px;cursor:pointer;
    font:600 .62rem/1 'Space Grotesk',sans-serif;letter-spacing:.01em;color:var(--m-ink-3);
    transition:transform .2s var(--ease-spring),background .18s var(--ease-out),color .18s var(--ease-out)}
  .vp-spd:hover{transform:scale(1.1);color:var(--m-ink)}
  .vp-spd:active{transform:scale(.9)}
  .vp-spd.active{background:rgba(255,255,255,.12);color:var(--m-ink)}
  /* Einzelner Geschwindigkeits-Button (wechselt bei Klick durch die Stufen) */
  .vp-spd-cycle{min-width:46px;color:var(--m-ink);background:rgba(255,255,255,.08);
    border:1px solid var(--m-line);font-variant-numeric:tabular-nums}
  .vp-spd-cycle:hover{background:rgba(255,255,255,.14);border-color:var(--m-line-strong)}

  @media (max-width:560px){
    #ctrl{bottom:1rem;left:1rem}
    #vpanel{width:auto;max-width:calc(100vw - 2rem)}
  }

  /* NO-VIDEO / STATE message */
  #novideo{position:relative;z-index:5;display:none;flex-direction:column;align-items:center;
    gap:1rem;text-align:center;pointer-events:none;padding:0 1.5rem;max-width:560px}
  #novideo.show{display:flex}
  .nv-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);
    color:var(--m-ink);letter-spacing:-0.01em;line-height:1.05}
  .nv-sub{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.92rem;
    color:var(--m-ink-2);line-height:1.6}
  .nv-detail{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.04em;
    color:var(--m-danger);opacity:.95;line-height:1.6;max-width:520px;
    -webkit-user-select:text;user-select:text;pointer-events:auto;border-radius:8px;
    border:1px solid rgba(240,107,107,.25);background:rgba(240,107,107,.06);
    padding:.5rem .8rem;margin-top:.4rem;word-break:break-word}
  .nv-detail:empty{display:none}

  /* GHOST PANEL – bottom right */
  /* GEISTER-AUSWAHL – minimalistisches Panel (Runden-Redesign) */
  #gpanel{position:fixed;bottom:1.6rem;right:1.6rem;z-index:60;
    width:330px;display:flex;flex-direction:column;gap:.65rem;
    background:rgba(10,12,18,.74);backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border:1px solid var(--m-line);border-radius:16px;padding:.9rem;
    box-shadow:0 24px 60px -30px rgba(0,0,0,.85);
    transform-origin:bottom right;
    /* gleiche Enter/Exit-Animation wie die Videokontrolls (#vpanel) */
    transition:opacity .4s var(--ease-out), transform .45s var(--ease-spring), filter .4s var(--ease-out)}
  #gpanel.is-hidden{opacity:0;transform:translateY(22px);filter:blur(10px);pointer-events:none}
  /* Einzelspieler-Countdown: beide Module sind sichtbar (Entrance), aber gesperrt
     (nicht bedienbar) und liegen über dem Countdown-Overlay, damit man sie reinkommen sieht. */
  body.controls-locked #ctrl, body.controls-locked #gpanel{pointer-events:none;z-index:150}
  /* Idle-Auto-Hide blendet zusätzlich den Mauszeiger aus (bis man die Maus bewegt).
     An game-play gebunden → beim Verlassen des Spiels kommt der Zeiger automatisch zurück. */
  body.game-play.game-cursor-hidden, body.game-play.game-cursor-hidden *{cursor:none !important}
  @media (prefers-reduced-motion:reduce){
    #gpanel{transition:opacity .2s linear}
    #gpanel.is-hidden{transform:none}
  }
  #gph{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
  #gpt{font-family:'Share Tech Mono',monospace;font-size:.56rem;
    letter-spacing:.18em;color:var(--m-ink-3);text-transform:uppercase}
  #seln{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.85rem;
    color:var(--green);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  #gsrch{width:100%;background:rgba(255,255,255,0.03);
    border:1px solid var(--m-line);color:var(--m-ink);border-radius:10px;
    font-family:'Space Grotesk',sans-serif;font-size:.84rem;letter-spacing:0;
    padding:.55rem .8rem;outline:none;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
  #gsrch:focus{border-color:rgba(0,255,136,.4);background:rgba(255,255,255,0.05)}
  #gsrch::placeholder{color:var(--m-ink-4)}
  #ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;max-height:232px;overflow-y:auto;padding:.1rem}
  #ggrid::-webkit-scrollbar{width:3px}
  #ggrid::-webkit-scrollbar-thumb{background:var(--m-line-strong);border-radius:3px}
  .go{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
    min-height:44px;padding:.5rem .35rem;background:rgba(255,255,255,0.02);
    border:1px solid var(--m-line);border-radius:11px;cursor:pointer;
    transition:border-color .18s var(--ease-out),background .18s var(--ease-out),transform .12s var(--ease-out)}
  .go:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.05)}
  .go:active{transform:scale(.96)}
  .go.sel{border-color:rgba(0,255,136,.5);background:rgba(0,255,136,.1)}
  .go-n{font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.04em;
    color:var(--m-ink-2);text-transform:uppercase;text-align:center;line-height:1.25}
  .go.sel .go-n{color:var(--green)}
  #subbtn{width:100%;padding:.8rem;background:var(--green);color:#04130c;
    border:none;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:600;
    letter-spacing:.005em;cursor:pointer;
    transition:box-shadow .25s var(--ease-out),transform .14s var(--ease-out),background .2s var(--ease-out)}
  #subbtn:hover:not(:disabled){background:#5bffb4;box-shadow:0 0 24px rgba(0,255,136,.42)}
  #subbtn:active:not(:disabled){transform:scale(.98)}
  #subbtn:disabled{background:rgba(255,255,255,0.05);color:var(--m-ink-4);cursor:not-allowed}

  /* RESULT OVERLAY */
  #roverlay{display:none;position:fixed;inset:0;z-index:200;
    background:rgba(0,0,0,.83);backdrop-filter:blur(7px);align-items:center;justify-content:center}
  #roverlay.show{display:flex}
  #rbox{background:var(--m-surface);border:1px solid var(--m-line);border-radius:18px;
    padding:2.4rem 2.6rem;max-width:440px;width:90%;text-align:center;position:relative;overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.7);animation:ri .5s var(--ease-out-expo) both}
  @keyframes ri{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
  #rbox::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--rc,var(--green)),transparent)}
  .rgbig{margin-bottom:.5rem;line-height:0;color:var(--rc,var(--green));display:flex;justify-content:center}
  .rgbig svg{width:3.4rem;height:3.4rem}
  .rverd{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:2rem;letter-spacing:-0.01em;
    color:var(--rc,var(--green));margin-bottom:.45rem;line-height:1}
  .rsub{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.98rem;color:var(--m-ink-2);
    margin-bottom:1.6rem;line-height:1.5}
  .rsub strong{font-weight:600;color:var(--m-ink)}
  .rrews{display:flex;gap:1.6rem;justify-content:center;margin-bottom:1.6rem}
  .rrval{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.6rem;color:var(--m-ink);line-height:1}
  .rrlbl{font-family:'Share Tech Mono',monospace;font-size:.54rem;
    letter-spacing:.1em;color:var(--m-ink-3);text-transform:uppercase;margin-top:.3rem}
  .rbtns{display:flex;gap:.7rem;justify-content:center;margin-top:.4rem}
  .rnext{background:var(--green);color:#04130c;border:none;border-radius:10px;
    font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.005em;
    padding:.8rem 1.8rem;cursor:pointer;transition:box-shadow .25s var(--ease-out),transform .14s var(--ease-out),background .2s var(--ease-out)}
  .rnext:hover{background:#5bffb4;box-shadow:0 0 22px rgba(0,255,136,.42)}
  .rnext:active{transform:scale(.97)}
  .rmenu{background:transparent;border:1px solid var(--m-line-strong);color:var(--m-ink-2);border-radius:10px;
    font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:500;
    padding:.8rem 1.4rem;cursor:pointer;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s var(--ease-out)}
  .rmenu:hover{border-color:var(--m-ink-3);color:var(--m-ink);background:rgba(255,255,255,0.04)}
  .rmenu:active{transform:scale(.97)}

  /* ══════════════════════════════════════════════════════════════
     LOBBY / SPIELEN-MENÜ — minimalistisches Redesign (ein adaptiver
     Screen statt verschachtelter Schritte). Folgt [[design-direction]]:
     Space Grotesk, monochromes --m-*-System, grüner Akzent nur semantisch.
     ══════════════════════════════════════════════════════════════ */
  /* Lobby selbst ist transparent – der Hintergrund kommt von #hero-bg (fix, hinter
     dem Overlay), damit er beim Tab-Wechsel nicht mitwandert. */
  #lobby{position:fixed;inset:0;z-index:100;overflow-y:auto;
    display:flex;align-items:flex-start;justify-content:center;padding:104px 1.5rem 4rem;
    background:transparent;
    font-family:'Space Grotesk',sans-serif}
  body.game-play #lobby{display:none}

  /* ── Globaler Lobby-Hintergrund (hero.png) ──
     Fixe Ebene HINTER den Overlays (z-index 899 < 900). Nur im Spielen-Reiter
     (Lobby = game-on ohne game-play) sichtbar. Bleibt beim Tab-Wechsel still
     stehen, da sie außerhalb der gleitenden Overlays liegt. */
  #hero-bg{position:fixed;inset:0;z-index:899;display:none;pointer-events:none;
    background:#04060c url("hero.png") center/cover no-repeat}
  #hero-bg::after{content:'';position:absolute;inset:0;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(0,255,136,0.10), transparent 55%),
      linear-gradient(180deg, rgba(5,7,14,.60) 0%, rgba(8,12,23,.70) 46%, rgba(4,6,12,.90) 100%)}
  /* hero.png liegt fest hinter ALLEN drei Reitern (Spielen-Lobby, Wikipedia, Inventar),
     damit der Hintergrund nie schwarz ist und beim Tab-Wechsel ruhig stehen bleibt –
     nur die Inhalte (Karten/Knöpfe …) gleiten. NICHT während des laufenden Spiels. */
  body.game-on:not(.game-play) #hero-bg,
  body.wiki-on #hero-bg,
  body.shop-on #hero-bg{display:block}
  /* In der Lobby Overlay + Spiel-Texturen transparent/aus, damit hero.png durchscheint. */
  body.game-on:not(.game-play) #game-root{background:transparent}
  body.game-on:not(.game-play) #stage,
  body.game-on:not(.game-play) #vig,
  body.game-on:not(.game-play) #scl,
  body.game-on:not(.game-play) #grn{display:none}

  .lb-wrap{position:relative;z-index:1;width:100%;max-width:940px;margin:auto;display:flex;flex-direction:column;align-items:center;
    animation:lbin .55s var(--ease-out-expo) both}
  @keyframes lbin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

  /* Kopf */
  .lb-head{text-align:center;margin-bottom:2.4rem}
  .lb-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:'Share Tech Mono',monospace;
    font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--m-ink-3);margin-bottom:1rem}
  .lb-eyebrow::before{content:'';width:26px;height:1px;background:var(--accent-green);box-shadow:var(--glow-green-soft)}
  .lb-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(2.1rem,5vw,3.1rem);
    letter-spacing:-0.02em;color:var(--m-ink);line-height:1.02;margin-bottom:.7rem}
  .lb-sub{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:1.02rem;color:var(--m-ink-2);
    max-width:48ch;margin:0 auto;line-height:1.6;text-wrap:pretty}

  /* Modus-Karten — alle drei gleichberechtigt nebeneinander (kein Verschachteln) */
  .lb-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;margin-bottom:1.9rem}
  .lb-mode{position:relative;cursor:pointer;text-align:left;font-family:inherit;
    background:rgba(255,255,255,0.02);border:1px solid var(--m-line);border-radius:16px;
    padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;overflow:hidden;
    transition:border-color .3s var(--ease-out),background .3s var(--ease-out),
               transform .25s var(--ease-out),box-shadow .3s var(--ease-out)}
  .lb-mode:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.045);transform:translateY(-3px)}
  .lb-mode:active{transform:translateY(0) scale(.99)}
  .lb-mode.sel{border-color:rgba(0,255,136,.5);background:rgba(0,255,136,.05);
    box-shadow:0 0 0 1px rgba(0,255,136,.18) inset,0 22px 60px -34px rgba(0,255,136,.55)}
  .lb-mode-top{display:flex;align-items:center;justify-content:space-between}
  .lb-mode-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    color:var(--m-ink-2);transition:color .3s var(--ease-out)}
  .lb-mode-ico svg{width:30px;height:30px}
  .lb-mode.sel .lb-mode-ico{color:var(--accent-green)}
  .lb-mode-check{width:22px;height:22px;color:var(--accent-green);opacity:0;transform:scale(.6);
    transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
  .lb-mode.sel .lb-mode-check{opacity:1;transform:scale(1)}
  .lb-mode-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.08rem;color:var(--m-ink);
    margin-top:.35rem}
  .lb-mode-desc{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.82rem;line-height:1.5;
    color:var(--m-ink-3)}
  .lb-mode-tag{position:absolute;top:1.05rem;right:1.05rem;font-family:'Share Tech Mono',monospace;
    font-size:.5rem;letter-spacing:.12em;color:var(--accent-green);border:1px solid rgba(0,255,136,.3);
    border-radius:5px;padding:.18rem .42rem;text-transform:uppercase;background:rgba(0,255,136,.06)}

  /* Konfig-Bereich — wechselt je nach gewähltem Modus (eingebettet, keine Unterseite) */
  .lb-config{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;min-height:150px}
  .cfg-panel{display:none;width:100%;flex-direction:column;align-items:center;gap:1.15rem}
  .cfg-panel.show{display:flex;animation:cfgin .35s var(--ease-out) both}
  @keyframes cfgin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .cfg-label{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--m-ink-3);text-align:center}
  .cfg-info{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.92rem;line-height:1.6;
    color:var(--m-ink-2);text-align:center;max-width:46ch;text-wrap:pretty}

  /* Schwierigkeit als minimalistische Kacheln */
  .lb-diffs{display:flex;gap:.7rem;width:100%;justify-content:center;flex-wrap:wrap}
  .lb-diff{flex:1;min-width:140px;max-width:190px;cursor:pointer;text-align:center;
    background:rgba(255,255,255,0.02);border:1px solid var(--m-line);border-radius:12px;
    padding:.95rem .8rem;display:flex;flex-direction:column;gap:.4rem;
    transition:border-color .25s var(--ease-out),background .25s var(--ease-out),transform .14s var(--ease-out)}
  .lb-diff:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.045)}
  .lb-diff:active{transform:scale(.98)}
  .lb-diff.sel{border-color:rgba(0,255,136,.45);background:rgba(0,255,136,.06)}
  .lb-diff-ico{display:flex;align-items:center;justify-content:center;color:var(--m-ink-2);line-height:0}
  .lb-diff-ico svg{width:20px;height:20px}
  .lb-diff.sel .lb-diff-ico{color:var(--accent-green)}
  .lb-diff-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.92rem;color:var(--m-ink)}
  .lb-diff.sel .lb-diff-name{color:var(--accent-green)}
  .lb-diff-desc{font-family:'Share Tech Mono',monospace;font-size:.54rem;letter-spacing:.04em;
    color:var(--m-ink-3);line-height:1.5;text-transform:uppercase}

  /* Primär-Aktion (Starten / Gegner suchen) */
  .lb-start{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--accent-green);color:#04130c;border:none;border-radius:10px;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.005em;
    padding:.95rem 2.5rem;cursor:pointer;
    transition:box-shadow .25s var(--ease-out),transform .14s var(--ease-out),background .2s var(--ease-out)}
  .lb-start:hover:not(:disabled){background:#5bffb4;box-shadow:0 0 26px rgba(0,255,136,.42);transform:translateY(-2px)}
  .lb-start:active:not(:disabled){transform:translateY(0) scale(.97)}
  .lb-start:disabled{opacity:.5;cursor:wait}
  .lb-start svg{width:14px;height:14px}

  /* Geist-/Sekundär-Button (Abbrechen) */
  .lb-ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    background:transparent;border:1px solid var(--m-line-strong);color:var(--m-ink-2);
    font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.82rem;border-radius:9px;
    padding:.7rem 1.4rem;cursor:pointer;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s var(--ease-out)}
  .lb-ghost-btn svg{width:15px;height:15px;flex-shrink:0}
  .lb-ghost-btn:hover{border-color:var(--m-ink-3);color:var(--m-ink);background:rgba(255,255,255,0.04)}
  .lb-ghost-btn:active{transform:scale(.97)}

  .lb-note{font-family:'Space Grotesk',sans-serif;font-size:.85rem;color:var(--m-danger);
    text-align:center;min-height:1rem;line-height:1.6}
  .lb-note a{color:var(--accent-green);text-decoration:underline}
  .lb-wait-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.3rem;color:var(--m-ink)}
  .lb-wait-sub{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.9rem;color:var(--m-ink-2)}

  /* Freundesliste (Duell) */
  .mp-friends{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:.5rem;
    max-height:38vh;overflow-y:auto;padding:.15rem}
  .mp-frow{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,0.02);
    border:1px solid var(--m-line);border-radius:12px;padding:.6rem .75rem;
    transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
  .mp-frow:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.045)}
  .mp-fav{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.05);
    border:1px solid var(--m-line);display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;flex-shrink:0}
  .mp-fname{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.92rem;color:var(--m-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mp-fsub{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.08em;color:var(--m-ink-3);
    text-transform:uppercase;margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mp-fbtn{background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.32);color:var(--accent-green);
    font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.78rem;border-radius:8px;
    padding:.5rem .9rem;cursor:pointer;transition:background .2s var(--ease-out);flex-shrink:0;white-space:nowrap}
  .mp-fbtn:hover{background:rgba(0,255,136,.2)}
  .mp-fbtn:active{transform:scale(.96)}
  .mp-fbtn:disabled{opacity:.45;cursor:not-allowed}
  .mp-empty{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.9rem;color:var(--m-ink-3);
    text-align:center;line-height:1.6;padding:1.4rem .5rem}
  #mp-waiting,#arena-waiting{display:none;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
  .mp-spin{width:46px;height:46px;border:2px solid var(--m-line);border-top-color:var(--accent-green);
    border-radius:50%;animation:mpspin .9s linear infinite}
  @keyframes mpspin{to{transform:rotate(360deg)}}
  /* Warteschlangen-Timer + Freund-Hinweis (Arena) */
  .arena-wait-timer{font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--m-ink-3);font-variant-numeric:tabular-nums}
  .arena-wait-hint{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.86rem;
    color:var(--m-ink-2);max-width:38ch;line-height:1.55;animation:cfgin .4s var(--ease-out) both}
  .arena-wait-hint a{color:var(--accent-green);text-decoration:underline;cursor:pointer}

  /* ── Match-Liste (Mehrspieler, asynchron) ── */
  .mp-matches{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:.5rem;
    max-height:34vh;overflow-y:auto;padding:.15rem}
  .mp-match{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,0.02);
    border:1px solid var(--m-line);border-radius:12px;padding:.6rem .75rem;
    transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
  .mp-match:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.045)}
  .mp-match-av{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.05);
    border:1px solid var(--m-line);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
  .mp-match-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:.42rem}
  .mp-match-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
  .mp-match-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.9rem;color:var(--m-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mp-badge{font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
    padding:.22rem .5rem;border-radius:6px;border:1px solid var(--m-line);color:var(--m-ink-3);white-space:nowrap;flex-shrink:0}
  .mp-badge.turn{color:var(--accent-green);border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.08)}
  .mp-badge.result{color:#ffd24a;border-color:rgba(255,210,74,.4);background:rgba(255,210,74,.08)}
  .mp-badge.win{color:var(--accent-green);border-color:rgba(0,255,136,.4)}
  .mp-badge.lose{color:var(--red);border-color:rgba(240,107,107,.4)}
  .mp-match-hp{display:flex;align-items:center;gap:.5rem}
  .mph-mini{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,0.07);overflow:hidden;border:1px solid var(--m-line)}
  .mph-mini-fill{height:100%;width:100%;background:linear-gradient(90deg,#00ff88,#00cc6e);border-radius:4px;transition:width .5s var(--ease-out)}
  .mph-mini-fill.opp{background:linear-gradient(90deg,#f06b6b,#d04a4a)}
  .mph-mini-fill.low{filter:saturate(.7) brightness(.85)}
  .mp-vs-mini{font-family:'Share Tech Mono',monospace;font-size:.5rem;letter-spacing:.1em;color:var(--m-ink-3);flex-shrink:0}
  .mp-match-act{display:flex;flex-direction:column;gap:.35rem;flex-shrink:0}
  .mp-match-btn{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.72rem;border-radius:7px;
    padding:.42rem .7rem;cursor:pointer;border:1px solid var(--m-line);white-space:nowrap;
    transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .1s var(--ease-out)}
  .mp-match-btn:active{transform:scale(.95)}
  .mp-match-btn.play{background:rgba(0,255,136,.1);border-color:rgba(0,255,136,.32);color:var(--accent-green)}
  .mp-match-btn.play:hover{background:rgba(0,255,136,.2)}
  .mp-match-btn.play:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--m-ink-3);border-color:var(--m-line)}
  .mp-match-btn.del{background:transparent;color:var(--m-ink-3)}
  .mp-match-btn.del:hover{border-color:rgba(240,107,107,.5);color:var(--red)}
  .mp-match-btn.del.confirm{border-color:rgba(240,107,107,.6);color:var(--red);background:rgba(240,107,107,.12)}

  /* ── Wartescreen-Karte (HP-Stände + Aktionen) ── */
  .mpw-card{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:100%;max-width:420px;padding:0 1.2rem}
  .mpw-hp{width:100%;display:flex;flex-direction:column;gap:.5rem}
  .mpw-hp-row{display:flex;align-items:center;gap:.7rem}
  .mpw-hp-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.82rem;color:var(--m-ink-2);
    width:6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;flex-shrink:0}
  .mpw-hp-row .mph-mini{height:9px}
  .mpw-hp-num{font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--m-ink-2);
    font-variant-numeric:tabular-nums;width:2.8rem;text-align:right;flex-shrink:0}
  .mpw-btns{display:flex;flex-direction:column;gap:.6rem;width:100%;align-items:center;margin-top:.2rem}
  .mpw-btns .lb-start{max-width:300px}

  @media (max-width:720px){
    .lb-modes{grid-template-columns:1fr}
    #lobby{padding:96px 1.1rem 3rem}
  }

  /* ── Bestenliste (Top-Streaks) ── */
  .ldb-tab{flex:1;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.82rem;
    color:var(--m-ink-2);background:rgba(255,255,255,0.03);border:1px solid var(--m-line);
    border-radius:9px;padding:.6rem .5rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
  .ldb-tab:hover{border-color:var(--m-line-strong);color:var(--m-ink)}
  .ldb-tab.active{border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.08);color:var(--accent-green)}
  #ldb-list::-webkit-scrollbar{ width:0 }
  .ldb-empty{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.92rem;color:var(--m-ink-3);
    text-align:center;padding:2.4rem 1rem;line-height:1.7}
  .ldb-row{display:flex;align-items:center;gap:.9rem;padding:.7rem .8rem;border:1px solid var(--m-line);
    border-radius:12px;margin-bottom:.5rem;background:rgba(255,255,255,0.02);cursor:pointer;outline:none;
    transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .1s var(--ease-out)}
  .ldb-row:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.045)}
  .ldb-row:focus-visible{border-color:rgba(0,255,136,.4)}
  .ldb-row:active{transform:scale(.99)}
  .ldb-row.me{border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.05)}
  .ldb-rank{width:40px;flex-shrink:0;text-align:center;font-family:'Space Grotesk',sans-serif;
    font-weight:600;font-size:1.05rem;color:var(--m-ink-2)}
  .ldb-rank.r1{color:#ffd23f;text-shadow:0 0 12px rgba(255,210,63,.35)}
  .ldb-rank.r2{color:#cdd3dc;text-shadow:0 0 12px rgba(205,211,220,.28)}
  .ldb-rank.r3{color:#d8884a;text-shadow:0 0 12px rgba(216,136,74,.3)}
  .ldb-av{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:rgba(255,255,255,0.05);
    border:1px solid var(--m-line);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
  .ldb-info{flex:1;min-width:0}
  .ldb-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.95rem;color:var(--m-ink);
    display:flex;align-items:center;gap:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ldb-you{font-family:'Share Tech Mono',monospace;font-size:.5rem;letter-spacing:.1em;
    background:var(--accent-green);color:#04130c;border-radius:4px;padding:.12rem .32rem;font-weight:700}
  .ldb-sub{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.08em;color:var(--m-ink-3);
    text-transform:uppercase;margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ldb-streak{flex-shrink:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;color:var(--accent-green)}
  /* Gegner-Statuschip (nur im Mehrspieler-Match) */
  #mp-opp{display:none;position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;
    background:rgba(10,12,18,.78);border:1px solid var(--m-line);backdrop-filter:blur(14px);border-radius:12px;
    padding:.45rem 1.1rem;text-align:center}
  body.game-play.mp-on:not(.arena-on) #mp-opp{display:block}   /* Duell-Chip nur im Duell */
  .mp-opp-vs{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.85rem;color:var(--m-ink)}
  .mp-opp-vs b{color:var(--green);font-weight:600}
  .mp-opp-st{font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.1em;
    color:var(--yellow);text-transform:uppercase;margin-top:.15rem}

  /* ══ ARENA (Zufallsgegner, HP-Kampf) ══ */
  /* persistentes HP-HUD (oben, ganzes Match) */
  #mp-hud{display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
    width:min(620px,92vw);align-items:center;gap:.7rem;border-radius:14px;
    background:rgba(10,12,18,.78);border:1px solid var(--m-line);backdrop-filter:blur(14px);padding:.55rem .85rem}
  body.game-play.arena-on #mp-hud{display:flex}
  .mph-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
  .mph-row{display:flex;align-items:center;gap:.4rem;justify-content:flex-start}
  .mph-opp .mph-row{justify-content:flex-end}
  .mph-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.7rem;color:var(--m-ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
  .mph-streak{font-family:'Share Tech Mono',monospace;font-size:.6rem;color:var(--yellow);white-space:nowrap}
  .mph-bar{position:relative;height:16px;background:rgba(255,255,255,.07);border:1px solid var(--m-line);
    border-radius:6px;overflow:hidden}
  .mph-fill{position:absolute;inset:0;right:auto;width:100%;background:linear-gradient(90deg,#1f9d57,var(--green));
    transition:width .9s cubic-bezier(.22,1,.36,1)}
  .mph-fill.low{background:linear-gradient(90deg,#8a1f1f,var(--red))}
  .mph-opp .mph-fill{left:auto;right:0;background:linear-gradient(270deg,#3a6fd8,#5aa0ff)}
  .mph-opp .mph-fill.low{background:linear-gradient(270deg,#8a1f1f,var(--red))}
  .mph-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Share Tech Mono',monospace;font-size:.58rem;color:#fff;text-shadow:0 1px 3px #000;
    letter-spacing:.06em;font-variant-numeric:tabular-nums}
  .mph-vs{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--m-ink-2);flex:0 0 auto}
  .mph-st{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:60;
    font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.1em;color:var(--yellow);
    text-transform:uppercase;text-align:center;display:none}
  body.game-play.arena-on .mph-st{display:block}

  /* Zuschauen: Cursor-Punkt + Hinweis + Markierung des gegnerischen Geist-Picks */
  #mp-cursor{display:none;position:fixed;z-index:70;width:18px;height:18px;margin:-9px 0 0 -9px;
    border:2px solid #5aa0ff;border-radius:50%;background:rgba(90,160,255,.25);
    box-shadow:0 0 12px rgba(90,160,255,.7);pointer-events:none;transition:left .25s linear,top .25s linear}
  body.arena-spectate #mp-cursor{display:block}
  #game-root .go.spectate-sel{outline:2px solid #5aa0ff;outline-offset:-2px;
    box-shadow:0 0 16px rgba(90,160,255,.6) inset}
  body.arena-spectate #gpanel{opacity:.6;pointer-events:none}   /* eigenes Tippen gesperrt, nur zusehen */

  /* Runden-Reveal (HP-Animation) – EIGENES VOLLBILDFENSTER (wie das VS-Intro),
     bewusst länger sichtbar, damit man die HP-Änderung in Ruhe sehen kann. */
  #mp-reveal{display:none;position:fixed;inset:0;z-index:138;align-items:center;justify-content:center;
    padding:1.5rem;font-family:'Space Grotesk',sans-serif;
    background:radial-gradient(120% 90% at 50% 50%,rgba(0,255,136,0.05),transparent 60%),rgba(4,6,12,0.95);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  #mp-reveal.show{display:flex;animation:mprev .35s var(--ease-out)}
  @keyframes mprev{from{opacity:0}to{opacity:1}}
  .mprev-box{width:min(560px,94vw);text-align:center;
    animation:mprevBox .5s var(--ease-out-expo) both}
  @keyframes mprevBox{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
  .mprev-ico{line-height:0;display:flex;justify-content:center}
  .mprev-ico svg{width:clamp(3rem,8vw,4.4rem);height:auto}
  .mprev-ans{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:clamp(1rem,2.4vw,1.35rem);
    color:var(--m-ink-2);margin:.6rem 0 1.8rem}
  .mprev-ans b{color:var(--m-ink);font-weight:600}
  .mprev-side{margin:1rem 0}
  .mprev-top{display:flex;justify-content:space-between;align-items:baseline;
    font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1rem;margin-bottom:.1rem}
  .mprev-name{color:var(--m-ink)}
  .mprev-score{color:var(--green);font-family:'Share Tech Mono',monospace;font-size:.8rem;letter-spacing:.04em}
  .mprev-score.miss{color:var(--red)}
  .mprev-bar{position:relative;height:26px;margin-top:.4rem;background:rgba(255,255,255,.07);
    border:1px solid var(--m-line);border-radius:8px;overflow:hidden}
  .mprev-fill{position:absolute;inset:0;right:auto;width:100%;
    background:linear-gradient(90deg,#1f9d57,var(--green));transition:width 1.1s cubic-bezier(.22,1,.36,1)}
  .mprev-fill.low{background:linear-gradient(90deg,#8a1f1f,var(--red))}
  .mprev-dmg{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    font-family:'Share Tech Mono',monospace;font-size:.62rem;color:#fff;opacity:0}
  .mprev-dmg.pop{animation:mpdmg 1.3s ease forwards}
  @keyframes mpdmg{0%{opacity:0;transform:translateY(2px)}20%{opacity:1}80%{opacity:1;transform:translateY(-10px)}
    100%{opacity:0;transform:translateY(-16px)}}

  /* ── ARENA „Gegner gefunden" – VS-Intro (minimalistisch, animiert) ── */
  #mp-vs{display:none;position:fixed;inset:0;z-index:140;flex-direction:column;align-items:center;
    justify-content:center;gap:2.2rem;font-family:'Space Grotesk',sans-serif;
    background:radial-gradient(120% 90% at 50% 50%,rgba(0,255,136,0.07),transparent 60%),rgba(4,6,12,0.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  #mp-vs.show{display:flex}
  #mp-vs.out{animation:vsOut .5s var(--ease-out) forwards}
  @keyframes vsOut{to{opacity:0}}
  .vs-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(circle at 50% 50%,rgba(0,255,136,0.2),transparent 55%)}
  #mp-vs.show .vs-flash{animation:vsFlash .8s var(--ease-out) .3s}
  @keyframes vsFlash{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
  .vs-label{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
    color:var(--m-ink-3);opacity:0}
  #mp-vs.show .vs-label{animation:vsLabel .6s var(--ease-out) .12s forwards}
  @keyframes vsLabel{from{opacity:0;transform:translateY(-8px)}to{opacity:.85;transform:translateY(0)}}
  .vs-row{display:flex;align-items:center;gap:clamp(1rem,5vw,3.2rem)}
  .vs-side{display:flex;flex-direction:column;align-items:center;gap:.9rem}
  #mp-vs.show .vs-you{animation:vsInL .66s var(--ease-out-expo) both}
  #mp-vs.show .vs-opp{animation:vsInR .66s var(--ease-out-expo) both}
  @keyframes vsInL{from{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:translateX(0)}}
  @keyframes vsInR{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:translateX(0)}}
  .vs-av{width:clamp(86px,16vw,128px);height:clamp(86px,16vw,128px);border-radius:24px;
    background:rgba(255,255,255,0.04);border:1px solid var(--m-line-strong);
    display:flex;align-items:center;justify-content:center;font-size:clamp(3rem,7vw,4.4rem);
    box-shadow:0 24px 60px -30px rgba(0,0,0,.85)}
  .vs-you .vs-av{border-color:rgba(0,255,136,.45);box-shadow:0 0 44px -8px rgba(0,255,136,.4)}
  .vs-opp .vs-av{border-color:rgba(90,160,255,.45);box-shadow:0 0 44px -8px rgba(90,160,255,.4)}
  .vs-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1rem,2.4vw,1.4rem);
    color:var(--m-ink);max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vs-mid{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.2rem,6vw,4rem);
    letter-spacing:-0.02em;color:var(--accent-green);text-shadow:0 0 26px rgba(0,255,136,.5);transform:scale(0)}
  #mp-vs.show .vs-mid{animation:vsPop .56s var(--ease-out-expo) .24s forwards}
  @keyframes vsPop{0%{transform:scale(0) rotate(-12deg)}70%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
  /* Phase 2: Profile fahren wieder weg, dann zählt der Countdown */
  #mp-vs.phase2 .vs-you{animation:vsOutL .55s var(--ease-out-expo) forwards}
  #mp-vs.phase2 .vs-opp{animation:vsOutR .55s var(--ease-out-expo) forwards}
  #mp-vs.phase2 .vs-mid{animation:vsMidOut .45s var(--ease-out) forwards}
  #mp-vs.phase2 .vs-label{opacity:0;transition:opacity .3s var(--ease-out)}
  @keyframes vsOutL{to{opacity:0;transform:translateX(-130px) scale(.85)}}
  @keyframes vsOutR{to{opacity:0;transform:translateX(130px) scale(.85)}}
  @keyframes vsMidOut{to{opacity:0;transform:scale(.4)}}
  .vs-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:clamp(4.5rem,17vw,10rem);letter-spacing:-0.03em;color:var(--m-ink);line-height:1;opacity:0;
    font-variant-numeric:tabular-nums;pointer-events:none}
  .vs-countdown.go{animation:vsCount .8s var(--ease-out) both}
  @keyframes vsCount{0%{opacity:0;transform:scale(1.7)}22%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.82)}}
  .vs-countdown.vs-start{color:var(--accent-green);text-shadow:0 0 34px rgba(0,255,136,.55)}
  .vs-countdown.vs-start.go{animation:vsStart .85s var(--ease-out-expo) both}
  @keyframes vsStart{0%{opacity:0;transform:scale(.4) rotate(-8deg)}40%{opacity:1;transform:scale(1.18) rotate(2deg)}72%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.12)}}
  @media (prefers-reduced-motion: reduce){
    #mp-vs .vs-flash,#mp-vs .vs-label,#mp-vs .vs-you,#mp-vs .vs-opp,#mp-vs .vs-mid,#mp-vs .vs-countdown{animation:none!important;opacity:1;transform:none}
  }

  /* ── Einzelspieler-Countdown (3·2·1·Start!) – nutzt die .vs-countdown-Animation ── */
  #sp-countdown{display:none;position:fixed;inset:0;z-index:140;align-items:center;justify-content:center;
    background:radial-gradient(120% 90% at 50% 50%,rgba(0,255,136,0.07),transparent 60%),rgba(4,6,12,0.82);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  #sp-countdown.show{display:flex}
  #sp-countdown.out{animation:vsOut .45s var(--ease-out) forwards}

  /* Arena: eigener Vollbild-Wartescreen nach dem eigenen Tipp (kein Zuschauen) */
  #mp-wait{display:none;position:fixed;inset:0;z-index:135;flex-direction:column;align-items:center;
    justify-content:center;gap:1.4rem;text-align:center;font-family:'Space Grotesk',sans-serif;
    background:radial-gradient(120% 90% at 50% 50%,rgba(0,255,136,0.055),transparent 60%),rgba(4,6,12,0.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:vsFade .35s var(--ease-out) both}
  body.game-play.arena-on.mp-waitscreen #mp-wait{display:flex}
  @keyframes vsFade{from{opacity:0}to{opacity:1}}
  .mpw-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.5rem,3.6vw,2.2rem);
    letter-spacing:-0.01em;color:var(--m-ink)}
  .mpw-sub{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:.98rem;color:var(--m-ink-2);max-width:40ch}

  /* TOASTS (Spiel) */
  #toasts{position:fixed;top:80px;right:1.5rem;z-index:300;
    display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:290px}
  #game-root .tst{background:rgba(10,12,18,.88);border:1px solid var(--m-line-strong);border-radius:12px;
    padding:.75rem 1rem;display:flex;gap:.7rem;align-items:center;backdrop-filter:blur(16px);
    animation:tin .4s cubic-bezier(.34,1.56,.64,1) both,tout .3s ease 3.5s both;
    box-shadow:0 18px 50px -28px rgba(0,0,0,.85)}
  #game-root .ti{flex-shrink:0;display:flex;align-items:center;color:var(--m-ink)}
  #game-root .ti svg{width:22px;height:22px}
  #game-root .tn{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.88rem;color:var(--m-ink)}
  #game-root .ts{font-family:'Share Tech Mono',monospace;font-size:.57rem;color:var(--m-ink-3);letter-spacing:.06em;margin-top:.1rem}
  @keyframes tin{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
  @keyframes tout{to{opacity:0;transform:translateX(50px)}}

  /* ════════════════════ SHOP – Vollbild-Overlay (eigenes, gescoptes Design) ════════════════════
     Alle Variablen sind auf #shop-root gescopt → keine Kollision mit ghost-guesser/Spiel. */
  #shop-root{
    --s-bg0:#0a0a0b; --s-bg1:#141416; --s-bg2:#1b1b1f;
    --s-green:#f4f4f5; --s-gold:#ffcf40; --s-blue:#4d8dff;
    --s-purple:#a855f7; --s-red:#f06b6b;
    --s-txt:#f4f4f5; --s-dim:#a8a8b0; --s-faint:#75757f;
    --s-line:rgba(255,255,255,.08); --s-line2:rgba(255,255,255,.16);
    display:none; position:fixed; inset:0; z-index:900;
    /* Transparent (nur ein zarter Farb-Touch): das fixe hero.png (#hero-bg) scheint
       hindurch, der Lese-Schleier sitzt auf #hero-bg::after. Kein schwarzer Grund. */
    background:
      radial-gradient(760px 520px at 8% 6%, rgba(120,90,255,0.06), transparent 62%),
      radial-gradient(900px 620px at 50% 122%, rgba(255,207,64,0.04), transparent 60%);
    color:var(--s-txt); font-family:'Space Grotesk',sans-serif;
    overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  }
  body.shop-on #shop-root{ display:block }
  body.shop-on{ overflow:hidden }
  #shop-root::-webkit-scrollbar{ width:0 }

  /* Scrollleiste im Profil-Statistik-Fenster ausblenden (scrollbar bleibt funktional). */
  #ps-body{ scrollbar-width:none }
  #ps-body::-webkit-scrollbar{ width:0; height:0 }

  #shop-root .sh-wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:86px 1.5rem 4rem }

  /* ── Hinweis: Kosmetik wird in den Einstellungen angelegt ── */
  #shop-root .sh-cos-hint{ display:flex; align-items:center; gap:.7rem; margin:0 0 1.6rem;
    background:rgba(255,255,255,.03); border:1px solid var(--s-line); border-radius:12px;
    padding:.75rem 1rem; }
  #shop-root .sh-cos-hint-ico{ display:flex; flex-shrink:0; color:var(--s-txt); opacity:.85 }
  #shop-root .sh-cos-hint-txt{ font-family:'Space Grotesk',sans-serif; font-size:.8rem; line-height:1.5;
    color:var(--s-dim,#a8a8b0); font-weight:400 }
  #shop-root .sh-cos-hint-txt strong{ color:var(--s-txt); font-weight:600 }
  #shop-root .sh-cos-hint-txt a{ color:var(--s-txt); text-decoration:underline; text-underline-offset:2px; cursor:pointer }
  #shop-root .sh-cos-hint-txt a:hover{ opacity:.8 }

  /* ── Inventar-Kopf ── */
  #shop-root .sh-head{ margin-bottom:2.4rem }
  #shop-root .sh-h1{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(1.7rem,4vw,2.3rem);
    letter-spacing:-.02em; color:var(--s-txt); line-height:1; margin:0 0 .55rem }
  #shop-root .sh-h1-sub{ font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:.9rem; line-height:1.55;
    color:var(--s-faint); margin:0; max-width:58ch }

  /* ── Kategorie-Umschalter ── */
  #shop-root .sh-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem }
  #shop-root .sh-tab{ display:flex; align-items:center; gap:.55rem; padding:.6rem 1.1rem;
    background:rgba(255,255,255,.03); border:1px solid var(--s-line); color:var(--s-dim);
    font-family:'Space Grotesk',sans-serif; font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:500;
    cursor:pointer; border-radius:9px; transition:all .22s }
  #shop-root .sh-tab-ico{ font-size:1.05rem }
  #shop-root .sh-tab:hover{ color:var(--s-txt); border-color:var(--s-line2) }
  #shop-root .sh-tab.active{ color:#0a0a0b; background:var(--s-green); border-color:var(--s-green); font-weight:500 }
  #shop-root .sh-tab-cnt{ font-size:.62rem; padding:.04rem .42rem; border:1px solid currentColor; border-radius:5px; opacity:.55 }

  /* ── Suche + „Nur gekaufte"-Filter ── */
  #shop-root .sh-controls{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-bottom:1.6rem }
  #shop-root .sh-filter-pill{ font-family:'Space Grotesk',sans-serif; font-size:.78rem; letter-spacing:0;
    padding:.5rem 1rem; border:1px solid var(--s-line); background:rgba(255,255,255,.03); color:var(--s-dim);
    cursor:pointer; text-transform:none; font-weight:500; border-radius:8px; transition:all .2s }
  #shop-root .sh-filter-pill:hover{ border-color:var(--s-line2); color:var(--s-txt) }
  #shop-root .sh-filter-pill.active{ border-color:var(--s-green); background:var(--s-green); color:#0a0a0b; font-weight:500 }
  #shop-root .sh-search{ margin-left:auto; background:rgba(255,255,255,.03); border:1px solid var(--s-line);
    color:var(--s-txt); font-family:'Space Grotesk',sans-serif; font-size:.82rem; padding:.5rem .9rem;
    outline:none; letter-spacing:0; border-radius:8px; transition:border-color .2s; width:230px; max-width:100% }
  #shop-root .sh-search:focus{ border-color:var(--s-line2) }
  #shop-root .sh-search::placeholder{ color:var(--s-faint) }
  @media (max-width:600px){ #shop-root .sh-search{ margin-left:0; width:100% } }

  /* ── Item-Raster ── */
  #shop-root .sh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem }

  /* ── Kisten (Crate-Auswahl) ── */
  #shop-root .sh-section-head{ margin:0 0 1.3rem }
  #shop-root .sh-section-title{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(1.3rem,3vw,1.7rem); color:var(--s-txt,#e8eaed); letter-spacing:-0.01em }
  #shop-root .sh-section-sub{ font-family:'Space Grotesk',sans-serif; font-size:.82rem; color:var(--s-faint,#8a8f98); margin-top:.35rem }
  #shop-root .sh-crate-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.4rem 1rem }
  /* Zwei-Spalten-Layout: links Titel/Effekt/Avatar, rechts Aufwertung/Spezial */
  #shop-root .sh-cols{ display:grid; grid-template-columns:2fr 1fr; gap:2.5rem; align-items:start }
  @media (max-width:900px){ #shop-root .sh-cols{ grid-template-columns:1fr; gap:0 } }
  /* Unterteilung der Kisten-Kategorien */
  #shop-root .crate-section + .crate-section{ margin-top:2.8rem }
  #shop-root .sh-col + .sh-col .crate-section:first-child{ margin-top:0 }
  /* Platzhalter für noch leere Kategorien (Kisten kommen später) */
  #shop-root .crate-section-empty{ border:1px dashed var(--s-line); border-radius:14px;
    padding:2.4rem 1rem; text-align:center; font-family:'Space Grotesk',sans-serif;
    font-size:.8rem; color:var(--s-faint,#8a8f98) }
  #shop-root .crate-section-head{ display:flex; align-items:center; gap:.9rem; margin:0 0 1.5rem }
  #shop-root .crate-section-title{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.18rem; color:var(--s-txt,#e8eaed); letter-spacing:-0.01em; white-space:nowrap }
  #shop-root .crate-section-sub{ font-family:'Space Grotesk',sans-serif; font-size:.72rem; color:var(--s-faint,#8a8f98); white-space:nowrap }
  #shop-root .crate-section-line{ flex:1; height:1px; background:var(--s-line) }
  /* kleiner Info-Knopf neben dem Kategorietitel */
  #shop-root .crate-info-btn{ flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--s-line); border-radius:50%; color:var(--s-dim,#a8a8b0); cursor:pointer;
    transition:border-color .2s, color .2s, background .2s; padding:0; margin-left:-.4rem }
  #shop-root .crate-info-btn:hover{ border-color:var(--s-txt); color:var(--s-txt); background:rgba(255,255,255,.05) }
  /* Token-Anzeige der Level-Kiste */
  #shop-root .crate-token-rdy{ color:var(--c); font-weight:600 }
  #shop-root .crate-token-none{ color:var(--s-faint,#8a8f98); font-size:.82rem }
  /* ── Kisten-Info-Illustrationen (im #crate-info-body) ── */
  #crate-info-body .ci-card{ background:rgba(255,255,255,0.03); border:1px solid var(--m-line); border-radius:12px; padding:1.1rem; }
  #crate-info-body .ci-row{ display:flex; align-items:center; gap:.8rem }
  #crate-info-body .ci-av{ width:46px; height:46px; flex-shrink:0; border-radius:11px; border:1px solid var(--m-line-strong);
    display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; background:rgba(255,255,255,0.05) }
  #crate-info-body .ci-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; color:var(--m-ink); line-height:1.1 }
  #crate-info-body .ci-titleline{ font-family:'Space Grotesk',sans-serif; font-size:.72rem; color:var(--m-ink-3); margin-top:.25rem }
  #crate-info-body .ci-bar{ height:6px; width:140px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; margin-top:.4rem }
  #crate-info-body .ci-bar span{ display:block; height:100%; width:62%; border-radius:4px }
  #crate-info-body .ci-avrow{ display:flex; gap:.6rem; justify-content:center }
  #crate-info-body .ci-levelup{ display:flex; align-items:center; justify-content:center; gap:.7rem }
  #crate-info-body .ci-lvl{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:.85rem; color:var(--m-ink-2);
    border:1px solid var(--m-line); border-radius:8px; padding:.4rem .7rem }
  #crate-info-body .ci-lvl-up{ color:#0a0a0b; background:var(--accent-green); border-color:var(--accent-green) }
  #crate-info-body .ci-arrow{ color:var(--m-ink-3) }
  #crate-info-body .ci-gift{ font-size:1.4rem; margin-left:.2rem }
  #crate-info-body .ci-odds{ display:flex; flex-direction:column; gap:.5rem }
  #crate-info-body .ci-odd{ display:flex; align-items:center; gap:.6rem; font-family:'Space Grotesk',sans-serif; font-size:.72rem; color:var(--m-ink-2) }
  #crate-info-body .ci-odd span{ width:64px; flex-shrink:0 }
  #crate-info-body .ci-odd i{ display:block; height:7px; border-radius:4px; min-width:6px }

  /* ── Kiste = das anklickbare Objekt selbst (kein Button/keine Karte) ── */
  #shop-root .crate-card{ --c:#9b6bff; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
    background:none; border:none; padding:.6rem .4rem 1.1rem; cursor:pointer; border-radius:18px;
    transition:transform .3s cubic-bezier(.34,1.45,.5,1) }
  #shop-root .crate-card:active{ transform:scale(.96) }
  #shop-root .crate-3d-wrap{ position:relative; width:100%; display:flex; justify-content:center; margin-bottom:.85rem }
  /* weicher Bodenschatten unter der Kiste */
  #shop-root .crate-3d-wrap::after{ content:''; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
    width:62%; height:14px; border-radius:50%; background:var(--c); opacity:.2; filter:blur(9px); pointer-events:none;
    transition:opacity .35s, width .35s }
  #shop-root .crate-card:hover .crate-3d-wrap::after{ opacity:.42; width:50% }
  #shop-root .crate-3d{ width:152px; height:152px; color:var(--c); display:block; will-change:transform;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));
    transition:transform .4s cubic-bezier(.34,1.5,.5,1), filter .4s var(--ease-out) }
  #shop-root .crate-card:hover .crate-3d{ transform:translateY(-12px) scale(1.07) rotate(-2deg);
    filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)) drop-shadow(0 0 24px var(--c)) }
  #shop-root .crate-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.16rem; color:var(--s-txt,#e8eaed); letter-spacing:-0.01em; line-height:1.15 }
  #shop-root .crate-card:hover .crate-name{ color:#fff }
  #shop-root .crate-blurb{ font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:.72rem; color:var(--s-faint,#8a8f98); line-height:1.45; margin:.35rem 0 .7rem; max-width:24ch }
  #shop-root .crate-price{ display:inline-flex; align-items:center; gap:.4rem; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; color:var(--s-txt,#e8eaed) }
  #shop-root .crate-price .coin-ico{ width:1.05em; height:1.05em }
  #shop-root .crate-card.locked .crate-3d{ filter:grayscale(.55) brightness(.62) drop-shadow(0 14px 20px rgba(0,0,0,.5)); opacity:.72 }
  #shop-root .crate-card.locked:hover .crate-3d{ transform:translateY(-6px) scale(1.03); filter:grayscale(.4) brightness(.7) drop-shadow(0 18px 26px rgba(0,0,0,.5)) }
  #shop-root .crate-card.locked .crate-price{ color:var(--s-red) }
  #shop-root .crate-card.locked .crate-name{ color:var(--s-dim) }

  /* ── Pool-Vorschau im Kiste-Modal ── */
  .crate-pool-group{ margin-bottom:1.3rem }
  .crate-pool-grouphead{ display:flex; align-items:center; gap:.7rem; margin-bottom:.75rem }
  .crate-pool-rar{ font-family:'Space Grotesk',sans-serif; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; white-space:nowrap }
  .crate-pool-pct{ font-family:'Space Grotesk',sans-serif; font-size:.62rem; letter-spacing:.04em; color:var(--m-ink-3); font-weight:500; white-space:nowrap }
  .crate-pool-line{ flex:1; height:1px; background:var(--m-line) }
  /* Pool-Karten – Typ (Titel/Effekt) klar erkennbar */
  .crate-pool-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(192px,1fr)); gap:.55rem }
  .crate-pool-card{ --c:#888; position:relative; display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem .5rem .75rem;
    border:1px solid var(--m-line); border-radius:11px; background:rgba(255,255,255,.025); overflow:hidden;
    transition:border-color .2s, background .2s }
  .crate-pool-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--g,var(--c)) }
  .crate-pool-card.owned{ border-color:rgba(0,255,136,.4); background:rgba(0,255,136,.045) }
  .cpc-badge{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; color:#0a0a0b; box-shadow:0 3px 10px -4px var(--c) }
  .cpc-badge.effect{ border:1px solid rgba(255,255,255,.18) }
  .cpc-badge.skin{ background:rgba(255,255,255,.05); border:1px solid var(--c); box-shadow:none; font-size:1.25rem }
  .cpc-info{ min-width:0; flex:1 }
  .cpc-name{ font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:500; color:var(--m-ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2 }
  .cpc-name.grad{ background:var(--g); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
  .cpc-type{ font-family:'Space Grotesk',sans-serif; font-size:.52rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--m-ink-3); font-weight:600; margin-top:.18rem }
  .cpc-own{ position:absolute; top:.4rem; right:.5rem; color:var(--accent-green); font-weight:700; font-size:.74rem; line-height:1 }

  /* ── CS:GO-Reel ── */
  .reel-viewport{ position:relative; height:118px; overflow:hidden; margin:0 1.7rem;
    border:1px solid var(--m-line); border-radius:12px; background:rgba(0,0,0,.28);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent) }
  /* Vollbild-Reel */
  #crate-fs{ animation:crate-fs-in .45s var(--ease-out) both }
  @keyframes crate-fs-in{ from{opacity:0; backdrop-filter:blur(0)} to{opacity:1} }
  /* Inhalte liegen über den Partikeln */
  #crate-fs > *:not(#crate-fs-particles){ position:relative; z-index:1 }
  /* Sanftes, gestaffeltes Einblenden beim ERSTEN Öffnen (läuft erneut bei none→flex, nicht beim „Nochmal öffnen") */
  #crate-fs-eyebrow{ animation:cfx-up .5s .05s var(--ease-out) both }
  #crate-fs-name{ animation:cfx-up .55s .12s var(--ease-out) both }
  #crate-fs .reel-viewport{ animation:cfx-up .6s .2s var(--ease-out-expo) both }
  @keyframes cfx-up{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
  /* Aktionen (Nochmal öffnen / Schließen) sanft einblenden, wenn sie erscheinen */
  #crate-fs-actions{ animation:cfx-up .42s var(--ease-out) both }
  /* Partikel-Hintergrund (per JS gefüllt, in der Akzentfarbe der Kiste) */
  #crate-fs-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
  #crate-fs-particles .cfx-dot{ position:absolute; bottom:-14px; border-radius:50%; background:var(--cfx,#fff);
    opacity:0; will-change:transform,opacity; animation:cfx-rise var(--d,13s) linear var(--delay,0s) infinite }
  @keyframes cfx-rise{ 0%{transform:translateY(0) translateX(0); opacity:0}
    14%{opacity:var(--o,.5)} 86%{opacity:var(--o,.5)}
    100%{transform:translateY(-105vh) translateX(var(--dx,0px)); opacity:0} }
  @media (prefers-reduced-motion:reduce){ #crate-fs-particles{ display:none } }
  .reel-fs{ height:150px; width:min(94vw,1120px); margin:0 }
  .reel-marker{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); z-index:3;
    background:linear-gradient(180deg,transparent,var(--accent-green),transparent); box-shadow:0 0 12px var(--accent-green) }
  .reel-fs .reel-marker{ width:3px }
  .reel-track{ position:absolute; top:50%; left:0; transform:translate(0,-50%); display:flex; gap:12px; padding:0 8px; will-change:transform }
  .reel-tile{ --c:#888; width:118px; height:104px; flex-shrink:0; border-radius:13px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.45rem; text-align:center; padding:.55rem .45rem; position:relative; overflow:hidden;
    border:1px solid var(--m-line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    box-shadow:inset 0 26px 30px -26px var(--c);
    transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out) }
  .reel-tile .rt-bar{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--g,var(--c)) }
  .reel-fs .reel-tile{ width:142px; height:140px; border-radius:15px }
  .reel-tile .rt-badge{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; color:#0a0a0b; box-shadow:0 4px 12px -4px var(--c) }
  .reel-tile .rt-badge.fx{ box-shadow:0 4px 14px -3px var(--c); border:1px solid rgba(255,255,255,.2) }
  .reel-tile .rt-badge.skin{ background:rgba(255,255,255,.05); border:1px solid var(--c); box-shadow:none; font-size:1.3rem }
  .reel-fs .reel-tile .rt-badge.skin{ font-size:1.8rem }
  .reel-fs .reel-tile .rt-badge{ width:46px; height:46px; font-size:1.4rem; border-radius:12px }
  .reel-tile .rt-name{ font-family:'Space Grotesk',sans-serif; font-size:.6rem; line-height:1.15; color:var(--m-ink); font-weight:500;
    max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; padding:0 .2rem }
  .reel-fs .reel-tile .rt-name{ font-size:.74rem }
  .reel-tile .rt-name.grad{ background:var(--g); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
  .reel-tile .rt-rar{ font-family:'Space Grotesk',sans-serif; font-size:.46rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; opacity:.9 }
  .reel-fs .reel-tile .rt-rar{ font-size:.56rem }
  .reel-tile.win{ border-color:var(--c); box-shadow:inset 0 26px 30px -26px var(--c), 0 0 0 1px var(--c), 0 0 30px -2px var(--c) }
  @keyframes crate-pop{ 0%{transform:scale(.82) translateY(8px);opacity:0} 55%{transform:scale(1.05) translateY(0)} 100%{transform:scale(1);opacity:1} }
  .crate-win-line{ animation:crate-pop .5s var(--ease-spring,cubic-bezier(.34,1.4,.5,1)) both }
  /* Ergebnis + Aktionen sanft ausblenden, wenn man „Nochmal öffnen" drückt */
  @keyframes crate-win-out{ from{opacity:1; transform:translateY(0) scale(1)} to{opacity:0; transform:translateY(16px) scale(.95)} }
  .crate-win-out{ animation:crate-win-out .26s var(--ease-out) both }
  @keyframes crate-acts-out{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(12px)} }
  .crate-acts-out{ animation:crate-acts-out .24s var(--ease-out) both !important }
  .crate-grad-name{ background:var(--g); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
  #shop-root .sh-card{ --r:rgba(255,255,255,.22); position:relative; display:flex; flex-direction:column;
    align-items:center; text-align:center; padding:1.6rem 1.1rem 1.2rem;
    background:rgba(255,255,255,.02); border:1px solid var(--s-line); border-radius:14px;
    overflow:hidden; transition:transform .28s cubic-bezier(.34,1.4,.5,1),border-color .28s,box-shadow .28s }
  #shop-root .sh-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--r),transparent); opacity:.7 }
  #shop-root .sh-card::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:radial-gradient(130px 90px at 50% 0%,var(--r),transparent 70%); transition:opacity .3s }
  #shop-root .sh-card:hover{ transform:translateY(-6px); border-color:var(--r);
    box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px var(--r), 0 10px 34px -12px var(--r) }
  #shop-root .sh-card:hover::after{ opacity:.12 }
  /* Selten = blau umrandet · Episch = lila umrandet (bereits im Ruhezustand sichtbar) */
  #shop-root .sh-card.rare{   --r:var(--s-blue);   border-color:rgba(77,141,255,.45) }
  #shop-root .sh-card.epic{   --r:var(--s-purple); border-color:rgba(168,85,247,.5) }
  #shop-root .sh-card.legend{ --r:var(--s-gold);   border-color:rgba(255,207,64,.5) }
  #shop-root .sh-card.equipped{ border-color:var(--s-line2);
    box-shadow:0 0 0 1px rgba(255,255,255,.22),0 16px 40px rgba(0,0,0,.5) }
  #shop-root .sh-orb{ width:88px; height:88px; border-radius:20px; display:flex; align-items:center;
    justify-content:center; font-size:2.7rem; margin-bottom:1rem; position:relative;
    background:rgba(255,255,255,.04); border:1px solid var(--r);
    box-shadow:inset 0 0 18px rgba(0,0,0,.4); transition:transform .3s }
  #shop-root .sh-card:hover .sh-orb{ animation:sh-float 2.4s ease-in-out infinite }
  @keyframes sh-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  /* Effekt-Karte: farbiger Glüh-Orb statt Emoji (zeigt die echte Akzentfarbe) */
  #shop-root .sh-orb-fx{ background:radial-gradient(circle at 50% 38%, var(--fx,#cfd2d8), transparent 70%), rgba(255,255,255,.03);
    border-color:var(--fx,var(--r)); box-shadow:inset 0 0 22px rgba(0,0,0,.45), 0 0 26px -6px var(--fx,#cfd2d8) }
  #shop-root .sh-orb-fx::before{ content:''; position:absolute; inset:18px; border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%); mix-blend-mode:overlay }
  /* Titel-Karte: Monogramm statt Emoji */
  #shop-root .sh-orb-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:2.3rem;
    color:var(--r); background:rgba(255,255,255,.02); border-color:var(--r); text-transform:uppercase }
  #shop-root .sh-tag{ position:absolute; top:.6rem; right:.6rem; font-family:'Space Grotesk',sans-serif;
    font-size:.54rem; letter-spacing:.06em; padding:.2rem .5rem; text-transform:uppercase; font-weight:500; border-radius:6px }
  #shop-root .sh-tag.owned{ color:var(--s-dim); background:rgba(255,255,255,.06); border:1px solid var(--s-line2) }
  #shop-root .sh-tag.equip{ color:#0a0a0b; background:var(--s-green); border:1px solid var(--s-green) }
  #shop-root .sh-name{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1rem; color:var(--s-txt); margin-bottom:.35rem }
  #shop-root .sh-rar{ font-family:'Space Grotesk',sans-serif; font-size:.56rem; letter-spacing:.1em;
    text-transform:uppercase; font-weight:500; color:var(--s-dim); border:1px solid var(--r); padding:.14rem .5rem; border-radius:6px; margin-bottom:.9rem }
  #shop-root .sh-price{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.15rem; color:var(--s-txt);
    margin-bottom:.85rem; display:flex; align-items:center; gap:.35rem }
  #shop-root .sh-price.free{ color:var(--s-dim); font-size:.78rem; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase }
  #shop-root .sh-btn{ width:100%; margin-top:auto; padding:.62rem; cursor:pointer; font-family:'Space Grotesk',sans-serif;
    font-size:.8rem; letter-spacing:0; text-transform:none; font-weight:500; background:rgba(255,255,255,.03);
    border:1px solid var(--s-line2); color:var(--s-txt); border-radius:8px; transition:all .2s }
  #shop-root .sh-btn:hover{ background:rgba(255,255,255,.08) }
  #shop-root .sh-btn.buy{ background:var(--s-green); color:#0a0a0b; border-color:var(--s-green); font-weight:500 }
  #shop-root .sh-btn.buy:hover{ background:#ffffff; box-shadow:0 6px 22px rgba(255,255,255,.14) }
  #shop-root .sh-btn.equipped{ border-color:var(--s-line); color:var(--s-faint); background:rgba(255,255,255,.02); cursor:default }
  #shop-root .sh-btn.poor{ border-color:rgba(240,107,107,.4); color:var(--s-red); background:transparent; opacity:.7; cursor:not-allowed }

  /* ── Login-Schranke ── */
  #shop-root .sh-gate{ grid-column:1/-1; text-align:center; padding:4rem 1rem }
  #shop-root .sh-gate-ico{ margin-bottom:1rem; opacity:.3; color:var(--s-txt); display:flex; justify-content:center }
  #shop-root .sh-gate-t{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.2rem; color:var(--s-txt); margin-bottom:.5rem }
  #shop-root .sh-gate-s{ font-family:'Space Grotesk',sans-serif; font-size:.78rem; letter-spacing:0;
    color:var(--s-dim); max-width:400px; margin:0 auto 1.3rem; line-height:1.7 }
  #shop-root .sh-gate-btn{ background:var(--s-green); color:#0a0a0b; border:1px solid var(--s-green); font-family:'Space Grotesk',sans-serif;
    font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:500; padding:.7rem 2rem; cursor:pointer; border-radius:8px }
  #shop-root .sh-gate-btn:hover{ background:#ffffff; box-shadow:0 6px 22px rgba(255,255,255,.14) }

  /* ── Toasts ── */
  #shop-root .sh-toasts{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:1100; display:flex;
    flex-direction:column; gap:.6rem }
  #shop-root .sh-toast{ background:rgba(20,20,22,.97); border:1px solid var(--s-line2); color:var(--s-txt);
    padding:.75rem 1.1rem; font-family:'Space Grotesk',sans-serif; font-size:.8rem; letter-spacing:0; border-radius:10px;
    box-shadow:0 16px 40px rgba(0,0,0,.5); animation:sh-tin .35s cubic-bezier(.34,1.56,.64,1) both; max-width:300px }
  #shop-root .sh-toast.err{ border-color:rgba(240,107,107,.5) }
  @keyframes sh-tin{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

  @media (max-width:600px){
    #shop-root .sh-wrap{ padding-top:80px }
    #shop-root .sh-head{ flex-direction:column; align-items:flex-start }
  }

  /* ════════════════════ WIKIPEDIA (Geister-Wiki) – Vollbild-Overlay ════════════════════
     Minimalistisches Redesign (–m-* Tokens, grüner Akzent). Beweis-basiert –
     keine Schwierigkeitsgrade. Alle Selektoren sind auf #wiki-root gescopt. */
  #wiki-root{
    --w-accent:var(--accent-green);
    /* Beginnt UNTER der fixierten 64px-Navbar, damit Filter/Sidebar/Inhalt nie
       hinter der Navbar liegen (das frühere .wiki-hero trug den Abstand). */
    display:none; position:fixed; top:64px; left:0; right:0; bottom:0; z-index:900;
    color:var(--m-ink);
    /* Transparent (nur ein zarter Farb-Touch): das fixe hero.png (#hero-bg) scheint
       hindurch, der Lese-Schleier sitzt auf #hero-bg::after. Kein schwarzer Grund. */
    background:
      radial-gradient(1000px 540px at 82% -10%, rgba(0,255,136,0.06), transparent 60%),
      radial-gradient(820px 480px at 6% 4%, rgba(74,118,255,0.05), transparent 62%);
    font-family:'Space Grotesk',sans-serif; overflow-y:auto; overflow-x:hidden;
    scrollbar-width:none;
  }
  body.wiki-on #wiki-root{ display:block }
  body.wiki-on{ overflow:hidden }
  #wiki-root::-webkit-scrollbar{ width:0 }
  #wiki-root .wiki-layout{ position:relative; z-index:1 }

  /* HERO */
  #wiki-root .wiki-hero{ padding:2.4rem 2rem 1.6rem; border-bottom:1px solid var(--m-line);
    background:radial-gradient(120% 150% at 0% 0%, rgba(0,255,136,0.05), transparent 55%); margin-top:64px }
  #wiki-root .wiki-hero-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:flex-end;
    justify-content:space-between; gap:1.5rem; flex-wrap:wrap }
  #wiki-root .wiki-hero h1{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:2rem; color:var(--m-ink);
    letter-spacing:-0.02em; margin-bottom:0.35rem }
  #wiki-root .wiki-hero h1 span{ color:var(--w-accent) }
  #wiki-root .wiki-hero p{ font-family:'Share Tech Mono',monospace; font-size:0.62rem; letter-spacing:0.16em;
    color:var(--m-ink-3); text-transform:uppercase }
  #wiki-root .wiki-stats{ display:flex; gap:1.6rem }
  #wiki-root .wiki-stat{ text-align:center }
  #wiki-root .wiki-stat-val{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.5rem;
    color:var(--w-accent); line-height:1 }
  #wiki-root .wiki-stat-lbl{ font-family:'Share Tech Mono',monospace; font-size:0.5rem; letter-spacing:0.14em;
    color:var(--m-ink-3); text-transform:uppercase; margin-top:0.25rem }

  /* LAYOUT (Navbar-Abstand kommt über #wiki-root top:64px) */
  #wiki-root .wiki-layout{ display:grid; grid-template-columns:248px 1fr; max-width:1240px; margin:0 auto;
    min-height:calc(100vh - 64px) }
  @media (max-width:900px){
    #wiki-root .wiki-layout{ grid-template-columns:1fr }
    #wiki-root .wiki-sidebar{ display:none }
  }

  /* SIDEBAR */
  #wiki-root .wiki-sidebar{ border-right:1px solid var(--m-line); padding:1.5rem 1rem;
    position:sticky; top:0; height:calc(100vh - 64px); overflow-y:auto; scrollbar-width:none }
  #wiki-root .wiki-sidebar::-webkit-scrollbar{ width:0 }
  #wiki-root .sb-cat{ margin-bottom:1.5rem }
  #wiki-root .sb-cat-title{ font-family:'Share Tech Mono',monospace; font-size:0.54rem; letter-spacing:0.18em;
    color:var(--m-ink-3); text-transform:uppercase; padding:0 0.4rem 0.6rem; display:block;
    border-bottom:1px solid var(--m-line); margin-bottom:0.6rem }
  #wiki-root .sb-item{ display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.7rem; cursor:pointer;
    border:1px solid transparent; border-radius:9px; transition:background 0.2s,border-color 0.2s; margin-bottom:0.2rem }
  #wiki-root .sb-item:hover{ border-color:var(--m-line-strong); background:rgba(255,255,255,0.03) }
  #wiki-root .sb-item.inc, #wiki-root .sb-item.active{ border-color:rgba(0,255,136,0.4); background:rgba(0,255,136,0.07) }
  #wiki-root .sb-item.active .sb-item-name{ color:var(--w-accent) }
  #wiki-root .sb-item.active .sb-item-icon{ color:var(--w-accent) }
  #wiki-root .sb-item.exc{ border-color:rgba(255,77,90,0.4); background:rgba(255,77,90,0.07) }
  #wiki-root .sb-item-icon{ flex-shrink:0; width:22px; display:flex; align-items:center; justify-content:center; color:var(--m-ink-3); transition:color 0.2s }
  #wiki-root .sb-item-icon svg{ width:16px; height:16px }
  #wiki-root .sb-item.inc .sb-item-icon{ color:var(--w-accent) }
  #wiki-root .sb-item.exc .sb-item-icon{ color:var(--m-danger) }
  #wiki-root .sb-item-name{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:0.78rem;
    color:var(--m-ink-2); transition:color 0.2s }
  #wiki-root .sb-item:hover .sb-item-name{ color:var(--m-ink) }
  #wiki-root .sb-item.inc .sb-item-name{ color:var(--w-accent) }
  #wiki-root .sb-item.exc .sb-item-name{ color:var(--m-danger); text-decoration:line-through; text-decoration-thickness:1.5px }
  #wiki-root .sb-item-count{ margin-left:auto; font-family:'Share Tech Mono',monospace; font-size:0.58rem; color:var(--m-ink-3) }
  #wiki-root .sb-check{ margin-left:auto; width:16px; height:16px; border-radius:5px; border:1px solid var(--m-line-strong);
    display:flex; align-items:center; justify-content:center; color:#04130c; flex-shrink:0; transition:all 0.2s }
  #wiki-root .sb-check svg{ width:11px; height:11px; opacity:0; transition:opacity 0.15s }
  #wiki-root .sb-item.inc .sb-check{ background:var(--w-accent); border-color:var(--w-accent) }
  #wiki-root .sb-item.inc .sb-check svg{ opacity:1 }
  #wiki-root .sb-item.exc .sb-check{ background:var(--m-danger); border-color:var(--m-danger); color:#fff }
  #wiki-root .sb-item.exc .sb-check svg{ opacity:1 }
  #wiki-root .sb-reset{ width:100%; margin-top:0.5rem; font-family:'Space Grotesk',sans-serif; font-size:0.64rem;
    letter-spacing:0.04em; color:var(--m-ink-3); background:transparent; border:1px solid var(--m-line); border-radius:8px;
    padding:0.5rem; cursor:pointer; transition:all 0.2s; text-transform:uppercase }
  #wiki-root .sb-reset:hover{ border-color:var(--m-line-strong); color:var(--m-ink) }

  /* MAIN */
  #wiki-root .wiki-main{ padding:1.5rem 1.5rem 3rem; min-width:0 }   /* min-width:0 → Grid-Spalte darf nicht über die Pillen-Reihe breiter werden */
  #wiki-root .ghost-cards-grid{ min-width:0 }
  #wiki-root .wiki-controls{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:1.3rem; align-items:center }
  #wiki-root .wiki-evfilter{ display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; flex:1; min-width:0 }
  #wiki-root .wiki-count{ font-family:'Share Tech Mono',monospace; font-size:0.58rem; letter-spacing:0.12em;
    color:var(--m-ink-3); text-transform:uppercase; white-space:nowrap }
  #wiki-root .ev-chip{ display:inline-flex; align-items:center; gap:0.4rem; font-family:'Space Grotesk',sans-serif;
    font-size:0.68rem; font-weight:500; padding:0.32rem 0.55rem; border:1px solid rgba(0,255,136,0.4);
    background:rgba(0,255,136,0.08); color:var(--w-accent); border-radius:999px; cursor:pointer; transition:background 0.15s }
  #wiki-root .ev-chip:hover{ background:rgba(0,255,136,0.16) }
  #wiki-root .ev-chip.exc{ border-color:rgba(255,77,90,0.45); background:rgba(255,77,90,0.09); color:var(--m-danger) }
  #wiki-root .ev-chip.exc .ev-lbl{ text-decoration:line-through; text-decoration-thickness:1.5px }
  #wiki-root .ev-chip svg.ev-svg{ width:13px; height:13px }
  #wiki-root .ev-chip .x{ opacity:0.7; display:inline-flex }
  #wiki-root .ev-chip .x svg{ width:9px; height:9px }
  #wiki-root .wiki-search{ margin-left:auto; background:rgba(255,255,255,0.03); border:1px solid var(--m-line);
    color:var(--m-ink); font-family:'Space Grotesk',sans-serif; font-size:0.78rem; padding:0.5rem 0.85rem;
    outline:none; border-radius:9px; transition:border-color 0.2s; width:200px }
  #wiki-root .wiki-search:focus{ border-color:var(--m-line-strong) }
  #wiki-root .wiki-search::placeholder{ color:var(--m-ink-3) }
  /* Beweis-Filter für schmale Screens (Sidebar ist dort ausgeblendet) */
  #wiki-root .wiki-ev-mobile{ display:none }
  #wiki-root .ev-pill{ flex-shrink:0; display:inline-flex; align-items:center; gap:0.35rem; font-family:'Space Grotesk',sans-serif;
    font-size:0.7rem; font-weight:500; padding:0.4rem 0.7rem; border:1px solid var(--m-line-strong); border-radius:999px;
    color:var(--m-ink-2); background:rgba(255,255,255,0.02); cursor:pointer; transition:all 0.15s; white-space:nowrap }
  #wiki-root .ev-pill svg.ev-svg{ width:14px; height:14px }
  #wiki-root .ev-pill.inc{ border-color:rgba(0,255,136,0.5); background:rgba(0,255,136,0.1); color:var(--w-accent) }
  #wiki-root .ev-pill.exc{ border-color:rgba(255,77,90,0.5); background:rgba(255,77,90,0.1); color:var(--m-danger) }
  #wiki-root .ev-pill.exc .ev-lbl{ text-decoration:line-through; text-decoration-thickness:1.5px }
  @media (max-width:900px){
    #wiki-root .wiki-ev-mobile{ display:flex; gap:0.45rem; overflow-x:auto; width:100%; min-width:0; flex-basis:100%; order:3;
      padding-bottom:0.35rem; -webkit-overflow-scrolling:touch; scrollbar-width:none }
    #wiki-root .wiki-ev-mobile::-webkit-scrollbar{ height:0 }
    #wiki-root .wiki-search{ width:100%; margin-left:0; order:1 }
    #wiki-root #wiki-active-bar{ order:2 }
    #wiki-root .wiki-count{ order:2 }
  }

  /* GHOST CARDS */
  #wiki-root .ghost-cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:0.9rem }
  #wiki-root .ghost-card{ background:var(--m-surface); border:1px solid var(--m-line); cursor:pointer; border-radius:14px;
    overflow:hidden; position:relative; animation:wiki-card-in 0.4s var(--ease-out) both;
    transition:border-color 0.25s var(--ease-out),transform 0.25s var(--ease-out),box-shadow 0.25s var(--ease-out) }
  #wiki-root .ghost-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--ghost-color,var(--w-accent)),transparent);
    opacity:0; transition:opacity 0.25s }
  #wiki-root .ghost-card:hover{ border-color:var(--ghost-color,var(--w-accent)); transform:translateY(-4px);
    box-shadow:0 16px 40px -18px rgba(0,0,0,0.7) }
  #wiki-root .ghost-card:hover::before{ opacity:1 }
  #wiki-root .ghost-card:active{ transform:translateY(-1px) scale(0.99) }
  @keyframes wiki-card-in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  #wiki-root .ghost-card-header{ display:flex; align-items:center; gap:0.9rem; padding:1.1rem 1.2rem 0.8rem }
  #wiki-root .ghost-card-icon{ flex-shrink:0; width:46px; height:46px;
    display:flex; align-items:center; justify-content:center; color:var(--ghost-color,var(--w-accent)) }
  #wiki-root .ghost-card-icon svg{ width:46px; height:46px; filter:drop-shadow(0 2px 9px color-mix(in srgb,var(--ghost-color,var(--w-accent)) 40%, transparent)) }
  #wiki-root .ghost-card-icon img.ghost-png{ width:46px; height:46px; object-fit:contain; display:block;
    filter:drop-shadow(0 2px 9px color-mix(in srgb,var(--ghost-color,var(--w-accent)) 40%, transparent)) }
  #wiki-root .ghost-card-info{ flex:1; min-width:0 }
  #wiki-root .ghost-card-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem;
    color:var(--m-ink); letter-spacing:-0.01em; line-height:1.1 }
  #wiki-root .ghost-card-sub{ font-family:'Share Tech Mono',monospace; font-size:0.5rem; letter-spacing:0.14em;
    color:var(--m-ink-3); text-transform:uppercase; margin-top:0.32rem }
  #wiki-root .ghost-card-evidences{ display:flex; gap:0.4rem; flex-wrap:wrap; padding:0 1.2rem 1.1rem }
  #wiki-root .ev-mini{ display:inline-flex; align-items:center; gap:0.32rem; font-family:'Space Grotesk',sans-serif;
    font-size:0.62rem; font-weight:500; padding:0.24rem 0.5rem; border:1px solid var(--m-line-strong); border-radius:7px;
    color:var(--m-ink-2); background:rgba(255,255,255,0.02) }
  #wiki-root .ev-mini .ev-ic{ display:inline-flex; line-height:0; color:var(--m-ink-3) }
  #wiki-root .ev-mini .ev-ic svg{ width:13px; height:13px }
  /* Skeleton-Karten (Wiki) */
  #wiki-root .wiki-skel-card{ background:var(--m-surface); border:1px solid var(--m-line); border-radius:14px;
    padding:1.1rem 1.2rem 1.2rem }
  #wiki-root .wiki-skel-head{ display:flex; align-items:center; gap:0.9rem; margin-bottom:1.1rem }

  /* DETAIL MODAL */
  #wiki-root .detail-modal{ display:none; position:fixed; inset:0; z-index:9400; background:rgba(0,0,0,0.82);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:1rem }
  #wiki-root .detail-modal.show{ display:flex }
  #wiki-root .detail-box{ background:var(--m-surface); border:1px solid var(--m-line); max-width:660px;
    width:100%; max-height:90vh; overflow-y:auto; position:relative; border-radius:16px; scrollbar-width:none;
    box-shadow:0 40px 100px rgba(0,0,0,0.7); animation:wiki-detail-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both }
  #wiki-root .detail-box::-webkit-scrollbar{ width:0 }
  @keyframes wiki-detail-in{ from{opacity:0;transform:scale(0.95) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
  #wiki-root .detail-close{ position:sticky; top:0; right:0; display:flex; justify-content:flex-end;
    padding:0.8rem 1rem; background:linear-gradient(180deg,var(--m-surface) 60%,transparent); z-index:10 }
  #wiki-root .close-btn{ font-family:'Space Grotesk',sans-serif; font-size:0.72rem; letter-spacing:0.02em;
    color:var(--m-ink-3); background:transparent; border:1px solid var(--m-line); padding:0.4rem 0.8rem; border-radius:8px;
    cursor:pointer; transition:all 0.2s }
  #wiki-root .close-btn:hover{ border-color:var(--m-danger); color:var(--m-danger) }
  #wiki-root .detail-content{ padding:0.3rem 2rem 2rem }
  #wiki-root .detail-header{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.5rem }
  #wiki-root .detail-icon{ width:66px; height:66px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:var(--ghost-color,var(--w-accent)) }
  #wiki-root .detail-icon svg{ width:66px; height:66px; filter:drop-shadow(0 3px 14px color-mix(in srgb,var(--ghost-color,var(--w-accent)) 45%, transparent)) }
  #wiki-root .detail-icon img.ghost-png{ width:66px; height:66px; object-fit:contain; display:block;
    filter:drop-shadow(0 3px 14px color-mix(in srgb,var(--ghost-color,var(--w-accent)) 45%, transparent)) }
  #wiki-root .detail-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.8rem; color:var(--m-ink);
    letter-spacing:-0.02em; line-height:1 }
  #wiki-root .detail-title-sub{ font-family:'Share Tech Mono',monospace; font-size:0.56rem; letter-spacing:0.14em;
    color:var(--m-ink-3); text-transform:uppercase; margin-top:0.4rem }
  #wiki-root .ghost-quote{ font-family:'Space Grotesk',sans-serif; font-size:0.85rem; color:var(--m-ink-2);
    line-height:1.6; font-style:italic; border-left:2px solid var(--ghost-color,var(--w-accent));
    padding:0.6rem 0.9rem; margin-bottom:1.4rem; background:rgba(255,255,255,0.02); border-radius:0 8px 8px 0 }
  #wiki-root .wiki-sec-label{ font-family:'Share Tech Mono',monospace; font-size:0.56rem; letter-spacing:0.16em;
    text-transform:uppercase; margin-bottom:0.7rem; padding-bottom:0.5rem; border-bottom:1px solid var(--m-line) }
  #wiki-root .evidence-row{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.4rem }
  #wiki-root .evidence-tag{ display:inline-flex; align-items:center; gap:0.4rem; font-family:'Space Grotesk',sans-serif;
    font-size:0.72rem; font-weight:500; padding:0.4rem 0.7rem; border:1px solid var(--m-line-strong); border-radius:9px;
    color:var(--m-ink); background:rgba(255,255,255,0.03) }
  #wiki-root .evidence-tag .ev-ic{ display:inline-flex; line-height:0; color:var(--ghost-color,var(--w-accent)) }
  #wiki-root .evidence-tag .ev-ic svg{ width:15px; height:15px }
  #wiki-root .info-block-title svg.lbl-svg{ width:13px; height:13px; vertical-align:-2px; margin-right:0.3rem }
  #wiki-root .hunt-threshold svg.lbl-svg{ width:14px; height:14px; vertical-align:-2px; margin-right:0.35rem; color:var(--accent-red) }
  #wiki-root .hunt-threshold{ display:flex; align-items:center; justify-content:space-between;
    font-family:'Share Tech Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; color:var(--m-ink-2);
    border:1px solid var(--m-line); border-radius:10px; padding:0.6rem 0.85rem; margin-bottom:1.4rem; text-transform:uppercase }
  #wiki-root .hunt-threshold-val{ color:var(--accent-red); font-size:0.8rem; font-family:'Space Grotesk',sans-serif; font-weight:600 }
  #wiki-root .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; margin-bottom:1rem }
  @media (max-width:520px){ #wiki-root .info-grid{ grid-template-columns:1fr } }
  #wiki-root .info-block{ background:rgba(255,255,255,0.02); border:1px solid var(--m-line); border-radius:11px; padding:0.9rem }
  #wiki-root .info-block-title{ font-family:'Share Tech Mono',monospace; font-size:0.56rem; letter-spacing:0.14em;
    text-transform:uppercase; margin-bottom:0.5rem }
  #wiki-root .info-block-title.strength{ color:var(--accent-green) }
  #wiki-root .info-block-title.weakness{ color:var(--accent-blue) }
  #wiki-root .info-block-title.behavior{ color:var(--accent-yellow) }
  #wiki-root .info-block-text{ font-size:0.84rem; color:var(--m-ink-2); line-height:1.6; font-weight:400 }
  #wiki-root .empty-state{ grid-column:1/-1; text-align:center; padding:4rem 2rem }
  #wiki-root .empty-state-icon{ opacity:0.22; margin-bottom:1rem; color:var(--m-ink-2) }
  #wiki-root .empty-state-icon svg{ width:48px; height:48px }
  #wiki-root .empty-state-text{ font-family:'Share Tech Mono',monospace; font-size:0.68rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--m-ink-3) }

  /* ─── Tactile press feedback across in-app buttons (Emil Kowalski) ─── */
  .lb-start:active:not(:disabled), .lb-mode:active:not(.disabled), .lb-diff:active,
  .rnext:active, .rmenu:active, #subbtn:active:not(:disabled), .psave-btn:active,
  .trigger-popup-btn:active, .filter-tab:active, .mfpill:active, .title-opt:active,
  #shop-root .sh-btn:active:not(.poor):not(.equipped), #shop-root .sh-tab:active,
  #shop-root .sh-filter-pill:active, #shop-root .sh-gate-btn:active,
  #wiki-root .filter-pill:active, #wiki-root .close-btn:active,
  .mp-fbtn:active:not(:disabled), .lb-back:active {
    transform: scale(0.97);
  }
@keyframes pv-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Profil – Statistik-Zeile (Padding als Klasse, damit Mobile es überschreiben kann) */
.pv-stats-row{position:relative;z-index:1;padding:1.2rem 2.2rem;border-bottom:1px solid var(--m-line);}
/* Profil – vordere Statistik-Chips (3 angepinnte Werte) */
.pv-chip{display:flex;flex-direction:column;gap:0.2rem;flex:1;min-width:0;background:rgba(255,255,255,0.03);border:1px solid var(--m-line);border-radius:11px;padding:0.6rem 0.7rem;overflow:hidden;}
.pv-chip-val{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.2rem;color:var(--m-ink);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pv-chip-lbl{font-family:'Space Grotesk',sans-serif;font-size:0.52rem;letter-spacing:0.1em;color:var(--m-ink-3);text-transform:uppercase;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Menü-Symbol – keine Umrandung, rechts neben der letzten Statistik */
.pv-stats-menu{flex-shrink:0;background:transparent;border:none;color:var(--m-ink-3);cursor:pointer;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;transition:background 0.2s,color 0.2s;}
.pv-stats-menu:hover{color:var(--m-ink);background:rgba(255,255,255,0.06);}
/* Statistik-Modal – Tabs (5 Kategorien) im Bestenlisten-Design */
.ps-tab{flex:1;min-width:0;padding:0.55rem 0.4rem;background:rgba(255,255,255,0.03);border:1px solid var(--m-line);border-radius:9px;color:var(--m-ink-2);font-family:'Space Grotesk',sans-serif;font-size:0.66rem;letter-spacing:0.01em;font-weight:500;cursor:pointer;transition:border-color 0.2s,background 0.2s,color 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-tab:hover{border-color:var(--m-line-strong);color:var(--m-ink);}
.ps-tab.active{border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.08);color:var(--accent-green);}
/* Statistik-Modal – Inhalt */
.ps-section-label{font-family:'Space Grotesk',sans-serif;font-size:0.56rem;letter-spacing:0.16em;color:var(--m-ink-3);text-transform:uppercase;font-weight:500;margin:1.4rem 0 0.6rem;}
.ps-section-label:first-child{margin-top:0;}
.ps-stat-row{display:flex;align-items:center;gap:0.7rem;padding:0.65rem 0;border-bottom:1px solid var(--m-line);}
.ps-stat-row:last-child{border-bottom:none;}
.ps-stat-label{flex:1;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:0.84rem;color:var(--m-ink-2);font-weight:500;}
.ps-stat-val{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1rem;color:var(--m-ink);white-space:nowrap;}
.ps-bar-track{height:5px;background:rgba(255,255,255,0.07);border-radius:3px;overflow:hidden;margin-top:0.35rem;}
.ps-bar-fill{height:100%;background:var(--m-ink);border-radius:3px;transition:width 0.6s var(--ease-out);}
.ps-chip-wrap{display:flex;flex-wrap:wrap;}
.ps-cos-chip,.ps-medal-chip{display:inline-flex;align-items:center;gap:0.4rem;background:rgba(255,255,255,0.04);border:1px solid var(--m-line);border-radius:8px;padding:0.34rem 0.62rem;font-family:'Space Grotesk',sans-serif;font-size:0.74rem;color:var(--m-ink-2);font-weight:500;margin:0 0.4rem 0.4rem 0;}
.ps-cos-ico,.ps-medal-ico{font-size:0.95rem;line-height:1;flex-shrink:0;}
/* Effekt-Vorschaukreis (wie der Orb in den Einstellungen/im Shop, nur klein) */
.ps-fx-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;border:1px solid var(--fx,var(--m-line));
  background:radial-gradient(circle at 50% 35%, var(--fx,#cfd2d8), rgba(0,0,0,0.25) 72%);
  box-shadow:0 0 7px -1px var(--fx,#cfd2d8), inset 0 0 4px rgba(0,0,0,0.45);}
.pv-chip-dot{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:middle;border:1px solid var(--fx,var(--m-line));
  background:radial-gradient(circle at 50% 35%, var(--fx,#cfd2d8), rgba(0,0,0,0.25) 72%);
  box-shadow:0 0 8px -1px var(--fx,#cfd2d8), inset 0 0 4px rgba(0,0,0,0.45);}
/* Gesperrte Medaille abgedunkelt; ausstellbare Chips klickbar + Showcase-Ring */
.ps-medal-chip.locked{opacity:0.42;filter:grayscale(1);}
.ps-cos-chip.pinnable,.ps-medal-chip.pinnable{cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .12s;}
.ps-cos-chip.pinnable:hover,.ps-medal-chip.pinnable:hover{border-color:var(--m-line-strong);background:rgba(255,255,255,0.08);color:var(--m-ink);}
.ps-cos-chip.pinnable:active,.ps-medal-chip.pinnable:active{transform:scale(0.96);}
.ps-cos-chip.showcased,.ps-medal-chip.showcased{border-color:var(--m-ink);background:rgba(255,255,255,0.1);color:var(--m-ink);box-shadow:inset 0 0 0 1px var(--m-ink);}
.ps-pin-hint{font-family:'Space Grotesk',sans-serif;font-size:0.64rem;letter-spacing:0.03em;color:var(--m-ink-3);margin:0 0 0.7rem;}
.ps-empty{font-family:'Space Grotesk',sans-serif;font-size:0.74rem;color:var(--m-ink-3);padding:0.8rem 0;text-align:center;}
/* Schmale Screens: weniger Padding + kompaktere Chips, damit Werte/Labels nicht abschneiden */
@media (max-width:480px){
  .pv-stats-row{padding:1.1rem 1.2rem;}
  .pv-chip{padding:0.5rem 0.5rem;border-radius:9px;}
  .pv-chip-val{font-size:1.02rem;}
  .pv-chip-lbl{font-size:0.48rem;letter-spacing:0.05em;}
  .pv-stats-menu{width:32px;height:32px;}
}