/* mcw-editor.css — Schematik → Scroll-World-Editor (Team-Werkzeug) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body.mcwe {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0b0d10; color: #e7ecf2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEWEGUNGS-SYSTEM (Emil-Kowalski-Bar, 2026-09-02)
   Eine Quelle für Easing + Dauer der Overlay-UI. Die eingebauten CSS-Easings
   sind zu schwach → wir nutzen durchgehend diese kräftigen Custom-Kurven.
   Regeln: nur transform/opacity animieren (GPU), ease-out fürs Ein-/Ausblenden,
   :active-Druckfeedback auf ALLES Klickbare, Hover nur an echten Zeigern,
   prefers-reduced-motion respektieren.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Unsere Server-Designsprache (Minecraft-GUI) — identisch zu Changelog/Regelwerk/Tutorials.
   Damit die Overlay-Karten/Buttons wie ECHTE Minecraft-GUI-Panels aussehen (Stein-Bevel,
   Item-Slots, Holzschild, Pixelify/Oswald/Jakarta), nicht wie generische AI-Glas-Karten. */
@font-face{font-family:'Pixelify';src:url('/assets/site/fonts/pixelify-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Oswald';src:url('/assets/site/fonts/oswald-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url('/assets/site/fonts/oswald-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/assets/site/fonts/plus-jakarta-sans.woff2') format('woff2');font-weight:300 800;font-display:swap}
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* kräftiges ease-out (UI ein/aus) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* Bewegung/Morph auf dem Schirm */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-Drawer-Kurve */
  --t-press: 120ms;   /* Druckfeedback */
  --t-hover: 180ms;   /* Hover-Reaktion */
  --t-enter: 300ms;   /* Eintritt von Overlay-Elementen */
  /* MC-GUI-Palette v2 — heller/sauberer/kühler, mehr Marken-Blau/Grün (Owner 2026-09-02) */
  --grass:#57c04a;--grass-d:#3f9e37;--grass-dd:#2c7a26;   /* frischeres Grün (Play/Join) */
  --dirt:#7a5433;--dirt-d:#5c3f27;
  --ink:#1c2a38;--ink-soft:#465868;
  --panel:#eef2f7;--panel-lt:#ffffff;--panel-dk:#c4cedb;--panel-line:#2c3d52;  /* helles, kühles Panel + blauer Rand */
  --slot:#d3dbe6;--slot-dk:#2c3d52;--wood:#b6813f;--wood-d:#7c5626;--yellow:#ecfe06;
  --imp:#2f8bff;--imp-d:#066ffe;--imp-dd:#0b4aa8;         /* Marken-Blau (primary) */
  --blurple:#5865F2;--blurple-d:#4450d8;--blurple-dd:#333cae;
  --goldc:#e6c06a;--goldc-d:#c99a52;
  --bev: 10px;   /* dezente Rundung → moderner, weniger „Klötzchen" */
}

/* MC-GUI-Block-Button: Stein/Holz-Bevel + Plinth, drückt sich beim Klick physisch runter.
   Ein Baustein für ALLE Overlay-Buttons (Hero-CTAs, Feature-CTA, End-CTAs). */
.mcblock{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Oswald',system-ui,sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;color:#0e2410;padding:14px 26px;border:3px solid var(--grass-dd);
  background:linear-gradient(180deg,var(--grass) 0 55%,var(--grass-d));
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.42),inset -3px -3px 0 rgba(0,0,0,.28),0 5px 0 var(--grass-dd),0 8px 14px rgba(0,0,0,.4);
  transition:transform var(--t-press) var(--ease-out),filter var(--t-hover) var(--ease-out);}
.mcblock:active{transform:translateY(3px);box-shadow:inset 2px 2px 0 rgba(255,255,255,.42),inset -3px -3px 0 rgba(0,0,0,.28),0 2px 0 var(--grass-dd),0 4px 8px rgba(0,0,0,.4);}
.mcblock.blue{color:#eaf4ff;border-color:var(--imp-dd);background:linear-gradient(180deg,var(--imp) 0 55%,var(--imp-d));
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.34),inset -3px -3px 0 rgba(0,0,0,.30),0 5px 0 var(--imp-dd),0 8px 14px rgba(0,0,0,.4);}
.mcblock.blue:active{box-shadow:inset 2px 2px 0 rgba(255,255,255,.34),inset -3px -3px 0 rgba(0,0,0,.30),0 2px 0 var(--imp-dd),0 4px 8px rgba(0,0,0,.4);}
.mcblock.blurple{color:#fff;border-color:var(--blurple-dd);background:linear-gradient(180deg,var(--blurple) 0 55%,var(--blurple-d));
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.30),inset -3px -3px 0 rgba(0,0,0,.30),0 5px 0 var(--blurple-dd),0 8px 14px rgba(0,0,0,.4);}
.mcblock.blurple:active{box-shadow:inset 2px 2px 0 rgba(255,255,255,.30),inset -3px -3px 0 rgba(0,0,0,.30),0 2px 0 var(--blurple-dd),0 4px 8px rgba(0,0,0,.4);}
.mcblock.wood{color:#3a2410;border-color:var(--wood-d);background:linear-gradient(180deg,var(--goldc) 0 55%,var(--goldc-d));
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.40),inset -3px -3px 0 rgba(0,0,0,.26),0 5px 0 var(--wood-d),0 8px 14px rgba(0,0,0,.4);}
.mcblock.wood:active{box-shadow:inset 2px 2px 0 rgba(255,255,255,.40),inset -3px -3px 0 rgba(0,0,0,.26),0 2px 0 var(--wood-d),0 4px 8px rgba(0,0,0,.4);}
@media (hover:hover) and (pointer:fine){ .mcblock:hover{filter:brightness(1.08);} }

