/* styles.css — «Звірята: Навколо світу»
   Мова дизайну: тепла паперова книжка — зернистий папір, мальовані
   дерев'яні кнопки, органічні «нерівні» форми, все дихає і погойдується. */

:root {
  --paper: #fbf3e4;
  --ink: #3a2f2a;
  --wood-hi: #d9a86b;
  --wood: #b07a3e;
  --wood-lo: #96602c;
  --ocean: #2fb6b0;
  --jungle: #5cab4f;
  --arctic: #9fd4e8;
  --savanna: #e8a13c;
  --australia: #c96f4a;
  --shadow: 0 6px 0 rgba(94, 58, 20, .18), 0 14px 26px rgba(80, 55, 20, .16);
  font-family: ui-rounded, "SF Pro Rounded", "Comic Sans MS", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
  overflow: hidden;
}

/* зернистість паперу поверх усього — ледь помітна */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* легкий кольоровий «підмальовок» біому */
body[data-biome="ocean"]     { background: linear-gradient(180deg, #eafaf7, var(--paper) 46%); }
body[data-biome="jungle"]    { background: linear-gradient(180deg, #edf6e4, var(--paper) 46%); }
body[data-biome="arctic"]    { background: linear-gradient(180deg, #eef7fb, var(--paper) 46%); }
body[data-biome="savanna"]   { background: linear-gradient(180deg, #fdf1da, var(--paper) 46%); }
body[data-biome="australia"] { background: linear-gradient(180deg, #f9e9dc, var(--paper) 46%); }

button { font-family: inherit; cursor: pointer; touch-action: manipulation; color: var(--ink); border: none; background: none; padding: 0; }
img, svg { pointer-events: none; }
.pic { display: flex; align-items: center; justify-content: center; }
.pic img, .pic svg { max-width: 100%; max-height: 100%; }

/* канатна рамка з набору поверх круглих кнопок-медальйонів.
   Спрайт відцентровано за внутрішнім отвором (скрипт обробки);
   140% → апертура кільця ≈ 97% діаметра кнопки */
.roped { position: relative; }
.rope-frame {
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  max-width: none;
  pointer-events: none;
}

/* .bg-real (згенероване тло) живе В КІНЦІ файла з !important — інакше
   background-shorthand плейсхолдерних екранів перебивав би його */

#app { height: 100%; height: 100dvh; position: relative; } /* 100% — фолбек для Safari без dvh */
#screen { position: absolute; inset: 0; overflow: hidden; }

/* ── Дерев'яні кнопки-іграшки ──────────────────── */
.wbtn {
  width: 72px;
  height: 72px;
  border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 28%, var(--wood-hi), var(--wood) 62%, var(--wood-lo));
  box-shadow: inset 0 -5px 8px rgba(60, 30, 5, .35), inset 0 4px 6px rgba(255, 236, 200, .55), var(--shadow);
  outline: 3px dashed rgba(255, 243, 214, .6);
  outline-offset: -9px;
  font-size: 32px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s;
}
.wbtn:active { transform: translateY(4px) scale(.97); box-shadow: inset 0 -3px 6px rgba(60,30,5,.3), 0 2px 0 rgba(94,58,20,.2); }
.wbtn.small { width: 72px; height: 72px; font-size: 28px; } /* ≥72px — мішень під дитячий палець */

/* кнопка зі згенерованою картинкою замість CSS-дерева */
.wbtn.asset {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  outline: none;
  border-radius: 0;
  filter: drop-shadow(0 6px 8px rgba(80, 55, 20, .35));
}
.wbtn.asset:active { transform: translateY(4px) scale(.97); box-shadow: none; }
.wbtn.asset-mir { transform: scaleX(-1); } /* та сама стрілка, але «назад» */
.wbtn.asset-mir:active { transform: scaleX(-1) translateY(4px) scale(.97); }

/* кнопка без згенерованого спрайта, але в стилі набору:
   дерев'яний диск + канатна рамка (addRopeFrame) + різьблена SVG-іконка */
.wbtn.rope-skin {
  position: relative;
  border-radius: 50%;
  outline: none;
  /* світлий дрифтвуд — під тон згенерованих кнопок набору */
  background: radial-gradient(circle at 35% 30%, #eedcb8, #ddc294 60%, #bd9a6a);
  box-shadow: inset 0 -4px 6px rgba(90, 55, 20, .3), inset 0 3px 5px rgba(255, 244, 216, .6), 0 6px 8px rgba(80, 55, 20, .3);
}
.wbtn.rope-skin svg { width: 56%; height: 56%; filter: drop-shadow(0 1.5px 0 rgba(90, 55, 15, .4)); }
.wbtn.rope-skin:active { transform: translateY(4px) scale(.97); }

#homeBtn {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 12px;
  z-index: 80;
}
#homeBtn[hidden] { display: none; }

@keyframes hold-pulse { 50% { transform: scale(1.18); } }

/* ── Жива мапа: дихання, тіні хмар, кит, зірочки ── */
.map-world {
  position: absolute;
  inset: 0;
  animation: kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.035) translate(-0.7%, 0.5%); }
}
.cshadow {
  position: absolute;
  width: 320px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(25, 60, 90, .16), transparent 68%);
  filter: blur(5px);
  pointer-events: none;
  animation: driftx linear infinite;
}
.cshadow.s1 { top: 40%; animation-duration: 105s; animation-delay: -30s; }
.cshadow.s2 { top: 66%; width: 240px; animation-duration: 140s; animation-delay: -95s; opacity: .8; }
@keyframes driftx {
  from { transform: translateX(-420px); }
  to   { transform: translateX(calc(100vw + 420px)); }
}
.dcloud {
  position: absolute;
  top: var(--top, 8%);
  left: 0;
  pointer-events: none;
  z-index: 20;
  animation: driftx 120s linear forwards; /* один проліт; тривалість і зсув — з JS */
}
.dcloud img { width: calc(210px * var(--k, 1)); opacity: .96; filter: drop-shadow(0 4px 8px rgba(60, 90, 120, .12)); }
.dcloud .dshadow {
  position: absolute;
  left: -34px;
  top: calc(150px * var(--k, 1));
  width: calc(230px * var(--k, 1));
  height: calc(70px * var(--k, 1));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(25, 60, 90, .18), transparent 68%);
  filter: blur(5px);
}
.flyer {
  position: absolute;
  left: 0;
  z-index: 21;
  pointer-events: none;
  will-change: transform;
  animation: driftx linear forwards; /* один проліт, тривалість з JS */
}
.flyer.rev { animation-direction: reverse; }
.flyer .mir { display: block; }
.flyer.rev .mir { transform: scaleX(-1); }
.albatross img { width: calc(130px * var(--bw, 1)); animation: glide 4.2s ease-in-out infinite; }
@keyframes glide {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-16px) rotate(-2.5deg); }
}
.boat img { width: 120px; transform-origin: 50% 88%; animation: rock 3.4s ease-in-out infinite; }
@keyframes rock {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-4px); }
}

.boat-idle {
  position: absolute;
  z-index: 1; /* над морем, ПІД островами і хмарами */
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: boatDrift 30s ease-in-out infinite alternate; /* повільний дрейф на 2–3 корпуси */
  will-change: transform;
}
@keyframes boatDrift {
  from { transform: translate(-50%, -50%); }
  to   { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); }
}
.boat-idle .mir { display: block; transform: translateY(-34%); } /* корпус сидить на лінії */
.boat-idle .mir.rev { transform: translateY(-34%) scaleX(-1); }  /* ніс за напрямком */
.boat-idle img { width: 84px; transform-origin: 50% 88%; animation: rock 3.4s ease-in-out infinite; } /* гойдання */

/* батьківський вхід: невидима зона на великій крижині (hold 3 c) */
.ice-gate {
  position: absolute;
  width: 110px;
  height: 84px;
  transform: translate(-50%, -50%);
  z-index: 45;
  background: none;
  border: none;
  border-radius: 50%;
}
.ice-gate.holding {
  background: radial-gradient(circle, rgba(255, 255, 255, .4), transparent 70%);
  animation: hold-pulse 1s infinite;
}

.whale-spot {
  position: absolute;
  width: 160px;
  height: 110px;
  transform: translate(-50%, -50%);
  z-index: 2; /* у воді: над корабликом, під островами */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s ease;
}
.whale-spot.gone { opacity: 0; pointer-events: none; } /* пірнув */
.whale-spot img { width: 86%; z-index: 2; animation: whalebob 4.6s ease-in-out infinite; } /* кит поверх кіл */
@keyframes whalebob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
.ripple {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 24px;
  height: 14px;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rippleout 1.4s ease-out forwards;
  pointer-events: none;
  z-index: 1; /* кола позаду кита */
}
@keyframes rippleout { to { width: 180px; height: 96px; opacity: 0; } }
.twinkles { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.twinkle-star {
  position: absolute;
  width: 46px;
  transform: translate(-50%, -50%) scale(0);
  animation: twinkstar 1.45s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(255, 215, 80, .85));
}
span.twinkle-star { font-size: 38px; width: auto; }
@keyframes twinkstar {
  20%  { transform: translate(-50%, -50%) scale(1.15) rotate(12deg); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(.95) rotate(-8deg); }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-world { animation: none; }
  .cshadow, .dcloud, .flyer, .boat-idle { display: none; }
  .whale-spot img { animation: none; }
  .cloud, .map .sea::before { animation: none; }
  .island, #lulu { animation: none; }
  .stage-cast .pic { animation: none; }
}

/* ── Мапа ──────────────────────────────────────── */
.map .sea {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #a4e0ec, #6cc4dd 34%, #46abcd 70%, #3d9dc2);
}
.map .sea::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='140'%3E%3Cpath d='M0 40q30-18 60 0t60 0 60 0 60 0' stroke='%23ffffff' stroke-width='5' fill='none' stroke-linecap='round' opacity='.35'/%3E%3Cpath d='M-30 110q30-18 60 0t60 0 60 0 60 0 60 0' stroke='%23ffffff' stroke-width='5' fill='none' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E");
  animation: drift 26s linear infinite;
}
.map .sea.real { background-position: center; } /* size ставить JS (cover/contain за орієнтацією) */
.map .sea.real::before { display: none; }
@keyframes drift { to { background-position: 240px 0; } }

.cloud {
  position: absolute;
  width: 190px;
  height: 56px;
  background: #fff;
  border-radius: 999px;
  opacity: .85;
  filter: blur(1px);
  animation: cloudmove 60s linear infinite;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 70px; height: 70px; left: 28px; top: -30px; }
.cloud::after { width: 52px; height: 52px; left: 90px; top: -22px; }
.cloud.c1 { top: 7%; left: -12%; }
.cloud.c2 { top: 16%; left: 55%; animation-duration: 80s; animation-delay: -30s; }
@keyframes cloudmove { to { transform: translateX(130vw); } }

/* острови — над корабликом/китом (z1-2), під хмарами (z20+);
   сам шар прозорий для тапів, щоб не глушити кита під ним */
#isles { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#isles .island { pointer-events: auto; }

.island {
  position: absolute;
  width: clamp(120px, 19vw, 200px);
  transform: translate(-50%, -50%);
  animation: bob 4.2s ease-in-out infinite;
  transition: transform .2s;
  filter: drop-shadow(0 10px 12px rgba(20, 60, 80, .28));
}
.island svg { width: 100%; }
.island:active { transform: translate(-50%, -50%) scale(1.1); }
.island.picked { animation: pop .6s; }

/* реальна мапа: мальовані острови-плейсхолдери ховаються, лишаються хотспоти.
   Зони тапу більші — намальовані острови крупні, малюк не має промахнутись. */
.map-real .island { animation: none; filter: none; aspect-ratio: 4 / 3; width: clamp(200px, 28vw, 360px); }
.map-real .island svg { display: none; }
.map-real .cloud { display: none; } /* на мальованій мапі хмари вже є */
.map-real .sea { background-repeat: no-repeat; background-position: center; }
.map-real .island:active { transform: translate(-50%, -50%) scale(1.06); background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); border-radius: 50%; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg); }
  50% { transform: translate(-50%, -50%) translateY(-9px) rotate(1.4deg); }
}

#lulu {
  position: absolute;
  width: clamp(84px, 11vw, 120px);
  transform: translate(-50%, -50%);
  z-index: 40;
  pointer-events: none;
  transition: left .85s cubic-bezier(.5, .05, .3, 1), top .85s cubic-bezier(.5, .05, .3, 1);
  animation: bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(20, 60, 80, .3));
}
#lulu svg, #lulu img { width: 100%; }

/* ── Спільний каркас гри ───────────────────────── */
.game {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* лоток пазла не під home-індикатором */
}

/* ── Пазли ─────────────────────────────────────── */
.medallions {
  display: flex;
  gap: 30px; /* запас під канатні кільця + повітря між звірятами */
  justify-content: center;
  padding: 8px 88px;
  flex-wrap: wrap;
}
.medal {
  position: relative;
  width: 72px;
  height: 72px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  opacity: .78;
  transition: transform .15s, opacity .15s;
}
.medal img:not(.rope-frame) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.medal.char-ico img:not(.rope-frame) { object-fit: contain; } /* окремий персонаж — вписуємо цілком, не обрізаємо */
.medal.active { opacity: 1; transform: scale(1.18) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(255, 212, 59, .85)); }
.medal:active { transform: scale(1.05); }

