/* ===== Фигуры-конструктор — стили ===== */

: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; }

/* ---------- сцена ---------- */
.stage{
  background:var(--card);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:6px;
  display:flex;
  justify-content:center;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.stage svg{
  width:100%;
  height:auto;
  max-height:46vh;
  display:block;
  overflow:visible;
}

/* подсветка найденных фигур */
.mk{
  fill:rgba(255,45,111,.28);
  stroke:#FF2D6F;
  stroke-width:6;
  stroke-linejoin:round;
  opacity:0;
  pointer-events:none;
}
.mk.on{ animation:popMark .32s ease forwards; }
.mk.done{ opacity:.30; fill:rgba(255,45,111,.10); stroke-width:4; }
@keyframes popMark{
  0%{ opacity:0; transform:scale(1.12); transform-origin:center; }
  100%{ opacity:1; transform:scale(1); }
}
.mk-count{
  font-size:52px; font-weight:900; fill:#FF2D6F;
  paint-order:stroke; stroke:#fff; stroke-width:8; stroke-linejoin:round;
}

/* ---------- детали конструктора ---------- */
.piece{ cursor:grab; touch-action:none; }
.piece:active{ cursor:grabbing; }
.piece .body{ stroke:#2E2A4F; stroke-width:4; stroke-linejoin:round; }
.piece.sel .body{ stroke:#7A5CFF; stroke-width:7; }
.piece.placed{ cursor:default; }
/* трясём внутреннюю форму, а не саму группу: у группы свой transform-атрибут */
.piece.wrong .body{ animation:shakeP .45s ease; }
@keyframes shakeP{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6px,0)} 50%{transform:translate(6px,0)} 80%{transform:translate(-4px,0)} }
.slotShadow{ fill:#CFCADF; }
.slotDash{ fill:none; stroke:#8F87B5; stroke-width:3; stroke-dasharray:9 7; }
/* Невидимые цели: по ним ставят деталь нажатием, не перетаскивая. */
.slotTap{ fill:#fff; fill-opacity:0; pointer-events:all; cursor:pointer; }
.slotDone{ fill:none; stroke:#3BC97D; stroke-width:4; opacity:.6; }
.trayLine{ stroke:#E4DFF2; stroke-width:3; stroke-dasharray:6 8; }
.trayLabel{ fill:#8F87B5; font-size:20px; font-weight:700; }

/* ---------- варианты ответа ---------- */
.answers{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.opt{
  border:none;
  border-radius:20px;
  min-width:78px;
  padding:14px 18px;
  font-size:28px;
  font-weight:800;
  color:var(--ink);
  background:var(--card);
  box-shadow:0 5px 0 #DCD6EE, var(--shadow);
  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); color:#fff; box-shadow:0 5px 0 #2AA463; }
.opt.bad{ background:var(--bad); color:#fff; 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)} }

/* ---------- клавиатура (сложный уровень) ---------- */
.keypad{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.numview{
  min-width:150px; text-align:center;
  font-size:30px; font-weight:900;
  background:var(--card); border-radius:16px;
  padding:5px 20px; box-shadow:var(--shadow);
  letter-spacing:2px;
}
.numview.bad{ background:var(--bad); color:#fff; animation:shake .45s ease; }
.numview.good{ background:var(--ok); color:#fff; }
.keys{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; width:100%; max-width:420px; }
.key{
  border:none; border-radius:16px; padding:10px 0;
  font-size:23px; font-weight:800; color:var(--ink);
  background:var(--card); box-shadow:0 4px 0 #DCD6EE;
}
.key:active{ transform:translateY(3px); box-shadow:0 1px 0 #DCD6EE; }
.key.ok{ background:var(--ok); color:#fff; box-shadow:0 4px 0 #2AA463; }

/* ---------- инструменты сборки ---------- */
.tools{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tool-btn{
  border:none; border-radius:18px;
  padding:10px 16px; font-size:18px; font-weight:700;
  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-hint{ font-size:14px; line-height:1.25; opacity:.75; text-align:center; width:100%; margin:0; }

/* ---------- результаты ---------- */
.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:28vh; }
  #scr-game.is-build .stage svg{ max-height:46vh; }
  .hero-art{ font-size:clamp(30px,7vw,42px); }
  .bubble{ font-size:15.5px; padding:8px 11px; }
  .question{ font-size:clamp(18px,4.4vw,25px); }
  .opt{ padding:10px 14px; font-size:24px; min-width:66px; }
  .next-btn{ padding:11px 22px; font-size:20px; }
  /* Под плавающей «Дальше» лежит ряд кнопок-подсказок: без этого запаса
     «Показать фигуры ещё раз» оказывалась и под сгибом, и под самой
     кнопкой — нажать её было нечем. */
  #scr-game.active{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  .stage svg{ max-height:24vh; }
  #scr-game.is-build .stage svg{ max-height:38vh; }
  .tool-btn{ padding:8px 12px; font-size:14px; }
}

/* ================================================================
   ОФОРМЛЕНИЕ РАУНДА (темы)
   Сами темы описаны в 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}
}

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (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; }
}