/* Druckfeedback: jede klickbare Overlay-Fläche reagiert auf den Druck (scale < 1).
   „Nichts erscheint aus dem Nichts" → nie scale(0); hier nur ein feiner Press. */
.mcwe-tb-btn:active, .mcwe-tb-ip:active, .mcwe-hero-btn:active,
.mcwe-cta:active, .mcwe-end-ip:active, #mcwe-feature .fcta:active,
.mcwe-btn:active { transform: scale(0.97); }

/* Reduzierte Bewegung = weniger + sanfter, NICHT null: Farbe/Deckkraft bleibt,
   Positions-/Skalierungs-Animation fällt weg (Bewegungsempfindlichkeit). */
@media (prefers-reduced-motion: reduce) {
  #mcwe-logo, #mcwe-end, #mcwe-feature,
  .mcwe-hero-btn, .mcwe-tb-btn, .mcwe-tb-ip, .mcwe-cta, .mcwe-end-ip, #mcwe-feature .fcta {
    animation: none !important;
    transition: opacity var(--t-enter) var(--ease-out) !important;
    transform: none !important;
  }
  .mcwe-tb-ip .dot { animation: none !important; }
}
#mcwe-canvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; cursor: grab; }
#mcwe-canvas:active { cursor: grabbing; }

/* 🔒 Play-Ansicht (öffentliche Domains, body[data-play]): Editor-Panels sind schon per CSS aus —
   greift im <head> vor dem ersten Paint, damit „Figuren"/„Schematik-Editor" nie kurz aufblitzen
   (das JS versteckte sie erst nach dem Laden). Bearbeiten bleibt team-gegatet (Server-Endpunkte). */
body[data-play] #mcwe-top,
body[data-play] #mcwe-cam,
body[data-play] #mcwe-npc,
body[data-play] #mcwe-drop,
body[data-play] #mcwe-shader { display: none !important; }

