/* Стили восьми мини-игр Развивашки №4, которые не покрыты общими классами
   style.css (.obj/.play-field/.menu-grid/.word-card и т.д.) и не заданы
   играми инлайново через JS. Палитра, скругления и анимации (salute,
   pulse-hint, shake, pop) взяты из style.css - здесь их не переопределяем,
   только используем через var(--g-*) и уже существующие keyframes.

   Игры memory, spotdiff и domino сюда почти не попали: memory строит сетку
   и карточки полностью инлайн поверх готовых .word-card/.found из
   style.css (кроме .memory-grid-big ниже - только увеличение карточек на
   самом лёгком уровне), spotdiff собирает обе сетки на классе .play-field
   (уже есть) и красит клетки инлайн, domino раскладывает всё через
   JS-функции style*() в самом файле игры. Ниже - только реально
   недостающие классы: battleship, logic, sequence, find, quiz. */

/* === Jogo da Memória: карточки крупнее на самом лёгком уровне (2 в ряд) ==
   Сетку и колонки считает game-memory.js (colsFor/build), здесь только
   увеличиваем сами карточки .word-card внутри .memory-grid-big. */
.memory-grid-big .word-card { min-height: 120px; padding: 20px; }
.memory-grid-big .word-emoji { font-size: 72px; }
.memory-grid-big .word-label { font-size: 20px; }

