/* ===== Schriften (selbst gehostet, keine Google-Fonts-Anfragen) ===== */
@font-face { font-family: 'Fredoka'; font-weight: 400; font-display: swap; src: url('../fonts/fredoka-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2'); }

/* ===== Design-Tokens ===== */
:root {
  --bg: #fff4f8; --bg2: #ffe3ee; --card: rgba(255, 255, 255, .78); --card-solid: #fff;
  --ink: #7a3550; --text: #8a4a62; --muted: #b17a92; --line: #f6c6d8;
  --pink: #ff8fb3; --pink-d: #e8648f; --rose: #d0566f; --rose-d: #b8405e;
  --butter: #ffe9a8; --mint: #bdf0d9; --lav: #d9ccff; --orange: #f9b872; --sky: #bfe3ff;
  --shadow: 0 12px 34px rgba(208, 86, 111, .18);
  --shadow-s: 0 6px 16px rgba(208, 86, 111, .16);
  --radius: 24px; --radius-s: 14px;
  --font-h: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
:root[data-theme='night'] {
  --bg: #2b1b45; --bg2: #3b2560; --card: rgba(255, 255, 255, .09); --card-solid: #3a2658;
  --ink: #ffe3f0; --text: #f3d4e6; --muted: #c7a6c9; --line: rgba(255, 255, 255, .16);
  --shadow: 0 12px 34px rgba(0, 0, 0, .35); --shadow-s: 0 6px 16px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
:root[data-theme='sunset'] {
  --bg: #fff1e6; --bg2: #ffd9cc; --ink: #8c3b3b; --text: #9a5046; --muted: #c0876f; --line: #f7c5b0;
  --pink: #ff9a8a; --pink-d: #ee6a5a; --rose: #d9534f; --rose-d: #b83c3a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 400 17px/1.55 var(--font-b); color: var(--text); background: var(--bg); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-h); color: var(--ink); line-height: 1.12; margin: 0; letter-spacing: .01em; }
p { margin: 0; }
a { color: var(--rose); }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pink-d); outline-offset: 3px; border-radius: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden, [hidden] { display: none !important; }
.spr { display: block; }

/* ===== Buttons ===== */
.btn {
  --b: var(--pink-d); --bg-b: linear-gradient(180deg, #ff9dbd, #ff7aa6);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; cursor: pointer;
  font: 700 1rem/1 var(--font-h); letter-spacing: .02em; color: #fff; text-decoration: none; text-shadow: 0 1px 0 rgba(160, 40, 80, .35);
  border: 0; border-radius: 999px; padding: .85em 1.5em; background: var(--bg-b);
  box-shadow: 0 5px 0 var(--b), 0 12px 22px rgba(232, 100, 143, .3);
  transition: transform .12s, box-shadow .12s, filter .12s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 7px 0 var(--b), 0 16px 26px rgba(232, 100, 143, .32); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--b), 0 5px 10px rgba(232, 100, 143, .3); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn-lg { font-size: 1.2rem; padding: 1em 1.9em; }
.btn-sm { font-size: .88rem; padding: .6em 1.1em; box-shadow: 0 3px 0 var(--b), 0 8px 14px rgba(232, 100, 143, .25); }
.btn-ghost { --b: var(--line); background: var(--card-solid); color: var(--rose); text-shadow: none; box-shadow: 0 4px 0 var(--b), 0 8px 16px rgba(208, 86, 111, .1); }
.btn-ghost:hover { box-shadow: 0 6px 0 var(--b), 0 12px 20px rgba(208, 86, 111, .14); }
.btn-mint { --b: #7fcfae; --bg-b: linear-gradient(180deg, #a4ecca, #7fdcb4); text-shadow: 0 1px 0 rgba(30, 110, 80, .35); }
.btn-butter { --b: #e8bf55; --bg-b: linear-gradient(180deg, #ffe38a, #ffd05c); color: #7a4a10; text-shadow: none; }
.icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--card-solid); border: 2px solid var(--line); color: var(--rose); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-s); transition: transform .12s; }
.icon-btn:hover { transform: scale(1.08) rotate(-4deg); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn[aria-pressed='true'] { background: var(--pink); color: #fff; border-color: var(--pink-d); }

/* ===== Karten & Chips ===== */
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip { display: inline-flex; align-items: center; gap: .45em; padding: .35em .85em; border-radius: 999px; background: var(--card-solid); border: 2px solid var(--line); font: 700 .88rem/1 var(--font-h); color: var(--rose); }
.chip .spr { width: 1.3em; height: 1.3em; }

/* ===== Toasts ===== */
#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 300; display: grid; gap: 10px; width: min(92vw, 420px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--card-solid); color: var(--ink); border: 2px solid var(--pink); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow); animation: toast-in .45s cubic-bezier(.2, 1.4, .4, 1) both; font-weight: 700; }
.toast.out { animation: toast-out .35s ease-in both; }
.toast .spr { width: 36px; height: 36px; flex: none; }
.toast small { display: block; font-weight: 400; color: var(--muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(16px) scale(.95); } }

/* ===== Partikel-Effekte ===== */
.fx { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.fx .spr { width: 100%; height: 100%; }
.fx-burst { animation: burst .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes burst { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }
.fx-spark { animation: spark .8s ease-out forwards; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
@keyframes spark { 0% { transform: scale(.4) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(160deg); opacity: 0; } }
#confetti { position: fixed; inset: 0; z-index: 260; pointer-events: none; width: 100%; height: 100%; }

/* ===== Modal ===== */
.modal-ov { position: fixed; inset: 0; z-index: 200; background: rgba(90, 30, 60, .55); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 14px; animation: fade-in .2s both; overflow: auto; }
.modal { position: relative; width: min(100%, var(--mw, 760px)); max-height: calc(100vh - 28px); overflow: auto; background: var(--bg); border: 3px solid var(--pink); border-radius: 28px; box-shadow: 0 30px 80px rgba(80, 20, 50, .45); animation: pop-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px 20px; position: sticky; top: 0; background: var(--bg); z-index: 3; border-bottom: 2px dashed var(--line); }
.modal-head h2 { font-size: 1.45rem; flex: 1; min-width: 0; }
.modal-head .sub { font-size: .85rem; color: var(--muted); font-family: var(--font-b); font-weight: 700; display: block; }
.modal-body { padding: 16px 20px 22px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(30px) scale(.9); } }

/* ===== Spiele-Grundlayout (für alle Minispiele) ===== */
.g-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.g-hud { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.g-stat { display: inline-flex; align-items: center; gap: .5em; padding: .4em .9em; border-radius: 999px; background: var(--card-solid); border: 2px solid var(--line); font: 700 .95rem/1 var(--font-h); color: var(--ink); }
.g-stat b { color: var(--rose); font-size: 1.1em; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.g-stat .spr { width: 1.35em; height: 1.35em; }
.g-canvas { display: block; width: 100%; height: auto; border-radius: 20px; border: 3px solid var(--line); background: #ffe6ef; touch-action: none; box-shadow: var(--shadow-s); cursor: crosshair; }
.g-hint { text-align: center; color: var(--muted); font-size: .92rem; font-weight: 700; }
.g-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.g-title { font-size: 1.6rem; text-align: center; }
.g-center { text-align: center; }
.g-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 240, 246, .88); backdrop-filter: blur(4px); border-radius: 20px; z-index: 5; padding: 14px; animation: fade-in .25s both; }
:root[data-theme='night'] .g-overlay { background: rgba(43, 27, 69, .88); }
.g-result { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 360px; }
.g-result .big { font: 700 2.8rem/1 var(--font-h); color: var(--rose); }
.g-result .spr.cat { width: 110px; height: 110px; animation: bob 2.4s ease-in-out infinite; }
.g-result .earned { display: inline-flex; align-items: center; gap: .4em; font: 700 1.1rem var(--font-h); color: var(--rose); background: var(--butter); padding: .35em .9em; border-radius: 999px; }
.g-result .earned .spr { width: 1.3em; height: 1.3em; }
.g-new { font: 700 .95rem var(--font-h); color: #fff; background: var(--pink-d); border-radius: 999px; padding: .25em .8em; animation: wiggle 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes wiggle { 50% { transform: rotate(-4deg) scale(1.06); } }

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