/* Kopf-Leiste */
#mcwe-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: linear-gradient(#0d1014ee, #0d1014aa); backdrop-filter: blur(8px);
  border-bottom: 1px solid #1c2430;
}
.mcwe-brand { font-weight: 700; letter-spacing: .02em; color: #cdd7e3; }
.mcwe-brand::before { content: "◧ "; color: #ffc83a; }
#mcwe-select {
  background: #141a22; color: #e7ecf2; border: 1px solid #263140; border-radius: 8px;
  padding: 7px 10px; font-size: 13px; min-width: 180px;
}
.mcwe-status { margin-left: auto; font-size: 12.5px; color: #8aa0b6; }

/* Buttons */
.mcwe-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #18202b; color: #dfe7ef; border: 1px solid #29384a; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; user-select: none;
}
.mcwe-btn:hover { background: #1f2a38; border-color: #3a4d64; }
.mcwe-btn.primary { background: #1c3a5e; border-color: #2f5f92; }
.mcwe-btn.primary:hover { background: #234872; }
.mcwe-btn.save { background: #17452c; border-color: #2b7048; }
.mcwe-btn.save:hover { background: #1d5836; }
.mcwe-btn.danger { background: #3a1c22; border-color: #6a2c34; color: #f0c0c6; }

/* Kamera-Pfad-Panel */
#mcwe-cam {
  position: fixed; top: 62px; right: 14px; z-index: 10; width: 258px;
  background: #0e1319ee; border: 1px solid #1e2836; border-radius: 14px;
  padding: 13px; box-shadow: 0 10px 34px #0009; backdrop-filter: blur(8px);
}
.mcwe-cam-head { font-weight: 700; margin-bottom: 6px; }
.mcwe-hint { font-size: 11.5px; color: #6f849a; line-height: 1.45; margin-bottom: 10px; }
.mcwe-row { display: flex; gap: 8px; margin: 8px 0; }
.mcwe-row .mcwe-btn { flex: 1; justify-content: center; }
#mcwe-wps {
  list-style: none; max-height: 40vh; overflow: auto; margin: 6px 0;
  border: 1px solid #1a2330; border-radius: 8px;
}
#mcwe-wps:empty::after { content: "Noch keine Wegpunkte."; display: block; padding: 10px; color: #56697d; font-size: 12px; }
#mcwe-wps li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-bottom: 1px solid #141c27; font-size: 13px;
}
#mcwe-wps li:last-child { border-bottom: 0; }
#mcwe-wps li span { color: #b9c6d4; }
.mcwe-x { background: none; border: 0; color: #7d8ea0; cursor: pointer; font-size: 13px; }
.mcwe-x:hover { color: #ff6a6a; }
#mcwe-scrub { width: 100%; accent-color: #ffc83a; }

/* Felder (Dauer / Zoom) */
.mcwe-fld { display: flex; align-items: center; gap: 9px; margin: 7px 0; font-size: 13px; color: #b9c6d4; }
.mcwe-fld > span:first-child { width: 42px; color: #8aa0b6; }
.mcwe-fld .mcwe-unit { width: auto; color: #6f849a; font-size: 12px; }
#mcwe-dur { width: 62px; background: #141a22; color: #e7ecf2; border: 1px solid #263140; border-radius: 6px; padding: 5px 7px; font-size: 13px; }
#mcwe-zoom { flex: 1; accent-color: #ffc83a; }

/* Timeline */
#mcwe-timeline { position: relative; height: 26px; margin: 8px 0 4px; border-radius: 7px;
  background: linear-gradient(#131a24, #0f141c); border: 1px solid #1e2836; cursor: pointer; user-select: none; }
#mcwe-timeline .wp { position: absolute; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #ffc83a; box-shadow: 0 0 0 2px #0f141c; }
#mcwe-timeline .ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff7a3a; box-shadow: 0 0 6px #ff7a3a; }
#mcwe-timeline .lbl { position: absolute; bottom: 2px; font-size: 9px; color: #4a5a6b; pointer-events: none; }

/* Drag&Drop-Overlay */
#mcwe-drop {
  position: fixed; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center;
  background: #0b0d10cc; border: 3px dashed #ffc83a; color: #ffe6a0;
  font-size: 22px; font-weight: 700; letter-spacing: .04em;
}
#mcwe-drop.on { display: flex; }

.mcwe-btn.on { background: #4a3a12; border-color: #ffc83a; color: #ffe6a0; }

/* Figuren-Panel (NPCs) — links, damit es das Kamera-Panel rechts nicht überlappt */
#mcwe-npc {
  position: fixed; top: 62px; left: 14px; z-index: 10; width: 258px;
  background: #0e1319ee; border: 1px solid #1e2836; border-radius: 14px;
  padding: 13px; box-shadow: 0 10px 34px #0009; backdrop-filter: blur(8px);
}
#mcwe-npc-list {
  list-style: none; max-height: 34vh; overflow: auto; margin: 8px 0 0;
  border: 1px solid #1a2330; border-radius: 8px;
}
#mcwe-npc-list:empty::after { content: "Noch keine Figuren."; display: block; padding: 10px; color: #56697d; font-size: 12px; }
#mcwe-npc-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-bottom: 1px solid #141c27; font-size: 13px; cursor: pointer;
}
#mcwe-npc-list li:last-child { border-bottom: 0; }
#mcwe-npc-list li span { color: #b9c6d4; }
#mcwe-npc-list li:hover { background: #131c27; }
#mcwe-npc-list li.sel { background: #1c3a5e; }
#mcwe-npc-list li.sel span { color: #eaf2fb; }

/* Logo-Splash am Fahrt-Anfang */
#mcwe-logo {
  position: fixed; inset: 0; z-index: 8; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 26px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%, #0006, transparent 75%);
  transition: opacity .12s linear;
}
#mcwe-logo-img {
  width: min(48vw, 560px); max-height: 54vh; object-fit: contain;
  filter: drop-shadow(0 12px 40px #000a);
}
/* Center-CTAs unter dem Logo (Discord / Panel / Store) — Owner: beim Start groß in der Mitte anbieten */
.mcwe-hero { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 92vw; }
/* Hero-CTAs = MC-GUI-Block-Buttons (Bevel + Plinth), gestaffelter Eintritt. */
.mcwe-hero-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; padding: 17px 34px; color: #fff; border: 2px solid var(--grass-dd); border-radius: var(--bev);
  background: linear-gradient(180deg, var(--grass) 0 55%, var(--grass-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(0,0,0,.28), 0 5px 0 var(--grass-dd), 0 8px 16px rgba(0,0,0,.45);
  transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) var(--ease-out), box-shadow var(--t-press) var(--ease-out);
  animation: mcweRise 420ms var(--ease-out) both; }
.mcwe-hero-btn:nth-child(1) { animation-delay: 40ms; }
.mcwe-hero-btn:nth-child(2) { animation-delay: 110ms; }
.mcwe-hero-btn:nth-child(3) { animation-delay: 180ms; }
.mcwe-hero-btn:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(0,0,0,.28), 0 2px 0 var(--grass-dd), 0 4px 9px rgba(0,0,0,.45); }
@media (hover: hover) and (pointer: fine) {
  .mcwe-hero-btn:hover { filter: brightness(1.08); }
}
@keyframes mcweRise { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.mcwe-hero-btn.discord { color: #fff; border-color: var(--blurple-dd); background: linear-gradient(180deg, var(--blurple) 0 55%, var(--blurple-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.30), inset -3px -3px 0 rgba(0,0,0,.30), 0 5px 0 var(--blurple-dd), 0 8px 16px rgba(0,0,0,.45); }
.mcwe-hero-btn.discord:active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.30), inset -3px -3px 0 rgba(0,0,0,.30), 0 2px 0 var(--blurple-dd), 0 4px 9px rgba(0,0,0,.45); }
.mcwe-hero-btn.panel { color: #eaf4ff; border-color: var(--imp-dd); background: linear-gradient(180deg, var(--imp) 0 55%, var(--imp-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.34), inset -3px -3px 0 rgba(0,0,0,.30), 0 5px 0 var(--imp-dd), 0 8px 16px rgba(0,0,0,.45); }
.mcwe-hero-btn.panel:active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.34), inset -3px -3px 0 rgba(0,0,0,.30), 0 2px 0 var(--imp-dd), 0 4px 9px rgba(0,0,0,.45); }
.mcwe-hero-btn.store { color: #3a2410; border-color: var(--wood-d); background: linear-gradient(180deg, var(--goldc) 0 55%, var(--goldc-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.40), inset -3px -3px 0 rgba(0,0,0,.26), 0 5px 0 var(--wood-d), 0 8px 16px rgba(0,0,0,.45); }
.mcwe-hero-btn.store:active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.40), inset -3px -3px 0 rgba(0,0,0,.26), 0 2px 0 var(--wood-d), 0 4px 9px rgba(0,0,0,.45); }

/* ── Fallback ohne WebGL (iOS-Homescreen-Web-App, alte GPUs) ────────────────────────────────
   Statt leerer/weißer Seite ein sauberes Landing: Stadt-Bild + abgedunkelt + Logo + CTAs.
   Von mcw-editor.js gesetzt (body.mcwe-nogl), wenn der WebGL-Kontext fehlschlägt. */
body.mcwe-nogl { background: #0b0d10 url('/assets/img/hero-city.webp') center/cover no-repeat; background-attachment: fixed; }
body.mcwe-nogl::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 18%, rgba(9,13,20,.30), rgba(9,13,20,.72) 68%, rgba(9,13,20,.92)); }
body.mcwe-nogl #mcwe-canvas { display: none !important; }
body.mcwe-nogl #mcwe-logo { display: flex !important; opacity: 1 !important; z-index: 6; }
body.mcwe-nogl .mcwe-hero-btn { pointer-events: auto !important; }
body.mcwe-nogl #mcwe-dbg { display: none !important; }
@media (max-width: 640px) { #mcwe-logo { gap: 20px; }
  .mcwe-hero { gap: 10px; } .mcwe-hero-btn { font-size: 16px; padding: 14px 20px; flex: 1 1 40%; justify-content: center; } }

@media (max-width: 640px) {
  #mcwe-cam { top: auto; bottom: 10px; right: 10px; left: 10px; width: auto; }
  #mcwe-npc { top: 58px; left: 8px; right: 8px; width: auto; }
  #mcwe-logo-img { width: 80vw; }
  #mcwe-top { flex-wrap: wrap; }
}

/* End-Sequenz: CTA-Knöpfe (blenden am Fahrt-Ende ein, wenn die Tür offen ist) */
#mcwe-end {
  position: fixed; inset: 0; z-index: 9; display: none; opacity: 0;
  flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px; padding-bottom: 7vh;
  pointer-events: none; transition: opacity var(--t-enter) var(--ease-out);
  background: radial-gradient(60% 55% at 50% 52%, #0007, transparent 78%);
}
/* Fahrt-Ende = seltener „Delight"-Moment → die Elemente steigen gestaffelt herein,
   sobald die End-Sequenz sichtbar wird (display:none→flex startet die Keyframes). */
.mcwe-end-title, .mcwe-end-sub, .mcwe-end-ip, .mcwe-end-btns {
  animation: mcweRise 480ms var(--ease-out) both;
}
.mcwe-end-title { animation-delay: 60ms; }
.mcwe-end-sub { animation-delay: 130ms; }
.mcwe-end-ip { animation-delay: 210ms; }
.mcwe-end-btns { animation-delay: 300ms; }
.mcwe-end-title {
  font-family: 'Pixelify', sans-serif; font-size: clamp(34px, 5.4vw, 66px); font-weight: 700; letter-spacing: .01em; line-height: .96; color: #fff;
  text-shadow: 0 3px 0 var(--imp-d), 0 6px 0 rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.6);
}
.mcwe-end-btns { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
/* End-CTAs = MC-GUI-Block-Buttons (Bevel + Plinth). */
.mcwe-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink); padding: 16px 32px; border: 2px solid var(--panel-line); border-radius: var(--bev);
  background: linear-gradient(180deg, var(--panel-lt) 0 55%, var(--panel-dk));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.6), inset -2px -2px 0 rgba(44,61,82,.22), 0 5px 0 var(--panel-line), 0 8px 16px rgba(0,0,0,.45);
  transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) var(--ease-out), box-shadow var(--t-press) var(--ease-out);
}
.mcwe-cta:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 rgba(255,255,255,.5), inset -3px -3px 0 rgba(0,0,0,.22), 0 2px 0 var(--panel-line), 0 4px 9px rgba(0,0,0,.45); }
@media (hover: hover) and (pointer: fine) {
  .mcwe-cta:hover { filter: brightness(1.06); }
}
.mcwe-cta.join { color: #0e2410; border-color: var(--grass-dd); background: linear-gradient(180deg, var(--grass) 0 55%, var(--grass-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(0,0,0,.28), 0 5px 0 var(--grass-dd), 0 8px 16px rgba(0,0,0,.45); }
.mcwe-cta.join:active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(0,0,0,.28), 0 2px 0 var(--grass-dd), 0 4px 9px rgba(0,0,0,.45); }
.mcwe-cta.panel { color: #eaf4ff; border-color: var(--imp-dd); background: linear-gradient(180deg, var(--imp) 0 55%, var(--imp-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.34), inset -3px -3px 0 rgba(0,0,0,.30), 0 5px 0 var(--imp-dd), 0 8px 16px rgba(0,0,0,.45); }
.mcwe-cta.panel:active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.34), inset -3px -3px 0 rgba(0,0,0,.30), 0 2px 0 var(--imp-dd), 0 4px 9px rgba(0,0,0,.45); }
@media (max-width: 640px) { .mcwe-end-btns { flex-direction: column; width: 78vw; } .mcwe-cta { justify-content: center; } }

