/* style.css — мягкая пастель, крупные объекты, много анимации */

:root {
  --sky-top: #aee3f5;
  --sky-bot: #d6f0e0;
  --ink: #2b3a4a;
  --ink-soft: #566472;          /* контраст ≥4.5:1 на белом */
  --card: #ffffff;
  --accent: #ff8fa3;
  --accent2: #ffc94d;
  --ocean: #9bd6ec;
  /* claymorphism: мягкая двойная тень (внешняя + светлый внутренний блик) */
  --shadow: 0 10px 22px rgba(60, 90, 120, .20), 0 2px 4px rgba(60,90,120,.12);
  --clay: 0 12px 0 -2px rgba(60,90,120,.10), 0 16px 28px rgba(60,90,120,.22),
          inset 0 3px 6px rgba(255,255,255,.85), inset 0 -6px 10px rgba(60,90,120,.10);
  --ring: 0 0 0 4px #fff, 0 0 0 8px #ffb02e;   /* видимый focus-ring */
  --r-lg: 30px;
  --ease-clay: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: 'Baloo 2', 'Baloo Bhaijaan 2', 'Nunito',
    "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  user-select: none;
}

/* видимый focus только для клавиатуры */
:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-icon:focus-visible, .reveal-speak:focus-visible { box-shadow: var(--ring), var(--shadow); }

/* SVG-иконки в кнопках */
.btn-icon svg { width: 26px; height: 26px; color: var(--ink); }
[dir="rtl"] #btn-back svg { transform: scaleX(-1); } /* стрелка «назад» в RTL смотрит вправо */
.reveal-speak svg { width: 30px; height: 30px; color: #6b4e00; }
body { background: linear-gradient(180deg, var(--sky-top), var(--sky-bot)); }

/* ---------- экраны ---------- */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen--active { display: flex; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- топбар ---------- */
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
}
.topbar-title { flex: 1; text-align: center; font-size: clamp(20px, 5vw, 30px); margin: 0; font-weight: 800; }
.topbar-spacer { width: 52px; }
.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border: 3px solid #ffffff; border-radius: 20px;
  background: var(--card); box-shadow: var(--clay);
  cursor: pointer; transition: transform .2s var(--ease-clay), box-shadow .2s;
}
.btn-icon:active { transform: scale(.88); }

/* ---------- выбор языка ---------- */
.lang-wrap { margin: auto; text-align: center; padding: 24px; width: 100%; max-width: 640px; }
/* эмодзи-глобус: сжатие по горизонтали до «ребра» + смена грани = вращение вокруг оси */
.lang-globe {
  font-size: clamp(64px, 18vw, 120px); line-height: 1;
  display: inline-block; transform-origin: center;
  transition: transform .28s ease-in-out;
  filter: drop-shadow(0 8px 12px rgba(60,90,120,.25));
}
.lang-title { font-size: clamp(26px, 7vw, 40px); margin: 8px 0 24px; font-weight: 800; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.lang-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 10px; border: 4px solid #ffffff; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--clay); cursor: pointer;
  transition: transform .2s var(--ease-clay), box-shadow .2s;
}
.lang-btn:active { transform: scale(.9) translateY(2px); box-shadow: var(--shadow); }
.lang-flag { font-size: 46px; }
.lang-name { font-size: 19px; font-weight: 700; }

