/* Farbklecks – Grundlagen: Farben, Schriften, Knöpfe, Karten, Dialoge.
   Look: a toy-like sticker world on a polka-dot craft table. Thick ink outlines, hard "sticker" shadows,
   bright crayon colours. Baloo 2 for playful headings and buttons, Andika (made for children learning to
   read) for every letter, syllable and word the child reads. One deliberate bright look, no dark variant. */

@font-face { font-family: "Baloo 2"; src: url("../fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../fonts/andika-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../fonts/andika-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --table: #6c7cf5;
  --table-dot: #7f8ef8;
  --table-deep: #5664e0;
  --ink: #23203d;
  --sticker: #ffffff;
  --sun: #ffc93c;
  --sun-deep: #f5ae00;
  --box: #ef4b3f;
  --box-hi: #ff6b5e;
  --mint: #7be0b0;
  --sky: #8fd3ff;
  --rose: #ff9cc6;
  --lilac: #c7a6ff;
  --apricot: #ffb366;
  --leaf: #3fd16b;
  --muted: #5d5a80;
  --wood: #f3c891;
  --cur: #e5322d;
  --paper: #ffffff;

  --font: "Baloo 2", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
  --read: "Andika", "Baloo 2", ui-rounded, system-ui, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --btn: 66px;
  --btn-w: 76px;
  --ic: 34px;
  --lbl: 12.5px;
  --radius: 18px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --top: max(12px, env(safe-area-inset-top, 0px));
  --bottom: max(10px, env(safe-area-inset-bottom, 0px));

  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background-color: var(--table);
  background-image:
    radial-gradient(ellipse at 50% 120%, rgba(35, 32, 61, .18), transparent 60%),
    radial-gradient(var(--table-dot) 18%, transparent 19%);
  background-size: 100% 100%, 28px 28px;
  color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.emoji { font-family: var(--emoji); font-weight: 400; }

/* ---------- screens ---------- */

#screens { position: fixed; inset: 0; }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--top);
  padding-bottom: var(--bottom);
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.screen.in { animation: screen-in .32s cubic-bezier(.2, 1.1, .4, 1); }
.screen.in-back { animation: screen-back .3s cubic-bezier(.2, 1.1, .4, 1); }
@keyframes screen-in { from { transform: translateX(28px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes screen-back { from { transform: translateX(-28px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 2px 12px;
  flex: none;
}
.topbar .title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}
/* the colouring screen's title is the picture's name: a word the child reads */
.screen-color .topbar .title { font-family: var(--read); font-weight: 700; letter-spacing: 0; }

.star-count {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 16px 0 8px;
  border: 3px solid var(--ink);
  border-radius: 99px;
  background: var(--sticker);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.star-count .star-ic { width: 38px; height: 38px; }
button.star-count { color: inherit; cursor: pointer; touch-action: manipulation; transition: transform .12s ease, box-shadow .12s ease; }
button.star-count:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
button.star-count:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.star-count.bump { animation: bump .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } }

/* ---------- sticker buttons ---------- */

.btn {
  position: relative;
  flex: none;
  width: var(--btn-w);
  height: var(--btn);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--sticker);
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
}
.btn:active, .btn.press { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.btn.on { background: var(--sun); transform: translateY(-2px) rotate(-3deg); box-shadow: 0 6px 0 var(--ink); }
.btn.on:active { transform: translateY(2px) rotate(-3deg); box-shadow: 0 2px 0 var(--ink); }
.btn[disabled], .btn.off { opacity: .4; pointer-events: none; }
.btn .ic { width: var(--ic); height: var(--ic); flex: none; pointer-events: none; }
.btn .emoji { font-size: calc(var(--ic) * .85); line-height: var(--ic); text-align: center; pointer-events: none; }
.btn .lbl {
  font-size: var(--lbl);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 2px;
}
.btn-round { --btn: 56px; --btn-w: 56px; --ic: 32px; border-radius: 50%; }
.btn-big { --btn: 88px; --btn-w: 104px; --ic: 42px; --lbl: 15px; gap: 2px; }
.btn-go { background: var(--leaf); }
.btn-sun { background: var(--sun); }
.btn-danger { background: #ff7a7a; }

.wiggle { animation: wiggle .45s ease; }
.shake { animation: shake .45s ease; }
.bounce { animation: bounce-in .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -9deg; } 40% { rotate: 8deg; } 60% { rotate: -5deg; } 80% { rotate: 3deg; } }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -10px; } 40% { translate: 9px; } 60% { translate: -6px; } 80% { translate: 4px; } }
@keyframes bounce-in { 0% { scale: 1; } 40% { scale: 1.18; } 100% { scale: 1; } }

/* ---------- cards ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--sticker);
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  transition: transform .15s;
}
.card:active { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 var(--ink); }
.card:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.card .name { font-size: 19px; font-weight: 800; line-height: 1.1; }

/* ---------- reading: words with Silbenbögen ---------- */

.word {
  display: inline-flex;
  align-items: flex-end;
  gap: .03em;
  font-family: var(--read);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.syl { position: relative; display: inline-block; padding: 0 .04em .32em; }
.syl .arc {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  width: 92%;
  height: .3em;
  overflow: visible;
}
.syl .arc path { fill: none; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.syl-0 .arc path { stroke: #2f5bea; }
.syl-1 .arc path { stroke: #e5322d; }
.word .hl { color: #e5322d; }

/* ---------- mascot «Klecksi» ---------- */

.mascot { width: 120px; height: 120px; flex: none; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mascot .m-body { transform-origin: 60px 108px; animation: m-breathe 3.2s ease-in-out infinite; }
.mascot .m-blob { fill: var(--sun); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.mascot .m-arm { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.mascot .m-eyes ellipse { fill: var(--ink); }
.mascot .m-eyes { transform-origin: 60px 54px; animation: m-blink 4.2s infinite; }
.mascot .m-shine { fill: #fff; }
.mascot .m-cheek { fill: #ff8fb3; }
.mascot .m-mouth { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.mascot.mood-cheer .m-body { animation: m-jump .7s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
.mascot .m-mouth.open { fill: #ff6f61; }
@keyframes m-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m-jump { from { transform: translateY(0) scale(1.04, .96); } to { transform: translateY(-14px) scale(.98, 1.03); } }

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter);
  background: rgba(35, 32, 61, .45);
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 22px 22px 24px;
  border: 4px solid var(--ink);
  border-radius: 30px;
  background: var(--sticker);
  box-shadow: 0 8px 0 var(--ink);
  animation: pop-in .28s cubic-bezier(.3, 1.6, .5, 1);
  touch-action: pan-y;
}
.modal-card.wide { width: min(760px, 100%); }
@keyframes pop-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-title {
  margin: 0 56px 16px 0;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}
.modal-title.read { font-family: var(--read); font-weight: 700; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.modal-x { position: absolute; top: 12px; right: 12px; --btn: 48px; --btn-w: 48px; --ic: 26px; }

/* ---------- praise bubble & toast ---------- */

.praise {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 60;
  padding: 16px 30px 12px;
  border: 4px solid var(--ink);
  border-radius: 30px;
  background: var(--sun);
  box-shadow: 0 7px 0 var(--ink);
  font-size: clamp(32px, 7vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: praise 1.9s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.praise.big { font-size: clamp(40px, 9vw, 84px); background: #ffffff; }
@keyframes praise {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.08) rotate(3deg); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(.9) rotate(-2deg); opacity: 0; }
}
.toast.read { font-family: var(--read); font-weight: 700; }
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--sticker);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 18px;
  font-weight: 700;
  transform: translateX(-50%);
  animation: pop-in .25s ease;
}

.fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
}

/* parent gate: a small multiplication with four big answers */
.gate-body { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gate-task { margin: 0; font-family: var(--read); font-size: clamp(40px, 8vw, 56px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.gate-ans { --btn: 76px; --btn-w: 100%; --lbl: 30px; }
.gate-ans .lbl { font-family: var(--read); font-weight: 700; margin: 0; }

/* «Neuer Sticker!» after a celebration: the sticker pops up and flies into the album book */
.new-sticker {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(35, 32, 61, .28);
  pointer-events: none;
  animation: fade-in .2s ease;
}
.ns-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 16px 30px 22px;
  border: 4px solid var(--ink);
  border-radius: 30px;
  background: var(--sun);
  box-shadow: 0 8px 0 var(--ink);
  animation: ns-in .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.ns-title { font-family: var(--read); font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.ns-row { display: flex; gap: 12px; margin: 4px 0 10px; }
.ns-sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(92px, 15vw, 136px);
  height: clamp(92px, 15vw, 136px);
  border: 4px solid var(--ink);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 var(--ink);
  flex: none;
  transform: rotate(var(--tilt, -6deg));
  animation: ns-pop .6s cubic-bezier(.3, 1.8, .5, 1) both;
  animation-delay: calc(.2s + var(--k, 0) * .12s);
  transition: transform .55s cubic-bezier(.55, -0.35, .7, 1), opacity .55s ease-in;
}
.ns-sticker .emoji { font-size: clamp(58px, 9.5vw, 88px); line-height: 1; }
/* three stickers at once still fit side by side on a narrow phone */
.ns-row.n3 { gap: 8px; }
.ns-row.n3 .ns-sticker { width: min(clamp(92px, 15vw, 136px), calc((100vw - 140px) / 3)); height: min(clamp(92px, 15vw, 136px), calc((100vw - 140px) / 3)); }
.ns-row.n3 .ns-sticker .emoji { font-size: min(clamp(58px, 9.5vw, 88px), calc((100vw - 140px) / 3 * .64)); }
.ns-sticker.fly { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.18) rotate(40deg); opacity: .4; }
.ns-name { font-family: var(--read); font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; line-height: 1; transition: opacity .3s; }
.ns-name.fade { opacity: 0; }
.ns-album { position: absolute; right: -24px; bottom: -26px; width: 76px; height: 76px; transform: rotate(10deg); }
.ns-album .ic { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 var(--ink)); }
.new-sticker.out { animation: fade-out .26s ease forwards; }
@keyframes ns-in { from { transform: scale(.3) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ns-pop { from { scale: 0; } to { scale: 1; } }
@keyframes fade-out { to { opacity: 0; } }

/* long-press ring (parent gate) */
.holding::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 5px solid var(--sun);
  clip-path: inset(0 0 0 0);
  animation: hold var(--hold, 1500ms) linear forwards;
}
@keyframes hold { from { transform: scale(.6); opacity: .2; } to { transform: scale(1); opacity: 1; } }

/* ---------- responsive ---------- */

@media (max-width: 640px) and (orientation: portrait) {
  :root { --btn: 54px; --btn-w: 56px; --ic: 28px; --lbl: 10.5px; --radius: 15px; }
  .topbar { gap: 8px; padding-bottom: 8px; }
  .topbar .title { -webkit-text-stroke-width: 6px; }
  .screen-color .topbar .title { letter-spacing: -.02em; }
  .star-count { height: 44px; font-size: 21px; padding-right: 12px; }
  .star-count .star-ic { width: 30px; height: 30px; }
  .btn-round { --btn: 48px; --btn-w: 48px; --ic: 28px; }
  .btn-big { --btn: 76px; --btn-w: 88px; --ic: 36px; --lbl: 13px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --btn: 48px; --btn-w: 52px; --ic: 28px; --lbl: 10px; --radius: 14px; --top: max(8px, env(safe-area-inset-top, 0px)); }
  .topbar { padding-bottom: 6px; }
  .topbar .title { font-size: 24px; -webkit-text-stroke-width: 5px; }
  .star-count { height: 40px; font-size: 19px; }
  .star-count .star-ic { width: 28px; height: 28px; }
  .btn-round { --btn: 44px; --btn-w: 44px; --ic: 26px; }
  .btn-big { --btn: 64px; --btn-w: 80px; --ic: 30px; --lbl: 12px; }
}

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