/* Pico-Cashflow — Aquarell-Look der Schatzfinder Akademie, mobile-first */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --creme: #fdf6e3;
  --creme-tief: #f6ead0;
  --wald: #2e5339;
  --wald-hell: #4a7a58;
  --gold: #d9a441;
  --gold-hell: #ffe9b0;
  --rot: #c0392b;
  --rosa: #d977a8;
  --tinte: #3b2f23;
  --schatten: 0 6px 18px rgba(59, 47, 35, 0.18);
}

html, body { height: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--tinte);
  /* Aquarell-Dorf als Hintergrund, mit Creme-Schleier für Lesbarkeit */
  background:
    linear-gradient(to bottom, rgba(253, 246, 227, 0.82), rgba(253, 246, 227, 0.62) 45%, rgba(253, 246, 227, 0.85)),
    url('/cashflow/assets/dorf-hintergrund.webp') center top / cover no-repeat fixed,
    var(--creme);
  min-height: 100dvh;
  overscroll-behavior: none;
}
@media (max-width: 700px) {
  body { background-attachment: scroll; } /* fixed ruckelt auf iOS */
}

#app { max-width: 640px; margin: 0 auto; padding: 10px 12px calc(18px + env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; }

.kopf { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.kopf__titel { font-family: 'Alegreya', serif; font-size: clamp(19px, 4.6vw, 28px); font-weight: 800; color: var(--wald); flex: 1; text-align: center; }
.kopf__zurueck, .kopf__mute {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--wald);
  background: #fff; color: var(--wald); font-size: 18px; display: grid; place-items: center;
  text-decoration: none; cursor: pointer; box-shadow: var(--schatten); flex-shrink: 0;
}
.kopf__zurueck:active, .kopf__mute:active { transform: scale(0.92); }