/* Wegpunkt anklicken (anspringen) + Überschreiben-Knopf */
.mcwe-go { cursor: pointer; flex: 1; }
.mcwe-go:hover { color: #ffe6a0; text-decoration: underline; }
.mcwe-u { background: none; border: 0; color: #7d8ea0; cursor: pointer; font-size: 14px; padding: 0 5px; line-height: 1; }
.mcwe-u:hover { color: #37c8ff; }

/* ── Play-Ansicht: klickbare Top-Leiste (Panel + Jetzt beitreten) ───────────── */
#mcwe-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 8; display: none;
  align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px;
  pointer-events: none; font-family: system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(6,10,18,.72) 0%, rgba(6,10,18,.36) 62%, rgba(6,10,18,0) 100%); }
#mcwe-topbar .mcwe-tb-brand { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
#mcwe-topbar .mcwe-tb-brand img { height: 30px; width: auto; filter: drop-shadow(0 2px 6px #000a); }
#mcwe-topbar .mcwe-tb-brand span { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .02em; text-shadow: 0 2px 10px #000c; }
#mcwe-topbar .mcwe-tb-actions { display: flex; align-items: center; gap: 11px; pointer-events: auto; }
/* Deutlich GRÖSSERE Buttons oben rechts (Owner: „viel größer, damit man sie nutzt") */
.mcwe-tb-btn { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 12px;
  font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
  color: #eaf2ff; background: rgba(20,28,42,.72); border: 1px solid rgba(150,180,230,.32); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@media (hover: hover) and (pointer: fine) {
  .mcwe-tb-btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
}
.mcwe-tb-btn.join { color: #fff; border: 0; background: linear-gradient(135deg, #2f8bff 0%, #1b6fe6 100%);
  box-shadow: 0 6px 20px rgba(31,111,230,.5); }
@media (max-width: 620px) { #mcwe-topbar { padding: 9px 12px; } #mcwe-topbar .mcwe-tb-brand span { display: none; }
  .mcwe-tb-btn { height: 48px; padding: 0 20px; font-size: 16px; }   /* echtes Touch-Ziel */
  #mcwe-topbar .mcwe-tb-brand img { height: 36px; } }

/* ── Feature-Einblendungen beim Scrollen ────────────────────────────────────── */
/* Reingeblendete Feature-Karte = ECHTES MC-GUI-Stein-Panel (Bevel + Item-Slot fürs Icon),
   nicht die alte dunkle Glas-Karte. Optik identisch zur Changelog/Regelwerk-Familie. */
#mcwe-feature { position: fixed; left: 34px; bottom: 96px; z-index: 7; max-width: 640px; display: flex; gap: 22px;
  align-items: center; padding: 22px 26px; pointer-events: none; opacity: 0;
  /* Deckkraft + translateY werden per Frame vom Scroll gesetzt → KEINE Transition darauf
     (die würde die Karte dem Scroll hinterherziehen). Nur der Inhalts-Tausch wird per Blur
     überblendet (.swapping) — wirkt wie EINE Verwandlung statt zweier Karten. */
  transition: filter 220ms var(--ease-out); will-change: opacity, transform;
  font-family: 'Jakarta', system-ui, sans-serif; color: var(--ink);
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 14px;
  box-shadow: inset 2px 2px 0 var(--panel-lt), inset -2px -2px 0 var(--panel-dk), 0 6px 0 rgba(30,44,64,.28), 0 18px 42px rgba(0,0,0,.5); }
/* Icon im Item-Slot (statt frei schwebendem Riesen-Emoji). */
#mcwe-feature .fic { flex: 0 0 auto; width: 82px; height: 82px; display: grid; place-items: center; font-size: 44px; line-height: 1; border-radius: 9px;
  background: var(--slot); border: 2px solid var(--slot-dk);
  box-shadow: inset 3px 3px 0 rgba(44,61,82,.7), inset -3px -3px 0 rgba(255,255,255,.6); }
