:root {

  --bg1: #6ec6ff;

  --bg2: #b388ff;

  --bg3: #ffd166;

  --card: #ffffff;

  --primary: #ff6b6b;

  --primary-dark: #e94e4e;

  --secondary: #4ecdc4;

  --secondary-dark: #38b2aa;

  --accent: #ffd166;

  --success: #06d6a0;

  --error: #ef476f;

  --text: #2b2d42;

  --muted: #6c757d;

  --shadow: 0 8px 24px rgba(0,0,0,0.15);

}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Scrollbars global verstecken (Scrollen bleibt funktional) */

* { scrollbar-width: none; -ms-overflow-style: none; }

*::-webkit-scrollbar { display: none; width: 0; height: 0; }

html, body {

  margin: 0; padding: 0;

  width: 100%;

  height: 100%;

  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;

  color: var(--text);

  overflow: hidden;

  user-select: none;

  -webkit-user-select: none;

  position: fixed;

  top: 0;

  left: 0;

}

body {

  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);

  background-size: 400% 400%;

  animation: bgmove 20s ease infinite;

  display: flex;

  align-items: center;

  justify-content: center;

}

@keyframes bgmove {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}

#app {

  width: 100%;

  max-width: 1100px;

  height: 100vh;

  height: 100dvh;

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

}

/* Top Bar - immer sichtbar mit Münzen und Sternen
   Zweizeilig: Row 1 = Aktionen + Badges, Row 2 = Bestenliste links + Shop rechts */

.topbar {

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 6px 12px;

  background: rgba(255,255,255,0.85);

  backdrop-filter: blur(8px);

  border-radius: 0 0 24px 24px;

  box-shadow: var(--shadow);

  position: relative;

  z-index: 10;

  flex-shrink: 0;

}

.topbar .topbar-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  flex-wrap: wrap;

}

.topbar .topbar-row-1 { align-items: center; }
.topbar .topbar-row-2 { align-items: center; }

.topbar .topbar-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  /* beta-92: nowrap damit Badge-Reihe nie auf 2. Zeile wickelt */
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin-left: auto; /* drueckt rechts gegen die Wand */
  justify-content: flex-end;
}

/* Vor dem Login soll die Topbar komplett unsichtbar sein - sonst könnte man

   per Haus-/Logout-/Shop-Klick am Login vorbeiklicken. */

body:not(.logged-in) .topbar { display: none; }

/* Bestenliste-Pill in der Topbar (Badge-Reihe) */

.text-pill-btn {

  background: var(--accent);

  color: #5a3500;

  border: 2px solid #c89200;

  border-radius: 999px;

  padding: 5px 12px;

  font-weight: bold;

  font-size: 0.9em;

  cursor: pointer;

  box-shadow: 0 3px 0 #c89200;

  font-family: inherit;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  flex-shrink: 0;

  white-space: nowrap;

}

.text-pill-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c89200; }

/* Shop-Button SVG (Schatztruhe) */

.shop-btn svg { display: block; }

@media (max-width: 600px) {

  .text-pill-btn { padding: 3px 9px; font-size: 0.8em; }

  .shop-btn svg { width: 18px; height: 18px; }

}

.topbar .badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 5px 10px;

  background: white;

  border-radius: 999px;

  font-size: 1.1em;

  font-weight: bold;

  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

  border: 3px solid var(--accent);

  white-space: nowrap;

}

.topbar .badge.stars { border-color: #ffb800; }

.topbar .badge.coins { border-color: #ffd700; }

/* Pirateninsel: Dublonen-Muenze als SVG-Background (einheitlich mit M-BEZAHLEN-Geldbeutel).
   Stiltreues Goldstueck mit Anker-Symbol, statt €-Text. */
.gold-coin {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><radialGradient id='dub' cx='35%25' cy='35%25'><stop offset='0%25' stop-color='%23FFE07A'/><stop offset='60%25' stop-color='%23DAA520'/><stop offset='100%25' stop-color='%238B6914'/></radialGradient></defs><circle cx='20' cy='20' r='18' fill='url(%23dub)' stroke='%235a3220' stroke-width='1.5'/><circle cx='20' cy='20' r='4' fill='%235a3220'/><path d='M20 8 L20 14 M16 11 L24 11' stroke='%235a3220' stroke-width='1.4' fill='none' stroke-linecap='round'/><path d='M14 16 Q12 22 14 26 M26 16 Q28 22 26 26' stroke='%235a3220' stroke-width='0.9' fill='none'/><ellipse cx='14' cy='13' rx='3' ry='2' fill='%23FFFACD' opacity='0.6'/></svg>") center/contain no-repeat;
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.gold-coin.lg { width: 28px; height: 28px; }
.fly-coin .gold-coin { width: 36px; height: 36px; }

.topbar .badge.trophy { border-color: #c084fc; }

.topbar .badge.joker { border-color: #ffb74d; }

.topbar .badge .icon {

  font-size: 1.2em;

}

.topbar .home-btn, .topbar .shop-btn {

  background: var(--primary);

  color: white;

  border: none;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  font-size: 1.3em;

  cursor: pointer;

  box-shadow: 0 4px 0 var(--primary-dark);

  transition: transform 0.1s;

  flex-shrink: 0;

}

.topbar .shop-btn { background: var(--secondary); box-shadow: 0 4px 0 var(--secondary-dark); }

.topbar .home-btn:active, .topbar .shop-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-dark); }

.topbar .shop-btn:active { box-shadow: 0 2px 0 var(--secondary-dark); }

/* Linke Button-Gruppe: Haus / Logout / Mute eng beieinander */
.topbar .topbar-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.topbar .logout-btn-look { background: #ff8a3d; box-shadow: 0 4px 0 #c45e10; display: flex; align-items: center; justify-content: center; padding: 0; }
.topbar .logout-btn-look:active { box-shadow: 0 2px 0 #c45e10; }
.topbar .logout-btn-look svg { width: 22px; height: 22px; display: block; }

/* Screens */

.screen {

  flex: 1;

  display: none;

  flex-direction: column;

  padding: 12px;

  overflow-y: auto;

  overflow-x: hidden;

  position: relative;

  min-height: 0;

}

.screen.active { display: flex; }

/* ============================================================
   beta-251: SC-LOGIN Landing "Maritim" (Design #4)
   Alles unter #screen-name gescoped + .ln4-* praefixt -> keine
   Kollision mit der restlichen App. Eigener Himmel/Meer-Hintergrund
   nur fuer diesen Screen (globale body-Regel bleibt unberuehrt).
   ============================================================ */
#screen-name {
  --ln-sky-top:#aee4ff; --ln-sky-bottom:#dff4ff;
  --ln-sea-top:#2e9bd6; --ln-sea-mid:#1d7bbf; --ln-sea-deep:#0e5a96;
  --ln-gold:#f6b73c; --ln-gold-dark:#e0921a;
  --ln-ink:#143246; --ln-card:#ffffff; --ln-shadow:rgba(14,58,80,.22);
  padding: 0;
  color: var(--ln-ink);
  background: linear-gradient(180deg, var(--ln-sea-top) 0%, var(--ln-sea-mid) 45%, var(--ln-sea-deep) 100%);
  font-family: "Segoe UI", "Trebuchet MS", Verdana, system-ui, sans-serif;
}
#screen-name a { color: var(--ln-gold-dark); }
/* beta-263: Login-Landing full-viewport - bricht aus dem #app (max-width:1100px,
   overflow:hidden) aus, damit Meer/Himmel + Tiere den GANZEN Bildschirm fuellen und
   links/rechts keine Farbstreifen des body-Hintergrunds mehr zu sehen sind. */
#screen-name.screen.active { position: fixed; inset: 0; z-index: 40; }

/* Himmel mit Wolken + Sternchen */
/* beta-290: Himmel-Gradient liegt jetzt auf der Sky selbst (vorher auf .ln4-topwrap, der die Sky
   mit Sonne/Wolken verdeckte). Topwrap ist dadurch transparent -> Sonne + Wolken scheinen durch. */
/* beta-298: Hero-Himmel laeuft unten in helles Himmelblau aus (statt Meer-sea-top) -> nahtloser
   Uebergang ueber die hellen Wellen in den Himmel der Meer-Szene (Sonne sitzt "aus einem Guss"). */
#screen-name .ln4-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, var(--ln-sky-top) 0%, var(--ln-sky-bottom) 60%, #d8effb 100%); }
#screen-name .ln4-cloud { position: absolute; opacity: .9; will-change: transform; }
#screen-name .ln4-cloud.c1 { top: 6%;  left: -20%; animation: ln4drift 70s linear infinite; }
#screen-name .ln4-cloud.c2 { top: 16%; left: -30%; animation: ln4drift2 95s linear infinite; animation-delay: -25s; }
#screen-name .ln4-cloud.c3 { top: 3%;  left: -40%; opacity: .65; animation: ln4drift3 120s linear infinite; animation-delay: -60s; }
@keyframes ln4drift  { from { transform: translateX(0); } to { transform: translateX(150vw); } }
@keyframes ln4drift2 { from { transform: translateX(0) scale(.7); } to { transform: translateX(155vw) scale(.7); } }
@keyframes ln4drift3 { from { transform: translateX(0) scale(1.25); } to { transform: translateX(160vw) scale(1.25); } }
/* beta-290: zusaetzliche, tiefer Richtung Horizont haengende Wolken */
#screen-name .ln4-cloud.c4 { top: 30%; left: -34%; opacity: .82; animation: ln4drift 88s linear infinite; animation-delay: -40s; }
#screen-name .ln4-cloud.c5 { top: 40%; left: -22%; opacity: .55; animation: ln4drift2 112s linear infinite; animation-delay: -75s; }
/* beta-290: Sonne am Himmel mit langsam rotierenden Strahlen + sanftem Puls + warmem Gluehen */
/* beta-299: .ln4-sun (Hero-Sonne) entfernt - die Strahlen-Animation gilt jetzt der EINEN Sonne
   .ln4-seasun. transform-box:fill-box -> rotiert um die Mitte unabhaengig von der clamp-Groesse. */
#screen-name .ln4-sun-rays { transform-box: fill-box; transform-origin: center; animation: ln4sunspin 100s linear infinite; }
@keyframes ln4sunspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ln4sunpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#screen-name .ln4-twinkle { position: absolute; animation: ln4twinkle 4s ease-in-out infinite; }
@keyframes ln4twinkle { 0%,100% { opacity: .2; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.1); } }

/* Himmel-Wrapper oben (Hero + Wellen) */
#screen-name .ln4-topwrap { position: relative; z-index: 2; background: transparent; }
#screen-name .ln4-page { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; padding: 18px 24px 0; box-sizing: border-box; }

/* HERO */
#screen-name .ln4-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; padding: 16px 0 6px; }
#screen-name .ln4-hero-copy h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.02; margin: 6px 0 8px; color: var(--ln-ink); text-shadow: 0 2px 0 rgba(255,255,255,.55); letter-spacing: .5px; }
#screen-name .ln4-hl { color: var(--ln-gold-dark); background: linear-gradient(180deg, transparent 62%, rgba(246,183,60,.45) 62%); padding: 0 4px; border-radius: 4px; }
#screen-name .ln4-tagline { font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 600; color: #1f5a7d; margin: 0 0 16px; }
#screen-name .ln4-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.7); color: #1f5a7d; font-weight: 700; font-size: .82rem; letter-spacing: .6px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 8px var(--ln-shadow); }

/* Schiff-Bild schaukelt */
#screen-name .ln4-hero-art { position: relative; display: grid; place-items: center; }
#screen-name .ln4-ship-frame { position: relative; width: 100%; max-width: 540px; filter: drop-shadow(0 18px 26px rgba(14,58,80,.35)); }
#screen-name .ln4-ship-img { width: 100%; height: auto; display: block; border-radius: 26px; border: 6px solid #fff; box-shadow: 0 10px 30px var(--ln-shadow); animation: ln4rock 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ln4rock { 0%,100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-8px); } }
#screen-name .ln4-floaty { position: absolute; background: #fff; border-radius: 16px; padding: 8px 14px; font-weight: 700; font-size: .9rem; color: var(--ln-ink); box-shadow: 0 8px 18px var(--ln-shadow); display: flex; align-items: center; gap: 7px; animation: ln4bob 4.5s ease-in-out infinite; }
#screen-name .ln4-floaty .ico { font-size: 1.2rem; }
#screen-name .ln4-floaty.f1 { top: 6%; left: -4%; animation-delay: -.5s; }
#screen-name .ln4-floaty.f2 { bottom: 10%; right: -3%; animation-delay: -2.2s; }
@keyframes ln4bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* beta-306: Kurzerklaerung-Box (rechte Hero-Spalte statt Schiff-Bild) */
#screen-name .ln4-about { width: 100%; max-width: 480px; background: rgba(255,255,255,0.84); border-radius: 22px; padding: 22px 24px; box-shadow: 0 16px 40px rgba(14,58,80,0.22), 0 0 0 6px rgba(255,255,255,0.42); border: 1px solid #eef6fb; }
#screen-name .ln4-about-title { margin: 0 0 14px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ln-ink); display: flex; align-items: center; gap: 10px; }
#screen-name .ln4-about-title span { font-size: 1.2em; }
#screen-name .ln4-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#screen-name .ln4-about-list li { display: flex; align-items: flex-start; gap: 11px; font-size: clamp(0.95rem, 1.5vw, 1.08rem); line-height: 1.4; color: #284a5c; font-weight: 500; }
#screen-name .ln4-ab-ico { flex: 0 0 auto; font-size: 1.35em; line-height: 1.1; }
#screen-name .ln4-about-list b { color: var(--ln-gold-dark); }

/* LOGIN-KARTE (prominentestes Element) */
#screen-name .ln4-login-card { background: var(--ln-card); border-radius: 24px; padding: 26px 26px 22px; box-shadow: 0 22px 50px rgba(14,58,80,.32), 0 0 0 6px rgba(255,255,255,.55); border: 1px solid #eef6fb; position: relative; margin-top: 18px; max-width: 460px; }
/* beta-306: Piratenflagge ueber der Login-Karte entfernt (User-Wunsch) */
#screen-name .ln4-login-card::before { display: none; }
#screen-name .ln4-login-card h2 { margin: 12px 0 2px; font-size: 1.45rem; color: var(--ln-ink); }
#screen-name .ln4-sub { margin: 0 0 16px; color: #5a7689; font-size: .95rem; }
#screen-name .ln4-field { margin-bottom: 12px; }
#screen-name .ln4-field label { display: block; font-weight: 700; font-size: .82rem; color: #345567; margin-bottom: 5px; }
#screen-name .ln4-input { width: 100%; padding: 14px 15px; font-size: 1.02rem; border: 2px solid #d6e6f0; border-radius: 14px; background: #f7fbfe; color: var(--ln-ink); font-family: inherit; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
#screen-name .ln4-input::placeholder { color: #9ab2c2; }
#screen-name .ln4-input:focus { outline: none; border-color: var(--ln-gold); box-shadow: 0 0 0 4px rgba(246,183,60,.25); background: #fff; }
#screen-name .ln4-btn-go { width: 100%; margin-top: 6px; padding: 16px 18px; font-size: 1.25rem; font-weight: 800; color: #5b3500; background: linear-gradient(180deg, #ffd166 0%, var(--ln-gold) 55%, var(--ln-gold-dark) 100%); border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 10px 20px rgba(224,146,26,.45), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .12s ease, box-shadow .12s ease; letter-spacing: .3px; font-family: inherit; }
#screen-name .ln4-btn-go:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(224,146,26,.5); }
#screen-name .ln4-btn-go:active { transform: translateY(1px); }
#screen-name .ln4-hint { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; background: #eafaf0; border: 1px solid #bfe9cf; border-radius: 14px; padding: 12px 14px; font-size: .9rem; color: #1f6b41; line-height: 1.4; }
#screen-name .ln4-hint .ico { font-size: 1.25rem; flex: 0 0 auto; }
#screen-name .ln4-hint b { color: #155731; }

/* WELLEN */
#screen-name .ln4-wave-wrap { position: relative; z-index: 1; margin-top: 8px; line-height: 0; }
#screen-name .ln4-wave-stack { position: relative; height: 120px; }
#screen-name .ln4-wave-stack svg { position: absolute; bottom: 0; left: 0; display: block; width: 200%; height: auto; }
#screen-name .ln4-wave { will-change: transform; }
#screen-name .ln4-wave.w1 { animation: ln4waveMove 9s ease-in-out infinite; opacity: .55; }
#screen-name .ln4-wave.w2 { animation: ln4waveMove 13s ease-in-out infinite reverse; opacity: .8; }
#screen-name .ln4-wave.w3 { animation: ln4waveMove 17s linear infinite; }
@keyframes ln4waveMove { 0% { transform: translateX(0); } 50% { transform: translateX(-25%); } 100% { transform: translateX(0); } }

/* Sektion auf dem Meer */
/* beta-275: opaker Meer-Hintergrund - sonst scheint die FIXED .ln4-sky (Wolken/Sternchen)
   beim Scrollen durch die sonst transparente Sektion durch ("Wolken im Wasser"). */
/* beta-293: Gradient erreicht sea-deep frueher (62%), damit der UNTERE Teil (Karten + Uebergang
   zur Tiefsee) schon sea-deep ist -> nahtloser Anschluss an .ln4-deep (beginnt auch mit sea-deep),
   kein heller-zu-dunkel-Sprung mehr am iPhone (wo die Section sehr hoch ist). */
/* beta-294: oberes Meer-Band hoeher (240px), damit der nun GROESSERE/deutlichere Schiffsbug
   Platz hat und klar als Bug erkennbar ist (User: "eindeutig erkennen"). */
/* beta-298: padding-top groesser (Himmel + Horizont + groesserer Schiffsbug haben jetzt oben Platz).
   padding-bottom = Tiefsee-Zone am Grund (eine durchgehende Wasserflaeche). */
#screen-name .ln4-sea-section { position: relative; z-index: 2; padding: 346px 0 clamp(360px, 50vh, 520px); background: linear-gradient(180deg, var(--ln-sea-top) 0%, var(--ln-sea-mid) 16%, var(--ln-sea-deep) 62%); }
/* beta-298: Titel sitzt im HIMMEL (ueber dem Horizont), neben/unter der Sonne. */
#screen-name .ln4-sea-head { position: absolute; left: 0; top: 50px; width: 100%; z-index: 2; pointer-events: none; }
/* beta-299: SEITENANSICHT-Piratenschiff (statt First-Person-Bug). Schwimmt auf dem Wasser (Rumpf
   unter dem Horizont, Masten ragen in den Himmel), schaukelt sanft. Aufschrift still darunter. */
/* beta-300: First-Person-RELING im Vordergrund (volle Breite, unten ueber den Karten). Man schaut
   zwischen den Pfosten + ueber den Handlauf aufs Meer (dahinter, z-index 1) mit Sonne + fernem Schiff.
   Aufschrift steht still auf dem Deck-Boden. */
/* beta-304: Deck/Reling schwankt sanft (Roll + Heben) -> First-Person-Schiffsgefuehl (kein
   stiller Hafen-Kai mehr). Container leicht ueberbreit (-4% / 108%), damit der Roll keine
   leeren Ecken am Rand zeigt. */
#screen-name .ln4-railing { position: absolute; left: -4%; top: 200px; width: 108%; height: clamp(124px, 16vh, 152px); z-index: 3; pointer-events: none; transform-origin: 50% 100%; animation: ln4sway 7.5s ease-in-out infinite; will-change: transform; }
#screen-name .ln4-railing-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 -3px 7px rgba(0,0,0,0.20)); }
#screen-name .ln4-ship-name { position: absolute; left: 0; bottom: 2px; width: 100%; text-align: center; color: #f3e2bd; font-weight: 700; font-size: clamp(0.6rem, 1.3vw, 0.8rem); letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0,30,50,0.7); }
/* beta-314: nur noch Rotation um die untere Mitte (transform-origin 50% 100%), KEIN translateY mehr -
   das vertikale Heben erzeugte beim Wackeln eine Fuge, unter der der Deck-Boden durchschien. */
@keyframes ln4sway { 0%,100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }

/* beta-304: bewegte Wasseroberflaeche (mehrere Wellenkaemme) im offenen Wasser unter dem Horizont,
   damit das Meer nicht glatt wirkt sondern leicht Wellen wirft. Liegt unter der Reling (z3). */
#screen-name .ln4-sea-waves { position: absolute; left: 0; top: clamp(116px, 16.5vh, 150px); width: 100%; height: clamp(100px, 14vh, 140px); z-index: 1; pointer-events: none; overflow: hidden; }
#screen-name .ln4-swave { position: absolute; left: -10%; width: 220%; height: 24px; display: block; will-change: transform; }
#screen-name .ln4-swave.sw1 { top: 2px;  animation: ln4swave 10s ease-in-out infinite; }
#screen-name .ln4-swave.sw2 { top: 24px; animation: ln4swave 14s ease-in-out infinite reverse; opacity: .85; }
#screen-name .ln4-swave.sw3 { top: 50px; animation: ln4swave 18s ease-in-out infinite; opacity: .7; }
#screen-name .ln4-swave.sw4 { top: 80px; animation: ln4swave 23s ease-in-out infinite reverse; opacity: .5; }
@keyframes ln4swave { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-8%) translateY(2px); } }

/* beta-306: Crew-Piraten direkt an der Reling (Mix Rueckenansicht + zugewandt), Tafel auf einer
   Staffelei links mit Papagei oben. Kinder der schwankenden .ln4-railing -> schaukeln mit dem Schiff. */
#screen-name .ln4-crew { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#screen-name .ln4-crew-pirate { position: absolute; bottom: 0; height: clamp(60px, 8.5vw, 84px); width: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.34)); }
/* beta-314: GANZKOERPER-Piraten (Kopf bis Stiefel), stehen mit den Fuessen auf dem Deck (bottom:0).
   Rueckenansicht-Piraten (cp-2, cp-4) etwas groesser + ganz vorne (z-index 5), die zugewandten
   (cp-1, cp-3) leicht kleiner dahinter (z-index 4). Neu um die mittigere Tafel + den Mast verteilt. */
#screen-name .ln4-crew-pirate.cp-2 { left: 37%; height: clamp(118px, 18vw, 152px); bottom: 0; z-index: 5; }
#screen-name .ln4-crew-pirate.cp-4 { left: 60%; height: clamp(112px, 17vw, 144px); bottom: 0; z-index: 5; }
#screen-name .ln4-crew-pirate.cp-1 { left: 5%; height: clamp(104px, 16vw, 138px); bottom: 0; z-index: 4; }
#screen-name .ln4-crew-pirate.cp-3 { left: 73%; height: clamp(104px, 16vw, 138px); bottom: 0; z-index: 4; }
/* beta-308: Piraten-Kanone AN der Reling (zeigt nach aussen, nur Hinterteil sichtbar) + Kugeln daneben */
/* beta-312: Kanone ganz vorne an der Reling (z-index 5), Kugeln direkt daneben (overflow:visible -> oberste nicht abgeschnitten) */
#screen-name .ln4-cannon { position: absolute; right: 4%; bottom: 0; width: clamp(66px, 11.5vw, 104px); height: auto; z-index: 5; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.34)); overflow: visible; }
#screen-name .ln4-cannonballs { position: absolute; right: 16%; bottom: 0; width: clamp(32px, 5.6vw, 50px); height: auto; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.32)); overflow: visible; }
/* beta-316: ZWEI Masten (Segelschiff-Silhouette) statt einem mittigen, deutlich groesser - ein grosser
   Mast vorne-links, ein kleinerer hinten-rechts. Beide ragen aus der Reling, liegen hinter der Crew. */
#screen-name .ln4-mast { position: absolute; bottom: 0; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28)); overflow: visible; }
/* beta-318: Masten niedriger (Segel sitzt im Boot-/Deck-Bereich statt hoch im Himmel) + etwas
   mittiger - der User wollte sie "in der Mitte des Bootes, nicht alles oben ausgerichtet". */
/* beta-320: Masten GROSS - Fuss reicht in die Schiffsmitte (bottom negativ -> hinter die Karten),
   Spitze bleibt oben; vorderer kurz vor der Tafel (links), hinterer kurz hinter den Kanonenkugeln
   (rechts). Sie sitzen in der schwankenden Reling -> bewegen sich mit (Mitte wirkt bewegt). */
/* beta-321: schlanke, hohe Masten (nicht breit/fassartig) + klar von Tafel/Kanone getrennt.
   Vorderer in die Luecke links der Tafel, hinterer rechts hinter den Kanonenkugeln. */
#screen-name .ln4-mast.mast-front { left: 11%; width: clamp(94px, 13vw, 168px); height: clamp(360px, 49vh, 455px); bottom: -190px; z-index: 2; }
#screen-name .ln4-mast.mast-back { left: 90%; width: clamp(80px, 11vw, 142px); height: clamp(335px, 45vh, 420px); bottom: -188px; z-index: 1; }
/* beta-312/314: Deck-Deko (Tau, Fass, Schatztruhe) liegt mittig auf dem Deck herum */
#screen-name .ln4-deck-prop { position: absolute; bottom: 0; height: auto; z-index: 2; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
#screen-name .ln4-deck-prop.dp-rope { left: 30%; bottom: 2px; width: clamp(30px, 5.6vw, 48px); z-index: 3; }
#screen-name .ln4-deck-prop.dp-barrel { left: 67%; width: clamp(28px, 5vw, 44px); z-index: 3; }
#screen-name .ln4-deck-prop.dp-chest { left: 50%; transform: translateX(-50%); width: clamp(42px, 7.4vw, 64px); z-index: 2; }
/* Tafel auf Staffelei (Dreibein) - weiter rechts, Papagei sitzt oben auf dem Rahmen */
/* beta-314: Tafel mehr in die Schiffsmitte + etwas schraeg aufgestellt (kippt nach links, steht auf
   dem Deck). transform-origin unten, damit sie wie aufgestellt wirkt. */
#screen-name .ln4-deck-easel { position: absolute; left: clamp(70px, 23vw, 330px); bottom: 0; width: clamp(116px, 21vw, 176px); height: clamp(110px, 18vh, 158px); z-index: 2; transform: rotate(-5deg); transform-origin: 50% 100%; }
#screen-name .ln4-easel-legs { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 112%; height: 100%; z-index: 1; }
#screen-name .ln4-easel-board { position: absolute; left: 50%; top: 16px; transform: translateX(-50%) rotate(-1.4deg); width: clamp(104px, 19vw, 158px); padding: 11px 11px 10px; box-sizing: border-box; background: linear-gradient(180deg, #2f4f3d, #233f2e); border: 6px solid #8a5a32; border-radius: 8px; box-shadow: 0 5px 12px rgba(0,0,0,0.42), inset 0 0 18px rgba(0,0,0,0.4); text-align: center; z-index: 2; }
#screen-name .ln4-easel-parrot { position: absolute; right: 2%; top: -12px; transform: rotate(10deg); width: clamp(34px, 6.5vw, 50px); height: auto; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
#screen-name .ln4-board-text { display: block; color: #f4ead0; font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; font-size: clamp(0.6rem, 1.55vw, 0.9rem); line-height: 1.16; text-shadow: 0 1px 1px rgba(0,0,0,0.45); letter-spacing: .2px; }
#screen-name .ln4-board-text b { color: #ffdf86; font-size: 1.12em; }
/* beta-307: untere Schiffsseite = QUERSCHNITT. Die gegenueberliegende Reling (vertikal gespiegelt:
   Deck oben am Kacheln-Ende, Reling/Handlauf nach unten zum Wasser), darunter zeigt die .ln4-deepzone
   wieder Wasser -> man sieht das Deck zwischen zwei Schiffsseiten, drumherum Meer. */
/* beta-308: "andere Bug-Seite" - die gegenueberliegende Bordwand schliesst DIREKT (knapp ueber) an
   die nahe Reling an, darueber das Wasser -> First-Person "man steht im Bug" (kein weit-unten-Querschnitt
   mehr). Handlauf oben (ferne Bordwand von innen), perspektivisch etwas schmaler. */
/* beta-310: DECK-ZONE - Holzboden (alter Schiffsboden, full-bleed) umschliesst NUR die 3 Karten ->
   das Deck endet direkt nach den Karten. Die andere Bootseite .ln4-railing-bottom kommt als Flow
   GLEICH danach (full-bleed, gespiegelt = andere Richtung), darunter Wasser/Screenshots. */
#screen-name .ln4-deck-zone { position: relative; padding: clamp(20px,3.5vh,42px) 0; }
/* beta-316: saubere Schichtung im Section-Kontext (Page bildet keinen eigenen Stacking-Context mehr):
   Deck-Boden z-index:2 (HINTER Crew z3), Karten z-index:5 (VOR Crew). So verdeckt der Boden die
   Piraten/Tafel/Schatzkiste nicht mehr, die Karten liegen trotzdem vorn. */
#screen-name .ln4-deck-zone > .ln4-audience { position: relative; z-index: 5; }
/* beta-314: Boden schliesst direkt an die Reling-Unterkante an (top knapp negativ -> ueberlappt den
   Reling-Deckboden minimal und deckt beim Schwanken die Fuge ab); KEIN tiefes Hochziehen mehr unter
   die Crew (sonst Doppel-Boden + Verdeckung). Der Boden liegt jetzt VOR der Reling (page z-index:4),
   die schwankende Reling dahinter -> beim Wackeln erscheint nichts mehr "darunter". */
/* beta-321: Deck-Boden schwankt MIT (synchron zu den Relings) - damit auch die "Mitte" des Schiffs
   sich bewegt. Ueberhang an allen Seiten (108vw breit, top/bottom negativ) + transform-origin Mitte,
   damit die Rotation an den Raendern KEINE Luecken freilegt (der Ueberhang ragt unter Reling/Bordwand
   bzw. ueber den Viewport hinaus). Die Karten (.ln4-audience) sind ein eigenes Element -> bleiben ruhig. */
#screen-name .ln4-deck-zone::before { content: ""; position: absolute; top: -28px; bottom: -22px; left: calc(50% - 54vw); width: 108vw; z-index: 2; box-shadow: inset 0 -12px 24px rgba(0,0,0,0.34);
  transform-origin: 50% 50%; animation: ln4sway 7.5s ease-in-out infinite; will-change: transform;
  /* beta-312/316: EINHEITLICHER Boden wie der Reling-Deck (#8a5630), schlicht; Oberkante exakt #8a5630
     damit der Uebergang zum Reling-Deckboden NAHTLOS ist (keine sichtbare zweite Holzschicht mehr).
     z-index:2 -> liegt HINTER der Crew (oberer inset-Schatten entfernt, der die Kante betonte). */
  background-color: #8a5630;
  /* beta-318: HORIZONTALE Planken-Fugen (0deg) statt vertikaler - gleiche Richtung wie der Reling-
     Deckboden, breitenunabhaengig konsistent (festes 22px-Raster). So laufen die Bretter ueberall
     gleich (kein "Mitte laengs / Seiten quer" mehr). */
  background-image:
    repeating-linear-gradient(0deg, rgba(58,36,16,0.30) 0 2px, transparent 2px, transparent 22px),
    linear-gradient(180deg, #8a5630 0%, #835530 55%, #7a4d28 100%); }
/* beta-312: die andere Bootseite schwankt GEGENGLEICH zur oberen Reling (ein Schiff schaukelt). */
/* beta-317: z-index 3 (war 1) -> die untere Bordwand/Bande liegt VOR dem Deck-Boden (z2); seit dem
   Layering-Fix (page z-auto) wurde sie sonst vom Boden ueberdeckt -> Bande war nicht mehr sichtbar. */
#screen-name .ln4-railing-bottom { position: relative; left: calc(50% - 50vw); width: 100vw; height: clamp(86px, 10vh, 116px); z-index: 3; pointer-events: none; transform-origin: 50% 0%; animation: ln4swayRev 7.5s ease-in-out infinite; will-change: transform; margin: 0; }
/* beta-320: gleiche Amplitude wie die obere Reling (ln4sway 0.8) -> beide Bordwaende neigen sich
   synchron in dieselbe Richtung (rollendes Schiff), nicht gegeneinander. */
@keyframes ln4swayRev { 0%,100% { transform: scaleY(-1) rotate(0.8deg); } 50% { transform: scaleY(-1) rotate(-0.8deg); } }
#screen-name .ln4-railing-bottom svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 -3px 6px rgba(0,0,0,0.22)); }
/* beta-316: Page bildet KEINEN eigenen Stacking-Context (z-index:auto statt 4) -> Deck-Boden (z2) und
   Karten (z5) schichten direkt im Section-Kontext relativ zur Reling/Crew (z3). So liegt der Boden
   HINTER der Crew (keine Verdeckung) und die Karten trotzdem VOR ihr. */
#screen-name .ln4-sea-section .ln4-page { padding-top: 0; position: relative; z-index: auto; }
/* das obere Meer-Band (Hoehe = padding-top) ist freies Wasser, in dem die Tiere durchziehen */
#screen-name .ln4-sealife { height: auto; }
/* beta-257: durchziehendes Meer-Leben hinter den Karten (#6) - Schiff, Wal, Delfine, Insel */
/* beta-296: z-index 1 (ueber der .ln4-deepzone z-index:0) -> Blasen + durchziehende Fische liegen
   VOR dem dunklen Tiefsee-Grund, die Karten (.ln4-page z-index:2) vor allem Wasser. */
#screen-name .ln4-sealife { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
#screen-name .ln4-fish { position: absolute; left: 0; will-change: transform, opacity; }
/* beta-292: Luftblasen steigen hinter den Karten vom Grund bis ganz nach oben auf (die
   .ln4-sealife mit overflow:hidden clippt sie am oberen Rand sauber ab). */
#screen-name .ln4-rbub { position: absolute; top: 102%; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), rgba(255,255,255,.1) 58%, rgba(255,255,255,.22) 100%); border: 1px solid rgba(255,255,255,.55); will-change: top; animation: ln4riseup var(--bd, 14s) linear infinite; }
/* top-basiert (102% -> -4%) deckt die GANZE Wasser-Hoehe ab, egal ob 1- oder 3-spaltiges Card-
   Layout; .ln4-sealife overflow:hidden clippt am oberen/unteren Rand sauber. */
@keyframes ln4riseup { 0% { top: 102%; opacity: 0; } 7% { opacity: .85; } 90% { opacity: .65; } 100% { top: -4%; opacity: 0; } }
/* beta-294: Blasen-Container der MEER-Section beginnt erst unter dem Schiffsbug (top:240px =
   Karten-Anfang) -> die Luftblasen enden an der Wasseroberflaeche (Bug-Linie) statt bis ganz oben
   zu steigen. overflow:hidden clippt sie am oberen Rand sauber. (Die Tiefsee-Blasen in .ln4-deep
   bleiben unveraendert und steigen dort bis oben durch.) */
#screen-name .ln4-bubcol { position: absolute; left: 0; right: 0; top: 240px; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* beta-275: Gemeinsame Durchzieh-Keyframe. Das Objekt zieht EINMAL durch (0-16% der
   Laufzeit, sichtbar) und parkt dann off-screen + unsichtbar (16-100%). Ueber versetzte
   animation-delay ziehen die Wasser-Objekte NACHEINANDER vorbei -> nie zwei gleichzeitig
   im Wasser, also keine Ueberlappung mehr (vorher liefen alle dauernd gleichzeitig). */
@keyframes ln4cross {
  0%    { transform: translateX(-22vw); opacity: 0; }
  1.5%  { opacity: 1; }
  14.5% { opacity: 1; }
  16%   { transform: translateX(122vw); opacity: 0; }
  100%  { transform: translateX(122vw); opacity: 0; }
}

/* Wasser-Parade: 300s-Zyklus (5 min), Start alle 60s versetzt. Reihenfolge:
   Schiff -> Wal -> Delfine -> Festland-Insel -> Fischschwarm, dann wiederholt es sich. */
/* beta-298: Tiere ziehen am HORIZONT (knapp unter dem Himmel-Band, im fernen Wasser), zeitlich
   gestaffelt -> nie zwei gleichzeitig. Reihenfolge: Schiff -> Wal -> Delfine -> Insel -> Fischschwarm. */
#screen-name .w-ship     { top: 134px; animation: ln4cross 300s linear infinite; animation-delay:    0s; }
#screen-name .w-whale    { top: 132px; animation: ln4cross 300s linear infinite; animation-delay:  -60s; }
#screen-name .w-dolphins { top: 146px; animation: ln4cross 300s linear infinite; animation-delay: -120s; }
#screen-name .w-land     { display: none; } /* beta-289: durch die perspektivische w-land-near ersetzt (nie 2 Inseln) */
#screen-name .w-school   { top: 162px; animation: ln4cross 300s linear infinite; animation-delay: -240s; }
/* beta-289: EINE Insel, perspektivisch + in die Staffelung eingereiht (eigenes Zeitfenster bei
   -180s wie vorher das Festland) -> ueberlappt nicht mehr mit Schiff/Fischen. Klein am Horizont
   (mittig-hinten) -> waechst und wandert nach links-unten raus (man faehrt rechts vorbei). */
#screen-name .w-land-near { top: 130px; left: 44%; transform-origin: center bottom; animation: ln4islandby 300s linear infinite; animation-delay: -180s; }
@keyframes ln4islandby {
  0%    { transform: translate(0vw, 0) scale(0.22);     opacity: 0; }
  3%    { opacity: 0.95; }
  15%   { transform: translate(-64vw, 36px) scale(1.6); opacity: 0.95; }  /* faehrt gross nach links VORBEI, voll sichtbar (kein Verblassen vorm Boot) */
  16%   { transform: translate(-72vw, 36px) scale(1.6); opacity: 0; }     /* erst off-screen ausblenden */
  100%  { transform: translate(-72vw, 36px) scale(1.6); opacity: 0; }
}

/* beta-294: Tiefsee-Kreaturen ziehen langsam im UNTEREN (dunklen) Teil der Meer-Section hinter den
   Screenshot-Kacheln durch - in den Luecken zwischen/neben den Karten sichtbar. top in % (Tiefe),
   verschiedene Hoehen + Tempi -> "immer wieder mal" schwimmt was vorbei. z-index 0 (ln4-sealife)
   liegt hinter den Karten (z-index 1), die Tiere bleiben also Hintergrund. */
#screen-name .d-shark   { top: 50%; animation: ln4deepcross 80s linear infinite; animation-delay:   -6s; }
#screen-name .d-school  { top: 67%; animation: ln4deepcross 58s linear infinite; animation-delay:  -34s; }
#screen-name .d-fishbig { top: 38%; animation: ln4deepcross 66s linear infinite; animation-delay:  -52s; }
#screen-name .d-fish2   { top: 77%; animation: ln4deepcross 50s linear infinite; animation-delay:  -19s; }
@keyframes ln4deepcross {
  0%   { transform: translateX(-26vw); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(126vw); opacity: 0; }
}

/* beta-298: HIMMEL-Bereich oben in der Meer-Section - heller Himmel (sky-bottom) der unten weich in
   den Horizont/das Wasser (sea-top) uebergeht. Die Sonne sitzt darin ganz oben -> "aus einem Guss"
   mit dem Himmel statt im Wasser zu schweben. Darunter beginnt das Wasser (Schiffsbug, Karten). */
#screen-name .ln4-sea-sky { position: absolute; top: 0; left: 0; right: 0; height: clamp(124px, 18vh, 162px); overflow: hidden; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--ln-sky-bottom) 0%, #cfe9f7 40%, #9ad0ef 72%, var(--ln-sea-top) 100%); }
/* beta-299: die EINE Sonne als SVG (rotierende Strahlen) ganz oben im Himmel. drop-shadow = warmes
   Gluehen. Strahlen rotieren via .ln4-sun-rays (transform-box:fill-box -> dreht um die Mitte). */
#screen-name .ln4-seasun { position: absolute; top: 2px; left: 60%; transform: translateX(-50%); width: clamp(82px, 14vw, 122px); height: auto; z-index: 0; pointer-events: none; filter: drop-shadow(0 0 15px rgba(255,206,94,0.5)); }
/* Lichtbahn der Sonne aufs Wasser (vom Sonnen-Fuss zum Horizont). */
#screen-name .ln4-sunpath { position: absolute; top: 70px; left: 60%; transform: translateX(-50%); width: clamp(54px, 12vw, 108px); height: 92px; background: linear-gradient(180deg, rgba(255,228,150,0.34) 0%, rgba(255,228,150,0.06) 72%, rgba(255,228,150,0) 100%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); z-index: 0; pointer-events: none; }

/* beta-297: Moewen kommen von HINTER dem Schiff hoch und fliegen Richtung Sonne (rechts-oben, ~60%),
   schrumpfen und VERBLASSEN am Horizont, bevor sie die Sonne erreichen (User-Wunsch). b1 + b2
   gestaffelt, leicht unterschiedliche Bahn. */
#screen-name .ln4-birds { top: 0; transform-origin: center; }
#screen-name .ln4-birds.b1 { left: 30%; animation: ln4tosun  16s ease-out infinite; animation-delay:  -2s; }
#screen-name .ln4-birds.b2 { left: 38%; animation: ln4tosun2 20s ease-out infinite; animation-delay: -11s; }
@keyframes ln4tosun {
  0%   { transform: translate(0, 132px)   scale(0.5);  opacity: 0; }    /* vom Schiff am Horizont hoch */
  14%  { opacity: 0.9; }
  55%  { transform: translate(15vw, 64px) scale(0.30); opacity: 0.62; } /* steigt in den Himmel */
  82%  { opacity: 0.16; }                                               /* verblasst vor der Sonne */
  100% { transform: translate(26vw, 26px) scale(0.10); opacity: 0; }    /* nahe der Sonne, weg */
}
@keyframes ln4tosun2 {
  0%   { transform: translate(0, 122px)   scale(0.42); opacity: 0; }
  16%  { opacity: 0.8; }
  55%  { transform: translate(10vw, 58px) scale(0.26); opacity: 0.54; }
  82%  { opacity: 0.15; }
  100% { transform: translate(19vw, 24px) scale(0.08); opacity: 0; }
}

/* beta-296: Tiefsee-Zone am UNTEREN Ende der Meer-Section (KEIN separater .ln4-deep-Bereich mehr ->
   "eine Welt" statt zwei). Weicher Dunkel-Verlauf von transparent (zeigt das sea-deep der Section
   durch) zum sehr dunklen Grund -> KEIN Strich/Uebergang. Quallen schweben, am Grund das Wrack. Die
   durchgehenden .ln4-bubcol-Blasen laufen DAVOR vom Grund bis zur Bug-Linie (keine Blasen-Luecke). */
#screen-name .ln4-deepzone { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(360px, 50vh, 520px); overflow: hidden; pointer-events: none; z-index: 0; background: linear-gradient(180deg, transparent 0%, rgba(7,48,73,0.5) 32%, #073049 62%, #04222f 100%); }
/* beta-306: Meeresgrund am Tiefsee-Boden (Sand + Korallen + wogendes Seegras), das Wrack steht darauf */
#screen-name .ln4-seabed { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(100px, 16vh, 170px); z-index: 0; pointer-events: none; }
#screen-name .ln4-sand { position: absolute; left: -3%; right: -3%; bottom: 0; height: clamp(44px, 7vh, 76px); background: linear-gradient(180deg, #b58f54 0%, #97713e 55%, #785829 100%); border-radius: 48% 52% 0 0 / clamp(26px,4.5vh,46px) clamp(26px,4.5vh,46px) 0 0; box-shadow: 0 -2px 9px rgba(0,0,0,0.22); }
#screen-name .ln4-coral { position: absolute; bottom: clamp(32px,5.2vh,58px); height: clamp(40px, 7vh, 70px); width: auto; transform-origin: bottom center; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
#screen-name .ln4-coral.sc1 { left: 7%; }
#screen-name .ln4-coral.sc2 { left: 20%; animation: ln4weed 5s ease-in-out infinite; }
#screen-name .ln4-coral.sc3 { right: 24%; }
#screen-name .ln4-coral.sc4 { right: 8%; animation: ln4weed 6.5s ease-in-out infinite reverse; }
#screen-name .ln4-coral.sc5 { left: 41%; height: clamp(26px,4.5vh,44px); animation: ln4weed 7s ease-in-out infinite; }
@keyframes ln4weed { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
#screen-name .ln4-jelly { position: absolute; will-change: transform; }
#screen-name .ln4-jelly.j1 { left: 15%; top: 30%; animation: ln4float 9s ease-in-out infinite; }
#screen-name .ln4-jelly.j2 { left: 71%; top: 46%; animation: ln4float 11s ease-in-out infinite; animation-delay: -3s; }
#screen-name .ln4-jelly.j3 { left: 45%; top: 22%; animation: ln4float 13s ease-in-out infinite; animation-delay: -6s; }
@keyframes ln4float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }
#screen-name .ln4-wreck { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(94vw, 440px); height: auto; opacity: .9; }

/* Wal + Delfine sind nach links gezeichnet (Auge links), ziehen aber nach rechts.
   Inneres SVG spiegeln, damit sie in Fahrtrichtung schauen (nicht das animierte div). */
#screen-name .w-whale svg, #screen-name .w-dolphins svg { transform: scaleX(-1); }
#screen-name .ln4-section-title { text-align: center; color: #fff; text-shadow: 0 2px 6px rgba(0,40,70,.5); margin: 6px 0 4px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
/* beta-309: Untertitel direkt unter dem Titel (statt auf dem Deck) */
#screen-name .ln4-sea-sub { text-align: center; color: #f3e2bd; font-weight: 700; font-size: clamp(0.85rem, 1.8vw, 1.1rem); margin: 0; text-shadow: 0 1px 4px rgba(0,30,50,0.6); }
#screen-name .ln4-section-sub { text-align: center; color: #e2f3ff; margin: 0 0 26px; font-size: 1.02rem; }

/* Zielgruppen-Karten */
#screen-name .ln4-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
#screen-name .ln4-aud-card { position: relative; background: #fff; border-radius: 22px; padding: 22px 22px 20px; box-shadow: 0 16px 34px rgba(8,40,66,.28); border-top: 6px solid var(--ln-accent, var(--ln-gold)); transition: transform .15s ease, box-shadow .15s ease; }
/* "kostenlos 2026/27"-Badge rechts oben auf den Lehrer-/Eltern-Karten */
#screen-name .ln4-free-badge { position: absolute; top: -10px; right: -10px; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.12; text-align: center; padding: 6px 11px; border-radius: 14px; box-shadow: 0 4px 10px rgba(0,0,0,.22); transform: rotate(5deg); z-index: 4; border: 2px solid #fff; }
#screen-name .ln4-aud-card:hover { transform: translateY(-5px); box-shadow: 0 22px 42px rgba(8,40,66,.34); }
#screen-name .ln4-aud-card.teacher { --ln-accent: #3a8fd6; }
#screen-name .ln4-aud-card.parent  { --ln-accent: #36b37e; }
#screen-name .ln4-aud-card.kid     { --ln-accent: #f06b3e; }
#screen-name .ln4-aud-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#screen-name .ln4-emoji { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem; background: color-mix(in srgb, var(--ln-accent) 18%, #fff); }
#screen-name .ln4-aud-head h3 { margin: 0; font-size: 1.25rem; color: var(--ln-ink); }
#screen-name .ln4-aud-card ul { list-style: none; margin: 0; padding: 0; }
/* beta-309: li NICHT mehr flex (sonst zerreisst flex Text + Preis-/Zahl-Spans in eigene Items) ->
   normaler Textfluss, das ✓ absolut links daneben. */
#screen-name .ln4-aud-card li { position: relative; padding: 8px 0 8px 32px; border-bottom: 1px dashed #e6eef4; font-size: .98rem; color: #2c4a5c; line-height: 1.4; }
#screen-name .ln4-aud-card li:last-child { border-bottom: none; }
#screen-name .ln4-check { position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ln-accent); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 900; }

/* Screenshots */
/* beta-318: z-index 2 (> sealife/Fische z1) -> die durchziehenden Fische schwimmen HINTER den
   Videos/Screenshots, nicht darueber. Seit dem Layering-Fix (page z-auto) lagen die shots sonst
   bei z-auto(0) hinter den Fischen (z1). */
#screen-name .ln4-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; position: relative; z-index: 2; }
#screen-name .ln4-shot { background: #fff; border-radius: 20px; padding: 12px 12px 14px; box-shadow: 0 16px 34px rgba(8,40,66,.28); }
#screen-name .ln4-shot img, #screen-name .ln4-shot-media { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid #e3edf4; }
/* ungerade Kachel-Anzahl: letzte allein stehende Kachel mittig statt linksbuendig */
#screen-name .ln4-shot:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 11px); margin-left: auto; margin-right: auto; }
/* feste Ratio, damit die Video-Kachel schon vor dem Laden die richtige Hoehe hat (kein Springen) */
#screen-name .ln4-shot-media { aspect-ratio: 20 / 13; object-fit: cover; background: #bcdcf0; }
/* beta-282: Spiele-Video hochformatiger als die Kachel -> contain statt cover, damit das ganze
   Spiel (Titel bis Numpad/Buttons) sichtbar bleibt und nichts abgeschnitten wird. */
#screen-name .ln4-game-video { object-fit: contain; background: #eef2fb; }
#screen-name .ln4-cap { margin: 12px 4px 2px; font-weight: 700; color: var(--ln-ink); display: flex; align-items: center; gap: 8px; }

/* Footer (dunkelblau, full-bleed) */
/* beta-296: Footer beginnt oben mit EXAKT der Tiefsee-Endfarbe (#04222f) und blendet ueber die
   ersten 90px weich ins Footer-Blau -> kein harter Strich mehr am Tiefsee->Footer-Uebergang
   (war "ganz unten beim Wrack" eine deutliche helle Kante). */
#screen-name .ln4-footer { position: relative; z-index: 3; background: linear-gradient(180deg, #04222f 0%, #0b3a5c 90px); color: #cfe6f4; font-size: .82em; padding: 22px 24px 26px; max-width: none; margin: 0; }
#screen-name .ln4-footer a { color: #ffd479; }
#screen-name .ln4-footer details { background: rgba(255,255,255,.07); }
#screen-name .ln4-footer summary { color: #fff; }

/* Responsive */
@media (max-width: 900px) {
  #screen-name .ln4-hero { grid-template-columns: 1fr; gap: 12px; padding-top: 6px; }
  /* Login zuerst: Titel + Karte oben, Schiff-Bild DARUNTER (vorher order:-1 schob das
     grosse Bild ueber den Login -> man musste zum Anmelden scrollen). */
  #screen-name .ln4-hero-art { order: 1; margin-top: 4px; }
  #screen-name .ln4-ship-frame { max-width: 300px; }
  /* margin-top >= 28px: die Piratenflaggen-Badge (::before, ragt 22px nach oben) braucht
     Platz, sonst ueberlappt sie die Tagline darueber. */
  #screen-name .ln4-login-card { max-width: 100%; margin-top: 30px; }
  #screen-name .ln4-hero-copy h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); margin: 2px 0 6px; }
  #screen-name .ln4-tagline { margin-bottom: 14px; }
  #screen-name .ln4-audience { grid-template-columns: 1fr; }
  #screen-name .ln4-shots { grid-template-columns: 1fr; }
  #screen-name .ln4-floaty.f1 { left: 2%; }
  #screen-name .ln4-floaty.f2 { right: 2%; }
}
@media (max-width: 560px) {
  #screen-name .ln4-page { padding: 12px 16px 0; }
  #screen-name .ln4-login-card { padding: 22px 18px 18px; margin-top: 30px; }
  /* Auf dem Handy maximal kompakt, damit der Anmelde-Button sofort im Bild ist */
  #screen-name .ln4-eyebrow { display: none; }
  /* beta-321: Spruch ("Ein Abenteuer für die ganze Crew") + Sonne hoeher + Hero kompakter, damit es
     am iPhone moeglichst ohne Scrollen sichtbar ist. */
  /* beta-323: Hero auf dem iPhone deutlich kompakter, damit der GANZE Spruch (Titel + Untertitel)
     + Sonne ohne Scrollen sichtbar sind. */
  #screen-name .ln4-sea-head { top: 2px; }
  #screen-name .ln4-seasun { top: 0; width: clamp(62px, 10.5vw, 88px); }
  #screen-name .ln4-hero { padding-top: 2px; }
  #screen-name .ln4-login-card { margin-top: 6px; padding: 12px 14px 10px; }
  #screen-name .ln4-login-card h2 { font-size: 1.05rem; margin: 0 0 7px; }
  #screen-name .ln4-hero-copy h1 { font-size: clamp(1.45rem, 5.6vw, 1.85rem); margin: 0 0 2px; }
  #screen-name .ln4-tagline { margin-bottom: 4px; font-size: 0.84rem; }
  #screen-name .ln4-hint { font-size: 0.74rem; padding: 6px 9px; margin-top: 7px; line-height: 1.32; }
  /* beta-324: Schiff-Szene auf dem schmalen iPhone aufgeraeumt (Design-Profi-Komposition).
     Problem (beta-322/323): 12 Deko-Objekte draengten sich auf ~390px -> Tafel, Fass, Seil und
     ein Pirat lagen direkt VOR/AUF den Segeln (cremefarbenes Segel als "Bettlaken" hinter dem
     mittigen Rueckenpiraten). Loesung: klare, symmetrische Buehne -
     (1) Boden-Kleinkram (Tau/Fass/Truhe/Kanonenkugeln) ausblenden = Rauschen weg,
     (2) Tafel zentriert als Held der Szene,
     (3) die 2 Segel symmetrisch in die freien Luecken links/rechts der Tafel, klar im Hintergrund,
     (4) Crew: 2 Piraten rahmen aussen (cp-1 links, cp-3 rechts); die beiden mittigen Ruecken-
         piraten (cp-2/cp-4), die auf den Segeln klebten, auf dem Handy weglassen. */
  #screen-name .ln4-deck-prop.dp-rope,
  #screen-name .ln4-deck-prop.dp-barrel,
  #screen-name .ln4-deck-prop.dp-chest,
  #screen-name .ln4-cannonballs { display: none; }
  #screen-name .ln4-deck-easel { left: 50%; transform: translateX(-50%) rotate(-3deg); width: clamp(120px, 34vw, 152px); }
  /* Masten auf dem Handy kuerzer + breiter + hoeher angesetzt (bottom weniger negativ), damit das
     Segel als kompaktes Trapez OBEN sitzt statt als schmale Saeule durch die Szene zu haengen. */
  #screen-name .ln4-mast.mast-front { left: 20%; width: clamp(72px, 21vw, 96px); height: clamp(168px, 26vh, 210px); bottom: -22px; }
  #screen-name .ln4-mast.mast-back { left: 80%; width: clamp(64px, 19vw, 86px); height: clamp(156px, 24vh, 196px); bottom: -20px; }
  #screen-name .ln4-crew-pirate.cp-2,
  #screen-name .ln4-crew-pirate.cp-4 { display: none; }
  #screen-name .ln4-crew-pirate.cp-1 { left: 2%; }
  #screen-name .ln4-crew-pirate.cp-3 { left: 70%; }
  #screen-name .ln4-cannon { right: 2%; }
  #screen-name .ln4-hero-copy h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); margin: 0 0 5px; }
  #screen-name .ln4-tagline { font-size: 1rem; margin-bottom: 12px; }
  /* Hero-Schiff auf dem Handy ganz ausblenden: es ragte nur halb in den ersten Viewport
     (halb angeschnitten = unfertig). Login + Himmel + Wellen reichen, sauberer Fokus. */
  #screen-name .ln4-hero-art { display: none; }
  #screen-name .ln4-floaty { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-name .ln4-ship-img, #screen-name .ln4-cloud, #screen-name .ln4-wave, #screen-name .ln4-floaty, #screen-name .ln4-twinkle,
  #screen-name .ln4-sun, #screen-name .ln4-sun-rays, #screen-name .ln4-jelly, #screen-name .ln4-bubble, #screen-name .ln4-rbub { animation: none !important; }
  #screen-name .ln4-fish { animation: none !important; display: none; }
}

/* Menu / Welt-Auswahl */

.menu-title {

  text-align: center;

  font-size: clamp(1.5em, 5vw, 2.4em);

  color: white;

  text-shadow: 3px 3px 0 var(--primary), 6px 6px 0 rgba(0,0,0,0.2);

  margin: 8px 0 4px;

  animation: titlebounce 2s ease-in-out infinite;

}

@keyframes titlebounce {

  0%, 100% { transform: scale(1) rotate(-1deg); }

  50% { transform: scale(1.04) rotate(1deg); }

}

.menu-subtitle {

  text-align: center;

  color: white;

  font-size: clamp(0.85em, 2.5vw, 1.15em);

  margin-bottom: 10px;

  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);

}