.jig-wrap { position: relative; flex: 1; }
.jig-board {
  position: absolute;
  border-radius: 18px;
  overflow: hidden; /* привид-превʼю теж із заокругленими кутами */
  background: rgba(255, 255, 255, .4);
  box-shadow: inset 0 0 0 4px rgba(138, 90, 43, .3), inset 0 6px 16px rgba(80, 55, 20, .12);
}
.jig-board .ghost {
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .22;
  border-radius: 18px;
  filter: saturate(.7);
}
.jig-board.done { animation: donepulse 1.2s ease-in-out; }
.jig-board.done .ghost { opacity: 0; }
@keyframes donepulse { 30% { transform: scale(1.04) rotate(.8deg); } 60% { transform: scale(.99); } }

.jig {
  position: absolute;
  touch-action: none;
  filter: drop-shadow(0 5px 5px rgba(60, 40, 10, .35));
  transition: rotate .2s;
}
.jig img { position: absolute; max-width: none; }
.jig.lift { z-index: 90; filter: drop-shadow(0 14px 14px rgba(60, 40, 10, .4)); scale: 1.06; }
.jig.set { z-index: 5; filter: none; pointer-events: none; }
.jig.return { transition: left .38s ease, top .38s ease, transform .38s ease, rotate .38s ease; }

