/* ═══════════════════════════════════════════════════════════
   Игры — общая тема. Один файл на все игры.

   Вёрстку игр не трогаем: у каждой своя разметка и свои классы,
   и это нормально — игры разные. Общее у них другое: все
   двенадцать объявляют один и тот же набор переменных в :root.
   Здесь мы переопределяем этот набор на палитру сайта — и все
   игры разом становятся частью BeEasy Russian.

   Подключать ПОСЛЕ <style> самой игры, иначе не перебьёт:

     <link rel="stylesheet" href="/games/_ui/game-theme.css?v=1">

   Захотите поменять фирменный цвет — правьте здесь, в одном
   месте, а не в двенадцати файлах.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* шрифты сайта */
  --head:'Montserrat','Arial Black',Arial,sans-serif;
  --body:'PT Sans','Segoe UI',Arial,sans-serif;
  --hand:'Caveat','Comic Sans MS',cursive;

  /* палитра сайта поверх игровой */
  --honey:#F08A0C;          /* главный акцент: кнопки, шапка */
  --honey-dark:#C96D00;
  --honey-light:#FFF9EE;    /* фон страницы */
  --cream:#FFF9EE;
  --brown:#3A1E0C;          /* основной текст */
  --muted:#6B4B35;
  --line:#F4E1B5;
  --border:#EFD08A;
  --green:#1C7C43; --green-light:#EAF6EE; --green-dark:#14603A;
  --red:#C4392B;   --red-light:#FCEBE8;
  --blue:#3D72A8;
  --shadow:0 2px 0 rgba(236,196,110,.35), 0 10px 26px -18px rgba(150,90,0,.45);
  --shadow-lg:0 4px 0 rgba(236,196,110,.4), 0 16px 40px -22px rgba(150,90,0,.5);

  /* свои, для правил ниже */
  --teal:#123C4C; --teal-2:#35505B;
  --honey-2:#FFE7A3; --honey-3:#FFF4D6; --sun:#FFD466;
}

body{font-family:var(--body);background:var(--cream);color:var(--brown)}

/* ── Шапка игры ───────────────────────────────────────────
   Была сплошная жёлтая плашка — стала как кнопки сайта. */
.top-nav{background:linear-gradient(180deg,#F7A21B,#F08A0C);
  box-shadow:0 2px 12px -6px rgba(150,90,0,.6)}
.nav-logo{font-family:var(--head);font-weight:800;letter-spacing:-.01em}
.nav-btn{background:rgba(255,255,255,.22);font-family:var(--head);font-weight:700;
  border-radius:999px}

/* ── Шапка задания ────────────────────────────────────────
   Медовый градиент вместо оранжевого, текст тёмный —
   как на баннерах разделов. */
.qhead{background:linear-gradient(135deg,var(--honey-2),var(--sun))}
.qhead h1,.qhead h2,.qhead .qh-title{color:var(--teal)}
.qh-badge{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8);
  color:var(--teal);font-family:var(--head);letter-spacing:.06em}

/* ── Заголовки ────────────────────────────────────────────
   Игровые заголовки набраны Unbounded и коричневым.
   Ставим фирменный Montserrat и тёмно-бирюзовый. */
h1,h2,h3,.title,.screen-title{font-family:var(--head);letter-spacing:-.02em}
h1,h2,.screen-title{color:var(--teal)}

/* ── Кнопки ───────────────────────────────────────────────
   Главная кнопка — оранжевая пилюля сайта. */