#mcwe-feature .ftx { display: flex; flex-direction: column; align-items: flex-start; }
#mcwe-feature .fti { font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--ink); font-size: 36px; letter-spacing: .01em; line-height: 1.02; margin-bottom: 5px; }
#mcwe-feature .fds { color: var(--ink-soft); font-size: 18.5px; line-height: 1.36; font-weight: 500; margin-bottom: 17px; }
#mcwe-feature .fbtns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Primär-CTA „Jetzt beitreten" = grüner Block-Button. */
#mcwe-feature .fcta { pointer-events: none; position: relative; display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 17px;
  color: #0e2410; padding: 14px 26px; border: 2px solid var(--grass-dd); border-radius: var(--bev); background: linear-gradient(180deg, var(--grass) 0 55%, var(--grass-d));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(0,0,0,.28), 0 4px 0 var(--grass-dd), 0 7px 12px rgba(0,0,0,.4);
  transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
#mcwe-feature .fcta:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -3px -3px 0 rgba(0,0,0,.28), 0 1px 0 var(--grass-dd), 0 3px 7px rgba(0,0,0,.4); }
/* Sekundär „Anleitung" = Stein-Block-Button (dezenter, gleich groß/klickbar). */
#mcwe-feature .fcta.guide { color: var(--ink); border-color: var(--panel-line); background: linear-gradient(180deg, var(--panel-lt) 0 55%, var(--panel-dk));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.5), inset -3px -3px 0 rgba(0,0,0,.22), 0 4px 0 var(--panel-line), 0 7px 12px rgba(0,0,0,.4); }
#mcwe-feature .fcta.guide:active { box-shadow: inset 2px 2px 0 rgba(255,255,255,.5), inset -3px -3px 0 rgba(0,0,0,.22), 0 1px 0 var(--panel-line), 0 3px 7px rgba(0,0,0,.4); }
@media (hover: hover) and (pointer: fine) {
  #mcwe-feature .fcta:hover { filter: brightness(1.08); }
}
/* Inhalts-Tausch der Karte (neues Feature) kurz weichzeichnen → sauberer Crossfade. */
#mcwe-feature.swapping { filter: blur(7px); }
@media (max-width: 620px) { #mcwe-feature { left: 12px; right: 12px; bottom: 96px; max-width: none; gap: 14px; padding: 16px 18px; }
  #mcwe-feature .fic { width: 58px; height: 58px; font-size: 32px; } #mcwe-feature .fti { font-size: 24px; } #mcwe-feature .fds { font-size: 15.5px; }
  #mcwe-feature .fcta { font-size: 14.5px; padding: 12px 20px; } }

/* ═══ Conversion-Elemente: Server-IP kopieren, Discord, End-Beitritt (Owner: neue Spieler) ═══ */
/* Top-Leiste: Server-Adresse als kopierbare Pille (der Kern-CTA). */
.mcwe-tb-ip { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px;
  border-radius: 12px; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #eaffe9; background: linear-gradient(180deg, rgba(28,44,32,.72), rgba(16,28,20,.72));
  border: 1px solid rgba(90,220,130,.42); box-shadow: 0 4px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mcwe-tb-ip:hover { transform: translateY(-1px); border-color: rgba(90,240,140,.7); box-shadow: 0 8px 22px rgba(40,200,90,.28); }
}
.mcwe-tb-ip .dot { width: 9px; height: 9px; border-radius: 50%; background: #3fdc7a; box-shadow: 0 0 9px #3fdc7a; animation: mcwePulse 2s infinite; }
.mcwe-tb-ip .ip { font-weight: 800; font-size: 16.5px; letter-spacing: .01em; }
.mcwe-tb-ip .ico { opacity: .7; font-size: 16px; }
@keyframes mcwePulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.mcwe-tb-btn.discord { color: #fff; border: 0; background: linear-gradient(135deg, #6c78f5, #5865F2); box-shadow: 0 5px 16px rgba(88,101,242,.45); }

/* „Kopiert!"-Feedback (überlagert die Pille/den Block). */
.mcwe-copy.copied::after { content: "✓ Kopiert!"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: inherit; font-family: system-ui, sans-serif; font-weight: 800; letter-spacing: .02em; color: #04240f;
  background: linear-gradient(135deg, #57e08a, #2fbf6a); z-index: 2; animation: mcweCopiedPop 200ms var(--ease-out); }
/* Blur bridged den harten Zustands-Tausch (grüne Bestätigung überlagert die Pille) → wirkt wie
   EINE Verwandlung statt zwei übereinanderliegender Objekte. Start aus scale(.94), nie aus 0. */
@keyframes mcweCopiedPop {
  from { transform: scale(.94); opacity: 0; filter: blur(6px); }
  to { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* End-Sequenz: Untertitel + GROSSER Beitritts-Block (Server-Adresse kopieren) = MC-GUI-Stein-Panel. */
.mcwe-end-sub { font-family: 'Jakarta', sans-serif; font-size: clamp(13px, 1.5vw, 17px); font-weight: 500; color: #eaf3ff; text-shadow: 0 2px 14px #000c; max-width: 82vw; text-align: center; }
.mcwe-end-ip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  padding: 18px 34px; border: 2px solid var(--panel-line); border-radius: 14px; background: var(--panel);
  box-shadow: inset 2px 2px 0 var(--panel-lt), inset -2px -2px 0 var(--panel-dk), 0 6px 0 rgba(30,44,64,.28), 0 12px 34px rgba(0,0,0,.5);
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.mcwe-end-ip:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 var(--panel-lt), inset -3px -3px 0 var(--panel-dk), 0 3px 0 rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.5); }
@media (hover: hover) and (pointer: fine) {
  .mcwe-end-ip:hover { filter: brightness(1.03); }
}
.mcwe-end-ip .lbl { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--imp-d); }
.mcwe-end-ip .addr { display: flex; align-items: center; gap: 16px; }
.mcwe-end-ip .txt { font-family: 'Pixelify', ui-monospace, monospace; font-weight: 700;
  font-size: clamp(26px, 4.2vw, 46px); letter-spacing: .01em; color: var(--imp-d); text-shadow: 0 2px 0 #bcd8ff; }
.mcwe-end-ip .cp { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0e2410;
  background: var(--grass); border: 2px solid var(--grass-dd); box-shadow: inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(0,0,0,.25);
  padding: 6px 12px; white-space: nowrap; }

@media (max-width: 620px) {
  .mcwe-tb-ip { height: 48px; padding: 0 16px; }  .mcwe-tb-ip .ip { font-size: 15px; }  .mcwe-tb-ip .ico { display: none; }
  .mcwe-hero { gap: 10px; }  .mcwe-hero-btn { font-size: 16px; padding: 13px 20px; }
  .mcwe-end-ip { padding: 13px 18px; width: 84vw; }  .mcwe-end-ip .addr { flex-direction: column; gap: 9px; }
  .mcwe-end-sub { max-width: 88vw; }
}