/* Erzeugt von demo/build.mjs aus mochi-arrows/src (fonts.css, style.css) und demo/play-extra.css */
/* Schriften liegen im Spiel selbst (SIL Open Font License, siehe src/fonts/), damit der Look auch offline stimmt.
   Nur der lateinische Teil: reicht für Deutsch und Englisch. Im Build werden sie als data:-URLs eingebettet. */
@font-face { font-family: 'Mochiy Pop One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/mochiy-pop-one-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Zen Maru Gothic'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/zen-maru-gothic-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Zen Maru Gothic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/zen-maru-gothic-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Zen Maru Gothic'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/zen-maru-gothic-latin-900-normal.woff2') format('woff2'); }

/* Layout: eine schmale Spalte wie ein Handybildschirm, ein Screen zur Zeit, Sticker-Look mit kräftiger Kontur. */
:root {
  /* Freundlicher als vorher: klarere Pastelltöne ohne Graustich */
  --page: #ffeaf1;
  --board: #ffc9d9;
  --tile: #fffaf6;
  --ink: #3b2433;
  --ink-soft: #8a5872;
  --matcha: #5fa873;
  --berry: #e8527a;
  --gold: #ffd45e;
  --danger: #d93a4a;
  /* Konturen und Schatten. Im Dunkelmodus bleiben sie dunkel, während die Schrift hell wird */
  --edge: #3b2433;
  --locked: #f6e4e9;
  --input: #ffffff;
  --font-display: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --font-body: 'Zen Maru Gothic', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

[hidden] { display: none !important; }
html, body { height: 100%; overscroll-behavior: none; }
/* Kein Standard-Rand: sonst steht die Seite 8 px über und scrollt (Startseite, Level) */
body { margin: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* Wie eine App: kein Lang-Druck-Menü, kein Overscroll-Glühen */
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.app {
  max-width: 480px;
  min-height: 100%;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 14px 24px;
  box-sizing: border-box;
}

.screen { display: flex; flex-direction: column; gap: 14px; animation: screen-in 0.18s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1, h2, h3, p { margin: 0; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: 19px; text-wrap: balance; }
h3 { font-family: var(--font-display); font-weight: 400; font-size: 15px; }

/* Kopfzeile jedes Screens: links Aktion, Mitte Titel, rechts Status */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; }
.topbar h2 { flex: 1; min-width: 0; }

.coins {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tile); border: 3px solid var(--edge); border-radius: 999px;
  padding: 4px 12px 4px 6px;
  font-weight: 900; font-variant-numeric: tabular-nums;
}
.coin {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2.5px solid var(--edge); box-sizing: border-box;
  box-shadow: inset -2px -2px 0 rgba(59, 36, 51, 0.18);
}

/* Knöpfe */
.btn {
  font: inherit; font-weight: 900; color: var(--ink);
  background: var(--tile);
  border: 3px solid var(--edge);
  border-radius: 14px;
  padding: 8px 16px;
  min-height: 46px;
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.btn:focus-visible, .icon-btn:focus-visible, .switch:focus-visible, .seg button:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.btn.primary { background: var(--matcha); color: var(--tile); }
.btn.danger { background: var(--danger); color: var(--tile); }
.btn.small { min-height: 38px; padding: 4px 12px; border-radius: 12px; }
.btn.big { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; border-radius: 18px; box-shadow: 0 5px 0 var(--edge); font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.btn.big:active { transform: translateY(5px); }
.btn.big small { font-family: var(--font-body); font-weight: 700; font-size: 13px; opacity: 0.85; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn .cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.btn .cost .coin { width: 15px; height: 15px; border-width: 2px; }

.icon-btn {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  color: var(--ink); background: var(--tile);
  border: 3px solid var(--edge); border-radius: 14px; box-shadow: 0 3px 0 var(--edge);
  cursor: pointer; padding: 0;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.icon-btn svg { width: 22px; height: 22px; }

/* Startmenü */
.home { gap: 18px; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block: 10px 4px; text-align: center; }
.mascot { width: 150px; height: auto; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.logo { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 10vw, 42px); line-height: 1.05; letter-spacing: 0.01em; text-shadow: 0 3px 0 var(--board); }
.tagline { color: var(--ink-soft); font-weight: 700; }
.menu { display: flex; flex-direction: column; gap: 14px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fine { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: center; }

/* Levelauswahl */
.worlds { display: flex; flex-direction: column; gap: 20px; }
.world-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.world-head span { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.level-btn {
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--tile); border: 3px solid var(--edge); border-radius: 14px; box-shadow: 0 3px 0 var(--edge);
  padding: 6px 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
}
.level-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.level-btn:disabled { background: var(--board); cursor: default; box-shadow: 0 3px 0 var(--ink-soft); border-color: var(--ink-soft); color: var(--ink-soft); }
.level-btn .face { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; overflow: hidden; font-family: var(--font-display); font-size: 20px; }
.level-btn .stars-row { font-size: 11px; letter-spacing: 1px; min-height: 14px; color: var(--berry); font-weight: 900; }
.level-btn.next { background: var(--gold); }
.thumb { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.more { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--ink-soft); }

/* Album */
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.album figure { margin: 0; display: flex; flex-direction: column; gap: 5px; align-items: center; min-width: 0; }
.album .frame { width: 100%; aspect-ratio: 1; border: 3px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--board); display: grid; place-items: center; box-shadow: 0 3px 0 var(--edge); font-family: var(--font-display); font-size: 24px; color: var(--ink-soft); }
.album figcaption { font-size: 12px; font-weight: 900; }
.album figure.missing figcaption { color: var(--ink-soft); }

/* Einstellungen */
.panel-list { background: var(--tile); border: 3px solid var(--edge); border-radius: 18px; padding: 6px 14px; display: flex; flex-direction: column; }
.panel-list h3 { padding-top: 10px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; font-weight: 700; flex-wrap: wrap; }
.setting + .setting { border-top: 2px dashed var(--board); }
.setting > span { min-width: 0; flex: 1 1 140px; }
.confirm-actions { display: flex; gap: 8px; }
.switch { width: 58px; height: 34px; flex: none; border-radius: 999px; border: 3px solid var(--edge); background: var(--board); padding: 0; position: relative; cursor: pointer; transition: background 0.15s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--tile); border: 3px solid var(--edge); box-sizing: border-box; transition: transform 0.15s; }
.switch[aria-checked='true'] { background: var(--matcha); }
.switch[aria-checked='true'] i { transform: translateX(24px); }
.seg { display: inline-flex; border: 3px solid var(--edge); border-radius: 12px; overflow: hidden; }
.seg button { font: inherit; font-weight: 900; color: var(--ink); background: var(--tile); border: 0; padding: 7px 10px; cursor: pointer; min-height: 38px; }
.seg button + button { border-left: 3px solid var(--edge); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--tile); }
.how { margin: 0; padding: 8px 0 10px 20px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--ink-soft); }

/* Spiel */
.lvl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.lvl-no { font-family: var(--font-display); font-size: 16px; }
.lvl-name { color: var(--ink-soft); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hearts { display: flex; gap: 3px; flex: none; }
.hearts svg { width: 26px; height: 26px; transition: transform 0.2s, opacity 0.2s; }
.hearts svg.lost { opacity: 0.22; transform: scale(0.8); }
.stage { display: flex; justify-content: center; }
#board { display: block; touch-action: manipulation; border-radius: 22px; border: 3px solid var(--edge); box-shadow: 0 5px 0 var(--edge); max-width: 100%; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status { flex: 1; min-width: 0; text-align: center; font-weight: 900; color: var(--berry); font-variant-numeric: tabular-nums; }
.status.pop { animation: pop 0.25s ease-out; }
@keyframes pop { from { transform: scale(1.35); } to { transform: none; } }

.card {
  background: var(--tile);
  border: 3px solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--edge);
  padding: 14px 16px 16px;
  text-align: center;
  animation: rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.card p { margin: 2px 0 12px; color: var(--ink-soft); font-weight: 700; white-space: pre-line; user-select: text; -webkit-user-select: text; }
.card-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.stars { display: flex; justify-content: center; gap: 6px; }
.stars svg { width: 32px; height: 32px; }
.stars svg.off { opacity: 0.2; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .card, .screen, .mascot, .status.pop { animation: none; }
}

/* ---------- Phase 2b: Startmenü mit Modi ---------- */
.btn.mid { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 8px; border-radius: 16px; box-shadow: 0 4px 0 var(--edge); font-family: var(--font-display); font-weight: 400; font-size: 16px; min-width: 0; }
.btn.mid:active { transform: translateY(4px); }
.btn.mid small { font-family: var(--font-body); font-weight: 700; font-size: 12px; color: var(--ink-soft); }
.menu-row.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-row.three .btn { padding-inline: 6px; position: relative; min-width: 0; }
.dot { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--berry); border: 3px solid var(--edge); box-sizing: border-box; }
.lead { font-family: var(--font-display); font-size: 16px; text-align: center; text-wrap: balance; }
.note { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding-bottom: 8px; }
.note.error { color: var(--danger); }
@keyframes nudge { 50% { transform: translateY(-4px); } }

/* ---------- Reise-Pfad ---------- */
.world { border: 3px solid var(--edge); border-radius: 22px; padding: 14px 12px 6px; background: var(--tint, var(--board)); box-shadow: 0 4px 0 var(--edge); }
.world-head { display: block; text-align: center; margin-bottom: 0; }
.world-head .stop { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--tile); border-radius: 999px; padding: 2px 10px; }
.world-head h3 { font-size: 19px; margin-top: 6px; }
.world-head p { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.track { position: relative; }
.track > svg.road-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.track > svg.road-svg path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 1 11; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.5; }
.node { position: absolute; transform: translate(-50%, -50%); width: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.node .face { width: 62px; height: 62px; box-sizing: border-box; border: 3px solid var(--edge); border-radius: 20px; background: var(--tile); box-shadow: 0 4px 0 var(--edge); display: grid; place-items: center; overflow: hidden; font-family: var(--font-display); font-size: 22px; }
.node:active:not(:disabled) .face { transform: translateY(4px); box-shadow: none; }
.node:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 20px; }
.node:disabled { cursor: default; }
.node:disabled .face { background: var(--locked); border-color: var(--ink-soft); box-shadow: 0 4px 0 var(--ink-soft); color: var(--ink-soft); }
.node.next .face { background: var(--gold); animation: nudge 1.4s ease-in-out infinite; }
.node .stars-row { font-size: 12px; font-weight: 900; color: var(--berry); min-height: 15px; line-height: 15px; letter-spacing: 1px; background: var(--tile); border-radius: 999px; padding: 0 6px; }
.node .stars-row:empty { background: none; }
.mini-mochi { position: absolute; width: 46px; height: auto; top: -36px; left: 50%; margin-left: -23px; pointer-events: none; animation: bob 1.4s ease-in-out infinite; }
.sign { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; font-weight: 900; color: var(--ink-soft); }

/* ---------- Album nach Welten ---------- */
.album-worlds { display: flex; flex-direction: column; gap: 18px; }
.album-worlds h3 { margin-bottom: 8px; }

/* ---------- Sternenweg ---------- */
.road { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.road li { display: flex; align-items: center; gap: 12px; background: var(--tile); border: 3px solid var(--edge); border-radius: 16px; padding: 10px 12px; }
.road li.locked { background: var(--board); border-color: var(--ink-soft); }
.road .need { font-family: var(--font-display); font-size: 16px; min-width: 50px; color: var(--berry); font-variant-numeric: tabular-nums; }
.road .what { flex: 1; min-width: 0; font-weight: 900; }
.road .what small { display: block; font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.road .state { font-weight: 900; color: var(--matcha); }
.swatch { width: 22px; height: 22px; border-radius: 7px; border: 2.5px solid var(--edge); display: inline-block; vertical-align: middle; margin-right: 6px; box-sizing: border-box; }
.theme-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.theme-chip { font: inherit; font-weight: 900; color: var(--ink); background: var(--tile); border: 3px solid var(--edge); border-radius: 12px; padding: 6px 10px; min-height: 42px; cursor: pointer; display: inline-flex; align-items: center; }
.theme-chip[aria-pressed='true'] { background: var(--ink); color: var(--tile); }
.theme-chip:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }

/* ---------- Rush ---------- */
.code-form { display: flex; gap: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.code-form input { flex: 1 1 120px; min-width: 0; font: inherit; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; color: var(--ink); background: var(--input); border: 3px solid var(--edge); border-radius: 14px; padding: 6px 10px; min-height: 46px; box-sizing: border-box; user-select: text; -webkit-user-select: text; }
.code-form input:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.lvl-no.urgent { color: var(--danger); }
.lvl-no { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .node.next .face, .mini-mochi { animation: none; }
}

/* ---------- Kulissen auf dem Reise-Pfad ---------- */
.btn.gold { background: var(--gold); }
.world { position: relative; overflow: hidden; padding-top: 0; }
.awning { height: 24px; margin: 0 -12px 12px; border-bottom: 3px solid var(--edge); }
.world-head { background: var(--tile); border: 3px solid var(--edge); border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 var(--edge); }
.decor { position: absolute; width: 60px; height: 60px; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(var(--decor-scale, 1)); pointer-events: none; }
.decor svg { width: 100%; height: 100%; display: block; }

/* Neko Café: gestreifte Markise, Schachbrett-Fliesen */
.w-neko .awning { background: repeating-linear-gradient(90deg, #f78fa7 0 24px, #fff8f4 24px 48px); }
.w-neko {
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.4) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.4) 75%);
  background-size: 48px 48px;
  background-position: 0 0, 24px 24px;
}

/* Konbini Japan: dunkelblauer Vorhang mit Punkten, Wellenmuster (Seigaiha) */
.w-konbini .awning { background: #2e4a7d radial-gradient(circle, #fff8f4 5px, transparent 5.5px) 0 0 / 48px 24px; }
.w-konbini {
  background-image:
    radial-gradient(circle at 50% 100%, transparent 10px, rgba(255, 255, 255, 0.55) 10px 12px, transparent 12px 17px, rgba(255, 255, 255, 0.55) 17px 19px, transparent 19px),
    radial-gradient(circle at 50% 100%, transparent 10px, rgba(255, 255, 255, 0.55) 10px 12px, transparent 12px 17px, rgba(255, 255, 255, 0.55) 17px 19px, transparent 19px);
  background-size: 40px 20px;
  background-position: 0 0, 20px 10px;
}

/* ---------- Labor ---------- */
.lab-btn { border-style: dashed; background: transparent; box-shadow: none; }
.lab-list { display: flex; flex-direction: column; gap: 12px; }
.lab-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.lab-text { flex: 1; min-width: 0; }
.lab-text .note { padding-bottom: 0; }

/* ---------- Einstieg, Spielgefühl, schwere Levels ---------- */
.stage { position: relative; }
.coach {
  /* Unter dem Brett, damit der Hinweis nie Pfeile verdeckt */
  display: flex; align-items: center; gap: 10px;
  background: var(--tile); border: 3px solid var(--edge); border-radius: 16px; box-shadow: 0 4px 0 var(--edge);
  padding: 8px 12px; pointer-events: none;
  animation: rise 0.25s ease-out;
}
.coach p { font-weight: 900; font-size: 14px; line-height: 1.3; }
.coach-mochi { flex: none; width: 30px; height: 26px; border: 3px solid var(--edge); border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: var(--tile); position: relative; box-sizing: border-box; }
.coach-mochi::before, .coach-mochi::after { content: ''; position: absolute; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.coach-mochi::before { left: 6px; }
.coach-mochi::after { right: 6px; }

.coins.bump { animation: coinbump 0.35s ease-out; }
@keyframes coinbump { 40% { transform: scale(1.18); } }

.stars svg { animation: starpop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.stars svg:nth-child(1) { animation-delay: 0.25s; }
.stars svg:nth-child(2) { animation-delay: 0.5s; }
.stars svg:nth-child(3) { animation-delay: 0.75s; }
/* Sieg: Sterne größer, der mittlere thront etwas höher wie in klassischen Puzzlespielen */
#panel.panel-win #stars { position: relative; align-items: flex-end; gap: 4px; }
#panel.panel-win #stars svg { width: 40px; height: 40px; }
#panel.panel-win #stars svg:nth-child(2) { width: 50px; height: 50px; transform: translateY(-8px); }
.star-spark { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #FFD45E; border: 1.5px solid #3b2433; pointer-events: none; animation: spark 0.6s ease-out forwards; }
.star-spark.pink { background: #F78FA7; }
@keyframes spark {
  from { transform: translate(-50%, -50%) rotate(45deg) scale(1.1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(45deg) scale(0.3); opacity: 0; }
}
/* Münzen, die vom Siegfenster in die Anzeige fliegen */
.coin.fly { position: fixed; z-index: 45; margin: 0; width: 22px; height: 22px; pointer-events: none; will-change: transform; }
/* Beim Sieg liegt die Kopfleiste über dem Schleier, damit man die Münzen ankommen sieht */
.hud.lift { z-index: 27; }
/* Schatzrunde: goldener Rahmen ums Brett */
#s-game.bonus-mode .board-frame { box-shadow: 0 0 0 4px #FFD45E, 0 0 24px 6px rgba(255, 212, 94, 0.55); border-radius: 22px; }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.stars.intro-art svg { width: min(220px, 70%); height: auto; animation: none; }

.node.hard .face { border-color: var(--danger); box-shadow: 0 4px 0 var(--danger); }
.hard-tag { position: absolute; top: -10px; right: -8px; background: var(--danger); color: var(--tile); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; border: 2px solid var(--edge); border-radius: 999px; padding: 1px 6px; }

@media (prefers-reduced-motion: reduce) {
  .coach, .coins.bump, .stars svg, .star-spark { animation: none; }
  .star-spark { display: none; }
}

/* ---------- Tagesaufgaben, Statistik, Gratis-Tipps ---------- */
.btn.mid { position: relative; }
.missions li.done { background: var(--board); }
.progress { height: 10px; border: 2.5px solid var(--edge); border-radius: 999px; background: var(--tile); overflow: hidden; margin: 6px 0 4px; }
.progress span { display: block; height: 100%; background: var(--matcha); border-radius: 999px; transition: width 0.3s ease-out; }
.road-item { display: flex; align-items: center; gap: 12px; background: var(--gold); border: 3px solid var(--edge); border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 var(--edge); }
.road-item .what { flex: 1; min-width: 0; font-weight: 900; }
.road-item .what small { display: block; font-weight: 700; color: var(--ink); font-size: 12px; }
.road-item .state { font-weight: 900; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: var(--tile); border: 3px solid var(--edge); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat b { font-family: var(--font-display); font-weight: 400; font-size: 24px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
#btnHint.free { background: var(--gold); }

/* ---------- Reise-Pfad: Straße, Welten, Geschenke, Postkarten ---------- */
.track > svg.road-svg .road { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 22; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.track > svg.road-svg .road-dash { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.4; }
.mini-mochi.walker { top: 0; left: 50%; z-index: 3; transition: left 0.9s ease-in-out, top 0.9s ease-in-out; }

.node.gift .face { background: var(--tile); }
.node.gift.waiting .face { opacity: 0.6; filter: grayscale(0.5); }
.node.gift.ready .face { background: var(--gold); animation: nudge 1.1s ease-in-out infinite; }
.node.gift.opened .face { opacity: 0.75; }
.node.gift .face svg { width: 44px; height: 44px; }
.node.gift .stars-row { color: var(--ink); }

/* Space Diner: Nachthimmel mit Sternen */
.w-space {
  background-color: var(--tint);
  background-image:
    radial-gradient(circle, #fff3b0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px);
  background-size: 70px 70px, 40px 40px;
  background-position: 0 0, 20px 25px;
}
.w-space .awning { background: repeating-linear-gradient(90deg, #ffd45e 0 24px, #2b2f5a 24px 48px); }
.w-space .track > svg.road-svg .road, .w-night .track > svg.road-svg .road { stroke: rgba(255, 255, 255, 0.16); }
.w-space .track > svg.road-svg .road-dash, .w-night .track > svg.road-svg .road-dash { stroke: #fff8f4; opacity: 0.55; }
.w-space .sign, .w-night .sign { color: #fff8f4; }

/* Winter Market: Schneeflocken */
.w-winter {
  background-color: var(--tint);
  background-image: radial-gradient(circle, #ffffff 2.5px, transparent 3px), radial-gradient(circle, #ffffff 1.5px, transparent 2px);
  background-size: 52px 52px, 30px 30px;
  background-position: 0 0, 14px 18px;
}
.w-winter .awning { background: repeating-linear-gradient(90deg, #e4513f 0 24px, #ffffff 24px 48px); }

/* Tropical Beach: Sand mit Wellenkante */
.w-beach {
  background-color: var(--tint);
  background-image: radial-gradient(circle at 50% 0, #8fd3f0 12px, transparent 12.5px), radial-gradient(circle, rgba(181, 122, 62, 0.25) 1.5px, transparent 2px);
  background-size: 40px 24px, 26px 26px;
  background-repeat: repeat-x, repeat;
  background-position: 0 -12px, 0 0;
}
.w-beach .awning { background: repeating-linear-gradient(90deg, #3f9a62 0 24px, #ffd45e 24px 48px); }

/* Night Market: Lampions an einer Schnur */
.w-night {
  background-color: var(--tint);
  background-image: radial-gradient(circle, rgba(255, 212, 94, 0.55) 3px, transparent 3.5px), radial-gradient(circle, rgba(247, 143, 167, 0.5) 2px, transparent 2.5px);
  background-size: 64px 64px, 44px 44px;
  background-position: 10px 10px, 30px 34px;
}
.w-night .awning { background: #e4513f radial-gradient(circle, #ffd45e 6px, transparent 6.5px) 0 0 / 48px 24px; }

/* Fenster für Geschenk und Postkarte */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(59, 36, 51, 0.45); }
.modal-card { width: min(380px, 100%); box-sizing: border-box; }
.modal-art { display: flex; justify-content: center; margin-bottom: 6px; }
.modal-art > svg { width: 96px; height: 96px; }
.postcard { position: relative; width: 100%; background: var(--tile); border: 3px solid var(--edge); border-radius: 12px; padding: 10px 10px 26px; box-sizing: border-box; box-shadow: 0 4px 0 var(--edge); transform: rotate(-2deg); }
.postcard-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; background: var(--tint); border-radius: 8px; }
.postcard-grid .thumb { border-radius: 4px; aspect-ratio: 1; height: auto; }
.stamp { position: absolute; right: -8px; top: -12px; width: 44px; height: 44px; padding: 4px; background: #fff; border: 2px dashed var(--ink); transform: rotate(8deg); box-sizing: border-box; }
.postmark { position: absolute; left: 12px; bottom: 5px; font-family: var(--font-display); font-size: 13px; color: var(--ink-soft); }
.post-badge { font: inherit; font-size: 11px; font-weight: 900; color: var(--tile); background: var(--berry); border: 2px solid var(--edge); border-radius: 999px; padding: 1px 8px; vertical-align: middle; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .mini-mochi.walker { transition: none; }
  .node.gift.ready .face { animation: none; }
}

/* ---------- v0.10: Startseite, Booster, Protokoll, Zoom, Dunkelmodus ---------- */
.home .topbar { justify-content: space-between; }
.home .hero { padding-block: 0; }
.home .mascot { width: 120px; }
.play-btn { width: 100%; gap: 4px; padding: 14px 18px 12px; font-size: 24px; }
.play-btn small { color: var(--tile); opacity: 0.92; }
.play-progress { display: block; width: min(260px, 80%); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); border: 2.5px solid var(--edge); overflow: hidden; margin-top: 4px; }
.play-progress i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width 0.4s ease-out; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { position: relative; font: inherit; color: var(--ink); background: var(--tile); border: 3px solid var(--edge); border-radius: 18px; box-shadow: 0 4px 0 var(--edge); padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; min-width: 0; }
.tile:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.tile:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.tile b { font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: 1.15; text-align: center; }
.tile small { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.2; min-height: 13px; }
.tile-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--board); color: var(--ink); margin-bottom: 2px; }
.tile-ic svg { width: 26px; height: 26px; }
#btnLevels .tile-ic { background: #ffd45e; color: #3b2433; }
#btnDaily .tile-ic { background: #b3dcee; color: #3b2433; }
#btnRush .tile-ic { background: #f78fa7; color: #3b2433; }
#btnMissions .tile-ic { background: #bcddb4; color: #3b2433; }
#btnAlbum .tile-ic { background: #ebcb8b; color: #3b2433; }
#btnStars .tile-ic { background: #ffe9a8; color: #3b2433; }

/* Statuszeile unter dem Brett */
.status { min-height: 22px; line-height: 22px; }

/* Booster-Leiste */
.boosts { display: flex; gap: 10px; }
.boost { position: relative; width: 58px; height: 52px; font: inherit; color: #3b2433; background: #fff8f4; border: 3px solid var(--edge); border-radius: 16px; box-shadow: 0 4px 0 var(--edge); cursor: pointer; padding: 0; display: grid; place-items: center; }
.boost:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.boost:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }
.boost .boost-ic svg { width: 28px; height: 28px; display: block; }
.boost-tag { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 900; line-height: 16px; padding: 0 6px; border-radius: 999px; border: 2px solid var(--edge); background: var(--tile); color: var(--ink); display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.boost-tag .coin { width: 11px; height: 11px; border-width: 1.5px; }
.boost.has .boost-tag { background: var(--matcha); color: #fff8f4; }
.boost.armed { background: var(--gold); animation: nudge 0.7s ease-in-out infinite; }
.boost.locked { opacity: 0.55; box-shadow: 0 4px 0 var(--ink-soft); border-color: var(--ink-soft); cursor: default; }
.boost.locked .boost-tag { background: var(--locked); color: var(--ink-soft); border-color: var(--ink-soft); }
.boost:disabled { opacity: 0.4; cursor: default; }
.bar { padding-bottom: 8px; }

/* Zoom */
#board { touch-action: none; }
.zoom-reset { position: absolute; top: 10px; right: 10px; font: inherit; font-weight: 900; font-size: 13px; color: var(--ink); background: var(--tile); border: 3px solid var(--edge); border-radius: 12px; box-shadow: 0 3px 0 var(--edge); padding: 4px 10px; cursor: pointer; }

/* Siegmoment: das fertige Bild hüpft einmal */
#board.won { animation: won 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes won { 30% { transform: scale(1.045) rotate(-0.6deg); } 60% { transform: scale(0.99) rotate(0.3deg); } }
.card .album-new { display: inline-block; margin: -4px 0 10px; padding: 2px 10px; border-radius: 999px; background: var(--gold); border: 2px solid var(--edge); color: #3b2433; font-size: 12px; font-weight: 900; }
.booster-art { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 28px; background: var(--gold); border: 3px solid var(--edge); box-shadow: 0 4px 0 var(--edge); color: #3b2433; }
.booster-art svg { width: 56px; height: 56px; }

/* Spielprotokoll */
.log-wrap { overflow-x: auto; background: var(--tile); border: 3px solid var(--edge); border-radius: 16px; }
.log-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.log-table th, .log-table td { padding: 5px 4px; text-align: right; white-space: nowrap; }
.log-table th:first-child, .log-table td:first-child { text-align: left; }
.log-table th { font-weight: 900; border-bottom: 2px solid var(--edge); }
.log-table tr + tr td { border-top: 1px dashed var(--board); }
.log-table td.bad { color: var(--danger); font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  .boost.armed, #board.won { animation: none; }
}

/* Dunkelmodus: dunkle Flächen, helle Schrift, die Sticker-Konturen bleiben dunkel */
:root[data-look='dark'] {
  --page: #1d1520;
  --board: #3a2c3f;
  --tile: #2b2030;
  --ink: #f6e8ee;
  --ink-soft: #b9a2b1;
  --edge: #0e090f;
  --locked: #33263a;
  --input: #1d1520;
  color-scheme: dark;
}
:root[data-look='dark'] .btn.primary, :root[data-look='dark'] .btn.danger { color: #fff8f4; }
:root[data-look='dark'] .btn.gold, :root[data-look='dark'] .node.next .face, :root[data-look='dark'] .node.gift.ready .face { color: #3b2433; }
:root[data-look='dark'] .logo { text-shadow: 0 3px 0 #0e090f; }
:root[data-look='dark'] .world { box-shadow: inset 0 0 0 2000px rgba(30, 12, 40, 0.1), 0 4px 0 var(--edge); }
:root[data-look='dark'] .world-head, :root[data-look='dark'] .node .stars-row { filter: none; }
:root[data-look='dark'] .modal { background: rgba(0, 0, 0, 0.6); }
.road-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff8f4; border: 2px solid var(--edge); vertical-align: middle; margin-right: 6px; box-sizing: border-box; }
.road-ic svg { width: 20px; height: 20px; }

/* Pumpkin Fair: Lavendel mit Kürbis-Markise und kleinen Fledermäusen */
.w-pumpkin {
  background-color: var(--tint);
  background-image: radial-gradient(circle, rgba(110, 79, 163, 0.28) 2.5px, transparent 3px), radial-gradient(circle, rgba(245, 149, 58, 0.35) 1.5px, transparent 2px);
  background-size: 56px 56px, 34px 34px;
  background-position: 0 0, 16px 20px;
}
.w-pumpkin .awning { background: repeating-linear-gradient(90deg, #f5953a 0 24px, #6e4fa3 24px 48px); }

/* Deep Sea: dunkles Wasser mit Luftblasen */
.w-deep {
  background-color: var(--tint);
  background-image: radial-gradient(circle, transparent 4px, rgba(191, 230, 242, 0.45) 4.5px 5.5px, transparent 6px), radial-gradient(circle, rgba(191, 230, 242, 0.35) 1.5px, transparent 2px);
  background-size: 60px 80px, 30px 40px;
  background-position: 10px 0, 25px 15px;
}
.w-deep .awning { background: repeating-linear-gradient(90deg, #3fc1c9 0 24px, #1f4e6b 24px 48px); }
.w-deep .track > svg.road-svg .road { stroke: rgba(255, 255, 255, 0.16); }
.w-deep .track > svg.road-svg .road-dash { stroke: #fff8f4; opacity: 0.55; }

/* ---------- v0.12: feste Kopfleiste ---------- */
/* Eine Leiste für alle Screens: links Zurück (oder Profil), Mitte Titel, rechts Münzen und Menü.
   Sie bleibt beim Scrollen stehen und respektiert Kamera-Aussparungen (safe area). */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 15;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--page);
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hud.scrolled { border-bottom-color: var(--edge); box-shadow: 0 3px 0 rgba(59, 36, 51, 0.08); }
.hud-inner {
  max-width: 480px; margin: 0 auto; box-sizing: border-box;
  min-height: 64px; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 8px max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 10px;
}
.hud-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.hud-main { font-family: var(--font-display); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hud-main:empty, .hud-sub:empty { display: none; }
.hud-sub { color: var(--ink-soft); font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lvlNo.urgent { color: var(--danger); }
.hud .coins { flex: none; }
.app { padding-top: calc(64px + env(safe-area-inset-top, 0px) + 14px); }
.game-top { display: flex; justify-content: center; margin-top: -4px; }
.game-top .hearts svg { width: 28px; height: 28px; }
:root[data-look='dark'] .hud.scrolled { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
#bar { justify-content: center; }

/* ---------- v0.12: Brett im Welt-Rahmen, jubelnder Mochi ---------- */
.world-frame {
  padding: 10px; box-sizing: border-box;
  border: 3px solid var(--edge); border-radius: 30px;
  background-color: var(--tint); box-shadow: 0 4px 0 var(--edge);
}
.world-frame #board { box-shadow: 0 3px 0 var(--edge); }
.world-frame .zoom-reset { top: 18px; right: 18px; }
:root[data-look='dark'] .world-frame { box-shadow: inset 0 0 0 2000px rgba(30, 12, 40, 0.08), 0 4px 0 var(--edge); }
.cheer-mochi { display: block; width: 74px; height: auto; margin: -46px auto 2px; animation: cheer 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s 2 both; }
.cheer-mochi.perfect { animation: cheer-high 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s 3 both; }
@keyframes cheer { 0% { transform: translateY(14px) scale(0.6); opacity: 0; } 40% { transform: translateY(-10px) scale(1.06, 0.94); opacity: 1; } 70% { transform: translateY(0) scale(0.96, 1.04); } 100% { transform: none; opacity: 1; } }
@keyframes cheer-high { 0% { transform: translateY(14px) scale(0.6); opacity: 0; } 35% { transform: translateY(-22px) rotate(-6deg); opacity: 1; } 65% { transform: translateY(0) scale(1.08, 0.92) rotate(4deg); } 100% { transform: none; opacity: 1; } }
#panel { position: relative; }
@media (prefers-reduced-motion: reduce) { .cheer-mochi, .cheer-mochi.perfect { animation: none; } }

/* Toy Box: Konfetti-Punkte, gestreifte Markise in Spielzeugfarben */
.w-toys {
  background-color: var(--tint);
  background-image: radial-gradient(circle, rgba(91, 143, 217, 0.4) 2.5px, transparent 3px), radial-gradient(circle, rgba(228, 81, 63, 0.35) 2px, transparent 2.5px), radial-gradient(circle, rgba(255, 212, 94, 0.7) 2px, transparent 2.5px);
  background-size: 48px 48px, 36px 36px, 28px 28px;
  background-position: 0 0, 14px 20px, 8px 4px;
}
.w-toys .awning { background: repeating-linear-gradient(90deg, #e4513f 0 16px, #ffd45e 16px 32px, #5b8fd9 32px 48px); }

/* Spring Garden: Gras und kleine Blüten */
.w-garden {
  background-color: var(--tint);
  background-image: radial-gradient(circle, #f78fa7 2.5px, transparent 3px), radial-gradient(circle, #fff8f4 2px, transparent 2.5px);
  background-size: 54px 54px, 34px 34px;
  background-position: 0 0, 17px 22px;
}
.w-garden .awning { background: repeating-linear-gradient(90deg, #8cc084 0 24px, #fff8f4 24px 48px); }

/* Picnic Park: rot-weiße Karodecke */
.w-picnic {
  background-color: var(--tint);
  background-image: linear-gradient(90deg, rgba(228, 81, 63, 0.18) 50%, transparent 50%), linear-gradient(rgba(228, 81, 63, 0.18) 50%, transparent 50%);
  background-size: 40px 40px;
}
.w-picnic .awning { background: repeating-linear-gradient(90deg, #e4513f 0 20px, #fff8f4 20px 40px); }

/* ---------- v0.15: Brett füllt den Handybildschirm (Hochformat) ---------- */
/* Im Level: keine Seite zum Scrollen, das Brett nimmt den Platz zwischen Kopfleiste und Boostern.
   Geht ein Fenster unter dem Brett auf (Sieg, Erklärung), wird das Brett kleiner statt verdeckt. */
body.in-game { overflow: hidden; }
body.in-game .app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  padding-top: calc(64px + env(safe-area-inset-top, 0px) + 2px);
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
body.in-game #s-game { flex: 1; min-height: 0; gap: 6px; position: relative; }
#s-game .stage { flex: 1 1 auto; min-height: 0; align-items: center; }
#s-game .world-frame { padding: 6px; border-radius: 24px; }
.board-frame { position: relative; flex: none; }
.board-frame:not(.world-frame) { padding: 0; }
#s-game .world-frame .zoom-reset { top: 12px; right: 12px; }
#s-game #board { border-radius: 18px; }
#s-game #panel { flex: none; max-height: 62%; overflow-y: auto; }
/* Booster nicht ganz unten: Abstand zur Gestenleiste/Bildschirmkante */
#s-game .bar { flex: none; padding-bottom: clamp(18px, 4dvh, 40px); }
/* Statuszeile und Hinweis schweben über dem unteren Brettrand, damit das Brett nicht springt */
#s-game .status {
  /* Oben unter der Leiste: dort kommt sie dem Hinweis-Kasten und den Boostern nie in die Quere */
  position: absolute; left: 50%; top: 50px; bottom: auto; height: auto; transform: translateX(-50%); z-index: 6;
  pointer-events: none; min-height: 0; line-height: 1.2; white-space: nowrap;
  /* Lange Hinweise (z. B. "geht nicht mehr auf") brechen um statt über den Rand zu laufen */
  max-width: calc(100% - 40px); width: max-content; text-align: center; white-space: normal; text-wrap: balance;
}
#s-game .status:not(:empty) { background: var(--tile); border: 3px solid var(--edge); border-radius: 999px; padding: 4px 12px; box-shadow: 0 3px 0 var(--edge); }
#s-game .status.pop { animation: pop-c 0.25s ease-out; }
@keyframes pop-c { from { transform: translateX(-50%) scale(1.3); } to { transform: translateX(-50%); } }
/* Hinweis über den Boostern statt auf ihnen */
#s-game .coach { position: absolute; left: 0; right: 0; bottom: calc(clamp(18px, 4dvh, 40px) + 66px); z-index: 5; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #s-game .status.pop { animation: none; } }

/* Farm Days: Heuballen-Streifen */
.w-farm {
  background-color: var(--tint);
  background-image: repeating-linear-gradient(45deg, rgba(201, 139, 79, 0.16) 0 10px, transparent 10px 26px);
}
.w-farm .awning { background: repeating-linear-gradient(90deg, #d9423a 0 22px, #fff8f4 22px 44px); }
/* Retro Arcade: Neon-Raster */
.w-arcade {
  background-color: var(--tint);
  background-image: linear-gradient(rgba(127, 209, 232, 0.18) 2px, transparent 2px), linear-gradient(90deg, rgba(232, 82, 122, 0.18) 2px, transparent 2px);
  background-size: 32px 32px;
}
.w-arcade .awning { background: repeating-linear-gradient(90deg, #e8527a 0 16px, #7fd1e8 16px 32px, #ffd45e 32px 48px); }
.w-arcade .track > svg.road-svg .road { stroke: rgba(255, 255, 255, 0.16); }
.w-arcade .track > svg.road-svg .road-dash { stroke: #fff8f4; opacity: 0.55; }
.w-arcade .sign { color: #fff8f4; }

/* Rail Journey: Schwellen */
.w-rail {
  background-color: var(--tint);
  background-image: repeating-linear-gradient(0deg, rgba(138, 90, 60, 0.16) 0 6px, transparent 6px 30px);
}
.w-rail .awning { background: repeating-linear-gradient(90deg, #2e4a7a 0 22px, #ffd45e 22px 44px); }

/* Herbstwald: verstreute Blätter */
.w-forest {
  background-color: var(--tint);
  background-image: radial-gradient(ellipse 7px 4px, #e4513f 90%, transparent 100%), radial-gradient(ellipse 7px 4px, #ffd45e 90%, transparent 100%), radial-gradient(ellipse 6px 4px, #d9893f 90%, transparent 100%);
  background-size: 52px 58px, 44px 50px, 36px 40px;
  background-position: 0 0, 19px 27px, 9px 13px;
}
.w-forest .awning { background: repeating-linear-gradient(90deg, #d9893f 0 20px, #fff8f4 20px 40px); }

/* Murmelbahn: bunte Murmeln auf Flieder */
.w-marble {
  background-color: var(--tint);
  background-image: radial-gradient(circle 5px, #7fd1e8 88%, transparent 100%), radial-gradient(circle 4px, #ffd45e 88%, transparent 100%), radial-gradient(circle 4px, #f78fa7 88%, transparent 100%);
  background-size: 48px 52px, 40px 46px, 34px 38px;
  background-position: 0 0, 17px 23px, 8px 12px;
}
.w-marble .awning { background: repeating-linear-gradient(90deg, #a77bf3 0 20px, #fff8f4 20px 40px); }

/* ---------- v0.17: Polier-Runde ---------- */
/* Fenster: Plaketten statt Textzeilen, Knöpfe untereinander bei vielen Wahlmöglichkeiten */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--edge); background: var(--page); font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.chip .coin { width: 14px; height: 14px; border-width: 2px; }
.chip.gold { background: var(--gold); color: #3b2433; }
.card-actions.stack { display: grid; grid-template-columns: 1fr; gap: 8px; }
.card-actions.stack .btn { width: 100%; }
.btn.quiet { background: transparent; box-shadow: none; border-color: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.btn.quiet:active { transform: none; }

/* Reise: gesperrte Knoten zeigen ihre Nummer gedimmt mit Schloss-Plakette, am Ende ein Schild */
.node.locked .face { font-size: 18px; }
.lock-badge { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--tile); border: 2.5px solid var(--ink-soft); display: grid; place-items: center; color: var(--ink-soft); box-sizing: border-box; }
.lock-badge svg { width: 12px; height: 12px; }
.journey-end { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 40px; color: var(--ink-soft); font-weight: 900; text-align: center; }
.journey-end .mini-mochi { position: static; margin: 0; width: 54px; }

/* Startseite: keine einzelnen Wörter in der zweiten Zeile */
.tile small { text-wrap: balance; }

/* Einstellungen: Abschnittstitel kräftiger, Erklärung klein unter dem Label */
#s-settings h3 { color: var(--berry); font-size: 16px; }
.setting-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 140px; }
.setting-label small { font-weight: 700; font-size: 12px; color: var(--ink-soft); }

/* Dunkelmodus */
:root[data-look='dark'] .road-item, :root[data-look='dark'] .road-item .what small { color: #3b2433; }
:root[data-look='dark'] .switch i { background: #fff8f4; }
:root[data-look='dark'] .switch { background: #4a3a50; }
:root[data-look='dark'] .play-btn small { color: #fff8f4; }
:root[data-look='dark'] .road li.locked { border-color: var(--edge); opacity: 0.75; }
:root[data-look='dark'] .road li.ready { border-color: var(--gold); }
/* Die Reise bleibt hell wie eine beleuchtete Karte, nur etwas gedämpft */
:root[data-look='dark'] .world { --tile: #fff8f4; --locked: #f6e4e9; --ink: #3b2433; --ink-soft: #8a7480; color: #3b2433; }
:root[data-look='dark'] .chip:not(.gold) { background: #3a2c3f; }
.road li.ready { border-color: var(--matcha); box-shadow: 0 3px 0 var(--matcha); }
.road-ic .coin { width: 18px; height: 18px; }
/* Rush: keine Booster, der Hinweis steht unten statt über den Pfeilen */
#s-game.rush-mode .boosts { visibility: hidden; }
.album-count { font-family: var(--font-body); font-weight: 900; font-size: 12px; color: var(--ink-soft); background: var(--tile); border: 2px solid var(--edge); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
h3.album-locked { color: var(--ink-soft); opacity: 0.7; }
/* Brett nie direkt auf der Booster-Leiste */
#s-game .bar { margin-top: 4px; }
.tile b { white-space: nowrap; font-size: clamp(11.5px, 3.4vw, 13px); }

/* Candy Shop: Streusel */
.w-candy {
  background-color: var(--tint);
  background-image: radial-gradient(circle, #b38bf0 2px, transparent 2.5px), radial-gradient(circle, #7fd1e8 2px, transparent 2.5px), radial-gradient(circle, #ffd45e 2px, transparent 2.5px);
  background-size: 38px 38px, 46px 46px, 30px 30px;
  background-position: 0 0, 13px 21px, 7px 9px;
}
.w-candy .awning { background: repeating-linear-gradient(90deg, #f78fa7 0 18px, #fff8f4 18px 36px); }

/* Aufgaben, Statistik, Rush-Lobby: Symbole und Fortschritt */
.missions li { align-items: center; }
.m-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2.5px solid var(--edge); display: grid; place-items: center; background: #b3dcee; color: #3b2433; box-sizing: border-box; }
.m-ic svg { width: 22px; height: 22px; }
.m-arrows { background: #b3dcee; } .m-levels { background: #bcddb4; } .m-perfect { background: #f9c2d6; }
.m-combo { background: #ffd0a8; } .m-rush { background: #f78fa7; } .m-daily { background: #e2d4fa; } .m-chest { background: #fff8f4; }
.m-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-reward { display: inline-flex; align-items: center; gap: 3px; font-weight: 900; }
.m-reward .coin { width: 13px; height: 13px; border-width: 2px; }
.m-dots { display: inline-flex; gap: 4px; }
.m-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #3b2433; background: transparent; }
.m-dots i.on { background: #3b2433; }
.missions li.done .m-ic { opacity: 0.6; }
.stat { flex-direction: row; align-items: center; gap: 10px; }
.stat-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 2.5px solid var(--edge); display: grid; place-items: center; color: #3b2433; box-sizing: border-box; }
.stat-ic svg { width: 20px; height: 20px; }
.stat-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#rushBest { display: flex; align-items: center; gap: 12px; justify-content: center; background: var(--tile); border: 3px solid var(--edge); border-radius: 18px; padding: 10px 14px; box-shadow: 0 3px 0 var(--edge); }
.rush-ic { width: 46px; height: 46px; border-radius: 14px; background: #f78fa7; border: 2.5px solid var(--edge); display: grid; place-items: center; color: #3b2433; box-sizing: border-box; }
.rush-ic svg { width: 26px; height: 26px; }
.rush-best-txt { display: flex; flex-direction: column; text-align: left; }
.rush-best-txt b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; }
.rush-best-txt small { font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.chip.done { animation: pop 0.25s ease-out; }
.missions .what small.m-meta, .road-item .what small.m-meta { display: flex; width: 100%; }
.m-reward { margin-left: auto; }
.m-dots { margin-right: 8px; }
#rushBest .rush-best-txt small { font-family: var(--font-body); font-weight: 700; font-size: 12px; }

/* ---------- v0.19: Fenster als eigene Ebene ---------- */
.panel-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(20, 10, 22, 0.45); animation: fade-in 0.2s ease-out; }
/* Beim Sieg bleibt das fertige Bild oben hell, nur unten wird es dunkler */
.panel-backdrop.soft { background: linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(20, 10, 22, 0.5) 72%); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
#s-game #panel {
  position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 24px)); box-sizing: border-box; transform: translateX(-50%);
  max-height: calc(100dvh - 120px); overflow-y: auto; margin: 0;
  animation: panel-pop 0.34s cubic-bezier(0.2, 1.35, 0.4, 1);
}
/* Siegfenster: kompakt, der Mochi sitzt sichtbar auf der Karte */
#s-game #panel.panel-win { overflow: visible; padding-top: 34px; }
#s-game #panel.panel-win .cheer-mochi { position: absolute; left: 50%; top: -44px; margin: 0 0 0 -37px; }
#s-game #panel.panel-win #stars { margin-top: 0; }
#s-game #panel.panel-win p { margin-bottom: 8px; }
@keyframes panel-pop { from { transform: translateX(-50%) translateY(40px) scale(0.9); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.chip.link { font: inherit; font-weight: 900; font-size: 13px; cursor: pointer; color: inherit; box-shadow: 0 2px 0 var(--edge); }
.chip.link::after { content: '›'; font-size: 16px; line-height: 1; margin-left: 2px; }
.chip.link:active { transform: translateY(2px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #s-game #panel, .panel-backdrop { animation: none; } }

/* v0.23: Leiste über dem Brett: Herzen, Fortschritt (wie viel vom Bild frei ist) mit Zähler, Neustart */
#s-game .game-top { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; max-width: 440px; margin: 2px auto 0; padding-inline: 4px; box-sizing: border-box; }
#s-game .game-top .hearts, .clear-progress {
  height: 40px; box-sizing: border-box; display: flex; align-items: center;
  background: var(--tile); border: 3px solid var(--edge); border-radius: 999px; box-shadow: 0 3px 0 var(--edge);
}
#s-game .game-top .hearts { gap: 1px; padding: 0 8px; }
#s-game .game-top .hearts svg { width: 23px; height: 23px; }
.clear-progress { flex: 1; min-width: 0; gap: 8px; padding: 0 12px 0 7px; }
.clear-track { flex: 1; display: block; height: 14px; border-radius: 999px; background: var(--board); overflow: hidden; box-shadow: inset 0 2px 0 rgba(59, 36, 51, 0.12); }
.clear-track span {
  display: block; height: 100%; width: 0; border-radius: 999px; background: var(--matcha);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.13), inset 0 3px 0 rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease-out;
}
.clear-progress b { flex: none; font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.restart-btn { width: 40px; height: 40px; border-radius: 999px; }
.restart-btn svg { width: 22px; height: 22px; }
.restart-btn.spin svg { animation: restart-spin 0.45s ease-out; }
@keyframes restart-spin { from { transform: rotate(-360deg); } }
.restart-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
#s-game.rush-mode .clear-progress, #s-game.rush-mode .restart-btn { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .restart-btn.spin svg { animation: none; } }
/* Banner für schwere Levels */
.level-banner { position: fixed; z-index: 35; left: 0; right: 0; top: 38%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px; background: #e5484d; color: #fff8f4; border-block: 4px solid #3b2433; box-shadow: 0 6px 0 rgba(59, 36, 51, 0.35); cursor: pointer; animation: banner-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); text-align: center; }
.level-banner b { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: 0.02em; text-shadow: 0 3px 0 #3b2433; }
.level-banner span { font-weight: 800; font-size: 14px; }
@keyframes banner-in { from { transform: scaleY(0.2) translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
/* Tipp-Knopf wackelt nach langer Pause */
.boost.nudge { animation: nudge 0.7s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .level-banner, .boost.nudge { animation: none; } }
.chip.gold.link, :root[data-look='dark'] .chip.gold { color: #3b2433; }
.btn.gold .cost .coin { background: #fff1a8; }

/* Sieg-Mochi: größer und lebendig. Erst der Jubelsprung, danach wippt er weiter,
   blinzelt ab und zu, der Spross wackelt und die Bäckchen glühen */
#s-game #panel.panel-win { padding-top: 58px; }
#s-game #panel.panel-win .cheer-mochi {
  width: 120px; top: -78px; margin-left: -60px; transform-origin: 50% 90%;
  animation: cheer 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s 1 both, mochi-idle 1.8s ease-in-out 1.1s infinite;
}
#s-game #panel.panel-win .cheer-mochi.perfect { animation: cheer-high 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s 2 both, mochi-hop 1.4s ease-in-out 1.8s infinite; }
@keyframes mochi-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-6px) scale(0.97, 1.04); } 70% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes mochi-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(2px) scale(1.08, 0.9); } 45% { transform: translateY(-16px) scale(0.94, 1.08) rotate(-3deg); } 70% { transform: translateY(0) scale(1.06, 0.94); } }
.cheer-mochi .m-eyes { transform-box: fill-box; transform-origin: center; animation: mochi-blink 3.4s ease-in-out 1.4s infinite; }
.cheer-mochi .m-sprout { transform-box: fill-box; transform-origin: 50% 100%; animation: mochi-sprout 1.8s ease-in-out 1.1s infinite; }
.cheer-mochi .m-cheeks { animation: mochi-glow 1.8s ease-in-out 1.1s infinite; }
@keyframes mochi-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes mochi-sprout { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes mochi-glow { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #s-game #panel.panel-win .cheer-mochi, #s-game #panel.panel-win .cheer-mochi.perfect, .cheer-mochi .m-eyes, .cheer-mochi .m-sprout, .cheer-mochi .m-cheeks { animation: none; }
}
/* Gesperrte Stationen: weiß mit klarer Kante wie die anderen, nur die Zahl ist gedämpft
   (vorher graurosa Fläche mit grauem Rand, das wirkte trüb) */
.node:disabled .face { background: var(--tile); border-color: var(--edge); box-shadow: 0 4px 0 var(--edge); color: #d59ab4; }
.lock-badge { border-color: var(--edge); color: var(--ink); background: #ffe9a8; }
.node.gift.waiting .face { opacity: 1; filter: saturate(0.6); }
.node.hard:disabled .face { border-color: var(--danger); box-shadow: 0 4px 0 var(--danger); }

/* ---------- v0.23: Startseite passt immer auf einen Bildschirm ---------- */
/* Sie scrollt nicht (auch nicht ein paar Pixel): genau Bildschirmhöhe, Maskottchen und Logo wachsen mit der Höhe */
body.on-home { overflow: hidden; overscroll-behavior: none; }
body.on-home .app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}
body.on-home .home { flex: 1; min-height: 0; justify-content: center; gap: clamp(10px, 2.2dvh, 18px); }
body.on-home .home .mascot { width: clamp(72px, 14dvh, 124px); }
body.on-home .logo { font-size: clamp(32px, min(10vw, 5.4dvh), 46px); }
@media (max-height: 640px) {
  body.on-home .tagline { display: none; }
  body.on-home .tile { padding-block: 7px 6px; }
}

/* ---------- v0.23: Erklärfenster mit echtem Mini-Brett ---------- */
/* Das Brett spielt den Ablauf in Schleife vor (src/game/demo.ts), der Kreis zeigt den nächsten Tipp */
.stars.intro-art:has(.demo-host) { display: block; width: 100%; }
.demo-host { width: 100%; }
.demo-stage { position: relative; width: min(280px, 78vw); height: clamp(120px, 20dvh, 168px); margin: 2px auto 6px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.demo-board { display: block; border: 3px solid var(--edge); border-radius: 16px; box-shadow: 0 4px 0 var(--edge); }
.demo-tap {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 3px solid var(--ink); background: rgba(255, 255, 255, 0.45);
  opacity: 0; transform: scale(1.6);
}
.demo-tap.go { animation: demo-tap 0.75s ease-out; }
@keyframes demo-tap {
  0% { opacity: 0; transform: scale(1.6); }
  35% { opacity: 1; transform: scale(0.85); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* ---------- v0.23: entspannter spielen ---------- */
/* Entspannt: keine Herzen (Fehltipps kosten nichts), die Leiste zeigt nur Fortschritt und Neustart */
#s-game.relaxed .game-top .hearts { display: none; }
/* Verlorenes Herz schwebt sanft nach oben weg */
.hearts { position: relative; }
.hearts svg.heart-ghost { position: absolute; pointer-events: none; animation: heart-away 1.1s ease-out forwards; }
@keyframes heart-away {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.7) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) { .hearts svg.heart-ghost { display: none; } }

/* ---------- v0.23: Mochi im Level ---------- */
/* Sitzt oben rechts auf dem Brettrahmen und spielt mit (Stimmungen in data-mood, setMood in main.ts) */
.game-mochi {
  position: absolute; right: 18px; top: -34px; z-index: 3; width: 52px; height: 42px;
  padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.game-mochi svg { width: 52px; height: auto; display: block; overflow: visible; transform-origin: 50% 90%; }
.game-mochi .m-eyes { transform-box: fill-box; transform-origin: center; animation: mochi-blink 4.2s ease-in-out infinite; }
.game-mochi[data-mood='idle'] svg, .game-mochi[data-mood='nod'] svg { animation: mochi-breathe 3.2s ease-in-out infinite; }
@keyframes mochi-breathe { 50% { transform: scale(1.03, 0.97); } }
.game-mochi.go[data-mood='nod'] svg { animation: mochi-nod 0.35s ease-out; }
@keyframes mochi-nod { 40% { transform: scale(1.07, 0.9); } }
.game-mochi.go[data-mood='happy'] svg, .game-mochi.go[data-mood='hello'] svg { animation: mochi-hop 0.7s ease-out; }
.game-mochi.go[data-mood='cheer'] svg { animation: mochi-hop 0.6s ease-out 4; }
.game-mochi.go[data-mood='flinch'] svg { animation: mochi-flinch 0.5s ease-out; }
@keyframes mochi-flinch { 15% { transform: translateX(-3px) scale(1.1, 0.85); } 35% { transform: translateX(3px) scale(0.95, 1.05); } 55% { transform: translateX(-2px); } }
/* Schweißtropfen beim Fehltipp */
.game-mochi[data-mood='flinch']::after {
  content: ''; position: absolute; right: 2px; top: 6px; width: 8px; height: 11px;
  background: #9fd8f5; border: 2px solid #3b2433; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: mochi-sweat 0.9s ease-in forwards;
}
@keyframes mochi-sweat { from { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(9px); } }
.game-mochi[data-mood='curious'] svg { animation: mochi-tilt 2.4s ease-in-out infinite; }
@keyframes mochi-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-13deg) translateY(-1px); } }
.game-mochi[data-mood='sleepy'] .m-eyes { animation: none; transform: scaleY(0.15); }
.game-mochi[data-mood='sleepy'] svg { animation: mochi-breathe 4.5s ease-in-out infinite; }
.game-mochi.go[data-mood='squish'] svg { animation: mochi-squish 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes mochi-squish { 25% { transform: scale(1.18, 0.78); } 60% { transform: scale(0.94, 1.08); } }
/* Sprechblase: ? (neugierig), zZ (schläft), ♪ / ♥ / ✿ */
.mochi-bubble {
  position: absolute; left: -20px; top: -14px; min-width: 22px; padding: 1px 6px; box-sizing: border-box;
  font: 900 13px/18px var(--font-body); color: #E8527A; text-align: center; white-space: nowrap;
  background: var(--tile); border: 2.5px solid var(--edge); border-radius: 999px; box-shadow: 0 2px 0 var(--edge);
  animation: bubble-in 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes bubble-in { from { transform: scale(0.3); opacity: 0; } }
.game-mochi[data-mood='sleepy'] .mochi-bubble { animation: mochi-zz 2.4s ease-in-out infinite; }
@keyframes mochi-zz { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-6px, -8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .game-mochi svg, .game-mochi .m-eyes, .mochi-bubble, .game-mochi::after { animation: none !important; } }

/* ---------- v0.23: Stimmung je Welt (src/game/ambient.ts) ---------- */
/* Teilchen hinter dem Brett: steigen auf, fallen sacht oder funkeln. Leiste, Brett und Booster liegen darüber */
#s-game .ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#s-game > :not(.ambient):not(.panel-backdrop):not(#panel):not(.level-banner):not(.coach):not(.status) { position: relative; z-index: 1; }
.amb {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  background: var(--c); border-radius: 50%; opacity: 0; will-change: transform, opacity;
  /* Zarte Kontur: Weißes (Schnee, Dampf) bleibt auch auf der hellen Seite sichtbar */
  box-shadow: 0 0 0 1.5px rgba(59, 36, 51, 0.16);
}
.amb-puff { box-shadow: 0 0 0 2px rgba(59, 36, 51, 0.1); }
:root[data-look='dark'] .amb { box-shadow: none; }
.amb-bubble { background: transparent; border: 2px solid var(--c); box-shadow: inset 2px -2px 0 rgba(255, 255, 255, 0.6); }
.amb-petal { border-radius: 80% 0 80% 0; }
.amb-leaf { border-radius: 0 80% 0 80%; }
.amb-pixel, .amb-star { border-radius: 2px; }
.amb-star { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; }
.ambient[data-motion='rise'] .amb { top: 100%; animation: amb-rise var(--d) linear var(--delay) infinite; }
.ambient[data-motion='fall'] .amb { top: -20px; animation: amb-fall var(--d) linear var(--delay) infinite; }
.ambient[data-motion='twinkle'] .amb { animation: amb-twinkle var(--d) ease-in-out var(--delay) infinite; }
@keyframes amb-rise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 0.9; } 85% { opacity: 0.6; } 100% { transform: translate(var(--drift), -110vh) scale(1.2); opacity: 0; } }
@keyframes amb-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 0.95; } 50% { transform: translate(var(--drift), 55vh) rotate(180deg); } 90% { opacity: 0.7; } 100% { transform: translate(0, 110vh) rotate(360deg); opacity: 0; } }
@keyframes amb-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #s-game .ambient { display: none; } }

/* ---------- v0.23: Mochi auf der Startseite (main.ts: mochiSend, Ziehen, Antippen) ---------- */
.mochi-wrap {
  position: relative; display: inline-block; touch-action: none; cursor: grab; isolation: isolate;
  /* Zurückfedern nach dem Ziehen mit leichtem Überschwingen */
  transition: transform 0.6s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.mochi-wrap.dragging { transition: none; cursor: grabbing; z-index: 5; }
.mochi-wrap.dragging .mascot { animation: none; }
.mochi-wrap .home-bubble { left: auto; right: -4px; top: 4px; font-size: 15px; line-height: 20px; }
.mochi-wrap.r-squish .mascot { animation: mochi-squish 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.mochi-wrap.r-spin .mascot { animation: home-spin 0.7s cubic-bezier(0.3, 1.3, 0.5, 1); }
.mochi-wrap.r-wiggle .mascot { animation: home-wiggle 0.6s ease-in-out; }
@keyframes home-spin { 30% { transform: translateY(-18px) rotate(-180deg) scale(0.95); } 60% { transform: translateY(-6px) rotate(-340deg); } 100% { transform: rotate(-360deg); } }
@keyframes home-wiggle { 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.mochi-prop { position: absolute; pointer-events: none; }
.mochi-prop svg { display: block; width: 100%; height: auto; }

/* Zur Seite drehen (3/4-Profil): Augen, Mund und Wangen wandern zur Laufrichtung, der Spross kippt nach vorne */
.go-journey .m-eyes, .go-journey .m-mouth, .go-journey .m-cheeks,
.go-rush .m-eyes, .go-rush .m-mouth, .go-rush .m-cheeks { animation: face-turn 0.28s ease-in-out both; }
.go-journey .m-sprout, .go-rush .m-sprout { transform-box: fill-box; transform-origin: 50% 100%; animation: sprout-lean 0.28s ease-in-out both; }
@keyframes face-turn { to { transform: translateX(22px) scaleX(0.86); } }
@keyframes sprout-lean { to { transform: rotate(16deg); } }

/* Reise: Mochi dreht sich zur Seite, hebt das Wanderbündel vor sich auf die Schulter (Stock schräg vor dem Körper,
   Sack links oben), gibt unter dem Gewicht kurz nach, holt Schwung und hüpft gleichmäßig nach rechts aus dem Bild.
   Das Bündel schaukelt im Takt. Drehpunkt = Hand unten in der Körpermitte. Die Bündel-Grafik liegt deckungsgleich über
   dem Maskottchen (gleiche Koordinaten, erweiterter Rand) */
.go-journey .mochi-prop {
  left: -43.75%; top: -40.3%; width: 143.75%; transform-origin: 58.3% 86.2%;
  animation: bundle-lift 0.42s cubic-bezier(0.3, 1.45, 0.5, 1) 0.18s both, bundle-sway 0.28s ease-in-out 0.75s infinite alternate,
    bundle-hop 0.28s ease-in-out 0.75s infinite;
}
.go-journey { animation: journey-off 1.45s both; }
.go-journey .mascot { animation: bundle-land 0.3s ease-out 0.45s, journey-hop 0.28s ease-in-out 0.75s infinite; }
@keyframes bundle-lift { from { transform: rotate(70deg) scale(0.6); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }
@keyframes bundle-sway { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }
@keyframes bundle-land { 40% { transform: scale(1.06, 0.91); } 100% { transform: none; } }
@keyframes journey-off {
  0%, 46% { transform: none; animation-timing-function: ease-out; }
  52% { transform: translateX(-6px) rotate(-3deg); animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.6); }
  100% { transform: translateX(88vw) rotate(3deg); }
}
/* Hüpfen über translate/scale statt transform: So hüpft das Bündel (eigene Schaukel-Drehung) gleich hoch mit */
@keyframes journey-hop { 0%, 100% { translate: 0 0; scale: 1.04 0.95; } 50% { translate: 0 -13px; scale: 0.97 1.04; } }
@keyframes bundle-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -13px; } }

/* Rush: dreht sich zur Seite, duckt sich, flitzt mit Speed-Linien davon */
.go-rush { animation: rush-off 0.82s both; }
.go-rush .mochi-prop {
  right: 92%; top: 30%; width: 120px; height: 46%;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(59, 36, 51, 0.35) 9px 13px);
  border-radius: 999px; animation: rush-lines 0.82s ease-out both;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
@keyframes rush-off {
  0%, 30% { transform: none; animation-timing-function: ease-out; }
  45% { transform: translateX(-10px) scale(1.1, 0.86); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  100% { transform: translateX(105vw) skewX(-14deg) scale(1.08, 0.94); }
}
@keyframes rush-lines { 0%, 45% { opacity: 0; transform: scaleX(0.2); transform-origin: right; } 60% { opacity: 1; } 100% { opacity: 0.8; transform: scaleX(1.4); transform-origin: right; } }

/* Sternenweg: Sternschnuppe fällt, Mochi springt hoch und fängt sie, es funkelt */
.go-stars .mochi-prop { left: 50%; top: -150px; width: 34px; margin-left: -17px; animation: star-fall 1.08s ease-in both; }
.go-stars .mascot { animation: star-jump 1.08s ease-in-out both; }
@keyframes star-fall {
  0% { transform: translate(60px, -40px) rotate(0) scale(0.7); opacity: 0; filter: drop-shadow(0 0 0 #FFD45E); }
  15% { opacity: 1; }
  55% { transform: translate(0, 118px) rotate(260deg) scale(1); }
  70% { transform: translate(0, 108px) rotate(300deg) scale(1.6); filter: drop-shadow(0 0 10px #FFD45E); }
  100% { transform: translate(0, 108px) rotate(330deg) scale(2.4); opacity: 0; filter: drop-shadow(0 0 16px #FFD45E); }
}
@keyframes star-jump { 0%, 35% { transform: none; } 45% { transform: scale(1.08, 0.9); } 60% { transform: translateY(-30px) scale(0.95, 1.06); } 80% { transform: translateY(-6px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mochi-wrap, .mochi-wrap .mascot, .mochi-prop { animation: none !important; transition: none !important; } }

/* ---------- v0.23: Siegfenster schlank ---------- */
/* Sternenweg-Belohnung: kleiner Stern-Knopf mit rotem Punkt oben rechts statt Textbalken */
#panel .panel-corner {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--gold); border: 3px solid var(--edge); border-radius: 999px; box-shadow: 0 3px 0 var(--edge);
  animation: nudge 1.6s ease-in-out infinite;
}
#panel .panel-corner svg { width: 22px; height: 22px; color: #3b2433; }
#panel .panel-corner .dot { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--danger); border: 2.5px solid var(--tile); }
#panel .panel-corner:active { transform: translateY(3px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #panel .panel-corner { animation: none; } }

/* ---------- v0.23: Siegfenster-Proportionen ---------- */
/* Sterne direkt unter Mochi, kompakt von oben nach unten: Sterne – Titel – Album – (Satz) – Münzen – Knöpfe */
#s-game #panel.panel-win { padding: 18px 18px 18px; }
#s-game #panel.panel-win #stars { margin: 0 0 6px; min-height: 52px; }
#s-game #panel.panel-win #stars svg { width: 44px; height: 44px; }
#s-game #panel.panel-win #stars svg:nth-child(2) { width: 56px; height: 56px; transform: translateY(-10px); }
#s-game #panel.panel-win h2 { font-size: 22px; margin: 0; }
#s-game #panel.panel-win .album-new { margin: 6px 0 0; }
#s-game #panel.panel-win p { margin: 8px 0 0; }
#s-game #panel.panel-win p:empty { display: none; }
#s-game #panel.panel-win .chips { margin: 16px 0 16px; }
#s-game #panel.panel-win .chips > * { font-size: 16px; padding: 4px 14px; }

/* Erstes Level: Tipp-Kreis tippt immer wieder auf den markierten Pfeil (gleicher Kreis wie in den Erklär-Demos) */
.tap-hint { z-index: 4; pointer-events: none; animation: demo-tap 1.3s ease-out 0.2s infinite; }
@media (prefers-reduced-motion: reduce) { .tap-hint { animation: none; opacity: 0.8; transform: none; } }

/* ---------- Website-Demo (demo/play-extra.css) ---------- */
/* Eingebettet auf der Startseite: Wischen über der Demo soll die Seite weiter scrollen können */
html, body { overscroll-behavior: auto; }
.hud-inner { justify-content: space-between; }

/* Weltenwahl unten (dort, wo im Spiel die Booster sitzen) */
.world-pick { flex: none; display: flex; justify-content: center; gap: 10px; padding: 4px 0 clamp(10px, 3dvh, 24px); }
.world-chip {
  width: 50px; height: 50px; padding: 5px; display: grid; place-items: center; cursor: pointer;
  background: var(--tint); border: 3px solid var(--edge); border-radius: 16px; box-shadow: 0 3px 0 var(--edge);
}
.world-chip img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.world-chip[aria-current="true"] { transform: translateY(-3px); box-shadow: 0 6px 0 var(--edge); outline: 3px solid var(--gold); outline-offset: 2px; }
.world-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.world-chip:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }