/* Hasenwiese */

@font-face {
  font-family: 'Baloo 2';
  src: url('./fonts/baloo2.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('./fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --cream: #fdf6e6;
  --paper: #fffbf2;
  --ink: #4a3529;
  --ink-soft: #7a5f4d;
  --line: #e2cfab;
  --grass: #a8d68c;
  --grass-deep: #6fae5a;
  --pink: #c22f6b;
  --pink-deep: #9e2257;
  --bloom: #f47aa6;
  --sun: #fbd56b;
  --sun-deep: #e6a93a;
  --berry: #e05a7a;
  /* Gebietsfarben: kräftig, mit gut getrennten Farbtönen und unterschiedlicher Helligkeit.
     Reihenfolge = COLOR_NAMES: Grün, Lila, Gelb, Pink, Orange, Blau, Türkis, Rot, Braun. */
  --p0: #7fd35a;
  --p1: #b38cf2;
  --p2: #ffd83d;
  --p3: #ff7fb8;
  --p4: #ffa04a;
  --p5: #5aaef5;
  --p6: #3fd6c0;
  --p7: #f2655a;
  --p8: #c79a6e;
  --p9: #6681ed;
  --p0d: #2f7a1c;
  --p1d: #5b2fa8;
  --p2d: #8a6a00;
  --p3d: #a8205e;
  --p4d: #a3500a;
  --p5d: #17599e;
  --p6d: #0f7a6b;
  --p7d: #9a1f17;
  --p8d: #5c3a1c;
  --p9d: #233b91;
  /* Flächen und Schatten (im Dunkelmodus überschrieben) */
  --shadow: 120 80 40;
  --stone: #fffaf0;
  --stone-edge: #d8c7a6;
  --stone-done: #fff1f5;
  --stone-done-edge: #ecc0cd;
  --stone-lock: rgb(255 255 255 / .55);
  --stone-current: #fff;
  --sign: #b98a5c;
  --sign-edge: #8f6440;
  --board: #fffaf0;
  --board-edge: #e3d3b4;
  --game-top: #fff8e6;
  --game-a: #f6f0dc;
  --game-b: #e8f2d2;
  --warn-bg: #fff0f2;
  --warn-edge: #f2c1cb;
  --on-bg: #eaf6dd;
  --on-edge: #b9dc9d;
  --menu-hover: #fdf0d2;
  --muted-mark: rgb(74 53 41 / .14);
  --placeholder: #8f7863;
  --error: #b8324f;
  --toast-bg: #4a3529;
  --toast-ink: #fff8ec;
  --x-mix: #fff;
  --path: rgb(255 250 235 / .75);
  --desk-a: #dff0c6;
  --desk-b: #ffe9c4;
  /* Kapitel-Landschaften (Tag): Himmel, Grund, Silhouette */
  --t-meadow-sky: #eaf6d2; --t-meadow: #bfe39d; --t-meadow-hill: #9fd27a;
  --t-field-sky: #fbf0c8; --t-field: #ecd48a; --t-field-hill: #dcbc5e;
  --t-hills-sky: #e6f2e2; --t-hills: #a9d6a4; --t-hills-hill: #82bf86;
  --t-forest-sky: #d6ead9; --t-forest: #7fb889; --t-forest-hill: #3f7a54;
  --t-mountain-sky: #dfe9f4; --t-mountain: #b7c6d4; --t-mountain-hill: #8a9db2;
  --t-snow-sky: #eaf3fb; --t-snow: #dfeaf5; --t-snow-hill: #c3d6ea;
  --t-night-sky: #3b4675; --t-night: #222a52; --t-night-hill: #161c3c;

  --display: 'Baloo 2', 'Nunito', ui-rounded, system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
  accent-color: var(--pink-deep);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
::selection { background: var(--sun); color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; border-radius: 10px; }
.defs { position: absolute; width: 0; height: 0; }
[hidden] { display: none !important; }
svg { display: block; }

.app {
  position: relative;
  max-width: 560px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- Gemeinsame Knöpfe ---------- */

.icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--line), 0 6px 14px rgb(var(--shadow) / .1);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

.cta {
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  min-height: 64px;
  padding: 8px 20px;
  border: 0;
  border-radius: 22px;
  background: var(--pink);
  color: #fff;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 6px 0 var(--pink-deep), 0 12px 24px rgb(201 53 115 / .3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s var(--ease-out), box-shadow .15s;
  text-shadow: 0 1px 0 rgb(100 20 55 / .3);
}
.cta small {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  opacity: .92;
  text-shadow: none;
}
.cta:hover { filter: brightness(1.04); }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-deep); }
.cta.small { min-height: 50px; font-size: 20px; width: auto; padding: 6px 26px; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.ghost-btn svg { width: 20px; height: 20px; }
.ghost-btn:hover { border-color: var(--sun-deep); }

/* ---------- Karte ---------- */

.map-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.map-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--safe-top)) 18px 12px;
  background: var(--cream);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 6px 18px rgb(var(--shadow) / .1);
}
.brand {
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}
.map-top-right { display: flex; align-items: center; gap: 10px; }
.flowers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 14px 0 10px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--line);
  font-family: var(--display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.flowers svg { width: 26px; height: 26px; color: var(--bloom); }

.map-scroll {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  margin-top: -28px;
}
.map-scroll::-webkit-scrollbar { display: none; }

.trail { position: relative; padding: 40px 0 30px; }

/* Kapitel-Themen: Grund, Horizont, Silhouette und Hasenart. Hell/dunkel über die Variablen weiter unten. */
[data-theme="meadow"]   { --sky: var(--t-meadow-sky);   --ground: var(--t-meadow);   --hill: var(--t-meadow-hill);   --hare-fur: #fff8ef; --hare-paw: #fff8ef; --hare-ear: #ff9ec0; --hare-tail: #fff; }
[data-theme="field"]    { --sky: var(--t-field-sky);    --ground: var(--t-field);    --hill: var(--t-field-hill);    --hare-fur: #d9a46b; --hare-paw: #f1d3ad; --hare-ear: #f2a98f; --hare-tail: #fff4e4; }
[data-theme="hills"]    { --sky: var(--t-hills-sky);    --ground: var(--t-hills);    --hill: var(--t-hills-hill);    --hare-fur: #b9b2ab; --hare-paw: #e3ddd6; --hare-ear: #f3b2c2; --hare-tail: #fff; }
[data-theme="forest"]   { --sky: var(--t-forest-sky);   --ground: var(--t-forest);   --hill: var(--t-forest-hill);   --hare-fur: #4b3f3a; --hare-paw: #6c5d56; --hare-ear: #c98395; --hare-tail: #efe6dc; --hare-eye: #1a1310; --hare-muzzle: #6c5d56; --hare-mouth: #e9b8c2; --hare-line: #1f1814; }
[data-theme="mountain"] { --sky: var(--t-mountain-sky); --ground: var(--t-mountain); --hill: var(--t-mountain-hill); --hare-fur: #8a7464; --hare-paw: #c9b6a6; --hare-ear: #e39aa9; --hare-tail: #f4ece4; }
[data-theme="snow"]     { --sky: var(--t-snow-sky);     --ground: var(--t-snow);     --hill: var(--t-snow-hill);     --hare-fur: #ffffff; --hare-paw: #ffffff; --hare-ear: #f8c6d4; --hare-tail: #fff; --hare-line: #6b7a8c; --hare-eye: #2b3242; }
[data-theme="night"]    { --sky: var(--t-night-sky);    --ground: var(--t-night);    --hill: var(--t-night-hill);    --hare-fur: #e8e2f5; --hare-paw: #f5f1fc; --hare-ear: #c9a8f0; --hare-tail: #fff; --hare-line: #3a3256; }

.chapter {
  position: relative;
  padding: 0 0 20px;
  background: linear-gradient(to top, var(--ground), var(--sky));
}
.chapter.ahead { filter: saturate(.75); }
.chapter.ahead .step { opacity: .8; }

/* Tor zum nächsten Kapitel: dessen Landschaft ragt als Silhouette ins aktuelle Kapitel. */
.gate { position: relative; height: 120px; pointer-events: none; background: linear-gradient(var(--ground), transparent); }
.gate svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--hill); filter: drop-shadow(0 -2px 0 rgb(0 0 0 / .06)); }
.gate .row { fill: none; stroke: rgb(0 0 0 / .1); stroke-width: 3; }
.gate .cap { fill: #fff; }
.gate .moon { fill: #fff3c4; }

.sign {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px auto 6px;
  width: max-content;
  padding: 8px 18px 9px 10px;
  border-radius: 18px;
  background: var(--sign);
  color: #fff8ec;
  box-shadow: 0 4px 0 var(--sign-edge);
}
.sign > span { display: grid; }
.sign-hare { width: 40px; height: 40px; }
.sign b { font-family: var(--display); font-size: 21px; line-height: 1.1; }
.sign span span { font-size: 14px; font-weight: 700; opacity: .9; }

.step { position: relative; z-index: 2; display: flex; justify-content: center; height: 92px; }
.stone {
  position: relative;
  translate: clamp(-28vw, var(--x), 28vw) 0;
  display: grid;
  place-items: center;
  width: 66px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50% / 46%;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 6px 0 var(--stone-edge), 0 10px 16px rgb(var(--shadow) / .14);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .2s var(--spring);
}
.deco {
  position: absolute;
  top: 26px;
  right: 9%;
  width: 26px;
  height: 26px;
  color: hsl(calc(var(--d) * 60 + 320) 85% 82%);
  opacity: .9;
  pointer-events: none;
}
.deco.left { right: auto; left: 10%; }
.stone:active { transform: translateY(3px) scale(.97); }
.stone.done { background: var(--stone-done); box-shadow: 0 6px 0 var(--stone-done-edge), 0 10px 16px rgb(var(--shadow) / .14); }
.stone.current {
  width: 82px;
  height: 70px;
  font-size: 29px;
  background: var(--stone-current);
  box-shadow: 0 0 0 6px var(--sun), 0 8px 0 6px var(--sun-deep), 0 16px 26px rgb(var(--shadow) / .22);
}
.stone.locked { background: var(--stone-lock); box-shadow: 0 5px 0 rgb(0 0 0 / .12); cursor: default; color: var(--ink-soft); }
.stone .lock { width: 22px; height: 22px; color: rgb(74 53 41 / .45); }
.blooms {
  position: absolute;
  bottom: -13px;
  left: 50%;
  display: flex;
  gap: 1px;
  translate: -50% 0;
}
.blooms svg { width: 17px; height: 17px; color: var(--muted-mark); }
.blooms svg.on { color: var(--bloom); filter: drop-shadow(0 1px 0 rgb(170 60 100 / .3)); }
.stone.boss {
  width: 92px;
  height: 78px;
  font-size: 26px;
  background: #fff6d6;
  box-shadow: 0 0 0 5px #e9b949, 0 8px 0 5px #b8862a, 0 16px 26px rgb(var(--shadow) / .25);
}
.stone.boss .crown { position: absolute; top: -26px; width: 40px; height: 40px; }
.stone.boss.locked b { opacity: .5; }
.boss-step { height: 140px; align-items: center; margin-top: 10px; }

.path { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.path path {
  fill: none;
  stroke: var(--path);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 2 26;
}

.map-hare {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}
.map-hare svg {
  width: 62px;
  height: 62px;
  translate: -50% -108%;
  filter: drop-shadow(0 4px 4px rgb(var(--shadow) / .2));
  animation: idle 2.6s ease-in-out infinite;
}

.map-dock {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  padding: 18px 18px calc(16px + var(--safe-bottom));
  background: var(--cream);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -6px 18px rgb(var(--shadow) / .1);
}
.dock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.install-row { display: grid; }
.install-row .ghost-btn { border-style: dashed; }

/* ---------- Spiel ---------- */

.game-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  padding: calc(12px + var(--safe-top)) max(6px, env(safe-area-inset-right)) calc(16px + var(--safe-bottom)) max(6px, env(safe-area-inset-left));
  background: linear-gradient(var(--sky) 0%, var(--ground) 100%);
}
.game-view.boss .board { box-shadow: 0 0 0 4px #e9b949, 0 8px 0 4px #b8862a, 0 18px 36px rgb(var(--shadow) / .25); }

/* Landschaft hinter dem Brett */
.scenery { position: absolute; left: -16px; right: -16px; bottom: -8px; width: calc(100% + 32px); height: 34%; fill: var(--hill); pointer-events: none; }
.scenery .row { fill: none; stroke: rgb(0 0 0 / .1); stroke-width: 3; }
.scenery .cap { fill: #fff; }
.scenery .moon { fill: #fff3c4; }

.game-top { display: grid; grid-template-columns: 46px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px; }
.game-top .icon-btn { grid-row: 1 / 3; }
.game-top .level-head { grid-row: 1 / 3; }
.meter { display: flex; justify-content: flex-end; gap: 2px; }
.meter svg { width: 20px; height: 20px; color: var(--muted-mark); transition: color .3s, transform .3s var(--spring); }
.meter svg.on { color: var(--bloom); }
.level-head h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; }
.level-head p { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-soft); }

.hearts { display: flex; gap: 2px; }
.heart { width: 28px; height: 28px; color: var(--berry); transition: transform .3s var(--spring), color .3s; }
.heart.lost { color: var(--muted-mark); }
.heart.break { animation: heartbreak .55s var(--ease-out); }

.board-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.board {
  --n: 6;
  position: relative;
  z-index: 1;
  --gap: clamp(2px, calc(14px / var(--n)), 4px);
  --edge: clamp(2px, calc(18px / var(--n)), 3px);
  --seam: 1px;
  --round: clamp(7px, calc(80px / var(--n)), 14px);
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: min(100%, calc(100dvh - 330px), 520px);
  aspect-ratio: 1;
  padding: 4px;
  border-radius: 18px;
  background: var(--board);
  box-shadow: 0 8px 0 var(--board-edge), 0 18px 36px rgb(var(--shadow) / .18);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board.lost { filter: saturate(.4); transition: filter .6s; }

.cell {
  --fill: var(--p0);
  --dark: var(--p0d);
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fill);
  border-radius: var(--c1) var(--c2) var(--c3) var(--c4);
  /* Gebietsgrenzen: dicke Kante, innen nur ein feiner Saum. */
  box-shadow:
    inset 0 var(--tt) 0 0 var(--paper),
    inset calc(var(--tr) * -1) 0 0 0 var(--paper),
    inset 0 calc(var(--tb) * -1) 0 0 var(--paper),
    inset var(--tl) 0 0 0 var(--paper);
  cursor: pointer;
  touch-action: none;
  transition: filter .15s;
}
.cell::before {
  /* zarter Rasterpunkt innerhalb eines Gebiets */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 .5px rgb(74 53 41 / .07);
  pointer-events: none;
}
.p0 { --fill: var(--p0); --dark: var(--p0d); }
.p1 { --fill: var(--p1); --dark: var(--p1d); }
.p2 { --fill: var(--p2); --dark: var(--p2d); }
.p3 { --fill: var(--p3); --dark: var(--p3d); }
.p4 { --fill: var(--p4); --dark: var(--p4d); }
.p5 { --fill: var(--p5); --dark: var(--p5d); }
.p6 { --fill: var(--p6); --dark: var(--p6d); }
.p7 { --fill: var(--p7); --dark: var(--p7d); }
.p8 { --fill: var(--p8); --dark: var(--p8d); }
.p9 { --fill: var(--p9); --dark: var(--p9d); }

@media (hover: hover) {
  .cell:hover { filter: brightness(1.05) saturate(1.1); }
}
.cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; z-index: 2; }

.m { position: absolute; pointer-events: none; opacity: 0; }
.m.x { width: 52%; height: 52%; color: var(--dark); opacity: 0; }
.m.h { width: 92%; height: 92%; filter: drop-shadow(0 2px 2px rgb(74 53 41 / .25)); }
.cell[data-m="2"]:not(.target-x) { background: color-mix(in srgb, var(--fill) 78%, var(--x-mix)); }
.board[data-size="5"] .m.x { width: 42%; height: 42%; }
.cell[data-m="2"] .m.x { opacity: 1; }
.cell[data-m="1"] .m.h { opacity: 1; }

.cell[data-m="2"].drop .m.x { animation: drop .26s var(--ease-out) var(--delay, 0ms) both; }
.cell[data-m="1"].pop .m.h { animation: pop .5s var(--spring) both; }
.cell.shake { animation: shake .42s var(--ease-out); }
.cell[data-m="1"].wave .m.h { animation: wave .7s var(--spring) var(--delay, 0ms) both; }

/* Hinweis-Darstellung */
.cell.focus { filter: brightness(1.04); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .9); }
.cell.target-x::after,
.cell.target-h::after,
.cell.wrong::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: calc(var(--round) - 3px);
  border: 3px dashed var(--ink);
  animation: breathe 1.2s ease-in-out infinite;
  pointer-events: none;
}
.cell.target-h::after { border-color: var(--pink-deep); border-style: solid; }
.cell.wrong::after { border-color: var(--berry); border-style: solid; }
.cell.target-x .m.x { opacity: .35; }
.cell.target-h .m.h { opacity: .45; }

.board-loading {
  position: absolute;
  z-index: 3;
  border-radius: 18px;
  background: var(--paper);
  padding: 24px;
  text-align: center;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--ink-soft);
}
.board-loading p { margin: 0; }
.board-loading progress { width: min(220px, 80%); height: 12px; accent-color: var(--pink); }
.board-loading small { font-variant-numeric: tabular-nums; }
.hop svg { width: 72px; height: 72px; animation: hop .7s var(--ease-out) infinite alternate; }

.coach {
  /* Feste Höhe: Das Brett darf nicht springen, wenn der Text wechselt. */
  height: calc(6 * 1.45em + 24px);
  overflow-y: auto;
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--line);
  font-size: 15px;
  font-weight: 600;
}
.coach p { margin: 0; max-width: 62ch; }
.coach.warn { background: var(--warn-bg); box-shadow: 0 3px 0 var(--warn-edge); }
.chip {
  display: inline-block;
  margin-right: 2px;
  padding: 1px 9px;
  border-radius: 99px;
  background: var(--sun);
  font-size: 14px;
  font-weight: 800;
}

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tools.two { grid-template-columns: repeat(2, 1fr); }
.tool { position: relative; }
.badge {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--sun);
  color: #4a3529;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.tool:disabled .badge { background: var(--muted-mark); color: var(--ink); }
.stars-why { font-size: 15px; }
.tool {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 62px;
  padding: 8px 6px;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--line);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s var(--ease-out), box-shadow .15s, opacity .2s;
}
.tool svg { width: 26px; height: 26px; }
.tool:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.tool:disabled { opacity: .45; cursor: default; }
#hintBtn svg { color: var(--sun-deep); }
.tool.toggle[aria-pressed="true"] { background: var(--on-bg); box-shadow: 0 4px 0 var(--on-edge); }
.tool.toggle[aria-pressed="true"] svg { color: var(--grass-deep); }


/* ---------- Sieg-Sheet ---------- */

.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  align-items: end;
  background: rgb(60 40 25 / .28);
  animation: fade .3s ease-out;
}
.sheet {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 22px calc(22px + var(--safe-bottom));
  border-radius: 32px 32px 0 0;
  background: var(--cream);
  text-align: center;
  animation: rise .45s var(--ease-out);
}
.sheet-hare svg { width: 108px; height: 108px; margin-top: -54px; filter: drop-shadow(0 6px 8px rgb(var(--shadow) / .2)); animation: hop .5s var(--ease-out) 2 alternate; }
.sheet h2 { margin: 0; font-family: var(--display); font-size: 36px; font-weight: 800; line-height: 1; }
.sheet p { margin: 0; color: var(--ink-soft); font-weight: 700; }
.stars { display: flex; gap: 10px; margin: 4px 0; }
.stars svg { width: 54px; height: 54px; color: var(--muted-mark); }
.stars svg.on { color: var(--bloom); animation: bloom .5s var(--spring) calc(.26s + var(--k) * .18s) both; filter: drop-shadow(0 3px 0 rgb(170 60 100 / .25)); }
.code-line { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.code-chip {
  padding: 4px 12px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .04em;
  cursor: copy;
}
.sheet .cta { margin-top: 6px; }
.sheet .ghost-btn { width: 100%; }

/* ---------- Dialoge ---------- */

.dialog {
  width: min(92vw, 420px);
  padding: 22px;
  border: 0;
  border-radius: 28px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 60px rgb(var(--shadow) / .3);
}
.dialog::backdrop { background: rgb(60 40 25 / .35); }
.dialog h2 { margin: 0 0 6px; font-family: var(--display); font-size: 28px; line-height: 1.1; }
.dialog p { margin: 0 0 14px; color: var(--ink-soft); font-weight: 600; }
#learningDialog .dialog-actions { flex-direction: column-reverse; }
#learningDialog .dialog-actions button { width: 100%; }
.field { display: grid; gap: 6px; font-weight: 800; }
.field input {
  height: 52px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .05em;
  text-transform: uppercase;
  caret-color: var(--pink-deep);
}
.field input:focus { outline: none; border-color: var(--pink-deep); }
.field input::placeholder { color: var(--placeholder); text-transform: none; letter-spacing: 0; font-size: 17px; }
.field-error { margin: 8px 0 0 !important; color: var(--error) !important; }
.field-hint { min-height: 1.4em; margin: 6px 0 0 !important; font-size: 15px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; }
.seg legend { margin-bottom: 6px; padding: 0; font-weight: 800; }
.seg label {
  position: relative;
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--line);
  font-weight: 800;
  cursor: pointer;
}
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-deep); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.seg label:has(input:disabled) { opacity: .4; cursor: not-allowed; }

.update-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(78px + var(--safe-top));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--line), 0 12px 28px rgb(var(--shadow) / .18);
  font-weight: 800;
  animation: rise .3s var(--ease-out);
}
.update-bar .cta.small { min-height: 44px; font-size: 18px; padding: 4px 18px; }

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(150px + var(--safe-bottom));
  z-index: 20;
  translate: -50% 0;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--toast-bg);
  color: var(--toast-ink);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgb(var(--shadow) / .25);
  animation: rise .25s var(--ease-out);
}

/* ---------- Bewegung ---------- */

@keyframes pop {
  0% { transform: scale(.2) translateY(30%); opacity: 0; }
  60% { transform: scale(1.12, .92); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes drop {
  from { transform: scale(1.6); opacity: 0; }
  to { transform: scale(1); }
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-22%) scale(1.06, .96); }
}
@keyframes shake {
  0%, 100% { translate: 0; }
  20% { translate: -6px; }
  40% { translate: 5px; }
  60% { translate: -3px; }
  80% { translate: 2px; }
}
@keyframes heartbreak {
  0% { transform: scale(1); }
  30% { transform: scale(1.35) rotate(-10deg); color: var(--berry); }
  100% { transform: scale(1); }
}
@keyframes breathe {
  0%, 100% { opacity: .55; scale: .96; }
  50% { opacity: 1; scale: 1; }
}
@keyframes hop {
  from { transform: translateY(0) scale(1.04, .96); }
  to { transform: translateY(-14px) scale(.98, 1.02); }
}
@keyframes idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes bloom {
  from { transform: scale(0) rotate(-90deg); }
  to { transform: scale(1) rotate(0); }
}
@keyframes rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- Dunkelmodus: Die Wiese bei Mondlicht ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cream: #17192b;
    --paper: #23263d;
    --ink: #f3ead9;
    --ink-soft: #b8ab98;
    --line: #33385a;
    --pink: #e0558f;
    --pink-deep: #a8306a;
    --bloom: #ff8fbc;
    --berry: #ff6f8f;
    --sun: #f2c45a;
    --sun-deep: #b98a2c;

    /* Gebietsfarben etwas tiefer, damit sie nachts nicht blenden; Abstände der Farbtöne bleiben. */
    --p0: #5fb83f;
    --p1: #9c74e0;
    --p2: #e8c22a;
    --p3: #e9649f;
    --p4: #ec8a35;
    --p5: #3f93dc;
    --p6: #27b9a4;
    --p7: #dc4d43;
    --p8: #a87d55;
    --p9: #5973d4;
    --p0d: #173d0e;
    --p1d: #2c1660;
    --p2d: #4a3a00;
    --p3d: #5a0f32;
    --p4d: #552904;
    --p5d: #0b2f56;
    --p6d: #053d35;
    --p7d: #520e0a;
    --p8d: #2e1c0c;
    --p9d: #17245b;

    --shadow: 0 0 0;
    --stone: #d9dfe6;
    --stone-edge: #7b8a96;
    --stone-done: #f5d3e1;
    --stone-done-edge: #a8708a;
    --stone-lock: rgb(0 0 0 / .28);
    --stone-current: #fffaf0;
    --sign: #6e5236;
    --sign-edge: #3e2c1b;
    --board: #1f2238;
    --board-edge: #0f1122;
    --game-top: #262a46;
    --game-a: #1b1e33;
    --game-b: #141a26;
    --warn-bg: #3b2030;
    --warn-edge: #5a2a40;
    --on-bg: #1f3a28;
    --on-edge: #2d5a3a;
    --menu-hover: #30355a;
    --muted-mark: rgb(243 234 217 / .14);
    --placeholder: #9a8f80;
    --error: #ff8099;
    --toast-bg: #f3ead9;
    --toast-ink: #17192b;
    --x-mix: #000;
    --path: rgb(255 250 235 / .22);
    --desk-a: #1d2a22;
    --desk-b: #2a2338;
    /* Kapitel-Landschaften (Nacht): gleiche Orte bei Mondlicht */
    --t-meadow-sky: #12402d; --t-meadow: #0e5236; --t-meadow-hill: #0a3a26;
    --t-field-sky: #3a3418; --t-field: #4c4120; --t-field-hill: #2f2810;
    --t-hills-sky: #173a2c; --t-hills: #1d4a38; --t-hills-hill: #112c21;
    --t-forest-sky: #0f2a1d; --t-forest: #133626; --t-forest-hill: #081a10;
    --t-mountain-sky: #1c2738; --t-mountain: #2a3a52; --t-mountain-hill: #4a5f7c;
    --t-snow-sky: #1e2a42; --t-snow: #34476a; --t-snow-hill: #6f86a8;
    --t-night-sky: #1a1f42; --t-night: #121634; --t-night-hill: #0b0e24;
  }
  .chapter { color: var(--ink); }
  .stone .lock { color: rgb(243 234 217 / .45); }
  .cell::before { box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .2); }
  .cta { box-shadow: 0 6px 0 var(--pink-deep), 0 12px 24px rgb(0 0 0 / .35); }
  .stone { color: #2a2340; }
  .stone.locked, }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Größere Bildschirme ---------- */

@media (min-width: 900px) and (min-height: 640px) {
  body {
    background:
      radial-gradient(60% 50% at 15% 85%, var(--desk-a) 0%, transparent 70%),
      radial-gradient(50% 40% at 90% 10%, var(--desk-b) 0%, transparent 70%),
      var(--cream);
  }
  .app {
    max-width: 1080px;
    height: min(100dvh, 900px);
    margin-top: max(0px, calc((100dvh - 900px) / 2));
  }
  .map-view {
    left: 50%;
    width: 520px;
    translate: -50% 0;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgb(var(--shadow) / .16);
  }
  .game-view {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr auto;
    column-gap: 32px;
    padding: 28px 36px;
    border-radius: 36px;
    box-shadow: 0 30px 80px rgb(var(--shadow) / .16);
  }
  .game-top { grid-column: 1 / -1; }
  .board-stage { grid-row: 2 / 4; }
  .board { width: min(100%, calc(min(100dvh, 900px) - 150px), 640px); }
  .coach { grid-column: 2; align-self: end; }
  .tools { grid-column: 2; grid-template-columns: 1fr; align-self: start; }
  .tool { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; padding: 0 18px; min-height: 56px; font-size: 16px; }
    .sheet-backdrop { align-items: center; justify-items: center; }
  .sheet { width: 420px; border-radius: 32px; padding-top: 0; margin-top: 54px; }
  .toast { bottom: 40px; }
}