/* === Caça aos Barquinhos (battleship): поле «воды» и легенда предметов == */
.bs-wrap { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.bs-legend {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  background: white; border-radius: 20px; padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex-shrink: 0;
}
.bs-legend-item {
  font-size: 32px; line-height: 1; opacity: 0.35; filter: grayscale(0.7);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.bs-legend-item.found { opacity: 1; filter: none; transform: scale(1.15); }

.bs-board {
  /* Размер клетки - общая переменная: по ней же строятся колонки (инлайн в
     JS), поэтому клетки всегда квадратные и поле влезает без прокрутки. */
  --bs-cell: clamp(40px, 8.5vmin, 64px);
  flex: 1; background: white; border-radius: 24px; padding: 14px;
  box-shadow: inset 0 0 0 4px rgba(2,82,138,0.15); min-height: 260px;
  align-content: center; justify-content: center; overflow: auto;
}
.bs-head {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--g-blue); font-size: 14px;
}
.bs-cell {
  /* Жёстко квадратные клетки фиксированного размера, чтобы поле не
     растягивало их по высоте (align-self:center снимает растяжение сеткой). */
  width: var(--bs-cell); height: var(--bs-cell);
  align-self: center; justify-self: center; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--g-blue-soft); border-radius: 12px;
  font-size: clamp(20px, 6vw, 34px); cursor: pointer; user-select: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.bs-cell:active { transform: scale(0.92); }
/* Найден предмет - тот же «поп», что и у .obj.found в style.css, чтобы
   реакция на клетках выглядела так же, как в остальных играх сборника. */
.bs-cell.found { background: #eafcea; animation: pop 0.5s ease forwards; pointer-events: none; }
/* Пустая клетка после промаха - мягко гаснет, без наказания ребёнка. */
.bs-cell.empty { background: #eef6fb; opacity: 0.55; pointer-events: none; }
/* Находка пирата в режиме versus - свой цвет, чтобы отличить от находки
   ребёнка (.found без .cpu, зелёный фон выше). */
.bs-cell.found.cpu { background: #fff1e0; }

/* Легенда: кто нашёл предмет в versus - "mine" (ребёнок) зелёное кольцо,
   "cpu" (пират) оранжевое. В solo эти классы не используются. */
.bs-legend-item.found.mine { box-shadow: 0 0 0 3px var(--g-green); border-radius: 50%; }
.bs-legend-item.found.cpu { box-shadow: 0 0 0 3px #ff9f43; border-radius: 50%; }

/* === Caça aos Barquinhos: экран выбора режима (solo/versus) =========== */
.bs-mode-choice {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; padding: 12px;
}
.bs-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; max-width: 320px; padding: 20px 22px;
}
.bs-mode-emoji { font-size: 40px; line-height: 1; }
.bs-mode-label { font-size: 18px; }

/* === Caça aos Barquinhos: полоска счёта в режиме versus =============== */
.bs-score {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: white; border-radius: 999px; padding: 10px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex-shrink: 0;
  font-weight: 900; font-size: 22px; color: var(--g-blue);
}
.bs-score-sep { opacity: 0.5; }

/* === Caça aos Barquinhos: итог матча versus (поверх .celebrate) ======= */
.bs-result-score { font-size: 22px; font-weight: 800; color: var(--g-blue); margin: 0; }

/* === Desafios de Lógica: вопрос + ряд эмодзи + карточки-варианты ======= */
.logic-area { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.logic-emojis {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  background: white; border-radius: 24px; padding: 18px;
  box-shadow: inset 0 0 0 4px rgba(2,82,138,0.15); flex-shrink: 0;
}
.logic-emoji { font-size: clamp(40px, 10vw, 64px); line-height: 1; }
.logic-options {
  flex: 1; display: flex; flex-wrap: wrap; gap: 14px;
  align-content: center; justify-content: center; min-height: 0;
}
.logic-option {
  min-width: 120px; min-height: 64px; flex: 1 1 140px; max-width: 220px;
  display: flex; align-items: center; justify-content: center;
  background: white; border-radius: 18px; padding: 14px 18px;
  font-size: 19px; font-weight: 800; color: var(--g-blue); text-align: center;
  overflow-wrap: anywhere; word-break: break-word;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.logic-option:active { transform: scale(0.96); }
.logic-option.found {
  background: #eafcea; box-shadow: inset 0 0 0 3px var(--g-green);
  pointer-events: none;
}
.logic-option.disabled { opacity: 0.45; pointer-events: none; }

/* === Sequências e Padrões: ряд узора + пустая ячейка + варианты ======= */
.sequence-area { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.sequence-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; background: white; border-radius: 24px; padding: 18px;
  box-shadow: inset 0 0 0 4px rgba(2,82,138,0.15); flex-shrink: 0;
}
.sequence-item {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 8vw, 44px); line-height: 1;
}
.sequence-blank {
  border: 4px dashed var(--g-red); border-radius: 16px;
  font-size: 30px; font-weight: 900; color: var(--g-red);
}
/* Правильный ответ занимает пустую ячейку - подсвечиваем итог узора. */
.sequence-blank.filled {
  border-style: solid; border-color: var(--g-green); background: #eafcea;
  font-size: clamp(30px, 8vw, 44px); color: inherit;
}
.sequence-options {
  flex: 1; display: flex; flex-wrap: wrap; gap: 14px;
  align-content: center; justify-content: center; min-height: 0;
}
.sequence-option {
  /* Раньше было flex: 0 0 auto - карточка сжималась/росла под свой текст,
     и варианты разной длины вставали неровно (не по одной сетке). Теперь
     ширина считается так же, как у logic-option/quiz-option - одинаковый
     диапазон, ряд выглядит ровным вне зависимости от длины ответа.
     Ответы бывают и эмодзи, и целыми словами (gato/passarinho и т.п.) -
     без переноса длинное слово вылезало за пределы карточки поверх
     соседней, поэтому шрифт чуть меньше и перенос разрешён внутри слова. */
  min-width: 84px; min-height: 64px; flex: 1 1 110px; max-width: 160px;
  display: flex; align-items: center; justify-content: center;
  background: white; border-radius: 18px; padding: 12px 18px;
  font-size: clamp(20px, 6vw, 32px); text-align: center; line-height: 1.15;
  overflow-wrap: anywhere; word-break: break-word;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.sequence-option:active { transform: scale(0.96); }
.sequence-option.found {
  background: #eafcea; box-shadow: inset 0 0 0 3px var(--g-green);
  pointer-events: none;
}
.sequence-option.disabled { opacity: 0.45; pointer-events: none; }

/* === Caça ao Tesouro (find): подпись сцены + поле рассыпанных эмодзи === */
.find-scene { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.find-scene-name {
  text-align: center; font-weight: 800; font-size: 16px;
  color: var(--g-blue); opacity: 0.8; flex-shrink: 0;
}
/* Само поле координат (position:relative/min-height) задаёт игра инлайн -
   здесь только «вид»: белая карточка, как play-field у остальных игр. */
.find-field {
  flex: 1; background: white; border-radius: 24px;
  box-shadow: inset 0 0 0 4px rgba(2,82,138,0.15); overflow: hidden;
}
/* Найденный предмет - у find-obj нет общего .obj, поэтому поп-реакцию и
   блокировку повторного тапа задаём отдельно под её собственный класс. */
.find-obj.found { animation: pop 0.5s ease forwards; pointer-events: none; }

/* === Quiz Infantil: финальная викторина, вопрос + эмодзи + варианты ==== */
.quiz-area { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.quiz-emojis {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  background: white; border-radius: 24px; padding: 18px;
  box-shadow: inset 0 0 0 4px rgba(2,82,138,0.15); flex-shrink: 0;
}
.quiz-emoji { font-size: clamp(40px, 10vw, 64px); line-height: 1; }
.quiz-options {
  flex: 1; display: flex; flex-wrap: wrap; gap: 14px;
  align-content: center; justify-content: center; min-height: 0;
}
.quiz-option {
  min-width: 120px; min-height: 64px; flex: 1 1 140px; max-width: 260px;
  display: flex; align-items: center; justify-content: center;
  background: white; border-radius: 18px; padding: 14px 18px;
  font-size: 19px; font-weight: 800; color: var(--g-blue); text-align: center;
  overflow-wrap: anywhere; word-break: break-word;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.quiz-option:active { transform: scale(0.96); }
.quiz-option.found {
  background: #eafcea; box-shadow: inset 0 0 0 3px var(--g-green);
  pointer-events: none;
}
.quiz-option.disabled { opacity: 0.45; pointer-events: none; }

/* === Доступность: клавиатурный фокус для карточек-кнопок ============== */
/* Многие карточки (.logic-option/.sequence-option/.quiz-option/.word-card)
   получают role="button" и tabindex, но своей рамки фокуса не имеют - без
   неё ребёнок/родитель не видит, где фокус при навигации с клавиатуры. */
.logic-option:focus-visible,
.sequence-option:focus-visible,
.quiz-option:focus-visible,
.word-card:focus-visible {
  outline: 3px solid var(--g-blue);
  outline-offset: 2px;
}

/* === Карточка-вариант из одной эмодзи без подписи (sequence/logic/quiz) ==
   На обычном текстовом размере (19-32px) одинокая эмодзи смотрится пусто
   рядом со строкой задания сверху (40-64px) - игра проставляет этот класс,
   если в тексте варианта нет ни одной буквы, а тут просто крупный шрифт. */
.sequence-option.opt-emoji,
.logic-option.opt-emoji,
.quiz-option.opt-emoji {
  font-size: clamp(36px, 9vw, 56px);
}

/* === Адаптив: на узких экранах карточки-варианты не должны сжиматься
   ниже комфортного пальцу размера - переносим их в более узкие ряды. === */
@media (max-width: 480px) {
  .logic-option, .quiz-option { flex-basis: 100%; max-width: none; }
  .sequence-option { min-width: 64px; flex-basis: 64px; max-width: 120px; }
}

/* =====================================================================
   Общий экран «вопрос → картинка → варианты» (js/games-ui.js).
   Quiz, Desafios de Lógica, Sequências - правки Карины 09.09, п. 1, 5, 6:
   всё в одном блоке по центру, картинка - главный элемент экрана,
   карточки ответов одинаковые, крупные, слова не рвутся.
   ===================================================================== */
.qs-stage {
  flex: 1; width: 100%; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 2.6vh, 24px); padding: 4px 0 12px; min-height: 0;
}
.qs-card {
  width: 100%; background: white; border-radius: 28px;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 3vw, 28px);
  box-shadow: 0 6px 0 rgba(2,82,138,0.12), 0 12px 28px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 2vh, 18px); text-align: center;
}
.qs-question {
  margin: 0; font-size: clamp(22px, 3.6vw, 32px); font-weight: 900;
  line-height: 1.2; color: var(--g-blue);
}
.qs-pic {
  width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 0.18em; white-space: nowrap; overflow: hidden; line-height: 1.15;
  font-size: min(var(--fit, 120px), 17vh);
}
.qs-arrow { font-size: 0.45em; opacity: 0.5; padding: 0 0.1em; }
.qs-gap { display: inline-block; width: 0.45em; }

.qs-options {
  width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
}
.qs-options.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; }
.qs-options.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt-card {
  min-width: 0; min-height: clamp(104px, 18vh, 160px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 10px; background: white; border-radius: 22px; cursor: pointer;
  box-shadow: 0 5px 0 rgba(2,82,138,0.15), 0 8px 18px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, background 0.2s ease;
}
.opt-card:active { transform: scale(0.96); }
.opt-pic {
  max-width: 100%; overflow: hidden; white-space: nowrap; line-height: 1.1;
  font-size: clamp(44px, 8.5vmin, 76px);
}
.opt-word {
  max-width: 100%; overflow: hidden; white-space: nowrap;
  font-size: clamp(16px, 2.3vw, 22px); font-weight: 800; color: var(--g-blue);
}
.opt-card.word-only .opt-word { font-size: clamp(20px, 3.4vw, 30px); }
.opt-card.found { background: #eafcea; box-shadow: inset 0 0 0 4px var(--g-green); pointer-events: none; }
.opt-card.disabled { opacity: 0.4; pointer-events: none; }
.opt-card:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 2px; }

/* Ряд узора Sequências: всегда одна строка внутри карточки, все элементы
   одной высоты; при большом числе элементов уменьшается --fit (games-ui.js). */
.sq-row {
  width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: calc(var(--fit, 56px) * 0.22); overflow: hidden;
  font-size: min(var(--fit, 56px), 12vh); padding: 4px 0;
}
.sq-item {
  flex: none; height: 1.45em; min-width: 1.45em; padding: 0 0.15em;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; line-height: 1; border-radius: 0.3em; background: var(--g-cream);
}
.sq-blank {
  background: white; border: max(3px, 0.06em) dashed var(--g-red);
  color: var(--g-red); font-weight: 900; font-size: 0.8em; height: 1.8125em; min-width: 1.8125em;
}
.sq-blank.filled { border-style: solid; border-color: var(--g-green); background: #eafcea; color: inherit; font-size: 1em; height: 1.45em; min-width: 1.45em; }

@media (max-width: 560px) {
  .qs-options.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-card { min-height: 96px; }
}

/* === Jogo dos 7 Erros (п. 4 правок Карины): две почти квадратные карточки
   рядом (на узком экране - друг под другом), крупные эмодзи, клик по обеим.
   Размер клетки --sd-cell считает sdSize() в game-spotdiff.js. ======== */
.sd-wrap {
  flex: 1; min-height: 0; display: flex; gap: 16px;
  align-items: center; justify-content: center;
}
.sd-wrap.stacked { flex-direction: column; }
.sd-board {
  display: grid; gap: 0; padding: 12px; background: white; border-radius: 24px;
  box-shadow: 0 6px 0 rgba(2,82,138,0.12), 0 12px 28px rgba(0,0,0,0.08);
}
.sd-cell {
  width: var(--sd-cell, 72px); height: var(--sd-cell, 72px);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--sd-cell, 72px) * 0.62); line-height: 1;
  border-radius: 16px; cursor: pointer; user-select: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.sd-cell:active { transform: scale(0.92); }
.sd-cell.sd-found {
  background: rgba(109,212,126,0.22); box-shadow: inset 0 0 0 4px var(--g-green);
  border-radius: 50%; pointer-events: none;
}

/* === Caça ao Tesouro (п. 3 правок Карины): одна компактная квадратная зона,
   подсказка-ситуация в центре, предметы вокруг неё. ===================== */
.find-card { gap: clamp(6px, 1.4vh, 12px); }
.find-scene-name { font-size: 15px; font-weight: 800; color: var(--g-blue); opacity: 0.6; margin-top: -4px; }
.find-zone {
  --find-obj: min(14vmin, 84px);
  position: relative; width: min(100%, 52vh, 520px); aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, #eaf6ff 0 34%, #f7fbff 35% 100%);
  border-radius: 28px;
}
.find-obj {
  position: absolute; transform: translate(-50%, -50%);
  font-size: var(--find-obj); line-height: 1; cursor: pointer; user-select: none;
  padding: 6px; border-radius: 20px; transition: transform 0.15s ease;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18));
}
.find-obj:active { transform: translate(-50%, -50%) scale(0.92); }
.find-obj.found {
  animation: none; transform: translate(-50%, -50%) scale(1.15);
  background: rgba(109,212,126,0.22); box-shadow: inset 0 0 0 4px var(--g-green);
  pointer-events: none;
}
.find-obj.shake { animation: find-shake 0.4s; }
@keyframes find-shake {
  0%,100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 8px), -50%) rotate(-5deg); }
  75% { transform: translate(calc(-50% + 8px), -50%) rotate(5deg); }
}
.find-obj.pulse-hint { animation: find-hint calc(var(--hint-pulse-total, 2.4s) / 3) ease-in-out 3; }
@keyframes find-hint {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); filter: drop-shadow(0 0 20px gold); }
}
.find-cue {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: calc(var(--find-obj) * 1.25); line-height: 1; pointer-events: none;
  opacity: 0.95;
}
/* Нарисованный стол для подсказки «em cima da mesa». */
.find-table {
  position: absolute; left: 18%; right: 18%; top: 56%; height: 5%;
  background: #c98a52; border-radius: 10px; box-shadow: 0 4px 0 #9c6332;
}
.find-table::before, .find-table::after {
  content: ""; position: absolute; top: 100%; width: 6%; height: 420%;
  background: #b57640; border-radius: 0 0 6px 6px;
}
.find-table::before { left: 8%; }
.find-table::after { right: 8%; }

