/* Slovko — veseli, veliki, dodiru prilagođen dizajn (djeca 3-6 g.) */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Comic Sans MS', 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(180deg, #cfe9ff 0%, #eaf6ff 45%, #fff6e5 100%);
  min-height: 100dvh;
  touch-action: manipulation;
  overflow-x: hidden;
  color: #333;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.hidden { display: none !important; }

#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

/* ---------- Zaglavlje ---------- */
#app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(230, 244, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(80, 100, 150, 0.12);
}

.header-btn {
  font-size: 34px;
  width: 72px;
  height: 64px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 0 #d8d2c4;
}
.header-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8d2c4; }

#header-title {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 700;
  color: #4a3f8f;
  letter-spacing: 2px;
}

.star-badge {
  font-size: 26px;
  font-weight: 700;
  background: #fff;
  border-radius: 20px;
  padding: 10px 18px;
  box-shadow: 0 4px 0 #d8d2c4;
  color: #b8860b;
}
#star-count.bump { display: inline-block; animation: bump 0.5s; }

.star-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-reset-btn {
  font-size: 24px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #fff;
  color: #9a94b8;
  box-shadow: 0 3px 0 #d8d2c4;
  flex: 0 0 auto;
}
.star-reset-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #d8d2c4; }
.star-reset-btn.confirming {
  background: #ff5252;
  color: #fff;
  box-shadow: 0 3px 0 #b83a3a;
  animation: pulse-red 0.9s infinite;
}
@keyframes pulse-red {
  50% { transform: scale(1.1); }
}

.home-stars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
@keyframes bump {
  30% { transform: scale(1.6) rotate(-8deg); }
  60% { transform: scale(0.9); }
}

/* ---------- Ekrani ---------- */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px 28px;
  max-width: 1300px;
  margin: 0 auto;
}
.screen.active { display: flex; }

.screen-heading {
  font-size: clamp(24px, 4.5vw, 36px);
  color: #4a3f8f;
  letter-spacing: 3px;
  margin: 10px 0 16px;
  text-align: center;
}