/* ---------- зоны (главное меню) ---------- */
.zones-grid {
  flex: 1; display: grid; gap: 16px; padding: 8px 18px 24px;
  grid-template-columns: repeat(2, 1fr);
  align-content: start; overflow-y: auto;
}
.zone-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 1 / 1; border: 4px solid #ffffff; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--clay); cursor: pointer;
  transition: transform .2s var(--ease-clay), box-shadow .2s;
}
.zone-card:nth-child(1){ background: linear-gradient(160deg,#cdeffd,#fff);}
.zone-card:nth-child(2){ background: linear-gradient(160deg,#d8f8e0,#fff);}
.zone-card:nth-child(3){ background: linear-gradient(160deg,#e6f8cd,#fff);}
.zone-card:nth-child(4){ background: linear-gradient(160deg,#cdeefd,#fff);}
.zone-card:nth-child(5){ background: linear-gradient(160deg,#ffe9cd,#fff);}
.zone-card:nth-child(6){ background: linear-gradient(160deg,#e8ddff,#fff);}
.zone-card:active { transform: scale(.92) translateY(2px); box-shadow: var(--shadow); }
.zone-art { width: clamp(56px, 17vw, 94px); }
.zone-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 7px rgba(60,90,120,.22)); }
.zone-name { font-size: clamp(16px, 4.5vw, 24px); font-weight: 800; }

/* ---------- панель тем внутри зоны ---------- */
.theme-bar {
  display: flex; gap: 8px; padding: 2px 14px 8px; overflow-x: auto;
  justify-content: center; flex-wrap: wrap; -webkit-overflow-scrolling: touch;
}
.theme-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  border: 3px solid #ffffff; border-radius: 18px; padding: 6px 14px;
  background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: clamp(13px, 3.6vw, 16px);
  color: var(--ink-soft); transition: transform .15s var(--ease-clay), box-shadow .2s, color .2s, background .2s;
}
.theme-chip .theme-emoji { font-size: 1.2em; line-height: 1; }
.theme-chip:active { transform: scale(.92); }
.theme-chip--on {
  color: #fff; background: linear-gradient(160deg, #ffc94d, #ff9a3a);
  box-shadow: var(--clay);
}

/* ---------- зона: сцена с плавающими объектами ---------- */
.zone-stage { flex: 1; position: relative; overflow: hidden; }
.scene {
  position: absolute; inset: 12px; overflow: hidden;
  border-radius: 28px;
  box-shadow: inset 0 0 0 6px #ffffff80, var(--shadow);
}
.world-map, .continent-view {
  background: #add8ef; /* океан */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* обзор мира: карта во всю ширину сцены (континенты не обрезаются) */
.world-map .atlas-band { width: 100%; }
.map-bg { position: absolute; inset: 0; }
.map-bg svg { display: block; width: 100%; height: 100%; }
/* векторный атлас: карта заполняет сцену, SVG центрируется (meet),
   оверлеи позиционируются в px в JS с учётом letterbox-полей → всегда точно на странах */
.atlas-fill { position: absolute; inset: 0; }
.atlas-fill > svg { display: block; width: 100%; height: 100%; }   /* preserveAspectRatio=meet */
.atlas-fill .countries path { transition: fill .15s; }
.atlas-fill .hl { fill: #ffd166; cursor: pointer; }      /* наши страны — подсвечены */
.atlas-fill .hl:active { fill: #ffb02e; }
.atlas-fill .continent, .atlas-fill .floater { position: absolute; }

/* 3D-глобус (обзор «Страны») */
.world-globe { background: linear-gradient(180deg, #bfe6fb, #d9f0e6); overflow: hidden; }
.globe-holder { position: absolute; inset: 0; touch-action: none; }
.globe-canvas { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.globe-canvas:active { cursor: grabbing; }
/* подписи-континенты на глобусе: двигаются вместе с ним, клики проходят на canvas */
.globe-label { position: absolute; pointer-events: none; display: flex; flex-direction: column;
  align-items: center; gap: 1px; will-change: transform, left, top; }
.globe-label .cont-fauna { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.globe-label .cont-animal { width: clamp(22px, 6vw, 38px); }
.globe-label .cont-animal svg, .globe-label .cont-animal .art-cut {
  display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(20,40,60,.4)); }
.globe-label .cont-name { font-size: clamp(9px, 2.5vw, 13px); font-weight: 800; color: var(--ink);
  background: rgba(255,255,255,.95); padding: 2px 8px; border-radius: 10px; box-shadow: var(--shadow);
  white-space: nowrap; }
/* флаги в зуме континента */
.continent-view .floater { width: clamp(40px, 11vw, 58px); height: clamp(28px, 7.5vw, 40px); }

/* кнопки-континенты на карте мира: животное + подпись */
.continent {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: none; background: transparent; padding: 0; cursor: pointer;
}
.cont-fauna { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.cont-animal { width: clamp(24px, 6.4vw, 40px); border: none; background: transparent; padding: 0; cursor: pointer; transition: transform .12s; }
.cont-animal:nth-child(2) { margin-bottom: 5px; } /* лёгкий разнобой по высоте — живее */
.cont-animal:active { transform: scale(.85); }
.cont-animal svg, .cont-animal .art-cut { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(40,60,80,.35)); }
.cont-name {
  font-size: clamp(9px, 2.5vw, 13px); font-weight: 800; color: var(--ink);
  background: rgba(255,255,255,.94); padding: 3px 8px; border: none; border-radius: 10px;
  box-shadow: var(--shadow); white-space: nowrap; cursor: pointer; transition: transform .15s;
  margin-top: 1px;
}
.cont-name:active { transform: scale(.92); }

/* полка животных в зуме континента */
.fauna-bar {
  position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0 10px;
}
.fauna-item {
  width: clamp(44px, 12vw, 64px); padding: 5px; border: 3px solid #fff; border-radius: 16px;
  background: rgba(255,255,255,.9); box-shadow: var(--clay); cursor: pointer; transition: transform .15s var(--ease-clay);
}
.fauna-item:active { transform: scale(.86); }
.fauna-item svg { display: block; width: 100%; height: auto; }

/* богатая карточка страны */
/* тапабельная строка-столица */
.say-line {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  border: none; background: #eef4fb; color: var(--ink-soft); font-family: inherit;
  font-weight: 600; font-size: clamp(15px, 4.2vw, 21px); padding: 8px 16px; border-radius: 16px;
  cursor: pointer; transition: transform .12s;
}
.say-line:active { transform: scale(.95); }
.mini-speak { display: inline-flex; vertical-align: middle; }
.mini-speak svg { width: 17px; height: 17px; color: #c79200; display: block; }

.country-info { display: flex; gap: 18px; margin-top: 16px; justify-content: center; align-items: flex-start; }
.ci-col { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 170px; }
.say-block { border: none; background: transparent; font-family: inherit; padding: 0; cursor: pointer; transition: transform .12s; }
.say-block:active { transform: scale(.95); }
.ci-fig { width: clamp(72px, 22vw, 110px); }
.ci-fig svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 9px rgba(40,60,80,.22)); }
.ci-fig-img { display: block; width: 100%; height: auto; border-radius: 18px; border: 3px solid #fff; box-shadow: var(--shadow); }
.ci-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.ci-value { display: inline-flex; align-items: center; gap: 6px; justify-content: center; font-size: clamp(16px, 4.5vw, 21px); font-weight: 800; text-align: center; }
.ci-langs { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 6px; border: none; font-family: inherit; cursor: pointer;
  background: #eaf2fb; color: var(--ink); padding: 7px 13px; border-radius: 14px;
  font-size: clamp(15px, 4vw, 18px); font-weight: 700; box-shadow: inset 0 0 0 2px #d7e6f7;
  transition: transform .12s;
}
.lang-chip:active { transform: scale(.93); }
.ocean-scene {
  background: url('../assets/bg/ocean.webp') center / cover no-repeat, #4a96c7;
}
.jungle-scene {
  background: url('../assets/bg/jungle.webp') center / cover no-repeat, #2f7d4f;
}
.arctic-scene {
  background: url('../assets/bg/arctic.webp') center / cover no-repeat,
    linear-gradient(180deg, #dff1fb 0%, #bfe0f0 55%, #a9d3ea 100%);
}
.antarctic-scene {
  background: url('../assets/bg/antarctic.webp') center / cover no-repeat,
    linear-gradient(180deg, #e8f4fb 0%, #cfe6f2 55%, #b6d8ec 100%);
}
.islands-scene {
  background: url('../assets/bg/islands.webp') center / cover no-repeat,
    linear-gradient(180deg, #bfe9f6 0%, #f6e7bd 100%);
}
.city-scene {
  background: url('../assets/bg/city.webp') center / cover no-repeat,
    linear-gradient(180deg, #cfe0f5 0%, #e7eef7 100%);
}
.space-scene {
  background: url('../assets/bg/space.webp') center / cover no-repeat,
    linear-gradient(180deg, #1a1340 0%, #2a1a5c 55%, #3a2470 100%);
}
/* нейтральная сцена (темы Цвета/Музыка в зоне «Страны») */
.plain-scene {
  background: linear-gradient(180deg, #d7ecff 0%, #eef6ff 55%, #fdf0f6 100%);
}
/* мерцающие звёзды в космосе */
.star {
  position: absolute; width: 8px; height: 8px; transform-origin: center;
  background: radial-gradient(circle, #fff 0 30%, #ffe9a8 55%, transparent 72%);
  border-radius: 50%; box-shadow: 0 0 6px 1px #fff3c4; pointer-events: none;
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
/* полог леса сверху — гирлянда листьев */
.canopy {
  position: absolute; top: 0; left: 0; right: 0; height: 16%;
  background:
    radial-gradient(circle at 10% 0%, #2f7d4f 0 9%, transparent 9.5%),
    radial-gradient(circle at 26% 0%, #3a8f59 0 11%, transparent 11.5%),
    radial-gradient(circle at 44% 0%, #2f7d4f 0 10%, transparent 10.5%),
    radial-gradient(circle at 62% 0%, #3a8f59 0 11%, transparent 11.5%),
    radial-gradient(circle at 80% 0%, #2f7d4f 0 10%, transparent 10.5%),
    radial-gradient(circle at 96% 0%, #3a8f59 0 9%, transparent 9.5%);
  pointer-events: none;
}
.firefly {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #fff6a8 0 35%, #ffe04d 60%, transparent 72%);
  box-shadow: 0 0 8px 2px #ffe98a; pointer-events: none;
  animation: glow ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { opacity: .15; transform: translateY(0) scale(.8); }
  50%      { opacity: 1;  transform: translateY(-10px) scale(1.1); }
}

.floater {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(60px, 18vw, 100px); height: clamp(48px, 14vw, 80px);
  padding: 0; border: none; background: transparent; cursor: pointer;
}
.art { display: block; width: 100%; height: 100%; }
.art svg { display: block; width: 100%; height: 100%; }
.art-flag {
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.25); background: #fff; border: 3px solid #fff;
}
.art-animal svg { filter: drop-shadow(0 5px 6px rgba(0,0,0,.25)); object-fit: contain; }
/* растровая вырезка животного (на сценах/картах/полке) */
.art-cut { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(40,60,80,.3)); }
.fauna-item .art-cut, .cont-animal .art-cut { object-position: center; }

/* пузырьки в океане */
.bubble {
  position: absolute; bottom: -20px; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(255,255,255,.4);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: .8; }
  100% { transform: translateY(-92vh) scale(1.1); opacity: 0; }
}

/* заглушка незаполненных зон */
.zone-soon { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; }
.zone-soon.soon-bg { background-size: cover; background-position: center; border-radius: 28px;
  box-shadow: inset 0 0 0 6px #ffffff80, var(--shadow); }
.zone-soon.soon-bg .zone-soon-art { filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.zone-soon-art { width: clamp(110px, 34vw, 190px); animation: bob 2s ease-in-out infinite; }
.zone-soon-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(60,90,120,.25)); }
.zone-soon-text { font-size: 48px; }

/* ---------- прогресс/коллекция ---------- */
.progress-pill {
  position: absolute; top: 10px; right: 12px; z-index: 6;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-weight: 800; font-size: clamp(13px, 3.4vw, 16px);
  padding: 5px 12px; border-radius: 14px; border: 2px solid #fff;
  box-shadow: var(--shadow); pointer-events: none; white-space: nowrap;
  direction: ltr; /* «★ 1 / 8» не должно переворачиваться в RTL */
}
.progress-pill--done { background: linear-gradient(160deg, #ffd76a, #ffbe2e); color: #6b4e00; }
[dir="rtl"] .progress-pill { right: auto; left: 12px; }
.found-badge {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffd76a, #ffbe2e); color: #fff;
  border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow);
  font-size: 13px; line-height: 1; animation: pop .4s var(--ease-clay) both;
}
[dir="rtl"] .found-badge { right: auto; left: -6px; }

/* ---------- игровой режим «Найди» ---------- */
.play-fab {
  position: absolute; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 7;
  width: 60px; height: 60px; border: 4px solid #fff; border-radius: 50%;
  background: linear-gradient(160deg, #7ed957, #34b36b); box-shadow: var(--clay);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease-clay);
}
.play-fab svg { width: 30px; height: 30px; color: #fff; }
.play-fab:active { transform: scale(.86); }
[dir="rtl"] .play-fab { right: auto; left: 14px; }
.game-on .play-fab, .game-on .fauna-bar { display: none; }
.game-on .fauna-bar { pointer-events: none; }

.game-bar {
  position: absolute; top: 10px; left: 12px; right: 12px; z-index: 8;
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(255,255,255,.96); border: 3px solid #fff; border-radius: 18px;
  padding: 8px 12px; box-shadow: var(--clay); animation: pop .35s var(--ease-clay) both;
}
.game-bar .game-q { flex: 1; text-align: center; font-size: clamp(17px, 4.6vw, 24px); font-weight: 800; color: var(--ink); }
.game-bar .game-q b { color: #d96a1f; }
.game-bar--done { background: linear-gradient(160deg, #ffe08a, #ffc24d); }
.game-speak, .game-close {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  font-family: inherit; transition: transform .15s;
}
.game-speak { background: linear-gradient(160deg, #ffd76a, #ffbe2e); }
.game-speak svg { width: 22px; height: 22px; color: #6b4e00; }
.game-close { background: #eef2f6; color: var(--ink-soft); font-size: 20px; font-weight: 800; }
.game-speak:active, .game-close:active { transform: scale(.86); }

/* меню выбора игры */
.game-menu {
  position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: rgba(40,60,80,.4); animation: fade .25s ease;
}
.game-menu-card {
  background: var(--card); border: 5px solid #fff; border-radius: 30px; padding: 22px 24px;
  box-shadow: var(--clay); text-align: center; max-width: 86vw; animation: pop .35s var(--ease-clay) both;
}
.game-menu-title { font-size: clamp(18px, 5vw, 24px); font-weight: 800; margin-bottom: 16px; color: var(--ink); }
.game-menu-btns { display: flex; flex-direction: column; gap: 12px; }
.game-menu-btn {
  display: flex; align-items: center; gap: 12px; justify-content: flex-start;
  border: 3px solid #fff; border-radius: 20px; padding: 12px 20px; cursor: pointer;
  background: linear-gradient(160deg, #f4faff, #e6f1fb); box-shadow: var(--shadow);
  font-family: inherit; font-weight: 800; font-size: clamp(16px, 4.4vw, 20px); color: var(--ink);
  transition: transform .15s var(--ease-clay);
}
.game-menu-btn .gm-emoji { font-size: 1.5em; }
.game-menu-btn:active { transform: scale(.94); }

/* «Найди пару» — карточный memory */
.pairs-overlay {
  position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: rgba(40,60,80,.5); animation: fade .25s ease; padding: 56px 16px 16px;
}
.pairs-close {
  position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #fff; background: #fff; box-shadow: var(--clay); cursor: pointer;
  font-size: 22px; font-weight: 800; color: var(--ink-soft);
}
.pairs-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px;
  width: 100%; max-width: 460px; align-content: center;
}
.pair-card {
  position: relative; aspect-ratio: 1 / 1; border: none; background: transparent; padding: 0; cursor: pointer;
}
.pair-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; border: 3px solid #fff; box-shadow: var(--shadow);
  transition: opacity .25s, transform .25s var(--ease-clay);
}
.pair-back { background: linear-gradient(160deg, #8fd0ea, #5aa9d6); font-size: clamp(26px, 9vw, 40px); }
.pair-front { background: #fff; opacity: 0; transform: scale(.6); padding: 8px; }
.pair-front .art, .pair-front svg, .pair-front img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pair-card.flipped .pair-front, .pair-card.matched .pair-front { opacity: 1; transform: scale(1); }
.pair-card.flipped .pair-back, .pair-card.matched .pair-back { opacity: 0; transform: scale(.6); }
.pair-card.matched .pair-front { border-color: #ffce4d; box-shadow: 0 0 0 3px #ffce4d, var(--shadow); }
.pairs-win {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  background: linear-gradient(160deg, #ffe08a, #ffc24d); border: 5px solid #fff; border-radius: 28px;
  padding: 22px 34px; font-size: clamp(26px, 8vw, 40px); font-weight: 800; color: #6b4e00; box-shadow: var(--clay);
}

.floater.shake { animation: shakeit .42s; }
@keyframes shakeit {
  0%,100% { transform: translate(-50%, -50%); }
  20%     { transform: translate(calc(-50% - 8px), -50%); }
  40%     { transform: translate(calc(-50% + 8px), -50%); }
  60%     { transform: translate(calc(-50% - 6px), -50%); }
  80%     { transform: translate(calc(-50% + 6px), -50%); }
}
.floater.sparkle { animation: sparkleit .6s var(--ease-clay); }
@keyframes sparkleit {
  0%   { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 0 #ffe08a); }
  45%  { transform: translate(-50%, -50%) scale(1.32); filter: drop-shadow(0 0 14px #ffd23f); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ---------- карточка раскрытия ---------- */
.reveal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40,60,80,.45); opacity: 0; transition: opacity .25s;
}
.reveal[hidden] { display: none; } /* иначе display:flex перебивает атрибут hidden и оверлей ловит все клики */
.reveal--on { opacity: 1; }
.reveal-card {
  background: var(--card); border: 5px solid #ffffff; border-radius: 38px; padding: 28px 32px;
  text-align: center; box-shadow: var(--clay);
  transform: scale(.7); transition: transform .35s var(--ease-clay);
  max-width: 86vw;
}
.reveal--on .reveal-card { transform: scale(1); }
.reveal-art { width: clamp(160px, 50vw, 260px); margin: 0 auto 16px; }
.reveal-art svg { width: 100%; height: auto; display: block; }
.reveal-art.is-flag svg { border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.2); border: 4px solid #fff; }
.reveal-art.is-animal svg { filter: drop-shadow(0 8px 12px rgba(0,0,0,.22)); }
.reveal-art-img { display: block; width: 100%; height: auto; border-radius: 24px; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.reveal-name { font-size: clamp(30px, 9vw, 52px); font-weight: 800; }
.reveal-sub { font-size: clamp(16px, 4.5vw, 22px); margin-top: 6px; color: var(--ink-soft); font-weight: 600; }
.reveal-speak {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 18px; width: 68px; height: 68px; border: 4px solid #fff; border-radius: 50%;
  background: linear-gradient(160deg, #ffd76a, #ffbe2e); box-shadow: var(--clay); cursor: pointer;
  transition: transform .2s var(--ease-clay);
}
.reveal-speak:active { transform: scale(.86); }

/* ---------- анимации объектов ---------- */
.pop-in { animation: pop .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translate(-50%, -50%); }
  50%     { transform: translate(-50%, calc(-50% - 8px)); }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.tap-squish { animation: squish .3s ease; }
@keyframes squish {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.25, .8); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* подсказка «на главный экран» */
.a2hs-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  border: 3px solid #fff; border-radius: 20px; padding: 11px 18px;
  background: linear-gradient(160deg, #fff, #eef6ff); box-shadow: var(--clay);
  font-family: inherit; font-weight: 800; font-size: clamp(14px, 3.8vw, 17px);
  color: var(--ink); cursor: pointer; transition: opacity .35s, transform .35s var(--ease-clay);
}
.a2hs-hint .a2hs-ic { font-size: 1.25em; }
.a2hs-hint:active { transform: translateX(-50%) scale(.94); }
.a2hs-hint.a2hs-out { opacity: 0; transform: translate(-50%, 20px); }

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