#screen { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mitte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 10px 0 24px; }
.mitte > * { max-width: 100%; }
.mitte h2 { font-family: 'Alegreya', serif; font-size: clamp(24px, 6vw, 36px); color: var(--wald); }
.mitte p { font-size: 15px; max-width: 48ch; line-height: 1.5; }
.start__bild { width: min(44vw, 210px); border-radius: 24px; box-shadow: var(--schatten); border: 4px solid #fff; transform: rotate(-2deg); }

.stufen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.btn {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px;
  border: none; border-radius: 999px; padding: 13px 24px; cursor: pointer;
  background: var(--wald); color: var(--gold-hell); box-shadow: var(--schatten);
  transition: transform 0.12s ease;
}
.btn:active { transform: scale(0.94); }
.btn--gold { background: linear-gradient(145deg, #e7b653, var(--gold)); color: #4a3a12; }
.btn--zart { background: #fff; color: var(--wald); border: 2px solid var(--wald); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

/* ---------- Traum-Auswahl ---------- */
.traeume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.traum {
  border-radius: 18px; border: 2px solid var(--creme-tief); background: #fff; cursor: pointer;
  padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: 'Nunito', sans-serif; box-shadow: 0 4px 10px rgba(59,47,35,0.1);
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.traum:active { transform: scale(0.95); }
.traum:hover { border-color: var(--gold); }
.traum .emoji { font-size: 34px; }
.traum .name { font-weight: 800; font-size: 12.5px; text-align: center; line-height: 1.25; color: var(--tinte); }
.traum .preis { font-weight: 900; font-size: 14px; color: var(--gold); }

/* ---------- Finanzblatt ---------- */
.finanz {
  background: #fff; border: 2px solid var(--creme-tief); border-radius: 18px;
  padding: 10px 14px 12px; box-shadow: 0 3px 10px rgba(59,47,35,0.08);
  display: flex; flex-direction: column; gap: 8px;
}
.finanz__ziel { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.finanz__ziel span { margin-left: auto; font-weight: 900; color: var(--gold); }
.finanz__reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.finanz__wert {
  background: var(--creme); border-radius: 12px; padding: 6px 4px; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
}
.finanz__wert .label { font-size: 10px; font-weight: 800; color: #8a7a60; }
.finanz__wert b { font-size: 15px; color: var(--wald); }
.finanz__wert--frei { background: #e9f2e4; }
.finanz__wert--frei b { color: var(--wald-hell); }
.balken { height: 12px; border-radius: 999px; background: var(--creme-tief); overflow: hidden; }
.balken__voll { height: 100%; background: linear-gradient(90deg, var(--wald-hell), var(--gold)); border-radius: 999px; transition: width 0.5s ease; }
.finanz__fortschritt { font-size: 11px; font-weight: 700; color: #8a7a60; text-align: center; }

/* ---------- Spielbrett ---------- */
.brett { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; }
.feld {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 2px solid var(--creme-tief); display: grid; place-items: center;
  font-size: 19px; box-shadow: 0 3px 8px rgba(59,47,35,0.12);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.feld--zahltag { border-color: var(--gold); background: var(--gold-hell); }
.feld--pico {
  border-color: var(--wald); background: #eef2e4;
  transform: scale(1.35); z-index: 3;
}
.feld--pico::after {
  content: '🦊'; position: absolute; top: -20px; font-size: 17px;
}
.brett__mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.wuerfel-btn {
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font-size: 14px; padding: 0;
}
.wuerfel-btn .zahl { font-size: 36px; line-height: 1.1; }
.wuerfel-btn small { font-size: 12px; font-weight: 800; }
.traum-btn { background: linear-gradient(145deg, #e05f96, #c74b81); color: #fff; animation: pulst 1s ease infinite; }
@keyframes pulst {
  0%, 100% { box-shadow: 0 3px 8px rgba(59,47,35,0.15); }
  50% { box-shadow: 0 0 0 6px rgba(217, 100, 150, 0.35); }
}

/* ---------- Projekte-Leiste ---------- */
.projekte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.projekt {
  border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: #fff; border: 2px dashed #d5c49b; font-size: 16px; font-weight: 900;
  color: #a08e6a; padding: 8px 2px;
}
.projekt--voll { border: 2px solid var(--wald-hell); background: #eef2e4; color: var(--wald); }
.projekt--voll .emoji { font-size: 20px; }
/* ---------- Freunde-Panel ---------- */
.freunde-panel {
  background: #faeef4; border: 2px solid #e0b1c9; border-radius: 18px;
  padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 3px 10px rgba(59,47,35,0.08);
}
.freunde-panel__kopf { font-weight: 900; font-size: 14px; color: #a34e77; display: flex; align-items: center; gap: 8px; }
.freunde-panel__zahl { margin-left: auto; background: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.freunde-panel__slots { display: flex; gap: 8px; }
.freunde-panel__slot {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; background: #fff; border: 2px dashed #e0b1c9; color: #d9a8c2;
}
.freunde-panel__slot--voll { border: 2px solid #a34e77; background: #fff; }
.freunde-panel__boni { display: flex; flex-wrap: wrap; gap: 6px; }
.freunde-panel__bonus {
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 10px;
  background: #fff; color: #c4a3b5; border: 1.5px dashed #e0b1c9;
  display: inline-flex; align-items: center; gap: 4px;
}
.freunde-panel__bonus small { font-weight: 700; opacity: 0.7; }
.freunde-panel__bonus--aktiv { color: #a34e77; border: 1.5px solid #a34e77; background: #fff; }
.overlay__box .werte { font-weight: 900; color: var(--wald); font-size: 16px; }
.overlay__bild {
  width: min(100%, 260px); aspect-ratio: 1; object-fit: cover; margin: 0 auto;
  border-radius: 18px; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(59,47,35,0.25);
  display: block; background: #fff;
}

/* ---------- Pico ---------- */
.pico {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border: 2px solid var(--gold); border-radius: 16px;
  padding: 10px 14px; box-shadow: 0 4px 10px rgba(59,47,35,0.1);
  font-weight: 700; font-size: 14px; line-height: 1.4;
}
.pico .fuchs { font-size: 24px; flex-shrink: 0; }

/* ---------- Overlay (Ereignis / Sieg) ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(59, 47, 35, 0.45); z-index: 40;
  display: grid; place-items: center; padding: 18px;
}
.overlay__box {
  background: var(--creme); border-radius: 24px; padding: 22px 20px; max-width: 440px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 12px;
  text-align: center; animation: aufplopp 0.3s ease;
  max-height: 88dvh; overflow-y: auto;
}
@keyframes aufplopp {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.overlay__box h3 { font-family: 'Alegreya', serif; font-size: 22px; color: var(--wald); }
.overlay__box .gross { font-size: 44px; }
.overlay__box p { font-size: 14.5px; line-height: 1.45; }

.sterne { font-size: clamp(34px, 9vw, 52px); letter-spacing: 5px; }
.sticker { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 24px; }

.konfetti {
  position: fixed; width: 10px; height: 14px; top: -20px; z-index: 60;
  pointer-events: none; border-radius: 3px;
  animation: fallen linear forwards;
}
@keyframes fallen {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}

@media (max-width: 480px) {
  .finanz__reihe { grid-template-columns: repeat(2, 1fr); }
  .traeume { grid-template-columns: repeat(2, 1fr); }
}