/* ═══════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; }
/* Klávesnicový/switch-access focus — viditeľný, ale nie pri ťuku myšou/dotykom. */
:focus-visible { outline: 3px solid #7C3AED; outline-offset: 3px; border-radius: 6px; }
/* Skrytý live-región pre čítačku obrazovky (oznamy správne/zle, otázka). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body {
  font-family: 'Nunito', sans-serif;
  background: #1E1B3A; color: #1E1B3A;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; touch-action: none;
  display: flex; justify-content: center;
  /* Dvojťuk na dotyku nesmie označovať text / vyvolávať callout (detská hra). */
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Výnimka — do polí treba vedieť písať (meno dieťaťa). */
input, textarea { -webkit-user-select: text; user-select: text; }
#app {
  width: 100%;
  height: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Desktop: wider layout, centered with dark surround */
@media (min-width: 860px) {
  #app { max-width: 860px; }
}

/* Compact height (landscape / small phones) */
@media (max-height: 680px) {
  .home { gap: 10px; padding-top: max(10px, env(safe-area-inset-top)); }
  .home-logo { width: 62px; height: 62px; font-size: 2rem; border-radius: 20px; }
  .home-title { font-size: 2rem; }
  .game-tile { height: clamp(90px, 22vw, 120px); }
}
button { font-family: inherit; }

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  /* Brand / accents */
  --c-ink: #1E1B3A;
  --c-bg: #F0EBFF;
  --c-surface: #FFFFFF;
  --c-surface-soft: #F6F2FF;
  --c-primary: #7C3AED;
  --c-primary-d: #5B21B6;
  --c-correct: #22C55E;
  --c-wrong: #F87171;
  --c-muted: rgba(30,27,58,.68);
  --c-line: rgba(30,27,58,.10);

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  /* Radii — guľatejšie, hravejšie */
  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

  /* Hravé dekoratívne farby (obloha, slnko, lúka) */
  --c-sky: #BFE6FF; --c-sky-d: #8FD0FF; --c-sun: #FFD45E; --c-meadow: #B6E89B;

  /* Shadows */
  --sh-1: 0 4px 14px rgba(30,27,58,.10);
  --sh-2: 0 10px 28px rgba(30,27,58,.16);
  --sh-3: 0 18px 44px rgba(30,27,58,.22);
  --sh-press: inset 0 3px 8px rgba(30,27,58,.18);

  /* Font sizes (responsive) */
  --fs-cap: clamp(.85rem, 3.4vw, 1.05rem);
  --fs-body: clamp(1rem, 4vw, 1.3rem);
  --fs-title: clamp(1.3rem, 5.5vw, 2rem);
  --fs-hero: clamp(2.2rem, 12vw, 4rem);

  /* Touch targets */
  --tap: clamp(64px, 18vw, 72px);
  --tap-lg: clamp(72px, 22vw, 96px);

  /* Z-index layers */
  --z-stage: 1;
  --z-hud: 10;
  --z-toolbelt: 12;
  --z-overlay: 50;

  /* Motion */
  --mo-fast: 140ms;
  --mo-base: 280ms;
  --mo-slow: 520ms;
  --ease: cubic-bezier(.4,.1,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);   /* pružinový — hravý */
}

@media (prefers-reduced-motion: reduce) {
  :root { --mo-fast: 1ms; --mo-base: 1ms; --mo-slow: 1ms; }
  /* Globálny safety-net: zastaví VŠETKY nekonečné/dekoratívne animácie (oblaky,
     iskry, slnko, bubliny, spinner glow…), ale necháva prvky doskočiť na finálny
     stav (reveal/fade-in funguje okamžite). Pokrytie reduced-motion = 100 %. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════
   TEMATICKÉ SCÉNY V HRÁCH (smelo & pestro)
   .scene leží ZA obsahom (z-index:-1 v isolovanom kontajneri).
═══════════════════════════════════════ */
.game-shell, .colors-play, .homes-play, .music-play, .akorobi-play, .count-host, .bub-pick { isolation:isolate; }
.scene { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
/* Scénický obrázok (viď sceneHTML/SCENE_SVG v js/app.js) — JEDEN súvislý SVG na tému
   namiesto desiatok nezávisle pozicovaných CSS tvarov (predošlá verzia mala prekrývacie
   bugy — kopec vie prekryť vlastný landmark, keď obe vrstvy nepoznajú spoločný súradnicový
   priestor). SVG kreslí oblohu/hory/kopce/landmark/mesiac vo vlastnom viewBoxe, "slice"
   vyplní celú obrazovku a ukotví sa na spodok (rovnaké správanie ako background-size:cover). */
.scene-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.scene-svg .svc-firefly { animation:firefly-blink 3s ease-in-out infinite; }
@keyframes firefly-blink { 0%,100% { opacity:.4; } 50% { opacity:1; } }
/* Plávajúce dekorácie (kvety/motýle/noty) — HTML vrstva NAD SVG, nezávislá od témy. */
.sc-deco { position:absolute; font-size:clamp(18px,5vw,30px); animation:bfly 13s ease-in-out infinite; opacity:.9; }
.sc-deco.d1 { left:12%; top:24%; animation-delay:-2s; } .sc-deco.d2 { right:16%; top:40%; animation-delay:-7s; } .sc-deco.d3 { left:22%; top:62%; animation-delay:-4s; }
.sc-deco.d4 { left:8%; top:76%; animation-delay:-5s; } .sc-deco.d5 { right:10%; top:16%; animation-delay:-9s; }
.sc-deco.d6 { left:30%; top:8%; animation-delay:-6s; } .sc-deco.d7 { right:26%; top:70%; animation-delay:-3s; }
/* Sezónny vzhľad (#29) — voliteľná dekorácia nad scénou, nezávislá od témy */
.sc-snow {
  position:absolute; top:-10%; font-size:clamp(10px,3vw,16px); color:#fff; opacity:.85;
  animation:snow-fall linear infinite; text-shadow:0 0 3px rgba(0,0,0,.15);
}
.sc-snow::before { content:"❄"; }
.sc-snow.sn0 { left:6%;  animation-duration:9s;  animation-delay:0s; }
.sc-snow.sn1 { left:22%; animation-duration:12s; animation-delay:-3s; font-size:12px; }
.sc-snow.sn2 { left:40%; animation-duration:8s;  animation-delay:-6s; }
.sc-snow.sn3 { left:64%; animation-duration:13s; animation-delay:-1s; font-size:11px; }
.sc-snow.sn4 { left:82%; animation-duration:10s; animation-delay:-4.5s; }
@keyframes snow-fall {
  0%   { transform:translateY(-10vh) translateX(0); }
  50%  { transform:translateY(50vh) translateX(12px); }
  100% { transform:translateY(115vh) translateX(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-deco, .sc-snow, .scene-svg .svc-firefly { animation:none; }
}

/* ═══════════════════════════════════════
   GAME SHELL (shared mobile-first layout)
═══════════════════════════════════════ */
.game-shell {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #FBF8FF 0%, var(--c-bg) 70%);
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
.shell-hud {
  flex-shrink: 0; z-index: var(--z-hud);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: max(var(--sp-3), 6px) var(--sp-4) var(--sp-2);
}
.shell-hud .hud-spacer { flex: 1; }
.shell-stage {
  flex: 1; min-height: 0; z-index: var(--z-stage);
  display: grid; place-items: center;
  width: 100%; max-width: clamp(320px, 100%, 520px);
  margin: 0 auto; padding: var(--sp-3) var(--sp-4);
  position: relative;
}
.shell-stage[data-active-surface] { touch-action: none; }
.shell-toolbelt {
  flex-shrink: 0; z-index: var(--z-toolbelt);
  width: 100%; max-width: clamp(320px, 100%, 520px);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(var(--sp-2), 3vw, var(--sp-4));
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4) max(var(--sp-4), var(--sp-2));
}

/* ═══════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════ */
/* IconButton (back/exit, small round actions) */
.icon-btn {
  width: var(--tap); height: var(--tap);
  min-width: var(--tap); min-height: var(--tap);
  border: none; border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  box-shadow: var(--sh-1);
  font-size: 1.5rem; font-weight: 900; cursor: pointer;
  display: grid; place-items: center;
  touch-action: manipulation;
  transition: transform var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.icon-btn:active { transform: scale(.92); box-shadow: var(--sh-press); }

/* PrimaryButton */
.btn-primary-2 {
  min-height: var(--tap);
  padding: 0 var(--sp-7);
  border: none; border-radius: var(--r-pill);
  background: linear-gradient(145deg, var(--c-primary), var(--c-primary-d));
  color: #fff; font-weight: 900; font-size: var(--fs-body);
  box-shadow: var(--sh-2); cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--mo-fast) var(--ease);
}
.btn-primary-2:active { transform: scale(.95); }

/* ProgressPill */
.progress-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3); border-radius: var(--r-pill);
  background: var(--c-surface); box-shadow: var(--sh-1);
  font-weight: 900; color: var(--c-ink); font-size: var(--fs-cap);
}
.progress-pill .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-line);
  transition: transform var(--mo-base) var(--ease), background var(--mo-base) var(--ease);
}
.progress-pill .dot.done { background: var(--c-primary); transform: scale(1.35); }
.hud-title {
  font-weight: 900; font-size: clamp(.95rem, 3.6vw, 1.25rem); color: var(--c-ink);
  text-align: center; flex: 1; min-width: 0; line-height: 1.15;
  /* wrap to max 2 lines instead of truncating (questions stay readable on small phones) */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* AnimalCard — consistent framing for every animal */
.animal-card {
  position: relative;
  display: grid; place-items: center;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: clamp(6px, 2vw, 14px);
  aspect-ratio: 1;
  width: 100%;
  transition: transform var(--mo-base) var(--ease), box-shadow var(--mo-base) var(--ease), opacity var(--mo-base) var(--ease);
  will-change: transform;
}
.animal-card img, .animal-card svg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Posilnený tieň priamo na zvieratku (nielen na bielej karte okolo) — konzistentný s hĺbkou
   --sh-2/--sh-3, aby 3D chibi ilustrácia nepôsobila "nalepená" na plochú kartu. */
.animal-card .rmk-animal { filter: drop-shadow(0 8px 16px rgba(30,27,58,.28)); }
.animal-card::after {
  content: ""; position: absolute; left: 50%; bottom: 6%;
  width: 46%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30,27,58,.18), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
.animal-card.pop { transform: scale(1.12); box-shadow: var(--sh-2); }
.animal-card.counted { box-shadow: 0 0 0 4px var(--c-correct), var(--sh-1); }
.animal-card .count-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-correct); color: #fff;
  font-weight: 900; font-size: .95rem;
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
}

/* AnswerCard — big tappable answer */
.answer-card {
  flex: 1; min-width: var(--tap); min-height: var(--tap-lg);
  border: none; border-radius: var(--r-lg);
  background: var(--c-surface); color: var(--c-ink);
  box-shadow: var(--sh-2); cursor: pointer;
  font-weight: 900; font-size: clamp(1.8rem, 9vw, 2.8rem);
  display: grid; place-items: center;
  touch-action: manipulation;
  transition: transform var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.answer-card:active { transform: scale(.94); }
.answer-card.correct { background: var(--c-correct); color: #fff; transform: scale(1.06); }
.answer-card.wrong { animation: shake var(--mo-base) var(--ease); background: var(--c-wrong); color: #fff; }

/* RewardOverlay */
.reward-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; gap: var(--sp-4);
  background: rgba(30,27,58,.55); backdrop-filter: blur(6px);
  animation: fadeIn var(--mo-base) var(--ease);
  padding: var(--sp-6);
}
.reward-overlay .reward-emoji { font-size: var(--fs-hero); animation: pop var(--mo-base) var(--ease); }
.reward-overlay .reward-text { color: #fff; font-size: var(--fs-title); font-weight: 900; }

/* Offline screen (matches app design) */
.offline-screen {
  min-height: 100dvh; display: grid; place-items: center; gap: var(--sp-4);
  background: radial-gradient(120% 80% at 50% 0%, #FBF8FF 0%, var(--c-bg) 70%);
  padding: var(--sp-6); text-align: center; font-family: 'Nunito', sans-serif;
}
.offline-screen .off-emoji { font-size: var(--fs-hero); }
.offline-screen .off-title { font-size: var(--fs-title); font-weight: 900; color: var(--c-ink); }
.offline-screen .off-sub { font-size: var(--fs-body); color: var(--c-muted); }

/* ═══════════════════════════════════════
   HOME
═══════════════════════════════════════ */
.home {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  /* flex-start + padding = safe scrollable centering (justify-content:center clips at top) */
  justify-content: flex-start;
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow-y: hidden;
  touch-action: pan-y;
  background: linear-gradient(180deg, #7FC4FF 0%, #A9DBFF 22%, #D6EEFF 44%, #EAF7E6 68%, #CFF0BD 100%);
}
.home-brand { margin-top: 2px; }
/* obsah nad dekoratívnou oblohou */
.home > .home-topbar, .home > .home-brand, .home > .mascot-greet,
.home > .home-grid, .home > .home-credit { position: relative; z-index: 1; }

/* ── Hravé dekoratívne pozadie (mraky/slnko/iskry) ── */
.home-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.home-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 132px; }
.sky-sun {
  position: absolute; top: 6%; right: -42px;
  width: clamp(86px, 22vw, 136px); height: clamp(86px, 22vw, 136px);
  filter: drop-shadow(0 0 30px rgba(255,180,60,.45));
}
.sky-sun .sun-rays { transform-origin: 60px 60px; animation: sun-spin 60s linear infinite; }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.home-sky .treat {
  position: absolute; font-size: 24px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
  animation: bfly 14s ease-in-out infinite;
  will-change: transform;
}
@keyframes bfly {
  0%   { transform: translate(0,0) rotate(-6deg); }
  25%  { transform: translate(40px,-30px) rotate(8deg); }
  50%  { transform: translate(90px,10px) rotate(-4deg); }
  75%  { transform: translate(40px,40px) rotate(6deg); }
  100% { transform: translate(0,0) rotate(-6deg); }
}
.home-sky .cloud {
  position: absolute; background: rgba(255,255,255,.95); border-radius: 999px;
  box-shadow: 0 10px 26px rgba(120,140,200,.2);
  animation: cloud-drift 30s linear infinite;
}
.home-sky .cloud::before, .home-sky .cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.home-sky .cloud.c1 { width: 120px; height: 40px; top: 14%; left: -130px; animation-duration: 34s; }
.home-sky .cloud.c2 { width: 88px;  height: 30px; top: 40%; left: -100px; animation-duration: 46s; animation-delay: -14s; opacity: .9; }
.home-sky .cloud.c3 { width: 150px; height: 48px; top: 66%; left: -160px; animation-duration: 40s; animation-delay: -8s; opacity: .82; }
.home-sky .cloud::before { width: 60%; height: 180%; top: -60%; left: 12%; }
.home-sky .cloud::after  { width: 45%; height: 150%; top: -40%; right: 14%; }
.home-sky .spark {
  position: absolute; color: #FFE08A; font-size: 16px; opacity: .9;
  animation: twinkle 3.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,210,90,.7);
}
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(140vw); } }
@keyframes twinkle { 0%,100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }
/* dúha za hlavičkou */
.home-rainbow { position: absolute; top: -3%; left: 50%; transform: translateX(-50%); width: 132%; height: auto; opacity: .72; pointer-events: none; filter: saturate(1.12); }
/* letiace vtáčiky */
.home-sky .home-bird {
  position: absolute; font-size: 22px; color: #475569; font-weight: 900; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.4); will-change: transform; animation: bird-fly linear infinite;
}
.home-sky .home-bird.b1 { top: 12%; animation-duration: 26s; }
.home-sky .home-bird.b2 { top: 17%; font-size: 16px; animation-duration: 32s; animation-delay: -10s; opacity: .8; }
.home-sky .home-bird.b3 { top: 9%;  font-size: 18px; animation-duration: 38s; animation-delay: -20s; opacity: .7; }
@keyframes bird-fly { 0% { transform: translateX(-12vw) translateY(0); } 50% { transform: translateX(60vw) translateY(-10px); } 100% { transform: translateX(120vw) translateY(0); } }
/* poletujúci motýľ */
.home-sky .home-butterfly { position: absolute; top: 30%; left: 12%; font-size: 26px; will-change: transform; animation: bfly 16s ease-in-out infinite; }
@keyframes bfly {
  0% { transform: translate(0,0) rotate(-6deg); } 25% { transform: translate(40px,-26px) rotate(8deg); }
  50% { transform: translate(120px,8px) rotate(-6deg); } 75% { transform: translate(50px,32px) rotate(8deg); }
  100% { transform: translate(0,0) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .home-bird, .home-butterfly { animation: none !important; } }

/* ── Maskot Zajko (privítanie) ── */
.mascot-greet {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  width: auto; max-width: 440px; margin: 2px auto 0;
}
.mascot-char {
  position: relative; flex-shrink: 0;
  width: clamp(98px, 26vw, 128px); height: clamp(98px, 26vw, 128px);
}
.mascot-char .m-body {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 7px 9px rgba(30,27,58,.16));
  animation: mascot-bob 3s ease-in-out infinite; transform-origin: 50% 90%;
}
.mascot-char .m-balloon {
  position: absolute; top: -14px; right: -8px; width: 30%; z-index: 2;
  animation: mascot-bob 3.6s ease-in-out infinite;
}
.mascot-char .m-balloon svg { width: 100%; height: auto; display: block; }
.mascot-bubble {
  position: relative; background: #fff; color: var(--c-ink);
  font-weight: 800; font-size: clamp(.95rem, 3.2vw, 1.15rem);
  padding: 12px 16px; border-radius: 18px 18px 18px 4px;
  box-shadow: var(--sh-2); margin-bottom: 12px;
}
.mascot-bubble::after {
  content: ""; position: absolute; left: -8px; bottom: 6px;
  border: 8px solid transparent; border-right-color: #fff; border-bottom: 0;
}
@keyframes mascot-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.home-topbar-right {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.72); border-radius: var(--r-pill); padding: 5px;
  box-shadow: var(--sh-1); backdrop-filter: blur(4px);
}
.home-topbar-right .mute-btn,
.home-topbar-right .adult-btn {
  width: 42px; height: 42px; margin-top: 0; border-radius: 50%;
  background: transparent; box-shadow: none; font-size: 1.25rem;
}
.home-topbar-right .mute-btn:active,
.home-topbar-right .adult-btn:active { transform: scale(.85); background: rgba(124,58,237,.1); }
.home-topbar-right .mute-btn svg,
.home-topbar-right .adult-btn svg { width: 23px; height: 23px; display: block; }
.home-topbar-right .mute-btn.muted svg { stroke: #C084FC; }
.home-topbar-right .mute-btn.muted svg path[fill] { fill: #C084FC; }
@media (prefers-reduced-motion: reduce) {
  .home-sky .cloud, .home-sky .spark, .m-body, .m-balloon, .home-sky .treat, .sky-sun .sun-rays { animation: none; }
}

.home-brand {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  width: 100%;
}
.brand-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.home-logo {
  width: 50px; height: 50px; border-radius: var(--r-md);
  background: linear-gradient(145deg, #FF6B8A 0%, #A855F7 55%, #6C3483 100%);
  display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1;
  box-shadow: 0 8px 18px rgba(168,85,247,.36), inset 0 2px 0 rgba(255,255,255,.28);
  flex-shrink: 0;
}
.home-title {
  font-size: clamp(1.7rem, 6.5vw, 3.2rem); font-weight: 900;
  background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: -1.5px; line-height: 1;
}
.home-sub {
  font-size: clamp(0.85rem, 2.2vw, 1rem); font-weight: 700;
  color: rgba(76,29,149,.78);
}
.mute-btn {
  margin-top: 6px;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(124,58,237,.12); font-size: 1.35rem;
  cursor: pointer; transition: transform 130ms, background 130ms;
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
}
.mute-btn:active      { transform: scale(.85); }
.mute-btn.muted       { background: rgba(124,58,237,.22); }

/* ── Game Grid ── */
.home-grid {
  display: grid;
  grid-template-rows: repeat(2, clamp(108px, 28vw, 152px));
  grid-auto-flow: column;
  grid-auto-columns: clamp(128px, 38vw, 164px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  width: 100%;
  max-width: none;
  padding: 6px 16px 12px;
  scrollbar-width: none;
}
.home-grid::-webkit-scrollbar { display: none; }
.home-credit {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(99,102,241,0.7); text-transform: uppercase;
  margin-top: 6px; text-decoration: none;
  transition: transform 140ms, color 140ms;
  -webkit-tap-highlight-color: transparent;
}
.home-credit:active { transform: scale(.95); }
.home-credit .credit-flake { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.home-credit strong { font-weight: 900; color: #6366F1; }
.home-credit strong span { color: #22D3EE; }
.home-grid > .game-tile:last-child:nth-child(odd) {
  grid-column: auto;
  max-width: none;
  justify-self: auto;
}
.game-tile {
  height: auto; border: none; border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: stretch;
  cursor: pointer; overflow: hidden; position: relative;
  transition: transform 160ms var(--ease-bounce), box-shadow 200ms ease;
  -webkit-user-select: none; user-select: none;
}
.game-tile::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.12) 0%, transparent 50%);
  pointer-events: none; z-index: 2; border-radius: inherit;
}
.game-tile:hover  { transform: scale(1.035) translateY(-2px); }
.game-tile:active { transform: scale(0.95); }
.home-grid .game-tile { scroll-snap-align: start; }
@keyframes tile-spin-select {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(0.88) rotate(-8deg); }
  60%  { transform: scale(1.08) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.game-tile.tile-selecting { animation: tile-spin-select 380ms var(--ease-bounce) forwards; }

/* VERTIKÁLNA mriežka — VŠETKY hry viditeľné naraz (nahradila 1-po-1 carousel).
   2 stĺpce na mobile, 3 na tablete/desktope, scroll dole. */
.home-tiles {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.6vw, 16px);
  align-content: start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;   /* dôležité: body má touch-action:none → mriežka inak nescrolluje na mobile */
  overscroll-behavior: contain;
  padding: 6px clamp(12px,4vw,20px) calc(18px + env(safe-area-inset-bottom));
  scrollbar-width: none; width: 100%;
}
.home-tiles::-webkit-scrollbar { display: none; }
.home-tiles .game-tile {
  aspect-ratio: 1 / 1.06; min-height: 116px;
  border-radius: clamp(20px,5vw,28px);
  animation: hm-card-pop-in .4s var(--ease-bounce) both;
}
.tile-emoji {
  font-size: clamp(2.6rem, 13vw, 3.8rem); line-height: 1;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.30));
}
.tile-stars { font-size: .68rem; color: #FFE08A; letter-spacing: -1px; margin-top: 1px; }
@media (min-width: 600px) {
  .home-tiles { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 0 auto; }
}

.tile-art {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
/* „nálepkový" biely kruh za ilustráciou — viac hĺbky */
.tile-art::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 58%, rgba(255,255,255,0) 74%);
  z-index: 0; pointer-events: none;
}
.tile-art > * { position: relative; z-index: 1; }
.tile-footer {
  padding: 10px 14px 13px;
  background: rgba(0,0,0,.22);
  display: flex; flex-direction: column; gap: 1px;
  position: relative; z-index: 2;
}
.tile-name  { font-size: clamp(.9rem, 2.8vw, 1.1rem); font-weight: 900; color: #fff; }
.tile-level {
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.82); letter-spacing: .5px; text-transform: uppercase;
}

/* tile art content */
.tile-emoji {
  font-size: clamp(2.8rem, 7.5vw, 3.6rem); line-height: 1;
  display: flex; align-items: center; gap: 4px;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.3));
}
.tile-emoji-sm { font-size: clamp(1.7rem, 4.5vw, 2.1rem); }
/* ručne kreslené SVG zvieratká v dlaždiciach (krajšie než emoji) */
.tile-animals { display: flex; align-items: center; justify-content: center; gap: 5px; }
.tile-animals img { width: clamp(40px, 12vw, 58px); height: auto; filter: drop-shadow(0 4px 9px rgba(0,0,0,.28)); }
.tile-peek img { width: clamp(40px, 11vw, 56px); height: auto; filter: drop-shadow(0 3px 7px rgba(0,0,0,.3)); }
.tile-deco {
  font-size: 1.5rem; position: absolute;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.tile-deco.tr { top: 8px; right: 10px; }
.tile-deco.br { bottom: 18px; right: 10px; }
.tile-deco.bl { bottom: 18px; left: 10px; }
.colors-tile-dots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; }
.colors-tile-dots span { border-radius: 50%; width: clamp(28px, 7vw, 36px); height: clamp(28px, 7vw, 36px); display: block;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3); }