/* ---------- Početna ---------- */
.home-hero { text-align: center; padding-top: 4vh; }
.home-logo { font-size: 84px; animation: float 3s ease-in-out infinite; }
@keyframes float {
  50% { transform: translateY(-12px) rotate(4deg); }
}
#screen-home h1 {
  font-size: clamp(48px, 9vw, 84px);
  margin: 4px 0 0;
  letter-spacing: 6px;
  color: #5b3fd4;
  text-shadow: 3px 3px 0 #ffd93d;
}
.home-sub { font-size: clamp(18px, 3vw, 26px); color: #6b6b8f; margin: 8px 0 10px; }
.home-stars { display: inline-block; margin-bottom: 8px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 320px));
  gap: 22px;
  padding: 18px;
  width: 100%;
  max-width: 760px;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 170px;
  border-radius: 28px;
  color: #fff;
  transition: transform 0.12s;
}
.home-tile:active { transform: scale(0.94); }
.tile-red    { background: linear-gradient(145deg, #ff8a8a, #f4522f); box-shadow: 0 7px 0 #c23a1e; }
.tile-blue   { background: linear-gradient(145deg, #74b6ff, #2f6df4); box-shadow: 0 7px 0 #1e4fc2; }
.tile-green  { background: linear-gradient(145deg, #8fdc82, #3a9d23); box-shadow: 0 7px 0 #2a7a17; }
.tile-purple { background: linear-gradient(145deg, #c78aff, #8a2ff4); box-shadow: 0 7px 0 #661ec2; }
.tile-yellow { background: linear-gradient(145deg, #ffdf6b, #ffab20); box-shadow: 0 7px 0 #c27c0e; }
.tile-pink   { background: linear-gradient(145deg, #ff9ac8, #e84f9b); box-shadow: 0 7px 0 #b53a77; }
.tile-teal   { background: linear-gradient(145deg, #6fd8cf, #1fa396); box-shadow: 0 7px 0 #157a70; }
.tile-orange { background: linear-gradient(145deg, #ffb75e, #ed7a1c); box-shadow: 0 7px 0 #b55a12; }
.tile-sky    { background: linear-gradient(145deg, #8fd0ff, #3a9be8); box-shadow: 0 7px 0 #2a74b0; }
.tile-wide { grid-column: 1 / -1; min-height: 120px; flex-direction: row; gap: 18px; }

.tile-emoji { font-size: clamp(52px, 8vw, 76px); }
.tile-label { font-size: clamp(20px, 3.4vw, 30px); font-weight: 700; letter-spacing: 3px; }

/* ---------- Zajedničko: veliki gumbi/izbornici ---------- */
#numbers-picker, #jigsaw-picker {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 860px;
}

.big-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 130px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 #d8d2c4;
  transition: transform 0.12s;
}
.big-tile:active { transform: scale(0.94); }
.big-tile .tile-emoji { font-size: 56px; }
.big-tile .tile-label { font-size: 17px; font-weight: 700; color: #6b6b8f; letter-spacing: 1px; }

.number-pick .tile-emoji { font-weight: 900; color: #2f6df4; font-family: 'Arial Black', sans-serif; }

.big-btn {
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 700;
  padding: 20px 34px;
  border-radius: 26px;
  background: linear-gradient(145deg, #ffd93d, #ffb320);
  box-shadow: 0 6px 0 #cc8a00;
  color: #6b4a00;
  letter-spacing: 2px;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #cc8a00; }

.soft-btn {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 20px;
  background: #fff;
  color: #6b6b8f;
  box-shadow: 0 4px 0 #d8d2c4;
  letter-spacing: 1px;
}
.soft-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8d2c4; }

.done-row {
  display: flex;
  justify-content: center;
  padding: 18px;
}

/* ---------- Bojanka ---------- */
.chip-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  width: 100%;
  padding: 6px 4px 10px;
  scrollbar-width: thin;
}

.page-chip {
  flex: 0 0 auto;
  min-width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 900;
  background: #fff;
  color: #5b3fd4;
  box-shadow: 0 3px 0 #d8d2c4;
}
.page-chip.number-chip { color: #2f8a3a; }
.page-chip.active { background: #5b3fd4; color: #fff; box-shadow: 0 3px 0 #3a2790; }

.coloring-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.coloring-center { flex: 1; max-width: 760px; }

.coloring-svg { width: 100%; height: auto; display: block; }
.coloring-svg .paintable { cursor: pointer; }

.nav-arrow {
  font-size: 34px;
  min-width: 68px;
  height: 96px;
  border-radius: 22px;
  background: #fff;
  color: #5b3fd4;
  box-shadow: 0 5px 0 #d8d2c4;
}
.nav-arrow:active { transform: translateY(3px); box-shadow: 0 2px 0 #d8d2c4; }

.coloring-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 8px;
}

.speak-btn {
  font-size: 30px;
  width: 68px;
  height: 62px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 #d8d2c4;
}
.speak-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8d2c4; }

.coloring-word {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: #4a3f8f;
  letter-spacing: 2px;
}

.coloring-count { font-size: 18px; color: #9a94b8; }

.palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 14px 6px 4px;
}

.color-swatch {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  font-size: 26px;
  transition: transform 0.12s;
}
.color-swatch.eraser { border-color: #ccc; }
.color-swatch.selected { transform: scale(1.25); border-color: #333; }

/* ---------- Brojevi ---------- */
.numbers-svg { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
#numbers-svg-host { width: 100%; }
.numbers-svg .piece { cursor: grab; }
.numbers-svg .piece.dragging { cursor: grabbing; }

#numbers-puzzle, #numbers-count { width: 100%; text-align: center; }

.count-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 10px;
}

.count-numeral {
  font-family: 'Arial Black', sans-serif;
  font-size: clamp(70px, 12vw, 120px);
  font-weight: 900;
  color: #2f6df4;
  text-shadow: 4px 4px 0 #ffd93d;
}

.count-progress {
  font-family: 'Arial Black', sans-serif;
  font-size: clamp(46px, 8vw, 80px);
  font-weight: 900;
  color: #f4522f;
  min-width: 90px;
}

.count-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px;
}

.count-item {
  font-size: 64px;
  width: 108px;
  height: 108px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 #d8d2c4;
  transition: transform 0.15s;
}
.count-item:active { transform: scale(0.92); }
.count-item.counted {
  background: #e6ffe0;
  box-shadow: 0 5px 0 #8fce7f, 0 0 0 5px #6bcb77 inset;
  transform: scale(1.06);
}

/* ---------- Slagalica ---------- */
.size-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  max-width: 100%;
}

.size-btn {
  font-size: 20px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 20px;
  background: #fff;
  color: #6b6b8f;
  box-shadow: 0 4px 0 #d8d2c4;
  letter-spacing: 1px;
}
.size-btn.selected { background: #5b3fd4; color: #fff; box-shadow: 0 4px 0 #3a2790; }

#jigsaw-board-wrap { width: 100%; max-width: 760px; text-align: center; }

#jigsaw-stage {
  position: relative;
  width: 100%;
}

.jigsaw-slot {
  position: absolute;
  border: 4px dashed #b9c8dc;
  border-radius: 12px;
  background: #f0f5fb;
}
.jigsaw-slot.glow { border-color: #ffb320; background: #fff6dd; }
.jigsaw-slot.done { border-color: transparent; background: transparent; }

.jigsaw-tile {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 10;
  transition: transform 0.15s;
}
.jigsaw-tile.dragging { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }
.jigsaw-tile.done { animation: pulse 0.7s 2; }
@keyframes pulse {
  50% { filter: brightness(1.18); }
}

.jigsaw-pic {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Rubni okvir na slici — orijentir za rubne dijelove kod težih slagalica */
.jigsaw-pic::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 6px dashed rgba(255, 255, 255, 0.75);
  border-radius: 26px;
  pointer-events: none;
}

/* ---------- Memori ---------- */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 150px));
  gap: 14px;
  padding: 16px;
  width: 100%;
  max-width: 700px;
  justify-content: center;
}

.memory-card {
  aspect-ratio: 3 / 3.6;
  background: transparent;
  perspective: 700px;
  padding: 0;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.35s;
  transform-style: preserve-3d;
}
.memory-card.open .card-inner,
.memory-card.matched .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(34px, 6vw, 56px);
}

.card-back {
  background: linear-gradient(145deg, #8a6ff0, #5b3fd4);
  box-shadow: 0 5px 0 #3a2790;
  color: #ffd93d;
}

.card-front {
  background: #fff;
  box-shadow: 0 5px 0 #d8d2c4;
  transform: rotateY(180deg);
}

.memory-card.matched .card-front {
  background: #e6ffe0;
  box-shadow: 0 5px 0 #8fce7f;
}

/* ---------- Uči i pronađi (boje, oblici, životinje) ---------- */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 820px;
}

.learn-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 150px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 #d8d2c4;
  transition: transform 0.12s;
}
.learn-card:active { transform: scale(0.94); }
.learn-card.pulse { animation: bump 0.5s; }
.learn-card.correct {
  background: #e6ffe0;
  box-shadow: 0 5px 0 #8fce7f, 0 0 0 5px #6bcb77 inset;
}
.learn-card.wrong { animation: shake 0.4s; }
@keyframes shake {
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-5px); }
}

.color-blob {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  box-shadow: inset -8px -10px 14px rgba(0, 0, 0, 0.18), inset 6px 8px 12px rgba(255, 255, 255, 0.35);
}
.color-blob.white-blob { border: 3px solid #ccc; }

.shape-svg { width: 100px; height: 100px; }

.learn-emoji { font-size: 66px; line-height: 1; }

.learn-label {
  font-size: 16px;
  font-weight: 700;
  color: #6b6b8f;
  letter-spacing: 1px;
}

.learn-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 0 16px;
}

.learn-prompt-text {
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: 700;
  color: #4a3f8f;
  letter-spacing: 2px;
}

.learn-progress {
  font-size: 24px;
  letter-spacing: 2px;
}

/* ---------- Baloni ---------- */
#balloons-hud {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  color: #4a3f8f;
  padding: 4px 0 10px;
  letter-spacing: 1px;
}

#balloons-stage {
  position: relative;
  width: 100%;
  max-width: 920px;
  height: min(62vh, 540px);
  background: linear-gradient(#bfe3ff, #e6f6ff 68%, #d0ecc0 90%, #b7dfa0);
  border: 3px solid #cfe4f7;
  border-radius: 24px;
  overflow: hidden;
  touch-action: none;
}

#balloons-bin {
  position: absolute;
  right: 14px;
  bottom: 6px;
  font-size: 64px;
  line-height: 1;
  z-index: 35;
  transition: transform 0.15s;
  user-select: none;
}
#balloons-bin.ready { transform: scale(1.3) rotate(-8deg); }
#balloons-bin.chomp { animation: chomp 0.35s; }
@keyframes chomp {
  40% { transform: scale(1.35); }
}

.balloon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  cursor: pointer;
  touch-action: none;
  will-change: transform;
}

.b-body {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  border-radius: 50% 50% 47% 47%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -5px -8px 12px rgba(0, 0, 0, 0.12);
}

.b-knot {
  width: 0;
  height: 0;
  margin: -3px auto 0;
  border: 7px solid transparent;
  border-top-width: 11px;
}

.b-string {
  width: 2px;
  height: 34px;
  margin: 0 auto;
  background: rgba(90, 90, 90, 0.55);
}

.b-cargo {
  text-align: center;
  font-size: 30px;
  line-height: 1;
  margin-top: -3px;
}

.balloon.tough .b-body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0 9px, transparent 9px 22px);
}

.balloon.golden .b-body {
  box-shadow: 0 0 20px 5px rgba(255, 200, 40, 0.75), inset -5px -8px 12px rgba(0, 0, 0, 0.12);
  animation: glow 1s ease-in-out infinite;
}
@keyframes glow {
  50% { box-shadow: 0 0 32px 10px rgba(255, 210, 60, 0.95), inset -5px -8px 12px rgba(0, 0, 0, 0.12); }
}

.balloon.wobble { animation: wobble 0.3s; }
@keyframes wobble {
  25% { rotate: 7deg; }
  75% { rotate: -7deg; }
}

.balloon.popping { pointer-events: none; }
.balloon.popping .b-body { animation: bpop 0.24s forwards; }
.balloon.popping .b-knot,
.balloon.popping .b-string,
.balloon.popping .b-cargo { opacity: 0; }
@keyframes bpop {
  40% { transform: scale(1.35); opacity: 0.9; }
  100% { transform: scale(1.75); opacity: 0; }
}

.trash-item {
  position: absolute;
  font-size: 44px;
  line-height: 1;
  z-index: 40;
  cursor: grab;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
.trash-item.dragging { transform: scale(1.25); cursor: grabbing; }

/* ---------- Crtanje ---------- */
/* Boje lijevo, alati desno, platno stane u ekran — ništa se ne mora
   pomicati pa su djetetu boje i alati uvijek vidljivi */
#screen-draw { width: 100%; padding-bottom: 10px; }

.draw-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.draw-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 6px;
}

.draw-canvas-wrap {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  min-width: 0;
}

#draw-canvas {
  display: block;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #e8e0c8;
  box-shadow: 0 5px 0 #d8d2c4;
  touch-action: none;
  cursor: crosshair;
}

.draw-palette .color-swatch {
  width: 48px;
  height: 48px;
}
.draw-palette .color-swatch.selected { transform: scale(1.18); }

.draw-tools .tool-btn {
  width: 54px;
  height: 54px;
  font-size: 24px;
}

@media (max-width: 620px) {
  .draw-layout { gap: 8px; }
  .draw-side { padding: 2px; gap: 7px; }
  .draw-palette .color-swatch { width: 40px; height: 40px; }
  .draw-tools .tool-btn { width: 42px; height: 42px; font-size: 19px; }
  .draw-tools .dot-l { width: 26px; height: 26px; }
}

.tool-btn {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 0 #d8d2c4;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8d2c4; }
.tool-btn.selected { background: #5b3fd4; box-shadow: 0 4px 0 #3a2790; }
.tool-btn.selected .dot { background: #fff; }

.dot { border-radius: 50%; background: #454545; }
.dot-s { width: 10px; height: 10px; }
.dot-m { width: 20px; height: 20px; }
.dot-l { width: 34px; height: 34px; }

/* ---------- Manji ekrani ---------- */
@media (max-width: 620px) {
  .home-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .size-btn { font-size: 16px; padding: 12px 14px; }
  .home-tile { min-height: 130px; }
  .nav-arrow { min-width: 54px; height: 76px; font-size: 26px; }
  .color-swatch { width: 52px; height: 52px; }
  .count-item { width: 88px; height: 88px; font-size: 50px; }
  .memory-grid { gap: 10px; }
}