@media (max-height: 700px) and (max-width: 899px) {
  .game-view { gap: 8px; }
  .coach { height: calc(3 * 1.45em + 18px); padding: 9px 14px; font-size: 15px; }
  .tool { min-height: 54px; }
  .board { width: min(100%, calc(100dvh - 300px)); }
}

/* Hochformat: Feldgröße richtet sich nach der Breite, nicht nach Browserleisten.
   Bei wenig Höhe scrollt die Spielansicht, statt die Tippziele zu verkleinern. */
@media (max-width: 899px) and (orientation: portrait) {
  .game-view { overflow-y: auto; grid-template-rows: auto minmax(min-content, 1fr) auto auto; }
  .board-stage { min-height: min(520px, calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .board { width: min(100%, 520px); }
}

/* Handy quer: Brett links, Werkzeuge rechts. */
@media (orientation: landscape) and (max-height: 640px) {
  .app { max-width: none; }
  .game-view {
    grid-template-columns: auto minmax(220px, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 20px;
    padding: calc(8px + var(--safe-top)) 20px calc(8px + var(--safe-bottom));
  }
  .game-top { grid-column: 2; grid-row: 1; }
  .board-stage { grid-column: 1; grid-row: 1 / 4; }
  .board { width: calc(100dvh - 24px); padding: 5px; }
  .coach { grid-column: 2; grid-row: 2; height: auto; min-height: 0; align-self: center; font-size: 15px; }
  .tools { grid-column: 2; grid-row: 3; }
  .tool { min-height: 50px; }
    .map-view .map-dock { padding-top: 10px; }
}

@media (max-width: 380px) {
  .brand { font-size: 25px; }
  .heart { width: 22px; height: 22px; }
  .level-head h2 { font-size: 22px; white-space: nowrap; }
  .level-head p { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ghost-btn { padding: 0 10px; font-size: 15px; white-space: nowrap; }
  .game-top { gap: 8px; }
}