.find-zone.free { background: #f4faff; }

/* === Dominó de Imagens (п. 7 правок Карины): одна компактная зона по
   центру, полка вплотную к слотам, карточки и слоты крупнее. ========== */
.dm-board {
  flex: 1; min-height: 0; width: 100%; max-width: 820px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 36px); padding: 8px 0;
}
.dm-col {
  display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px);
  background: white; border-radius: 26px; padding: clamp(10px, 2vh, 18px);
  box-shadow: 0 6px 0 rgba(2,82,138,0.12), 0 12px 28px rgba(0,0,0,0.08);
}
.dm-slot { display: flex; align-items: center; gap: 10px; }
.dm-slot::after { content: none; }
.dm-shelf {
  display: grid; grid-template-columns: repeat(2, auto); gap: clamp(8px, 1.6vh, 14px);
  align-content: center; justify-content: center;
}
.dm-card {
  --dm: clamp(84px, 12.5vh, 118px);
  width: var(--dm); height: var(--dm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 6px; background: white; border-radius: 18px;
  box-shadow: 0 4px 0 rgba(2,82,138,0.15), 0 6px 14px rgba(0,0,0,0.1);
  user-select: none; touch-action: none;
}
.dm-left { background: var(--g-cream); box-shadow: none; }
.dm-draggable { cursor: grab; }
.dm-draggable.dragging { cursor: grabbing; box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.dm-emoji { font-size: calc(var(--dm) * 0.44); line-height: 1; }
.dm-label {
  max-width: 100%; overflow: hidden; white-space: nowrap;
  font-size: clamp(13px, 1.9vh, 16px); font-weight: 800; color: var(--g-blue);
}
.dm-drop {
  --dm: clamp(84px, 12.5vh, 118px);
  width: calc(var(--dm) + 12px); height: calc(var(--dm) + 12px);
  display: flex; align-items: center; justify-content: center;
  border: 3px dashed #b9cbd6; border-radius: 20px; background: #f6fbff;
}
.dm-drop .dm-card { box-shadow: inset 0 0 0 3px var(--g-green); background: #eafcea; }

@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .dm-board { flex-direction: column; justify-content: flex-start; }
  .dm-shelf { grid-template-columns: repeat(4, auto); }
  .dm-card, .dm-drop { --dm: clamp(64px, 19vw, 96px); }
}

/* === Jogo da Memória (п. 8): квадратные карточки на весь экран,
   размер --mem считает sizeGrid() в game-memory.js. =================== */
.mem-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 0 8px; }
.mem-grid { display: grid; gap: 12px; justify-content: center; align-content: center; }
.mem-card.word-card {
  width: var(--mem, 120px); height: var(--mem, 120px); min-width: 0; padding: 6px;
  justify-content: center; gap: 4px; border-radius: 20px;
  box-shadow: 0 4px 0 rgba(2,82,138,0.15), 0 6px 14px rgba(0,0,0,0.1);
}
.mem-card .word-emoji { font-size: calc(var(--mem, 120px) * 0.42); }
.mem-card .word-label {
  font-size: clamp(12px, calc(var(--mem, 120px) * 0.13), 20px);
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mem-card.found { background: #eafcea; box-shadow: inset 0 0 0 4px var(--g-green); animation: none; }

/* Caça aos Barquinhos, режим с пиратом: клетка, где пират промахнулся. */
.bs-cell.empty.cpu-miss { background: #fff1e0; font-size: calc(var(--bs-cell) * 0.4); opacity: 0.7; }
/* Телефон: домино целиком влезает в экран (слоты + полка без прокрутки). */
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .dm-card, .dm-drop { --dm: clamp(52px, min(19vw, 9.6vh), 96px); }
  .dm-board { gap: 12px; }
  .dm-col { padding: 8px; }
  .dm-label { font-size: 11px; }
}
.opt-card.pic-only .opt-pic { font-size: clamp(52px, 11vmin, 88px); }
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .dm-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
}
@media (max-width: 640px), (max-aspect-ratio: 4/5) {
  .dm-shelf .dm-card { --dm: clamp(48px, min(15.5vw, 9vh), 90px); }
  .dm-card { padding: 4px; }
}

/* Низкий экран (телефон боком, ~320-500px высоты): блок вопроса не обрезается -
   «safe center» прижимает к верху при нехватке места, размеры от высоты. */
.qs-stage { justify-content: safe center; }
@media (max-height: 520px) {
  .qs-stage { gap: 8px; padding: 0 0 6px; }
  .qs-card { padding: 8px 14px; gap: 4px; border-radius: 20px; }
  .qs-question { font-size: clamp(16px, 4.6vh, 24px); }
  .qs-pic { font-size: min(var(--fit, 120px), 14vh); }
  .opt-card { min-height: 0; height: 24vh; padding: 4px 6px; gap: 2px; border-radius: 16px; }
  .opt-pic, .opt-card.pic-only .opt-pic { font-size: 10vh; }
  .opt-word { font-size: clamp(12px, 4vh, 18px); }
  .sq-row { font-size: min(var(--fit, 56px), 11vh); }
  .find-zone { width: min(100%, 50vh); }
  .find-scene-name { display: none; }
}

/* =====================================================================
   Компаньоны и прогресс по бокам игры (js/companions.js, дизайн A + C).
   Боковые колонки только на широком экране; на телефоне - как раньше.
   ===================================================================== */
.play-stage { flex: 1; min-height: 0; display: flex; gap: clamp(8px, 1.4vw, 22px); }
.play-stage > .play-area { flex: 1; min-width: 0; }
.cmp-rail { display: none; }
@media (min-width: 1000px) and (min-height: 560px) {
  .cmp-rail {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    flex: none; width: clamp(170px, 15vw, 260px); position: relative; padding-bottom: 6px;
  }
}
.cmp-char {
  display: block; width: 100%; max-height: 40vh; object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(2,82,138,0.18)); user-select: none; -webkit-user-drag: none;
}
.cmp-sloth.cmp-talking { animation: cmp-talk 0.9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes cmp-talk { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.cmp-bounce { animation: cmp-bounce 0.55s ease; transform-origin: 50% 100%; }
@keyframes cmp-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.06) translateY(-12px); } 100% { transform: scale(1); } }