/* Hinweis-Box im Login-Screen: erklärt neuen Usern wie es funktioniert */
/* beta-174 M-001 Fix: Help-Box visuell zurückgeschraubt — vorher dominanter
   als die Eingabefelder selbst. Jetzt: dezent unter den Feldern, max 2 Zeilen,
   hellerer Hintergrund, dünnerer Border. */
.login-info-box {
  background: rgba(255, 248, 225, 0.92);
  color: #5a3220;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 4px 0 10px;
  max-width: 340px;
  font-size: 0.82em;
  line-height: 1.4;
  box-shadow: none;
  border: 1.5px solid rgba(139, 69, 19, 0.35);
  text-align: left;
}
.login-info-box b { color: var(--primary-dark); font-weight: 600; }
@media (max-width: 600px) {
  .login-info-box { font-size: 0.78em; padding: 6px 10px; }
}

.worlds-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap: 10px;

  padding: 4px;

}

.world-card {

  background: var(--card);

  border-radius: 20px;

  padding: 12px 8px;

  text-align: center;

  cursor: pointer;

  box-shadow: 0 5px 0 rgba(0,0,0,0.15), var(--shadow);

  transition: transform 0.15s, box-shadow 0.15s;

  position: relative;

  border: 4px solid transparent;

  overflow: hidden;

}

.world-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.4));

  pointer-events: none;

}

.world-card:hover { transform: translateY(-4px) rotate(-1deg); }

.world-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }

.world-card .emoji {

  font-size: clamp(2.4em, 8vw, 3.2em);

  display: block;

  margin-bottom: 4px;

  line-height: 1;

  animation: wcfloat 3s ease-in-out infinite;

}

.world-card:nth-child(2n) .emoji { animation-delay: -1s; }

.world-card:nth-child(3n) .emoji { animation-delay: -2s; }

@keyframes wcfloat {

  0%, 100% { transform: translateY(0) rotate(-3deg); }

  50% { transform: translateY(-6px) rotate(3deg); }

}

.world-card .title {

  font-size: clamp(0.9em, 2.5vw, 1.05em);

  font-weight: bold;

  margin-bottom: 4px;

  line-height: 1.1;

}

.world-card .desc {

  font-size: clamp(0.7em, 2vw, 0.8em);

  color: var(--muted);

  min-height: 2.2em;

  line-height: 1.15;

}

.world-card .stars {

  margin-top: 6px;

  font-size: 1.1em;

  letter-spacing: 2px;

}

.world-card .star { opacity: 0.25; }

.world-card .star.earned { opacity: 1; filter: drop-shadow(0 0 4px gold); }

.world-card.locked { filter: grayscale(0.7) brightness(0.85); cursor: not-allowed; }

.world-card.locked::after {

  content: "🔒";

  position: absolute;

  top: 8px;

  right: 8px;

  font-size: 1.4em;

}

/* Spiel-Bildschirm */

.game-screen {

  background: rgba(255,255,255,0.95);

  border-radius: 24px;

  margin: 6px;

  padding: 14px;

  flex: 1;

  display: none;

  flex-direction: column;

  box-shadow: var(--shadow);

  overflow: hidden;

  min-height: 0;

}

.game-screen.active { display: flex; }

.game-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

  gap: 8px;

}

.game-title {

  font-size: clamp(1.05em, 3.2vw, 1.4em);

  font-weight: bold;

  color: var(--text);

}

.progress-row {

  display: flex;

  gap: 6px;

  margin-bottom: 12px;

}

.progress-dot {

  flex: 1;

  height: 12px;

  border-radius: 999px;

  background: #e0e0e0;

  transition: background 0.3s;

}

.progress-dot.done { background: var(--success); }

.progress-dot.wrong { background: var(--error); }

.progress-dot.current { background: var(--accent); animation: pulse 1s infinite; }

@keyframes pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.15); }

}

.question-area {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  justify-content: safe center;

  /* beta-88: flex-start als Fallback (Browser ohne safe-Keyword). beta-179 MMM-301-P2:
     "safe center" zentriert kurzen Spiel-Inhalt vertikal (behebt 60% Whitespace-Leere),
     verhaelt sich bei Ueberlauf aber wie flex-start — kein Abschneiden, weiter scrollbar. */

  padding: 6px;

  position: relative;

  min-height: 0;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

.question-text {

  font-size: clamp(1.6em, 6vw, 2.6em);

  font-weight: bold;

  margin: 8px 0;

  text-align: center;

  color: var(--text);

  line-height: 1.1;

}

.question-hint {

  font-size: clamp(1.3em, 3.4vw, 1.75em);

  color: var(--text);

  text-align: center;

  margin-bottom: 6px;

  line-height: 1.3;

  font-weight: 700;

}

.answer-row {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

  margin: 12px 0;

}

.btn-answer {

  background: var(--secondary);

  color: white;

  border: none;

  font-size: clamp(1.2em, 4vw, 1.6em);

  font-weight: bold;

  padding: 15px 24px;

  border-radius: 16px;

  cursor: pointer;

  box-shadow: 0 5px 0 var(--secondary-dark);

  transition: transform 0.1s;

  min-width: 76px;

  font-family: inherit;

}

.btn-answer:hover { transform: translateY(-2px); }

.btn-answer:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--secondary-dark); }

.btn-answer.correct { background: var(--success); box-shadow: 0 5px 0 #04a87e; animation: correctpop 0.5s; }

.btn-answer.wrong { background: var(--error); box-shadow: 0 5px 0 #b3304f; animation: shake 0.4s; }

.btn-answer:disabled { opacity: 0.6; cursor: default; }

@keyframes correctpop {

  0% { transform: scale(1); }

  50% { transform: scale(1.2); }

  100% { transform: scale(1); }

}

@keyframes shake {

  0%, 100% { transform: translateX(0); }

  25% { transform: translateX(-8px); }

  75% { transform: translateX(8px); }

}

.input-row {

  display: flex;

  gap: 10px;

  align-items: center;

  justify-content: center;

  margin: 12px 0;

}

.num-input {

  font-size: 2em;

  width: 100px;

  padding: 8px;

  border: 4px solid var(--secondary);

  border-radius: 14px;

  text-align: center;

  font-family: inherit;

  background: white;

  outline: none;

}

.num-input:focus { border-color: var(--accent); }

.num-input:read-only { caret-color: var(--primary); cursor: pointer; }

/* On-Screen Ziffernblock */

.numpad {

  display: grid;

  /* beta-89: zurueck auf 3 Spalten (klassisch Telefon-Layout). Platz wird oben gespart. */

  grid-template-columns: repeat(3, 1fr);

  gap: 5px;

  max-width: 260px;

  width: 100%;

  margin: 2px auto 0;

}

.numpad-key {

  background: white;

  color: var(--text);

  border: 3px solid var(--primary);

  border-radius: 14px;

  padding: 12px 0;

  font-size: 1.6em;

  font-weight: bold;

  cursor: pointer;

  font-family: inherit;

  box-shadow: 0 4px 0 var(--primary-dark);

  transition: transform 0.08s;

  user-select: none;

  -webkit-tap-highlight-color: transparent;

}

.numpad-key:hover { background: #f4f8ff; }

.numpad-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-dark); }

.numpad-key.numpad-back { background: #fff0f0; border-color: #ff6b6b; color: #c94545; box-shadow: 0 4px 0 #a13838; }

.numpad-key.numpad-back:active { box-shadow: 0 1px 0 #a13838; }

.numpad-key.numpad-ok { background: #e8fff3; border-color: var(--success); color: var(--success); box-shadow: 0 4px 0 #047a5a; }

.numpad-key.numpad-ok:active { box-shadow: 0 1px 0 #047a5a; }

/* beta-301: "weiter zum naechsten Feld"-Taste (z.B. Zahlenmauer "→") - konsistent zum Standard-Numblock */
.numpad-key.numpad-next { background: #eef4ff; border-color: #3a8fd6; color: #1f6aa8; box-shadow: 0 4px 0 #1f6aa8; }

.numpad-key.numpad-next:active { box-shadow: 0 1px 0 #1f6aa8; }

@media (max-width: 600px) {

  .numpad { max-width: 240px; gap: 5px; margin: 6px auto 2px; }

  /* beta-70 R3: Touch-Target Apple-HIG Minimum 44px */
  .numpad-key { font-size: 1.3em; padding: 10px 0; min-height: 44px; border-width: 2px; box-shadow: 0 3px 0 var(--primary-dark); }

}

.btn-check {

  background: var(--primary);

  color: white;

  border: none;

  font-size: 1.3em;

  font-weight: bold;

  padding: 12px 28px;

  border-radius: 16px;

  cursor: pointer;

  box-shadow: 0 5px 0 var(--primary-dark);

  font-family: inherit;

}

.btn-check:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--primary-dark); }
.btn-check:disabled {
  opacity: 0.55;
  cursor: wait;
  filter: grayscale(0.3);
  transform: none;
  pointer-events: none;
}

/* ===== Standard-Button-Varianten ============================================
   Konvention für ALLE Spiele + Mechaniken im Projekt. Statt inline
   style="background:..." sollen diese Modifier-Klassen genutzt werden -
   damit bleibt der Look konsistent + spätere Theme-Änderungen wirken überall.

   <button class="btn-check">           Standard (rot, Prüfen/Bestätigen)
   <button class="btn-check btn-success">   Grün (Speichern, ✓ Erfolgreich)
   <button class="btn-check btn-danger">    Rot/Warning (Löschen, Abbrechen)
   <button class="btn-check btn-neutral">   Grau (Schließen, Zurück)
   <button class="btn-check btn-info">      Blau (Info, Optional)
   <button class="btn-check btn-warning">   Orange (Achtung, Reset)
   <button class="btn-answer">          Türkis (Multiple-Choice-Antwort)
============================================================================ */
.btn-check.btn-success { background: #22c55e; box-shadow: 0 5px 0 #15803d; }
.btn-check.btn-success:active { box-shadow: 0 2px 0 #15803d; }
.btn-check.btn-danger { background: #dc2626; box-shadow: 0 5px 0 #991b1b; }
.btn-check.btn-danger:active { box-shadow: 0 2px 0 #991b1b; }
/* beta-338 (UI-Audit A): Grau auf #888 vereinheitlicht (Mehrheit der ~65 Inline-Buttons),
   statt des konkurrierenden #94a3b8 - alle grauen Buttons jetzt aus einem Guss. */
.btn-check.btn-neutral { background: #888; box-shadow: 0 5px 0 #555; }
.btn-check.btn-neutral:active { box-shadow: 0 2px 0 #555; }
.btn-check.btn-info { background: #0ea5e9; box-shadow: 0 5px 0 #0369a1; }
.btn-check.btn-info:active { box-shadow: 0 2px 0 #0369a1; }
.btn-check.btn-warning { background: #f59e0b; box-shadow: 0 5px 0 #b45309; }
.btn-check.btn-warning:active { box-shadow: 0 2px 0 #b45309; }
.btn-check.btn-purple { background: #a855f7; box-shadow: 0 5px 0 #7e22ce; }
.btn-check.btn-purple:active { box-shadow: 0 2px 0 #7e22ce; }

/* Charakter */

.character {

  font-size: clamp(2.8em, 10vw, 5em);

  display: inline-block;

  line-height: 1;

  animation: charfloat 2s ease-in-out infinite;

}

@keyframes charfloat {

  0%, 100% { transform: translateY(0) rotate(-3deg); }

  50% { transform: translateY(-10px) rotate(3deg); }

}

.character.happy { animation: charhappy 0.6s ease-out; }

@keyframes charhappy {

  0% { transform: scale(1); }

  30% { transform: scale(1.3) rotate(-15deg); }

  60% { transform: scale(1.3) rotate(15deg); }

  100% { transform: scale(1); }

}

.character.sad { animation: charsad 0.5s; }

@keyframes charsad {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(8px) scale(0.92); }

}

/* Feedback Overlay */

.feedback {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0);

  font-size: 4em;

  font-weight: bold;

  pointer-events: none;

  z-index: 50;

  text-shadow: 4px 4px 0 rgba(0,0,0,0.2);

}

.feedback.show { animation: feedbackpop 1.2s ease-out forwards; }

@keyframes feedbackpop {

  0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }

  30% { transform: translate(-50%, -50%) scale(1.4) rotate(8deg); opacity: 1; }

  70% { transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); opacity: 1; }

  100% { transform: translate(-50%, -50%) scale(2) rotate(0); opacity: 0; }

}

.feedback.good { color: var(--success); }

.feedback.bad { color: var(--error); }

/* Konfetti-Canvas */

#confetti-canvas {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 100;

}

/* Ergebnis-Bildschirm */

.result-screen {

  text-align: center;

  padding: 20px 16px;

  flex: 1;

}

.result-screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.result-character {

  font-size: clamp(4em, 14vw, 7em);

  animation: resultbounce 0.8s ease-out;

  line-height: 1;

}

@keyframes resultbounce {

  0% { transform: scale(0) rotate(-180deg); }

  60% { transform: scale(1.3) rotate(20deg); }

  100% { transform: scale(1) rotate(0); }

}

.result-title {

  font-size: clamp(1.4em, 5vw, 2.2em);

  font-weight: bold;

  color: white;

  text-shadow: 3px 3px 0 var(--primary);

  margin: 10px 0;

  line-height: 1.2;

}

.result-stars {

  font-size: clamp(2.6em, 9vw, 4em);

  letter-spacing: 6px;

  margin: 10px 0;

  line-height: 1;

}

.result-stars .star { opacity: 0.25; display: inline-block; }

.result-stars .star.earned {

  opacity: 1;

  filter: drop-shadow(0 0 12px gold);

  animation: starpop 0.5s ease-out forwards;

  animation-delay: var(--delay, 0s);

  transform: scale(0);

}

@keyframes starpop {

  0% { transform: scale(0) rotate(-180deg); }

  60% { transform: scale(1.4) rotate(20deg); }

  100% { transform: scale(1) rotate(0); }

}

.result-stats {

  background: white;

  padding: 14px 20px;

  border-radius: 20px;

  margin: 12px 0;

  box-shadow: var(--shadow);

  font-size: clamp(0.95em, 2.8vw, 1.2em);

}

.result-stats div { margin: 4px 0; }

/* A4: Fortschrittsbox unter den Sternen */
.result-progress {
  background: linear-gradient(135deg, #e0f7fa, #4ecdc4);
  color: #00504a;
  border: 3px solid #38b2aa;
  border-radius: 16px;
  padding: 10px 14px;
  margin: 8px 0 4px;
  font-weight: bold;
  line-height: 1.5;
  font-size: clamp(0.9em, 2.6vw, 1.05em);
  box-shadow: 0 4px 0 #38b2aa;
  animation: cardpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

.result-buttons {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 12px;

}

/* Shop */

.shop-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.shop-tab {
  background: white;
  border: 3px solid var(--primary);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 0 var(--primary-dark);
  transition: transform 0.1s;
}

.shop-tab.active {
  background: var(--primary);
  color: white;
}

.shop-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-dark); }

.shop-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 10px;

  padding: 6px;

}

/* Lehrer/Gruppen-System: gesperrte Welt */
.world-card.locked-by-teacher {
  filter: grayscale(0.5);
  opacity: 0.7;
  cursor: not-allowed;
}
.world-card.device-locked {
  filter: grayscale(0.6);
  opacity: 0.65;
  cursor: not-allowed;
}
/* Hidden-Badge: in Entwicklung */
.hidden-badge {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 3px 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #fbbf24;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: bold;
}
/* Drop-Target Hervorhebung beim Zahlen-Ordnen */
.ordnen-slot.drop-target, .ordnen-card.drop-target {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  transform: scale(1.05);
}
#ordnen-pool.drop-target {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}
/* Beim Drag eines Trennstrichs: Original-Zelle ausblenden, der Strich "haengt" am Finger */
.letter-cell.ghost-empty.has-space::after,
.silben-gap.ghost-empty.active::before { opacity: 0.15; }

/* Waehrend eines aktiven Drags (Wort-Trenner oder Silbenbogen) komplett Scrollen +
   Touch-Gesten unterdruecken. Wichtig fuer iPhone Chrome, wo der Scroll-Manager sonst
   den Pointer abbricht und der Strich auf die falsche Position springt. */
body.split-dragging,
body.silben-dragging {
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.world-card.locked-by-teacher .locked-overlay {
  background: rgba(255, 200, 200, 0.6);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 0.85em;
}

/* Group-Detail / Lehrer-Portal Cards */
.group-card { transition: transform 0.1s; }
.group-card:hover { transform: translateY(-2px); }

.member-card, .join-request-row {
  transition: transform 0.1s;
}

/* Lehrer-Portal-Toggle im Login */
.teacher-toggle-row {
  background: rgba(0,0,0,0.15);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.15s;
}
.teacher-toggle-row:hover {
  background: rgba(0,0,0,0.25);
}

/* Lehrer-Portal-Banner über den Spielen (nur sichtbar wenn isTeacher) */
.teacher-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 6px auto 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  color: white;
  border: none;
  border-radius: 18px;
  font-family: inherit;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 5px 0 #5b21b6, 0 4px 14px rgba(168, 85, 247, 0.4);
  transition: transform 0.1s;
  text-align: left;
}
.teacher-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #5b21b6, 0 6px 18px rgba(168, 85, 247, 0.5);
}
.teacher-banner:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #5b21b6, 0 2px 8px rgba(168, 85, 247, 0.4);
}
.teacher-banner-icon {
  font-size: 2em;
  line-height: 1;
  flex-shrink: 0;
}
.teacher-banner-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.2;
}
.teacher-banner-text b {
  font-size: 1.05em;
}
.teacher-banner-text small {
  font-weight: normal;
  opacity: 0.9;
  font-size: 0.85em;
  margin-top: 2px;
}
.teacher-banner-arrow {
  font-size: 1.4em;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Auf Mobile: Lehrer-Banner & Tagesziel kompakter, damit Welten direkt sichtbar sind. */
@media (max-width: 600px) {
  .teacher-banner { gap: 8px; margin: 2px auto 4px; padding: 6px 10px; font-size: 0.92em; }
  .teacher-banner-icon { font-size: 1.4em; }
  .teacher-banner-text small { display: none; }
  .teacher-banner-arrow { font-size: 1.1em; }
}

/* Augen-Toggle für Passwortfelder (Klartext sichtbar/versteckt) */
.pw-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.pw-wrap input {
  width: 100%;
  padding-right: 40px !important;
  box-sizing: border-box;
}
/* Login-Screen: Input hat feste Breite (280px) - der Wrap wuerde sich sonst auf
   100% des Screen-Containers ziehen und das Auge-Icon waere weit ausserhalb. */
#screen-name .pw-wrap {
  width: 280px;
  max-width: 90vw;
}
.pw-eye-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--muted);
  line-height: 0;
  border-radius: 6px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pw-eye-btn svg { display: block; }
.pw-eye-btn:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text);
}
.pw-eye-btn:active {
  background: rgba(0,0,0,0.15);
}
/* Browser-native Reveal-Buttons (Edge/IE) verstecken — wir nutzen unser eigenes
   .pw-eye-btn, sonst sieht der User zwei Augen nebeneinander. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  width: 0;
  height: 0;
}

.shop-item {

  background: white;

  border-radius: 18px;

  padding: 14px;

  text-align: center;

  box-shadow: var(--shadow);

  border: 4px solid transparent;

  cursor: pointer;

  transition: transform 0.15s;

}

.shop-item:hover { transform: translateY(-3px); }

.shop-item.owned { border-color: var(--success); }

.shop-item.equipped { border-color: var(--accent); background: linear-gradient(135deg, #fff8e0, white); }

.shop-item.locked { filter: grayscale(0.5); }

.shop-item .emoji { font-size: 3em; display: block; margin-bottom: 4px; }

.shop-item .name { font-weight: bold; font-size: 0.95em; }

.shop-item .price { color: var(--muted); font-size: 0.9em; margin-top: 4px; }

.shop-item .status { font-size: 0.85em; color: var(--success); margin-top: 4px; font-weight: bold; }

/* Specific game styles */

.egg-carton {

  display: inline-grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 2px;

  background: #d4a574;

  padding: 6px;

  border-radius: 8px;

  margin: 4px;

}

.egg-slot { width: 20px; height: 26px; background: #b8895a; border-radius: 40% 40% 50% 50%; display: flex; align-items: center; justify-content: center; }

/* Leerer Slot - sichtbarer "Karton-Hohlraum" ohne Ei. Dunkler innen, damit
   das Kind die Lücke klar erkennt. */
.egg-slot.egg-slot-empty {
  background: #8a6440;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
  border: 1px dashed rgba(255,255,255,0.25);
}

.egg { width: 16px; height: 22px; background: linear-gradient(135deg, #fffaef 30%, #f3e2b6); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1); }

.money-area { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 14px; background: #f0f0f0; border-radius: 16px; margin: 8px 0; min-height: 130px; align-items: center; }

/* Echte Euro-Münzen: 1€ silberner Kern mit Goldrand, 2€ Goldkern mit Silberrand */

.euro-coin {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  position: relative;

  box-shadow: 0 4px 8px rgba(0,0,0,0.25), inset 0 -3px 6px rgba(0,0,0,0.15), inset 0 3px 6px rgba(255,255,255,0.4);

  font-family: "Arial", sans-serif;

}

.euro-coin .center {

  width: 70%;

  height: 70%;

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 0.95em;

  line-height: 1;

}

.euro-coin .center .num { font-size: 1.5em; font-weight: 900; }

.euro-coin .center .sym { font-size: 0.85em; font-weight: bold; letter-spacing: -1px; margin-top: -2px; }

.euro-coin.c1 {

  background: radial-gradient(circle at 35% 30%, #f7d97a 0%, #d4a017 60%, #a07a10 100%);

}

.euro-coin.c1 .center {

  background: radial-gradient(circle at 35% 30%, #e8e8e8 0%, #b0b0b0 70%, #808080 100%);

  color: #2a2a2a;

}

.euro-coin.c2 {

  background: radial-gradient(circle at 35% 30%, #e8e8e8 0%, #b0b0b0 70%, #808080 100%);

}

.euro-coin.c2 .center {

  background: radial-gradient(circle at 35% 30%, #f7d97a 0%, #d4a017 70%, #a07a10 100%);

  color: #4a3500;

}

/* Echte Euro-Scheine: 5€ grau, 10€ rot, 20€ blau (offizielle Eurofarben) */

.euro-bill {

  width: 120px;

  height: 64px;

  border-radius: 4px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.15);

  font-family: "Arial Black", "Arial", sans-serif;

  color: rgba(255,255,255,0.96);

  flex-shrink: 0;

}

/* Sterne-Kreis links (EU-Sterne) */

.euro-bill .stars-circle {

  position: absolute;

  left: 6px;

  top: 50%;

  transform: translateY(-50%);

  width: 28px;

  height: 28px;

  font-size: 5px;

  letter-spacing: 0;

  color: rgba(255,235,150,0.95);

  text-shadow: 0 0 2px rgba(255,200,60,0.7);

}

.euro-bill .stars-circle::before {

  content: "★";

  position: absolute;

  font-size: 6px;

}

.euro-bill .stars-circle .s1 { position: absolute; top: 0;    left: 50%; transform: translateX(-50%); }

.euro-bill .stars-circle .s2 { position: absolute; top: 4px;  right: 0; }

.euro-bill .stars-circle .s3 { position: absolute; top: 12px; right: -2px; }

.euro-bill .stars-circle .s4 { position: absolute; bottom: 4px; right: 0; }

.euro-bill .stars-circle .s5 { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

.euro-bill .stars-circle .s6 { position: absolute; bottom: 4px; left: 0; }

.euro-bill .stars-circle .s7 { position: absolute; top: 12px; left: -2px; }

.euro-bill .stars-circle .s8 { position: absolute; top: 4px;  left: 0; }

/* Großer Wert */

.euro-bill .big-val {

  position: absolute;

  top: 4px;

  right: 8px;

  font-size: 1.7em;

  font-weight: 900;

  line-height: 1;

  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);

  letter-spacing: -1px;

}

.euro-bill .small-val {

  position: absolute;

  bottom: 3px;

  left: 6px;

  font-size: 0.85em;

  font-weight: 900;

  line-height: 1;

}

.euro-bill .euro-label {

  position: absolute;

  bottom: 3px;

  right: 6px;

  font-size: 0.55em;

  font-weight: bold;

  letter-spacing: 1.5px;

  font-family: "Arial", sans-serif;

}

.euro-bill .ezb {

  position: absolute;

  top: 3px;

  left: 38px;

  font-size: 0.45em;

  font-weight: bold;

  letter-spacing: 1px;

  font-family: "Arial", sans-serif;

  opacity: 0.9;

}

/* Hologramm-Streifen rechts */

.euro-bill .holo {

  position: absolute;

  top: 0;

  bottom: 0;

  right: 18px;

  width: 4px;

  background: linear-gradient(180deg,

    rgba(255,255,255,0.5) 0%,

    rgba(255,235,150,0.7) 30%,

    rgba(255,255,255,0.5) 60%,

    rgba(200,230,255,0.7) 100%);

  opacity: 0.6;

}

/* Hintergrund-Muster (Architektur-Hauch) */

.euro-bill::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    repeating-linear-gradient(90deg,

      transparent 0,

      transparent 6px,

      rgba(255,255,255,0.05) 6px,

      rgba(255,255,255,0.05) 7px),

    repeating-linear-gradient(0deg,

      transparent 0,

      transparent 8px,

      rgba(0,0,0,0.05) 8px,

      rgba(0,0,0,0.05) 9px);

}

/* 5€: Grau-violett mit klassischer Antik-Optik */

.euro-bill.b5 {

  background: linear-gradient(135deg, #c4b0c8 0%, #9888a2 35%, #786680 70%, #564860 100%);

}

.euro-bill.b5 .big-val,

.euro-bill.b5 .small-val,

.euro-bill.b5 .euro-label,

.euro-bill.b5 .ezb { color: #fefefe; }

/* 10€: Rot-orange (romanischer Stil) */

.euro-bill.b10 {

  background: linear-gradient(135deg, #f4a574 0%, #d96838 30%, #b8431c 65%, #7d2810 100%);

}

.euro-bill.b10 .big-val,

.euro-bill.b10 .small-val,

.euro-bill.b10 .euro-label,

.euro-bill.b10 .ezb { color: #fff; }

/* 20€: Blau (gotischer Stil) */

.euro-bill.b20 {

  background: linear-gradient(135deg, #8caedc 0%, #4078c0 35%, #1a4a8e 70%, #0d2d5e 100%);

}

/* beta-329: 50€ orange, 100€ grün (offizielle Eurofarben) */
.euro-bill.b50 {
  background: linear-gradient(135deg, #f4a86a 0%, #e07f2c 35%, #c25e12 70%, #8a3f08 100%);
}
.euro-bill.b50 .big-val,
.euro-bill.b50 .small-val,
.euro-bill.b50 .euro-label,
.euro-bill.b50 .ezb { color: #fff; }
.euro-bill.b100 {
  background: linear-gradient(135deg, #a8d6a0 0%, #5aa84e 35%, #3a8a30 70%, #1f5a18 100%);
}
.euro-bill.b100 .big-val,
.euro-bill.b100 .small-val,
.euro-bill.b100 .euro-label,
.euro-bill.b100 .ezb { color: #fff; }

/* beta-329: Cent-Münzen (kleiner als Euro-Münzen): 1-5 Kupfer, 10-50 nordisches Gold */
.cent-coin {
  width: clamp(38px, 7vw, 50px);
  height: clamp(38px, 7vw, 50px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.28), inset 0 1px 2px rgba(255,255,255,0.4);
  flex: 0 0 auto;
}
.cent-coin .center {
  width: 74%; height: 74%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.cent-coin .center .num { font-size: 1.15em; font-weight: 900; }
.cent-coin .center .sym { font-size: 0.5em; font-weight: bold; letter-spacing: -0.5px; margin-top: 1px; }
.cent-coin.copper { background: radial-gradient(circle at 35% 30%, #e6a877 0%, #b5702f 60%, #8a4f1c 100%); }
.cent-coin.copper .center { background: radial-gradient(circle at 35% 30%, #d99a66 0%, #a8632a 70%, #7a4416 100%); color: #3a2008; }
.cent-coin.gold { background: radial-gradient(circle at 35% 30%, #f0d488 0%, #c9a23c 60%, #9a7820 100%); }
.cent-coin.gold .center { background: radial-gradient(circle at 35% 30%, #f7e2a0 0%, #d4b24e 70%, #a8852c 100%); color: #4a3500; }

.word-pile {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  padding: 16px;

  background: #f8f8ff;

  border-radius: 16px;

  margin: 8px 0;

  min-height: 80px;

}

.word-token {

  background: var(--secondary);

  color: white;

  padding: 10px 18px;

  border-radius: 12px;

  font-size: 1.3em;

  font-weight: bold;

  cursor: pointer;

  box-shadow: 0 3px 0 var(--secondary-dark);

  transition: transform 0.1s;

}

.word-token:hover { transform: translateY(-2px); }

.word-token:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--secondary-dark); }

.word-token.placed { background: #ddd; color: #999; cursor: default; box-shadow: 0 3px 0 #bbb; }

.sentence-line {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  padding: 16px;

  background: #e8f5e9;

  border-radius: 16px;

  margin: 8px 0;

  min-height: 60px;

  border: 3px dashed #4caf50;

}

.sentence-line .word-token { background: var(--primary); box-shadow: 0 3px 0 var(--primary-dark); }

.letter-row {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  padding: 16px;

  background: #fff8e0;

  border-radius: 16px;

  margin: 12px 0;

  font-size: 1.6em;

  font-weight: bold;

}

/* Wort-Trenner Live-Vorschau: klar als "Dein Satz" gelabelt + neutrale Farbe,
   damit der initial zusammengeklebte Satz nicht wie eine rote Fehleranzeige wirkt (B-402). */
.split-preview-wrap {
  margin: 10px 0;
  text-align: center;
  line-height: 1.3;
}
.split-preview-label {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--muted);
}
.split-preview-val {
  font-size: 1.25em;
  font-weight: bold;
  color: var(--text);
}

.letter-cell {

  display: inline-block;

  padding: 6px 2px;

  cursor: pointer;

  position: relative;

  touch-action: none;

  -webkit-user-select: none;

  user-select: none;

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;

}

.letter-cell::after {

  content: "";

  display: inline-block;

  width: 4px;

  height: 30px;

  background: transparent;

  vertical-align: middle;

  margin-left: 2px;

  border-radius: 2px;

  transition: background 0.15s;

}

.letter-cell.has-space::after {

  background: var(--secondary);

  width: 6px;

  cursor: grab;

}

.letter-cell:hover::after { background: rgba(78, 205, 196, 0.4); }

.letter-cell.last::after { display: none; }

.letter-cell.dragging::after { background: var(--primary); width: 8px; cursor: grabbing; }

.letter-cell.drag-target::after { background: rgba(255, 107, 107, 0.6); width: 6px; }

.cat-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin: 8px 0;

}

.cat-zone {

  background: white;

  border: 3px dashed;

  border-radius: 16px;

  padding: 8px 6px;

  min-height: 70px;

  text-align: center;

}

@media (max-width: 600px) {

  .cat-zone { padding: 6px 4px; min-height: 60px; }

  .cat-zone h3 { font-size: 0.95em; margin: 2px 0; }

}

.cat-zone.nomen { border-color: #4ecdc4; background: #e0f7fa; }

.cat-zone.verb { border-color: #ff6b6b; background: #ffe5e5; }

.cat-zone h3 { margin: 4px 0; font-size: 1.1em; }

.cat-zone .items { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

.cat-word { background: white; padding: 6px 10px; border-radius: 8px; font-size: 1em; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* ===== Englisch-Vokabel-Karten ===== */

.english-quest {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  padding: 8px;

}

.english-question-card {

  background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%);

  border-radius: 22px;

  padding: 18px 22px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15), inset 0 -4px 0 rgba(0,0,0,0.08);

  border: 4px solid #ffd166;

  text-align: center;

  position: relative;

  min-width: 280px;

  max-width: 90vw;

  animation: cardpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}

@keyframes cardpop {

  0% { transform: scale(0.6) translateY(-30px); opacity: 0; }

  100% { transform: scale(1) translateY(0); opacity: 1; }

}

.english-question-card .flag-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 1.5em;

  margin-bottom: 4px;

  gap: 8px;

}

.flag-svg {

  width: 38px;

  height: 24px;

  vertical-align: middle;

  border-radius: 3px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.25);

  flex-shrink: 0;

}

.arrow-hint .flag-svg { width: 28px; height: 18px; }

/* In den Welten-Karten erscheint die Flagge an Stelle des großen Emoji-Symbols */

.world-card .emoji .flag-svg { width: 56px; height: 36px; border-radius: 4px; }

.start-ch-world .emoji .flag-svg { width: 40px; height: 26px; border-radius: 3px; }

@media (max-width: 600px) {

  .world-card .emoji .flag-svg { width: 44px; height: 28px; }

}

/* Lautsprecher-Button neben der Frage-Vokabel zum Vorlesen */

.word-row { display: flex; align-items: center; justify-content: center; gap: 10px; }

.speak-btn {

  background: var(--primary);

  color: white;

  border: none;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  font-size: 1.3em;

  cursor: pointer;

  box-shadow: 0 3px 0 var(--primary-dark);

  transition: transform 0.1s;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  line-height: 1;

}

.speak-btn:hover { transform: scale(1.05); }

.speak-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-dark); }

.speak-btn.speaking { animation: pulse-speak 0.6s ease-in-out infinite alternate; }

@keyframes pulse-speak {

  from { box-shadow: 0 3px 0 var(--primary-dark), 0 0 0 0 rgba(76,205,196,0.5); }

  to   { box-shadow: 0 3px 0 var(--primary-dark), 0 0 0 12px rgba(76,205,196,0); }

}

.english-question-card .flag-row .lang-tag {

  font-size: 0.6em;

  background: var(--primary);

  color: white;

  padding: 4px 10px;

  border-radius: 999px;

  font-weight: bold;

  letter-spacing: 1px;

}

.english-question-card .word-emoji {

  font-size: 3.2em;

  line-height: 1;

  margin: 4px 0;

  animation: floathint 2.4s ease-in-out infinite;

}

@keyframes floathint {

  0%, 100% { transform: translateY(0) rotate(-3deg); }

  50% { transform: translateY(-6px) rotate(3deg); }

}

.english-question-card .word-text {

  font-size: clamp(1.6em, 5vw, 2.4em);

  font-weight: 900;

  color: var(--text);

  margin: 6px 0;

  letter-spacing: 1px;

  text-shadow: 2px 2px 0 rgba(255, 209, 102, 0.5);

}

.english-question-card .arrow-hint {

  font-size: 1.2em;

  color: var(--muted);

  margin-top: 4px;

}

.english-answer-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  width: 100%;

  max-width: 480px;

}

.english-card {

  position: relative;

  background: white;

  border-radius: 18px;

  padding: 14px 10px;

  min-height: 88px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 6px 0 rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.1);

  border: 4px solid transparent;

  transition: transform 0.12s, box-shadow 0.12s;

  font-weight: bold;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

  overflow: hidden;

}

.english-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, transparent 55%, rgba(255,255,255,0.5));

  pointer-events: none;

  border-radius: 14px;

}

.english-card:hover:not(:disabled) { transform: translateY(-3px); }

.english-card:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,0.12); }

.english-card .card-emoji { font-size: 2em; line-height: 1; margin-bottom: 4px; }

.english-card .card-word { font-size: clamp(1.3em, 3vw, 1.7em); color: var(--text); text-align: center; line-height: 1.15; word-break: break-word; }

.english-card .card-word-only { font-size: clamp(1.4em, 3.4vw, 1.9em); font-weight: 700; }

.english-card.c0 { background: linear-gradient(135deg, #ffe8e8, #ffb8b8); border-color: #ff6b6b; }

.english-card.c1 { background: linear-gradient(135deg, #e8f5ff, #b8d8ff); border-color: #5fa8d3; }

.english-card.c2 { background: linear-gradient(135deg, #fff8d8, #ffe082); border-color: #ffb800; }

.english-card.c3 { background: linear-gradient(135deg, #e0f7e9, #a8e6c5); border-color: #06d6a0; }

.english-card.correct {

  animation: cardflip-correct 0.6s ease-out forwards;

  background: linear-gradient(135deg, #b6ffcf, #06d6a0) !important;

  border-color: #058666 !important;

  color: white;

}

.english-card.wrong {

  animation: cardshake 0.5s;

  background: linear-gradient(135deg, #ffcccc, #ff6b6b) !important;

  border-color: #e94e4e !important;

  color: white;

}

@keyframes cardflip-correct {

  0% { transform: rotateY(0); }

  50% { transform: rotateY(180deg) scale(1.1); }

  100% { transform: rotateY(360deg) scale(1); }

}

@keyframes cardshake {

  0%, 100% { transform: translateX(0); }

  25% { transform: translateX(-8px) rotate(-3deg); }

  75% { transform: translateX(8px) rotate(3deg); }

}

.english-card:disabled { cursor: default; opacity: 0.85; }

.english-card.dimmed { opacity: 0.4; filter: grayscale(0.3); }

@media (max-width: 600px) {

  /* Auf Handy soll alles ohne Scrollen sichtbar sein: Karte + 4 Antworten + Buttons */

  .english-quest { gap: 8px; padding: 4px; }

  .english-question-card { padding: 10px 14px; min-width: 220px; border-width: 3px; }

  .english-question-card .flag-row { font-size: 1em; margin-bottom: 2px; gap: 4px; }

  .english-question-card .flag-row .lang-tag { font-size: 0.6em; padding: 2px 6px; }

  .english-question-card .word-text { font-size: clamp(1.4em, 6vw, 1.9em); margin: 2px 0; }

  .english-question-card .arrow-hint { font-size: 0.85em; margin-top: 2px; }

  .flag-svg { width: 30px; height: 19px; }

  .arrow-hint .flag-svg { width: 22px; height: 14px; }

  .word-row .speak-btn { width: 40px; height: 40px; font-size: 1.1em; box-shadow: 0 2px 0 var(--primary-dark); } /* beta-340 UI-Audit D: 36->40, besser tippbar fuer Kinder */

  .english-answer-grid { gap: 6px; max-width: 100%; }

  .english-card { min-height: 62px; padding: 8px 6px; border-width: 3px; border-radius: 14px; }

  .english-card .card-emoji { font-size: 1.5em; margin-bottom: 2px; }

  .english-card .card-word { font-size: 1.25em; }

  .english-card .card-word-only { font-size: 1.4em; }

}

@media (max-width: 480px) {

  .english-card { min-height: 56px; padding: 6px 4px; }

  .english-card .card-emoji { font-size: 1.4em; }

  .english-card .card-word { font-size: 1.15em; }

  .english-card .card-word-only { font-size: 1.3em; }

  .english-question-card { padding: 8px 12px; min-width: 200px; }

  .english-question-card .word-emoji { font-size: 2.2em; }

}

/* Wort-Safari Items (Safari-iOS kompatibel ohne inline -webkit Tricks) */

.safari-pile { padding: 6px; gap: 6px; display: flex; flex-direction: column; }

.safari-item {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  background: white;

  padding: 6px 10px;

  border-radius: 12px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.12);

  width: 100%;

  max-width: 480px;

  margin: 0 auto;

}

.safari-item.topped { background: #f0f0f0; opacity: 0.85; cursor: pointer; justify-content: center; }

.safari-item-label {

  font-weight: bold;

  font-size: 1.05em;

  color: var(--text);

  text-align: left;

  flex: 1 1 auto;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

}

.safari-item.topped .safari-item-label { text-align: center; }

.safari-btn-row {

  display: flex;

  gap: 4px;

  flex-shrink: 0;

}

.safari-cat-btn {

  -webkit-appearance: none;

  appearance: none;

  color: white;

  border: none;

  padding: 6px 10px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 0.82em;

  font-weight: bold;

  font-family: inherit;

  min-height: 40px; /* beta-340 UI-Audit D: 32->40, Kinder-Tap-Target */

  touch-action: manipulation;

  white-space: nowrap;

}

.safari-cat-btn.nomen-btn { background: #4ecdc4; }

.safari-cat-btn.verb-btn { background: #ff6b6b; }

.safari-cat-btn.top-btn { background: #888; }

.safari-cat-btn:active { transform: scale(0.95); }

@media (max-width: 480px) {

  .safari-item { padding: 4px 8px; gap: 4px; }

  .safari-item-label { font-size: 0.95em; }

  .safari-cat-btn { font-size: 0.72em; padding: 5px 7px; min-height: 38px; } /* beta-340 UI-Audit D: 30->38 */

}

.croc-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin: 12px 0;

  font-size: 1.6em;

  font-weight: bold;

}

.croc-num {

  background: linear-gradient(135deg, #ffd166, #ff8c42);

  color: white;

  padding: 14px 22px;

  border-radius: 14px;

  font-size: 1.4em;

  box-shadow: 0 4px 8px rgba(0,0,0,0.15);

  min-width: 80px;

  text-align: center;

}

.croc-emoji { font-size: 3em; }

.train-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  flex-wrap: wrap;

  margin: 12px 0;

}

.train-car {

  background: white;

  border: 4px solid var(--secondary);

  border-radius: 14px;

  padding: 12px;

  font-size: 1.6em;

  font-weight: bold;

  min-width: 70px;

  text-align: center;

  box-shadow: 0 4px 0 var(--secondary-dark);

}

.train-car.locked { background: #f0f0f0; color: #aaa; border-color: #ccc; box-shadow: 0 4px 0 #999; }

.train-car.question { background: #fff8e0; border-color: var(--accent); animation: pulse 1.2s infinite; box-shadow: 0 4px 0 #d4a30c; }

.train-input {

  font-size: 1.6em;

  width: 70px;

  padding: 8px;

  border: 4px solid var(--accent);

  border-radius: 14px;

  text-align: center;

  font-family: inherit;

  background: white;

  outline: none;

}

.btn-big {

  background: var(--primary);

  color: white;

  border: none;

  font-size: 1.4em;

  font-weight: bold;

  padding: 14px 32px;

  border-radius: 18px;

  cursor: pointer;

  box-shadow: 0 6px 0 var(--primary-dark);

  font-family: inherit;

  margin: 6px;

}

.btn-big:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--primary-dark); }
.btn-big:disabled {
  opacity: 0.55;
  cursor: wait;
  filter: grayscale(0.3);
  transform: none;
  pointer-events: none;
}

.btn-big.secondary { background: var(--secondary); box-shadow: 0 6px 0 var(--secondary-dark); }

.btn-big.secondary:active { box-shadow: 0 3px 0 var(--secondary-dark); }

/* Achievement Popup */

.achievement {

  position: fixed;

  top: 70px;

  left: 50%;

  transform: translateX(-50%) translateY(-200px);

  background: linear-gradient(135deg, #ffd700, #ff8c42);

  color: white;

  padding: 12px 20px;

  border-radius: 18px;

  font-weight: bold;

  font-size: clamp(0.95em, 3vw, 1.2em);

  box-shadow: 0 10px 30px rgba(0,0,0,0.3);

  z-index: 9999;

  text-align: center;

  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  pointer-events: none;

  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);

  /* Auf Handy nie über den Rand hinaus - mind. 12px Sicherheitsabstand links/rechts */

  max-width: calc(100vw - 24px);

  box-sizing: border-box;

  word-wrap: break-word;

  white-space: normal;

  line-height: 1.3;

}

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

@media (max-width: 600px) {

  /* Topbar kann auf Handy 2 Zeilen werden - daher Toast etwas tiefer ansetzen */

  .achievement { top: 170px; padding: 10px 14px; font-size: 0.95em; z-index: 9999; }

}

.achievement .icon { font-size: 1.6em; display: block; }

/* Floating coin animation */

.fly-coin {

  position: fixed;

  font-size: 2em;

  pointer-events: none;

  z-index: 150;

  animation: flycoin 1.2s ease-out forwards;

}

@keyframes flycoin {

  0% { transform: scale(0.5); opacity: 0; }

  20% { transform: scale(1.4); opacity: 1; }

  100% { transform: translate(var(--tx, 200px), var(--ty, -300px)) scale(0.6); opacity: 0; }

}

/* Buddy character displayed in topbar/games */

.buddy {

  position: fixed;

  bottom: 10px;

  right: 10px;

  font-size: clamp(2em, 6vw, 3em);

  z-index: 80;

  animation: buddybounce 2.5s ease-in-out infinite;

  pointer-events: none;

  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));

}

@keyframes buddybounce {

  0%, 100% { transform: scale(var(--buddy-scale, 1)) translateY(0) rotate(-5deg); }

  50% { transform: scale(var(--buddy-scale, 1)) translateY(-10px) rotate(5deg); }

}

.buddy.cheer {

  animation: buddycheer 0.8s ease-out;

}

@keyframes buddycheer {

  0% { transform: translateY(0) rotate(0) scale(1); }

  20% { transform: translateY(-40px) rotate(-25deg) scale(1.4); }

  40% { transform: translateY(-60px) rotate(25deg) scale(1.5); }

  60% { transform: translateY(-30px) rotate(-15deg) scale(1.3); }

  80% { transform: translateY(-15px) rotate(10deg) scale(1.15); }

  100% { transform: translateY(0) rotate(0) scale(1); }

}

/* Bestenliste / Highscore */

.highscore-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 4px;

  max-width: 700px;

  width: 100%;

  margin: 0 auto;

}

.hs-entry {

  background: white;

  border-radius: 14px;

  padding: 10px 14px;

  display: flex;

  align-items: center;

  gap: 10px;

  box-shadow: 0 3px 0 rgba(0,0,0,0.1);

  border: 3px solid transparent;

  animation: hspop 0.3s ease-out backwards;

}

.hs-entry:nth-child(1) { animation-delay: 0.02s; }

.hs-entry:nth-child(2) { animation-delay: 0.05s; }

.hs-entry:nth-child(3) { animation-delay: 0.08s; }

.hs-entry:nth-child(4) { animation-delay: 0.11s; }

.hs-entry:nth-child(5) { animation-delay: 0.14s; }

.hs-entry:nth-child(n+6) { animation-delay: 0.17s; }

@keyframes hspop {

  from { opacity: 0; transform: translateX(-20px); }

  to { opacity: 1; transform: translateX(0); }

}

.hs-entry.gold { border-color: #ffd700; background: linear-gradient(135deg, #fffbe0, white); }

.hs-entry.silver { border-color: #b0b0b0; background: linear-gradient(135deg, #f3f3f3, white); }

.hs-entry.bronze { border-color: #cd7f32; background: linear-gradient(135deg, #fff0e0, white); }

.hs-entry.me { border-color: var(--primary); background: linear-gradient(135deg, #fff0f0, white); box-shadow: 0 3px 0 var(--primary-dark); }

.challenge-target {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 3px solid #ddd;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: transform 0.1s, border-color 0.15s;
}
.challenge-target:hover { transform: translateY(-2px); border-color: #9c27b0; }
.challenge-target:active { transform: translateY(1px); }
.challenge-target > * { white-space: nowrap; }
.challenge-target > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.incoming-challenge-item {
  background: linear-gradient(135deg, #fff8e0, #ffeebb);
  border: 3px solid var(--accent);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.incoming-challenge-item .info { font-size: 0.95em; }
.incoming-challenge-item .play-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 0 var(--primary-dark);
  font-size: 0.95em;
}
.incoming-challenge-item .play-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-dark); }

.menu-challenge-banner {
  background: linear-gradient(135deg, #fff8e0, #ffd166);
  border: 3px solid #c89200;
  color: #5a3500;
  border-radius: 16px;
  padding: 10px 14px;
  margin: 8px 12px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 0 #c89200;
  animation: pulse 1.5s ease-in-out infinite;
}
.menu-challenge-banner small { font-weight: normal; }

/* A5: Lautstärke-Slider im Shop */
.settings-box {
  background: white;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 4px 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-weight: bold;
}
.settings-box label { white-space: nowrap; }
.settings-box input[type=range] {
  flex: 1;
  accent-color: var(--primary);
  min-width: 0;
}
.settings-box #volume-display {
  min-width: 50px;
  text-align: right;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

/* A2: Tagesziel-Anzeige im Hauptmenü */
.daily-goal {
  background: linear-gradient(135deg, #e8f5ff, #4ecdc4);
  border: 3px solid #38b2aa;
  color: #00504a;
  border-radius: 16px;
  padding: 10px 14px;
  margin: 8px 12px;
  text-align: center;
  font-weight: bold;
  font-size: 0.95em;
  box-shadow: 0 4px 0 #38b2aa;
}
.daily-goal.achieved {
  background: linear-gradient(135deg, #fff8e0, #ffd166);
  border-color: #c89200;
  color: #5a3500;
  box-shadow: 0 4px 0 #c89200;
  cursor: pointer;
  animation: pulse 1.5s ease-in-out infinite;
}
.daily-goal .goal-progress {
  display: inline-block;
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 6px;
  font-weight: bold;
}
.daily-goal small { font-weight: normal; opacity: 0.85; }

/* Auf Mobile: Tagesziel kompakter (entfernt etwa 14px Vertikal-Platz pro Element) */
@media (max-width: 600px) {
  .daily-goal { padding: 5px 10px; margin: 2px 6px 4px; font-size: 0.88em; }
  .menu-challenge-banner { padding: 6px 10px; margin: 2px 6px 4px; font-size: 0.9em; }
  .season-banner { padding: 5px 10px; margin: 2px 6px 4px; font-size: 0.9em; }
}

.hs-wins {
  color: #9c27b0;
  font-weight: bold;
  font-size: 0.9em;
  white-space: nowrap;
}

.hs-trophies {
  color: #c89200;
  font-weight: bold;
  font-size: 0.9em;
  white-space: nowrap;
}

.hs-time {
  color: #2e7d32;
  font-weight: bold;
  font-size: 0.85em;
  white-space: nowrap;
}

.hs-month-wins {
  color: #b8860b;
  font-weight: bold;
  font-size: 0.85em;
  white-space: nowrap;
  background: rgba(255, 215, 0, 0.15);
  padding: 1px 6px;
  border-radius: 8px;
}

.hs-clickable { cursor: pointer; transition: transform 0.1s; }
.hs-clickable:hover { transform: translateY(-2px); }

/* A6: Separator zwischen Top-N und eigenem Platz */
.hs-separator {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 8px 0 4px;
  font-size: 0.9em;
  letter-spacing: 2px;
}

/* D4: Accessibility - sichtbarer Fokus-Rahmen für Tastatur-Navigation */
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
.world-card:focus-visible,
.english-card:focus-visible,
.shop-item:focus-visible,
.hs-entry:focus-visible {
  outline: 3px solid #2196F3;
  outline-offset: 3px;
}

/* Reduzierte Animationen wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* beta-346 (Perf #4): GPU-Compositor-Layer freigeben. will-change haelt
       die Layer auch nach Anim-Stopp -> Dauerlast auf Akku/GPU. Bei reduced-motion
       brauchen wir die Layer nicht. scroll-behavior auch ruhig stellen. */
    will-change: auto !important;
    scroll-behavior: auto !important;
  }
}

/* Stats-Charts (Admin / Lehrer-Portal) */
.stats-chart {
  width: 100%;
  height: auto;
  max-height: 120px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 4px;
}
.stats-hbar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.stats-hbar-row {
  display: grid;
  grid-template-columns: minmax(80px, 35%) 1fr 50px;
  gap: 8px;
  align-items: center;
  font-size: 0.85em;
}
.stats-hbar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-hbar-track {
  height: 14px;
  background: #e2e8f0;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.stats-hbar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.4s ease;
}
.stats-hbar-value {
  text-align: right;
  font-weight: bold;
  color: var(--text);
}
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 8px 0;
}
.stats-summary-card {
  background: linear-gradient(135deg, #fff8e0, #ffe0a8);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
}
.stats-summary-card .num {
  font-size: 1.4em;
  font-weight: bold;
  color: var(--accent-dark);
}
.stats-summary-card .lbl {
  font-size: 0.78em;
  color: var(--muted);
}
.stats-section {
  margin: 10px 0 14px;
  background: white;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 12px;
}
.stats-section h4 {
  margin: 0 0 6px;
  font-size: 1em;
  color: var(--text);
}

/* C6: Maxerl-Avatar (Stick-Figur mit Hut + Brille als Slots)
   Container-Queries: alle Items skalieren proportional zur Avatar-Box. Damit funktioniert
   die Positionierung von Hüten/Brillen/Pets auch, wenn der Avatar via Media-Query
   verkleinert wird (z.B. menu-greeting auf Mobile). */
.maxerl {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  container-type: inline-size;
}
.maxerl svg {
  width: 100%;
  height: 100%;
  display: block;
}
.maxerl-xs { width: 22px; height: 32px; }
.maxerl-sm { width: 28px; height: 40px; }
.maxerl-md { width: 56px; height: 78px; }
.maxerl-lg { width: 100px; height: 140px; }
.maxerl-xl { width: 140px; height: 195px; }

/* Mini-Avatar in der Bestenliste: eigene Spalte RECHTS vom Namen,
   so hoch wie die ganze Zeile. Zeigt den kompletten Maxerl-Avatar mit allen Items. */
.hs-mini-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 56px;
  margin: 0 8px 0 4px;
}
.hs-mini-avatar .maxerl-xs { width: 36px; height: 50px; }
/* Lehrer-Mini-Avatar in der Bestenliste: gleich gross wie normaler Maxerl,
   Tafel rechts daneben in passender Mini-Groesse. */
.hs-mini-avatar:has(.teacher-avatar-wrap) {
  width: auto;
  min-width: 44px;
  max-width: 70px;
}
.hs-mini-avatar .teacher-avatar-wrap { gap: 2px; }
.hs-mini-avatar .teacher-avatar-wrap .maxerl-xs { width: 30px; height: 42px; }
.hs-mini-avatar .teacher-avatar-xs .teacher-board { width: 18px; height: 26px; }
/* Buddies im Mini-Avatar: kleiner skaliert damit sie ins enge Layout passen */
.hs-mini-avatar .maxerl .maxerl-buddy { --buddy-scale: 0.7; }

/* Lehrer-Avatar: Maxerl + Krawatte/Halskette + Stock + Tafel daneben.
   Wrapper ist Flex, Tafel skaliert mit. Figure (Maxerl + Overlays) ist relative
   container für die zwei zusätzlichen SVG-Overlays. */
.teacher-avatar-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  vertical-align: middle;
}
.teacher-avatar-wrap .teacher-figure {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}
.teacher-avatar-wrap .teacher-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.teacher-avatar-wrap .teacher-stick {
  position: absolute;
  right: -20%;
  top: 20%;
  width: 35%;
  height: 70%;
  pointer-events: none;
  z-index: 3;
}
.teacher-avatar-wrap .teacher-book {
  position: absolute;
  left: -8%;
  top: 50%;
  width: 28%;
  height: 32%;
  pointer-events: none;
  z-index: 3;
  transform: rotate(-8deg);
}
.teacher-avatar-wrap .teacher-board {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}
.teacher-avatar-wrap .teacher-board svg {
  width: 100%;
  height: 100%;
  display: block;
}
.teacher-avatar-sm .teacher-board { width: 28px; height: 40px; }
.teacher-avatar-md .teacher-board { width: 56px; height: 80px; }
.teacher-avatar-lg .teacher-board { width: 90px; height: 128px; }
.teacher-avatar-xl .teacher-board { width: 125px; height: 178px; }
@media (max-width: 600px) {
  .menu-greeting .teacher-avatar-lg .teacher-board { width: 44px; height: 62px; }
}

/* Hüte sollen auf dem Kopf sitzen. font-size in cqi (Container-Breite) sorgt dafür,
   dass die Mütze bei jeder Avatar-Größe proportional bleibt. */
.maxerl .maxerl-hat {
  position: absolute;
  left: 50%;
  top: -8%;
  transform: translateX(-50%);
  font-size: 50cqi;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* Heiligenschein schwebt über dem Kopf statt aufzuliegen */
.maxerl .maxerl-hat.maxerl-hat-halo {
  top: -8%;
}
/* Blumenkranz sitzt etwas tiefer (umschließt den Kopf) */
.maxerl .maxerl-hat.maxerl-hat-flower {
  top: 8%;
}

.maxerl .maxerl-acc {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 30cqi;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.maxerl-clickable, .menu-greeting.clickable {
  cursor: pointer;
  transition: transform 0.15s;
}
.menu-greeting.clickable:active { transform: scale(0.98); }
.menu-greeting.clickable:hover { box-shadow: 0 6px 0 rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.15); }

/* Avatar-Modal: sticky OK-Button am unteren Rand, body-Scroll dazwischen */
.avatar-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
/* beta-150 #8: Modal-Inner als Flex-Column damit Sticky-Footer korrekt am Boden klebt.
   Vorher hatte .pdf-modal-inner selbst overflow-y:auto → ganze Karte scrollte → Footer
   konnte durch das Outer-Scrolling aus dem sichtbaren Bereich verschwinden. Jetzt:
   .pdf-modal-inner scrollt NICHT, nur .avatar-editor-scroll-Body scrollt. Footer bleibt fix. */
#pirate-avatar-editor-modal .pdf-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  /* beta-219: war overflow:hidden — da das Element auch .avatar-editor-scroll traegt,
     gewann hidden (hoehere Spezifitaet) und der Inhalt unter "Bart" war abgeschnitten,
     ohne Scroll. Jetzt scrollt das Modal vertikal; der Footer bleibt sticky unten. */
  overflow-y: auto;
}
.avatar-editor-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  margin: 4px 0;
  padding: 0 2px;
}
.avatar-modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #eee;
  padding-top: 8px;
  margin-top: 4px;
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 2;
}

/* Lauf-Animation: leichtes Auf-und-Ab */
.maxerl.running { animation: maxerl-run 0.4s ease-in-out infinite alternate; }
@keyframes maxerl-run {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-6px) rotate(2deg); }
}

/* Avatar-Editor */
.avatar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.avatar-row-label {
  font-weight: bold;
  font-size: 0.95em;
  color: var(--text);
}
.avatar-row-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avatar-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  padding: 0;
  font-size: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.avatar-swatch.active { border-color: var(--primary-dark); transform: scale(1.15); }
.avatar-row-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avatar-option {
  padding: 6px 12px;
  background: white;
  border: 2px solid #ccc;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: bold;
}
.avatar-option.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary-dark);
}

.maxerl .maxerl-pet {
  position: absolute;
  right: -8%;
  bottom: -2%;
  font-size: 35cqi;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  /* Default-Scale fuer die Animationen (kann von Inline-Override ueberschrieben werden) */
  --pet-scale: 1;
  /* Statische (nicht-animierte) Pets nutzen direkt diesen transform */
  transform: scale(var(--pet-scale));
}

/* Pet "am Boden" (Fisch im Aquarium, Katze, Hund): direkt neben dem Avatar unten */
.maxerl .maxerl-pet-ground {
  bottom: -4%;
  right: -22%;
}

/* Pet "fliegt" (Vogel, Schmetterling): neben dem Avatar mit Flatter-Bewegung */
.maxerl .maxerl-pet-bird,
.maxerl .maxerl-pet-butterfly,
.maxerl .maxerl-pet-paperplane {
  bottom: auto;
  top: 8%;
  right: -28%;
  animation: pet-fly 3s ease-in-out infinite;
}
.maxerl .maxerl-pet-butterfly {
  top: 4%;
  right: -25%;
  animation: pet-flutter 2.4s ease-in-out infinite;
}
.maxerl .maxerl-pet-paperplane {
  top: 12%;
  right: -32%;
  animation: paper-glide 4.5s ease-in-out infinite;
}

/* Fußball: schiesst nach rechts-oben, fliegt im Bogen, rollt zum Fuss zurueck und wird wieder geschossen. */
.maxerl .maxerl-pet-soccer {
  bottom: 2%;
  right: -18%;
  top: auto;
  transform-origin: center;
  animation: pet-soccer 2.8s ease-in-out infinite;
}

/* Vogel-Flügel pulsieren */
.maxerl .maxerl-pet-bird .bird-wing-l,
.maxerl .maxerl-pet-bird .bird-wing-r {
  transform-origin: center;
  animation: bird-flap 0.45s ease-in-out infinite;
}
.maxerl .maxerl-pet-bird .bird-wing-r {
  animation-delay: 0.225s;
}

/* Schmetterling-Flügel klappen */
.maxerl .maxerl-pet-butterfly .bf-wing-l {
  transform-origin: 30px 30px;
  animation: bf-flap-l 0.35s ease-in-out infinite;
}
.maxerl .maxerl-pet-butterfly .bf-wing-r {
  transform-origin: 30px 30px;
  animation: bf-flap-r 0.35s ease-in-out infinite;
}

@keyframes pet-fly {
  0%, 100% { transform: translateY(0) translateX(0) scale(var(--pet-scale, 1)); }
  25%      { transform: translateY(-6px) translateX(-3px) scale(var(--pet-scale, 1)); }
  50%      { transform: translateY(-10px) translateX(2px) scale(var(--pet-scale, 1)); }
  75%      { transform: translateY(-4px) translateX(4px) scale(var(--pet-scale, 1)); }
}
@keyframes pet-flutter {
  0%, 100% { transform: translateY(0) translateX(0) rotate(-3deg) scale(var(--pet-scale, 1)); }
  33%      { transform: translateY(-8px) translateX(4px) rotate(2deg) scale(var(--pet-scale, 1)); }
  66%      { transform: translateY(-3px) translateX(-3px) rotate(-2deg) scale(var(--pet-scale, 1)); }
}
@keyframes bird-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}
@keyframes bf-flap-l {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.3); }
}
@keyframes bf-flap-r {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.3); }
}
/* Fußball: liegt am Fuss - kurzer Schuss - Bogen nach rechts-oben - Fall - rollt zurueck.
   Rotiert schnell waehrend des Fluges, langsamer beim Rollen. */
@keyframes pet-soccer {
  0%   { transform: translate(0, 0)       rotate(0deg)     scale(var(--pet-scale, 1)); }
  8%   { transform: translate(0, 0)       rotate(0deg)     scale(var(--pet-scale, 1)); } /* kurz liegen */
  14%  { transform: translate(6px, -3px)  rotate(60deg)    scale(var(--pet-scale, 1)); } /* angeschossen */
  28%  { transform: translate(28px, -32px) rotate(540deg)  scale(var(--pet-scale, 1)); } /* Hoehepunkt rechts-oben */
  44%  { transform: translate(52px, -10px) rotate(900deg)  scale(var(--pet-scale, 1)); } /* Fall */
  56%  { transform: translate(60px, 4px)  rotate(1080deg)  scale(var(--pet-scale, 1)); } /* Aufprall */
  62%  { transform: translate(60px, 1px)  rotate(1100deg)  scale(var(--pet-scale, 1)); } /* Sprung-Bounce */
  72%  { transform: translate(50px, 4px)  rotate(1200deg)  scale(var(--pet-scale, 1)); }
  92%  { transform: translate(10px, 4px)  rotate(1440deg)  scale(var(--pet-scale, 1)); } /* zurueckrollen */
  100% { transform: translate(0, 0)       rotate(1500deg)  scale(var(--pet-scale, 1)); } /* am Fuss */
}

/* Papierflieger: gleitet sanft horizontal und kippt dabei leicht. */
@keyframes paper-glide {
  0%   { transform: translateX(0)    translateY(0)    rotate(-8deg)  scale(var(--pet-scale, 1)); }
  25%  { transform: translateX(-14px) translateY(-4px) rotate(-12deg) scale(var(--pet-scale, 1)); }
  50%  { transform: translateX(-8px)  translateY(-10px) rotate(-4deg)  scale(var(--pet-scale, 1)); }
  75%  { transform: translateX(6px)   translateY(-5px)  rotate(-10deg) scale(var(--pet-scale, 1)); }
  100% { transform: translateX(0)    translateY(0)    rotate(-8deg)  scale(var(--pet-scale, 1)); }
}

/* Equippter Begleiter (Buddy aus Shop) - oben rechts schwebend (default) */
.maxerl .maxerl-buddy {
  position: absolute;
  right: -12%;
  top: -8%;
  font-size: 32cqi;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  animation: buddybounce 3s ease-in-out infinite;
}

/* Schwert-Badge mit Anzahl gewonnener Herausforderungen - unten links am Avatar */
.maxerl .maxerl-wins-badge {
  position: absolute;
  left: -8%;
  bottom: -6%;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: white;
  font-size: 18cqi;
  font-weight: bold;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 14px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}
/* Bei sehr kleinen Avataren (Bestenliste sm) das Badge dezenter */
.maxerl-sm .maxerl-wins-badge { font-size: 22cqi; padding: 2px 5px; border-width: 1.5px; }

/* Award-Badges (Pokal + Medaille) - oben links am Avatar, vertikal gestapelt
   damit sie sich nicht mit Hut (oben mittig) oder Buddy (oben rechts) ueberlappen. */
.maxerl .maxerl-award-badge {
  position: absolute;
  left: -10%;
  font-size: 20cqi;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
  font-weight: bold;
}
.maxerl .maxerl-trophy-badge {
  top: -6%;
  background: linear-gradient(135deg, #fde047, #ca8a04);
  color: #5a3500;
}
.maxerl .maxerl-medal-badge {
  /* Wenn Pokal auch da ist, etwas darunter - sonst ganz oben */
  top: 18%;
  background: linear-gradient(135deg, #fff, #e5e7eb);
  color: #1f2937;
  padding: 1px 4px;
}
/* Wenn KEIN Pokal da, Medaille nach oben schieben */
.maxerl:not(:has(.maxerl-trophy-badge)) .maxerl-medal-badge { top: -6%; }
.maxerl-sm .maxerl-award-badge { font-size: 26cqi; padding: 1px 3px; border-width: 1.5px; }

/* Tier-Buddy (cat, dog, frog, unicorn, dragon): am Boden links statt schwebend */
.maxerl .maxerl-buddy-ground {
  top: auto;
  right: auto;
  bottom: -4%;
  left: -20%;
  animation: buddybounce-ground 2.5s ease-in-out infinite;
}
@keyframes buddybounce-ground {
  0%, 100% { transform: scale(var(--buddy-scale, 1)) translateY(0); }
  50%      { transform: scale(var(--buddy-scale, 1)) translateY(-3px); }
}

/* Hauptmenü-Begrüßung mit großem Maxerl */
.menu-greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 10px;
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 10px 16px;
  /* beta-47: max-width erhoeht damit Lehrer-Greeting (Avatar mit Tafel+Staender ~180px breit)
     mit "Hallo, Kaept'n <Name>!" + Streak + Logbuch-Hinweis komplett in die gelbe Box passt,
     ohne dass der Pirat links aus der Karte rausragt oder der Text wortweise umbricht. */
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow);
}
/* beta-47: Pirate-Greeting-Card (Inhalt der menu-greeting) — Avatar-Wrap darf nicht
   schrumpfen, Text-Container braucht min-width:0 fuer Flex-Shrink, damit weder Avatar
   ausserhalb noch Text wortweise umbricht. */
.pirate-greeting-card > #greeting-avatar-wrap { flex-shrink: 0; }
.pirate-greeting-card > .greeting-text-col { min-width: 0; }
.menu-greeting .greeting-text {
  font-size: 1.15em;
  font-weight: bold;
  color: var(--text);
}
.menu-greeting .greeting-text small {
  display: block;
  font-size: 0.75em;
  font-weight: normal;
  color: var(--muted);
}

@media (max-width: 600px) {
  /* Auf Mobile Begrüßung sehr kompakt halten, damit die Welten direkt sichtbar sind und
     nicht erst gescrollt werden muss. Avatar bleibt klein, weil sonst die em-Werte der
     Hüte/Brillen über den Avatar hinausragen. */
  .menu-greeting { padding: 4px 8px; gap: 8px; margin: 2px auto 6px; }
  .menu-greeting .maxerl-lg { width: 48px; height: 67px; }
  .menu-greeting .greeting-text { font-size: 0.92em; }
  .menu-greeting .greeting-text small { display: none; }
}

/* C6: Avatar-Sektions-Überschrift im Shop */
.shop-section-heading {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: bold;
  margin: 14px 0 4px;
  color: white;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  font-size: 1.2em;
}

/* Pop-Animation für den KI-mehr-Einträge Dialog im Items-Editor. */
@keyframes tgAiDialogPop {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Drehende Sanduhr als Lade-Indikator (Button-Text + Status-Meldungen).
   Die Animation rotiert das Emoji alle 1.5s einmal komplett um die eigene Mitte.
   Wird auf jedes <span class="spin-hourglass"> angewendet. */
.spin-hourglass {
  display: inline-block;
  transform-origin: center center;
  animation: spin-hourglass 1.6s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}
@keyframes spin-hourglass {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(180deg); }
  55%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* Drehende Rakete als Lade-Indikator beim Login.
   Schneller als Sanduhr (0.8s) - signalisiert "es passiert was". */
.spin-rocket {
  display: inline-block;
  transform-origin: center center;
  animation: spin-rocket 0.8s linear infinite;
}
@keyframes spin-rocket {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sub-Überschrift für Kategorien innerhalb des Avatar-Shops (Hüte, Bärte, Begleiter, Schuhe). */
.shop-section-subheading {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: bold;
  margin: 16px 0 4px;
  color: white;
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 1em;
  letter-spacing: 0.5px;
}

.shop-avatar-preview {
  grid-column: 1 / -1;
  background: white;
  border-radius: 18px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-bottom: 6px;
}

.hs-avatar { font-size: 1.1em; margin-right: 4px; }

.hs-parental-icon {
  font-size: 1em;
  background: rgba(0,0,0,0.06);
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin-left: 2px;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}
.hs-parental-icon:hover { background: rgba(0,0,0,0.12); transform: rotate(30deg); }
.hs-parental-icon:active { transform: scale(0.95); }

/* C3: Saison-Themes - aktivieren über body.season-* Klassen */
body.season-xmas { background: linear-gradient(180deg, #1e3a5f 0%, #5a8db3 100%); }
body.season-xmas::before {
  content: "❄ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆";
  position: fixed;
  top: 0; left: 0; right: 0;
  font-size: 1.5em;
  color: white;
  text-align: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
  letter-spacing: 30px;
  animation: snowfall 8s linear infinite;
}
@keyframes snowfall {
  0% { transform: translateY(-30px); }
  100% { transform: translateY(110vh); }
}
body.season-halloween { background: linear-gradient(180deg, #2a0a3a 0%, #ff6b1a 100%); }
body.season-halloween .topbar { background: rgba(255, 180, 80, 0.85); }
body.season-easter { background: linear-gradient(180deg, #fff3e0 0%, #ffb6c1 100%); }
body.season-summer { background: linear-gradient(180deg, #87ceeb 0%, #ffe082 100%); }

/* Saison-Banner im Hauptmenü */
.season-banner {
  background: rgba(255,255,255,0.92);
  border: 3px solid var(--accent);
  border-radius: 16px;
  padding: 8px 14px;
  margin: 8px 12px;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  box-shadow: 0 3px 0 #c89200;
  animation: cardpop 0.5s ease-out;
}

/* B5 Hilfe-Joker entfernt */

/* B2: Lernreport-Zeilen */
.report-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.report-row .icon { font-size: 1.6em; flex-shrink: 0; }
.report-row .info { flex: 1; min-width: 0; }
.report-row .title { font-weight: bold; font-size: 0.95em; }
.report-row .stats { font-size: 0.82em; color: var(--muted); }
.report-row .bar-wrap { flex-shrink: 0; width: 80px; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.report-row .bar { height: 100%; border-radius: 4px; transition: width 0.4s; }
.report-row .bar.good { background: var(--success); }
.report-row .bar.mid { background: var(--accent); }
.report-row .bar.weak { background: var(--error); }
.report-row .pct { font-weight: bold; font-size: 0.9em; min-width: 40px; text-align: right; }

.hs-challenge-icon {
  font-size: 1.2em;
  background: rgba(156, 39, 176, 0.12);
  border: 2px solid rgba(156, 39, 176, 0.3);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin-left: 4px;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}
.hs-challenge-icon:hover { background: rgba(156, 39, 176, 0.25); transform: scale(1.08); }
.hs-challenge-icon:active { transform: scale(0.95); }

.hs-wins.clickable {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 10px;
  transition: background 0.15s, transform 0.1s;
}
.hs-wins.clickable:hover { background: rgba(156, 39, 176, 0.15); transform: scale(1.05); }
.hs-wins.clickable:active { transform: scale(0.95); }

/* Wins-Details */
.win-detail-item {
  background: white;
  border: 3px solid var(--accent);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 3px 0 rgba(200, 146, 0, 0.2);
}
.win-detail-title { font-size: 1em; margin-bottom: 6px; color: var(--text); }
.win-detail-vs { color: var(--muted); font-size: 0.9em; }
.win-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-top: 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e6f7ef, #b6ffcf);
  font-size: 0.95em;
  border: 2px solid #06d6a0;
}
.win-detail-row.loser {
  background: linear-gradient(135deg, #ffecec, #ffd0d0);
  border-color: #ff6b6b;
  opacity: 0.85;
}
.win-detail-row .win-detail-name { font-weight: bold; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-detail-row .win-detail-score { font-weight: bold; }
.win-detail-row .win-detail-time { color: var(--muted); font-size: 0.85em; }

/* Welten-Auswahl im Start-Challenge-Modal */
.start-ch-world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.start-ch-world {
  background: white;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 0 rgba(0,0,0,0.1);
  transition: transform 0.1s;
}
.start-ch-world:hover { transform: translateY(-2px); }
.start-ch-world:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.1); }
.start-ch-world .emoji { font-size: 2.2em; display: block; line-height: 1; }
.start-ch-world .title { font-size: 0.9em; font-weight: bold; margin-top: 4px; }

.hs-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  margin: 8px auto 10px;
  max-width: 700px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.hs-tab {
  flex: 1 1 auto;
  min-width: 70px;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  font-size: 0.95em;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.hs-tab:hover { background: rgba(255,255,255,0.5); }
.hs-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 3px 0 var(--primary-dark);
}

.hs-reset-banner {
  background: linear-gradient(135deg, #fff8e0, #ffeebb);
  border: 3px solid var(--accent);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 0.95em;
  color: #6b4500;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(200, 146, 0, 0.3);
}
.hs-reset-banner small {
  font-weight: normal;
  font-size: 0.85em;
  color: #8a6500;
}

.hs-rank { font-size: 1.2em; font-weight: bold; min-width: 36px; color: var(--muted); text-align: center; }

.hs-entry.gold .hs-rank, .hs-entry.silver .hs-rank, .hs-entry.bronze .hs-rank { color: var(--text); }

.hs-medal { font-size: 1.6em; line-height: 1; }

.hs-buddy { font-size: 1.5em; line-height: 1; flex-shrink: 0; animation: buddybounce 3s ease-in-out infinite; }

/* Spieler-Block: Name oben + Meta-Zeile darunter, nimmt verfügbaren Platz */

.hs-player {

  flex: 1 1 0;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2px;

}

.hs-name {

  font-weight: bold;

  font-size: clamp(0.95em, 2.8vw, 1.1em);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

  line-height: 1.2;

}

.hs-name .hs-buddy-inline { font-size: 1.1em; display: inline-block; margin-left: 6px; vertical-align: middle; animation: buddybounce 3s ease-in-out infinite; }

.hs-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 3px 10px;

  align-items: center;

  font-size: 0.78em;

  line-height: 1.2;

}

.hs-meta .hs-stars,

.hs-meta .hs-trophies,

.hs-meta .hs-wins,

.hs-meta .hs-time { font-size: 1em; }

.hs-score { font-weight: bold; color: var(--primary); font-size: clamp(1em, 3.2vw, 1.3em); white-space: nowrap; flex-shrink: 0; }

.hs-stars { color: #c89200; white-space: nowrap; }

.hs-empty {

  text-align: center;

  color: white;

  padding: 30px 20px;

  font-size: 1.1em;

  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);

}

.hs-setup {

  background: white;

  border-radius: 20px;

  padding: 20px;

  margin: 12px auto;

  max-width: 600px;

  box-shadow: var(--shadow);

  font-size: 0.95em;

  line-height: 1.5;

}

.hs-setup h3 { margin: 6px 0 10px; color: var(--primary); }

.hs-setup code {

  background: #f0f0f0;

  padding: 2px 8px;

  border-radius: 6px;

  font-family: monospace;

  font-size: 0.95em;

}

.hs-setup ol { padding-left: 20px; margin: 8px 0; }

.hs-setup li { margin: 6px 0; }

.hs-setup input {

  width: 100%;

  padding: 8px 12px;

  border: 2px solid #ccc;

  border-radius: 10px;

  font-family: monospace;

  font-size: 0.95em;

  margin: 4px 0 8px;

}

/* PDF-Upload Modal */

.pdf-modal {

  position: fixed;

  /* beta-178 MMM-304: Backdrop laesst die Topbar (Home/Hafentaverne/Avatar-Btns)
     sichtbar — Orientierungsanker fuer den User. top:60px statt inset:0. */
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;

  /* beta-174 M-002 Fix: dunklerer Backdrop (0.55 → 0.72) + z-index hoch
     damit Login-Logo/Piraten-Flagge nicht durchschimmert */
  background: rgba(10, 20, 35, 0.72);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 8000;

  padding: 20px;

  -webkit-backdrop-filter: blur(4px);

  backdrop-filter: blur(4px);

}
/* Auf SC-LOGIN (body NICHT .logged-in) hat keine Topbar → Backdrop ueber den
   gesamten Screen damit das Login-Logo abgedunkelt wird (siehe M-002). */
body:not(.logged-in) .pdf-modal { top: 0; }

.pdf-modal.show { display: flex; }

/* beta-201: M-PHASE-SETTINGS wird als Sub-Modal aus dem M-GLOBAL-OVERRIDE-Editor
   (Phasen-Tab) geoeffnet. Hoeherer z-index, sonst liegt es hinter dem Editor (beide 8000). */
#phase-settings-modal { z-index: 8100; }

.pdf-modal-inner {

  background: white;

  border-radius: 24px;

  padding: 22px;

  max-width: 520px;

  width: 100%;

  max-height: 95vh;

  overflow-y: auto;

  text-align: center;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

  position: relative;

}

/* beta-271 (#F): einheitliches Schliessen-X rechts oben in jeder Maske (rot).
   Per JS angehaengt; klickt den bestehenden Schliessen-Button (cleanup-sicher). */
.modal-x-close {
  position: absolute; top: 10px; right: 10px; z-index: 9;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: #ef4444; color: #fff; font-size: 19px; font-weight: bold; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, transform .12s ease; padding: 0;
}
.modal-x-close:hover { background: #dc2626; transform: scale(1.09); }
.modal-x-close:active { transform: scale(0.96); }
/* beta-340 (UI-Audit B): Speichern-💾 in der Kopfzeile, links neben dem Schliessen-X */
.modal-x-save {
  position: absolute; top: 10px; right: 52px; z-index: 9;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: #22c55e; color: #fff; font-size: 17px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, transform .12s ease; padding: 0;
}
.modal-x-save:hover { background: #16a34a; transform: scale(1.09); }
.modal-x-save:active { transform: scale(0.96); }

/* PDF-Import-Modal: flex-column-Layout, damit das Textarea den verbleibenden Platz nimmt.
   Andere Modals (Item-Position-Editor etc.) bleiben mit normalem scrollbarem Layout. */
#pdf-import-modal .pdf-modal-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#pdf-import-body {
  flex: 1 1 auto;
  min-height: 0;
}
#pdf-import-description {
  min-height: clamp(100px, 25vh, 240px);
}

.pdf-modal-inner h2 { margin: 4px 0 12px; color: var(--primary); font-size: 1.5em; }

.pdf-upload-area {

  border: 4px dashed var(--secondary);

  border-radius: 18px;

  padding: 28px 16px;

  margin: 12px 0;

  cursor: pointer;

  transition: background 0.15s;

  background: #f0fdfc;

}

.pdf-upload-area:hover { background: #e6faf8; }

.pdf-upload-area .icon { font-size: 3.5em; display: block; margin-bottom: 6px; }

.pdf-upload-area input[type="file"] { display: none; }

.pdf-status {

  background: #f8f8ff;

  border-radius: 12px;

  padding: 12px;

  margin: 10px 0;

  font-size: 0.95em;

  text-align: left;

  min-height: 60px;

}

.pdf-status.error { background: #ffe5e5; color: var(--error); }

.pdf-status.success { background: #e0f7e9; color: #058666; }

.pdf-preview-list {

  text-align: left;

  background: white;

  border-radius: 12px;

  padding: 10px;

  margin: 10px 0;

  max-height: 200px;

  overflow-y: auto;

  border: 2px solid #eee;

  font-size: 0.95em;

}

.pdf-preview-list .pair {

  display: flex;

  justify-content: space-between;

  padding: 4px 6px;

  border-bottom: 1px solid #f3f3f3;

}

.pdf-preview-list .pair:last-child { border-bottom: none; }

.pdf-preview-list .pair .l { font-weight: bold; color: var(--text); }

.pdf-preview-list .pair .r { color: var(--secondary-dark); }

.pdf-name-input {

  width: 100%;

  padding: 10px 14px;

  border: 3px solid var(--accent);

  border-radius: 12px;

  font-size: 1.1em;

  font-family: inherit;

  margin: 8px 0;

  outline: none;

  text-align: center;

}

.pdf-btn-row {

  display: flex;

  gap: 8px;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 10px;

}

/* Sticky-Footer: btn-row klebt am unteren Modal-Rand, damit der Schließen-Button auch
   bei langen scrollenden Inhalten (User-Verwaltung, Lehrer-Portal, etc.) sichtbar bleibt.
   Sticky funktioniert innerhalb des pdf-modal-inner Scroll-Containers (overflow-y:auto).
   Avatar-Modal hat eigene Footer-Regeln (avatar-modal-footer) und wird ausgespart. */
.pdf-modal-inner > .pdf-btn-row:last-child:not(.avatar-modal-footer) {
  position: sticky;
  bottom: -22px;
  background: white;
  margin: 10px -22px -22px;
  padding: 10px 22px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  z-index: 5;
}

.custom-game-card {

  position: relative;

}

.custom-game-card .delete-custom {

  position: absolute;

  top: 4px;

  right: 4px;

  background: var(--error);

  color: white;

  border: none;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  font-size: 0.85em;

  cursor: pointer;

  z-index: 5;

  font-weight: bold;

}

.world-card.custom-game-card { border: 3px dashed var(--primary); }

.world-card.has-resume { box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.5), var(--shadow); }

/* Heute mit voller Punktzahl abgeschlossen: visuell ausgegraut, Klick liefert nur einen Hinweis. */
.world-card.completed-today {
  filter: grayscale(0.8) brightness(0.92);
  opacity: 0.7;
}
.world-card.completed-today:hover {
  transform: none;
  cursor: default;
}
.world-card .completed-today-badge {
  margin-top: 4px;
  background: linear-gradient(135deg, #a8e6a3, #66bb6a);
  color: #1b5e20;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
}

/* Kurzer "Nein, geht nicht"-Shake, wenn der User auf eine ausgegraute Welt tippt. */
.world-card.shake-no {
  animation: shake-no 0.4s ease-in-out;
}
@keyframes shake-no {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.world-card .resume-badge {

  margin-top: 4px;

  background: var(--accent);

  color: #5a3500;

  border-radius: 999px;

  padding: 3px 10px;

  font-size: 0.8em;

  font-weight: bold;

  display: inline-block;

  animation: pulse-resume 1.6s ease-in-out infinite;

}

@keyframes pulse-resume {

  0%, 100% { transform: scale(1); }

  50%      { transform: scale(1.05); }

}

/* Hintergrund-Kodierung Geschlecht im Shop und Avatar-Editor:
   hellblau = nur Bub, hellrosa = nur Mädchen, weiß = beide (Default). */
.shop-item.gender-boy,
.avatar-option.gender-boy { background: #dbeafe; }
.shop-item.gender-girl,
.avatar-option.gender-girl { background: #fce7f3; }
.shop-item.gender-boy.equipped,
.shop-item.gender-girl.equipped { background-image: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0)); }

/* Pro-Item Klassen-Picker im Lehrer-Game-Items-Editor: kleine Toggle-Buttons + Alle */
.tg-item-levels { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; padding: 3px 6px; background: #f8fafc; border-radius: 6px; margin-top: 2px; }
.tg-item-levels .tg-lvl-label { font-size: 0.72em; color: #5b21b6; font-weight: 600; margin-right: 2px; }
.tg-item-levels .tg-lvl-btn { width: 24px; height: 22px; border: 1.5px solid #ddd; background: white; color: #666; border-radius: 5px; cursor: pointer; font-size: 0.72em; font-weight: bold; padding: 0; line-height: 1; font-family: inherit; }
.tg-item-levels .tg-lvl-btn.all { width: auto; padding: 0 7px; }
.tg-item-levels .tg-lvl-btn.active { background: #a855f7; color: white; border-color: #7e22ce; }
.tg-item-levels .tg-lvl-btn:hover { transform: translateY(-1px); }

/* Klassen-Badge rechts oben auf jeder Spiel-Karte (Gegenstueck zum Zahnrad links oben) */
.world-card .card-class-pills {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 60%;
  z-index: 2;
}

/* Admin-Zahnrad auf jeder Spiel-Karte (nur sichtbar wenn Admin angemeldet) */
.world-card { position: relative; }
.world-card .admin-gear {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.65);
  color: #ffd966;
  border: 2px solid #ffd966;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.95em;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.world-card .admin-gear:hover { transform: rotate(30deg); }
.world-card .admin-gear:active { transform: scale(0.95); }

/* Admin-Promote-Buttons (Global aufnehmen / Pool aktualisieren / Freigeben / Aus Pool):
   alle in einem Wrapper unten-links auf der Karte, max-width damit der Copy-Button
   unten-rechts (30x30) Platz hat. Mehrere Buttons stapeln sich vertikal. */
.world-card .card-promote-actions {
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: calc(100% - 44px); /* 30px Copy-Btn + 14px Abstand */
  z-index: 5;
}
.world-card .card-promote-btn {
  padding: 4px 8px;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.75em;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-card .card-promote-btn:hover { transform: translateY(-1px); }
.world-card .card-promote-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.world-card .card-promote-btn:disabled { opacity: 0.6; cursor: wait; }

.world-card .copy-card-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(14, 165, 233, 0.92);
  color: white;
  border: 2px solid #0369a1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.9em;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.world-card .copy-card-btn:hover { transform: scale(1.1); }
.world-card .copy-card-btn:active { transform: scale(0.95); }
.world-card .copy-card-btn:disabled { opacity: 0.5; cursor: wait; }

/* beta-30: Klassen-spezifischer Ausblenden/Wieder-einblenden-Button (oben-rechts).
   Hide = 🙈 (orange), Show = 👁️ (grün). Disabled = ausgegraut wenn keine Klasse
   in der Topbar gewählt ist. */
/* beta-85: KI-Variation-Button auf Karten — beta-101: nach links UNTEN verschoben damit
   das Zahnrad (admin-gear) oben-links nicht ueberdeckt wird. */
.world-card .ki-variation-btn {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(168, 85, 247, 0.95);
  color: white;
  border: 2px solid #6b21a8;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.75em;
  font-weight: bold;
  cursor: pointer;
  z-index: 5;
  font-family: inherit;
  box-shadow: 0 2px 0 #581c87;
  transition: transform 0.1s, background 0.15s;
}
.world-card .ki-variation-btn:hover { background: #9333ea; transform: translateY(-1px); }
.world-card .ki-variation-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #581c87; }

.world-card .class-hide-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(234, 88, 12, 0.92);
  color: white;
  border: 2px solid #9a3412;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.95em;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.world-card .class-hide-btn.class-show-btn {
  background: rgba(22, 163, 74, 0.92);
  border-color: #14532d;
}
.world-card .class-hide-btn:hover { transform: scale(1.1); }
.world-card .class-hide-btn:active { transform: scale(0.95); }
.world-card .class-hide-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(120, 120, 120, 0.7);
  border-color: #555;
}
.world-card .admin-gear.class-gear-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* beta-30: Mini-Pille mit aktuellem Klassen-Setting unter den Badges.
   beta-33: Bei langen Settings (z.B. "Zahlenraum 50, Plus+Minus") darf die
   Pille bis zu 2 Zeilen brauchen statt einzeilig + Ellipsis. Border-radius
   kleiner damit der zweizeilige Block nicht eierfoermig wirkt. */
.world-card .class-pill {
  display: inline-block;
  margin: 4px 0 0;
  padding: 4px 10px;
  background: #e0f2fe;
  color: #075985;
  border: 1.5px solid #38bdf8;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  max-width: 100%;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.world-card .class-pill.class-pill-neutral {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #d1d5db;
}
.world-card .class-pill.class-pill-hidden {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
  white-space: normal;
  line-height: 1.4;
}
.world-card .class-show-inline {
  background: transparent;
  border: none;
  color: #15803d;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 700;
  padding: 0 2px;
  font-family: inherit;
}

/* beta-30: Komplett ausgeblendete Karte (für Lehrer ausgegraut, für Schüler
   filtert die enabled:false-Logik die Welt schon vorher raus). */
.world-card.world-card-hidden {
  opacity: 0.55;
  filter: grayscale(0.7);
}
.world-card.world-card-hidden:hover { transform: none; }

/* === beta-44 #012 Visual-Edit-Modus ====================================== */

/* Topbar-Indikator wenn Edit-Mode aktiv */
body.edit-mode-active #topbar {
  box-shadow: inset 0 0 0 3px #06b6d4;
}

/* Edit-/View-/Reset-Buttons in der Topbar */
#edit-mode-btn, #edit-view-btn, #edit-reset-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#edit-mode-btn:hover, #edit-view-btn:hover, #edit-reset-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
#edit-mode-btn:active, #edit-view-btn:active, #edit-reset-btn:active {
  transform: scale(0.95);
}
body.edit-mode-active #edit-mode-btn {
  background: #06b6d4;
  border-color: #0e7490;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}

/* Editierbare Elemente: outline + Hover-Highlight */
body.edit-mode-active [data-edit-key] {
  outline: 2px dashed #06b6d4;
  outline-offset: 2px;
  cursor: pointer;
  position: relative;
  transition: outline-color 0.15s, background 0.15s;
}
body.edit-mode-active [data-edit-key]:hover {
  outline: 3px solid #0891b2;
  background: rgba(6, 182, 212, 0.12);
}
body.edit-mode-active [data-edit-key]::after {
  content: "✏️";
  position: absolute;
  top: -10px;
  right: -10px;
  background: #06b6d4;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.85;
}

/* Versteckte Elemente: im Editierbar-Modus dezent sichtbar, im Schueler-
   Sicht-Modus komplett weg. Im normalen (kein Edit-Mode) Modus auch weg. */
body.edit-mode-active:not(.edit-mode-student-view) [data-edit-hidden="true"] {
  display: block !important;
  opacity: 0.32;
  outline: 2px dashed #94a3b8 !important;
  background: rgba(148, 163, 184, 0.15);
}
body.edit-mode-active:not(.edit-mode-student-view) [data-edit-hidden="true"]::before {
  content: "🙈 ausgeblendet";
  position: absolute;
  top: 4px;
  left: 4px;
  background: #475569;
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  z-index: 1001;
  pointer-events: none;
}
body.edit-mode-active.edit-mode-student-view [data-edit-hidden="true"],
body:not(.edit-mode-active) [data-edit-hidden="true"] {
  display: none !important;
}

/* Schueler-Sicht im Edit-Mode: Outlines weg, aber Edit-Mode-Indikator bleibt */
body.edit-mode-active.edit-mode-student-view [data-edit-key] {
  outline: none;
  cursor: inherit;
  background: transparent;
}
body.edit-mode-active.edit-mode-student-view [data-edit-key]::after {
  display: none;
}

/* === Edit-Popover (Inline auf Desktop) === */
.edit-popover {
  position: fixed;
  background: white;
  border: 2px solid #06b6d4;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 10001;
  min-width: 240px;
  max-width: 320px;
  font-family: Georgia, serif;
  font-size: 0.92em;
  color: #1e293b;
}
.edit-popover-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #075985;
  font-size: 0.85em;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0f2fe;
}
.edit-popover-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.edit-popover-actions button {
  padding: 8px 12px;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95em;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
}
.edit-popover-actions button:hover {
  background: #e0f2fe;
  border-color: #06b6d4;
}
.edit-popover-actions button.edit-action-primary {
  background: #06b6d4;
  color: white;
  border-color: #0891b2;
}
.edit-popover-actions button.edit-action-primary:hover {
  background: #0891b2;
}
.edit-popover-actions button.edit-action-reset {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
}
.edit-popover-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e0f2fe;
  padding-top: 6px;
}
.edit-popover-close {
  background: #94a3b8;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
}

/* === Edit-Popover (Bottom-Sheet auf Mobile) === */
@media (max-width: 767px) {
  .edit-popover {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    min-width: 0;
    max-width: none;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border-top-width: 3px;
    padding: 14px 18px 20px;
    max-height: 55vh;
    overflow-y: auto;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
    animation: edit-popover-slide-up 0.22s ease-out;
  }
  .edit-popover-title {
    font-size: 1em;
  }
  .edit-popover-actions button {
    padding: 12px 14px;
    font-size: 1.05em;
  }
}
@keyframes edit-popover-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* beta-41 #007: D&D-Indikatoren fuer Spiele-Karten im Schueleransicht-Modus.
   .game-sortable bekommt cursor:grab + dezenter Hover-Lift. .game-dragging
   zeigt den dragged Element als halbtransparent. .game-drop-after zeigt
   die Ziel-Position mit einem dicken rechten Border. */
.world-card.game-sortable {
  cursor: grab;
  /* beta-62 B-001: touch-action:none damit Pointer-Drag auf iOS nicht in Browser-Scroll umgewandelt wird. */
  touch-action: none;
}
.world-card.game-sortable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.18);
}
.world-card.game-sortable:active {
  cursor: grabbing;
}
.world-card.game-dragging {
  opacity: 0.45;
  outline: 3px dashed #0ea5e9;
}
/* beta-84: deutliche vertikale Drop-Striche links/rechts der Ziel-Karte —
   zeigt klar "kommt davor" oder "kommt dahinter". Position via Pseudo-Element,
   damit es ausserhalb der Karte sichtbar ist. */
.world-card.game-drop-before,
.world-card.game-drop-after {
  position: relative;
}
.world-card.game-drop-before::before,
.world-card.game-drop-after::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 6px;
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(14,165,233,0.85), 0 0 24px rgba(14,165,233,0.45);
  animation: drop-line-pulse 0.6s ease-in-out infinite alternate;
}
.world-card.game-drop-before::before { left: -10px; }
.world-card.game-drop-after::after  { right: -10px; }
@keyframes drop-line-pulse {
  from { opacity: 0.85; }
  to   { opacity: 1; box-shadow: 0 0 18px rgba(14,165,233,1), 0 0 32px rgba(14,165,233,0.6); }
}

/* ===== beta-83: Balkenwaage Layout (2 Modi: Mobile-Stack + Desktop-2-Spalten) ===== */

.bs-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.bs-stage-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.bs-pool-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* Pool-Container Mobile: horizontal flex-wrap (wie zuvor) */
.bs-pool-col [data-edit-key="bs-weight-pool"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Waage-SVG Default-Size (Mobile-Stack) */
.bs-waage-svg {
  display: block;
  margin: 6px auto;
  max-width: 100%;
  height: auto;
  width: min(clamp(220px, 70vw, 320px), 42vh);
  transition: filter 0.3s ease;
}
.bs-waage-svg.bs-waage-size-klein { width: min(clamp(180px, 55vw, 240px), 32vh); }
.bs-waage-svg.bs-waage-size-gross { width: min(clamp(260px, 85vw, 400px), 52vh); }

/* Waage-Balken (rotated g) — beta-83: CSS-Transition fuer smooth Pruef-Animation.
   Wirkt weil refresh() das SVG zwar neu rendert, aber id="bs-waage-svg" gleich
   bleibt — Browser merkt sich Transitions des Wrappers nicht, daher: wir setzen
   transform per setAttribute auf das g-Element (in JS) und nutzen CSS-Transition. */
.bs-waage-beam {
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 180px 90px;
  transform-box: fill-box;
}

/* Erfolg + Misserfolg Visual-Feedback auf Waage */
.bs-waage-svg.bs-correct {
  filter: drop-shadow(0 0 12px #22c55e) drop-shadow(0 0 24px rgba(34,197,94,0.6));
  animation: bs-correct-pulse 0.6s ease-out;
}
.bs-waage-svg.bs-wrong {
  animation: bs-wrong-shake 0.5s ease-in-out;
  filter: drop-shadow(0 0 8px #ef4444);
}
@keyframes bs-correct-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes bs-wrong-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Desktop: 2-Spalten-Layout — Waage links groesser, Pool rechts vertikal */
@media (min-width: 900px) {
  .bs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
  }
  .bs-stage-col { width: 100%; }
  .bs-pool-col {
    background: rgba(245, 230, 199, 0.35);
    border: 1.5px dashed #8B5A2B;
    border-radius: 12px;
    padding: 12px 8px;
  }
  .bs-pool-col [data-edit-key="bs-weight-pool"] {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  /* Desktop: Waage deutlich groesser — Lesbarkeit der Schalen-Boxen ist wichtig */
  .bs-waage-svg {
    width: min(48vw, 540px);
    max-height: 70vh;
  }
  .bs-waage-svg.bs-waage-size-klein { width: min(36vw, 380px); }
  .bs-waage-svg.bs-waage-size-gross { width: min(58vw, 640px); }
}

/* beta-73 L5: Beamer-Modus fuer Gantt-Vollbild — vergroessert Schrift + Elemente
   damit die ganze Klasse am Beamer den Gantt-Chart lesen kann. */
body.gantt-beamer-mode #gantt-fullscreen-modal #gantt-fullscreen-body {
  font-size: 1.4em;
}
body.gantt-beamer-mode #gantt-fullscreen-modal svg text {
  font-size: 14px !important;
  font-weight: bold;
}
body.gantt-beamer-mode #gantt-fullscreen-modal svg {
  min-height: 60vh;
}
body.gantt-beamer-mode #gantt-fullscreen-modal h2,
body.gantt-beamer-mode #gantt-fullscreen-modal h3 {
  font-size: 1.5em;
}

/* beta-30: Wind-Badge in der Topbar/Schatzkarte. Drei Tiers — Frisch/Stark/Sturm.
   Pulsiert dezent damit Schüler den Boost wahrnehmen. */
.wind-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 18px;
  font-size: 0.85em;
  font-weight: 700;
  border: 2px solid;
  animation: wind-badge-pulse 2.4s ease-in-out infinite;
}
.wind-badge.wind-tier-1 {
  background: #ecfeff;
  color: #155e75;
  border-color: #06b6d4;
}
.wind-badge.wind-tier-2 {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #2563eb;
}
.wind-badge.wind-tier-3 {
  background: linear-gradient(135deg, #fef3c7, #fcd34d);
  color: #7c2d12;
  border-color: #d97706;
}
@keyframes wind-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Admin-Editor-Modal */
.admin-row {
  display: flex;
  gap: 6px;
  margin: 6px 0;
  align-items: center;
}
.admin-row input,
.admin-row select {
  flex: 1;
  padding: 6px 8px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 0.95em;
  font-family: inherit;
  min-width: 60px;
  background: white;
}
/* Auf Mobile: Items werden umbrochen, Select nimmt volle Breite, Zahlenfelder
   bleiben in einer zweiten Reihe nebeneinander. Ansonsten wuerden die Eingabe-
   felder zu schmal, um Werte wie "20" anzuzeigen. */
@media (max-width: 600px) {
  .admin-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .admin-row select {
    flex: 1 1 calc(100% - 40px);
  }
  .admin-row input {
    flex: 1 1 calc(33% - 8px);
  }
  .admin-row.admin-header { display: none; }
}
.admin-row button {
  background: var(--error);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.9em;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-list-container {
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 2px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 8px 0;
}
.admin-add-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: bold;
  cursor: pointer;
  margin: 6px 0;
  font-family: inherit;
}

/* Bild-Stil-Auswahl im PDF-Import-Modal: 3 Radio-Pills, sichtbarer Marker bei Auswahl. */
.pdf-style-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 12px;
  background: white;
  border: 2px solid #fbcfe8;
  border-radius: 999px;
  font-size: 0.95em;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.pdf-style-pill:hover { background: #fdf2f8; }
.pdf-style-pill input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #ec4899;
  margin: 0;
}
.pdf-style-pill:has(input[type="radio"]:checked) {
  background: #fce7f3;
  border-color: #ec4899;
  font-weight: bold;
}

.admin-row.admin-header { margin: 2px 0 -2px; gap: 6px; }
.admin-col-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.78em;
  font-weight: bold;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 4px;
  letter-spacing: 0.5px;
}

.admin-list-container code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.95em;
}
#admin-editor-hint code {
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.95em;
  font-weight: bold;
}
#admin-editor-hint { background: #fff8e0; padding: 8px 10px; border-radius: 10px; }

/* beta-177 M-007 Fix: Segmented-Control-Look statt 2-Button-Optik.
   Vorher wirkten die Tabs wie unabhaengige Buttons; jetzt klar als Tab-Gruppe
   mit Container-Background + sichtbar verbundenen Pills. */
.admin-tabs {
  display: flex;
  gap: 2px;
  background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%);
  border: 1.5px solid #c4b5fd;
  border-radius: 12px;
  padding: 4px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}
/* beta-72 L3: Auf Mobile statt mehrzeiligem Wrap → horizontale Scroll-Leiste.
   Spart Vertical Platz, wirkt cleaner. */
@media (max-width: 600px) {
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .admin-tab {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}
.admin-tab {
  flex: 1 1 auto;
  min-width: 80px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  color: var(--text);
}
.admin-tab.active {
  background: var(--primary);
  color: white;
  /* beta-177 M-007: aktiver Tab hat Drop-Shadow + ist visuell hervorgehoben (klares Affordance-Signal) */
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

/* Error Modal */

.error-modal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.55);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 300;

  padding: 20px;

  -webkit-backdrop-filter: blur(2px);

  backdrop-filter: blur(2px);

}

.error-modal.show { display: flex; }

.error-modal-inner {

  background: white;

  border-radius: 28px;

  padding: 28px 24px 24px;

  max-width: 500px;

  width: 100%;

  text-align: center;

  border: 6px solid var(--error);

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

  animation: modalpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}

@keyframes modalpop {

  0% { transform: scale(0.6) translateY(40px); opacity: 0; }

  100% { transform: scale(1) translateY(0); opacity: 1; }

}

.error-modal-character {

  font-size: 4.5em;

  display: block;

  animation: charsad 0.6s;

  margin-bottom: 4px;

}

.error-modal-title {

  font-size: 1.7em;

  font-weight: bold;

  color: var(--error);

  margin: 4px 0 8px;

}

.error-modal-explain {

  font-size: 1.05em;

  color: var(--muted);

  margin: 4px 0;

}

.error-modal-correct {

  font-size: 1.5em;

  font-weight: bold;

  color: #058666;

  margin: 12px 0;

  background: #e6f7ef;

  padding: 14px 18px;

  border-radius: 16px;

  border: 3px solid var(--success);

  word-wrap: break-word;

  white-space: pre-wrap;

  line-height: 1.4;

}

/* User-Antwort (rot eingerahmt) - zeigt was das Kind falsch geschrieben hat */
.error-modal-user-wrap {
  margin: 8px 0 4px;
}
.error-modal-user-label {
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 3px;
}
.error-modal-user {
  font-size: 1.2em;
  font-weight: bold;
  color: #991b1b;
  background: #fee2e2;
  padding: 8px 14px;
  border-radius: 12px;
  border: 2px solid #fca5a5;
  text-decoration: line-through;
  word-wrap: break-word;
  line-height: 1.3;
}

.error-modal-hint {

  font-size: 0.95em;

  color: var(--muted);

  margin: 6px 0 10px;

  font-style: italic;

  display: none;

}

.error-modal-hint.show { display: block; }

/* Silben/Piloten Spiele */

.word-display {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: flex-end;

  gap: 0;

  padding: 30px 12px 50px;

  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);

  border-radius: 20px;

  margin: 12px 0;

  position: relative;

  min-height: 150px;

}

.word-letter {

  font-size: 2.6em;

  font-weight: bold;

  padding: 6px 4px;

  position: relative;

  display: inline-block;

  cursor: pointer;

  border-radius: 8px;

  transition: background 0.15s, transform 0.1s;

  color: var(--text);

}

.word-letter:hover { background: rgba(78, 205, 196, 0.2); }

.word-letter:active { transform: scale(0.92); }

.word-letter.pilot {

  background: linear-gradient(180deg, #fff176, #ffd166);

  color: #5a3500;

  box-shadow: 0 3px 0 #d4a30c;

}

.word-letter.pilot::before {

  content: "✈️";

  position: absolute;

  top: -28px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.7em;

  animation: pilotbounce 0.5s ease-out;

}

@keyframes pilotbounce {

  0% { transform: translateX(-50%) translateY(20px) scale(0); }

  60% { transform: translateX(-50%) translateY(-4px) scale(1.2); }

  100% { transform: translateX(-50%) translateY(0) scale(1); }

}

.word-letter.wrong-pilot {

  background: #ffcccc;

  color: var(--error);

  animation: shake 0.4s;

}

.silben-gap {

  display: inline-block;

  width: 12px;

  height: 50px;

  cursor: pointer;

  vertical-align: middle;

  position: relative;

  touch-action: none; /* Erlaubt Drag-Geste mit Finger ohne Browser-Scrolling */

  user-select: none;

  -webkit-user-select: none;

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;

}

.silben-gap::before {

  content: "";

  position: absolute;

  left: 50%;

  top: 8px;

  bottom: 8px;

  width: 4px;

  background: transparent;

  transform: translateX(-50%);

  border-radius: 2px;

  transition: background 0.2s;

}

.silben-gap:hover::before { background: rgba(78, 205, 196, 0.5); }

.silben-gap.active::before { background: var(--secondary); }

.silben-gap.dragging::before { background: var(--primary); width: 8px; }

.silben-gap.drag-target::before { background: rgba(255, 107, 107, 0.8); width: 10px; }
/* Im Silbenbogen-Spiel: Buchstaben sind keine eigenen "Klick-Ziele". Hover/Active-Effekt
   deaktivieren, sonst sieht es so aus als koennte man Buchstaben selektieren. */
/* beta-324: Silbenbögen-Wort IMMER einzeilig. Ein Umbruch (z.B. "Schwester" auf dem iPhone)
   sieht nicht nur unruhig aus, er macht die Silben-Bögen kaputt (sie werden als eine waagrechte
   Linie vom Start- zum End-Buchstaben gezeichnet, was bei zwei Zeilen nicht mehr stimmt).
   Stattdessen: nicht umbrechen + Schriftgröße per JS (fitSilbenWort) an die Breite anpassen. */
#silben-display { flex-wrap: nowrap; max-width: 100%; }
#silben-display .word-letter:hover { background: transparent; }
#silben-display .word-letter:active { transform: none; background: transparent; }
#silben-display .word-letter {
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.silbe-bogen-container {

  position: absolute;

  bottom: 8px;

  left: 0;

  right: 0;

  height: 24px;

  display: flex;

  justify-content: center;

  align-items: flex-end;

  pointer-events: none;

}

.silbe-bogen {

  position: absolute;

  border: 4px solid var(--secondary);

  border-top: none;

  border-radius: 0 0 100% 100% / 0 0 100% 100%;

  height: 18px;

  top: 0;

  animation: bogengrow 0.4s ease-out;

}

@keyframes bogengrow {

  from { transform: scaleY(0); transform-origin: top; }

  to { transform: scaleY(1); }

}

/* ====== Responsive Breakpoints ====== */

/* Tablet (Hochkant, ca. iPad) */

@media (max-width: 900px) {

  .worlds-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .game-screen { margin: 6px; padding: 12px; }

  .answer-row { gap: 8px; }

}

/* Handy (Standard) */

@media (max-width: 600px) {

  .topbar { padding: 4px 6px; gap: 2px; border-radius: 0 0 14px 14px; }

  .topbar .topbar-row { gap: 4px; }

  .topbar .badge { font-size: 0.8em; padding: 2px 6px; border-width: 2px; gap: 2px; }

  .topbar .badge .icon { font-size: 1em; }

  .topbar .home-btn, .topbar .shop-btn { width: 34px; height: 34px; font-size: 1em; }

  .topbar .topbar-actions { gap: 2px; }

  .topbar .logout-btn-look svg { width: 18px; height: 18px; }
}

/* beta-70 R2+R4+R5: extra-schmale Smartphones (<=380px) — Topbar/Layout/Modal noch kompakter */
@media (max-width: 380px) {
  .topbar { padding: 3px 4px; gap: 1px; }
  .topbar .topbar-badges { gap: 2px; }
  .topbar .badge { font-size: 0.72em; padding: 1px 5px; gap: 1px; border-width: 1.5px; }
  .topbar .badge .icon { font-size: 0.9em; }
  .topbar .home-btn, .topbar .shop-btn { width: 30px; height: 30px; }
  .topbar .topbar-actions { gap: 1px; }
  .topbar .logout-btn-look svg { width: 16px; height: 16px; }
  /* R4: game-screen + question-area noch knapper damit Spiel-Aggregat auf einen Screen passt */
  .game-screen { padding: 6px; margin: 2px; }
  .question-area { padding: 4px; gap: 2px; }
  /* R5: Modals noch enger an Viewport-Hoehe (max 88vh statt 92vh, mehr Luft fuer Topbar) */
  .pdf-modal-inner, .modal-inner, #logbuch-modal .modal-inner, #hafentaverne-modal .modal-inner { max-height: 88vh; }

  /* Menü-Screen: weniger Padding, damit Bestenliste/Welten sofort sichtbar sind. */
  #screen-menu { padding: 4px 6px; }

  .screen { padding: 8px; }

  .game-screen { margin: 4px; padding: 10px; border-radius: 18px; }

  .game-header { margin-bottom: 6px; }

  .worlds-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0; }

  .world-card { padding: 10px 6px; border-radius: 16px; border-width: 3px; }

  .world-card .stars { font-size: 0.9em; letter-spacing: 1px; }

  .progress-row { gap: 4px; margin-bottom: 8px; }

  .progress-dot { height: 8px; }

  .answer-row { gap: 6px; }

  .btn-check { font-size: 1.1em; padding: 10px 20px; }

  .btn-big { font-size: 1.15em; padding: 12px 22px; }

  .num-input { font-size: 1.6em; width: 80px; }

  .feedback { font-size: 2.6em; }

  .result-character { font-size: 5em; }

  .result-title { font-size: 1.5em; }

  .result-stars { font-size: 2.8em; letter-spacing: 4px; }

  .result-stats { font-size: 1em; padding: 12px 16px; }

  .word-letter { font-size: 1.8em; padding: 4px 2px; }

  .word-letter.pilot::before { font-size: 0.5em; top: -22px; }

  .silben-gap { height: 44px; width: 18px; }

  .letter-cell { padding: 12px 5px; }

  .letter-cell::after { height: 36px; width: 5px; margin-left: 3px; }

  .word-display { padding: 24px 8px 40px; min-height: 110px; }

  .croc-num { padding: 10px 14px; font-size: 1.1em; min-width: 60px; }

  .croc-emoji { font-size: 2.2em; }

  .train-car { font-size: 1.2em; padding: 8px; min-width: 50px; }

  .train-input { font-size: 1.2em; width: 56px; padding: 6px; }

  .coin { width: 46px; height: 46px; font-size: 1.1em; border-width: 2px; }

  .bill { width: 70px; height: 40px; font-size: 1em; }

  /* Schatzkiste / Geld-Spiel: Münzen und Scheine größer und lesbarer auf Handy */
  .money-area { gap: 8px; padding: 10px; min-height: 110px; }
  .euro-coin { width: 58px; height: 58px; }
  .euro-coin .center .num { font-size: 1.7em; }
  .euro-coin .center .sym { font-size: 1em; }
  .euro-bill { width: 110px; height: 58px; }
  .euro-bill .big-val { font-size: 2em; }
  .euro-bill .small-val { font-size: 0.95em; }
  /* Frage-Text gross und gut lesbar, weniger White-Space rundherum */
  /* beta-66: reduziert (1.45em → 1.15em) damit das Spiel auf iPhone-Hochformat ohne Scroll passt. */
  .question-hint { font-size: 1.15em; line-height: 1.25; padding: 2px 4px; margin-bottom: 3px; }

  .egg-carton { padding: 4px; gap: 1px; }

  .egg-slot { width: 16px; height: 22px; }

  .egg { width: 13px; height: 18px; }

  .word-token { font-size: 1.05em; padding: 8px 12px; }

  .letter-row { font-size: 1.3em; padding: 12px 6px; }

  .error-modal-inner { padding: 22px 16px 18px; border-width: 4px; }

  .error-modal-character { font-size: 3.5em; }

  .error-modal-title { font-size: 1.4em; }

  .error-modal-correct { font-size: 1.25em; padding: 10px 12px; }

}

/* Sehr kleines Handy */

@media (max-width: 380px) {

  .topbar .badge { font-size: 0.75em; padding: 2px 6px; }

  .topbar .badge .icon { font-size: 0.9em; }

  .topbar .home-btn, .topbar .shop-btn { width: 34px; height: 34px; font-size: 1em; }

  .worlds-grid { gap: 6px; }

  .world-card .desc { min-height: 1.8em; }

  .btn-answer { font-size: 1.1em; padding: 10px 14px; min-width: 60px; }

}

/* Querformat auf Handy: nicht zu hoch werden */

@media (max-height: 500px) and (orientation: landscape) {

  .menu-title { font-size: 1.4em; margin: 4px 0 2px; }

  .menu-subtitle { font-size: 0.85em; margin-bottom: 6px; }

  .world-card { padding: 6px 4px; }

  .world-card .emoji { font-size: 1.8em; }

  .world-card .desc { display: none; }

  .worlds-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }

  .character { font-size: 2.4em; }

  .question-text { font-size: 1.6em; margin: 4px 0; }

  .question-hint { font-size: 1.25em; margin-bottom: 4px; line-height: 1.25; }

  .game-screen { padding: 8px; margin: 3px; }

}

/* ========== Multi-Step-Spiele (Phasen-Indikator + Engine-UI) ========== */
.multistep-phase-indicator {
  display: inline-block;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  color: white;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: bold;
  font-size: 0.85em;
  margin: 2px auto 6px;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
  letter-spacing: 0.5px;
}

/* Phase 1: Satz mit Wörtern + Trennstrich-Buttons dazwischen */
.ms-sentence-row {
  font-size: clamp(1.3em, 4vw, 1.8em);
  margin: 18px 0;
  line-height: 1.8;
  text-align: center;
  font-weight: 500;
}
.ms-token {
  display: inline-block;
  padding: 2px 4px;
  color: var(--text);
}
.ms-splitter {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  color: transparent;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  user-select: none;
  -webkit-user-select: none;
  /* Default: unsichtbar - Kind muss tippen wo es trennen will (wie Wort-Trenner) */
}
.ms-splitter:hover {
  background: rgba(99,102,241,0.1);
  color: rgba(99,102,241,0.5);
}
.ms-splitter.active {
  color: var(--primary);
  background: rgba(99,102,241,0.18);
  transform: scaleY(1.25);
}
.ms-splitter.correct {
  color: #22c55e;
  background: #dcfce7;
}
.ms-splitter.wrong {
  color: #dc2626;
  background: #fee2e2;
  text-decoration: line-through;
}
.ms-splitter.missing {
  color: #dc2626;
  background: #fef3c7;
  animation: ms-pulse 0.8s ease-in-out 3;
}
@keyframes ms-pulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.4); }
}

/* Phase 2: Wörter direkt + Kategorien-Chips. Auto-Gruppen-Visualisierung
   wird via JS (border-radius + margin) gemacht — daher hier nur Basis-Styles. */
.ms-words-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 18px 0;
  font-size: clamp(1.15em, 3.5vw, 1.5em);
  line-height: 1.6;
}
.ms-mw-word {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f8fafc;
  border-color: #cbd5e1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, outline 0.15s;
  user-select: none;
  -webkit-user-select: none;
  margin-right: 4px;
}
.ms-mw-word:hover { transform: translateY(-1px); }
.ms-mw-word.drag-over {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  transform: scale(1.05);
}
/* Backward compat: alte ms-group-Klasse falls noch irgendwo genutzt */
.ms-groups-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }
.ms-group {
  display: inline-block; padding: 10px 18px;
  font-size: clamp(1.15em, 3.5vw, 1.5em); font-weight: 500;
  border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
  cursor: pointer; transition: all 0.15s; user-select: none; -webkit-user-select: none;
}
.ms-group:hover { transform: translateY(-1px); border-color: #94a3b8; }
.ms-group.drag-over { border-style: solid; border-color: #f59e0b; background: #fef3c7; transform: scale(1.05); }

.ms-cats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0;
}
.ms-cat-chip {
  padding: 10px 16px;
  border: 3px solid transparent;
  border-radius: 24px;
  color: white;
  font-weight: bold;
  font-size: 0.95em;
  font-family: inherit;
  cursor: grab;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ms-cat-chip:active { cursor: grabbing; }
.ms-cat-chip.dragging { opacity: 0.5; }
.ms-cat-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
}

/* readTable */
.ms-read-table {
  border-collapse: collapse;
  margin: 14px auto;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-size: 0.95em;
}
.ms-read-table th, .ms-read-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 14px;
  text-align: center;
}
.ms-read-table th {
  background: #f1f5f9;
  font-weight: bold;
  color: #1e293b;
}

/* dragMatch */
.ms-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 500px;
  margin: 14px auto;
}
.ms-match-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-match-item {
  padding: 10px 14px;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-size: 1em;
  font-family: inherit;
  transition: all 0.15s;
  text-align: center;
}
.ms-match-item:hover { transform: translateY(-1px); border-color: #94a3b8; }

/* ========== Schreibheft (iPad-Stift) ========== */
.schreib-target {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
  font-size: clamp(2.4em, 7vw, 3.4em);
  font-weight: 700;
  color: #1e3a8a;
  letter-spacing: 0.05em;
  margin: 6px 0 10px;
}
.schreib-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 4px auto 8px;
  max-width: 640px;
}
.schreib-canvas {
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 640 / 180;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 0 0 2px #e5e7eb;
  background: #fffdf6;
  touch-action: none;
  cursor: crosshair;
}
.schreib-pen-hint {
  font-size: 0.85em;
  color: var(--muted);
  margin: 4px 0 8px;
  transition: color 0.2s;
}
.schreib-pen-hint.flash {
  color: #dc2626;
  font-weight: bold;
  animation: schreib-flash 0.6s ease-out;
}
@keyframes schreib-flash {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.schreib-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.schreib-feedback {
  margin: 6px auto;
  max-width: 640px;
}
.schreib-feedback-ok {
  background: #dcfce7;
  color: #166534;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.1em;
}
.schreib-feedback-err {
  background: #fef3c7;
  color: #92400e;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 500;
  text-align: left;
  font-size: 1.05em;
  line-height: 1.4;
}
.schreib-feedback-head {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 4px;
  text-align: center;
}
.schreib-hint-list {
  margin: 4px 0 0;
  padding: 0 0 0 22px;
  list-style: "👉 ";
}
.schreib-hint-list li { margin: 3px 0; }
.schreib-ki-badge {
  display: inline-block;
  background: #6366f1;
  color: white;
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: bold;
  vertical-align: middle;
}
.schreib-feedback-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 8px 14px;
  border-radius: 12px;
}
.schreib-feedback-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Lehrer-Portal: Schreibheft-Uebersicht */
.schreib-submission {
  display: flex;
  gap: 10px;
  padding: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  align-items: flex-start;
}
.schreib-sub-img-wrap {
  flex: 0 0 140px;
  min-width: 100px;
}
.schreib-sub-img-wrap img {
  width: 100%;
  border-radius: 8px;
  background: #fffdf6;
  display: block;
}
.schreib-no-img {
  padding: 20px 6px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.8em;
}
.schreib-sub-info {
  flex: 1;
  min-width: 0;
}
.schreib-sub-row {
  margin: 2px 0;
}
.schreib-sub-actions {
  margin-top: 6px;
}
.schreib-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: bold;
  margin: 1px 2px;
}
.schreib-badge.ok { background: #dcfce7; color: #166534; }
.schreib-badge.err { background: #fee2e2; color: #991b1b; }
.schreib-badge.pending { background: #fef3c7; color: #92400e; }
@media (max-width: 600px) {
  .schreib-submission { flex-direction: column; }
  .schreib-sub-img-wrap { flex: 0 0 auto; max-width: 100%; }
}

/* Mobile-Layouts: alles auf einen Bildschirm passen (Schatzkiste, Englisch, Eier-Bauernhof) */
@media (max-width: 600px) {
  /* Allgemein: Question-Area enger packen + Frage gross und klar lesbar */
  .question-area { padding: 4px; gap: 4px; }
  .question-hint { font-size: 1.3em; margin-bottom: 4px; padding: 2px 4px; line-height: 1.2; font-weight: 700; }

  /* Schatzkiste: Münzen + Scheine kompakter */
  .money-area { gap: 4px; padding: 6px; min-height: 0; max-height: 38vh; overflow: hidden; }
  .euro-coin { width: 44px; height: 44px; }
  .euro-coin .center .num { font-size: 1.3em; }
  .euro-coin .center .sym { font-size: 0.75em; }
  .euro-bill { width: 80px; height: 44px; }
  .euro-bill .big-val { font-size: 1.4em; }
  .euro-bill .small-val { font-size: 0.7em; }
  /* Compare-Modus mit 2 Geldbeuteln */
  #stack-a, #stack-b { max-height: 22vh; }

  /* Englisch Frage-Karte: noch kompakter */
  .english-question-card { padding: 8px 12px; min-width: 200px; border-width: 3px; }
  .english-question-card .word-text { font-size: clamp(1.3em, 5.5vw, 1.7em); margin: 1px 0; letter-spacing: 0.5px; }
  .english-question-card .arrow-hint { font-size: 0.78em; margin-top: 1px; }
  .english-question-card .flag-row { font-size: 0.9em; margin-bottom: 1px; }
  .english-question-card .flag-row .lang-tag { font-size: 0.55em; padding: 1px 5px; }
  .flag-svg { width: 26px; height: 16px; }

  /* Englisch Satzbau (rocket): word-tokens kompakter */
  .sentence-line { min-height: 40px; padding: 4px; gap: 4px; }
  .word-pile { padding: 4px; gap: 4px; min-height: 40px; }
  .word-token { padding: 6px 10px; font-size: 0.95em; }

  /* Eier-Bauernhof: Inputs + Carton kompakter */
  .egg-carton { padding: 3px; gap: 1px; margin: 2px; }
  .egg-slot { width: 14px; height: 18px; }
  .egg { width: 11px; height: 15px; }
  .num-input { font-size: 1.3em; width: 62px; padding: 6px; }

  /* Numpad noch kleiner für Eier — aber Touch-Target weiterhin ≥44px (beta-70 R3) */
  .numpad { max-width: 200px; gap: 4px; margin: 4px auto 2px; }
  .numpad-key { font-size: 1.05em; padding: 9px 0; min-height: 44px; }

  /* Action-Buttons im Spiel (Antwort hören etc.) auch enger */
  .english-quest { gap: 4px; padding: 2px; }
  .game-screen .btn-check { padding: 7px 14px; font-size: 1em; }
}

/* Sehr klein: noch radikaler */
@media (max-width: 380px) {
  .money-area { max-height: 32vh; }
  .euro-coin { width: 38px; height: 38px; }
  .euro-bill { width: 68px; height: 38px; }
}

/* Sehr große Displays: max-width begrenzt schon, etwas größere Innenabstände */

@media (min-width: 1200px) {

  .worlds-grid { grid-template-columns: repeat(5, 1fr); }

}

/* ========== UI-CODE BADGE ==========
   Globaler Badge am Viewport-Boden links - zeigt immer den aktuellen UI-Code.
   Pro-Element-Badges (.ui-code) sind versteckt - der globale ist immer sichtbar. */
#ui-code-global {
  position: fixed;
  /* beta-98: vertikal an der linken Wand, von unten nach oben lesbar (writing-mode
     vertical-rl + 180deg-Drehung). Spart unten Platz fuer Bug-FAB + Inhalt. */
  bottom: 6px;
  left: 2px;
  font-size: 0.65em;
  color: #555;
  background: rgba(255,255,255,0.85);
  font-family: monospace;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: all;
  padding: 8px 2px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.15);
  z-index: 99998;
  opacity: 0.55;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1.2;
  transition: opacity 0.15s;
  pointer-events: auto;
  max-width: 50vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ui-code-global:hover {
  opacity: 1;
  color: #111;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ui-code { display: none; }  /* Pro-Element-Badges versteckt - globaler reicht */
.ui-code-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #22c55e;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.9em;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.ui-code-toast.show { opacity: 1; }

/* ========== PIRATENINSEL CSS (ab Beta-3) ==========
   Phase 1 Schatzkarte: Insel-Animation, Pergament-Hintergrund.
   Phase 2-6 ergaenzen weitere Klassen.
*/

@keyframes island-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(192,57,43,0.6)); }
}

.island-svg.aktuell {
  animation: island-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

.island-svg.verschwommen {
  filter: blur(2px) grayscale(0.5);
  opacity: 0.5;
}

.island-svg.erreicht {
  filter: brightness(1.12);
}

@media (max-width: 600px) {
  .schatzkarte-info-row { grid-template-columns: 1fr !important; }
}

/* beta-138 B1-Fix: Loading-Skeleton + Empty-State fuer M-SCHATZKARTE Stage.
   sk-loading: pulsierendes Wellen-Muster waehrend fetchBin laeuft.
   sk-empty-state: freundliche Pirat-Illustration wenn Klasse noch ohne Schatzkarte. */
#schatzkarte-svg-wrap.sk-loading::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 60%, #e8d4a8 0 8%, transparent 9%),
    radial-gradient(circle at 55% 55%, #e8d4a8 0 12%, transparent 13%),
    radial-gradient(circle at 80% 70%, #e8d4a8 0 7%, transparent 8%),
    linear-gradient(180deg, #F4E4BC 0%, #ead9af 100%);
  animation: sk-pulse 1.6s ease-in-out infinite;
}
#schatzkarte-svg-wrap.sk-loading::after {
  content: "🗺️";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(36px, 6vw, 56px);
  opacity: 0.35;
  animation: sk-pulse 1.6s ease-in-out infinite;
}
@keyframes sk-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

/* beta-277: lebendige Schatzkarte - Wellen wogen, Voegel ziehen am Horizont durch, Delphine
   springen, das Schiff schaukelt. Klassen werden in renderSchatzkarteSvg ans SVG gesetzt.
   transform-box: view-box -> CSS-translate-Werte sind SVG-user-units (viewBox 0 0 600 400). */
@keyframes skWaveBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
#schatzkarte-svg-wrap .sk-wave { transform-box: fill-box; transform-origin: center; animation: skWaveBob 3.6s ease-in-out infinite; }

@keyframes skBirdDrift {
  0%   { transform: translate(0, 0) scale(0.85); opacity: 0; }
  14%  { opacity: 0.7; }
  50%  { transform: translate(78px, -14px) scale(1); opacity: 0.7; }
  86%  { opacity: 0.55; }
  100% { transform: translate(158px, -6px) scale(0.65); opacity: 0; }
}
#schatzkarte-svg-wrap .sk-bird { transform-box: fill-box; transform-origin: center; animation: skBirdDrift 15s linear infinite; }
#schatzkarte-svg-wrap .sk-bird.b2 { animation-duration: 19s; animation-delay: -8s; }

@keyframes skDolphinJump {
  0%, 80%, 100% { transform: translateY(20px) scaleY(0.3); opacity: 0; }
  86%           { transform: translateY(-7px) scaleY(1);   opacity: 0.92; }
  93%           { transform: translateY(18px) scaleY(0.4); opacity: 0; }
}
#schatzkarte-svg-wrap .sk-dolphin { transform-box: fill-box; transform-origin: center bottom; animation: skDolphinJump 12s ease-in-out infinite; }
#schatzkarte-svg-wrap .sk-dolphin.d2 { animation-duration: 15s; animation-delay: -7s; }

@keyframes skShipRock { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
#schatzkarte-svg-wrap .sk-ship-rock { transform-box: fill-box; transform-origin: center bottom; animation: skShipRock 3.9s ease-in-out infinite; }

/* Nebelschwaden im fog-of-war-Bereich: wabern sanft (Drift + leichtes Pulsieren) */
@keyframes skFogDrift { 0%, 100% { transform: translate(0, 0); opacity: 0.72; } 50% { transform: translate(6px, -3px); opacity: 0.86; } }
#schatzkarte-svg-wrap .sk-fogcloud { transform-box: fill-box; transform-origin: center; animation: skFogDrift 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  #schatzkarte-svg-wrap .sk-wave, #schatzkarte-svg-wrap .sk-bird, #schatzkarte-svg-wrap .sk-dolphin, #schatzkarte-svg-wrap .sk-ship-rock { animation: none; }
}
.sk-empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  color: #5a3220; font-family: Georgia, serif;
}
.sk-empty-state .sk-empty-emoji {
  font-size: clamp(48px, 9vw, 84px);
  margin-bottom: 10px;
  filter: drop-shadow(0 3px 0 rgba(90, 50, 32, 0.18));
}
.sk-empty-state .sk-empty-title {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: bold;
  margin-bottom: 4px;
}
.sk-empty-state .sk-empty-hint {
  font-size: clamp(12px, 1.8vw, 14px);
  color: #7a5230;
  max-width: 80%;
  line-height: 1.35;
}

/* Spin-Animation fuer KI-Generator-Loading-Sanduhr */
@keyframes spin-hg {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}
.spin-hourglass {
  display: inline-block;
  animation: spin-hg 1.4s ease-in-out infinite;
}

/* Locked-Option im Avatar-Editor (Hut/Augenklappe noch nicht gekauft) */
.pae-opt.pae-locked {
  opacity: 0.5;
  background: #E0E0E0;
  border-style: dashed;
  cursor: help;
}
.pae-opt.pae-locked:hover {
  opacity: 0.7;
}

/* Pirateninsel: abgelegte Geldstuecke auf dem Kassentisch (M-BEZAHLEN) -
   SVG-Muenze/-Schein gross darstellen, Wert-Label klein darunter.
   Kein weisser Rahmen, damit die Muenzen wie "echtes" Geld aussehen. */
.gelegt-geld {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  min-width: 48px;
  transition: transform 0.1s;
}
.gelegt-geld:hover { transform: scale(1.05); }
.gelegt-geld:active { transform: scale(0.97); }
.gelegt-geld-svg {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gelegt-geld-svg svg { width: 100%; height: 100%; display: block; }
.gelegt-geld-label {
  font-size: 0.75em;
  font-weight: bold;
  color: #5a3220;
  line-height: 1;
}

/* ========== PIRATENINSEL PHASE 2 CSS (Logbuch + Avatar-Editor, MD 06) ========== */

/* Logbuch-Grid: 3 Spalten (Pirat / Lauf / Geheimnisse) */
.logbuch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.logbuch-col {
  background: #FFF8E7;
  border: 2px solid #8B4513;
  border-radius: 8px;
  padding: 10px;
}

.logbuch-col-header {
  margin: 0 0 8px;
  color: #5a3220;
  font-family: Georgia, serif;
  font-size: 1.05em;
  border-bottom: 1.5px dashed #8B4513;
  padding-bottom: 4px;
}

.streak-big-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: radial-gradient(circle, #F39C12, #C0392B);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 8px rgba(192,57,43,0.4);
}

.streak-number {
  font-size: 2.2em;
  font-weight: bold;
  line-height: 1;
  font-family: Georgia, serif;
}

.streak-label {
  font-size: 0.55em;
  text-align: center;
  padding: 0 4px;
}

/* beta-150 #9: Logbuch-Stats lesbarer fuer 6-7-jaehrige Kinder.
   Vorher 0.85em (~11-12px) → zu klein. Jetzt 1em + groessere Zahlen mit Schwerpunkt. */
.logbuch-comparison {
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1em;
  line-height: 1.5;
  margin-top: 8px;
}
.logbuch-comparison b {
  font-size: 1.15em;
  color: #5a3220;
}

.secret-entry {
  background: white;
  border: 1.5px solid #DAA520;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 0.85em;
}

.secret-entry.locked {
  opacity: 0.4;
  border-style: dashed;
  font-style: italic;
  color: #8B7355;
}

.secret-entry-title {
  font-weight: bold;
  color: #5a3220;
  margin-bottom: 2px;
}

@media (max-width: 700px) {
  .logbuch-grid { grid-template-columns: 1fr; }
}

/* beta-39: M-HAFENTAVERNE Schließen-Button immer sichtbar.
   Inner als flex-column mit overflow:hidden, Content scrollt intern, Footer sticky-bottom. */
#hafentaverne-modal .pdf-modal-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 92vh;
  /* beta-150 #10: vorher nur ~325px breit (Default 520px aber padding/border) → zu eng
     fuer Drag&Drop-Affordanz. Jetzt deutlich breiter, fuellt auf grossen Screens den Platz. */
  max-width: min(780px, 96vw);
  width: 100%;
}
#hafentaverne-modal .hafentaverne-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#hafentaverne-modal .ht-drop-bar { flex: 0 0 auto; }
#hafentaverne-modal .hafentaverne-papagei { flex: 0 0 auto; }
#hafentaverne-modal > .pdf-modal-inner > .pdf-btn-row {
  flex: 0 0 auto;
  /* beta-174 M-004 Fix: vorher 6px → Drop-Bar (Seesack/Wunschzettel) wurde vom
     Schliessen-Button visuell ueberschnitten. 14px schafft klaren Trenner. */
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1.5px solid rgba(139, 69, 19, 0.2);
}

/* beta-38: M-LOGBUCH ohne Outer-Scroll — Modal-Inner als flex-column, Inhalt skaliert sich
   in den verfuegbaren Vertikal-Platz. Nur die Geheimnisse-Liste scrollt intern wenn knapp. */
#logbuch-modal .pdf-modal-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 18px;
  max-height: 92vh;
}
#logbuch-modal h2 {
  margin: 0 0 6px;
  font-size: 1.15em;
}
#logbuch-modal .logbuch-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 0;
}
#logbuch-modal .logbuch-col {
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* beta-32: min-width:0 verhindert dass Avatar-Outer-Wrap mit Tafel-Reserve-Box
     (renderPirateAvatar gibt bei aktiver Tafel ~145% breit) die 1fr-Grid-Spalte
     sprengt und die rechte Geheimnis-Spalte abschneidet. overflow:hidden
     clipped die Tafel-Reserve auf die Spalten-Breite. */
  min-width: 0;
  overflow: hidden;
}
/* beta-25/26: Avatar-Container in der ersten Logbuch-Spalte braucht genug Hoehe,
   damit die Schuhe nicht aus der gelben Box rausragen (Avatar md = 110×154px).
   Kein display:flex — das hat in beta-25 die dritte Spalte (Geheimnisse) rechts
   abgeschnitten; text-align:center vom inline-style reicht zur Zentrierung. */
#logbuch-modal #logbuch-pirate-avatar {
  min-height: 160px;
}
#logbuch-modal .logbuch-col-header {
  font-size: 0.95em;
  margin-bottom: 4px;
}
#logbuch-modal .streak-big-circle {
  width: 70px;
  height: 70px;
}
#logbuch-modal .streak-number { font-size: 1.9em; }
#logbuch-modal .logbuch-comparison { padding: 6px; font-size: 0.8em; margin-top: 6px; }
#logbuch-modal #logbuch-secrets-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  max-height: none !important;  /* override inline style:280px aus index.html */
}
#logbuch-modal .pdf-btn-row {
  margin-top: 8px;
  flex: 0 0 auto;
}

/* Avatar-Editor (M-PIRATE-AVATAR-EDITOR) */
.pae-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.pae-opt {
  padding: 10px 14px;
  border: 2px solid #8B4513;
  border-radius: 6px;
  background: #FFF8E7;
  cursor: pointer;
  font-size: 0.9em;
  /* beta-75 K5: Touch-Target ≥44px (Apple HIG) damit Kinder mit kleinem Daumen treffen */
  min-height: 44px;
  min-width: 44px;
}

.pae-opt.active {
  background: #DAA520;
  color: white;
  border-color: #5a3220;
  font-weight: bold;
}

.pae-color-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.pae-color-swatch {
  width: 44px;
  height: 44px;
  /* beta-159: min-width/min-height + flex-shrink:0 — Touch-Target 44px erzwingen
     auch in flex-Containern (sonst schrumpft swatch bei vielen Owned-Colors) */
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: 2px solid #5a3220;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  /* beta-75 K5: Touch-Target ≥44px */
}

.pae-color-swatch.active {
  border-width: 4px;
  border-color: #DAA520;
}

/* Pirate-Greeting-Card (Hauptmenue) - Hover-Effekt + Print-Schoenheit */
.pirate-greeting-card:hover {
  background: #FFE8B0 !important;
  box-shadow: 0 2px 6px rgba(139,69,19,0.25);
}

/* ========== KLASSENFOTO (beta-49, beta-50 mit Insel-Szenen) ========== */
/* Modal-Stage: pro erreichter Insel ein eigener Szenen-Hintergrund (beta-50).
   Bewusst kein scroll — Layout wächst mit Crew-Größe (1 bis 30+ Avatare).
   .klassenfoto-scene-bg ist die absolute Background-Layer (z-index:0), Avatare
   und Titel liegen darüber (z-index:2). */
/* beta-52: Stage hat fixes Seitenverhaeltnis 5:3 (1000x600 Konvention) damit
   prozentuale Positionen konsistent skalieren. aspect-ratio + max-height verhindert
   dass die Stage in einem grossen Modal zu hoch wird. */
.klassenfoto-stage {
  position: relative;
  background: #1B3F66; /* Fallback falls Szene fehlt */
  border: 4px solid #5a3220;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
  aspect-ratio: 5 / 3;
  width: 100%;
  max-height: 70vh;
}
.klassenfoto-scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.klassenfoto-scene-bg svg { width: 100%; height: 100%; display: block; }
/* beta-259: KI-generierter Foto-Hintergrund (#8) - fuellt die Stage, Avatare liegen drueber */
.klassenfoto-scene-bg .kf-scene-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* beta-38 #011: Title als drag-bares Block-Element analog zu kf-treasure-block.
   Tester kann ihn frei verschieben + per Doppelklick verstecken. Im Foto selbst
   nur reiner Text mit text-shadow fuer Lesbarkeit auf jeder Szene. */
.kf-title-block {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: Georgia, serif;
  color: #5a3220;
  text-shadow:
    0 1px 0 #FFF8E7,
    0 -1px 0 #FFF8E7,
    1px 0 0 #FFF8E7,
    -1px 0 0 #FFF8E7,
    0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 3;
  min-width: 0;
  touch-action: none;
}
.kf-title-block.kf-draggable { pointer-events: auto; }
.kf-title-block .kf-island { font-size: 1.15em; font-weight: bold; }
.kf-title-block .kf-meta { font-size: 0.85em; opacity: 0.85; margin-top: 2px; }
.kf-title-block.kf-title-hidden { display: none; }
/* beta-135: Pose-Variations-System via CSS-Variablen. Kombiniert translate +
   rotate + scale in einer transform-Property, damit Knien (--kf-ty) + Pose-
   Rotation (--kf-rot) + Lehrer-Skala (--kf-scale) sich nicht gegenseitig
   ueberschreiben. Default = neutral, alle Modifier-Klassen schalten nur ihre
   eigene CSS-Variable um. */
.kf-avatar-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  touch-action: none;
  --kf-tx: -50%;
  --kf-ty: -50%;
  --kf-rot: 0deg;
  --kf-scale: 1;
  transform: translate(var(--kf-tx), var(--kf-ty)) rotate(var(--kf-rot)) scale(var(--kf-scale));
}
/* Vordere Reihe kniet — Avatar 12% nach unten verschoben, Beine verschwinden
   optisch hinter dem Boden (klassisches Gruppenfoto-Look). */
.kf-avatar-block.kf-knien { --kf-ty: -38%; }
/* Pose-Rotation r1..r6 — Hash-deterministisch pro Schueler (game.js _klassenfotoPoseForStudent). */
.kf-avatar-block.kf-pose-r1 { --kf-rot: -5deg; }
.kf-avatar-block.kf-pose-r2 { --kf-rot:  3deg; }
.kf-avatar-block.kf-pose-r3 { --kf-rot: -2deg; }
.kf-avatar-block.kf-pose-r4 { --kf-rot:  6deg; }
.kf-avatar-block.kf-pose-r5 { --kf-rot: -4deg; }
.kf-avatar-block.kf-pose-r6 { --kf-rot:  0deg; }
/* Lehrer als Kaeptn — leichte Vergroesserung damit er aus der Reihe heraussticht. */
.kf-avatar-block.kf-teacher-cap { --kf-scale: 1.18; z-index: 5; }
/* Pose-Symbol-Overlay (Saebel, Flagge, Schatz, Winke-Hand …) als kleine Sprechblase
   oben-rechts beim Avatar. Sanftes Wackeln damit es lebendig wirkt. */
.kf-pose-symbol {
  position: absolute;
  top: -6%;
  right: -22%;
  font-size: 22px;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.45));
  pointer-events: none;
  z-index: 6;
  animation: kf-pose-bob 2.6s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes kf-pose-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-3px) rotate(8deg); }
}
/* beta-136: Tafel mit lustigem Spruch — eigener drag-barer Block links neben Lehrer. */
.kf-tafel-block {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  touch-action: none;
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}
/* beta-136: Papagei-Modi. "fliegend" bekommt eine sanfte Float-Animation,
   "schulter" und "staender" sind statisch (Position macht den Unterschied). */
.kf-parrot-block.kf-parrot-mode-fliegend .kf-parrot-fly {
  animation: kf-parrot-fly 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes kf-parrot-fly {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  25%      { transform: translateY(-8px) rotate(3deg); }
  50%      { transform: translateY(-4px) rotate(-2deg); }
  75%      { transform: translateY(-10px) rotate(6deg); }
}
/* beta-136: Namens-Band-Footer mit allen Namen, gruppiert nach Reihe.
   Pergament-Look mit dezenter Border + Schatten, mehrfach zentriert.
   Max-width 96% damit es auch bei vielen Namen ins Foto passt. */
.kf-namesband-block {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 96%;
  min-width: 40%;
  touch-action: none;
  z-index: 4;
  background: rgba(255, 244, 216, 0.96);
  border: 2px solid #5a3220;
  border-radius: 5px;
  padding: 5px 14px;
  font-family: Georgia, serif;
  font-size: 0.84em;
  color: #2c1810;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 3px 8px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.55);
}
.kf-namesband-block .kf-band-row {
  padding: 1px 0;
  word-break: break-word;
}
.kf-namesband-block .kf-band-row + .kf-band-row {
  border-top: 1px dashed rgba(90, 50, 32, 0.35);
  padding-top: 3px;
  margin-top: 2px;
}
.kf-namesband-block .kf-band-label {
  font-weight: bold;
  color: #5a3220;
  margin-right: 4px;
  letter-spacing: 0.4px;
}
.kf-namesband-block .kf-band-teacher {
  color: #5a3220;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: rgba(90, 50, 32, 0.5);
  text-underline-offset: 2px;
}
/* beta-123: classLevel-Farbe als Untertitel-Stripe unter dem Title-Block. Schwach
   sichtbares Banner-Element das per CSS-Variable --kf-classlevel-color eingefärbt wird.
   1.Kl=Lavendel, 2.Kl=Mint, 3.Kl=Gelb, 4.Kl=Korall, 5.Kl=Himmelblau, 6.Kl=Pflaume. */
.kf-title-block[data-kf-classlevel]:not([data-kf-classlevel=""]) .kf-island {
  position: relative;
}
.kf-title-block[data-kf-classlevel]:not([data-kf-classlevel=""]) .kf-island::after {
  content: "";
  display: block;
  margin: 4px auto 0;
  width: 70%;
  height: 4px;
  border-radius: 2px;
  background: var(--kf-classlevel-color, #a78bfa);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* beta-49 #011 Phase 2: Edit-Pencil + Contenteditable-Highlight */
.kf-title-block .kf-title-edit-btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 26px;
  height: 26px;
  border: 2px solid #075985;
  background: #06b6d4;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-shadow: none;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.kf-title-block:hover .kf-title-edit-btn,
.kf-title-block .kf-title-edit-btn:focus { opacity: 1; }
.klassenfoto-stage.kf-tester-active .kf-title-block .kf-title-edit-btn { opacity: 0.7; }
.kf-title-block .kf-title-editing {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  padding: 2px 6px;
  text-shadow: none;
  cursor: text;
  min-width: 60px;
}
/* Im Tester-Modus bleibt der ausgeblendete Titel dezent sichtbar
   (sonst gibt es keine Klickflaeche um ihn wieder einzublenden). */
.klassenfoto-stage.kf-tester-active .kf-title-block.kf-title-hidden {
  display: flex;
  opacity: 0.28;
  outline: 2px dashed #888;
  outline-offset: 4px;
}
/* Tester-Hint beim Hover */
.kf-title-block.kf-draggable:hover::after {
  content: "🖱️ ziehen · Doppelklick = aus";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65em;
  font-weight: normal;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-shadow: none;
  pointer-events: none;
}

/* Legacy beibehalten falls noch referenziert (alte Saved-HTML) — pointer-events
   none damit alte Cached-Renders kein Drag-Blocker mehr sind. */
.klassenfoto-title-overlay {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
}
/* Canvas-Layer fuer absolut-positionierte Avatare */
.klassenfoto-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Einzelner Avatar: absolut positioniert, transform-Origin Mitte unten damit
   sich der Avatar visuell "auf den Boden stellt" wenn x/y gesetzt sind */
.klassenfoto-avatar-cell {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  touch-action: none;
}
/* beta-53: Avatar + Namensschild + Papagei sind separate DOM-Bloecke mit eigener
   Position (Tester kann jeden einzeln verschieben). Alle nutzen das gleiche
   absolute-Positioning-Schema wie .klassenfoto-avatar-cell.
   beta-135: .kf-avatar-block wurde aus dieser collective Regel entfernt — die
   Avatare brauchen kombinierbare transforms via CSS-Variablen (siehe weiter oben). */
.kf-nametag-block, .kf-parrot-block, .kf-treasure-block {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  touch-action: none;
}
.kf-parrot-block { z-index: 3; }
.kf-treasure-block { z-index: 4; }
.kf-draggable { cursor: grab; user-select: none; }
.kf-draggable:active, .kf-dragging { cursor: grabbing; }
.kf-dragging { z-index: 100; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
/* Nummerierung-Badge ueber dem Avatar (Tester-Modus) */
.kf-pos-num {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #C0392B;
  color: white;
  border: 2px solid #5a3220;
  border-radius: 11px;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 0.78em;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
.kf-pos-num.kf-pos-num-teacher { background: #2C3E50; }
/* beta-53: Mini-Vorschau der Insel-Szene als tavern-item-svg im Schaetze-Tab.
   16:10-Format wie die echte Stage, randvoll mit dem Szenen-SVG. */
.tavern-item-svg.kf-preview {
  width: 100% !important;
  height: 80px;
  padding: 0 !important;
  background: transparent !important;
  border: 2px solid #5a3220;
  border-radius: 6px;
  overflow: hidden;
  display: block !important;
}
.tavern-item-svg.kf-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Tester-Toolbar oben im Modal */
.klassenfoto-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #FFF4D8;
  border: 2px dashed #8B4513;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 8px;
  font-family: Georgia, serif;
  font-size: 0.9em;
  color: #5a3220;
}
.klassenfoto-toolbar label { font-weight: bold; }
.klassenfoto-toolbar input[type="number"] {
  width: 70px;
  padding: 3px 6px;
  border: 2px solid #8B4513;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}
/* Legacy klassenfoto-title-bar weiterhin verfuegbar (alte Saved-Renders).
   beta-38 #011: kein gelber Hintergrund mehr, nur reiner Text mit Schatten. */
.klassenfoto-title-bar {
  text-align: center;
  font-family: Georgia, serif;
  color: #5a3220;
  background: transparent;
  border: none;
  padding: 6px 14px;
  margin: 0 auto 12px;
  display: inline-block;
  position: relative;
  z-index: 2;
  text-shadow:
    0 1px 0 #FFF8E7,
    0 -1px 0 #FFF8E7,
    1px 0 0 #FFF8E7,
    -1px 0 0 #FFF8E7,
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.klassenfoto-title-bar .kf-island { font-size: 1.15em; font-weight: bold; }
.klassenfoto-title-bar .kf-meta { font-size: 0.85em; opacity: 0.85; margin-top: 2px; }

/* Schiff-Hintergrund: MAP_SHIP_SVG wird als SVG-img skaliert; die Decks-Avatare
   werden darüber (oder darunter) positioniert. Für simplere Variante: Avatare in
   Reihen auf der Stage, Schiff als dekoratives Element unten. */
.klassenfoto-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.klassenfoto-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
}
.klassenfoto-row.kf-teacher-row {
  margin-bottom: 4px;
}
.klassenfoto-avatar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}
.klassenfoto-name-tag {
  margin-top: 2px;
  background: rgba(244, 228, 188, 0.95);
  border: 1.5px solid #5a3220;
  border-radius: 5px;
  padding: 1px 8px;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 0.85em;
  color: #5a3220;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.klassenfoto-ship-deco {
  margin-top: 12px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.klassenfoto-ship-deco svg { height: 100%; width: auto; max-width: 100%; }
.klassenfoto-waves {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
  color: rgba(255,255,255,0.65);
  font-size: 1.3em;
}

/* Print-CSS: beim Drucken nur das Klassenfoto-Stage zeigen, alles andere weg. */
@media print {
  body * { visibility: hidden !important; }
  #klassenfoto-modal, #klassenfoto-modal * { visibility: visible !important; }
  #klassenfoto-modal { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; background: white !important; padding: 12px !important; }
  #klassenfoto-modal .pdf-modal-inner { box-shadow: none !important; max-width: 100% !important; padding: 0 !important; }
  #klassenfoto-close-btn, #klassenfoto-buttons { display: none !important; }
  .klassenfoto-stage { border: none !important; }
}

/* ========== ENDE KLASSENFOTO (beta-49) ========== */

/* ========== ENDE PIRATENINSEL PHASE 2 CSS ========== */

/* ========== PIRATENINSEL PHASE 3 HAFENTAVERNE CSS (MD 07) ========== */

/* Holzplanken-Hintergrund: vertikale Maserung + horizontale Planken-Trennlinien */
.hafentaverne-bg {
  background-color: #8B4513;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.15) 2px,
      rgba(0,0,0,0.15) 3px
    ),
    repeating-linear-gradient(
      0deg,
      #8B4513,
      #8B4513 40px,
      #6B3410 40px,
      #6B3410 41px
    );
  padding: 12px;
  border-radius: 10px;
}

.hafentaverne-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: #5a3220;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 2px solid #2F1B14;
}

.dublonen-display {
  background: #F4E4BC;
  border: 2px solid #DAA520;
  border-radius: 16px;
  padding: 4px 12px;
  font-weight: bold;
  color: #5a3220;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Georgia, serif;
}

.dublone-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #DAA520;
  background-image: radial-gradient(circle at 35% 35%, #FFE680, #DAA520 60%, #8B6914 100%);
  border-radius: 50%;
  border: 1.5px solid #8B6914;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.hafentaverne-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
}

.hafentaverne-tab {
  flex: 1 1 100px;
  padding: 8px 14px;
  background: #5a3220;
  color: #F4E4BC;
  border: 2px solid #2F1B14;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 0.95em;
  transition: background 0.15s;
}

.hafentaverne-tab:hover {
  background: #6B3410;
}

.hafentaverne-tab.active {
  background: #F4E4BC;
  color: #5a3220;
}

.hafentaverne-content {
  background: #F4E4BC;
  border: 2px solid #2F1B14;
  border-radius: 0 6px 6px 6px;
  /* beta-48: Oberes Padding reduziert damit die erste Item-Reihe in Vorraete/Beutekiste
     ohne Scrollen sichtbar ist (User-Feedback: zu viel Whitespace oben vor den Items). */
  padding: 6px 12px 12px;
  min-height: 320px;
  position: relative;
}

/* beta-48: Sub-Kategorie-Heading im Avatar-Tab — kompakt, mit dezenter Trennlinie,
   damit der User auf einen Blick sieht welche Item-Art folgt (Hüte, Augenklappen,
   Waffen, Begleiter, Farben). Untertitel kursiv und kleiner für Zusatz-Info. */
.ht-cat-heading {
  margin: 8px 0 2px;
  color: #5a3220;
  font-family: Georgia, serif;
  font-size: 1.0em;
  font-weight: bold;
  border-bottom: 1px solid rgba(90, 50, 32, 0.25);
  padding-bottom: 2px;
}
.ht-cat-heading:first-child { margin-top: 2px; }
.ht-cat-sub {
  margin: 2px 0 4px;
  color: #5a3220;
  /* beta-159: 0.78em → 0.92em (=14.7px bei 16px base) — UI-Test-Vorgabe min 14px fuer Kinder */
  font-size: 0.92em;
  font-style: italic;
  opacity: 0.85;
  text-align: center;
}

/* Holzregal-Wand: Maserungs-Hintergrund. Vertikaler Gap groß damit Brett-Kante
   unter jeder Reihe Platz hat. Items "stehen" auf den Brettern. */
.tavern-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* beta-48: Top-Padding reduziert (18→6), damit die erste Reihe Items naeher am
     Tab-Rand sitzt — User braucht sonst zu viel Scroll fuer die erste Reihe. */
  gap: 38px 14px;
  padding: 6px 12px 28px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 92%, rgba(0,0,0,0.25) 100%),
    repeating-linear-gradient(90deg,
      #8B4513 0px,
      #8B4513 22px,
      #6B3410 23px,
      #8B4513 24px,
      #8B4513 46px,
      #5a3220 47px,
      #8B4513 48px),
    #8B4513;
  border-top: 4px solid #5a3220;
  border-bottom: 6px solid #3d2817;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -4px 8px rgba(0,0,0,0.3),
    0 4px 0 #2c1810;
  margin: 10px 0;
  border-radius: 4px;
}

/* Item-Karte: steht auf einem Holzbrett (::after) - Ware oben, Silber-Preisschild unten am Brett */
.tavern-item {
  background: linear-gradient(180deg, #FFF8E7, #F4E4BC);
  border: 2px solid #5a3220;
  border-radius: 8px;
  padding: 10px 6px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  user-select: none;
  /* beta-238: Long-Press-Drag auf iPhone - vertikales Scrollen der Liste bleibt erlaubt (pan-y),
     Halten hebt das Item auf. Callout/Tap-Highlight aus, wie bei den anderen Drag-Flaechen. */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 140px;
  box-shadow:
    0 4px 0 #3d2817,
    0 8px 14px rgba(0,0,0,0.4),
    inset 0 2px 0 rgba(255,255,255,0.5);
}

/* Holzbrett unter der Item-Karte: wirkt als Regalbrett auf dem die Ware steht.
   Daran wird auch das Silber-Preisschild angenagelt (siehe .tavern-item-price). */
.tavern-item::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -14px;
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      #6B3410 0px,
      #6B3410 18px,
      #4A2208 19px,
      #6B3410 20px),
    linear-gradient(180deg, #7B3F11 0%, #4A2208 100%);
  border-radius: 2px 2px 4px 4px;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.5),
    inset 0 2px 1px rgba(255,210,160,0.18),
    inset 0 -2px 2px rgba(0,0,0,0.4);
  z-index: 0;
}

.tavern-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 0 #3d2817,
    0 10px 16px rgba(0,0,0,0.5),
    inset 0 2px 0 rgba(255,255,255,0.5);
}
.tavern-item:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 #3d2817,
    0 4px 6px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.3);
}

.tavern-item.owned {
  background: linear-gradient(180deg, #DCEDC8, #C5E1A5);
  border-color: #558B2F;
  box-shadow:
    0 4px 0 #33691E,
    0 8px 14px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.5);
}

.tavern-item.equipped {
  background: linear-gradient(180deg, #FFECB3, #FFD54F);
  border-color: #E65100;
  box-shadow:
    0 4px 0 #BF360C,
    0 8px 14px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.5),
    0 0 0 3px rgba(255,193,7,0.4);
}

.tavern-item.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.tavern-item.locked:hover {
  transform: none;
  box-shadow:
    0 4px 0 #3d2817,
    0 8px 14px rgba(0,0,0,0.4),
    inset 0 2px 0 rgba(255,255,255,0.5);
}

/* SVG-Bereich: groesserer Pergament-Kreis als Hintergrund fuer die Ware */
.tavern-item-svg {
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 35% 30%, #FFFEF5, #F4E4BC 70%, #D4B894);
  border-radius: 50%;
  border: 1.5px solid #8B4513;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: inset 0 -2px 4px rgba(139,69,19,0.2);
  flex-shrink: 0;
}

.tavern-item-svg svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.tavern-item-name {
  font-size: 0.88em;
  font-weight: bold;
  color: #3d2817;
  line-height: 1.15;
  font-family: Georgia, serif;
  margin: 0 0 2px;
  /* beta-69 K2: lange Namen auf 2 Zeilen begrenzen damit Preisschild nicht verdeckt wird. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.3em;
  word-break: break-word;
  hyphens: auto;
}

/* Silber-Preisschild: am Holzbrett (::after der Karte) angenagelt mit 2 Nieten
   oben links/rechts. Hängt unterhalb der Karte am Brett-Rand. */
.tavern-item-price {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg,
      #F5F7FA 0%,
      #D8DEE5 35%,
      #B0B7C0 70%,
      #8A95A3 100%);
  border: 1px solid #5A6470;
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 0.88em;
  color: #1F2933;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  font-family: Georgia, serif;
  white-space: nowrap;
  z-index: 3;
  box-shadow:
    0 3px 4px rgba(0,0,0,0.5),
    inset 0 1px 1px rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(0,0,0,0.2),
    inset -1px 0 1px rgba(0,0,0,0.12),
    inset 1px 0 1px rgba(255,255,255,0.35);
}
/* Niet links: silberner Glanzkopf mit dunklem Punkt */
.tavern-item-price::before,
.tavern-item-price::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 35% 30%,
    #FFFFFF 0%,
    #D8DEE5 30%,
    #6B7280 70%,
    #2C3440 100%);
  border-radius: 50%;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    inset 0 -1px 1px rgba(0,0,0,0.4);
}
.tavern-item-price::before { left: 4px; }
.tavern-item-price::after { right: 4px; }

.tavern-item-new {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #C0392B;
  color: white;
  font-size: 0.65em;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
  transform: rotate(8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}
/* beta-59: Tester-Edit-Button (Preis-Override) — links oben am Item, dezent */
/* beta-14: Edit-Button war vorher top:2 left:2 (22x22) und hat ~14% der
   Icon-Flaeche oben-links verdeckt → Icons wirkten kleiner. Jetzt rechts-oben
   ueber den Rand hinausragend (negative Offsets), kleiner (18x18). */
.tavern-item-edit {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(123, 63, 143, 0.92);
  color: white;
  border: 1.5px solid #4A1B5C;
  border-radius: 50%;
  font-size: 0.7em;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
}
.tavern-item:hover .tavern-item-edit { opacity: 1; }
.tavern-item-edit:hover { background: #7B3F8F; transform: scale(1.15); }

.hafentaverne-papagei {
  display: flex;
  gap: 6px;
  align-items: center;
  background: rgba(255,248,231,0.92);
  border: 1.5px dashed #8B4513;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
}

.papagei-svg-mini {
  width: 40px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.papagei-svg-mini svg {
  max-width: 100%;
  max-height: 100%;
}

.papagei-speech-bubble {
  flex: 1;
  background: white;
  border: 1.5px solid #5a3220;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.85em;
  color: #2F1B14;
  font-style: italic;
  position: relative;
  min-width: 0;
}

.papagei-speech-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid white;
}

/* ========== Hafentaverne Drag&Drop-Bar (Seesack + Pergament-Rolle) ========== */
.ht-drop-bar {
  display: flex;
  gap: 10px;
  background: linear-gradient(180deg, #5a3220 0%, #3d2817 100%);
  border: 2px solid #2c1810;
  border-radius: 8px;
  padding: 8px;
  margin-top: 10px;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow:
    0 -4px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,210,160,0.18);
}

.ht-cart-target {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #C9A57A 0%, #A88762 100%);
  border: 2px dashed #3d2817;
  border-radius: 8px;
  /* beta-159: 6px 10px → 10px 12px fuer 44px Min-Height (Kinder-Touch-Target) */
  padding: 10px 12px;
  min-height: 44px;
  position: relative;
  min-width: 0;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  cursor: pointer;
}

.ht-cart-target:hover {
  transform: translateY(-1px);
}

.ht-cart-target.drag-over {
  background: linear-gradient(180deg, #FFE082 0%, #FFC107 100%);
  border-color: #C0392B;
  border-style: solid;
  transform: scale(1.03);
  box-shadow: 0 0 14px 2px rgba(255,193,7,0.6);
}

/* beta-69 K4: kurze Drop-Animation damit Kind sofort sieht "etwas ist passiert". */
.ht-cart-target.just-dropped {
  animation: ht-drop-pulse 0.5s ease-out;
}
@keyframes ht-drop-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94, 0.7); }
  40%  { transform: scale(1.08); box-shadow: 0 0 18px 6px rgba(34,197,94, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94, 0); }
}

.ht-cart-svg {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ht-cart-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ht-cart-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #2F1B14;
  font-family: Georgia, serif;
}
.ht-cart-label {
  font-size: 0.78em;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #3d2817;
  line-height: 1;
}
.ht-cart-sum {
  font-size: 0.92em;
  font-weight: bold;
  color: #5a3220;
  line-height: 1;
}

.ht-cart-buy {
  padding: 4px 10px !important;
  font-size: 0.82em !important;
  white-space: nowrap;
}

.ht-cart-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.ht-cart-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #C0392B;
  color: white;
  border: 2px solid white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Pop-up-Toast nach Drop: erscheint kurz mit Bounce-In, verschwindet wieder */
.ht-drop-toast {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  background: linear-gradient(180deg, #FFF8E7 0%, #F4E4BC 100%);
  border: 2px solid #5a3220;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: Georgia, serif;
  font-weight: bold;
  color: #3d2817;
  font-size: 0.95em;
  white-space: nowrap;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.4),
    inset 0 1px 1px rgba(255,255,255,0.5);
  pointer-events: none;
}
.ht-drop-toast.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ========== Kapitaen-Popup (beta-33): Erklaerung der Reise-Mechanik ========== */
.captain-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  width: min(340px, 88vw);
  background: linear-gradient(180deg, #FFF8E7 0%, #F4E4BC 100%);
  border: 3px solid #5a3220;
  border-radius: 14px;
  padding: 12px 14px 14px 14px;
  font-family: Georgia, serif;
  color: #2F1B14;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    0 0 0 4px rgba(218,165,32,0.4),
    inset 0 2px 0 rgba(255,255,255,0.5);
  animation: captainSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* beta-174 M-009 Fix: auf Mobile (<500px) als zentriertes Card-Pattern statt
   Floating-Bottom-Right, weil sonst 50%+ des Screens ueberdeckt sind.
   beta-177 MM-201 Fix: z-index 9500 → 4500 (UNTER pdf-modal=8000) damit Modale
   wie Avatar-Editor/Hafentaverne den Captain-Popup ueberdecken statt darunter
   sichtbar bleiben. */
@media (max-width: 500px) {
  .captain-popup {
    bottom: auto !important;
    right: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(360px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    padding: 14px 16px 14px 16px;
    z-index: 4500;
  }
  /* Backdrop fuer Mobile damit Hintergrund klar abgedunkelt — z-index unter Modal-Backdrop (8000)
     beta-178 MMM-303: 0.5 → 0.85 damit dahinterliegende Modale klar wegabgeschattet sind */
  body.captain-popup-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0.85);
    z-index: 4400;
    pointer-events: none;
  }
  /* Wenn pdf-modal aktiv: Captain-Popup automatisch ausblenden */
  body.modal-open .captain-popup,
  body:has(.pdf-modal.show) .captain-popup { display: none !important; }
}

@keyframes captainSlideIn {
  from { opacity: 0; transform: translateX(60px) scale(0.85); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.captain-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #5a3220;
  background: #FFCDD2;
  color: #5a3220;
  font-size: 1.3em;
  font-weight: bold;
  cursor: pointer;
  line-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.captain-close:hover { background: #EF9A9A; transform: scale(1.08); }

.captain-speech {
  font-size: 0.92em;
  line-height: 1.5;
  color: #3d2817;
  min-height: 80px;
  padding-top: 6px;
}
.captain-speech b { color: #7B1A0F; }

@media (max-width: 480px) {
  .captain-popup {
    bottom: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    padding: 12px 14px 14px 14px;
  }
}

/* Items im Cart oder Wunschzettel werden im Shelf markiert */
.tavern-item.in-cart {
  outline: 3px solid #DAA520;
  outline-offset: -1px;
}
.tavern-item.in-wunschzettel::before {
  content: "📜";
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 1.1em;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
/* beta-139: Multi-Quantity-Badges auf Item-Karten — Seesack (gold) + Wunschzettel (rot) */
.tavern-item .ht-item-qty-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 3;
  background: linear-gradient(180deg, #DAA520 0%, #B8860B 100%);
  color: #fff;
  font-weight: bold;
  font-size: 0.78em;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1.5px solid #5a3220;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
  min-width: 18px;
  text-align: center;
}
.tavern-item .ht-item-wz-badge {
  position: absolute;
  bottom: -8px;
  left: -8px;
  z-index: 3;
  background: linear-gradient(180deg, #c0392b 0%, #962d22 100%);
  color: #fff;
  font-weight: bold;
  font-size: 0.78em;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1.5px solid #5a3220;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
  min-width: 18px;
  text-align: center;
}

/* Farb-Phiole im Avatar-Tab: SVG-Container etwas breiter weil Phiole hoch ist */
.tavern-item.is-color .tavern-item-svg {
  background: radial-gradient(circle at 35% 30%, #FFFEF5, #F4E4BC 70%, #D4B894);
  width: 60px;
  height: 80px;
  border-radius: 8px;
}

/* Drag-Source (Item das gerade gezogen wird) */
.tavern-item.dragging {
  opacity: 0.35;
}

@media (max-width: 600px) {
  .hafentaverne-tab {
    flex: 1 1 80px;
    padding: 6px 8px;
    font-size: 0.85em;
  }
  .hafentaverne-header h2 {
    font-size: 1em !important;
  }
  .dublonen-display {
    padding: 3px 8px;
    font-size: 0.9em;
  }
  .tavern-shelf {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 28px 6px;
  }
  .tavern-item-svg {
    width: 40px;
    height: 40px;
  }
  .tavern-item-name {
    font-size: 0.78em;
  }
  .papagei-svg-mini {
    width: 32px;
    height: 40px;
  }
  .ht-drop-bar {
    flex-direction: column;
    gap: 6px;
    padding: 6px;
  }
  .ht-cart-svg {
    width: 44px;
    height: 44px;
  }
  .ht-cart-target {
    padding: 4px 8px;
  }
}

/* ========== ENDE PIRATENINSEL PHASE 3 HAFENTAVERNE CSS ========== */

/* ========== PIRATENINSEL PHASE 5 KAPITAENSLOGBUCH CSS (MD 10) ========== */

.kapitaen-info-box {
  background: #F4E4BC;
  border-left: 4px solid #8B4513;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.9em;
  color: #5a3220;
  border-radius: 4px;
}

.kapitaen-crew-block {
  background: white;
  border: 2px solid #8B4513;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.kapitaen-crew-title {
  margin: 0 0 10px;
  color: #5a3220;
  font-family: Georgia, serif;
}

.kapitaen-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.kpi-card {
  background: #FFF8E7;
  border: 1.5px solid #8B4513;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.kpi-label {
  font-size: 0.7em;
  color: #8B7355;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-value {
  font-size: 1.6em;
  font-weight: bold;
  color: #5a3220;
  margin: 4px 0;
}

.kpi-sub {
  font-size: 0.8em;
  color: #8B7355;
}

.kapitaen-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}

.status-col {
  background: #FFF8E7;
  border: 2px solid #8B4513;
  border-radius: 8px;
  padding: 10px;
  min-height: 200px;
}

.status-col h4 {
  margin: 0 0 8px;
  color: #5a3220;
  font-family: Georgia, serif;
  border-bottom: 1.5px dashed #8B4513;
  padding-bottom: 4px;
}

.status-verloren { border-color: #F39C12; }
.status-stetig { border-color: #3498DB; }
.status-sturm { border-color: #27AE60; }

.student-chip {
  background: white;
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 0.9em;
}

.chip-detail {
  font-size: 0.8em;
  color: #8B7355;
}

.status-empfehlung {
  background: rgba(255,255,255,0.7);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 8px;
  font-size: 0.85em;
  color: #5a3220;
  text-align: center;
  font-style: italic;
}

.kapitaen-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1.5px dashed #8B4513;
}

@media (max-width: 700px) {
  .kapitaen-status-grid { grid-template-columns: 1fr; }
}

/* ========== ENDE PIRATENINSEL PHASE 5 KAPITAENSLOGBUCH CSS ========== */

/* ========== PIRATENINSEL PHASE 3b BEZAHLMECHANIK CSS (MD 08) ========== */

/* Layout: Zweispaltig (Einkauf links | Geldbeutel rechts), mobil einspaltig. */
.bezahlen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

@media (max-width: 600px) {
  .bezahlen-grid {
    grid-template-columns: 1fr;
  }
}

.bezahlen-col {
  background: #FFF8E7;
  border: 2px solid #8B4513;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}

.bezahlen-summe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1em;
  color: #5a3220;
}

.bezahlen-summe-badge {
  background: #C0392B;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: bold;
  font-size: 0.95em;
}

.bezahlen-aufgabe {
  background: #F4E4BC;
  border-left: 4px solid #DAA520;
  padding: 8px;
  margin-top: 10px;
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1.4;
  color: #5a3220;
}

/* Geldbeutel-Gitter: 4 Spalten, auf schmalen Screens 3. */
#bezahlen-geldbeutel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

@media (max-width: 480px) {
  #bezahlen-geldbeutel {
    grid-template-columns: repeat(3, 1fr);
  }
}

.geld-stack {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 2px;
  text-align: center;
  cursor: grab;
  user-select: none;
  position: relative;
  transition: transform 0.1s ease, filter 0.1s ease;
  touch-action: none;
}

.geld-stack:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

.geld-stack:active {
  transform: translateY(0);
  cursor: grabbing;
}

.geld-stack.dragging {
  opacity: 0.35;
}

.geld-stack-svg {
  width: 100%;
  height: 36px;
  pointer-events: none;
}

.geld-stack-count {
  background: #C0392B;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: bold;
  position: absolute;
  top: -4px;
  right: -4px;
}

.geld-stack[data-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Kassentisch (Dropzone) */
.kasse-dropzone {
  background: linear-gradient(180deg, #F4D58D 0%, #D4A574 100%);
  border: 3px dashed #5a3220;
  border-radius: 8px;
  padding: 12px;
  min-height: 80px;
  text-align: center;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.kasse-dropzone.drag-over {
  background: linear-gradient(180deg, #FFE082 0%, #FFC107 100%);
  border-color: #C0392B;
}

#bezahlen-gelegt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-height: 40px;
}

.gelegt-geld {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: filter 0.15s ease;
}

.gelegt-geld:hover {
  filter: drop-shadow(0 0 4px rgba(192, 57, 43, 0.6));
}

.dropzone-summe {
  margin-top: 6px;
  font-weight: bold;
  font-size: 1.1em;
  color: #5a3220;
}

.dropzone-status {
  margin-top: 4px;
  font-size: 0.9em;
  min-height: 1.2em;
  font-weight: bold;
}

.dropzone-status.correct {
  color: #27AE60;
}

.dropzone-status.over {
  color: #F39C12;
}

.dropzone-status.under {
  color: #C0392B;
}

/* Gesperrt-State im Multi-Cart-Modus: Geldbeutel + Dropzone visuell ausgegraut,
   bis der User die Summe selbst ausgerechnet hat. */
.bezahlen-locked {
  opacity: 0.4;
  filter: grayscale(0.6);
  pointer-events: none;
  position: relative;
}
.bezahlen-locked::after {
  content: "🔒 Erst rechnen";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: bold;
  color: #5a3220;
  background: rgba(244, 228, 188, 0.72);
  border-radius: 8px;
  pointer-events: none;
  font-size: 1.05em;
  /* beta-48: z-index hoeher als die .geld-stack-Muenzen (die haben position:relative
     ohne expliziten z-index und bilden ein eigenes stacking context). Sonst wird der
     "Erst rechnen"-Hinweis hinter den Muenzen versteckt. */
  z-index: 10;
}

/* EMMA-Polly Papagei-Tipp im Bezahl-Modal */
.bezahlen-papagei {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(244, 228, 188, 0.85);
  border: 1.5px dashed #8B4513;
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 8px;
}

.bezahlen-papagei .papagei-speech-bubble {
  flex: 1;
  background: white;
  border: 1.5px solid #8B4513;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.9em;
  color: #5a3220;
  font-style: italic;
}

/* Wunschzettel-Items */
.wz-item {
  background: #FFF8E7;
  border: 2px solid #8B4513;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}

.wz-progress-bar {
  background: #E0E0E0;
  border-radius: 4px;
  overflow: hidden;
  height: 22px;
  margin-top: 6px;
  position: relative;
}

.wz-progress-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.85em;
  font-weight: bold;
  transition: width 0.4s ease;
  white-space: nowrap;
  padding: 0 6px;
  box-sizing: border-box;
  min-width: fit-content;
}

/* Eltern-Portal Sektion: Kaufladen-Stufe */
.parental-section.kaufladen-stufe {
  background: #FFF8E7;
  border-left: 4px solid #8B4513;
}

/* ========== ENDE PIRATENINSEL PHASE 3b BEZAHLMECHANIK CSS ========== */

/* ========== PIRATENINSEL PHASE 4 INSEL-ITEMS-EDITOR CSS (MD 09) ========== */
.island-items-row {
  margin-top: 6px;
  font-size: 0.8em;
  color: #5a3220;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.island-items-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.item-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #DAA520;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: bold;
  white-space: nowrap;
}
.item-pill button {
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: white;
  cursor: pointer;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.9em;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.item-pill button:hover {
  background: rgba(0, 0, 0, 0.4);
}
/* ========== ENDE PIRATENINSEL PHASE 4 INSEL-ITEMS-EDITOR CSS ========== */

/* ========== PIRATENINSEL PHASE 6 FLOTTEN (MD 11) ==========
   Flotte ist eine Wochengruppe (max. 200 Einzelspieler). Phase 1 (Schatzkarte) handelt
   Layout & Modal komplett ueber renderSchatzkarte(null) - hier nur ein paar Helfer-Klassen
   fuer Flotte-spezifische Mini-Elemente.
*/

.flotte-name-badge {
  background: #DAA520;
  color: #2F1B14;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 0.95em;
  font-weight: 600;
  font-family: Georgia, serif;
}

.flotte-progress-box {
  background: #5a3220;
  color: #F4E4BC;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  font-family: Georgia, serif;
}

/* Anonyme Pseudo-Schiffe auf der Flotten-Karte: grau + halb-transparent, damit klar
   wird dass das KEINE realen User-Positionen sind (siehe MD 11 Sektion H). */
.pseudo-ship {
  fill: #A0A0A0;
  opacity: 0.6;
}

/* ========== ENDE PIRATENINSEL PHASE 6 FLOTTEN CSS ========== */


/* =============================================================================
   beta-86: Globaler Mobile-Fit-Override — ALLES soll auf iPhone ohne Scroll
   passen. Aggressive Topbar-Reduktion + Hard-Caps gegen Overflow + dvh fuer
   iOS Safari-Adressbar. Ueberschreibt frueher definierte Mobile-Regeln.
   ========================================================================== */

@media (max-width: 600px) {
  /* Topbar drastisch flacher — war Haupt-Platzfresser auf iPhone */
  .topbar { padding: 3px 6px !important; gap: 2px !important; border-radius: 0 0 12px 12px !important; }
  /* beta-92: clean space-between — links Actions, rechts Badges. flex-wrap:nowrap damit keine 2. Zeile entsteht. */
  .topbar .topbar-row { gap: 4px !important; flex-wrap: nowrap !important; justify-content: space-between !important; }
  .topbar .topbar-actions { gap: 3px !important; flex-shrink: 0; flex-wrap: nowrap; }
  .topbar .topbar-badges { gap: 3px !important; flex-shrink: 0; flex-wrap: nowrap; }
  .topbar .home-btn, .topbar .shop-btn { width: 30px !important; height: 30px !important; font-size: 0.95em !important; padding: 0 !important; }
  .topbar .badge { font-size: 0.72em !important; padding: 2px 5px !important; border-width: 1.5px !important; gap: 1px !important; }
  .topbar .badge .icon { font-size: 0.9em !important; }
  .topbar #lehrer-crew-select { font-size: 0.78em !important; padding: 2px 6px !important; max-width: 130px !important; }
  .topbar .text-pill-btn { padding: 2px 8px !important; font-size: 0.78em !important; }
  /* beta-94: #bug-report-btn aus diesem Mobile-Topbar-Override entfernt — der Button
     ist als FAB unten-links (position:fixed) und gehoert nicht mehr in die Topbar-Spez. */
  .topbar #topbar-help-btn,
  .topbar #sortmode-toggle-btn { width: 28px !important; height: 28px !important; margin-left: 3px !important; font-size: 0.85em !important; }
  .topbar .logout-btn-look svg { width: 16px !important; height: 16px !important; }

  /* Game-Modal nimmt fast den ganzen Screen — keine verschwendete Hoehe */
  .pdf-modal-inner, .modal-inner { max-height: 94vh !important; }
  @supports (height: 100dvh) {
    .pdf-modal-inner, .modal-inner { max-height: 94dvh !important; }
  }

  /* game-screen + question-area extrem knapp */
  .game-screen { padding: 6px !important; margin: 3px !important; border-radius: 14px !important; }
  .game-header { margin-bottom: 4px !important; }
  .question-area {
    padding: 4px !important;
    gap: 2px !important;
    overflow-y: auto !important;  /* Fallback: scrollen wenn doch zu hoch */
    -webkit-overflow-scrolling: touch;
  }

  /* Numpad: kompakter (3-Spalten beibehalten, weniger Padding/Gap) */
  .numpad {
    max-width: 240px !important;
    gap: 4px !important;
    margin: 4px auto 2px !important;
  }
  .numpad-key {
    font-size: 1.1em !important;
    padding: 6px 0 !important;
    min-height: 44px !important;
  }

  /* Hard-Caps gegen Overflow — kein Element darf horizontal aus dem Modal ragen */
  .pdf-modal-inner, .modal-inner { max-width: 96vw !important; overflow-x: hidden; }
  #bs-svg-wrap { max-width: 100% !important; overflow: hidden; }
  .bs-waage-svg { max-width: 100% !important; }
}

/* =============================================================================
   beta-91: Zahnrad-Dropdown-Menue mit Settings + Sound + Logout (statt 3 separate
   Topbar-Buttons). Spart 2 Items in der Topbar fuer einzeiliges Layout.
   ========================================================================== */
.settings-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: white;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: #1f2937;
  transition: background 0.12s;
}
.settings-menu-item:last-child { border-bottom: none; }
.settings-menu-item:hover { background: #f3f4f6; }
.settings-menu-item:active { background: #e5e7eb; }
/* Klick-Indikator beim Hover */
#settings-menu, #teacher-menu, #tm-class-submenu { animation: settings-menu-pop 0.12s ease-out; }
@keyframes settings-menu-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   beta-90: Bug-Report-Button als Floating Action Button (FAB) unten-links —
   IMMER sichtbar/klickbar, egal welches Modal/Screen aktiv ist. Aus der Topbar
   raus damit Topbar kompakter wird.
   ========================================================================== */
#bug-report-btn {
  position: fixed !important;
  /* beta-98: UI-Code-Badge ist jetzt vertikal an der linken Wand, Bug-FAB bleibt unten-links.
     Etwas tiefer + leicht rechts versetzt damit beide klar getrennt sichtbar sind. */
  bottom: 12px !important;
  left: 22px !important;
  z-index: 100000 !important;        /* ueber allen Modals (.pdf-modal hat z-index 1000+) */
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #fb923c !important;
  border: 2.5px solid #c2410c !important;
  color: white !important;
  font-size: 1.25em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 3px 0 #c2410c !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition: transform 0.12s, box-shadow 0.12s;
}
#bug-report-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 5px 0 #c2410c !important;
}
#bug-report-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25), 0 1px 0 #c2410c !important;
}
/* Bug-Button vor Login NICHT anzeigen */
body:not(.logged-in) #bug-report-btn { display: none !important; }

/* Sehr-schmal-Smartphones (<=380px): Topbar-Items noch kleiner */
@media (max-width: 380px) {
  .topbar .home-btn, .topbar .shop-btn { width: 27px !important; height: 27px !important; }
  .topbar #topbar-help-btn,
  .topbar #bug-report-btn,
  .topbar #sortmode-toggle-btn { width: 25px !important; height: 25px !important; }
  .topbar .badge { font-size: 0.68em !important; padding: 1px 4px !important; }
}

/* =============================================================================
   beta-89: Whitespace-Straffung in Question-Area damit Numpad mit 3 Spalten
   trotzdem auf einen Screen passt (auch auf Desktop-Querformat).
   ========================================================================== */
.question-area .answer-row,
.question-area .question-hint { margin-bottom: 4px !important; }
.question-area .num-input { padding: 6px 8px !important; margin: 2px !important; }
.question-area .btn-check { padding: 8px 22px !important; font-size: 1.15em !important; margin: 4px auto !important; }
/* Wenn 2 num-inputs nebeneinander (z.B. Zehner/Einer): kompakter Gap */
.question-area .answer-row { gap: 10px !important; }
/* Multiple-Choice-Antwort-Buttons (math/eggs/money/croc/english) brauchen mehr Abstand
   als die kompakten Numpad-Inputs — sonst Fat-Finger-Risiko auf iPad-Touch (B-401). */
.question-area .answer-row:has(.btn-answer) { gap: 18px !important; }
/* "= ?" oder andere Equation-Indikatoren */
.question-area .equation-indicator,
.question-area > div[style*="font-size: 1.6em"] { margin: 2px 0 !important; }

/* beta-141 Task #5: M-PHASE-SETTINGS Phasen-Uebersicht — horizontaler Strip
   mit allen Phasen als Pillen. Aktive Phase mit Outline + ▼-Marker. */
.ps-phase-overview {
  background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%);
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 2px;
}
.ps-phase-overview-label {
  font-size: 0.85em;
  color: #57534e;
  font-weight: 600;
  margin-bottom: 6px;
}
.ps-phase-overview-label small {
  color: #a8a29e;
  font-weight: normal;
  font-style: italic;
  margin-left: 4px;
}
.ps-phase-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
.ps-phase-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 78px;
  padding: 16px 8px 6px;
  background: var(--ps-fill, #a78bfa);
  color: #fff;
  border: 1.5px solid var(--ps-stroke, #7c3aed);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ps-phase-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
}
.ps-phase-pill.is-active {
  outline: 3px solid #0ea5e9;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #fff inset, 0 4px 8px rgba(14,165,233,0.28);
}
.ps-phase-pill-marker {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  color: #0ea5e9;
  font-size: 1.05em;
  text-shadow: none;
  font-weight: bold;
}
.ps-phase-pill-num {
  position: absolute;
  top: 3px;
  left: 6px;
  font-size: 0.72em;
  opacity: 0.7;
  font-weight: bold;
}
.ps-phase-pill-label {
  font-weight: bold;
  line-height: 1.15;
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-phase-pill-range {
  font-size: 0.85em;
  opacity: 0.92;
  line-height: 1.1;
}

/* beta-162: Animationen für "Pirat dreh dich!" */
.dreh-shake {
  animation: dreh-shake-anim 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes dreh-shake-anim {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.dreh-pulse {
  animation: dreh-pulse-anim 0.6s ease-in-out infinite;
}
@keyframes dreh-pulse-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.dreh-answer {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.3s, border-color 0.3s;
}
.dreh-card rect {
  transition: stroke 0.3s, stroke-width 0.3s, fill 0.3s;
}
.dreh-card:hover rect {
  filter: drop-shadow(0 0 4px #0ea5e9);
}

/* #032: Piraten-Kanone (Vokabel-Schiessspiel) */
.kanone-scene {
  position: relative;
  /* beta-243: dynamisch/bildschirmfuellend (Desktop + iPad), responsive auf allen Aufloesungen */
  /* beta-277: width container-relativ (100%) statt 96vw - im Spiel-Modal war 96vw breiter als
     der Modal-Innenraum -> rechts abgeschnitten am iPhone. box-sizing fuer den 3px-Rand. */
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
  height: clamp(320px, 72vh, 660px);
  margin: 8px auto;
  border: 3px solid #5a3220;
  border-radius: 14px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(180deg, #bce4ff 0%, #dcf0ff 30%, #bfe0f5 42%, #5aa3e0 47%, #2563b8 74%, #1e40af 100%);
  cursor: none;
}
#kanone-timerbar {
  position: absolute; top: 0; left: 0; height: 5px; width: 100%;
  background: #22c55e; z-index: 7; transition: width 0.1s linear;
}
/* beta-296: Prompt-Box laeuft am iPhone nicht mehr in die Munitions-Kugeln (.kanone-lives, rechts
   oben): rechts 84px frei lassen, Text UMBRECHEN statt abschneiden (lange Prompts bleiben lesbar),
   auf Desktop per max-width 600px + margin:auto im freien Bereich zentriert. */
.kanone-prompt {
  position: absolute; top: 10px; left: 10px; right: 84px; margin-left: auto; margin-right: auto;
  max-width: 600px; transform: none;
  background: #ffffff; border: 2px solid #5a3220; border-radius: 10px;
  padding: 5px 12px; font-size: clamp(13px, 2.4vw, 21px); line-height: 1.2; z-index: 12;
  white-space: normal; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.kanone-lives { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 5px; }
/* beta-358: Spritzer-Vorrat als Wassertropfen mit Glanzlicht, verbrauchte ausgegraut */
.kanone-ball {
  width: clamp(16px, 2.8vw, 22px); height: clamp(16px, 2.8vw, 22px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d6f6ff 0%, #06b6d4 45%, #0369a1 100%);
  box-shadow: 0 1px 2px rgba(3,80,140,0.4), inset 0 -1px 2px rgba(2,60,110,0.45); display: inline-block;
}
.kanone-ball.used { background: radial-gradient(circle at 34% 30%, #e5e7eb, #9ca3af 70%); opacity: 0.3; box-shadow: none; }
/* Schiffsrumpf-Deck unten (Piratenboot) + Kanone darauf */
.kanone-deck { position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; z-index: 4; }
.kanone-gun { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; width: clamp(70px, 12vw, 100px); }
#kanone-barrel { transition: transform 0.08s linear; }
/* Dekor-Hintergrund (Wolken/Insel/Wellen) unter den Schiffen */
.kanone-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* Moorhuhn-Fadenkreuz: folgt dem Pointer (Position via JS), ueber allem, kein eigener Klick-Fang */
.kanone-sight {
  position: absolute; left: 50%; top: 45%;
  width: clamp(40px, 7.5vw, 58px); height: clamp(40px, 7.5vw, 58px);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 8;
  opacity: 0; transition: opacity 0.12s; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.kanone-sight.show { opacity: 0.95; }
/* beta-337: Munitions-Tag folgt dem Fadenkreuz (zeigt geladene Wortart) */
.kanone-ammo-tag {
  position: absolute; transform: translate(-50%, 0); z-index: 7; pointer-events: none;
  padding: 1px 8px; border-radius: 999px; color: #fff; font-weight: bold;
  font-size: clamp(10px, 2.3vw, 13px); white-space: nowrap;
  opacity: 0; transition: opacity 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.kanone-ammo-tag.show { opacity: 0.96; }
.kanone-ship {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; text-align: center; cursor: none;
}
.kanone-ship-banner {
  border: 2px solid #5a3220; border-radius: 8px; padding: 3px 8px; font-weight: bold;
  font-size: clamp(13px, 2.4vw, 18px); white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3); display: inline-block;
}
.kanone-ship-hull { font-size: clamp(22px, 5vw, 34px); line-height: 1; margin-top: -2px; }
@keyframes kanoneBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } }
@keyframes kanoneDrift { 0% { transform: translate(-95%, -50%); } 50% { transform: translate(5%, -60%); } 100% { transform: translate(-95%, -50%); } }
.kanone-bob { animation: kanoneBob 3s ease-in-out infinite; }
.kanone-drift { animation: kanoneDrift 4s ease-in-out infinite; }
/* Modus "realistisch": Objekte ziehen ueber die ganze Szene (Querflug/Fahrt). Das aeussere Element
   animiert nur "left" (Zentrierung bleibt via transform:translate(-50%,-50%)); die Eigenbewegung
   (Vogel flattert, Boot/Fisch schaukelt) laeuft auf dem inneren Hull-Element. */
@keyframes kanoneTraverse { 0% { left: -12%; } 100% { left: 112%; } }
.kanone-move { animation: kanoneTraverse var(--kdur, 9s) linear infinite; }
.kanone-move .kanone-ship-hull { display: inline-block; }
@keyframes kanoneFlap { 0%, 100% { transform: scaleX(1) translateY(0); } 50% { transform: scaleX(0.62) translateY(-2px); } }
@keyframes kanoneRock { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.kanone-move.kanone-is-sky .kanone-ship-hull { animation: kanoneFlap 0.34s ease-in-out infinite; }
.kanone-move.kanone-is-water .kanone-ship-hull { animation: kanoneRock 1.7s ease-in-out infinite; }
.kanone-hit-ok, .kanone-hit-bad { animation: none !important; }
.kanone-hit-ok .kanone-ship-banner { background: #16a34a !important; color: #fff !important; }
.kanone-hit-bad { opacity: 0.4; }
.kanone-hit-bad .kanone-ship-banner { background: #dc2626 !important; color: #fff !important; }
.kanone-burst {
  position: absolute; top: -8px; left: 50%; pointer-events: none; font-size: 1.7em;
  animation: kanoneBurst 0.7s ease-out forwards;
}
/* beta-270/358: fliegender Wassertropfen + Düsen-Spray + Tropfen-Funken (#J) */
.kanone-cannonball {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d6f6ff, #06b6d4 55%, #0369a1 100%);
  box-shadow: 0 0 5px rgba(3,80,140,0.45), inset -2px -2px 3px rgba(2,60,110,0.45); opacity: 0.92;
  transform: translate(-50%, -50%); z-index: 14; pointer-events: none;
  transition: transform 0.24s cubic-bezier(.45,.05,.65,1);
}
.kanone-muzzle {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; z-index: 13; pointer-events: none;
  background: radial-gradient(circle, rgba(214,246,255,0.95), rgba(6,182,212,0.5) 55%, transparent 72%);
  animation: kanoneMuzzle 0.15s ease-out forwards;
}
@keyframes kanoneMuzzle { 0% { transform: translate(-50%,-50%) scale(0.4); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
.kanone-spark {
  position: absolute; top: -6px; left: 50%; font-size: 1.05em; z-index: 15; pointer-events: none;
  animation: kanoneSpark 0.6s ease-out forwards;
}
@keyframes kanoneSpark {
  0% { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.1); opacity: 0; }
}
.kanone-splash {
  position: absolute; z-index: 13; pointer-events: none; font-size: 1.8em;
  animation: kanoneSplash 0.7s ease-out forwards;
}
@keyframes kanoneSplash { 0% { transform: translate(-50%,-50%) scale(0.4); opacity: 0.9; } 100% { transform: translate(-50%,-66%) scale(1.6); opacity: 0; } }
@keyframes kanoneBurst { 0% { transform: translateX(-50%) scale(0.4); opacity: 1; } 100% { transform: translateX(-50%) scale(1.9); opacity: 0; } }

/* beta-277/358: Multi-Wortart-Farbauswahl (Zielspritze) - antippen = Wortart-Farbe wählen. Grosse Touch-Targets (iPad). */
.kanone-ammo-belt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 8px auto 2px; max-width: 1000px; padding: 0 6px; }
.kanone-ammo-hint { font-weight: 700; color: #5a3220; font-size: 0.95em; margin-right: 2px; }
.kanone-ammo-btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 700;
  font-size: clamp(15px, 2.4vw, 19px); padding: 10px 16px; min-height: 48px; border-radius: 12px;
  cursor: pointer; background: #fff; color: #3d2817; border: 3px solid var(--ammo-col, #888);
  box-shadow: 0 4px 0 rgba(0,0,0,0.28); transition: transform .08s, box-shadow .08s;
}
.kanone-ammo-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.28); }
.kanone-ammo-dot { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), var(--ammo-col, #888) 65%); border: 1.5px solid rgba(0,0,0,0.35); }
.kanone-ammo-btn.is-loaded { background: var(--ammo-col, #888); color: #fff; box-shadow: 0 0 0 3px #fff, 0 5px 14px rgba(0,0,0,0.35); transform: translateY(-1px); }
.kanone-ammo-btn.is-loaded .kanone-ammo-dot { background: #fff; border-color: #fff; }
/* falsche Munition: das Wort blinkt kurz rot, bleibt aber stehen */
@keyframes kanoneWrongFlash { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.kanone-wrong-flash .kanone-ship-banner { background: #fecaca !important; color: #7f1d1d !important; border-color: #dc2626 !important; }
.kanone-wrong-flash { animation: kanoneWrongFlash 0.5s; }

/* ============================================================
   beta-253: Zahlenmauer (zmauer) - 3D-Steinmauer-Optik (#2)
   Logik unveraendert; Optik via Klassen (renderCells/check togglen
   .zm-active/.zm-wrong/.zm-right statt inline-Styles).
   ============================================================ */
/* beta-265 (#D): brauner Mauer-Rahmen entfernt (war zu wuchtig); 2-Spalten-Layout
   (Mauer | Numblock) damit nichts unter den Fold scrollt. */
#zmauer-grid { padding: 2px; }
/* beta-356: zmauer-Layout IMMER einspaltig (Pyramide oben, Numblock darunter) - auch am Desktop.
   Das fruehere 2-Spalten-Layout (Mauer | Numblock) quetschte den Numblock in die schmale rechte
   Spalte -> Tasten zu klein (auch am Desktop). Einspaltig bekommt er die volle Breite und damit
   die Standard-Groesse (max 260px, >=44px-Tasten) wie train/eggs/uhr. */
.zmauer-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.zmauer-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#zmauer-numpad { width: 100%; display: flex; justify-content: center; }
/* Vorgegebener Stein: fester Sandstein mit eingemeisselter Zahl */
.zmauer-stone {
  background: linear-gradient(160deg, #cdaa78 0%, #bd9663 45%, #a87c4d 100%);
  color: #4a2810;
  border: 1px solid #8a6a45;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow: inset 1.5px 1.5px 2px rgba(255,255,255,0.5), inset -2px -3px 5px rgba(74,50,30,0.5), 0 2px 3px rgba(0,0,0,0.28);
}
/* Leerer Eingabe-Stein: hellere, eingelassene Nische */
.zmauer-cell {
  background: linear-gradient(160deg, #f5ead2, #e6d4ad);
  color: #5a3220;
  border: 3px dashed #b45309;
  cursor: pointer;
  box-shadow: inset 0 2px 6px rgba(90,55,30,0.32);
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
/* beta-313: .zmauer-cell ist jetzt ein <input>; das aktive Feld wird per :focus markiert
   (Standard-Numblock setzt keine .zm-active-Klasse, sondern fokussiert das Feld). */
.zmauer-cell.zm-active, .zmauer-cell:focus {
  border-color: #f59e0b;
  border-style: solid;
  outline: none;
  background: linear-gradient(160deg, #fff7e0, #ffedbf);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.45), inset 0 2px 5px rgba(245,158,11,0.22);
}
.zmauer-cell.zm-wrong {
  border-color: #dc2626; border-style: solid;
  background: linear-gradient(160deg, #fecaca, #fca5a5);
  box-shadow: none;
}

/* beta-315: Schloss-Overlay fuer gesperrte Bereiche (Schiffsfriseur/Avatar in M-LOGBUCH,
   Hafentaverne, Schaetze) wenn ausserhalb der Oeffnungszeiten gesperrt. */
.lock-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 28, 44, 0.36);
  border-radius: inherit; pointer-events: none;
}
.lock-overlay-badge {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.zmauer-cell.zm-right {
  border-color: #16a34a; border-style: solid;
  background: linear-gradient(160deg, #bbf7d0, #86efac);
  box-shadow: none;
}

/* beta-254: train-Lok vorne in der Waggon-Reihe (#3) statt separat oben */
.train-row .train-loco {
  font-size: clamp(2em, 8vw, 2.7em);
  line-height: 1;
  margin: 0 2px 0 0;
  align-self: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.22));
  flex: 0 0 auto;
}

/* === Mülltrennung / Sortier-Drag&Drop (beta-305) ===
   Tonnen/Container oben (Drop-Zonen, Deckel klappt auf), Produkte unten ziehbar.
   iOS: touch-action:none auf den Produkten + body.muell-dragging blockt Scroll. */
.muell-quest { max-width: 700px; margin: 0 auto; }
.muell-hint { text-align: center; font-size: clamp(1em, 2.6vw, 1.25em); font-weight: 700; color: #2a3742; margin-bottom: 14px; }
.muell-tonnen-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(8px, 2.2vw, 20px); margin-bottom: 20px; }
.muell-tonne { display: flex; flex-direction: column; align-items: center; width: clamp(62px, 15vw, 94px); }
.muell-tonne-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2)); transition: transform .12s; }
.muell-tonne.open { transform: translateY(-2px); }
.mt-lid { transform-box: fill-box; transform-origin: 14% 82%; transition: transform .2s cubic-bezier(.3,1.5,.5,1); }
.muell-tonne.open .mt-lid { transform: rotate(-40deg) translateY(-3px); }
.muell-tonne.reject { animation: muellReject .5s ease; }
@keyframes muellReject { 0%,100% { transform: translateX(0) rotate(0); } 18% { transform: translateX(-7px) rotate(-3deg); } 50% { transform: translateX(7px) rotate(3deg); } 80% { transform: translateX(-3px) rotate(-1deg); } }
.muell-tonne.gulp .mt-body { animation: muellGulp .45s ease; }
@keyframes muellGulp { 0%,100% { transform: scaleY(1); } 45% { transform: scaleY(1.07) translateY(2px); } }
.muell-tonne-label { margin-top: 5px; font-size: clamp(0.6rem, 1.5vw, 0.84rem); font-weight: 700; text-align: center; line-height: 1.14; color: #44515c; max-width: 100%; word-break: break-word; }
.muell-produkte { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vw, 14px); padding: 16px 10px; background: rgba(20,40,60,0.05); border: 2px dashed rgba(20,40,60,0.14); border-radius: 18px; min-height: 64px; }
.muell-produkt { box-sizing: border-box; background: #fff; border: 2px solid #e2e6ea; border-radius: 12px; padding: 10px 14px; font-size: clamp(0.9em, 2.4vw, 1.12em); font-weight: 600; color: #2a3742; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; box-shadow: 0 2px 5px rgba(0,0,0,0.12); transition: box-shadow .12s, transform .12s; white-space: nowrap; -webkit-touch-callout: none; }
.muell-produkt:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.18); transform: translateY(-1px); }
.muell-produkt:active { cursor: grabbing; }
.muell-produkt.dragging-src { opacity: 0.28; }
.muell-produkt.done { visibility: hidden; }
.muell-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 10px 24px rgba(0,0,0,0.32); display: flex; align-items: center; justify-content: center; opacity: 0.97; }
body.muell-dragging { overflow: hidden; touch-action: none; }