button,.btn,.opt,.choice{font-family:var(--head)}
.btn-primary,.btn.primary,.big-btn,.start-btn,.next-btn{
  background:linear-gradient(180deg,#F7A21B,#F08A0C);color:#fff;
  border-radius:999px;box-shadow:0 8px 18px -10px rgba(210,110,0,.9)}

/* ── Карточки ─────────────────────────────────────────────
   Белая плитка с медовой рамкой — как во всех разделах. */
.card,.opt,.choice,.lvl-card,.topic-card,.theme-card,.cat-card{
  background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.card:hover,.opt:hover,.choice:hover,.lvl-card:hover,
.topic-card:hover,.theme-card:hover,.cat-card:hover{border-color:var(--honey)}

/* ── Верно и неверно ──────────────────────────────────────
   Цвета те же, что в уроках чтения. */
/* Только у игр без своей обстановки: у сюжетных игр верно/неверно
   раскрашено своими классами, и общая плашка тут всё ломает —
   светлый фон под светлым текстом. */
body:not([data-skin]) .ok,body:not([data-skin]) .correct,
body:not([data-skin]) .is-ok,body:not([data-skin]) .good{
  background:var(--green-light);border-color:var(--green);color:var(--green-dark)}
body:not([data-skin]) .bad,body:not([data-skin]) .wrong,
body:not([data-skin]) .is-no,body:not([data-skin]) .error{
  background:var(--red-light);border-color:var(--red);color:var(--red)}

/* Фокус с клавиатуры — как на остальном сайте */
:focus-visible{outline:3px solid #3D72A8;outline-offset:3px;border-radius:8px}

/* ── Возврат в раздел ─────────────────────────────────────
   Кнопку ставит game-shell.js: из любой игры видно, куда
   выйти, и игра перестаёт быть тупиком. */
.top-nav{gap:10px}
.g-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  background:rgba(255,255,255,.22);color:#fff;font:700 13px var(--head);
  padding:7px 14px 7px 11px;border-radius:999px;flex:0 0 auto}
.g-back:hover{background:rgba(255,255,255,.34)}
.nav-logo{margin-right:auto;min-width:0}
.g-name{font-family:var(--head);font-weight:800;font-size:14px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){ .g-back span{display:none} .g-back{padding:7px 10px} }

/* Полоска, которой у игры не было: рисуем её той же, что у всех.
   Держим на fixed — у таких игр body бывает флексом, и лишний
   элемент в потоке сдвигает всю вёрстку вбок. */
.top-nav.g-made{position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,#F7A21B,#F08A0C);padding:0 16px;
  display:flex;align-items:center;gap:10px;min-height:46px;
  box-shadow:0 2px 12px -6px rgba(150,90,0,.6)}
body.g-shifted{padding-top:46px}

/* Картинка из общего словаря вместо эмодзи */
.g-pic{width:100%;height:100%;max-width:120px;max-height:120px;object-fit:contain;
  border-radius:14px;display:block;margin:0 auto}
.has-pic{display:grid;place-items:center;padding:6px}

/* Плитка темы: картинка из словаря вместо эмодзи */
.cat .ic.has-pic{padding:0}
.cat .ic .g-pic{width:56px;height:56px;max-width:none;max-height:none;
  object-fit:cover;border-radius:14px}

/* ═══════════════════════════════════════════════════════════
   Переменные, которых не было у первых двенадцати игр.
   Новые игры объявляют их у себя в :root — здесь мы их
   перекрываем, и они встают в ту же палитру.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* оттенки медового и коричневого */
  --honey-light:#FFF4D6;
  --brown-soft:#6B4B35;

  /* зелёный и красный: те же, что в уроках */
  --green-dark:#14603A;
  --red-dark:#A32A1C;

  /* дерево часов «Кукушки» — тёплое, а не рыжее */
  --wood:#9A6A3A; --wood-dark:#5E3D1E; --wood-light:#D2A56E;

  /* части речи в карточной колоде: цвета сайта, не радуга */
  --noun:#F08A0C;   /* существительное — медовый */
  --adj:#1C7C43;    /* прилагательное — зелёный */
  --verb:#C4392B;   /* глагол — красный */
  --adv:#3D72A8;    /* наречие — синий */
  --pink:#C4708F;

  /* «Диктант»: свой набор имён — сводим к тем же цветам */
  --paper:#FFF9EE;
  --card:#fff;
  --ink:#3A1E0C;
  --ink-soft:#6B4B35;
  --comb:#123C4C;        /* тёмно-бирюзовый: шапка, кнопки */
  --comb-light:#35505B;
  --correct:#1C7C43;  --correct-bg:#EAF6EE;
  --wrong:#C4392B;    --wrong-bg:#FCEBE8;
}

/* Шрифты, которые новые игры просят по имени */
body,.hex,.wordbox,input.answer-input,input.letterbox,
.choice-btn,.progress-line,.sprint-stats,.diff-line,
.wordlist-grid span,.eyebrow{font-family:var(--body)}
h1,h2,h3,nav.tabs button,button.btn,details.wordlist summary,
.sprint-stats b,.feedback{font-family:var(--head)}

/* ═══════════════════════════════════════════════════════════
   ИГРЫ СО СВОЕЙ ОБСТАНОВКОЙ — болото, море, подземный ход.

   У этих игр палитра нарисована под сюжет, а не под сайт,
   и имена переменных у каждой свои. Сводим их к цветам
   BeEasy, но тёмным играм оставляем тёмный фон: под землёй
   и под водой светло не бывает, а кремовый лист убил бы
   всю картинку.

   Темнота у всех одна и та же — тёмно-бирюзовая, как шапка
   разделов сайта. Отличается только акцент: у болота —
   зелёный, у клада и у крота — медовый.

   Игра помечается на <body>:
     data-skin="dark|light"   светлая или тёмная
     data-game="swamp|pirate|mole|zhuzha"   чья палитра
   ═══════════════════════════════════════════════════════════ */

body[data-skin]{font-family:var(--body)}
body[data-skin="dark"]{background:#0E2F3C;color:#FFF9EE}
body[data-skin="light"]{background:#FFF9EE;color:#3A1E0C}
body[data-skin] h1,body[data-skin] h2,body[data-skin] h3{font-family:var(--head)}
body[data-skin="dark"] h1,body[data-skin="dark"] h2{color:#FFF9EE}

/* общая темнота: фон страницы, панели, буквы */
body[data-skin="dark"]{
  --display:var(--head);
  --chalk:#FFF9EE; --chalk-dim:#A9C0C9;
  --cream:#FFF9EE; --cream-dim:#A9C0C9;
}

/* Болото: кочки зелёные, камыш медовый */
body[data-game="swamp"]{
  --water-deep:#0E2F3C; --water:#16414F; --murk:#1E5061;
  --pad:#2E7D55; --pad-dim:#2A5E48; --frog:#8FD4A4;
  --reed:#F5A93C; --bad:#E8806E;
}
/* Клад: пергамент медовый, латунь — фирменный оранжевый */
body[data-game="pirate"]{
  --deep:#0E2F3C; --sea:#16414F; --sea-lit:#1E5061;
  --parch:#FFE7A3; --parch-dim:#D8BE7E; --ink:#3A1E0C;
  --brass:#F5A93C; --jade:#4FB27F; --coral:#E8806E;
}
/* Крот: земля та же тёмная, глина — тёплая коричневая */
body[data-game="mole"]{
  --soil-deep:#0E2F3C; --soil:#16414F; --soil-lit:#1E5061;
  --clay:#A8703C; --turf:#2E7D55; --turf-lit:#39906A;
  --ochre:#F5A93C; --rust:#E8806E; --sprout:#8FD4A4;
}
/* Жужа светлая — прямо палитра сайта */
body[data-game="zhuzha"]{
  --display:var(--head);
  --page:#FFF9EE; --card:#FFFFFF; --ink:#3A1E0C; --ink-dim:#6B4B35;
  --sage:#1C7C43; --sage-pale:#EAF6EE; --line:#F4E1B5;
  --honey:#F08A0C; --honey-pale:#FFF4D6;
  --coral:#C4392B; --coral-pale:#FCEBE8;
}

/* Полоска «← Игры» на тёмном фоне не должна быть светлым пятном */
body[data-skin="dark"] .top-nav.g-made{
  background:linear-gradient(180deg,#F5A93C,#E8890C);
  box-shadow:0 2px 14px -6px rgba(0,0,0,.6)}

/* ═══════════════════════════════════════════════════════════
   ЧТОБЫ ИГРА ВХОДИЛА В ЭКРАН

   Игры рисовались во весь экран, а полоска «← Игры» сверху
   забирает у них сорок с лишним точек. На невысоком экране —
   телефон, планшет лёжа, ноутбук — этого хватает, чтобы
   кнопка ответа уехала под сгиб.

   Поэтому на низких экранах поджимаем воздух: полоску,
   отступы между блоками и подписи-инструкции. Сама игра
   не меняется — меняются только промежутки.
   ═══════════════════════════════════════════════════════════ */
@media (max-height:900px){
  .top-nav.g-made{min-height:38px}
  body.g-shifted{padding-top:38px}

  /* подпись под картинкой и шапки-строки */
  body.g-shifted .prompt{font-size:14.5px;line-height:1.3;margin:5px 0}
  body.g-shifted .hud,body.g-shifted .chips,body.g-shifted .meters,
  body.g-shifted .topbar{margin-bottom:7px}
  body.g-shifted .feedback{min-height:0;margin:6px 0}
  body.g-shifted .actions{margin-top:7px}
  body.g-shifted h1{margin-top:0}
  body.g-shifted .wrap{padding-top:6px;padding-bottom:14px}
  body.g-shifted .board{gap:9px}

  /* картинка игры: на низком экране чуть ниже, чтобы влезло всё */
  body.g-shifted .stage{height:min(330px,36vh);padding-bottom:6px}
  body.g-shifted .viewport{height:min(340px,38vh)}

  /* колонка-страница у игр с сюжетом */
  body[data-skin]{padding-top:12px;padding-bottom:20px}
  body[data-skin] h1{font-size:21px}
  body[data-skin] .sub{font-size:13px;margin-bottom:12px}
  body[data-skin] .panel{padding:13px 14px;min-height:0}
  body[data-skin] .log{margin-top:16px}
}

/* Совсем низкий экран — ноутбук 720 точек и планшет лёжа.
   Поджимаем сильнее: заголовок, вводную строку и промежутки. */
@media (max-height:790px){
  body[data-skin]{padding-top:8px;padding-bottom:16px}
  body[data-skin] h1{font-size:19px;margin-bottom:1px}
  body[data-skin] .sub{font-size:12.5px;margin-bottom:9px;line-height:1.4}
  body[data-skin] .map{gap:4px;margin-bottom:12px}
  body[data-skin] .swamp{padding:10px 10px 9px;margin-bottom:10px}
  body[data-skin] .meters,body[data-skin] .topbar{margin-bottom:8px}
  body[data-skin] .status{margin-bottom:9px;min-height:0}
  body[data-skin] .panel{padding:11px 13px}
  body[data-skin] .task,body[data-skin] .phrase{font-size:18px;margin-bottom:10px}
  body[data-skin] .log{margin-top:14px}

  body.g-shifted .levels,body.g-shifted .filters{margin-bottom:7px}
  body.g-shifted .hand{min-height:0;margin-bottom:8px}
  body.g-shifted .card{padding:12px}
}

/* Поле 4×4 растянуто на всю ширину колонки, и на низком экране
   оно одно съедает больше половины высоты. Привязываем его
   размер к высоте окна — клетки просто становятся мельче. */
@media (max-height:790px){
  body[data-game="pirate"] .map,
  body[data-game="mole"] .map{max-width:min(100%,46vh);margin-left:auto;margin-right:auto}
}

/* Элемент, который можно послушать: значок и намёк, что он нажимается */
.g-sayable{cursor:pointer}
.g-say{display:inline-block;margin-left:7px;font-size:.78em;opacity:.55;
  vertical-align:baseline;user-select:none;transition:opacity .15s}
.g-sayable:hover .g-say{opacity:1}

/* ═══════════════════════════════════════════════════════════
   ВЫХОД ИЗ ИГРЫ ВИДЕН ВСЕГДА

   Стартовый экран, правила и финал у игр сделаны накладкой
   во весь экран, и она накрывала полоску «← Игры». Получалось,
   что выйти нельзя ни до игры, ни после — только кнопкой
   «назад» в браузере, а на телефоне её ещё поискать.

   Поднимаем полоску над накладками. Сама накладка остаётся
   модальной: клик мимо неё по-прежнему ничего не делает,
   но выход из игры доступен в любой момент.
   ═══════════════════════════════════════════════════════════ */
.top-nav{position:sticky;top:0;z-index:1000}
.top-nav.g-made{z-index:1000}
body[data-skin] .top-nav.g-made{z-index:1000}

/* ═══════════════════════════════════════════════════════════
   НИЗКИЙ ЭКРАН НОУТБУКА

   На ноутбуке с окном 600–630 точек нижний вариант ответа
   уезжал под сгиб: у игры сверху медовая плашка с названием
   (96 точек) и строка со счётом (54), а название и так стоит
   в полоске «← Игры».

   Поджимаем плашку, а на совсем низких экранах убираем её
   совсем — игра от этого ничего не теряет.
   ═══════════════════════════════════════════════════════════ */
@media (max-height:700px){
  .qhead{padding:9px 16px}
  .qhead::before{opacity:.5}
  .qh-badge{margin-bottom:3px;padding:2px 10px;font-size:9.5px}
  .qh-title{font-size:16px}
  .strip{padding:6px 16px;top:40px}
  .content{padding:10px 16px 6px}
  .start{padding:8px 4px}
  .start h2{font-size:17px;margin:2px 0 2px}
  .start p{font-size:13px;margin-bottom:11px}
  .lvl{gap:8px}
  .lvl-btn{padding:11px 14px}
  .lvl-ic{width:42px;height:42px;flex-basis:42px;font-size:22px}
}
@media (max-height:620px){
  .qhead{display:none}
  .strip{top:38px}
}

/* ═══════════════════════════════════════════════════════════
   ЭКРАН ВЫБОРА УРОВНЯ

   Раньше эти стили лежали внутри одной игры, и когда такой же
   экран понадобился второй, он приехал без оформления. Теперь
   они общие: любая игра с выбором уровня получает его в
   фирменном виде.
   ═══════════════════════════════════════════════════════════ */
.start{text-align:center;padding:14px 4px}
.start h2{font:800 20px var(--head);color:var(--teal);margin:6px 0 4px}
.start p{color:#6B4B35;font-weight:700;font-size:14px;margin:0 0 18px}
.lvl{display:flex;flex-direction:column;gap:11px;text-align:left}
.lvl-btn{display:flex;align-items:center;gap:14px;width:100%;background:#fff;
  border:2px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;
  box-shadow:0 4px 0 #F0DDB8;transition:transform .1s,box-shadow .1s,border-color .15s;
  text-align:left;font-family:var(--body)}
.lvl-btn:hover{border-color:var(--honey)}
.lvl-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #F0DDB8}
.lvl-ic{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;font-size:26px;
  background:var(--honey-3);border:2px solid var(--honey);border-radius:14px}
.lvl-tx b{font:800 16px var(--head);color:var(--teal);display:block}
.lvl-tx span{font-size:13px;font-weight:700;color:#6B4B35}