.cmp-bubble {
  position: relative; width: 100%; margin-bottom: 16px; padding: 12px 14px;
  background: white; border-radius: 22px; text-align: center;
  font-weight: 800; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.25; color: var(--g-blue);
  box-shadow: 0 6px 0 rgba(2,82,138,0.10), 0 10px 22px rgba(0,0,0,0.08);
  opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease;
}
.cmp-bubble.show { opacity: 1; transform: none; }
.cmp-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  border: 12px solid transparent; border-top-color: white; border-bottom: 0;
}
.cmp-trail {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; width: 100%;
  margin-top: 10px; padding: 8px 10px; background: white; border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.cmp-trail:empty { display: none; }
.cmp-star { font-size: clamp(18px, 1.6vw, 24px); line-height: 1; color: #d6e4ee; transition: color 0.3s ease; }
.cmp-star.on { color: var(--g-yellow); text-shadow: 0 0 8px rgba(255,180,0,0.55); }
.cmp-star.pop { animation: pop 0.5s ease; }

.cmp-toucan {
  position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateX(40px); transition: opacity 0.3s ease, transform 0.35s ease; pointer-events: none; z-index: 3;
}
.cmp-toucan.show { opacity: 1; transform: none; }
.cmp-toucan .cmp-char { width: 72%; max-height: 22vh; transform: scaleX(-1); } /* тукан показывает влево - на игру */
.cmp-toucan .cmp-bubble { opacity: 1; transform: none; margin-bottom: 10px; }

.cmp-shelf {
  width: 100%; margin-top: 10px; padding: 10px 10px 12px; background: white; border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.cmp-shelf-title { font-size: 13px; font-weight: 800; color: var(--g-blue); opacity: 0.65; text-align: center; margin-bottom: 6px; }
.cmp-shelf-items {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; justify-items: center;
  min-height: 40px; font-size: clamp(22px, 2vw, 30px); line-height: 1.2;
  background: repeating-linear-gradient(180deg, transparent 0 calc(1.2em - 3px), #f1e6d6 calc(1.2em - 3px) 1.2em);
}
.cmp-sticker { animation: cmp-stick 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15)); }
@keyframes cmp-stick { 0% { transform: scale(0) rotate(-35deg); } 100% { transform: scale(1) rotate(0); } }

/* Мягкий фон-тема для каждой игры: два «облака» своего цвета. */
#screen-play {
  --t1: #cfeeff; --t2: #fff1d6;
  background:
    radial-gradient(ellipse 34% 28% at 8% 92%, var(--t1) 0 60%, transparent 61%),
    radial-gradient(ellipse 30% 24% at 94% 14%, var(--t2) 0 60%, transparent 61%),
    linear-gradient(180deg, #e3f4ff 0%, #fff8ee 100%);
}
#screen-play[data-game="battleship"] { --t1: #b9e3ff; --t2: #d4f1ff; }
#screen-play[data-game="memory"]     { --t1: #e8dcff; --t2: #ffe0ec; }
#screen-play[data-game="logic"]      { --t1: #d3f5e2; --t2: #fff0c9; }
#screen-play[data-game="sequence"]   { --t1: #ffe0cc; --t2: #e8dcff; }
#screen-play[data-game="find"]       { --t1: #fff0bf; --t2: #d3f5e2; }
#screen-play[data-game="spotdiff"]   { --t1: #ffd9e6; --t2: #d4f1ff; }
#screen-play[data-game="domino"]     { --t1: #d8f3c9; --t2: #ffe0cc; }
#screen-play[data-game="quiz"]       { --t1: #cfeeff; --t2: #ffe9a8; }
/* Большой экран с компаньонами: игра в центре крупнее, персонажи выше. */
@media (min-width: 1000px) and (min-height: 700px) {
  .qs-stage { max-width: 920px; }
  .qs-question { font-size: clamp(26px, 2.4vw, 36px); }
  .qs-pic { font-size: min(var(--fit, 140px), 18vh); }
  .opt-card { min-height: clamp(150px, 22vh, 210px); }
  .opt-pic, .opt-card.pic-only .opt-pic { font-size: clamp(60px, 8vh, 92px); }
  .opt-word { font-size: clamp(18px, 1.7vw, 24px); }
  .cmp-char { max-height: 46vh; }
}

/* Невидимая заглушка на месте взятой/поставленной карточки домино -
   держит размер полки, чтобы панель не сдвигалась (видео yaro 05.11). */
.dm-ghost { visibility: hidden; box-shadow: none; pointer-events: none; }