/* підказка бездіяльності: ціль шматка м'яко пульсує */
.target-hint {
  position: absolute;
  border-radius: 16px;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 0 0 5px rgba(255, 212, 59, .75), 0 0 26px rgba(255, 212, 59, .55);
  animation: hintpulse 1.1s ease-in-out 3;
}
@keyframes hintpulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* ── Оркестр ───────────────────────────────────── */
.orchestra { padding: 0; }
.stage-top {
  position: relative;
  height: clamp(120px, 24vh, 210px);
  background:
    radial-gradient(circle at 20% -40%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(180deg, #2e6b34, #4d9345 70%, #5cab4f);
  border-bottom-left-radius: 50% 26px;
  border-bottom-right-radius: 50% 26px;
  box-shadow: 0 8px 0 rgba(46, 107, 52, .25);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.garland {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 46px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='46'%3E%3Cpath d='M0 4q30 36 60 4t60 4' stroke='%23386e2e' stroke-width='6' fill='none'/%3E%3Ccircle cx='30' cy='26' r='7' fill='%23ff8fab'/%3E%3Ccircle cx='90' cy='26' r='7' fill='%23ffd43b'/%3E%3Cellipse cx='60' cy='16' rx='6' ry='10' fill='%2379b85c'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}
.stage-top.bg-real .garland { display: none; } /* у мальованої сцени свій декор */
.stage-cast { height: 82%; display: flex; align-items: flex-end; padding-bottom: 6px; }
.stage-cast .pic { height: 100%; animation: sway 3.6s ease-in-out infinite; transform-origin: bottom center; }
.stage-cast img { height: 100%; }
.cast-ph { font-size: clamp(64px, 14vh, 120px); line-height: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
@keyframes sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.inst-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 12px;
}

.band-row {
  display: flex;
  gap: clamp(18px, 2.4vw, 30px); /* кільця не наїжджають одне на одне */
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
}
.musician {
  position: relative;
  width: clamp(60px, 9vw, 82px);
  height: clamp(60px, 9vw, 82px);
  border-radius: 50%;
  background: #fff8ec;
  box-shadow: none; /* без тіні — диск сидить у канаті впритул */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s;
}
.musician .mph { font-size: clamp(30px, 4.6vw, 42px); line-height: 1; }
.musician .mface { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.musician .mface img { width: 100%; height: 100%; object-fit: contain; }
.musician.active { transform: translateY(-8px) scale(1.12) rotate(-2deg); filter: drop-shadow(0 0 10px rgba(255, 212, 59, .85)); }
.musician:active { transform: scale(.94); }

.drums { display: flex; gap: clamp(14px, 4vw, 44px); align-items: flex-end; }
.drum {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #fff4dd 0 56%, #e8b06b 57% 72%, #b07a3e 73%);
  box-shadow: var(--shadow), inset 0 -8px 14px rgba(94, 58, 20, .25);
  touch-action: none;
}
.holes { display: flex; gap: clamp(16px, 5vw, 46px); }
.hole {
  width: clamp(78px, 13vw, 130px);
  height: clamp(78px, 13vw, 130px);
  border-radius: 50%;
  box-shadow: var(--shadow), inset 0 -8px 12px rgba(0, 0, 0, .22), inset 0 6px 8px rgba(255, 255, 255, .5);
  touch-action: none;
}

.keys, .bars { display: flex; gap: 8px; width: 100%; height: 100%; align-items: stretch; }
.bars { align-items: flex-end; }
.okey, .bar {
  flex: 1;
  border-radius: 16px;
  box-shadow: var(--shadow), inset 0 5px 6px rgba(255, 255, 255, .5), inset 0 -6px 8px rgba(0, 0, 0, .15);
  touch-action: none;
  transition: filter .1s;
}
@keyframes keyGlow { 50% { filter: brightness(1.4); } }

.shakers { display: flex; gap: clamp(30px, 8vw, 80px); }
.shaker {
  font-size: clamp(80px, 16vw, 150px);
  line-height: 1;
  filter: drop-shadow(0 8px 8px rgba(60, 40, 10, .3));
  touch-action: none;
}
.shaker .maraca-pic { width: clamp(110px, 20vw, 190px); }
.shaker .maraca-pic img { width: 100%; }
.shaker.mirror .maraca-pic img { transform: scaleX(-1); } /* правий — дзеркально */
.shaker.shake { animation: shake .35s ease-in-out; }
@keyframes shake {
  25% { transform: rotate(-18deg) translateX(-6px); }
  50% { transform: rotate(14deg) translateX(6px); }
  75% { transform: rotate(-8deg); }
}

.trumpet-ui { display: flex; flex-direction: column; gap: 22px; width: min(640px, 92%); align-items: center; }
.valves { display: flex; gap: clamp(20px, 6vw, 50px); }
.valve {
  width: clamp(72px, 11vw, 110px);
  height: clamp(72px, 11vw, 110px);
  border-radius: 50%;
  box-shadow: var(--shadow), inset 0 -8px 10px rgba(0, 0, 0, .2), inset 0 6px 8px rgba(255, 255, 255, .55);
  touch-action: none;
}
.gliss {
  width: 100%;
  height: clamp(56px, 9vh, 80px);
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe29a, #ffb703 55%, #e8734a);
  box-shadow: var(--shadow), inset 0 5px 8px rgba(255, 255, 255, .5), inset 0 -6px 10px rgba(120, 60, 10, .3);
  touch-action: none;
}

.strings {
  width: min(720px, 94%);
  height: min(64%, 340px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: linear-gradient(180deg, #c99a5b, #a9743f);
  border-radius: 26px;
  box-shadow: var(--shadow), inset 0 0 0 5px rgba(94, 58, 20, .35);
  padding: 18px 26px;
  touch-action: none;
}
.string {
  height: var(--th, 4px);
  background: linear-gradient(90deg, #fff5e0, #e8d5b0);
  border-radius: 999px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
.string.twang { animation: twang .3s ease-out; }
@keyframes twang {
  25% { transform: scaleY(2.6) translateY(-2px); }
  55% { transform: scaleY(.6) translateY(2px); }
}

.bounce { animation: bounce .25s ease-out; }
@keyframes bounce { 40% { transform: scale(.92); } }

/* ── Мальовані інструменти (шкіри 6а) ─────────── */
.inst-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.inst-wrap { position: relative; display: inline-block; }
.inst-wrap > img { display: block; max-width: 88vw; height: auto; }
.flute-wrap > img { max-height: 17vh; }
.trumpet-wrap > img { max-height: 26vh; }
.uke-wrap > img { max-height: 40vh; }
.xylo-wrap { touch-action: none; }        /* глісандо по брусках */
.xylo-wrap > img { max-height: 44vh; }

.zone {
  position: absolute;
  transform: translate(-50%, 0);
  background: none;
  border: none;
  border-radius: 999px;
  touch-action: none;
}
.zone.round { transform: translate(-50%, -50%); }

/* піаніно та ксилофон — цілісна мальована стрічка + невидимі зони тапу.
   wrap щільно облягає картинку (inline-block), тож зони у % збігаються з нею. */
.piano-wrap { touch-action: none; } /* глісандо пальцем по клавішах */
.piano-wrap > img { max-height: 32vh; }
/* невидима зона над клавішею/бруском — «поп»-ає світлом при тапі */
.zkey {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0);
}
.zkey.bounce { animation: zflash .3s ease-out; }
@keyframes zflash {
  0%   { background: rgba(255, 255, 255, .5); }
  100% { background: rgba(255, 255, 255, 0); }
}
.img-drum { background: none !important; box-shadow: none; border-radius: 0; }
.img-drum img { width: 100%; display: block; }

/* ── Підказка-пісня на піаніно/ксилофоні (кнопка 🎵) ── */
.guiding-holder { position: relative; flex-direction: column; } /* назва НАД клавішами */
.guide-name {
  text-align: center;
  font-family: "Chalkboard SE", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(20px, 3.4vh, 34px);
  color: #6b543c;
  margin-bottom: clamp(26px, 6vh, 64px); /* більший відступ підіймає назву вище */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.guide-star { /* обгортка лише позиціює; піаніно — низ клавіші (за замовч.) */
  position: absolute;
  left: 0; top: 0;
  width: clamp(40px, 6.6vw, 62px);
  height: clamp(40px, 6.6vw, 62px);
  pointer-events: none;
  z-index: 6;
  transform: translate(-50%, -100%);
}
.guide-star.vcenter { transform: translate(-50%, -50%); } /* центр бруска (ксилофон) */
.guide-star-in {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)) drop-shadow(0 0 4px rgba(255, 255, 255, .85));
}
.guide-star-in img { width: 100%; height: 100%; object-fit: contain; }
/* «поп» щоразу заново — три однакові ноти поспіль читаються як три поштовхи.
   Лише scale — не чіпає translate обгортки */
.guide-star-in.pop { animation: starpop .5s ease-out; }
@keyframes starpop {
  0%   { transform: scale(.2);  opacity: 0; }
  55%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
/* 🎵 підсвічена, коли пісня активна */
.musician.jam.guiding { box-shadow: 0 0 0 4px rgba(255, 205, 60, .9), var(--shadow); }

.sband { position: absolute; left: 3%; width: 91%; pointer-events: none; border-radius: 999px; }
.sband.twang { animation: sbandflash .3s ease-out; }
@keyframes sbandflash {
  30% { background: rgba(255, 255, 255, .55); box-shadow: 0 0 18px rgba(255, 255, 220, .85); }
}

/* вибір музиканта: велика картина зі свайпом, тап = підтвердити */
.inst-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
  width: 100%;
  height: 100%;
}
.sel-card {
  position: relative;
  max-width: min(74vw, 860px);
  max-height: 100%;
  touch-action: pan-y;
  cursor: pointer;
}
.sel-card.flip { animation: selflip .28s ease-out; }
@keyframes selflip {
  0% { transform: scale(.94); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}
/* обгортка — блок fit-content (не flex), інакше img із width:auto
   стискається flex-shrink'ом у 0 */
.sel-pic { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.sel-pic img {
  /* коробка img = сама картинка (без летербоксу), тож рамка/тінь
     облягають тварину, а не порожній бежевий прямокутник */
  display: block;
  width: auto;
  height: auto;
  max-width: min(74vw, 860px);
  max-height: 52vh;
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.sel-ph { font-size: clamp(90px, 20vh, 180px); line-height: 1; }
.sel-card::after { /* натяк «тапни мене»: м'який пульс рамки */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 26px;
  box-shadow: 0 0 0 4px rgba(255, 212, 59, .0);
  animation: selhint 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes selhint {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 212, 59, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 212, 59, .55); }
}

/* ── Знайди пару (Арктика) ─────────────────────── */
.arctic-game { align-items: center; justify-content: center; }
.memory {
  display: grid;
  gap: var(--cgap, 16px); /* розмір і проміжок рахує JS під кількість карток */
  align-content: center;
  justify-content: center;
}
.mcard {
  position: relative;
  width: var(--csize, 160px);
  aspect-ratio: 1;
  perspective: 800px;
}
.mcard-inner {
  position: absolute;
  inset: 0;
  transition: transform .35s;
  transform-style: preserve-3d;
}
.mcard.flipped .mcard-inner, .mcard.matched .mcard-inner { transform: rotateY(180deg); }
/* скоуп .mcard: той самий клас .mface вішає й оркестр на кругляшки
   музикантів — «крижана» тінь картки туди протікати не має */
.mcard .mface {
  position: absolute;
  inset: 0;
  border-radius: 22% 24% 23% 25% / 24% 22% 25% 23%;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.mface.front {
  background: linear-gradient(160deg, #d8f0fa, #9fd4e8 60%, #7fc2de);
  box-shadow: var(--shadow), inset 0 0 0 4px rgba(255, 255, 255, .5), inset 0 8px 14px rgba(255, 255, 255, .5);
}
.mface.front .flake { font-size: clamp(40px, 8vw, 66px); color: #fff; text-shadow: 0 2px 6px rgba(60, 130, 160, .5); }
.mface.front.img-back { background-size: cover; background-position: center; }
.mface.back { background: #fff; transform: rotateY(180deg); }
.mface.back .card-pic { width: 84%; height: 84%; }
.mface.back .card-pic img { width: 100%; height: 100%; object-fit: contain; }
.mface.back .mph { font-size: clamp(48px, 10vw, 84px); }
/* пара знайдена → звірята радіють: підстрибують і пританцьовують */
.mcard.matched .mcard-inner { animation: matchdance 1.6s ease-out forwards; }
@keyframes matchdance {
  0%   { transform: rotateY(180deg) scale(1); }
  22%  { transform: rotateY(180deg) scale(1.18) rotate(6deg); }
  42%  { transform: rotateY(180deg) scale(.96) rotate(-6deg) translateY(-4px); }
  62%  { transform: rotateY(180deg) scale(1.1) rotate(4deg) translateY(-12px); }
  80%  { transform: rotateY(180deg) scale(1) rotate(-2deg); }
  100% { transform: rotateY(180deg) scale(1.02) rotate(0); }
}
.mcard.hint .mface.front { animation: keyGlow 1s ease-in-out 2; }

/* ── Розмальовка (Савана) ──────────────────────── */
/* Горизонтальний макет: велике полотно по центру, вертикальні рейки з боків
   (ліворуч — кольори, праворуч — вибір сторінки + дії). Полотно квадратне і
   обмежене висотою, тож ширші рейки не крадуть у нього розміру. */
/* Ширші бічні відступи: канатні рамки медальйонів (140% розміру) і
   збільшений активний зразок звисають за рейку — притиснуті до краю екрана
   вони зрізались. Відсуваємо весь ряд від країв (полотно height-bound —
   не зменшується). */
.savanna-game { flex-direction: row; gap: 10px; align-items: stretch; padding-left: 34px; padding-right: 34px; }
.canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.canvas-area canvas {
  border-radius: 24px;
  box-shadow: var(--shadow), inset 0 0 0 5px rgba(232, 161, 60, .35);
  background: #fff;
  touch-action: none;
}
/* Спільна вертикальна рейка з боків полотна. flex-flow: column wrap —
   на низькому вікні елементи переносяться у 2-гу колонку, а не зникають
   за краєм (justify-content:center + overflow раніше обрізав обидва кінці). */
.color-rail {
  flex: 0 0 auto;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
}
.palette.color-rail { padding: 0 2px; } /* ліва рейка = самі кольори */
/* медальйони-сторінки і кнопки дій стають прямими елементами рейки, щоб
   переносилися поштучно, а не цілими блоками (обгортки лишаються в DOM) */
.color-rail.tools #cmeds,
.color-rail.tools .color-nav { display: contents; }
.swatch {
  flex: 0 0 auto;
  width: 64px; /* ключова мішень розмальовки — під палець малюка */
  height: 74px;
  border-radius: 46% 54% 50% 50% / 30% 30% 70% 70%;
  background:
    radial-gradient(circle at 50% 30%, var(--c) 0 44%, transparent 45%),
    linear-gradient(180deg, #c99a5b, #a9743f);
  box-shadow: var(--shadow);
  transition: transform .15s;
}
.swatch.active { transform: scale(1.2) rotate(-4deg); box-shadow: 0 8px 0 rgba(94,58,20,.25), 0 14px 22px rgba(80,55,20,.25); }
.color-nav {
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* Портрет / вузький екран — повертаємось до вертикального стосу, щоб рейки
   не задавили полотно на телефоні */
@media (max-aspect-ratio: 1 / 1) {
  .savanna-game { flex-direction: column; align-items: stretch; }
  .color-rail { flex-flow: row wrap; }
  .palette.color-rail { order: 3; }
  .color-rail.tools { order: 2; }
}

/* ── «Ку-ку!» (Австралія) ──────────────────────── */
.au-game { padding: 0; }
.meadow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ade2f2 0 34%, #f2d789 35% 55%, #e0a56e 56%);
  overflow: hidden;
}
.au-sun {
  position: absolute;
  top: 6%;
  right: 8%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe29a, #ffd76e 60%, rgba(255, 215, 110, 0));
  animation: bob 5s ease-in-out infinite;
  cursor: pointer; /* секретик: тап → крутиться і хихоче */
}
.au-sun.spin { animation: sunspin .9s ease; }
@keyframes sunspin { to { transform: rotate(360deg) scale(1.2); } }
.spot, .au-sun { touch-action: manipulation; } /* без нативного зум-жесту по схованках */
.spot {
  position: absolute;
  width: clamp(120px, 17vw, 200px);
  aspect-ratio: 16/11;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* висота звіряти прив'язана до висоти СХОВАНКИ, а не до пропорцій спрайта —
   тоді високий страус вистрибує так само, як кругла коала */
.hidden-one {
  position: absolute;
  left: 50%;
  bottom: 24%;
  height: 94%;
  width: auto;
  opacity: 0; /* схований — невидимий, жодних лапок з-під куща */
  transform: translateX(-50%) translateY(30%);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
  z-index: 1;
}
.hidden-one .au-ph { font-size: clamp(52px, 8vw, 92px); line-height: 1; display: block; text-align: center; }
.hidden-one .pic { height: 100%; }
.hidden-one .pic img { height: 100%; width: auto; max-width: none; }
.hidden-one.out { transform: translateX(-50%) translateY(-62%); opacity: 1; }
.cover { position: absolute; inset: 0; z-index: 2; }
.cover .cover-pic, .cover svg, .cover img { width: 100%; height: 100%; }
.cover.flip img, .cover.flip svg { transform: scaleX(-1); } /* дзеркальна схованка */
.cover.wiggle { animation: wiggle .4s ease-in-out; transform-origin: bottom center; }
@keyframes wiggle {
  25% { transform: rotate(-5deg) scale(1.03); }
  60% { transform: rotate(4deg); }
}

/* ── Свято ─────────────────────────────────────── */
.celebrate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 120;
  /* сцена пригасає і втрачає кольори — Лулу в центрі уваги */
  background: radial-gradient(circle at 50% 45%, rgba(58, 47, 42, .12), rgba(58, 47, 42, .48));
  -webkit-backdrop-filter: saturate(.3) brightness(.85);
  backdrop-filter: saturate(.3) brightness(.85);
  animation: celebdim 3.35s ease forwards;
}
@keyframes celebdim {
  0% { opacity: 0; }
  13% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; }
}
.celebrate .burst { animation: pop .6s ease-out; }
.lulu-burst { width: clamp(250px, 42vw, 440px); filter: drop-shadow(0 14px 20px rgba(30, 20, 5, .45)); }
.lulu-burst svg, .lulu-burst img { width: 100%; }
.burst-star {
  position: absolute;
  left: 50%;
  top: 46%;
  width: clamp(38px, 6vmin, 60px);
  font-size: clamp(30px, 5vmin, 50px);
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 215, 80, .9));
  animation: starburst 1.25s ease-out forwards;
}
@keyframes starburst {
  0%   { transform: translate(-50%, -50%) scale(.25) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05) rotate(240deg); opacity: 0; }
}
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  background: #fff8ec;
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 10px 22px;
  font-size: 26px;
  z-index: 150;
  animation: toastin 1.6s ease-in-out forwards;
}
@keyframes toastin {
  0% { transform: translateX(-50%) translateY(-30px); opacity: 0; }
  15%, 80% { transform: translateX(-50%) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-20px); opacity: 0; }
}

/* ── Батьківський куток ────────────────────────── */
.parent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 47, 42, .45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.parent-card {
  background: var(--paper);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 22px 26px;
  width: min(440px, 94vw);
  max-height: 86vh;
  overflow: auto;
}
.parent-card h2 { margin: 0 0 14px; font-size: 22px; }
.prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 18px;
}
.prow input[type="checkbox"] { width: 26px; height: 26px; }
.prow select {
  font-family: inherit;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid rgba(138, 90, 43, .4);
  background: #fff;
  color: var(--ink);
}
.pgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 0; }
.pgal img { width: 100%; border-radius: 10px; box-shadow: 0 3px 8px rgba(80, 55, 20, .25); }
.pbtn {
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 3px 0 rgba(94, 58, 20, .2);
}
.pbtn.danger { background: #ffe3e3; color: #a33; }
.pbtns { justify-content: flex-end; }
.pmuted { color: rgba(58, 47, 42, .6); font-size: 14px; line-height: 1.45; }

/* ── Реальні фони: в кінці файлу, щоб перебити background-шортхенди ──
   (шортхенд типу .meadow { background: ... } скидає size/position) */
.bg-real { background-size: cover !important; background-position: center !important; }
.meadow.bg-real { background-position: center bottom !important; } /* земля завжди в кадрі */
.meadow.bg-real .au-sun { display: none; } /* у мальованого неба свій настрій */

/* ── Заставка-заголовок при старті (тане сама або по тапу) ── */
.title-splash {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #fbf3e4;
  animation: titleIn .45s ease both;
}
.title-splash.gone { animation: titleOut .6s ease forwards; }
.title-splash img {
  width: min(82%, 720px); height: auto;
  filter: drop-shadow(0 8px 22px rgba(94, 58, 20, .22));
  animation: titlePop .7s cubic-bezier(.2, .8, .3, 1.25) both;
}
@keyframes titleIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes titleOut { to { opacity: 0 } }
@keyframes titlePop { from { transform: scale(.82); opacity: 0 } to { transform: scale(1); opacity: 1 } }