/* ===== Пиксель-художник — стили ===== */

:root{
  --accent:#FF7A59;
  --accent2:#4EC5F1;
  --ok:#3BC97D;
  --bad:#FF5A6E;
  --ink:#2E2A4F;
  --card:#FFFFFF;
  --shadow:0 6px 18px rgba(46,42,79,.16);
  /* фон и акцент темы — переопределяются из game.js при смене темы */
  --bg1:#FFF6E5; --bg2:#FFE3F1; --bg3:#E6F4FF;
  --theme-accent:#FF7A59;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  font-family: "Naukino Emoji", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:18px;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  transition:background .6s ease;
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
}

#app{
  max-width:760px;
  position:relative;
  z-index:1;              /* интерфейс поверх украшений темы */
  margin:0 auto;
  padding:56px 10px 32px; /* сверху — место для кнопок звука */
}

/* ---------- экраны ---------- */
.screen{ display:none; }
.screen.active{ display:flex; flex-direction:column; gap:9px; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.title{
  margin:6px 0 0;
  text-align:center;
  font-size:clamp(26px,6vw,40px);
  line-height:1.15;
  text-shadow:0 2px 0 #fff;
}
.sub{ margin:4px 0 0; text-align:center; font-size:clamp(19px,4vw,23px); }
.rules{ margin:0; text-align:center; font-size:17px; opacity:.85; }
.best{ margin:0; text-align:center; font-size:16px; opacity:.75; min-height:20px; }

/* ---------- совёнок ---------- */
.hero-row{ display:flex; align-items:center; gap:10px; }
.hero-art{
  font-size:clamp(36px,8.5vw,52px);
  line-height:1;
  flex:0 0 auto;
  transform-origin:50% 90%;
}
.hero-art.happy{ animation:jump .6s ease 2; }
.hero-art.sad{ animation:wobble .5s ease 2; }
@keyframes jump{ 0%,100%{transform:translateY(0)} 30%{transform:translateY(-16px) scale(1.06)} 60%{transform:translateY(0)} }
@keyframes wobble{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }

.bubble{
  position:relative;
  flex:1 1 auto;
  background:var(--card);
  border-radius:18px;
  padding:10px 13px;
  box-shadow:var(--shadow);
  font-size:16.5px;
  line-height:1.3;
  min-height:24px;
}
.bubble::before{
  content:"";
  position:absolute; left:-10px; top:22px;
  border:10px solid transparent;
  border-right-color:var(--card);
}

/* ---------- кнопки ---------- */
button{ font-family:inherit; cursor:pointer; }

.big-btn{
  border:none;
  border-radius:22px;
  padding:16px 22px;
  font-size:22px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(180deg,#FF9A7A,var(--accent));
  box-shadow:0 6px 0 #E05B3C, var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.big-btn:hover{ filter:brightness(1.05); }
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #E05B3C; }
.big-btn.alt{ background:linear-gradient(180deg,#7FD9F7,var(--accent2)); box-shadow:0 6px 0 #2A9CC6, var(--shadow); }
.big-btn.alt:active{ box-shadow:0 2px 0 #2A9CC6; }
.next-btn{
  align-self:center;
  min-width:220px;
  /* всегда на виду — не нужно скроллить до неё */
  position:fixed;
  left:50%;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:30;
  padding:14px 26px;
}
.next-btn:active{ transform:translate(-50%,4px); box-shadow:0 2px 0 #E05B3C; }
/* место под плавающей кнопкой, чтобы она не закрывала контент */
#scr-game.active{ padding-bottom:calc(46px + env(safe-area-inset-bottom, 0px)); }

.mini-btn, .icon-btn{
  border:none;
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow);
  font-size:22px;
  width:46px; height:46px;
  line-height:1;
  padding:0;
  transition:transform .08s ease;
}
.mini-btn:active, .icon-btn:active{ transform:scale(.93); }
.icon-btn.off{ opacity:.45; }

.corner-btns{
  position:fixed; top:10px; right:10px;
  display:flex; gap:8px; z-index:20;
}

:focus-visible{ outline:4px solid #7A5CFF; outline-offset:3px; }

/* ---------- выбор сложности ---------- */
.diff-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.diff-btn{
  border:4px solid transparent;
  border-radius:20px;
  background:var(--card);
  box-shadow:var(--shadow);
  padding:12px 10px;
  min-width:104px;
  font-size:30px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:transform .1s ease, border-color .15s ease;
}
.diff-btn span{ font-size:17px; font-weight:700; }
.diff-btn:hover{ transform:translateY(-3px); }
.diff-btn.sel{ border-color:var(--accent); background:#FFF1EC; }

/* ---------- верхняя панель ---------- */
.topbar{ display:flex; align-items:center; gap:10px; }
.progress-wrap{ flex:1 1 auto; }
.progress-label{ font-size:16px; font-weight:700; margin-bottom:4px; }
.progress-bar{ height:14px; border-radius:10px; background:#fff; box-shadow:inset 0 2px 5px rgba(46,42,79,.15); overflow:hidden; }
.progress-fill{ height:100%; width:0; border-radius:10px; background:linear-gradient(90deg,#FFC93C,var(--accent)); transition:width .35s ease; }

/* ---------- вопрос ---------- */
.question{
  margin:0;
  text-align:center;
  font-size:clamp(20px,5vw,29px);
  line-height:1.2;
  cursor:pointer;
}
.question:hover{ color:#0F5E86; }
.hintline{ margin:0; text-align:center; font-size:15px; line-height:1.25; opacity:.75; min-height:19px; }

/* ---------- сцена: сетка и коды строк ---------- */
.stage{
  background:var(--card);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:8px;
  display:flex;
  justify-content:center;
  user-select:none;
  -webkit-user-select:none;
}
.stage svg{
  width:100%;
  height:auto;
  max-height:48vh;
  display:block;
  overflow:visible;
  touch-action:none;    /* рисуем пальцем, а не листаем страницу */
}
.stage svg.won{ animation:winPop .6s ease; }
@keyframes winPop{ 0%{transform:scale(1)} 40%{transform:scale(1.05)} 100%{transform:scale(1)} }

.cell{ stroke:#DED9EF; stroke-width:2; }
.cell.filled{ stroke:#B4ADCE; }
.grid-frame{ fill:none; stroke:#8F87B5; stroke-width:3; pointer-events:none; }

/* код строки: цветной квадратик с числом клеток */
.chip{ stroke:#8F87B5; stroke-width:2; pointer-events:none; }
.chip-num{ font-family:inherit; font-size:17px; font-weight:800; text-anchor:middle; pointer-events:none; }

/* рамки строк: подсветка выбранной, отметка ошибки */
.rowmark{ fill:none; stroke-width:4; opacity:0; pointer-events:none; }
.rowmark.bad{ stroke:#FF2D6F; opacity:1; animation:rowShake .5s ease; }
.rowmark.good{ stroke:var(--ok); opacity:1; }
.rowmark.sel{ stroke:#7A5CFF; opacity:1; animation:rowPulse 1.6s ease-in-out infinite; }
@keyframes rowShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 60%{transform:translateX(7px)} }
@keyframes rowPulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

.rowhit{ fill:transparent; cursor:pointer; }
.rowhit:hover{ fill:rgba(122,92,255,.10); }
.rowhit:focus-visible{ fill:rgba(122,92,255,.18); outline:none; }
.paintable .cell{ cursor:crosshair; }

/* ---------- палитра ---------- */
.palette{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.pal-btn{
  width:54px; height:54px;
  border:4px solid #EDE9F8;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:0;
  font-size:24px;
  line-height:1;
  transition:transform .1s ease, border-color .15s ease;
}
.pal-btn:hover{ transform:translateY(-3px); }
.pal-btn.sel{ border-color:#7A5CFF; transform:translateY(-3px); }

/* ---------- варианты ответа (коды строк) ---------- */
.answers{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.opt{
  border:none;
  border-radius:20px;
  padding:10px 14px;
  background:var(--card);
  box-shadow:0 5px 0 #DCD6EE, var(--shadow);
  display:flex; align-items:center; gap:6px;
  transition:transform .08s ease, background .2s ease;
}
.opt:hover{ transform:translateY(-3px); }
.opt:active{ transform:translateY(3px); box-shadow:0 1px 0 #DCD6EE; }
.opt.good{ background:var(--ok); box-shadow:0 5px 0 #2AA463; }
.opt.bad{ background:var(--bad); box-shadow:0 5px 0 #D63C50; animation:shake .45s ease; }
.opt[disabled]{ opacity:.5; pointer-events:none; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 45%{transform:translateX(9px)} 70%{transform:translateX(-6px)} }

/* квадратик кода в вариантах ответа и в подсказках */
.hchip{
  width:36px; height:36px;
  border:2px solid #8F87B5;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:800;
}

/* ---------- инструменты ---------- */
.tools{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tool-btn{
  border:none; border-radius:18px;
  padding:12px 20px; font-size:19px; font-weight:800;
  color:var(--ink); background:var(--card); box-shadow:0 5px 0 #DCD6EE, var(--shadow);
}
.tool-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #DCD6EE; }
.tool-btn.go{ color:#fff; background:linear-gradient(180deg,#5FE0A0,var(--ok)); box-shadow:0 5px 0 #2AA463, var(--shadow); }

/* ---------- результаты ---------- */
.stars{ display:flex; justify-content:center; gap:8px; font-size:clamp(46px,12vw,72px); min-height:60px; }
.star{ opacity:0; transform:scale(.3); animation:starPop .5s ease forwards; }
@keyframes starPop{ to{ opacity:1; transform:scale(1);} }
.score{ text-align:center; font-size:22px; font-weight:700; margin:0; }
.parents{
  background:var(--card); border-radius:18px; box-shadow:var(--shadow);
  padding:10px 14px; font-size:16px;
}
.parents summary{ cursor:pointer; font-weight:700; font-size:18px; padding:4px 0; }
.parents ul{ margin:8px 0 4px; padding-left:20px; }
.parents li{ margin-bottom:8px; line-height:1.35; }
.end-btns{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.end-btns .big-btn{ width:100%; max-width:340px; }

.hidden{ display:none !important; }

@media (min-width:720px){
  body{ font-size:19px; }
  .end-btns{ flex-direction:row; justify-content:center; }
  .end-btns .big-btn{ width:auto; }
}

/* ---------- низкие экраны: всё в один экран, без скролла ---------- */
/* Порог был 700, а обычное окно ноутбука — 720: правила не включались там,
   где нужнее всего, и палитра с кнопкой «Готово» уходила за нижний край —
   закончить рисунок было нечем. */
@media (max-height:800px){
  #app{ padding-top:52px; }
  .screen.active{ gap:7px; }
  .stage svg{ max-height:34vh; }
  .hero-art{ font-size:clamp(30px,7vw,42px); }
  .bubble{ font-size:15.5px; padding:8px 11px; }
  .question{ font-size:clamp(18px,4.4vw,25px); }
  .pal-btn{ width:46px; height:46px; }
  .tool-btn{ padding:9px 16px; font-size:17px; }
  .next-btn{ padding:11px 22px; font-size:20px; }
  #scr-game.active{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ================================================================
   ОФОРМЛЕНИЕ РАУНДА (темы)
   Сами темы описаны в game.js (массив THEMES) — здесь только то,
   как выглядят фоновые украшения и табличка с названием темы.
   ================================================================ */

/* фоновый слой с украшениями темы: лежит под всем интерфейсом */
.theme-deco{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.theme-deco i{                      /* «гнездо»: только позиция */
  position:absolute; display:block;
  transform:translate(-50%,-50%);
  font-style:normal;
}
.theme-deco span{                   /* сам значок: только анимация */
  display:block;
  opacity:.45;
  will-change:transform;
  filter:drop-shadow(0 4px 10px rgba(46,42,79,.10));
}

@keyframes thFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes thBob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes thDrift{0%{transform:translateX(-5vw)}100%{transform:translateX(5vw)}}
@keyframes thTwinkle{0%,100%{transform:scale(1);opacity:.30}50%{transform:scale(1.18);opacity:.62}}
.th-float{animation:thFloat 5s ease-in-out infinite}
.th-bob{animation:thBob 4.4s ease-in-out infinite}
.th-drift{animation:thDrift 15s ease-in-out infinite alternate}
.th-drift2{animation:thDrift 21s ease-in-out infinite alternate-reverse}
.th-twinkle{animation:thTwinkle 3.4s ease-in-out infinite}

/* табличка «где мы сейчас» */
.theme-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 4px 12px rgba(46,42,79,.10);
  font-size:15px; font-weight:800; color:var(--text,#2E2A4F);
  white-space:nowrap; vertical-align:middle;
}
.theme-chip .th-ico{font-size:20px; line-height:1}
.theme-chip.is-new{animation:thPop .7s ease}
@keyframes thPop{0%{transform:scale(.7);opacity:0}55%{transform:scale(1.14)}100%{transform:scale(1)}}

@media (max-width:560px){
  .theme-chip .th-name{display:none}
  .theme-chip{padding:5px 9px}
  .theme-deco span{opacity:.32}
}
@media (prefers-reduced-motion:reduce){
  .theme-deco span{animation:none !important}
  .theme-chip.is-new{animation:none}
  .rowmark.sel{animation:none}
  .stage svg.won{animation:none}
}

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (docs/09-games.md), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. */
/* Место, которое кнопка занимает в левом верхнем углу. Игры, у которых там
   своя строка (счёт, прогресс), сдвигают её на эти величины: на широком
   экране вбок, на телефоне вниз — рядом с кнопкой строке уже не хватило бы
   ширины и она полезла бы под кнопки звука справа. */
:root{ --exit-space:124px; --exit-drop:0px; }
@media (max-width:640px){ :root{ --exit-space:0px; --exit-drop:54px; } }

.exit-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:46px; padding:0 16px; flex:none;
  border:none; border-radius:16px;
  background:#fff; color:#3D3455;
  font:inherit; font-size:16px; font-weight:800; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:0 3px 0 rgba(61,52,85,.12);
}
.exit-btn:hover{ background:#F2EFFF; }
.exit-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(61,52,85,.12); }
/* Вариант для игр без собственной верхней панели: тот же левый верхний угол,
   только сам по себе. Ниже модальных окон игры (у них z-index от 80). */
.exit-btn--float{ position:fixed; top:10px; left:10px; z-index:60; }
@media (max-width:480px){
  .exit-btn{ height:40px; padding:0 12px; font-size:14px; }
  .exit-btn--float{ top:6px; left:6px; }
}