/* ═══════════════════════════════════════
   SHARED PLAY HEADER
═══════════════════════════════════════ */
.play-hdr {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px;
  position: relative; z-index: 10;
}
.back-btn {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px; color: #1E1B3A;
  font-size: 1.2rem; font-weight: 900; cursor: pointer;
  display: grid; place-items: center;
  transition: background 120ms, transform 100ms;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.back-btn:hover  { background: rgba(255,255,255,.98); }
.back-btn:active { transform: scale(.92); }
.round-dots { display: flex; gap: 8px; }
.round-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(0,0,0,.15);
  transition: background 300ms, box-shadow 300ms, transform 300ms;
}
.round-dot.done { transform: scale(1.3); }
.hdr-right { width: 48px; }

/* ═══════════════════════════════════════
   SCHOVÁVAČKA
═══════════════════════════════════════ */
.hide-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  position: relative; isolation: isolate;
}
.hide-question {
  flex-shrink: 0; text-align: center; padding: 6px 20px 0;
}
.hide-q-emoji {
  display: flex; justify-content: center; align-items: center;
}
.hide-q-emoji img { width: clamp(130px, 34vw, 190px); height: clamp(130px, 34vw, 190px); filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
@keyframes float-gentle {
  from { transform: translateY(0); } to { transform: translateY(-8px); }
}
.hide-q-text {
  font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 900;
  color: #1E3A5F; margin-top: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.doors-row {
  display: flex; gap: 14px; justify-content: center;
  padding: 0 18px; flex: 1; align-items: flex-end; padding-bottom: 0;
}
.hide-hint {
  align-self: center; flex-shrink: 0;
  margin: 12px auto max(14px, env(safe-area-inset-bottom));
  padding: 12px 22px; border: none; border-radius: 999px;
  font-family: inherit; font-size: 1.05rem; font-weight: 800; color: #1E3A5F;
  background: rgba(255,255,255,.9); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-user-select: none; user-select: none;
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
}
.hide-hint:active { transform: scale(.94); }
.door-wrap {
  flex: 1; max-width: 140px;
  height: clamp(190px, 46vw, 260px);
  position: relative; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.door-animal {
  position: absolute; inset: 0; border-radius: 50% 50% 20px 20px / 30% 30% 20px 20px;
  background: linear-gradient(180deg, #FFF6E4, #F3E7CC);
  border: 1px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: transform 380ms cubic-bezier(.34,1.56,.64,1);
}
.door-animal img { width: clamp(80px, 20vw, 110px); height: clamp(80px, 20vw, 110px); }
.door-animal.popped { transform: scale(1.15) translateY(-10px); }
/* Rozprávkové drevené dvierka zapustené do kopčeka — signatúrny prvok Schovávačky.
   Oblúkový vrch, drevoslady + obilie, okrúhle okienko, mosadzná kľučka, farebná tabuľka. */
.door-panel {
  position: absolute; inset: 0; border-radius: 50% 50% 20px 20px / 30% 30% 20px 20px; z-index: 2;
  transform-origin: 8% 50%;
  transition: transform 520ms cubic-bezier(.4,0,.2,1);
  background: linear-gradient(160deg, #C9975B 0%, #A9713F 55%, #6B4420 100%);
  box-shadow: 4px 0 24px rgba(0,0,0,.4), inset 0 0 0 5px rgba(255,255,255,.85), inset 0 2px 0 rgba(255,255,255,.25);
}
.door-panel::before {   /* drevoslady */
  content: ""; position: absolute; inset: 12px 8px 8px 8px;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.08) 0 3px, transparent 3px 22px);
  border-radius: 50% 50% 10px 10px / 30% 30% 10px 10px;
}
.door-window {
  position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  width: clamp(28px, 9vw, 40px); height: clamp(28px, 9vw, 40px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EAF6FF 0%, #BEE3F5 60%, #7FBEDD 100%);
  box-shadow: 0 0 0 5px #6B4420, inset 0 3px 6px rgba(0,0,0,.15);
  z-index: 1;
}
.door-plate {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: clamp(30px, 9vw, 40px); height: clamp(30px, 9vw, 40px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(15px, 4vw, 20px);
  box-shadow: 0 4px 8px rgba(30,27,58,.3), 0 0 0 4px #fff;
  z-index: 3;
}
/* (door-breathe box-shadow animation removed — non-composited, janked on iOS) */
.door-wrap.open  .door-panel { transform: perspective(600px) rotateY(-82deg); }
.door-wrap.wrong .door-panel { animation: shake 300ms ease; }
.door-handle {
  position: absolute; right: 14%; top: 54%;
  width: clamp(14px, 4vw, 20px); height: clamp(14px, 4vw, 20px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE9B0, #E3B457 70%);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  z-index: 2;
}

/* ═══════════════════════════════════════
   VYMAĽUJ — kreslenie
═══════════════════════════════════════ */
.draw-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #F1F5F9; overflow: hidden;
}

.draw-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
  background: transparent;
  flex-shrink: 0;
}
.draw-back, .draw-reset {
  width: var(--tap, 64px); height: var(--tap, 64px); border-radius: 18px; border: none;
  background: #fff; color: #1E1B3A;
  box-shadow: 0 4px 14px rgba(30,27,58,.12);
  font-size: 1.4rem; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  transition: transform 120ms;
  -webkit-user-select: none; user-select: none;
}
.draw-back:active  { transform: scale(.92); }
.draw-reset:active { transform: scale(.92); }
.draw-reset.resetting { animation: reset-spin 480ms cubic-bezier(.34,1.56,.64,1); }
@keyframes reset-spin {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.3) rotate(-200deg); }
  100% { transform: scale(1) rotate(-360deg); }
}
.draw-title {
  font-size: 1.25rem; font-weight: 900; color: #1E1B3A;
  letter-spacing: .02em;
}

/* Maľovanie: módy (Kresli/Píš) + navigácia predlohy */
.draw-modes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 16px 8px; flex-shrink: 0;
}
.draw-mode {
  padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 800; color: #475569;
  background: #fff; box-shadow: 0 3px 10px rgba(30,27,58,.1);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.draw-mode.active { background: linear-gradient(135deg, #C084FC, #7C3AED); color: #fff; }
.draw-trace-cats { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.draw-trace-cat {
  min-width: 44px; height: 40px; padding: 0 12px; border-radius: 12px; border: none; cursor: pointer;
  background: #fff; color: #7C3AED; font-family: inherit; font-size: 1rem; font-weight: 900;
  box-shadow: 0 3px 10px rgba(30,27,58,.1); touch-action: manipulation;
}
.draw-trace-cat.active { background: linear-gradient(135deg, #C084FC, #7C3AED); color: #fff; }
.draw-trace-nav { display: flex; align-items: center; gap: 10px; }
.draw-trace-btn {
  width: 44px; height: 44px; border-radius: 14px; border: none; cursor: pointer;
  background: #fff; color: #7C3AED; font-size: 1.1rem; font-weight: 900;
  box-shadow: 0 3px 10px rgba(30,27,58,.1); touch-action: manipulation;
}
.draw-trace-char {
  min-width: 40px; text-align: center; font-size: 1.8rem; font-weight: 900; color: #7C3AED;
}
.draw-trace-char.math { font-size: 1.25rem; min-width: 76px; }
.draw-actions { display: flex; gap: 8px; justify-content: center; }
.draw-action {
  width: 48px; height: 44px; border-radius: 12px; border: none; cursor: pointer;
  background: #fff; font-size: 1.3rem; line-height: 1; box-shadow: 0 3px 10px rgba(30,27,58,.12);
  touch-action: manipulation; transition: transform 120ms, opacity 120ms;
  display: flex; align-items: center; justify-content: center;
}
.draw-action:active { transform: scale(.92); }
.draw-action:disabled { opacity: .38; cursor: default; }
.draw-action:disabled:active { transform: none; }
#drawUndo { font-size: 1.6rem; font-weight: 900; color: #1E1B3A; }

/* Galéria malieb */
.gallery {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #DBEAFE, #EDE9FE 60%, #FCE7F3);
}
.gallery-grid {
  flex: 1; overflow-y: auto; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  align-content: start;
}
.gallery-item { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.15); background: #fff; }
.gallery-item img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.gallery-item-btns { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; }
.gallery-del, .gallery-share {
  width: 44px; height: 44px;
  border: none; border-radius: 10px; background: rgba(255,255,255,.9); cursor: pointer;
  font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.gallery-empty { grid-column: 1/-1; text-align: center; color: #6B5BA6; font-weight: 700; padding: 40px 20px; line-height: 1.6; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 10000; pointer-events: none;
  background: rgba(30,27,58,.92); color: #fff; font-weight: 800;
  padding: 12px 22px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.install-nudge {
  position: fixed; left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9500; background: #fff; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px; justify-content: space-between;
  animation: install-nudge-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.install-nudge span { font-size: .85rem; font-weight: 700; color: #1E1B3A; flex: 1 1 100%; }
.install-nudge-btns { display: flex; gap: 8px; margin-left: auto; }
@keyframes install-nudge-in { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .install-nudge { animation: none; } }

.break-nudge {
  position: fixed; left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top));
  z-index: 9500; background: #ECFDF5; border: 1.5px solid #6EE7B7; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.22); display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px; justify-content: space-between;
  animation: install-nudge-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.break-nudge span { font-size: .85rem; font-weight: 700; color: #065F46; flex: 1 1 100%; }
.break-nudge .btn-ghost { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .break-nudge { animation: none; } }

/* ── Switch-access skenovanie (#23) ── */
.scan-highlight {
  outline: 5px solid #F59E0B !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 9px rgba(245,158,11,.35) !important;
  animation: scan-pulse 1.6s ease-in-out infinite;
}
@keyframes scan-pulse { 0%,100% { outline-color: #F59E0B; } 50% { outline-color: #FDE68A; } }
@media (prefers-reduced-motion: reduce) { .scan-highlight { animation: none; } }
.scan-activate-btn {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9800; width: 84px; height: 84px; border-radius: 50%; border: none;
  background: linear-gradient(145deg,#F59E0B,#D97706); color: #fff; font-weight: 900;
  font-size: .85rem; box-shadow: 0 8px 24px rgba(217,119,6,.5); cursor: pointer;
}
.scan-activate-btn:active { transform: scale(.94); }

.draw-canvas-wrap {
  /* min-height floor: na najmenších obrazovkách (320×568) by farby+nástroje+veľkosti
     v .draw-toolbar (flex-shrink:0) inak vytlačili canvas takmer na 0px — dieťa by
     nemalo kam kresliť. Toolbar preto smie scrollovať (nižšie), canvas nikdy nie. */
  flex: 1; min-height: 130px; position: relative; overflow: hidden;
}
#drawCanvas {
  display: block; touch-action: none; cursor: crosshair;
  border-radius: 0; position: relative; z-index: 1;
  box-shadow: inset 0 2px 16px rgba(0,0,0,.18), inset 0 0 0 3px rgba(0,0,0,.06);
}

/* Plávajúce ovládanie nad plátnom (skrytie HUD-u, v režime full aj undo/domov). */
.draw-float {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.draw-float-btn {
  pointer-events: auto;
  width: 46px; height: 46px; border-radius: 14px; border: none;
  background: rgba(255,255,255,.86); color: #1E293B;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  font-size: 1.2rem; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform 120ms;
}
.draw-float-btn:active { transform: scale(.9); }

/* Skrytý HUD = canvas cez celú plochu. */
.draw-play.draw-full .draw-hdr,
.draw-play.draw-full .draw-modes,
.draw-play.draw-full .draw-toolbar { display: none; }

/* Prepínač druhu razítka (Zvieratká | Symboly). */
.draw-stamp-kind { display: flex; gap: 6px; justify-content: center; }
.draw-stamp-kind-btn {
  padding: 6px 12px; border-radius: 12px; border: 2.5px solid transparent;
  background: rgba(255,255,255,.1); color: #fff; font-weight: 800; font-size: .82rem;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.draw-stamp-kind-btn.active { border-color: #C084FC; background: linear-gradient(135deg, #EDE9FE, #E0E7FF); color: #4C1D95; }
.draw-stamp-em { font-size: 1.5rem; line-height: 1; }

/* Kompaktný panel: rad 1 = farby, rad 2 = nástroje + veľkosti + akcie.
   Cieľ ~80–90px (predtým ~150px) → väčšia kresliaca plocha. */
.draw-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: #1E293B; flex-shrink: 0;
  max-height: 46vh; overflow-y: auto;
}
.draw-toolrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}

.draw-colors {
  display: flex; justify-content: center; gap: clamp(5px, 1.6vw, 8px); flex-wrap: wrap;
}
.draw-color {
  width: clamp(36px, 9vw, 44px); height: clamp(36px, 9vw, 44px);
  border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; transition: transform 120ms cubic-bezier(.34,1.56,.64,1), border-color 120ms;
  box-shadow: 0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-user-select: none; user-select: none;
}
.draw-color.active {
  border-color: #fff;
  transform: scale(1.28) translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.draw-color:active { transform: scale(.9); }

.draw-sizes {
  display: flex; justify-content: center; gap: 8px;
}
.draw-size {
  width: clamp(44px, 11vw, 54px); height: clamp(38px, 9vw, 46px);
  border-radius: 12px; border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms, background 120ms, border-color 120ms;
  -webkit-user-select: none; user-select: none;
}
.draw-size span {
  border-radius: 50%; display: block; transition: background 150ms;
}
.draw-size.active {
  background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5);
  transform: scale(1.1);
}
.draw-size:active { transform: scale(.9); }

.draw-tools {
  display: flex; justify-content: center; gap: 6px;
}
.draw-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08); cursor: pointer;
  transition: transform 120ms, background 120ms, border-color 120ms;
  -webkit-user-select: none; user-select: none;
}
.draw-tool-icon { font-size: 1.2rem; line-height: 1; }
.draw-tool-label { font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: 0.03em; }
.draw-tool.active {
  background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5);
  transform: scale(1.1);
}
.draw-tool.active .draw-tool-label { color: rgba(255,255,255,.9); }
.draw-tool:active { transform: scale(.9); }

.draw-sparkle {
  position: absolute; pointer-events: none; z-index: 9999;
  font-size: 1.1rem; font-weight: 900;
  animation: sparkle-pop 600ms ease forwards;
  transform: translate(-50%, -50%);
}
@keyframes sparkle-pop {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  60%  { opacity: .8; transform: translate(-50%,-180%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%,-260%) scale(.6); }
}

/* ═══════════════════════════════════════
   AKO ROBÍ?
═══════════════════════════════════════ */
.akorobi-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 4vw, 26px); width: 100%;
}
.akorobi-listen {
  border: none; cursor: pointer; touch-action: manipulation;
  font-family: inherit; font-weight: 900; color: #fff;
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  padding: clamp(12px, 3.5vw, 18px) clamp(22px, 7vw, 40px);
  border-radius: 999px;
  background: linear-gradient(135deg, #5EEAD4, #0D9488);
  box-shadow: 0 8px 24px rgba(13,148,136,.45), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform 120ms;
  -webkit-user-select: none; user-select: none;
}
.akorobi-listen:active { transform: scale(.94); }
.akorobi-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: clamp(10px, 3vw, 18px); width: 100%;
}
.akorobi-choice {
  min-height: auto; padding: clamp(8px, 2.5vw, 16px);
  font-size: 0; aspect-ratio: 1;
}
.akorobi-choice img { width: 100%; height: 100%; }
.akorobi-hint { font-weight: 800; color: #475569; font-size: 1rem; text-align: center; }

/* ═══════════════════════════════════════
   POČÍTAJ
═══════════════════════════════════════ */
.count-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(to bottom, #87CEEB 0%, #BAE6FD 55%, #E0F2FE 100%);
  position: relative; overflow: hidden;
}
.count-clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute; background: rgba(255,255,255,.93);
  border-radius: 50px;
  box-shadow: 0 3px 12px rgba(0,0,0,.07);
  overflow: visible;
  animation: cloud-drift var(--cd,18s) ease-in-out infinite alternate;
}
.cloud::before, .cloud::after {
  content: ''; position: absolute;
  background: rgba(255,255,255,.93);
  border-radius: 50%;
}
.cloud::before { width: 50%; height: 190%; top: -95%; left: 12%; }
.cloud::after  { width: 35%; height: 150%; top: -65%; right: 15%; }
@keyframes cloud-drift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }

.fall-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  padding: 0 20px 16px; position: relative; z-index: 2;
}
.fallen-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 10px; min-height: 80px;
}
.drop-item {
  width: clamp(72px, 20vw, 100px); height: clamp(72px, 20vw, 100px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; flex-shrink: 0;
  animation: drop-in .55s ease-out var(--dl,0s) forwards;
}
.drop-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes drop-in {
  from { transform: translateY(-90px) scale(.5); opacity: 0; }
  80%  { transform: translateY(6px) scale(1.08); opacity: 1; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.count-bottom {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 8px 20px max(28px, env(safe-area-inset-bottom)); z-index: 2;
}
.count-q-text {
  font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900;
  color: #0C4A6E; animation: fadeIn 280ms ease;
}
.count-orbs { display: flex; justify-content: center; gap: 14px; animation: fadeIn 280ms ease; }
.count-orb {
  width: clamp(92px, 23vw, 112px); height: clamp(92px, 23vw, 112px);
  border-radius: 50%; border: none; cursor: pointer;
  font-family: inherit; font-size: clamp(2rem, 6.5vw, 3rem); font-weight: 900;
  color: #fff; display: grid; place-items: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  box-shadow: 0 6px 28px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.1),
              inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1), box-shadow 140ms;
  -webkit-user-select: none; user-select: none;
}
.count-orb:hover  { transform: scale(1.1) translateY(-3px); }
.count-orb:active { transform: scale(.91); }
.count-orb.wrong  { animation: shake 300ms ease; }

/* ═══════════════════════════════════════
   DVOJIČKY
═══════════════════════════════════════ */
.pairs-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #1E1B4B 0%, #312E81 50%, #1E3A5F 100%);
  position: relative; color: #fff;
}
.pairs-play .round-dot { background: rgba(255,255,255,.2); }
.pairs-q-text {
  flex-shrink: 0; text-align: center; padding: 0 20px 4px;
  font-size: clamp(1.1rem, 3.5vw, 1.7rem); font-weight: 900;
  color: rgba(255,255,255,.8);
}
.night-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.n-star {
  position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,.8);
  animation: twinkle var(--d,3s) var(--dl,0s) ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:0} 50%{opacity:var(--op,.7)} }

.pairs-grid {
  flex: 1; min-height: 0; display: grid; gap: 10px;
  padding: 6px 8px max(16px, env(safe-area-inset-bottom));
  width: 100%; max-width: 560px; margin: 0 auto;
  align-content: center; justify-content: center; z-index: 2; position: relative;
}
/* Páry sú vždy v 2 radoch → karty čo najväčšie (8 kariet = 4×2, nie 4×4). */
.pairs-grid.g22 { grid-template-columns: repeat(2, 1fr); }
.pairs-grid.g23 { grid-template-columns: repeat(3, 1fr); }
.pairs-grid.g24 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 400px) { .pairs-grid { gap: 7px; padding-left: 6px; padding-right: 6px; } }

.flip-card {
  cursor: pointer; perspective: 700px;
  aspect-ratio: 1;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  transition: transform 90ms;
}
/* Okamžitá odozva na ťuknutie (deti vidia reakciu hneď, bez čakania na flip). */
.flip-card:not(.matched):active { transform: scale(.95); }
.flip-card.shake { animation: card-shake 420ms ease-in-out; }
@keyframes card-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}
.flip-inner {
  width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 440ms cubic-bezier(.4,.1,.2,1);
  position: relative; border-radius: 18px;
}
.flip-card.face-up .flip-inner, .flip-card.matched .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute; inset: 0; border-radius: 18px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.flip-back {
  background: linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 100%);
  border: 1px solid rgba(255,255,255,.18);
  font-size: clamp(1.6rem, 5vw, 2.2rem); color: rgba(255,255,255,.55);
  box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
}
.flip-front {
  transform: rotateY(180deg); border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  background: linear-gradient(145deg, #fff 0%, #f0f4ff 100%);
  display: flex; align-items: center; justify-content: center;
}
.flip-front img { width: 82%; height: 82%; object-fit: contain; display: block; }
.pair-emoji { font-size: clamp(2.2rem, 13vw, 4.4rem); line-height: 1; }
.pair-swatch { width: 72%; height: 72%; border-radius: 16px; box-shadow: inset 0 -6px 14px rgba(0,0,0,.14), inset 0 2px 6px rgba(255,255,255,.4); }
.flip-card.matched .flip-front {
  box-shadow: 0 0 0 3px #22C55E, 0 4px 28px rgba(34,197,94,.5);
  animation: matched-pop 360ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes matched-pop {
  from { transform: rotateY(180deg) scale(.82); }
  to   { transform: rotateY(180deg) scale(1); }
}

/* Voľba motívu kariet (band-picker pexesa). */
.pairs-theme-row {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 0 12px 6px; position: relative; z-index: 2;
}
.pairs-theme-btn {
  padding: 7px 12px; border-radius: 999px; border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff; font-weight: 800; font-size: .82rem;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.pairs-theme-btn.active { background: #fff; color: #1E293B; border-color: #fff; }

/* ═══════════════════════════════════════
   DOMOV
═══════════════════════════════════════ */
.homes-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #ECFDF5 0%, #D1FAE5 55%, #A7F3D0 100%);
}
.homes-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 12px 20px 0; gap: 10px;
}
.homes-animal { }
.homes-animal img { width: clamp(140px, 38vw, 200px); height: clamp(140px, 38vw, 200px); object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.homes-emoji-animal { font-size: clamp(5rem, 18vw, 7rem); line-height: 1; }
.homes-q-text {
  font-size: clamp(1.25rem, 4vw, 2rem); font-weight: 900;
  color: #065F46; text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.homes-opts {
  display: flex; justify-content: center; gap: 12px; flex-shrink: 0;
  padding: 10px 14px max(28px, env(safe-area-inset-bottom));
}
/* 4 možnosti (Ťažká) sa do radu nezmestia na úzkom telefóne → mriežka 2×2. */
.homes-opts.four {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: 360px; margin: 0 auto;
}
.homes-opts.four .home-opt { max-width: none; }
.homes-opts.four .home-opt-em { width: clamp(58px, 16vw, 86px); height: clamp(58px, 16vw, 86px); }
.home-opt {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 10px 12px; border-radius: 22px; border: 3px solid transparent;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  box-shadow: 0 8px 24px rgba(16,185,129,.2), 0 0 0 2px rgba(255,255,255,.6),
              inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer; flex: 1; max-width: 150px; position: relative;
  transition: transform 150ms cubic-bezier(.34,1.56,.64,1), box-shadow 150ms;
  -webkit-user-select: none; user-select: none;
}
.home-opt-deco {
  position: absolute; top: 6px; right: 8px; font-size: 1rem; line-height: 1;
  pointer-events: none;
}
.home-opt:active { transform: scale(.92); }
.home-opt.wrong  { animation: shake 320ms ease; }
.home-opt.home-opt-correct {
  box-shadow: 0 0 0 4px #22C55E, 0 8px 28px rgba(34,197,94,.5);
  animation: correct-bounce 600ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes correct-bounce {
  0%  { transform: scale(1); }
  40% { transform: scale(1.28); }
  70% { transform: scale(.96); }
  100%{ transform: scale(1.08); }
}
.home-opt-em  { width: clamp(82px, 22vw, 108px); height: clamp(82px, 22vw, 108px); display: flex; align-items: center; justify-content: center; }
.home-opt-em svg { width: 100%; height: 100%; display: block; }
.home-opt-lbl { font-size: clamp(.8rem, 2.4vw, 1rem); font-weight: 800; color: #065F46; }

/* ═══════════════════════════════════════
   FARBY
═══════════════════════════════════════ */
.colors-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #FFF5FB 0%, #F3E8FF 55%, #EDE9FE 100%);
}
.colors-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; padding: 12px 20px;
}
.colors-target {
  width: clamp(120px, 34vw, 170px); height: clamp(120px, 34vw, 170px);
  border-radius: 50%;
  box-shadow: 0 12px 48px rgba(0,0,0,.22), 0 0 0 8px rgba(255,255,255,.7);
  animation: float-gentle 3s ease-in-out infinite alternate;
}
.colors-q-text {
  font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 900;
  color: #1E1B3A; text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.colors-q-text span { display: inline-block; }
.colors-opts {
  display: flex; justify-content: center; gap: 10px; flex-shrink: 0;
  padding: 10px 14px max(28px, env(safe-area-inset-bottom));
}
.colors-opts.four { gap: 7px; }
.color-opt {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 10px 12px; border-radius: 22px; border: none;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 2px rgba(255,255,255,.7);
  cursor: pointer; flex: 1; max-width: 110px;
  transition: transform 150ms cubic-bezier(.34,1.56,.64,1), box-shadow 150ms;
  -webkit-user-select: none; user-select: none;
}
.color-opt:active { transform: scale(.92); }
.color-opt.wrong  { animation: shake 320ms ease; }
.color-opt.color-opt-correct {
  box-shadow: 0 0 0 4px var(--coh), 0 8px 28px rgba(0,0,0,.25);
  animation: correct-bounce 600ms cubic-bezier(.34,1.56,.64,1);
}
.color-opt-circle {
  width: clamp(54px, 14vw, 70px); height: clamp(54px, 14vw, 70px);
  border-radius: 50%; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.35);
}
.color-opt-lbl {
  font-size: clamp(.72rem, 2vw, .88rem); font-weight: 900; color: #1E1B3A;
  text-align: center;
}

/* ═══════════════════════════════════════
   CELEBRATE OVERLAY
═══════════════════════════════════════ */
.celebrate {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  background: rgba(240,235,255,.94); z-index: 100; animation: fadeIn 180ms ease;
}
.celebrate-star {
  font-size: clamp(5rem, 18vw, 9rem);
  animation: pop 400ms cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 0 40px rgba(234,179,8,.7));
}
.celebrate-text {
  font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 900;
  background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: pop 400ms 60ms cubic-bezier(.34,1.56,.64,1) both;
}
.continue-btn {
  min-height: 64px; min-width: 210px; border: none; border-radius: 20px;
  background: linear-gradient(135deg, #A855F7 0%, #6C3483 100%);
  color: #fff; font-family: inherit; font-size: 1.2rem; font-weight: 900;
  cursor: pointer; padding: 0 32px;
  box-shadow: 0 8px 32px rgba(168,85,247,.5), inset 0 2px 0 rgba(255,255,255,.2);
  animation: pop 400ms 140ms cubic-bezier(.34,1.56,.64,1) both;
  transition: transform 130ms, box-shadow 130ms;
}
.continue-btn:hover  { transform: scale(1.05) translateY(-2px); }
.continue-btn:active { transform: scale(.96); }

/* ═══════════════════════════════════════
   LEVEL DONE
═══════════════════════════════════════ */
.level-done {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 32px 24px;
  text-align: center;
  background: linear-gradient(160deg, #FFF5FB 0%, #F0EBFF 45%, #EBF0FF 100%);
}
.level-done-trophy {
  font-size: clamp(4.5rem, 14vw, 7rem);
  filter: drop-shadow(0 0 30px rgba(234,179,8,.6));
  animation: pop 480ms cubic-bezier(.34,1.56,.64,1);
}
.level-done-stars { font-size: clamp(2rem, 7vw, 3.5rem); letter-spacing: 6px; }
.level-done-title {
  font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900;
  background: linear-gradient(135deg, #4C1D95, #7C3AED);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.level-done-sub { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 700; color: rgba(76,29,149,.5); }
.level-done-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.btn-retry {
  margin-top: 14px; padding: 10px 20px; border-radius: 999px; border: 2px dashed rgba(124,58,237,.4);
  background: rgba(237,233,254,.7); color: #4C1D95; font-family: inherit; font-weight: 800;
  font-size: .88rem; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.btn-retry:active { transform: scale(.97); }

.btn-primary {
  min-height: 60px; min-width: 200px; border: none; border-radius: 18px;
  color: #fff; font-family: inherit; font-size: 1.15rem; font-weight: 900;
  cursor: pointer; padding: 0 32px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.2);
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1), box-shadow 140ms;
}
.btn-primary:hover  { transform: scale(1.04) translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.btn-primary:active { transform: scale(.96); }

.btn-ghost {
  min-height: 60px; min-width: 150px;
  border: 1px solid rgba(76,29,149,.2); border-radius: 18px;
  background: rgba(76,29,149,.06); color: rgba(76,29,149,.65);
  font-family: inherit; font-size: 1.05rem; font-weight: 900;
  cursor: pointer; padding: 0 28px; transition: background 130ms;
}
.btn-ghost:hover  { background: rgba(76,29,149,.1); }
.btn-ghost:active { transform: scale(.96); }

/* ═══════════════════════════════════════
   CONFETTI
═══════════════════════════════════════ */
.confetti-bit {
  position: fixed; top: -20px; pointer-events: none; z-index: 200; border-radius: 3px;
  /* Own GPU layer + translate3d → no tearing/stutter on new iPhones */
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: confetti-fall var(--dur) var(--delay) linear forwards;
}
@keyframes confetti-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  to   { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(720deg); opacity: 0; }
}

/* Malý lokálny výbuch srdiečok — pozri heartBurst() (maznanie maskota na Domov). */
.heart-burst-bit {
  position: fixed; pointer-events: none; z-index: 200; line-height: 1;
  will-change: transform, opacity;
  animation: heart-burst-rise var(--dur) var(--delay) cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heart-burst-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), -90px, 0) scale(1.1); opacity: 0; }
}

/* ═══════════════════════════════════════
   SHARED ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-10px) rotate(-2deg); }
  40%      { transform: translateX(10px)  rotate(2deg); }
  60%      { transform: translateX(-7px); }
  80%      { transform: translateX(7px); }
}
.shake { animation: shake 300ms ease; }
@keyframes float-up {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-70px) scale(.4); opacity: 0; }
}
/* ═══════════════════════════════════════
   BUBLINY
═══════════════════════════════════════ */
.bubble-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  /* Obloha s obláčikmi (scéna .scene-sky leží za obsahom). Bubliny (canvas)
     plávajú nad ňou; isolation:isolate drží scénu so z-index:-1 vzadu. */
  background: linear-gradient(180deg, #7CC6FF 0%, #AEE0FF 60%, #E8F6FF 100%);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.bub-pick {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #DBEAFE 0%, #EDE9FE 50%, #FCE7F3 100%);
  align-items: center;
}
.bub-pick-hdr {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px;
  position: relative;
}
.bub-pick-title {
  font-size: 1.4rem; font-weight: 900; color: #1E1B4B; text-align: center;
}
.bub-pick-opts {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 18px; padding: 20px; width: 100%; max-width: 360px;
}
.bub-pick-btn {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 28px; border-radius: 26px; border: none;
  cursor: pointer; font-family: inherit;
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
  -webkit-user-select: none; user-select: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.28);
}
.bub-pick-btn:active { transform: scale(.93); }
.bub-lvl1 { background: linear-gradient(135deg, #86EFAC, #16A34A); }
.bub-lvl2 { background: linear-gradient(135deg, #93C5FD, #4F46E5); }
.bub-lvl3 { background: linear-gradient(135deg, #F97316, #DC2626); }
.bub-pick-icon { font-size: 2.6rem; line-height: 1; }
.bub-pick-name { font-size: 1.6rem; font-weight: 900; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.22); }

/* ── Výber pásma (band engine) ── */
.band-opts {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: 16px 20px; width: 100%; max-width: 380px;
}
.band-btn {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: 24px; border: none;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
  -webkit-user-select: none; user-select: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.28);
}
.band-btn:active { transform: scale(.93); }
.band-btn[data-band="0"] { background: linear-gradient(135deg, #86EFAC, #16A34A); }
.band-btn[data-band="1"] { background: linear-gradient(135deg, #93C5FD, #4F46E5); }
.band-btn[data-band="2"] { background: linear-gradient(135deg, #F97316, #DC2626); }
.band-btn.locked {
  background: linear-gradient(135deg, #CBD5E1, #94A3B8);
  cursor: not-allowed; opacity: .75; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.band-icon { font-size: 2.3rem; line-height: 1; }
.band-name { flex: 1; font-size: 1.5rem; font-weight: 900; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.22); }
.band-stars { font-size: 1.25rem; letter-spacing: 2px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.band-star { opacity: .45; }
.band-star.on { opacity: 1; }
.band-endless {
  margin: 4px 20px max(16px, env(safe-area-inset-bottom));
  padding: 12px 16px; border-radius: 16px; text-align: center;
  font-size: .95rem; font-weight: 800; color: #4C1D95;
  background: rgba(255,255,255,.55); border: 2px dashed rgba(124,58,237,.35);
}
.band-endless.unlocked {
  color: #15803D; background: rgba(134,239,172,.35); border-color: rgba(22,163,74,.5);
}
button.band-endless {
  width: calc(100% - 40px); font-family: inherit; cursor: pointer;
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
  -webkit-user-select: none; user-select: none;
}
button.band-endless:active { transform: scale(.97); }
.band-suggestion {
  margin: 0 20px 4px; padding: 12px 16px; border-radius: 16px; text-align: center;
  font-size: .88rem; font-weight: 800; color: #92400E; background: rgba(253,230,138,.55);
  border: 2px solid rgba(245,158,11,.4); font-family: inherit; cursor: pointer;
  -webkit-user-select: none; user-select: none; transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
}
.band-suggestion:active { transform: scale(.97); }
.band-calm {
  margin: 4px 20px 0; padding: 12px 16px; border-radius: 16px; text-align: center;
  font-size: .9rem; font-weight: 800; color: #065F46; background: rgba(167,243,208,.4);
  border: 2px dashed rgba(5,150,105,.4); font-family: inherit; cursor: pointer; width: calc(100% - 40px);
  -webkit-user-select: none; user-select: none; transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
}
.band-calm:active { transform: scale(.97); }
.progress-pill.endless {
  font-weight: 900; font-size: 1.1rem; color: var(--c-primary, #7C3AED);
  padding: 4px 14px; letter-spacing: .5px;
}
.ld-star { opacity: .35; }
.ld-star.on { opacity: 1; }

.bub-score-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.bub-score {
  font-size: clamp(2.4rem, 7vw, 3.2rem); font-weight: 900; color: #1E1B3A;
  letter-spacing: -1px; line-height: 1;
  transition: transform 100ms;
}
.score-bump { animation: score-bump 240ms cubic-bezier(.34,1.56,.64,1); }
@keyframes score-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.bub-score-lbl {
  font-size: .65rem; font-weight: 700; color: rgba(30,27,58,.4);
  text-transform: uppercase; letter-spacing: .8px;
}

/* Prepínač Lock / Free */
.bub-lock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid rgba(99,102,241,.35); border-radius: 999px;
  padding: 8px 14px; background: rgba(255,255,255,.85);
  font-weight: 900; font-size: .9rem; color: #4F46E5;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms, background 160ms, border-color 160ms, color 160ms;
  box-shadow: 0 2px 8px rgba(99,102,241,.18);
}
.bub-lock-btn:active { transform: scale(.93); }
.bub-lock-btn.is-locked {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  border-color: transparent; color: #fff;
}
.bub-lock-ico { font-size: 1.1rem; line-height: 1; }

.bubble-stage {
  flex: 1; min-height: 0;
  display: block; width: 100%;
  touch-action: none;
}

.bub-wrap {
  position: absolute;
  bottom: 0;
  touch-action: none;
}
.bub {
  width: 100%; height: 100%;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  /* Sklenená mydlová bublina */
  background:
    radial-gradient(ellipse 52% 36% at 34% 26%, rgba(255,255,255,.97) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 60% 17%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 16%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 38%, var(--cl,#93C5FD) 60%, var(--cd,#3B82F6) 82%, rgba(0,0,0,.04) 100%),
    radial-gradient(ellipse 65% 28% at 50% 100%, rgba(0,0,0,.10) 0%, transparent 100%);
  border: 1.5px solid rgba(255,255,255,.38);
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.32),
    inset 0 -4px 12px rgba(0,0,0,.07),
    0 4px 14px var(--cg, rgba(59,130,246,.4)),
    0 2px 6px rgba(0,0,0,.12);
}
/* Mobil: jednoduchší vzhľad bubliny (2 vrstvy + ľahký tieň) = nižší fill-rate = plynulejšie. */
@media (pointer: coarse) {
  .bub {
    background:
      radial-gradient(circle at 37% 27%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 26%),
      radial-gradient(circle at 50% 52%, var(--cl,#93C5FD) 56%, var(--cd,#3B82F6) 90%);
    box-shadow: inset 0 2px 6px rgba(255,255,255,.30), 0 3px 9px var(--cg, rgba(59,130,246,.32));
  }
}

/* ── Zvieratko (Tamagoči) ── */
/* ── Vlastné zlepšenie: kaskádový „pop-in" vstup tlačidiel (pickery + dlaždice) ── */
@keyframes pick-in { 0% { opacity:0; transform:translateY(16px) scale(.94); } 100% { opacity:1; transform:translateY(0) scale(1); } }
.band-opts .band-btn, .bub-pick-opts .bub-pick-btn, .home-grid .game-tile {
  animation: pick-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.band-opts .band-btn:nth-child(2), .bub-pick-opts .bub-pick-btn:nth-child(2) { animation-delay: .08s; }
.band-opts .band-btn:nth-child(3), .bub-pick-opts .bub-pick-btn:nth-child(3) { animation-delay: .16s; }
.home-grid .game-tile:nth-child(2) { animation-delay:.04s } .home-grid .game-tile:nth-child(3) { animation-delay:.08s }
.home-grid .game-tile:nth-child(4) { animation-delay:.12s } .home-grid .game-tile:nth-child(5) { animation-delay:.16s }
.home-grid .game-tile:nth-child(6) { animation-delay:.20s } .home-grid .game-tile:nth-child(7) { animation-delay:.24s }
.home-grid .game-tile:nth-child(n+8) { animation-delay:.28s }
@media (prefers-reduced-motion: reduce) {
  .band-opts .band-btn, .bub-pick-opts .bub-pick-btn, .home-grid .game-tile { animation: none; }
}

/* ── Maskot-kamarát v hrách (reaguje na správne/zle) ── */
.game-buddy { position:fixed; left:max(6px,env(safe-area-inset-left)); bottom:max(clamp(120px,22vh,220px), calc(env(safe-area-inset-bottom) + 12px));
  width:clamp(56px,16vw,88px); z-index:60; pointer-events:auto; cursor:grab; touch-action:none;
  -webkit-tap-highlight-color:transparent; transform-origin:center bottom; opacity:.98;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.22));
  animation:mascot-bob 3s ease-in-out infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.game-buddy.dragging { cursor:grabbing; animation:none; filter:drop-shadow(0 12px 18px rgba(0,0,0,.32)); }
.game-buddy img { width:100%; height:auto; display:block; pointer-events:none; }
/* Bublina sprievodcu (maskot radí, ako sa hrá) */
.buddy-bubble { position:fixed; z-index:61; max-width:230px; pointer-events:none;
  background:#fff; color:#1E1B3A; font-weight:800; font-size:.92rem; line-height:1.25;
  padding:10px 14px; border-radius:16px 16px 16px 4px;
  box-shadow:0 8px 24px rgba(30,27,58,.22), inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0; transform:translateY(6px) scale(.92); transform-origin:left bottom;
  transition:opacity 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1); }
.buddy-bubble.show { opacity:1; transform:translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .buddy-bubble { transition:none; } }
.game-buddy.pet-cheer, .game-buddy.pet-wiggle { animation-duration:.9s; }
@media (prefers-reduced-motion: reduce) { .game-buddy { animation:none; } }

/* ════════════════════════════════════════════════════════════════════════════
   ZVIERATKÁ — jednotná premium prezentácia (zjednotiť + povýšiť existujúcu sadu)
   Cieľ: koniec „emoji nálepky" — jemné uzemnenie tieňom + diskrétny idle život
   (dýchanie + občasné žmurknutie) tam, kde zvieratko vystupuje ako postava.
   ════════════════════════════════════════════════════════════════════════════ */
.rmk-animal { filter: drop-shadow(0 3px 6px rgba(30,27,58,.18)); }
/* Idle „nažive": jemné nadýchnutie + krátke žmurknutie (scaleY dip) v slučke. */
@keyframes animal-idle {
  0%, 38%   { transform: scale(1, 1); }
  46%       { transform: scale(1.025, 1.025); }
  49%       { transform: scale(1.03, 0.9); }   /* žmurknutie / mihnutie */
  52%       { transform: scale(1.025, 1.025); }
  62%, 100% { transform: scale(1, 1); }
}
.animal-card .rmk-animal { transform-origin: bottom center; animation: animal-idle 4.2s ease-in-out infinite; }
.animal-card:nth-child(2n) .rmk-animal { animation-delay: -1.4s; }
.animal-card:nth-child(3n) .rmk-animal { animation-delay: -2.6s; }
.game-buddy img { animation: animal-idle 3.8s ease-in-out infinite; transform-origin: bottom center; }
@media (prefers-reduced-motion: reduce) {
  .animal-card .rmk-animal, .game-buddy img { animation: none !important; }
}

/* ── HUDBA (Simon-says xylofón) ── */
.music-play { display:flex; flex-direction:column; height:100%; background:linear-gradient(160deg,#F5F3FF 0%,#EDE9FE 55%,#E0E7FF 100%); transition:background 400ms ease; }
.music-play.music-phase-play { background:linear-gradient(160deg,#EEF2FF 0%,#C7D2FE 55%,#DDD6FE 100%); }
.music-play.music-phase-input { background:linear-gradient(160deg,#FFFBEB 0%,#FEF3C7 55%,#FDE68A 100%); }
.music-play.music-phase-play #musicPads { pointer-events:none; opacity:.55; transition:opacity 200ms; }
.music-stage { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,2.5vh,22px); padding:16px 16px clamp(68px,12vh,86px); position:relative; }
.music-phase-indicator { font-size:clamp(2.8rem,11vw,4.5rem); text-align:center; min-height:1.1em; transition:opacity 300ms; }
.music-hint { font-weight:900; font-size:clamp(1.1rem,4.5vw,1.5rem); color:#4C1D95; text-align:center; min-height:1.4em; }
.music-pads { display:flex; gap:clamp(8px,2.5vw,16px); align-items:flex-end; justify-content:center; width:100%; max-width:520px; transition:opacity 200ms; }
.music-pad { flex:1; max-width:90px; height:clamp(130px,30vh,220px); border:none; border-radius:18px;
  background:var(--pc); box-shadow:0 8px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.4), 0 12px 26px rgba(0,0,0,.18);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform 90ms ease, filter 90ms ease; position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; }
.music-pad:active { transform:translateY(4px); box-shadow:0 4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.4); }
.music-pad.lit { filter:brightness(1.35) saturate(1.2); transform:translateY(-6px) scale(1.04); box-shadow:0 14px 0 rgba(0,0,0,.12), 0 0 30px var(--pc); }
.music-pad.pad-correct { animation:correct-bounce 400ms var(--ease-bounce); }
.music-pad.pad-wrong   { animation:shake 300ms ease; filter:brightness(.8); }
.pad-emoji { font-size:clamp(1.8rem,7vw,2.6rem); display:block; pointer-events:none; line-height:1; }
.pad-label { font-size:clamp(0.62rem,2.1vw,0.82rem); font-weight:900; color:rgba(0,0,0,.48); display:block; pointer-events:none; }
.music-hud { position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  min-width:min(260px,calc(100% - 32px)); padding:12px 22px 14px;
  background:rgba(255,255,255,0.30); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,0.58); border-radius:24px;
  box-shadow:0 4px 24px rgba(124,58,237,.18);
  display:flex; flex-direction:column; gap:8px; align-items:center; z-index:5; white-space:nowrap; }
.music-progress-track { width:100%; height:12px; background:rgba(124,58,237,0.15); border-radius:999px; overflow:hidden; }
.music-progress-fill { height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,#7C3AED,#C084FC);
  animation:progress-in 700ms var(--ease-bounce) forwards; }
@keyframes progress-in { to { width:var(--pct,0%); } }
.music-round-label { font-weight:900; font-size:clamp(0.9rem,3.2vw,1.1rem); color:#4C1D95; }
.music-stage.shake { animation:shake 300ms ease; }
.music-error-banner {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#F87171; color:#fff; font-weight:900; font-size:clamp(1.4rem,5.5vw,2rem);
  padding:16px 32px; border-radius:22px; z-index:100; pointer-events:none;
  animation:music-banner-in 200ms var(--ease-bounce), music-banner-out 300ms 1200ms ease forwards; }
@keyframes music-banner-in { from{transform:translate(-50%,-50%) scale(0)} to{transform:translate(-50%,-50%) scale(1)} }
@keyframes music-banner-out { to{opacity:0} }
.music-replay { border:none; border-radius:999px; padding:12px 24px; font-family:inherit; font-weight:800; font-size:1rem;
  color:#fff; background:linear-gradient(145deg,#C084FC,#6366F1); box-shadow:0 6px 18px rgba(99,102,241,.45);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; min-height:56px; }
.music-replay:active { transform:scale(.94); }
@media (prefers-reduced-motion: reduce) { .music-play, .music-pad, .music-pad.lit, #musicPads { transition:none; animation:none; } }

.pet-play { display:flex; flex-direction:column; height:100%; background:linear-gradient(180deg,#9BE0FF 0%,#C8F0FF 46%,#E9FFD9 70%,#DFFFC9 100%); }
.pet-title { font-weight:900; font-size:1.2rem; color:#1E1B3A; }
/* Vonku na lúke: scéna (.scene-meadow — obloha, slnko, mraky, kopce, kvietky)
   leží za zvieratkom; isolation drží jej z-index:-1 vzadu. */
.pet-stage { flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
/* Tráva pod zvieratkom (namiesto koberčeka) */
.pet-mat { position:absolute; left:50%; bottom:22%; width:min(66vw,280px); height:40px;
  transform:translateX(-50%); border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 45%, #A6EE7A 0%, #74CE49 58%, #5FBF38 100%);
  box-shadow:0 5px 12px rgba(95,140,40,.30), inset 0 0 0 5px rgba(255,255,255,.18); }
/* Tieň na zemi — uzemní zvieratko; mierne „dýcha" so zvieratkom. */
.pet-shadow { position:absolute; left:50%; bottom:30%; width:min(40vw,150px); height:24px;
  transform:translateX(-50%); background:radial-gradient(50% 60% at 50% 50%, rgba(60,40,15,.34), rgba(60,40,15,0) 72%);
  z-index:1; pointer-events:none; animation:pet-shadow-breathe 3.4s ease-in-out infinite; }
@keyframes pet-shadow-breathe { 0%,100%{transform:translateX(-50%) scaleX(1); opacity:.9} 50%{transform:translateX(-50%) scaleX(.9); opacity:.7} }
.pet-body { width:min(74vw,300px); display:flex; align-items:center; justify-content:center; position:relative; z-index:2; cursor:pointer; }
.pet-body img { width:100%; height:auto; }
/* ŽIADNY filter na tele — Safari/iOS pri rotácii idle animácie vykresľuje
   `filter` ako sivý obdĺžnik („kocka"). Tieň zabezpečuje .pet-shadow na zemi. */
.pet-body img { width:100%; height:auto; object-fit:contain; }
.pet-body { transform-origin: center bottom; }
/* Špina, keď je čistota nízka — jemné hnedé fľaky na tele (CSS, nie emoji) + matný nádych. */
.pet-dirt { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .45s ease; }
.pet-dirt.on { opacity:1; }
.pet-dirt i { position:absolute; width:26px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(110,74,38,.7), rgba(110,74,38,0) 72%);
  transform:rotate(-12deg); }
.pet-dirt i:nth-child(2) { width:20px; height:15px; transform:rotate(18deg); }
.pet-dirt i:nth-child(3) { width:22px; height:14px; transform:rotate(-26deg); }
/* Špinu ukazuje .pet-dirt overlay (hnedé fľaky) — bez `filter` (Safari box artefakt). */
.pet-body.pet-dirty { opacity:.96; }
.pet-body.pet-scrubbing { cursor:grab; }
/* Myšlienková bublina — čo zvieratko chce (vedie dieťa). */
.pet-want { position:absolute; top:13%; left:60%; z-index:4; pointer-events:none;
  font-size:1.7rem; background:#fff; border-radius:50% 50% 50% 6px; padding:7px 11px;
  box-shadow:0 6px 16px rgba(30,27,58,.18); opacity:0; transform:scale(.6) translateY(6px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.pet-want.show { opacity:1; transform:scale(1) translateY(0); animation:pet-want-bob 2.2s ease-in-out infinite; }
@keyframes pet-want-bob { 0%,100%{transform:scale(1) translateY(0)} 50%{transform:scale(1.06) translateY(-5px)} }
/* Rečová bublina — zvieratko reaguje slovami (osobnosť). */
.pet-say { position:absolute; top:20%; left:50%; transform:translateX(-50%) scale(.5); z-index:6; pointer-events:none;
  max-width:74%; text-align:center; white-space:nowrap;
  font-size:clamp(1rem,4.4vw,1.35rem); font-weight:900; color:#1E1B3A;
  background:#fff; border-radius:18px 18px 18px 4px; padding:8px 14px;
  box-shadow:0 8px 22px rgba(30,27,58,.22); opacity:0;
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.pet-say.show { opacity:1; transform:translateX(-50%) scale(1); }
/* Ťukacia rekvizita (jedlo/lopta) — priletí, dieťa ju ťukne. */
.pet-item { position:absolute; bottom:36%; z-index:5; border:none; background:none; cursor:pointer;
  font-size:clamp(34px,9vw,52px); line-height:1; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22)); animation:pet-item-in .4s cubic-bezier(.34,1.56,.64,1) both, pet-item-bob 1.3s ease-in-out .4s infinite; }
@keyframes pet-item-in { 0%{opacity:0; transform:translateY(-70px) scale(.4)} 100%{opacity:1; transform:translateY(0) scale(1)} }
@keyframes pet-item-bob { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-10px) rotate(6deg)} }
.pet-item:active { transform:scale(1.25); }
.pet-stars { font-weight:900; font-size:1rem; color:#FCD34D; background:rgba(30,27,58,.72); border-radius:999px; padding:3px 12px; }
@media (prefers-reduced-motion: reduce) { .pet-want.show, .pet-item { animation:none; } }
/* Trvalý spánok — zvieratko leží naklonené, kým ho nezobudíš. */
.pet-body.pet-sleeping { animation:none; transform:rotate(-12deg) translateY(8px) scale(.98); transition:transform .6s ease; }
/* Pokoj — dýchanie (idle základ) */
.pet-idle { animation: pet-breathe 3.4s ease-in-out infinite; }
@keyframes pet-breathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.025)} }
/* Nálada (mení parametre dýchania) */
.pet-sad   { animation: pet-breathe-sad 4.2s ease-in-out infinite; }
@keyframes pet-breathe-sad { 0%,100%{transform:translateY(2px) scale(.985) rotate(-1deg)} 50%{transform:translateY(4px) scale(.98) rotate(-1deg)} }
.pet-happy { animation: pet-breathe-happy 2.4s ease-in-out infinite; }
@keyframes pet-breathe-happy { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-9px) scale(1.04)} }
/* Idle mikro-pohyby (jednorazové — prebijú dýchanie počas trvania) */
.pet-hop    { animation: pet-hop .9s ease both; }
@keyframes pet-hop { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-26px) scaleY(1.05)} 55%{transform:translateY(0) scaleY(.92)} 72%{transform:translateY(-8px)} }
.pet-wiggle { animation: pet-wiggle .9s ease both; }
@keyframes pet-wiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(7deg)} 50%{transform:rotate(-7deg)} 80%{transform:rotate(4deg)} }
.pet-tilt   { animation: pet-tilt .9s ease both; }
@keyframes pet-tilt { 0%,100%{transform:rotate(0)} 40%,60%{transform:rotate(-12deg) translateY(-3px)} }
.pet-squish { animation: pet-squish .55s ease both; }
@keyframes pet-squish { 0%,100%{transform:scale(1,1)} 45%{transform:scale(1.08,.8)} }
.pet-peek   { animation: pet-peek .95s ease both; }
@keyframes pet-peek { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-12px) rotate(-5deg)} 65%{transform:translateX(12px) rotate(5deg)} }
/* Akčné animácie */
.pet-chomp  { animation: pet-chomp .72s ease both; }
@keyframes pet-chomp { 0%,100%{transform:scale(1,1)} 20%{transform:scale(1.1,.9)} 40%{transform:scale(.92,1.08)} 60%{transform:scale(1.08,.93)} 80%{transform:scale(.98,1.02)} }
.pet-cheer  { animation: pet-cheer .9s ease both; }
@keyframes pet-cheer { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-28px) rotate(-6deg)} 50%{transform:translateY(0)} 72%{transform:translateY(-18px) rotate(6deg)} }
.pet-sleep  { animation: pet-sleep 1.7s ease both; }
@keyframes pet-sleep { 0%{transform:rotate(0) scale(1)} 22%{transform:rotate(-14deg) translateY(6px) scale(.98)} 78%{transform:rotate(-14deg) translateY(6px) scale(.98)} 100%{transform:rotate(0) scale(1.04)} }
.pet-shiver { animation: pet-shiver .72s ease both; }
@keyframes pet-shiver { 0%,100%{transform:translateX(0)} 12%{transform:translateX(-6px) rotate(-3deg)} 36%{transform:translateX(6px) rotate(3deg)} 60%{transform:translateX(-4px)} 84%{transform:translateX(4px)} }
.pet-mood { position:absolute; top:8%; left:50%; transform:translateX(-50%); font-size:2.2rem; filter:drop-shadow(0 3px 6px rgba(0,0,0,.12)); pointer-events:none; z-index:3; }
/* Rekvizity (emoji efekty) */
.pet-prop { position:absolute; bottom:34%; font-size:2rem; pointer-events:none; will-change:transform,opacity; z-index:3; }
.pet-prop-eat    { animation: pp-eat 1s ease-out forwards; }
@keyframes pp-eat { 0%{opacity:0; transform:translateY(-90px) scale(1.2)} 20%{opacity:1} 80%{opacity:1; transform:translateY(0) scale(1)} 100%{opacity:0; transform:translateY(6px) scale(.2)} }
.pet-prop-ball   { animation: pp-ball 1s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes pp-ball { 0%{opacity:0; transform:translateY(0) scale(.5)} 15%{opacity:1} 40%{transform:translateY(-70px) scale(1)} 62%{transform:translateY(-8px)} 82%{transform:translateY(-44px)} 100%{opacity:0; transform:translateY(0) scale(.6)} }
.pet-prop-zzz    { animation: pp-zzz 1.5s ease-out forwards; }
@keyframes pp-zzz { 0%{opacity:0; transform:translateY(0) scale(.6)} 25%{opacity:1} 100%{opacity:0; transform:translateY(-90px) translateX(14px) scale(1.1)} }
.pet-prop-bubble { animation: pp-bubble 1.1s ease-out forwards; }
@keyframes pp-bubble { 0%{opacity:0; transform:translateY(10px) scale(.4)} 25%{opacity:.95} 100%{opacity:0; transform:translateY(-80px) scale(1.2)} }
.pet-prop-pop    { animation: pp-pop .9s ease-out forwards; }
@keyframes pp-pop { 0%{opacity:0; transform:translateY(0) scale(.4)} 20%{opacity:1} 100%{opacity:0; transform:translateY(-70px) scale(1.3)} }
/* Stmavnutie scény pri spánku */
.pet-dim { position:absolute; inset:0; background:rgba(20,20,45,.55); opacity:0; pointer-events:none; transition:opacity .5s ease; z-index:2; }
.pet-dim.on { opacity:1; }
/* 5 kompaktných statov v jednom rade (ikona nad mini-barom). */
.pet-stats { display:flex; gap:7px; padding:8px 14px; flex-shrink:0; }
.pet-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.pet-stat-ico { font-size:1.05rem; line-height:1; }
.pet-bar { width:100%; height:11px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; }
.pet-bar-fill { height:100%; width:80%; border-radius:999px; transition:width .35s ease, background .35s; }
/* 8 akcií v mriežke 4×2 + samostatné výrazné „Ísť von". */
.pet-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:6px 14px 4px; flex-shrink:0; }
.pet-act { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 3px; border:none; border-radius:16px;
  background:#fff; box-shadow:0 4px 14px rgba(30,27,58,.12); font-family:inherit; font-weight:800; font-size:.74rem; color:#475569;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform 120ms; min-height:58px; }
.pet-act:active { transform:scale(.92); }
.pet-act-em { font-size:1.5rem; line-height:1; }
/* „Ísť von" — výrazné celoširokové tlačidlo, spúšťa outdoor mini-hru. */
.pet-act-outdoors { flex-direction:row; gap:8px; margin:0 14px max(14px,env(safe-area-inset-bottom)); padding:13px 4px;
  background:linear-gradient(145deg,#86EFAC,#22C55E); color:#0a3d1a; font-size:1.02rem; min-height:56px; box-shadow:0 6px 18px rgba(34,197,94,.4); }
.pet-act-outdoors .pet-act-em { font-size:1.5rem; }
/* NAVÁDZANIE — tlačidlo, ktoré zvieratko práve chce, žiari a pulzuje (dieťa vie čo spraviť). */
.pet-act-want { box-shadow:0 0 0 3px #FBBF24, 0 6px 20px rgba(251,191,36,.6); animation:pet-want-pulse 1.1s ease-in-out infinite; }
@keyframes pet-want-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
/* Cieľ — veľké srdiečka šťastia hore v scéne. */
.pet-goal { position:absolute; top:6%; left:50%; transform:translateX(-50%); z-index:4; font-size:1.5rem; letter-spacing:2px; pointer-events:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
@media (prefers-reduced-motion: reduce) { .pet-act-want { animation:none; } }
@media (prefers-reduced-motion: reduce) {
  .pet-idle, .pet-sad, .pet-happy, .pet-hop, .pet-wiggle, .pet-tilt, .pet-squish, .pet-peek,
  .pet-chomp, .pet-cheer, .pet-sleep, .pet-shiver { animation: none; }
  .pet-prop, .pet-dim { display: none; }
}

@keyframes bub-float {
  0%   { transform: translateY(0)                              scale(0.5);  opacity: 0; }
  6%   { transform: translateY(calc(var(--bfloat, 700px) * -0.04)) scale(1.04); opacity: 1; }
  100% { transform: translateY(calc(var(--bfloat, 700px) * -1))    scale(0.85); opacity: 0; }
}
@keyframes bub-sway {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(var(--sw, 18px)); }
  75%  { transform: translateX(calc(var(--sw, 18px) * -1)); }
  100% { transform: translateX(0); }
}


/* ═══════════════════════════════════════
   HAD (Snake)
═══════════════════════════════════════ */
.snake-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #DCFCE7 0%, #BBF7D0 50%, #A7E66A 100%);
  position: relative; color: #14532D;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.snake-score-wrap {
  display: flex; flex-direction: column; align-items: center;
}
.snake-score {
  font-size: 2rem; font-weight: 900; color: #4D7C0F;
  letter-spacing: -1px; line-height: 1;
}
.snake-score-lbl {
  font-size: .65rem; font-weight: 700; color: #4D7C0F;
  text-transform: uppercase; letter-spacing: .8px;
}
.snake-canvas-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 12px 4px;
}
#snakeCanvas {
  border-radius: 20px;
  background: #8FD24A;
  border: 5px solid #fff;
  box-shadow: 0 12px 30px rgba(77,124,15,.30), inset 0 0 0 2px rgba(77,124,15,.15);
  display: block; touch-action: none;
  max-width: 100%; max-height: 100%;
}
.snake-dpad {
  flex-shrink: 0; padding: 6px 20px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  user-select: none; -webkit-user-select: none;
}
.dpad-row {
  display: flex; gap: 3px; align-items: center; justify-content: center;
}
.dpad-center { width: clamp(64px, 17vw, 86px); height: clamp(64px, 17vw, 86px); }
.dpad-btn {
  width: clamp(64px, 17vw, 88px); height: clamp(64px, 17vw, 88px);
  border-radius: 24px; border: none;
  background: linear-gradient(160deg, #A3E635 0%, #65A30D 100%);
  color: #fff; font-size: clamp(1.7rem, 5.5vw, 2.4rem); line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  text-shadow: 0 2px 3px rgba(45,80,10,.5);
  box-shadow: 0 6px 0 #3F6212, 0 10px 18px rgba(63,98,18,.35), inset 0 2px 0 rgba(255,255,255,.4);
  transition: transform 70ms ease, box-shadow 70ms ease, filter 70ms ease;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.dpad-btn:active {
  transform: translateY(4px); filter: brightness(1.08);
  box-shadow: 0 2px 0 #3F6212, 0 4px 10px rgba(63,98,18,.30), inset 0 2px 0 rgba(255,255,255,.4);
}

.snake-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(10,20,5,.92);
  animation: fadeIn 200ms ease; z-index: 20;
  padding: 20px;
}
.snake-over-emoji {
  font-size: clamp(3.5rem, 12vw, 5rem);
  filter: drop-shadow(0 0 20px rgba(163,230,53,.6));
  animation: pop 400ms cubic-bezier(.34,1.56,.64,1);
}
.snake-over-title {
  font-size: clamp(1.8rem, 5.5vw, 2.8rem); font-weight: 900; color: #fff;
  animation: pop 400ms 60ms cubic-bezier(.34,1.56,.64,1) both;
}
.snake-over-score {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem); font-weight: 700;
  color: #A3E635; animation: fadeIn 300ms 120ms both;
}
.snake-restart, .snake-home-btn { margin-top: 4px; }

/* ═══════════════════════════════════════
   NÁJDI ROZDIEL
═══════════════════════════════════════ */
.diff-play {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
}
.diff-scenes {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 4px 12px max(12px, env(safe-area-inset-bottom));
  justify-content: center;
}
.diff-scene-wrap {
  /* šírku zhora obmedz tak, aby DVE scény (5:3) + lišta + tlačidlo zmestili na výšku */
  width: 100%;
  max-width: min(100%, calc((100dvh - 190px) / 2 * 200 / 120));
  aspect-ratio: 200 / 120;
  margin: 0 auto;
  flex-shrink: 0; position: relative;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 0 0 2px rgba(255,255,255,.6);
}
/* Landscape (na šírku) — dve scény vedľa seba, nie pod sebou */
@media (orientation: landscape) {
  .diff-scenes { flex-direction: row; align-items: center; }
  .diff-scene-wrap { max-width: min(48%, calc((100dvh - 150px) * 200 / 120)); }
}
.diff-scene-wrap svg { width: 100%; height: 100%; display: block; }
.diff-label {
  position: absolute; top: 7px; left: 9px;
  font-size: 0.68rem; font-weight: 900;
  background: rgba(0,0,0,.48); color: #fff;
  padding: 2px 9px; border-radius: 20px;
  pointer-events: none; z-index: 5; letter-spacing: .3px;
}
.diff-label.tap { background: rgba(234,88,12,.85); }
.diff-scene-mod { cursor: pointer; }
.diff-miss {
  position: absolute; width: 52px; height: 52px;
  border-radius: 50%; border: 3px solid #EF4444;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 10;
  animation: diff-miss-fade 500ms ease forwards;
}
@keyframes diff-miss-fade {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}
/* počítadlo rozdielov + nápoveda */
.diff-banner {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 4px 12px 6px; font-weight: 900; color: #9A3412; font-size: 1rem;
}
.diff-pips { display: flex; gap: 6px; }
.diff-pip { width: 12px; height: 12px; border-radius: 50%; background: rgba(154,52,18,.25); transition: all 220ms var(--ease-bounce); }
.diff-pip.on { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.25); transform: scale(1.15); }
.diff-count { font-size: .95rem; background: rgba(255,255,255,.7); padding: 2px 10px; border-radius: 999px; }
.diff-hint-btn {
  flex-shrink: 0; align-self: center; margin: 2px auto max(10px, env(safe-area-inset-bottom));
  padding: 10px 22px; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 800; color: #9A3412;
  background: rgba(255,255,255,.88); box-shadow: var(--sh-1);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.diff-hint-btn:active { transform: scale(.94); }
.diff-hint-ring {
  position: absolute; width: 56px; height: 56px; transform: translate(-50%,-50%);
  border-radius: 50%; border: 4px solid #F59E0B; pointer-events: none; z-index: 9;
  box-shadow: 0 0 16px rgba(245,158,11,.6);
  animation: diff-hint-pulse 800ms ease-in-out 3;
}
@keyframes diff-hint-pulse {
  0%,100% { opacity: .3; transform: translate(-50%,-50%) scale(.7); }
  50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.12); }
}

/* ═══════════════════════════════════════
   ARKÁDOVKY lobby
═══════════════════════════════════════ */
.arcade-lobby {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #1E1B4B 0%, #312E81 40%, #4C1D95 100%);
}
.arcade-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px;
}
.arcade-title {
  font-size: 1.4rem; font-weight: 900; color: #fff; text-align: center;
}
.arcade-games {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: 20px; padding: 24px;
}
.arcade-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 24px 28px; border-radius: 24px; border: none;
  cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1);
  -webkit-user-select: none; user-select: none;
}
.arcade-card:active { transform: scale(.96); }
.arcade-card-emoji { font-size: 2.8rem; line-height: 1; }
.arcade-card-name  { font-size: 1.5rem; font-weight: 900; color: #fff; }
.arcade-card-desc  { font-size: 0.85rem; color: rgba(255,255,255,.6); font-weight: 500; }

/* ── Zábava fullscreen carousel ── */
.zabava-play, .tvorenie-play { flex:1; display:flex; flex-direction:column; min-height:0; }
.zabava-carousel { flex:1; position:relative; overflow:hidden; }
.za-track { display:flex; height:100%; transition:transform 350ms cubic-bezier(.34,1.56,.64,1); }
/* Snap-unit — priehľadný (rovnaký vzor ako .hm-card) */
.za-card {
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; box-sizing: border-box; background: transparent;
}
.za-card-emoji { font-size: clamp(5rem,18vw,7rem); line-height: 1; }
.za-card-name  { font-size: clamp(1.8rem,7vw,2.4rem); font-weight: 900; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.za-card-desc  { font-size: clamp(.9rem,3.5vw,1.1rem); color: rgba(255,255,255,.85);
  text-align: center; max-width: 280px; }
.za-arrow { position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.22); border:none; border-radius:50%;
  width:48px; height:48px; font-size:2rem; color:#fff; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; }
.za-prev { left:8px; } .za-next { right:8px; }
.za-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; }
.za-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4);
  transition:transform 150ms, background 150ms; }
.za-dot.active { background:#fff; transform:scale(1.3); }

/* ═══════════════════════════════════════
   ARCADE iframe + back button
═══════════════════════════════════════ */
.arcade-frame {
  position: fixed; inset: 0; width: 100%; height: 100%;
  border: none; z-index: 999; background: #000;
}
.arcade-back-btn {
  position: fixed; top: max(10px, env(safe-area-inset-top));
  left: 12px; z-index: 1000;
  background: rgba(0,0,0,.75); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 20px;
  padding: 8px 18px; font-size: 0.9rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* ═══════════════════════════════════════
   DESKTOP HOME LAYOUT (≥ 860px)
═══════════════════════════════════════ */
/* Široké obrazovky: domov ZOSTÁVA vycentrovaný (portrait), len širšia mriežka
   a obmedzená šírka obsahu — žiadny zľavolavený desktop rad. */
@media (min-width: 860px) {
  .home { padding: 24px 40px max(24px, env(safe-area-inset-bottom)); gap: 16px; align-items: center; }
  .home-topbar, .mascot-greet { max-width: 760px; }
  .home-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px; gap: 16px;
  }
  .home-grid > .game-tile:last-child:nth-child(odd) { grid-column: auto; max-width: none; justify-self: auto; }
  .game-tile { height: clamp(150px, 17vw, 180px); }
}

/* ═══════════════════════════════════════
   PUZZLE
═══════════════════════════════════════ */
.puzzle-play {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  gap: 12px; padding: 12px;
  overflow-y: auto;
}

.puzzle-board {
  flex-shrink: 0;
  display: grid;
  gap: 2px;
  background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);
  border-radius: 12px;
  padding: 12px;
  aspect-ratio: 1;
  width: 100%;
  max-width: 100%;
  max-height: 60vh;
}

.puzzle-slot {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  position: relative;
}

.puzzle-pieces {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 12px;
  min-height: 80px;
}

.puzzle-piece-tile {
  font-size: 3.5rem;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.2s;
}

.puzzle-piece-tile:active {
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.puzzle-piece-tile.placed {
  border: none;
  background: transparent;
  cursor: default;
  position: absolute !important;
}

/* ═══════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════
   COUNTING (redesigned)
═══════════════════════════════════════ */
.count-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 3vh, 26px); width: 100%;
}
.count-prompt {
  width: 100%; text-align: center; line-height: 1.2;
  font-weight: 900; color: var(--c-ink);
  font-size: clamp(1.05rem, 4.6vw, 1.45rem);
}
.count-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), auto);   /* stĺpce na šírku zvieratka */
  gap: clamp(10px, 3.5vw, 22px);
  justify-content: center; align-content: center;        /* celá mriežka vycentrovaná ako blok */
  justify-items: center; align-items: center;
  margin: 0 auto;
}
.count-animal {
  width: clamp(60px, 19vw, 104px);                        /* jednotná veľkosť, vyplní bunku */
  aspect-ratio: 1;
  animation: pop var(--mo-base) var(--ease) backwards;
  animation-delay: calc(var(--ci, 0) * 60ms);
}

/* ═══════════════════════════════════════
   PUZZLE (real drag jigsaw)
═══════════════════════════════════════ */
@keyframes pzbounce { 0%,100%{transform:scale(1)} 30%{transform:scale(1.06)} 60%{transform:scale(.98)} }

.jig-wrap {
  width: 100%; height: 100%; display: grid; place-items: center; min-height: 0;
  background: radial-gradient(circle at 25% 25%, var(--animal-color, #C084FC) 0%, transparent 55%),
              linear-gradient(135deg, #EDE9FE 0%, #F0FDF4 100%);
  border-radius: 18px;
}
@keyframes jig-snap-glow {
  0%   { filter: drop-shadow(0 0 8px gold) drop-shadow(0 0 18px rgba(255,215,0,.7)); }
  100% { filter: none; }
}
.jig-piece.jig-snap-flash { animation: jig-snap-glow 0.6s ease-out forwards; }
.jig-svg {
  height: 100%; width: auto;
  max-width: 100%; max-height: 100%;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.jig-frame { fill: var(--c-surface); stroke: var(--c-line); stroke-width: 2; }
.jig-ghost { opacity: .15; pointer-events: none; }
.jig-piece { cursor: grab; filter: url(#pzShadow); }
.jig-piece.dragging { cursor: grabbing; }
.jig-piece.placed { filter: none; cursor: default; }
.jig-piece.snapping { transition: transform .2s var(--ease); }
.jig-outline { fill: none; stroke: rgba(30,27,58,.30); stroke-width: 2; pointer-events: none; }
.jig-piece.placed .jig-outline { stroke: rgba(30,27,58,.10); }
.jig-svg.solved { animation: pzbounce var(--mo-slow) var(--ease); }
.jig-svg.solved .jig-outline { stroke: transparent; transition: stroke var(--mo-slow) var(--ease); }
.puzzle-hint { color: var(--c-muted); font-weight: 800; font-size: var(--fs-cap); text-align: center; padding: var(--sp-3); }

/* ── Profily + zóna pre dospelých (Fáza E) ── */
.home-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 4px 0; gap: 10px;
  width: 100%; max-width: 460px; margin: 0 auto;
}
.profile-chip {
  display: flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,.7); border-radius: 999px; padding: 6px 14px 6px 8px;
  font-family: inherit; box-shadow: 0 3px 10px rgba(30,27,58,.12);
}
.profile-chip-av { font-size: 1.4rem; display: flex; align-items: center; }
.profile-chip-name { font-weight: 800; color: #4C1D95; font-size: .95rem; }
/* Kenney avatar obrázky (na čipe / v zozname / v pickeri) */
.av-img { object-fit: contain; display: block; }
.profile-chip-av .av-img { width: 30px; height: 30px; }
.profile-av .av-img { width: 46px; height: 46px; }
.av-opt .av-img { width: 40px; height: 40px; pointer-events: none; }
.bub-pick-title .av-img { width: 26px; height: 26px; vertical-align: middle; display: inline-block; }
.adult-btn {
  width: 44px; height: 44px; border-radius: 14px; border: none; cursor: pointer;
  background: rgba(255,255,255,.7); font-size: 1.3rem; box-shadow: 0 3px 10px rgba(30,27,58,.12);
}
.profiles-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; width: 100%; max-width: 420px; margin: 0 auto; }
.profile-row {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: #fff; border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(30,27,58,.1); border: 3px solid transparent;
}
.profile-row.active { border-color: #7C3AED; }
.profile-av { font-size: 2rem; }
.profile-nm { flex: 1; font-weight: 800; color: #1E1B3A; font-size: 1.1rem; }
.profile-del { width: 42px; height: 42px; border: none; border-radius: 12px; background: #FEE2E2; cursor: pointer; font-size: 1.1rem; }
.profile-new { padding: 8px 18px max(16px, env(safe-area-inset-bottom)); width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.profile-av-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.av-opt { width: 48px; height: 48px; border: 2px solid transparent; border-radius: 14px; background: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.av-opt.active { border-color: #7C3AED; background: #EDE9FE; }
.profile-input { padding: 14px 16px; border-radius: 14px; border: 2px solid #CBD5E1; font-family: inherit; font-size: 1rem; }
.pin-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 24px; width: 100%; max-width: 360px; margin: 0 auto; }
.pin-hint { color: #475569; font-weight: 700; text-align: center; }
.pin-input { width: 160px; text-align: center; letter-spacing: 12px; font-size: 1.8rem; padding: 12px; border-radius: 14px; border: 2px solid #CBD5E1; font-family: inherit; }
.pin-err { color: #DC2626; font-weight: 700; min-height: 20px; }
.pin-forgot {
  background: none; border: none; color: #7C3AED; font-family: inherit;
  font-size: .82rem; font-weight: 700; text-decoration: underline; cursor: pointer;
  padding: 8px; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: color 2s linear;
}
.pin-forgot.holding { color: #DC2626; }
.adult-body { flex: 1; overflow-y: auto; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); width: 100%; max-width: 480px; margin: 0 auto; }
.adult-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(30,27,58,.1); }
.adult-table th, .adult-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #E2E8F0; }
.adult-table th { background: #EDE9FE; font-weight: 800; color: #4C1D95; font-size: .9rem; }
.adult-table td { font-weight: 700; color: #1E1B3A; }
.adult-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.adult-stat { flex: 1 1 28%; background: #fff; border-radius: 14px; padding: 14px 8px; text-align: center; box-shadow: 0 4px 14px rgba(30,27,58,.1); font-size: .8rem; color: #64748B; font-weight: 700; }
.adult-stat span { display: block; font-size: 1.3rem; color: #7C3AED; font-weight: 900; margin-bottom: 2px; }
/* Trend reakcie v tabuľke */
.adult-table td.trend-up   { color: #16A34A; font-weight: 900; text-align: center; }
.adult-table td.trend-down { color: #DC2626; font-weight: 900; text-align: center; }
.adult-table td.trend-flat { color: #64748B; font-weight: 900; text-align: center; }
/* Export pre špecialistu */
.adult-export { margin-top: 16px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(30,27,58,.1); text-align: center; }
.adult-export-title { font-size: .9rem; font-weight: 800; color: #4C1D95; margin-bottom: 10px; }
.adult-export-btns { display: flex; gap: 10px; justify-content: center; }
.export-btn { flex: 1; max-width: 220px; }
.adult-export-hint { margin-top: 8px; font-size: .72rem; color: #64748B; }
.btn-wipe { background: none; border: 1.5px solid #DC2626; color: #DC2626; border-radius: 12px; padding: 10px 18px; font-size: .82rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.btn-wipe:hover, .btn-wipe:focus-visible { background: #FEE2E2; }
.adult-note { margin-top: 16px; font-size: .8rem; color: #64748B; text-align: center; line-height: 1.5; }
.adult-spark-wrap { margin-top: 16px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(30,27,58,.1); text-align: center; }
.dash-spark { display: block; margin: 0 auto; }
.adult-tips, .adult-milestones { margin-top: 16px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(30,27,58,.1); }
.adult-tip { font-size: .85rem; color: #1E1B3A; padding: 8px 10px; border-radius: 10px; background: #FEF3C7; margin-bottom: 6px; line-height: 1.4; }
.adult-tip:last-child { margin-bottom: 0; }
.adult-milestone { font-size: .85rem; color: #1E1B3A; padding: 6px 4px; }
.adult-milestone b { color: #7C3AED; }
.adult-notes { margin-top: 16px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(30,27,58,.1); }
.adult-notes-ta {
  width: 100%; box-sizing: border-box; border-radius: 10px; border: 1.5px solid #E2E8F0;
  padding: 10px 12px; font-family: inherit; font-size: .88rem; color: #1E1B3A;
  resize: vertical; min-height: 64px;
}
.adult-notes-ta:focus { outline: none; border-color: #A855F7; }
.adult-errlog { margin-top: 16px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(30,27,58,.1); }
.adult-errlog-body { max-height: 160px; overflow-y: auto; }
.adult-err-row { font-size: .72rem; color: #64748B; font-family: monospace; padding: 4px 0; border-bottom: 1px solid #F1F5F9; word-break: break-word; }
.adult-errlog-clear { margin-top: 8px; width: 100%; }
.adult-quota-line { text-align: center; font-size: .78rem; color: #64748B; margin-top: 12px; }

/* ── PDF report (#11) — window.print() + @media print, žiadna nová knižnica ── */
.print-only-header { display: none; }
@media print {
  body * { visibility: hidden; }
  .adult-body, .adult-body * { visibility: visible; }
  .adult-body {
    position: absolute; left: 0; top: 0; width: 100%; max-width: none;
    overflow: visible; padding: 0; background: #fff;
  }
  .print-only-header { display: block; margin-bottom: 16px; }
  .print-title { font-size: 1.4rem; font-weight: 900; color: #4C1D95; }
  .print-sub { font-size: .95rem; color: #475569; margin-top: 2px; }
  /* Skry všetko interaktívne/nerelevantné pre papier — ostane tabuľka, sumár, graf,
     odporúčania, míľniky. Poznámky ostávajú (terapeut ich môže chcieť vytlačiť s dátami). */
  .bub-pick-hdr, .adult-export, .adult-audio, .adult-a11y, .adult-details,
  .adult-note, #quotaLine, .adult-errlog { display: none !important; }
  .adult-table, .adult-summary, .adult-spark-wrap, .adult-tips, .adult-milestones, .adult-notes {
    box-shadow: none; break-inside: avoid;
  }
}
.adult-details {
  margin-top: 12px; background: #fff; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(30,27,58,.1); font-size: .85rem; color: #1E1B3A; line-height: 1.5;
}
.adult-details summary { font-weight: 800; color: #4C1D95; cursor: pointer; }
.adult-details p { margin: 10px 0 0; }
.adult-changelog-rel { margin-top: 10px; }
.adult-changelog-rel ul { margin: 4px 0 0; padding-left: 20px; }
.adult-changelog-rel li { margin-bottom: 2px; }
.spooky-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.spooky-chip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 66px; padding: 8px 4px; border-radius: 12px; border: 2px solid #E2E8F0;
  background: #fff; font-family: inherit; font-size: .68rem; font-weight: 700;
  color: #1E1B3A; cursor: pointer; text-align: center;
}
.spooky-chip.excluded { border-color: #DC2626; background: #FEF2F2; opacity: .6; }
.spooky-chip.excluded img { filter: grayscale(1); }
.spooky-chip img { width: 40px; height: 40px; }
.adult-a11y { margin-top: 16px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(30,27,58,.1); }
.adult-toggle-row input[type="checkbox"] { width: 26px; height: 26px; accent-color: #7C3AED; cursor: pointer; }
.adult-fontsize-btns { display: flex; gap: 6px; }
.adult-fs-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 2px solid #E2E8F0; background: #fff;
  font-weight: 900; cursor: pointer; font-family: inherit;
}
.adult-fs-btn:nth-child(1) { font-size: .8rem; }
.adult-fs-btn:nth-child(2) { font-size: 1.05rem; }
.adult-fs-btn:nth-child(3) { font-size: 1.3rem; }
.adult-fs-btn.active { border-color: #7C3AED; background: #EDE9FE; color: #4C1D95; }
.adult-season-btns { flex-wrap: wrap; }
.adult-season-btn {
  height: 40px; padding: 0 12px; border-radius: 10px; border: 2px solid #E2E8F0; background: #fff;
  font-weight: 800; font-size: .95rem; cursor: pointer; font-family: inherit;
}
.adult-season-btn.active { border-color: #7C3AED; background: #EDE9FE; color: #4C1D95; }
.adult-lang-btn {
  height: 40px; padding: 0 14px; border-radius: 10px; border: 2px solid #E2E8F0; background: #fff;
  font-weight: 800; font-size: .95rem; cursor: pointer; font-family: inherit;
}
.adult-lang-btn.active { border-color: #7C3AED; background: #EDE9FE; color: #4C1D95; }
.adult-voicelang-btn {
  height: 40px; padding: 0 14px; border-radius: 10px; border: 2px solid #E2E8F0; background: #fff;
  font-weight: 800; font-size: .95rem; cursor: pointer; font-family: inherit;
}
.adult-voicelang-btn.active { border-color: #7C3AED; background: #EDE9FE; color: #4C1D95; }

/* ── A11y: veľkosť písma (na <html>, škáluje všetky rem jednotky) ── */
html.font-sm { font-size: 88%; }
html.font-lg { font-size: 116%; }

/* ── A11y: vysoký kontrast — jemný filter na obsah, nie na fixný nav (dvojaký efekt). ── */
body.theme-hc #app { filter: contrast(1.3) saturate(1.2); }
body.theme-hc *:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }

/* ── A11y: zjednodušené UI — skryje sekundárne prvky (počítadlá/progres), core hra ostáva. ── */
body.simplified-ui .progress-pill,
body.simplified-ui .tile-stars,
body.simplified-ui .cat-prog,
body.simplified-ui .cat-prog-lbl,
body.simplified-ui .hm-sticker-btn { display: none !important; }

/* ── Tablet / iPad portrait (Fáza F): vyplniť šírku, žiadne prázdne okraje ── */
@media (min-width: 600px) and (max-width: 859px) {
  .home { padding: 6px 24px max(20px, env(safe-area-inset-bottom)); }
  .home-topbar, .mascot-greet { max-width: 700px; }
  .home-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 700px; gap: 14px;
  }
  .home-grid > .game-tile:last-child:nth-child(odd) { grid-column: auto; max-width: none; justify-self: auto; }
  .game-tile { height: 168px; }
  /* Herné plochy a panely nech vyplnia viac šírky (nie úzky 520px stĺpec).
     POZN.: žiadny margin:auto na flex prvkoch bez width:100% — scvrklo by ich
     na obsah (dvere 0px). .doors-row sa centruje cez justify-content sám. */
  .shell-stage, .shell-toolbelt { max-width: clamp(320px, 92%, 660px); }
  .bub-pick-opts, .band-opts { max-width: 520px; }
}

/* ══════════════════════════════════════════
   SPLASH — studio intro (animované MRAZOSOFT logo)
══════════════════════════════════════════ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 32%, #1b2440 0%, #0b1020 68%, #070a16 100%);
  opacity: 1; transition: opacity .35s ease;
}
.splash.out { opacity: 0; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.splash-flake {
  width: clamp(96px, 30vw, 150px); height: auto; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 18px rgba(56,189,248,.45));
  animation: spl-flake 2.3s cubic-bezier(.2,.7,.2,1) both;
}
.splash-flake line { stroke-dasharray: 40; stroke-dashoffset: 40; animation: spl-draw 1s ease forwards .15s; }
.splash-word {
  font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: 2px;
  font-size: clamp(1.6rem, 7vw, 2.4rem); color: #E6EDF5;
  opacity: 0; transform: translateY(10px); animation: spl-rise .7s ease forwards .9s;
}
.splash-word span {
  background: linear-gradient(120deg, #38BDF8, #818CF8, #22D3EE);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash-tag {
  color: #8aa0c8; font-weight: 700; font-size: .82rem; letter-spacing: 4px; text-transform: uppercase;
  opacity: 0; transform: translateY(10px); animation: spl-rise .7s ease forwards 1.3s;
}
.splash-skip {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom));
  color: rgba(255,255,255,.4); font-size: .78rem; font-weight: 700;
  opacity: 0; animation: spl-rise .6s ease forwards 1.9s;
}
@keyframes spl-draw  { to { stroke-dashoffset: 0; } }
@keyframes spl-flake { 0% { transform: scale(.4) rotate(-90deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes spl-rise  { to { opacity: 1; transform: translateY(0); } }
.splash.reduced .splash-flake,
.splash.reduced .splash-flake line,
.splash.reduced .splash-word,
.splash.reduced .splash-tag,
.splash.reduced .splash-skip { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .splash-flake, .splash-flake line, .splash-word, .splash-tag, .splash-skip { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
}

/* ── BUNNY INTRO (prvé spustenie — zajko pribehne + logo) ── */
.bunny-intro {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0b1020;
  opacity: 1; transition: opacity .35s ease;
}
.bunny-intro.out { opacity: 0; }
.bunny-intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.bunny-intro-sound {
  position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(20,20,30,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.bunny-intro-sound svg { width: 22px; height: 22px; }
.bunny-intro-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.bunny-intro-img {
  width: clamp(180px, 52vw, 320px); height: auto;
  filter: drop-shadow(0 16px 26px rgba(76,29,149,.22));
  animation: bunny-hop-in .9s cubic-bezier(.34,1.56,.64,1) both,
             bunny-idle-bob 2.4s ease-in-out infinite .9s;
}
.bunny-intro-logo {
  width: clamp(170px, 46vw, 280px); height: auto;
  opacity: 0; animation: bunny-logo-in .7s cubic-bezier(.34,1.56,.64,1) forwards .85s;
}
@keyframes bunny-hop-in {
  0%   { transform: translateY(160%) scale(.6) rotate(-8deg); opacity: 0; }
  55%  { transform: translateY(-14px) scale(1.05) rotate(3deg); opacity: 1; }
  75%  { transform: translateY(4px) scale(.98) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes bunny-idle-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
@keyframes bunny-logo-in {
  0%   { opacity: 0; transform: translateY(24px) scale(.7); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.bunny-intro.reduced .bunny-intro-img,
.bunny-intro.reduced .bunny-intro-logo { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bunny-intro-img, .bunny-intro-logo { animation: none; opacity: 1; transform: none; }
}

/* ── ONBOARDING (prvé spustenie) ── */
.onboard { justify-content: center; gap: 8px; position: relative; }
.onboard-langbar { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 14px; z-index: 5; }
.onboard-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 16px 4px; text-align: center; }
.onboard-mascot { width: clamp(84px, 24vw, 112px); height: auto; filter: drop-shadow(0 8px 12px rgba(30,27,58,.16)); animation: mascot-bob 3s ease-in-out infinite; }
.onboard-title { font-weight: 900; font-size: clamp(1.3rem, 5.5vw, 1.7rem); color: #4C1D95; }
.onboard-sub { font-weight: 700; color: #6D5B9E; font-size: clamp(.95rem, 3.6vw, 1.1rem); }
.onboard-form { margin-top: 4px; }
.onboard-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; font-weight: 700; color: #5B21B6; line-height: 1.4; cursor: pointer; margin-bottom: 10px; text-align: left; }
.onboard-consent input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; cursor: pointer; accent-color: #7C3AED; }
.onboard-go { font-size: 1.15rem; padding: 16px; }
.onboard-go:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .onboard-mascot { animation: none; } }

/* ════════ OŽIVENIE (juice) ════════ */
/* Plynulý nábeh každej obrazovky (kontajnery sa pri render() vytvárajú nanovo → anim sa spustí). */
@keyframes view-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.home, .home-new, .game-shell, .bubble-play, .pet-play, .draw-play, .bub-pick, .arcade-lobby, .gallery, .onboard, .zabava-play, .tvorenie-play {
  animation: view-in .3s cubic-bezier(.22,1,.36,1) both;
}
/* Jemný trblietavý sheen prechádzajúci po dlaždiciach (živšie domov). */
.game-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.30) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 150% 0;
  animation: tile-sheen 6s ease-in-out infinite;
}
.home-grid > .game-tile:nth-child(2n)::after   { animation-delay: 1.4s; }
.home-grid > .game-tile:nth-child(3n)::after   { animation-delay: 2.6s; }
@keyframes tile-sheen { 0%, 68% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
/* Globálny tap ripple (vytvára JS pri ťuknutí). */
.tap-ripple {
  position: fixed; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.45), rgba(124,58,237,0) 70%);
  pointer-events: none; z-index: 9999; animation: tap-ripple .5s ease-out forwards;
}
@keyframes tap-ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .home, .home-new, .game-shell, .bubble-play, .pet-play, .draw-play, .bub-pick, .arcade-lobby, .gallery, .onboard, .zabava-play, .tvorenie-play { animation: none; }
  .game-tile::after { animation: none; opacity: 0; }
  .tap-ripple { display: none; }
  .home-new::before, .home-new::after { animation: none; opacity: .6; }
  .hm-card-face, .hm-card-face::after { animation: none; }
  .hm-card-corner { animation: none; }
}

/* ── Ovládanie zvuku v rodičovskom paneli ── */
.adult-audio {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
}
.adult-audio-title { font-weight: 800; color: #4338CA; margin-bottom: 10px; }
.adult-audio-row {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: #475569;
}
.adult-audio-row input[type="range"] {
  flex: 1; accent-color: #6366F1; height: 28px; cursor: pointer;
}
.adult-audio-row b { min-width: 48px; text-align: right; color: #4338CA; }
.adult-mute { margin-top: 12px; width: 100%; }

/* ── Music drum-roll selektor ── */
.mm-drum-wrap {
  position: relative; flex: 1; max-width: 200px; height: 114px;
  overflow: hidden; border-radius: 14px; border: 1.5px solid rgba(139,92,246,0.25);
}
.mm-drum {
  overflow-y: scroll; scroll-snap-type: y mandatory; height: 100%; scrollbar-width: none;
}
.mm-drum::-webkit-scrollbar { display: none; }
.mm-drum-spacer { height: 38px; flex-shrink: 0; display: block; }
.mm-drum-item {
  height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: rgba(109,40,217,0.45);
  scroll-snap-align: center; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: color 150ms, font-size 120ms;
}
.mm-drum-item.mm-active { color: #5B21B6; font-size: 15px; }
.mm-drum-sel {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 6px; right: 6px; height: 38px;
  background: rgba(139,92,246,0.12); border-radius: 9px;
  border: 1.5px solid rgba(139,92,246,0.32); pointer-events: none; z-index: 2;
}
.mm-drum-fade-top, .mm-drum-fade-bot {
  position: absolute; left: 0; right: 0; height: 38px; z-index: 3; pointer-events: none;
}
.mm-drum-fade-top { top: 0; background: linear-gradient(to bottom, rgba(255,255,255,.95), transparent); }
.mm-drum-fade-bot { bottom: 0; background: linear-gradient(to top, rgba(255,255,255,.95), transparent); }
/* Šípky pre desktop (prev/next) */
.mm-drum-row { display: flex; align-items: center; gap: 6px; flex: 1; }
.mm-arrow {
  background: rgba(139,92,246,.12); border: 1.5px solid rgba(139,92,246,.28);
  border-radius: 50%; width: 34px; height: 34px; font-size: 20px; line-height: 1;
  color: #5B21B6; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 120ms;
  -webkit-tap-highlight-color: transparent;
}
.mm-arrow:hover { background: rgba(139,92,246,.22); }
.mm-arrow:active { background: rgba(139,92,246,.36); transform: scale(.92); }
.mm-row { align-items: flex-start !important; }

/* ── Hra Spinner (roztáčateľná vločka) ── */
.spinner-play { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.spin-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  position: relative; touch-action: none; -webkit-user-select: none; user-select: none;
  padding: 16px;
}
.spin-wrap {
  width: min(72vw, 56vh, 420px); aspect-ratio: 1; cursor: pointer;
  will-change: transform; filter: drop-shadow(0 12px 30px rgba(56,189,248,.35));
}
.spin-svg { width: 100%; height: 100%; display: block; }
.spin-count {
  font-size: 1.5rem; font-weight: 900; color: #fff; min-width: 40px; text-align: center;
  background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 14px;
}
.spin-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.8); font-weight: 800; font-size: .95rem; pointer-events: none;
  background: rgba(0,0,0,.28); padding: 6px 16px; border-radius: 999px; text-align: center;
  transition: opacity .4s; white-space: nowrap;
}
.spin-hint.hide { opacity: 0; }
/* farebný glow za spinnerom (intenzita podľa otáčok) */
.spin-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(86vw, 66vh, 500px); aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(129,140,248,.55) 0%, rgba(56,189,248,.28) 45%, rgba(244,114,182,0) 72%);
  filter: blur(8px); transition: opacity .12s linear;
}
/* stred = brzda (klikateľný hub) — žeravie pri brzdení cez --heat */
.spin-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: clamp(54px, 17vw, 96px); aspect-ratio: 1; border-radius: 50%; border: none; padding: 0;
  background: radial-gradient(circle at 42% 38%, #fff, #C7D2FE);
  box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.8);
  cursor: pointer; z-index: 4; -webkit-tap-highlight-color: transparent; touch-action: none;
}
.spin-hub-core {
  position: absolute; inset: 28%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #818CF8, #4F46E5);
  box-shadow:
    0 0 calc(14px * var(--heat,0)) calc(5px * var(--heat,0)) rgba(255,120,40,calc(.9 * var(--heat,0))),
    inset 0 0 6px rgba(0,0,0,.25);
  transition: background .1s;
}
.spin-hub.braking { transform: translate(-50%,-50%) scale(.93); }
.spin-hub.braking .spin-hub-core { background: radial-gradient(circle at 50% 40%, #FDBA74, #EA580C); }
/* odlietajúce mini-logá MRAZOSOFT */
.spin-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.spin-flake { position: absolute; transform: translate(-50%,-50%); will-change: transform, opacity; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
/* immersívne pozadie spinnera */
.spinner-play { background: radial-gradient(circle at 50% 42%, #1E293B 0%, #0F172A 60%, #060A14 100%); }
.spin-stage { perspective: 800px; }
.spin-wrap { filter: drop-shadow(0 0 28px rgba(99,102,241,.55)); }
/* ručná brzda */
.spin-handbrake {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 6; border: none; border-radius: 999px; cursor: pointer;
  padding: 13px 26px; font-family: inherit; font-size: 1.05rem; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #F87171, #DC2626); box-shadow: 0 8px 22px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-user-select: none; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.spin-handbrake.on { transform: translateX(-50%) scale(.94); box-shadow: 0 3px 12px rgba(220,38,38,.6), 0 0 26px 6px rgba(255,120,40,.6); }
.spinner-tile-spin { display: inline-block; animation: spinTileRot 3.2s linear infinite; }
@keyframes spinTileRot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner-tile-spin { animation: none; } }

/* ── Počítaj: vizuálne sčítanie/odčítanie do 20 ── */
.eq-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 10px; padding: 8px 12px;
}
.eq-grp {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center;
  max-width: 38vw; padding: 8px 10px; border-radius: 16px;
  background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.eq-animal { width: clamp(26px, 7vw, 46px); height: clamp(26px, 7vw, 46px); }
.eq-op { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 900; color: #0369A1; }
.eq-q  { font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 900; color: #DB2777; }
.eq-gone { position: relative; opacity: .55; }
.eq-gone::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 4px;
  background: #EF4444; border-radius: 2px; transform: rotate(-8deg); box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
@media (orientation: landscape) { .eq-grp { max-width: 26vw; } }

/* ── Vyšperkované pozadie domova: tráva, kvietky, stromčeky ── */
.home-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; z-index: 0; pointer-events: none; overflow: hidden; }
.home-ground span { position: absolute; bottom: 6px; line-height: 1; }
.home-ground .g-flower { font-size: clamp(18px, 5vw, 30px); transform: scale(var(--s, 1)); transform-origin: bottom center; animation: gSway 3.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.home-ground .g-grass { font-size: clamp(20px, 5.5vw, 34px); bottom: 2px; opacity: .92; animation: gSway 4s ease-in-out infinite; }
.home-ground .g-tree { font-size: clamp(40px, 12vw, 72px); left: 2%; bottom: 8px; }
.home-ground .g-bush { font-size: clamp(30px, 9vw, 54px); bottom: 4px; transform: scaleX(-1); }
@keyframes gSway { 0%,100% { transform: rotate(-4deg) scale(var(--s,1)); } 50% { transform: rotate(4deg) scale(var(--s,1)); } }
@media (prefers-reduced-motion: reduce) { .home-ground span { animation: none !important; } }

/* maskot — voľne premiestniteľný (drag) */
.mascot-greet.is-free { width: min(58vw, 220px); }
.mascot-greet.is-free .mascot-bubble { font-size: .9rem; }
.mascot-greet { cursor: grab; }

/* ── Hra Ovečka na lúke ── */
.sheep-play { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheep-field { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.sheep-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #BAE6FD 0%, #DDF3FF 34%, #E9FBE0 50%); }
.sheep-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  background: linear-gradient(180deg, #86EFAC 0%, #4ADE80 45%, #22C55E 100%);
  border-top-left-radius: 50% 22px; border-top-right-radius: 50% 22px; }
.sheep-plants { position: absolute; inset: 0; }
.sheep-plant { position: absolute; transform: translate(-50%,-50%); font-size: clamp(20px, 6vw, 34px);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); will-change: transform, opacity; }
.sheep-plant.eaten { animation: sheepEat 380ms ease forwards; }
.sheep-plant.growing { animation: sheepGrow 600ms cubic-bezier(.34,1.56,.64,1); }
@keyframes sheepEat { to { transform: translate(-50%,-50%) scale(.1); opacity: 0; } }
@keyframes sheepGrow { from { transform: translate(-50%,-50%) scale(.1); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.sheep { position: absolute; transform: translate(-50%,-50%); font-size: clamp(40px, 12vw, 68px);
  z-index: 3; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); will-change: left, top; }
.sheep.flip { transform: translate(-50%,-50%) scaleX(-1); }
.sheep.walking { animation: sheepBob 380ms ease-in-out infinite; }
@keyframes sheepBob { 0%,100% { margin-top: 0; } 50% { margin-top: -6px; } }
.sheep-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: rgba(255,255,255,.82); color: #166534; font-weight: 800; padding: 7px 18px; border-radius: 999px;
  font-size: .92rem; text-align: center; transition: opacity .4s; pointer-events: none; white-space: nowrap; }
.sheep-hint.hide { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sheep.walking { animation: none; } }

/* ── Zvieratko: živšie/realistickejšie ── */
.pet-emoji-body { font-size: clamp(96px, 34vw, 168px); line-height: 1; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.pet-body.pet-breathe { animation: petBreathe 3.4s ease-in-out infinite; }
@keyframes petBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* zohnutie po žrádlo */
.pet-body.pet-bend { animation: petBend 700ms ease-in-out; }
@keyframes petBend {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(14px) rotate(-7deg) scaleY(.94); }
  60% { transform: translateY(16px) rotate(-7deg) scaleY(.92); }
  100% { transform: translateY(0) rotate(0); }
}
/* zavreté oči pri spánku */
.pet-eyelids { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pet-eyelids i {
  position: absolute; top: 38%; width: 16%; height: 5px; border-radius: 5px;
  background: #3b3b3b; box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
.pet-eyelids i:first-child { left: 28%; transform: rotate(8deg); }
.pet-eyelids i:last-child  { right: 28%; transform: rotate(-8deg); }
.pet-body.pet-sleeping .pet-eyelids { opacity: 1; }
.pet-body.pet-sleeping { animation: petSleepBreathe 4.4s ease-in-out infinite; filter: brightness(.92) saturate(.9); }
@keyframes petSleepBreathe { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.02) translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .pet-body.pet-breathe, .pet-body.pet-sleeping { animation: none; } }

/* ── Ovečka: krajinka + radosť ── */
.sheep-sun { position: absolute; top: 7%; right: 10%; width: clamp(40px,12vw,64px); height: clamp(40px,12vw,64px);
  border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFF3B0, #FCD34D 60%, #FBBF24);
  box-shadow: 0 0 30px rgba(251,191,36,.6); }
.sheep-cloud { position: absolute; height: 22px; border-radius: 999px; background: rgba(255,255,255,.92);
  box-shadow: 0 8px 14px rgba(0,0,0,.05); will-change: transform; animation: cloud-drift linear infinite; }
.sheep-cloud::before, .sheep-cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.sheep-cloud::before { width:55%; height:170%; top:-70%; left:14%; }
.sheep-cloud::after { width:42%; height:150%; top:-50%; right:16%; }
.sheep-cloud.sc1 { width:90px; top:12%; left:-110px; animation-duration:40s; }
.sheep-cloud.sc2 { width:64px; top:24%; left:-90px; animation-duration:54s; animation-delay:-16s; opacity:.9; }
.sheep-cloud.sc3 { width:108px; top:6%; left:-130px; animation-duration:46s; animation-delay:-30s; opacity:.85; }
.sheep-hills { position:absolute; left:0; right:0; bottom:44%; width:100%; height:26%; }
.sheep-tree { position:absolute; left:6%; bottom:42%; font-size:clamp(44px,14vw,80px); filter:drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.sheep.sheep-happy { animation: sheepHappy 700ms cubic-bezier(.34,1.56,.64,1); }
@keyframes sheepHappy { 0%,100% { transform: translate(-50%,-50%) scale(1); } 40% { transform: translate(-50%,-66%) scale(1.12) rotate(-4deg); } 70% { transform: translate(-50%,-50%) scale(1.05) rotate(4deg); } }

/* ── Bohatšie herné pozadia (vrstvy + hĺbka) ── */
.scene::after {                       /* jemná vinetácia pre hĺbku */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 18%, transparent 58%, rgba(0,0,0,.10) 100%);
}
.scene-candy::after { background: radial-gradient(120% 90% at 50% 18%, transparent 60%, rgba(124,58,159,.10) 100%); }

/* ── Ochranná známka MRAZOSOFT (globálna, jemná) ── */
#msMark {
  position: fixed; left: max(8px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 9990; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px; border-radius: 999px; text-decoration: none;
  /* Plávajúci pill nad ľubovoľnou scénou (sky/meadow/candy/night) — pozadie musí byť
     dosť tmavé samo osebe (nie cez element-opacity, tá by pri svetlej scéne padla
     pod WCAG AA, axe: 2.47:1 na .scene-sky). */
  background: rgba(15,13,35,.78); color: #fff;
  font-size: 12px; font-weight: 900; letter-spacing: .4px;
  backdrop-filter: blur(3px); box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: auto; transition: background .2s;
}
#msMark:hover { background: rgba(15,13,35,.92); }
#msMark svg { width: 15px; height: 15px; display: block; }
@media (max-width: 380px) { #msMark span { display: none; } #msMark { padding: 4px; } }

/* ===== HOME-NEW CAROUSEL + PET PANEL ===== */
.home-new {
  display: flex; flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg,#1E1B4B 0%,#312E81 100%);
  position: relative;
  isolation: isolate;
}
.home-new > *:not(.scene) { position: relative; z-index: 1; }
/* Hviezdne pole — vrstva A */
.home-new::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at  9%  8%, rgba(255,255,255,.90) 50%, transparent),
    radial-gradient(1px   1px   at 28%  5%, rgba(224,231,255,.80) 50%, transparent),
    radial-gradient(2px   2px   at 52% 14%, rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1.2px 1.2px at 74%  7%, rgba(255,255,255,.90) 50%, transparent),
    radial-gradient(1.8px 1.8px at 91% 11%, rgba(199,210,254,.80) 50%, transparent),
    radial-gradient(1px   1px   at 16% 22%, rgba(255,255,255,.70) 50%, transparent),
    radial-gradient(1.4px 1.4px at 44% 19%, rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1.6px 1.6px at 67% 25%, rgba(224,231,255,.75) 50%, transparent),
    radial-gradient(1px   1px   at 84% 18%, rgba(255,255,255,.80) 50%, transparent),
    radial-gradient(2px   2px   at  6% 35%, rgba(255,255,255,.70) 50%, transparent);
  animation: hm-stars-twinkle 4.2s ease-in-out infinite alternate;
}
/* Hviezdne pole — vrstva B (fázový offset) */
.home-new::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 36% 10%, rgba(255,255,255,.80) 50%, transparent),
    radial-gradient(1.6px 1.6px at 58%  4%, rgba(199,210,254,.90) 50%, transparent),
    radial-gradient(1px   1px   at 79% 16%, rgba(255,255,255,.75) 50%, transparent),
    radial-gradient(1.8px 1.8px at 23% 31%, rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1.2px 1.2px at 49% 28%, rgba(224,231,255,.80) 50%, transparent),
    radial-gradient(1.4px 1.4px at 89% 32%, rgba(255,255,255,.70) 50%, transparent),
    radial-gradient(1px   1px   at 11% 45%, rgba(255,255,255,.75) 50%, transparent),
    radial-gradient(1.5px 1.5px at 62% 39%, rgba(199,210,254,.85) 50%, transparent),
    radial-gradient(1.8px 1.8px at 39% 44%, rgba(255,255,255,.80) 50%, transparent),
    radial-gradient(1.2px 1.2px at 96% 22%, rgba(255,255,255,.70) 50%, transparent);
  animation: hm-stars-twinkle 3.8s ease-in-out infinite alternate-reverse;
}
.home-new .home-topbar {
  /* .home-new > *:not(.scene) dáva VŠETKÝM priamym deťom z-index:1 (rovnaká úroveň) —
     .home-hero prichádza v DOM AŽ PO topbare, takže by pri remíze prekryl jazykové menu
     (position:absolute vnútri topbaru). z-index:2 zaručí, že topbar (aj jeho menu) vyhrá. */
  position: relative; z-index: 2;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(8px,2vh,14px) clamp(10px,3vw,18px);
  min-height: clamp(48px,10vh,60px);
  gap: 8px;
}
/* Jazykové rýchle menu na ploche (bez PIN) — vysúva sa spod ikony vlajky. */
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: clamp(10px,3vw,18px); z-index: 500;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  animation: cat-in .25s var(--ease-bounce) both;
}
/* [hidden] má v UA stylesheete rovnakú špecificitu ako .lang-menu{display:grid} — bez tohto
   pravidla by autorský štýl vždy vyhral a menu by bolo VŽDY zobrazené aj s atribútom hidden. */
.lang-menu[hidden] { display: none; }
.lang-menu-opt {
  border: 2px solid transparent; border-radius: 10px; background: rgba(124,58,237,.06);
  width: clamp(42px,11vw,50px); height: clamp(42px,11vw,50px); font-size: clamp(1.3rem,4.5vw,1.6rem);
  cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.lang-menu-opt:active { transform: scale(.9); }
.lang-menu-opt.active { border-color: #7C3AED; background: #EDE9FE; }
.home-new .home-topbar-right { display: flex; gap: 8px; }
.hm-icon-btn {
  background: rgba(255,255,255,.15); border: none; border-radius: 50%;
  width: clamp(40px,10vw,48px); height: clamp(40px,10vw,48px);
  font-size: clamp(1.2rem,4vw,1.5rem); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.hm-icon-btn:active { transform: scale(.9); }
/* Carousel */
.hm-carousel {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
}
.hm-track {
  display: flex; height: 100%;
  transition: transform 350ms cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
/* Rytmiko logo pás */
.hm-logo {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  height: clamp(40px, 8vh, 60px);
  padding: 0 clamp(12px, 4vw, 24px);
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.45));
}
.hm-logo svg { height: 85%; width: auto; }

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM LANDING — maskót hero + 4 karty učebných oblastí
   Cieľ: pokoj, vzdušnosť, jasná voľba (4 namiesto 16). Jeden radius/shadow/motion.
   ════════════════════════════════════════════════════════════════════════════ */
.home-landing { gap: 0; }
.home-hero {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(4px,1.5vh,14px) 18px clamp(8px,2vh,16px);
  text-align: center;
}
.home-hero-mascot {
  position: relative;
  width: clamp(96px, 30vw, 150px); height: clamp(96px, 30vw, 150px);
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.40));
  will-change: transform;
  transition: transform 0.15s cubic-bezier(.2,.8,.2,1);
}
/* Meta-progresia (#10) — doplnok viazaný na súhrn hviezd naprieč appkou, nie na 1 hru.
   Čisto emoji, žiadne nové obrázky. Pozícia laduje per-tier (šatka na krku vs. klobúk/okuliare na hlave). */
.mascot-accessory {
  position: absolute; font-size: clamp(28px, 9vw, 44px);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  pointer-events: none;
}
.mascot-accessory[data-tier="1"] { bottom: 18%; right: 6%; }
.mascot-accessory[data-tier="2"] { top: -6%; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.mascot-accessory[data-tier="3"] { top: 28%; left: 50%; transform: translateX(-50%); }
.mascot-accessory[data-tier="4"] {
  top: -14%; left: 50%; transform: translateX(-50%);
  animation: mascot-crown-glow 2.4s ease-in-out infinite;
}
@keyframes mascot-crown-glow {
  0%,100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(255,210,63,0)); }
  50%     { filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,210,63,.85)); }
}
.home-hero-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: hero-bob 3.4s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes hero-bob {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-7px) scale(1.015); }
}
.home-hero-speech {
  margin-top: 10px;
  background: rgba(255,255,255,.96);
  color: #2A2350; font-weight: 800;
  font-size: clamp(.95rem, 4vw, 1.18rem);
  line-height: 1.25;
  padding: 10px 18px; border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  max-width: min(86%, 380px);
  position: relative;
  animation: speech-pop .5s var(--ease-bounce) both .15s;
  will-change: transform;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1);
}
.home-hero-speech::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 9px solid rgba(255,255,255,.96);
}
@keyframes speech-pop { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }

/* 4 karty oblastí — 2×2, veľké tappable, generous whitespace */
.cat-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3.2vw, 18px);
  padding: clamp(8px,2vh,14px) clamp(14px,4.5vw,22px) max(18px, env(safe-area-inset-bottom));
  align-content: start;
  width: 100%; max-width: 620px; margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
.cat-card {
  position: relative; border: none; cursor: pointer; font-family: inherit;
  border-radius: var(--r-lg);
  padding: clamp(14px,3.5vw,20px) clamp(12px,3vw,16px);
  min-height: clamp(150px, 38vw, 200px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  text-align: center; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  color: #fff; isolation: isolate;
  animation: cat-in .5s var(--ease-bounce) both;
  animation-delay: var(--cat-delay, 0ms);
}
.cat-card-bg {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
}
.cat-card-bg::after {   /* jemný horný highlight pre objem */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%);
}
.cat-card-icon {
  width: clamp(58px, 16vw, 84px); height: clamp(58px, 16vw, 84px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));
  animation: cat-float 4s ease-in-out infinite;
}
.cat-card:nth-child(2) .cat-card-icon { animation-delay: -1s; }
.cat-card:nth-child(3) .cat-card-icon { animation-delay: -2s; }
.cat-card:nth-child(4) .cat-card-icon { animation-delay: -3s; }
.cat-card-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes cat-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.cat-card-text {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%;
  position: relative; z-index: 1;
}
/* Lighthouse/axe: text-shadow nepočíta do WCAG kontrastu, na svetlejšom konci
   niektorých gradientov (slova/cisla/tvorba/zabava sa líšia) mohol biely text
   padnúť pod 4.5:1. Tmavý scrim POD textom garantuje kontrast bez ohľadu na to,
   aká farba oblasti je práve za ním — nemusím ladiť 4 gradienty jednotlivo. */
.cat-card-text::before {
  content: ""; position: absolute; z-index: -1; inset: -10px -14px -8px -14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.38) 35%);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.cat-card-name { font-size: clamp(1rem, 4.2vw, 1.3rem); font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,.28); }
.cat-card-sub  { font-size: clamp(.66rem, 2.6vw, .82rem); font-weight: 700; opacity: .92; line-height: 1.2; }
.cat-prog {
  width: 78%; max-width: 150px; height: 7px; margin-top: 6px;
  background: rgba(0,0,0,.22); border-radius: 999px; overflow: hidden;
}
.cat-prog-fill { display: block; height: 100%; background: rgba(255,255,255,.95); border-radius: 999px; transition: width .6s var(--ease); }
.cat-prog-lbl { font-size: .66rem; font-weight: 800; opacity: .92; margin-top: 1px; }
.cat-card-chev {
  position: absolute; top: 10px; right: 12px; font-size: 1.5rem; font-weight: 900;
  opacity: .55; line-height: 1;
}
.cat-card:active { transform: scale(.955); }
.cat-card-go { animation: cat-go .22s var(--ease) forwards !important; }
@keyframes cat-go { to { transform: scale(1.04); filter: brightness(1.12); } }
@keyframes cat-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }

/* ── OBRAZOVKA OBLASTI ── */
.cat-screen {
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  background: linear-gradient(180deg,#1E1B4B 0%,#312E81 100%);
  position: relative; isolation: isolate;
}
.cat-screen::before {   /* tónovaná žiara podľa oblasti */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(120% 70% at 50% -10%, var(--cat-grad), transparent 60%);
}
.cat-screen > *:not(.scene), .sticker-screen > *:not(.scene) { position: relative; z-index: 1; }
.cat-screen-hdr {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) clamp(12px,4vw,20px) 6px;
  min-height: clamp(52px,11vh,64px);
}
.cat-back {
  width: clamp(44px,11vw,52px); height: clamp(44px,11vw,52px); flex-shrink: 0;
  border: none; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.cat-back:active { transform: scale(.9); }
.cat-screen-title {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(1.1rem, 4.6vw, 1.5rem); font-weight: 900; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.cat-screen-icon img { width: clamp(30px,8vw,40px); height: clamp(30px,8vw,40px); object-fit: contain; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.cat-screen-spacer { width: clamp(44px,11vw,52px); flex-shrink: 0; }
.cat-games {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px,3.2vw,18px);
  padding: clamp(8px,2vh,14px) clamp(14px,4.5vw,22px) max(18px, env(safe-area-inset-bottom));
  align-content: start;
  width: 100%; max-width: 620px; margin: 0 auto;
}
.cat-games .game-tile { animation: cat-in .45s var(--ease-bounce) both; animation-delay: var(--cat-delay, 0ms); }
@media (min-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
  .cat-games { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-img, .cat-card-icon { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ZJEDNOTENIE GRAFIKY — úvodná obrazovka + oblasti + nálepkovník zdieľajú
   ROVNAKÚ svetlú hernú scénu ako hry (sceneHTML: obloha/slnko/oblaky/kopce).
   ════════════════════════════════════════════════════════════════════════════ */
/* Scéna musí ostať absolútna ZA obsahom (inak ju .home-new>*/.cat-screen>* zlomia). */
.home-new.home-landing > .scene, .cat-screen > .scene, .sticker-screen > .scene {
  position: absolute !important; inset: 0; z-index: 0 !important;
}
/* Parallax: scéna sa môže jemne hýbať — scale(1.06) skryje okraje pri posune. */
.home-new.home-landing > .scene {
  inset: -8px;
  will-change: transform;
  transform: scale(1.06);
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
/* Vypni tmavé hviezdne pozadie landingu + tmavý data-tod → svetlú scénu nech vidno. */
.home-new.home-landing { background: #BFE6FF; }
.home-new.home-landing::before, .home-new.home-landing::after { display: none; }
.home-new.home-landing[data-tod] { background: #BFE6FF; }
/* Oblasti + nálepkovník — svetlé (scéna prekryje), zruš tmavý gradient + tónovanú žiaru. */
.cat-screen, .sticker-screen { background: #BFE6FF; }
.cat-screen::before { display: none; }

/* Kontrast na svetlom pozadí — hlavička, profil, ikony, názvy = tmavý ink. */
.home-new.home-landing .profile-chip {
  background: rgba(255,255,255,.82); border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: var(--sh-1); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home-new.home-landing .profile-chip-name { color: var(--c-primary-d); text-shadow: none; }
.home-new.home-landing .hm-icon-btn {
  background: rgba(255,255,255,.7); color: var(--c-ink);
  border: 1.5px solid rgba(255,255,255,.9); box-shadow: var(--sh-1);
}
.home-landing .hm-sticker-count { color: var(--c-primary-d); }
.cat-screen .cat-back, .sticker-screen .cat-back { background: rgba(255,255,255,.7); color: var(--c-ink); box-shadow: var(--sh-1); }
.cat-screen .cat-screen-title, .sticker-screen .cat-screen-title { color: var(--c-ink); text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.sticker-prog-bar { background: rgba(255,255,255,.55); }
.sticker-prog-lbl { color: var(--c-ink); }
.sticker-cell.locked { background: rgba(255,255,255,.45); }
.sticker-cell.locked .sticker-art { opacity: .6; }
.sticker-q { color: rgba(30,27,58,.4); }
/* Karty oblastí na svetlom — o čosi výraznejší tieň pre oddelenie. */
.home-landing .cat-card { box-shadow: var(--sh-2); }

/* ── LANDSCAPE (tablet naležato) — kompaktnejší layout, nech sa všetko zmestí ── */
@media (orientation: landscape) and (max-height: 600px) {
  .home-hero { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 6px 18px; }
  .home-hero-mascot { width: clamp(64px,14vh,96px); height: clamp(64px,14vh,96px); }
  .home-hero-speech { margin-top: 0; max-width: 280px; }
  .home-hero-speech::before { display: none; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: clamp(8px,2vw,14px); }
  .cat-card { min-height: clamp(110px,30vh,150px); }
  .cat-card-icon { width: clamp(44px,11vh,64px); height: clamp(44px,11vh,64px); }
  .cat-games { grid-template-columns: repeat(4, 1fr); }
  .sticker-grid { grid-template-columns: repeat(8, 1fr); }
  /* tappable možnosti hier nech nie sú obrovské na nízkej výške */
  .bigsmall-opt { width: clamp(96px,30vh,150px); height: clamp(96px,30vh,150px); }
  .more-opt { min-height: clamp(110px,55vh,200px); }
  .letter-opt { aspect-ratio: 2; }
}

/* ── ZDIEĽANÝ ZÁKLAD „ťukni možnosť" band-hier (bigsmall/oddone/more/nummatch) ── */
.opt-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.opt-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px,3vh,26px); padding: clamp(10px,3vw,20px); position: relative; z-index: 2;
}
.opt-q-text { font-size: var(--fs-title); font-weight: 900; color: var(--c-ink); text-align: center; text-shadow: 0 1px 3px rgba(255,255,255,.6); }
.opt-q-text b { color: var(--c-primary); }
.opt-correct { animation: letter-pop .5s var(--ease-bounce); box-shadow: 0 0 0 4px var(--c-correct), var(--sh-2) !important; }
.bigsmall-opt.wrong, .odd-opt.wrong, .more-opt.wrong, .num-opt.wrong, .mood-opt.wrong { animation: shake 320ms ease; }

/* Veľké/malé */
.bigsmall-row { display: flex; align-items: center; justify-content: center; gap: clamp(12px,4vw,32px); flex-wrap: wrap; max-width: 100%; }
.bigsmall-opt {
  border: none; cursor: pointer; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1);
  width: clamp(88px,26vw,180px); height: clamp(88px,26vw,180px); display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease); padding: 6px;
  animation: cat-in .4s var(--ease-bounce) both;
}
.bigsmall-opt:active { transform: scale(.95); }
.bigsmall-art { display: grid; place-items: center; transition: transform .2s var(--ease); }
.bigsmall-art img { width: clamp(50px,17vw,120px); height: clamp(50px,17vw,120px); object-fit: contain; }

/* Čo nepatrí */
.odd-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(12px,3.5vw,20px); width: 100%; max-width: 420px; }
.odd-opt {
  border: none; cursor: pointer; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1);
  aspect-ratio: 1; display: grid; place-items: center; padding: clamp(8px,3vw,16px);
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  animation: cat-in .4s var(--ease-bounce) both;
}
.odd-opt:nth-child(2){animation-delay:.05s}.odd-opt:nth-child(3){animation-delay:.1s}.odd-opt:nth-child(4){animation-delay:.15s}.odd-opt:nth-child(5){animation-delay:.2s}
.odd-opt:active { transform: scale(.94); }
.odd-opt img { width: 100%; height: 100%; object-fit: contain; }
.odd-emoji { font-size: clamp(2.6rem,14vw,4rem); line-height: 1; }

/* Kam to patrí? */
.kam-item {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1);
  width: clamp(140px,42vw,190px); height: clamp(140px,42vw,190px);
  display: grid; place-items: center; padding: clamp(10px,3vw,18px);
  animation: cat-in .4s var(--ease-bounce) both;
}
.kam-item img { width: 100%; height: 100%; object-fit: contain; }
.kam-item .odd-emoji { font-size: clamp(3.2rem,16vw,4.6rem); }
.kam-baskets { display: flex; gap: clamp(12px,4vw,24px); width: 100%; max-width: 480px; }
.kam-basket {
  flex: 1; border: none; cursor: pointer; background: rgba(255,255,255,.92);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  min-height: clamp(76px,16vh,110px); padding: 10px; display: grid; place-items: center;
  font-size: clamp(1rem,3.6vw,1.3rem); font-weight: 900; color: var(--c-ink);
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  animation: cat-in .4s var(--ease-bounce) both;
}
.kam-basket:active { transform: scale(.95); }
.kam-basket.wrong { animation: shake 320ms ease; }

/* Viac/menej */
.more-row { display: flex; gap: clamp(12px,4vw,24px); width: 100%; max-width: 520px; }
.more-opt {
  flex: 1; border: none; cursor: pointer; background: rgba(255,255,255,.92); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  min-height: clamp(150px,40vh,260px); padding: clamp(8px,3vw,16px); display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  animation: cat-in .4s var(--ease-bounce) both;
}
.more-opt:active { transform: scale(.96); }
.more-animals { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; }
.more-animals img { width: clamp(38px,11vw,60px); height: clamp(38px,11vw,60px); object-fit: contain; }

/* Aké je zvieratko? — emócie */
.mood-animal-wrap { position: relative; display: grid; place-items: center; animation: cat-in .45s var(--ease-bounce) both; }
.mood-animal-wrap img { width: clamp(120px,38vw,180px); height: clamp(120px,38vw,180px); object-fit: contain; }
.mood-badge {
  position: absolute; top: -6px; right: -10px; font-size: clamp(2.2rem,9vw,3rem); line-height: 1;
  background: #fff; border-radius: 50%; box-shadow: var(--sh-1); padding: 4px;
  animation: letter-pop .5s var(--ease-bounce) .1s both;
}
.mood-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px,3vw,16px); max-width: 480px; width: 100%; }
.mood-opt {
  border: none; cursor: pointer; border-radius: var(--r-pill); background: rgba(255,255,255,.92); box-shadow: var(--sh-1);
  min-height: clamp(64px,14vh,96px); padding: 10px clamp(16px,5vw,28px); font-size: clamp(1rem,3.6vw,1.25rem); font-weight: 800;
  color: var(--c-ink); -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  animation: cat-in .4s var(--ease-bounce) both;
}
.mood-opt:nth-child(2){animation-delay:.05s}.mood-opt:nth-child(3){animation-delay:.1s}.mood-opt:nth-child(4){animation-delay:.15s}
.mood-opt:active { transform: scale(.94); }

/* Spoj číslo — veľká číslica hore, dole skupiny zvieratiek (zdieľa .more-*) */
.num-target {
  font-size: clamp(3.4rem,18vw,6rem); font-weight: 900; line-height: 1; color: var(--c-primary);
  margin: clamp(2px,1vh,10px) 0 clamp(8px,2vh,16px); text-shadow: 0 3px 0 rgba(0,0,0,.08);
  animation: cat-in .4s var(--ease-bounce) both;
}
.num-opt:active { transform: scale(.93); }
.num-opt.opt-correct span { color: #fff; }

/* ── PRVÉ PÍSMENO ── */
.letter-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.letter-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px,2.5vh,18px); padding: clamp(8px,3vw,18px); position: relative; z-index: 2;
}
.letter-animal {
  width: clamp(120px, 38vw, 200px); height: clamp(120px, 38vw, 200px);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2);
  display: grid; place-items: center; padding: clamp(10px,3vw,18px);
  animation: cat-in .45s var(--ease-bounce) both;
}
.letter-animal img { width: 100%; height: 100%; object-fit: contain; }
.letter-q-text { font-size: var(--fs-body); font-weight: 800; color: var(--c-ink); text-align: center; }
.letter-q-text b { color: var(--c-primary); text-transform: capitalize; }
.letter-opts {
  flex-shrink: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px,3vw,16px);
  padding: clamp(10px,3vw,18px) clamp(14px,5vw,24px) max(16px, env(safe-area-inset-bottom));
  max-width: 460px; width: 100%; margin: 0 auto; position: relative; z-index: 2;
}
.letter-opts.four { grid-template-columns: repeat(2, 1fr); }
.letter-opt {
  border: none; cursor: pointer; border-radius: var(--r-lg); aspect-ratio: 1.5;
  background: #fff; box-shadow: var(--sh-1); display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  animation: cat-in .4s var(--ease-bounce) both;
}
.letter-opt:nth-child(2){animation-delay:.05s}.letter-opt:nth-child(3){animation-delay:.1s}.letter-opt:nth-child(4){animation-delay:.15s}
.letter-glyph { font-size: clamp(2.6rem, 13vw, 4.4rem); font-weight: 900; color: var(--c-primary); line-height: 1; }
.letter-opt:active { transform: scale(.93); }
.letter-opt-correct { background: var(--c-correct); animation: letter-pop .5s var(--ease-bounce); }
.letter-opt-correct .letter-glyph { color: #fff; }
@keyframes letter-pop { 0%,100%{transform:scale(1)} 40%{transform:scale(1.12)} }
.letter-opt.wrong { animation: shake 320ms ease; }
.letter-opt.wrong .letter-glyph { color: var(--c-wrong); }

/* ── POSTUPNOSŤ (doplň vzor) ── */
.pattern-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.pattern-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px,3vh,24px); padding: clamp(8px,3vw,18px); position: relative; z-index: 2;
}
.pattern-q-text { font-size: var(--fs-title); font-weight: 900; color: var(--c-ink); text-align: center; }
.pattern-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(6px,2vw,12px); max-width: 560px;
}
.pat-cell {
  width: clamp(48px, 14vw, 78px); height: clamp(48px, 14vw, 78px); flex-shrink: 0;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-1);
  display: grid; place-items: center; padding: 6px;
}
.pat-cell img { width: 100%; height: 100%; object-fit: contain; }
.pat-blank {
  background: rgba(255,255,255,.35); border: 3px dashed rgba(124,58,237,.5); box-shadow: none;
  font-size: clamp(1.8rem,7vw,2.6rem); font-weight: 900; color: var(--c-primary);
  animation: pat-blank-pulse 1.4s ease-in-out infinite;
}
@keyframes pat-blank-pulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.06);opacity:1} }
.pat-filled { animation: letter-pop .5s var(--ease-bounce); }
.pattern-opts {
  flex-shrink: 0; display: flex; justify-content: center; gap: clamp(10px,3vw,18px);
  padding: clamp(10px,3vw,18px) clamp(14px,5vw,24px) max(16px, env(safe-area-inset-bottom));
  max-width: 480px; width: 100%; margin: 0 auto; position: relative; z-index: 2;
}
.pat-opt {
  border: none; cursor: pointer; border-radius: var(--r-lg);
  width: clamp(72px,24vw,110px); aspect-ratio: 1;
  background: #fff; box-shadow: var(--sh-1); display: grid; place-items: center; padding: 8px;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  animation: cat-in .4s var(--ease-bounce) both;
}
.pat-opt:nth-child(2){animation-delay:.05s}.pat-opt:nth-child(3){animation-delay:.1s}
.pat-opt img { width: 100%; height: 100%; object-fit: contain; }
.pat-opt:active { transform: scale(.93); }
.pat-opt-correct { background: var(--c-correct); animation: letter-pop .5s var(--ease-bounce); }
.pat-opt.wrong { animation: shake 320ms ease; }

/* ── MOZAIKA (kreatívne vyfarbovanie) ── */
.mosaic-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; background: linear-gradient(180deg,#FFF7FE,#F3E8FF); }
.mosaic-hdr {
  position: relative; z-index: 3; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 14px 6px;
}
.mosaic-title { flex: 1; text-align: center; font-weight: 900; font-size: var(--fs-body); color: var(--c-ink); }
.mos-clear {
  width: clamp(40px,10vw,48px); height: clamp(40px,10vw,48px); border: none; border-radius: 50%;
  background: rgba(124,58,237,.12); cursor: pointer; font-size: 1.3rem; -webkit-tap-highlight-color: transparent;
}
.mos-clear:active { transform: scale(.9); }
.mosaic-grid {
  flex: 1; min-height: 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  gap: 2px; padding: clamp(8px,3vw,16px);
  width: min(94vw, 70vh); max-width: 540px; aspect-ratio: 1; margin: 0 auto; touch-action: none;
}
.mos-cell {
  border: none; border-radius: 4px; background: rgba(124,58,237,.06);
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.06); cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent; transition: background .12s var(--ease);
}
.mos-cell.on { box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.mosaic-palette {
  flex-shrink: 0; position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px,2vw,10px);
  padding: 10px clamp(12px,4vw,20px) max(14px, env(safe-area-inset-bottom));
}
.mos-sw {
  width: clamp(34px,9vw,46px); height: clamp(34px,9vw,46px); border: 3px solid #fff; border-radius: 50%;
  background: var(--sw, #ccc); cursor: pointer; box-shadow: var(--sh-1); padding: 0;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
  display: grid; place-items: center; font-size: 1.2rem;
}
.mos-eraser { background: #fff; }
.mos-sw:active { transform: scale(.9); }
.mos-sw.sel { transform: scale(1.18); border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.3), var(--sh-1); }

/* ── NAKŔM ZVIERATKO ── */
.feed-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; background: linear-gradient(180deg,#BFE6FF 0%,#E8F8E0 70%,#C7EFA8 100%); }
.feed-hdr { position: relative; z-index: 4; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: max(8px,env(safe-area-inset-top)) 14px 4px; }
.feed-score { font-weight: 900; font-size: 1.3rem; color: var(--c-ink); background: rgba(255,255,255,.8); border-radius: var(--r-pill); padding: 4px 16px; box-shadow: var(--sh-1); }
.feed-area { flex: 1; position: relative; min-height: 0; z-index: 2; overflow: hidden; touch-action: none; }
.feed-food {
  position: absolute; top: -10%; transform: translateX(-50%); pointer-events: none;
  font-size: clamp(38px, 11vw, 58px); line-height: 1; will-change: top;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.22));
}
.feed-animal {
  position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 3; pointer-events: none;
  width: clamp(96px, 30vw, 150px); height: clamp(96px, 30vw, 150px);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
.feed-animal img { width: 100%; height: 100%; object-fit: contain; }
.feed-hint {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(255,255,255,.9); color: var(--c-ink); font-weight: 800; font-size: .9rem;
  padding: 8px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-1); white-space: nowrap;
  transition: opacity .4s ease; pointer-events: none;
}
.feed-hint.gone { opacity: 0; }

/* ── ZVIERACIA KAPELA (sound pad) ── */
.soundpad-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.sp-hdr { position: relative; z-index: 3; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: max(8px,env(safe-area-inset-top)) 14px 4px; }
.sp-title { flex: 1; text-align: center; font-weight: 900; font-size: var(--fs-body); color: var(--c-ink); }
.sp-grid {
  flex: 1; min-height: 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,2.5vw,14px);
  align-content: center; padding: clamp(10px,3vw,18px); max-width: 560px; width: 100%; margin: 0 auto;
  overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
}
@media (max-width: 420px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
.sp-pad {
  aspect-ratio: 1; border: none; border-radius: var(--r-lg); cursor: pointer;
  background: var(--c, #ccc); box-shadow: var(--sh-1); display: grid; place-items: center; padding: 8px;
  -webkit-tap-highlight-color: transparent;
}
.sp-pad img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }

/* ── PEČIATKY ── */
.stamps-play { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg,#FFF7FE,#F3E8FF); }
.stamps-scene {
  flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none;
  margin: 6px clamp(8px,3vw,16px); border-radius: var(--r-lg);
  background: linear-gradient(180deg,#BFE6FF 0%,#D9F4E8 55%,#BFE8A0 100%);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.08);
}
.stamp-placed { position: absolute; transform: translate(-50%,-50%); pointer-events: none; }
.stamp-placed img { width: clamp(48px,14vw,72px); height: clamp(48px,14vw,72px); object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.stamp-placed span { font-size: clamp(40px,12vw,64px); line-height: 1; }
.stamps-palette {
  flex-shrink: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px,2vw,10px);
  padding: 8px clamp(10px,3vw,18px) max(12px, env(safe-area-inset-bottom));
}
.stamp-sw {
  width: clamp(42px,11vw,54px); height: clamp(42px,11vw,54px); border: 3px solid #fff; border-radius: var(--r-md);
  background: rgba(255,255,255,.85); cursor: pointer; box-shadow: var(--sh-1); display: grid; place-items: center; padding: 4px;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mo-fast) var(--ease);
}
.stamp-sw img { width: 100%; height: 100%; object-fit: contain; }
.stamp-sw span { font-size: 1.5rem; }
.stamp-sw.sel { transform: scale(1.14); border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.3), var(--sh-1); }

/* ── ŤUK-ŤUK (whack-a-mole) ── */
.whack-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.whack-grid {
  flex: 1; min-height: 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px,3vw,20px);
  align-content: center; padding: clamp(10px,3vw,20px); max-width: 560px; width: 100%; margin: 0 auto;
}
.whack-hole {
  aspect-ratio: 1; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #6b3f1d 0%, #4a2a12 70%, #3a2010 100%);
  border-radius: 50%; box-shadow: inset 0 -6px 12px rgba(0,0,0,.4), inset 0 6px 10px rgba(255,220,170,.18);
}
.whack-hole::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 12%; height: 28%; border-radius: 50%; background: rgba(0,0,0,.35); }
.whack-mole {
  position: absolute; left: 8%; right: 8%; bottom: -78%; z-index: 2;
  display: grid; place-items: center; transition: bottom .18s cubic-bezier(.34,1.56,.5,1);
}
.whack-mole.up { bottom: 6%; }
.whack-mole.bonk { animation: letter-pop .25s var(--ease-bounce); }
.whack-mole img { width: 100%; height: auto; max-height: 92%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.3)); }

/* ── BALÓNY ── */
.balloon-play { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.balloon-area { flex: 1; position: relative; min-height: 0; z-index: 2; overflow: hidden; }
.balloon {
  position: absolute; bottom: 0; border: none; background: none; padding: 0; cursor: pointer;
  width: clamp(52px,15vw,78px); height: clamp(66px,19vw,98px);
  animation: balloon-rise var(--dur, 5s) linear forwards; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.balloon::before {
  content: ""; position: absolute; inset: 0 0 14% 0; border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.7), transparent 42%), var(--bc, #F87171);
  box-shadow: inset -6px -8px 14px rgba(0,0,0,.18);
}
.balloon::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 16%; background: rgba(0,0,0,.3); transform: translateX(-50%); }
@keyframes balloon-rise { from { transform: translateY(10%); } to { transform: translateY(-120vh); } }
.balloon.pop { animation: none; }
.balloon.pop::before { animation: balloon-pop .22s ease-out forwards; }
@keyframes balloon-pop { to { transform: scale(1.5); opacity: 0; } }

/* ── NÁLEPKOVNÍK ── */
.hm-sticker-btn { position: relative; width: auto; min-width: clamp(40px,10vw,48px); padding: 0 10px; gap: 4px; border-radius: var(--r-pill); }
.hm-sticker-count { font-size: .9rem; font-weight: 900; color: #fff; }
.sticker-screen {
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  background: linear-gradient(180deg,#1E1B4B 0%,#312E81 100%); position: relative; isolation: isolate;
}
.sticker-prog { flex-shrink: 0; padding: 4px clamp(16px,5vw,24px) 10px; max-width: 620px; width: 100%; margin: 0 auto; }
.sticker-prog-bar { height: 10px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.sticker-prog-bar span { display: block; height: 100%; background: linear-gradient(90deg,#FCD34D,#FB923C); border-radius: 999px; transition: width .6s var(--ease); }
.sticker-prog-lbl { text-align: center; color: #fff; font-weight: 800; font-size: .9rem; margin-top: 6px; opacity: .95; }
.sticker-sections { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.sticker-section { max-width: 620px; width: 100%; margin: 0 auto; padding: 6px clamp(14px,4.5vw,22px) 4px; }
.sticker-section-title {
  color: #fff; font-weight: 900; font-size: .95rem; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.sticker-section-title span { margin-left: auto; opacity: .8; font-size: .8rem; }
.sticker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,2.4vw,14px);
  align-content: start;
}
@media (min-width: 600px) {
  .sticker-grid { grid-template-columns: repeat(6, 1fr); }
  .sticker-section { max-width: 760px; }
}
.sticker-cell {
  aspect-ratio: 1; border: none; border-radius: var(--r-md); cursor: pointer;
  background: rgba(255,255,255,.95); box-shadow: var(--sh-1);
  display: grid; place-items: center; padding: 8px; -webkit-tap-highlight-color: transparent;
  animation: cat-in .4s var(--ease-bounce) both;
}
.sticker-cell.locked { background: rgba(255,255,255,.10); box-shadow: none; cursor: default; }
.sticker-cell.owned:active { transform: scale(.94); }
.sticker-art { width: 100%; height: 100%; display: grid; place-items: center; }
.sticker-art img { width: 100%; height: 100%; object-fit: contain; }
.sticker-cell.locked .sticker-art { opacity: .5; }
.sticker-q { font-size: clamp(1.4rem,7vw,2rem); font-weight: 900; color: rgba(255,255,255,.4); }

/* Nová nálepka v koncovom okne */
.ld-sticker {
  margin: 6px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; transform: scale(.6) translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease-bounce);
}
.ld-sticker.reveal { opacity: 1; transform: none; }
.ld-sticker-label { font-weight: 900; color: #FCD34D; font-size: 1rem; letter-spacing: .3px; }
.ld-sticker-art { width: clamp(90px,28vw,120px); height: clamp(90px,28vw,120px); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-2); display: grid; place-items: center; padding: 10px; }
.ld-sticker-art img { width: 100%; height: 100%; object-fit: contain; }
.ld-sticker-name { font-weight: 800; color: #fff; opacity: .95; text-transform: capitalize; }

/* Denná odmena overlay */
.daily-reward {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(20,16,50,.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .26s var(--ease); padding: 24px;
}
.daily-reward.show { opacity: 1; }
.daily-card {
  background: linear-gradient(165deg,#FFFDF8,#F3ECFF); border-radius: var(--r-xl); padding: 26px 24px;
  text-align: center; box-shadow: var(--sh-3); max-width: 340px; width: 100%;
  transform: scale(.8); transition: transform .42s var(--ease-bounce);
}
.daily-reward.show .daily-card { transform: scale(1); }
.daily-title { font-size: 1.4rem; font-weight: 900; color: #7C3AED; }
.daily-art { width: 140px; height: 140px; margin: 14px auto; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); display: grid; place-items: center; padding: 12px; font-size: 4rem; }
.daily-art img { width: 100%; height: 100%; object-fit: contain; }
.daily-name { font-weight: 800; color: #2A2350; margin-bottom: 16px; text-transform: capitalize; }
/* .btn-primary sama osebe nemá background (každý caller ho zvyčajne dodá inline
   podľa farby hry) — tento button ho nemal, padal na natívny button default =
   takmer nulový kontrast s bielym textom (axe: 1.03:1). Explicitný gradient fix. */
.daily-ok, .weekly-ok { width: 100%; background: linear-gradient(145deg,#A855F7,#7C3AED); color: #fff; }

/* Snap-unit — priehľadný, hviezdy preblikujú cez okraje */
.hm-card {
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  box-sizing: border-box;
  background: transparent;
}
/* Vyplň chýbajúci breakpoint 480–599px (veľký mobil / úzky tablet): herné
   plochy nech nestúpajú na plnú šírku. Len max-width (žiadny margin:auto na
   flex prvkoch — scvrklo by ich, viď doors-0px bug v tablet bloku). */
@media (min-width: 480px) and (max-width: 599px) {
  .shell-stage, .shell-toolbelt { max-width: 520px; }
  .bub-pick-opts, .band-opts { max-width: 460px; }
}
@media (min-width: 600px) {
  .hm-card-face { width: min(64%, 420px); height: min(92%, 600px); border-radius: 38px; }
}
@media (min-width: 860px) {
  .hm-card-face { width: 460px; }   /* desktop: portrait karta, nech nie je drobná */
}
/* Viditeľná karta — portrait (na výšku), vycentrovaná, s hĺbkou */
.hm-card-face {
  width: min(86%, 340px);
  height: min(96%, 560px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px,2.4vh,22px);
  padding: clamp(18px,3.4vh,34px) clamp(16px,6vw,34px);
  border-radius: clamp(28px,7vw,40px);
  border: 1.5px solid rgba(255,255,255,.30);
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.26);
  animation: hm-card-pop-in .45s var(--ease-bounce) both;
}
/* Top highlight */
.hm-card-face::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.20) 0%, transparent 42%);
  pointer-events: none; z-index: 0;
}
/* Sheen sweep */
.hm-card-face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.26) 48%, transparent 65%);
  background-size: 250% 100%; background-position: 150% 0;
  pointer-events: none; z-index: 0;
  animation: hm-card-sheen 9s ease-in-out infinite;
}
.hm-card-face > * { position: relative; z-index: 1; }
.hm-card-emoji {
  font-size: clamp(3.5rem,13vw,6rem); line-height: 1;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.3));
}
.hm-card-name {
  font-size: clamp(1.5rem,6vw,2.2rem); font-weight: 900; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.3); margin: 0;
}
.hm-card-desc {
  font-size: clamp(.82rem,3vw,.98rem); color: rgba(255,255,255,.85);
  text-align: center; max-width: 260px; line-height: 1.4;
}
/* 3D zlaté arkádové tlačidlo */
.hm-card-btn {
  background: linear-gradient(180deg, #FFE566 0%, #FFC107 45%, #E8980A 100%);
  color: #7C2D00; font-weight: 900;
  font-size: clamp(.95rem,3.5vw,1.15rem); border: none; border-radius: 999px;
  padding: clamp(10px,2vh,14px) clamp(24px,7vw,40px); cursor: pointer;
  letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 5px 0 0 #9A6300,
    0 8px 22px rgba(0,0,0,.32);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.hm-card-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 1px 0 0 #9A6300,
    0 2px 8px rgba(0,0,0,.20);
}
/* Plávajúce dekoratívne rohy */
.hm-card-corner {
  position: absolute; font-size: clamp(.95rem,3.2vw,1.25rem);
  opacity: .62; pointer-events: none; z-index: 2;
  animation: hm-corner-float 3.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.hm-card-corner-tl { top: clamp(10px,2.5vw,16px); left: clamp(12px,3vw,18px); }
.hm-card-corner-br { bottom: clamp(12px,3vw,18px); right: clamp(12px,3vw,18px); animation-delay: 1.75s; }
.hm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.22); border: none; border-radius: 50%;
  width: clamp(38px,9vw,50px); height: clamp(38px,9vw,50px);
  font-size: clamp(1.5rem,5vw,2rem); color: #fff; cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.hm-arrow:active { background: rgba(255,255,255,.38); }
.hm-prev { left: 6px; } .hm-next { right: 6px; }
.hm-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 4;
}
.hm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: transform 150ms, background 150ms;
}
.hm-dot.active { background: #fff; transform: scale(1.45); }

/* Aktívna karta — väčšia, žiariaca */
.hm-card-face { transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease; }
.hm-card.hm-card-active .hm-card-face {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 22px 56px rgba(0,0,0,.42), 0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
/* Progress hviezdy na karte */
.hm-card-stars {
  font-size: clamp(.65rem,2.5vw,.78rem); letter-spacing: .5px;
  color: rgba(255,255,255,.82); text-shadow: 0 1px 4px rgba(0,0,0,.3);
  font-weight: 800; white-space: nowrap;
}

/* Pet panel — zviera stojí na tráve */
.hm-pet {
  height: clamp(160px,35vh,250px);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  background:
    linear-gradient(to top, rgba(21,128,61,.80) 0%, rgba(22,163,74,.45) 22%, transparent 52%),
    linear-gradient(180deg, rgba(15,23,42,.42) 0%, rgba(0,0,0,.38) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.13);
  box-sizing: border-box;
  padding: clamp(6px,1.5vh,10px) clamp(8px,3vw,16px)
           max(env(safe-area-inset-bottom), clamp(6px,1.5vh,10px));
  gap: 4px;
  position: relative;
  overflow: hidden;
}
/* Pevný trávnatý pás na úplnom spodku */
.hm-pet::before {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(180deg, #16A34A 0%, #15803D 100%);
  pointer-events: none; z-index: 0;
}
.hm-pet > * { position: relative; z-index: 1; }
.hm-pet-top {
  flex: 1; display: flex; align-items: center;
  gap: clamp(8px,3vw,16px); min-height: 0;
}
.hm-pet-avatar {
  position: relative; flex-shrink: 0;
  width: clamp(54px,13vw,76px); height: clamp(54px,13vw,76px);
  display: flex; align-items: center; justify-content: center;
}
.hm-pet .pet-body {
  width: 100% !important; height: 100% !important;
  font-size: clamp(2.6rem,8vw,3.8rem) !important;
  position: relative;
}
.hm-pet .pet-mood {
  position: absolute; top: -6px; right: -6px;
  font-size: clamp(.9rem,3vw,1.1rem); z-index: 2;
}
.hm-pet-bars {
  flex: 1; display: flex; flex-direction: column;
  gap: clamp(2px,0.5vh,4px); justify-content: center; min-width: 0;
}
.hm-pet .pet-stat { gap: 4px; }
.hm-pet .pet-stat-ico { font-size: clamp(.75rem,2.5vw,.9rem); width: 20px; }
.hm-pet .pet-bar {
  height: clamp(5px,1.2vw,8px) !important;
  flex: 1; border-radius: 999px;
}
.hm-pet-btns {
  display: flex; gap: clamp(5px,1.5vw,9px);
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.hm-pet-btns::-webkit-scrollbar { display: none; }
.hm-pet-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,.13); border: none; border-radius: 12px;
  min-width: clamp(48px,13vw,62px); height: clamp(42px,9vh,54px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.hm-pet-btn:active { background: rgba(255,255,255,.28); transform: scale(.92); }
.hm-pet-btn-em  { font-size: clamp(1rem,3.8vw,1.3rem); line-height: 1; }
.hm-pet-btn-lbl {
  font-size: clamp(.5rem,1.7vw,.65rem); opacity: .85; font-weight: 600;
  white-space: nowrap;
}
/* Home-new: frosted glass badge pre profile chip a ikony */
.home-new .profile-chip {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.30);
  box-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-new .profile-chip-name { color: #E0E7FF; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.streak-badge {
  display: flex; align-items: center; gap: 3px; padding: 6px 12px; border-radius: 999px;
  background: rgba(251,146,60,.28); border: 1.5px solid rgba(253,186,116,.5);
  color: #FFEDD5; font-weight: 900; font-size: .85rem; text-shadow: 0 1px 3px rgba(0,0,0,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: streak-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes streak-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .streak-badge { animation: none; } }
.home-new .hm-icon-btn {
  border: 1.5px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ===== HOME-NEW KEYFRAMES ===== */
@keyframes hm-stars-twinkle {
  from { opacity: .40; }
  to   { opacity: 1;   }
}
@keyframes hm-card-pop-in {
  from { opacity: .3; transform: scale(.93) translateY(8px); }
  to   { opacity: 1;  transform: scale(1)   translateY(0);   }
}
@keyframes hm-card-sheen {
  0%, 62% { background-position: 150% 0; }
  100%    { background-position: -60% 0; }
}
@keyframes hm-corner-float {
  0%,100% { transform: translateY(0)    rotate(0deg);  }
  50%     { transform: translateY(-6px) rotate(14deg); }
}

/* ===== GLOBAL NAV (fixed header počas hier) ===== */
#globalNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  height: calc(48px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(10,10,30,.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transform: translateY(0); transition: transform .22s ease;
}
#globalNav.gnav-hidden { transform: translateY(-100%); pointer-events: none; }
.gnav-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 8px; max-width: 760px; margin: 0 auto; height: 100%;
}
.gnav-back {
  background: rgba(255,255,255,.10); border: none; border-radius: 50%;
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; cursor: pointer;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.gnav-back:hover { background: rgba(255,255,255,.2); }
.gnav-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.10); border: none; border-radius: 999px;
  padding: 4px 12px 4px 6px; color: #fff; cursor: pointer;
  font-size: .82rem; font-weight: 800; font-family: inherit;
  white-space: nowrap; overflow: hidden; max-width: 140px;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.gnav-chip:hover { background: rgba(255,255,255,.18); }
.gnav-name { overflow: hidden; text-overflow: ellipsis; }
.gnav-right { display: flex; gap: 6px; margin-left: auto; }
.gnav-btn {
  background: rgba(255,255,255,.10); border: none; border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; color: #fff;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.gnav-btn:hover { background: rgba(255,255,255,.2); }

/* Keď je globalNav viditeľný, ukryjeme duplikátne herné headery */
body.global-nav-on .play-hdr,
body.global-nav-on .bub-pick-hdr { opacity: 0; pointer-events: none; }
/* shell-hud (band-hry) má vlastný back-btn + progress-pill — skryjeme len duplicitné
   back tlačidlo (progres dots nech ostanú viditeľné), aby dieťa nevidelo 2 šípky naraz. */
body.global-nav-on .shell-hud .icon-btn { opacity: 0; pointer-events: none; }
/* Posunieme obsah hier pod nav bar */
body.global-nav-on #app { padding-top: calc(48px + env(safe-area-inset-top)); }

/* ===== TIME-OF-DAY POZADIE ===== */
.home-new[data-tod="morning"] { background: linear-gradient(180deg,#B45309 0%,#7C3AED 60%,#1E1B4B 100%); }
.home-new[data-tod="day"]     { background: linear-gradient(180deg,#1D4ED8 0%,#4338CA 60%,#312E81 100%); }
.home-new[data-tod="evening"] { background: linear-gradient(180deg,#9A3412 0%,#6D28D9 55%,#1E1B4B 100%); }
/* night = defaultné (pôvodný gradient v .home-new sa zachová) */

/* ===== PET SPEECH BUBBLE ===== */
.pet-speech-bub {
  position: absolute; bottom: 110%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff; color: #4338CA;
  font-weight: 900; font-size: 1rem; white-space: nowrap;
  padding: 6px 14px; border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.pet-speech-bub::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff;
}
.pet-speech-bub.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ===== CAROUSEL COUNTER ===== */
.hm-counter {
  position: absolute; bottom: 6px; right: 10px;
  font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.55);
  pointer-events: none; letter-spacing: .04em;
}

/* ===== PET WAVE ANIMATION ===== */
@keyframes pet-wave-anim {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-14deg); }
  75%  { transform: rotate(14deg); }
  100% { transform: rotate(0deg); }
}
.pet-wave { animation: pet-wave-anim .28s ease !important; }

/* ===== DOT PULSE ===== */
.hm-dot.active {
  animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  50%     { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}

/* ===== RÝCHLEJŠIE HVIEZDY ===== */
.home-new::before { animation-duration: 2.4s !important; filter: brightness(1.2); }
.home-new::after  { animation-duration: 1.8s !important; }

/* ═══════════════════════════════════════
   POHÁRIK — shell game
═══════════════════════════════════════ */
.poharik-play {
  display: flex; flex-direction: column; height: 100%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 64%, rgba(255,214,140,.20) 0%, transparent 70%),
    radial-gradient(ellipse at 40% 8%, #4a1580 0%, #1e0846 52%, #0d0129 100%);
  position: relative; overflow: hidden;
}
/* teplý spotlight na hrnčeky + jemná vinetácia okrajov */
.poharik-play::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 70% 55% at 50% 60%, transparent 55%, rgba(0,0,0,.45) 100%);
}
.poharik-hdr {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 8px; background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.poharik-q-animal { flex-shrink: 0; }
.poharik-q-text {
  font-size: var(--fs-body); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  flex: 1;
}
.cup-row {
  flex: 1; position: relative;
  display: flex; align-items: flex-end;
  padding: 0 12px 0; min-height: 0; z-index: 2;
}
/* Drevený stôl — teplé dosky s textúrou letokruhov */
.cup-felt {
  height: clamp(54px, 15%, 88px); position: relative; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 2px, transparent 2px, transparent 96px),
    linear-gradient(180deg, #a9682f 0%, #804d20 45%, #5e3717 100%);
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
  box-shadow: inset 0 3px 0 rgba(255,220,170,.30), 0 -6px 30px rgba(0,0,0,.55);
}
.cup-felt::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(91deg, rgba(255,224,180,.06) 0px, rgba(255,224,180,.06) 1px, transparent 1px, transparent 30px);
  border-radius: inherit;
}
.cup-wrap {
  position: absolute; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: left var(--cup-spd, 500ms) cubic-bezier(.4, 0, .2, 1);   /* pokojný pohyb, bez prestrelenia */
  will-change: left;
}
.cup-body {
  width: clamp(56px, 14vw, 88px); height: auto;
  transition: transform 0.42s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom center;
}
.cup-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 9px 16px rgba(0,0,0,.5)); }
.cup-mascot {
  position: absolute; bottom: 10px;
  transition: transform 0.34s cubic-bezier(.34,1.56,.64,1);
  transform: scale(0); pointer-events: none;
}
.cup-wrap.open .cup-body    { transform: translateY(-94px) scale(1.06) rotate(-4deg); }
.cup-wrap.open .cup-mascot  { transform: scale(1); }
/* prázdne hrnčeky pri nápovede sa nadvihnú menej a bez rotácie */
.cup-wrap.peek-empty .cup-body { transform: translateY(-72px) scale(1.02); }
/* dosadnutie hrnčeka po peeku — krátky „buchot" nadol */
@keyframes cup-drop { 0%{transform:translateY(-30px) scale(1.03)} 70%{transform:translateY(2px) scale(.99)} 100%{transform:translateY(0) scale(1)} }
.cup-wrap.dropping .cup-body { animation: cup-drop .42s cubic-bezier(.34,1.3,.5,1); }
.cup-mascot.popped          { transform: scale(1.2) translateY(-12px) !important; }
.cup-wrap.wrong             { animation: shake 320ms ease; }
/* Shuffle shimmer — cups pulse during shuffle */
@keyframes cup-shimmer { 0%,100%{filter:drop-shadow(0 9px 16px rgba(0,0,0,.5))} 50%{filter:drop-shadow(0 9px 26px rgba(255,200,60,.6))} }
.cup-wrap.shuffling .cup-svg { animation: cup-shimmer 0.55s ease-in-out infinite; }
/* Magic dust iskričky pri odkrytí */
.poharik-spark {
  position: fixed; width: 10px; height: 10px; pointer-events: none; z-index: 10000;
  margin: -5px 0 0 -5px;
  background: radial-gradient(circle, #fff 0%, #ffd86a 45%, rgba(255,180,60,0) 72%);
  border-radius: 50%;
  animation: poharik-spark-fly .72s ease-out forwards;
}
@keyframes poharik-spark-fly {
  0%   { transform: translate(0,0) scale(.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}

/* ═══════════════════════════════════════
   MAĽOVANIE — nové nástroje + pozadie
═══════════════════════════════════════ */
.draw-bg-row {
  display: flex; gap: 6px; padding: 4px 0; overflow-x: auto; flex-shrink: 0;
}
.draw-bg-btn {
  padding: 6px 12px; border: 2.5px solid transparent; border-radius: 12px;
  font-weight: 700; font-size: .78rem; cursor: pointer;
  background: rgba(255,255,255,.7); white-space: nowrap; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.draw-bg-btn.active {
  border-color: #7C3AED;
  background: linear-gradient(135deg,#EDE9FE,#E0E7FF);
}
.draw-stamp-grid {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 4px;
  padding: 6px; max-height: 100px; overflow-y: auto; flex-shrink: 0;
}
.draw-stamp-btn {
  padding: 4px; border: 2.5px solid transparent; border-radius: 10px;
  background: rgba(255,255,255,.5); cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s;
}
.draw-stamp-btn.active { border-color: #7C3AED; background: rgba(237,233,254,.8); }
.draw-canvas-wrap.draw-bg-meadow { background: linear-gradient(180deg, #87CEEB 50%, #86EFAC 50%); }
.draw-canvas-wrap.draw-bg-sky    { background: linear-gradient(180deg, #BAE6FD 0%, #E0F2FE 100%); }
.draw-canvas-wrap.draw-bg-paper  { background: #F5F0E8; }
.draw-canvas-wrap.draw-bg-blank  { background: #FFFDF7; }
.draw-tool.active[data-tool="rainbow"] {
  background: linear-gradient(135deg,#EF4444,#F97316,#EAB308,#22C55E,#3B82F6,#A855F7);
  color: #fff;
}

/* ══════════════════════════════════════════
   Tamagoči B-series — pet panel vylepšenia
══════════════════════════════════════════ */

/* B1: heart burst on touch */
.pet-heart {
  position: absolute; pointer-events: none; font-size: 1.4rem; z-index: 10;
  animation: pet-heart-float 0.9s ease-out forwards;
}
@keyframes pet-heart-float {
  0%   { opacity: 1; transform: scale(.5) translateY(0); }
  100% { opacity: 0; transform: scale(.9) translateY(-72px); }
}

/* B2: critical bar pulse + icon shake */
@keyframes pet-bar-pulse-anim { 0%,100%{opacity:1} 50%{opacity:.3} }
.pet-bar-pulse { animation: pet-bar-pulse-anim 0.8s ease-in-out infinite !important; }
@keyframes pet-ico-shake-anim { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} }
.pet-ico-shake { animation: pet-ico-shake-anim 0.8s ease-in-out infinite; display:inline-block; }

/* B4: bond max golden glow */
@keyframes pet-bond-glow { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} 50%{box-shadow:0 0 16px 5px rgba(251,191,36,.7)} }
.pet-bond-max { animation: pet-bond-glow 2s ease-in-out infinite; border-radius: 8px; }

/* B5: daily special feed button */
@keyframes daily-glow { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} 50%{box-shadow:0 0 14px 6px rgba(251,191,36,.7)} }
.pet-act.daily-special, .hm-pet-btn.daily-special { animation: daily-glow 2s ease-in-out infinite; }

/* B6: milestone overlay */
.pet-milestone {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
  animation: pet-ms-in 0.4s ease-out, pet-ms-out 0.5s ease-in 2.3s forwards;
}
@keyframes pet-ms-in  { from{opacity:0;transform:scale(.55)} to{opacity:1;transform:scale(1)} }
@keyframes pet-ms-out { from{opacity:1} to{opacity:0} }
.pet-milestone-balloons { font-size: 2.4rem; animation: pet-balloon-rise 2s ease-out forwards; }
@keyframes pet-balloon-rise { 0%{transform:translateY(0)} 100%{transform:translateY(-36px)} }
.pet-milestone-txt {
  font-size: 1.3rem; font-weight: 800; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); margin-top: 8px;
}

/* B8: tanečné noty */
.pet-dance-note {
  position: absolute; bottom: 38%; pointer-events: none; font-size: 1.5rem; z-index: 5;
  animation: pet-note-rise 1.0s ease-out forwards;
}
@keyframes pet-note-rise {
  0%   { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-88px) translateX(var(--dx,0px)) rotate(20deg); }
}
/* Ambientný motýľ/lienka — preletí scénou (vlnivá dráha), potom zmizne. */
.pet-flutter {
  position: absolute; left: -12%; pointer-events: none; font-size: 1.5rem; z-index: 5;
  animation: pet-flutter-cross 5.2s ease-in-out forwards;
}
@keyframes pet-flutter-cross {
  0%   { opacity: 0; transform: translateX(0) translateY(0) scaleX(var(--fdir,1)); }
  10%  { opacity: 1; }
  25%  { transform: translateX(28vw) translateY(-26px) scaleX(var(--fdir,1)); }
  50%  { transform: translateX(55vw) translateY(12px) scaleX(var(--fdir,1)); }
  75%  { transform: translateX(82vw) translateY(-18px) scaleX(var(--fdir,1)); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120vw) translateY(4px) scaleX(var(--fdir,1)); }
}

/* B9: weather overlay */
.pet-weather { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.pet-ray {
  position: absolute; top: 0; left: 18%;
  width: 3px; height: var(--rl,55%);
  background: linear-gradient(to bottom, rgba(255,230,60,.55), transparent);
  transform-origin: top center; transform: rotate(var(--ra,15deg));
  animation: pet-ray-pulse 3s ease-in-out infinite;
}
@keyframes pet-ray-pulse { 0%,100%{opacity:.55} 50%{opacity:.14} }
.pet-cloud-ov {
  position: absolute; font-size: 2rem; pointer-events: none;
  animation: pet-cloud-drift 7s ease-in-out infinite alternate;
}
@keyframes pet-cloud-drift { from{transform:translateX(0)} to{transform:translateX(16px)} }
.pet-rain {
  position: absolute; top: 0; width: 2px; height: 14px;
  background: linear-gradient(to bottom, rgba(120,185,255,.7), transparent);
  animation: pet-rain-fall 0.85s linear infinite;
}
@keyframes pet-rain-fall { from{transform:translateY(-20px)} to{transform:translateY(120px)} }

/* B10: pet journal popup */
.pet-journal-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.pet-journal {
  background: #fff; border-radius: 20px; padding: 20px 24px;
  min-width: 260px; max-width: 340px; width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.pj-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; text-align: center; }
.pj-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid #F3F4F6; font-size: .95rem;
}
.pj-row:last-of-type { border-bottom: none; }
.pj-time { color: var(--c-muted); font-size: .85rem; }
.pj-empty { text-align: center; color: var(--c-muted); padding: 16px 0; font-size: .9rem; }
.pj-close {
  display: block; width: 100%; margin-top: 16px; padding: 10px;
  background: #6366F1; color: #fff; border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 700; cursor: pointer; touch-action: manipulation;
}