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

*{box-sizing:border-box;}
[hidden]{display:none !important;}

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

.app{
  max-width:1000px;
  position:relative;
  z-index:1;              /* интерфейс поверх украшений темы */
  margin:0 auto;
  padding:10px 12px 28px;
}

/* ---------- Верхняя панель ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 2px 12px;
}
.brand{font-weight:800;font-size:clamp(17px,4.4vw,24px);letter-spacing:.2px;}
.topbtns{display:flex;gap:8px;}
.icon-btn{
  font-size:22px;line-height:1;
  width:46px;height:46px;border:none;border-radius:16px;
  background:#fff;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.icon-btn:hover{transform:translateY(-2px);}
.icon-btn:active{transform:translateY(1px) scale(.96);}
.icon-btn.off{filter:grayscale(1) opacity(.55);}

button:focus-visible,
.gap:focus-visible,
summary:focus-visible{
  outline:4px solid #6C63FF;
  outline-offset:3px;
}

/* ---------- Экраны ---------- */
.screen{display:none;}
.screen.active{display:block;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.card{
  background:var(--card);
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:clamp(14px,3.2vw,26px);
}

/* ---------- Старт ---------- */
.start-card{text-align:center;}
.start-emoji{font-size:clamp(48px,14vw,84px);line-height:1;margin-bottom:6px;}
.start-card h1{font-size:clamp(26px,7vw,40px);margin:.1em 0 .25em;}
.rules{font-size:clamp(17px,3.6vw,20px);line-height:1.5;margin:0 auto 18px;max-width:620px;}
.diff-title{font-weight:700;margin-bottom:10px;font-size:19px;}
.diff-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.diff-btn{
  flex:1 1 150px;max-width:220px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 10px;border:3px solid #EFE9FF;border-radius:22px;
  background:#FBF8FF;cursor:pointer;font-family:inherit;color:var(--text);
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.diff-btn:hover{transform:translateY(-3px);border-color:#D9CCFF;}
.diff-btn:active{transform:translateY(0) scale(.98);}
.diff-btn.sel{border-color:var(--accent);background:#FFF1EC;box-shadow:0 6px 16px rgba(255,122,89,.25);}
.d-emoji{font-size:34px;line-height:1;}
.d-name{font-weight:800;font-size:19px;}
.d-note{font-size:14px;opacity:.7;}

.big-btn{
  font-family:inherit;font-weight:800;font-size:clamp(19px,4.4vw,23px);color:#fff;
  background:linear-gradient(180deg,#FF9575,var(--accent));
  border:none;border-radius:22px;padding:15px 32px;cursor:pointer;
  box-shadow:0 8px 18px rgba(255,122,89,.4);
  transition:transform .12s ease,box-shadow .12s ease;
}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(255,122,89,.45);}
.big-btn:active{transform:translateY(2px) scale(.98);}
.big-btn.alt{background:linear-gradient(180deg,#7ED8F7,var(--accent2));box-shadow:0 8px 18px rgba(78,197,241,.4);}
.best-line{margin-top:14px;font-size:16px;opacity:.75;min-height:20px;}

/* ---------- Прогресс ---------- */
.progress-wrap{margin-bottom:10px;}
.progress-text{font-weight:700;font-size:17px;margin-bottom:6px;}
.progress-bar{height:14px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(46,42,79,.12);}
.progress-fill{height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--accent2),var(--ok));transition:width .35s ease;}

/* ---------- Совёнок ---------- */
.hero-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.hero-row.center{margin-top:8px;}
.hero-art{font-size:clamp(38px,9vw,54px);line-height:1;flex:0 0 auto;}
.hero-art.jump{animation:heroJump .55s ease;}
.hero-art.wiggle{animation:heroWiggle .55s ease;}
@keyframes heroJump{0%,100%{transform:translateY(0);}30%{transform:translateY(-16px) scale(1.08);}60%{transform:translateY(0);}80%{transform:translateY(-6px);}}
@keyframes heroWiggle{0%,100%{transform:rotate(0);}20%{transform:rotate(-9deg);}40%{transform:rotate(8deg);}60%{transform:rotate(-6deg);}80%{transform:rotate(4deg);}}
.bubble{
  position:relative;flex:1 1 auto;
  background:#FFF7EF;border:3px solid #FFE0CE;border-radius:20px;
  padding:12px 15px;font-size:clamp(16px,3.5vw,19px);line-height:1.4;min-height:28px;
}
.bubble::before{
  content:"";position:absolute;left:-13px;top:18px;
  border:8px solid transparent;border-right-color:#FFE0CE;
}
.bubble.ok{background:#EAFBF1;border-color:#B6EDCD;}
.bubble.err{background:#FFF0F2;border-color:#FFC9D0;}

/* ---------- Подсказка (счётчик гласных) ---------- */
.hint-line{
  background:#F2F8FF;border:2px dashed #B9DEF7;border-radius:16px;
  padding:9px 14px;text-align:center;font-size:clamp(15px,3.4vw,19px);font-weight:600;
  margin-bottom:12px;
}
.hint-line b{color:var(--err);}

/* ---------- Слово с разрезами ---------- */
.word-stage{
  user-select:none;-webkit-user-select:none;
  padding:8px 0 4px;
  min-height:clamp(90px,22vw,140px);
  display:flex;align-items:center;justify-content:center;
  overflow-x:auto;overflow-y:hidden; /* при «лишних» разрезах прокрутка, а не поломка вёрстки */
}
.word-row{
  margin:auto; /* центрирование без обрезки при горизонтальной прокрутке */
  display:flex;align-items:stretch;justify-content:center;
  font-size:44px; /* переопределяется из JS под длину слова */
  line-height:1;
}
.letter{
  flex:0 0 auto;
  width:1.05em;height:1.5em;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1em;
  border-radius:.18em;
  cursor:pointer;
  transition:transform .15s ease,color .15s ease;
}
.letter.vowel{color:var(--err);}
.letter:hover{transform:translateY(-3px);}

.gap{
  position:relative;
  font-size:1em;              /* важно: em внутри кнопки должен считаться от размера слова */
  width:.5em;height:1.5em;padding:0;margin:0;
  border:none;background:transparent;cursor:pointer;
  touch-action:manipulation;
  transition:width .22s ease;
  flex:0 0 auto;
}
/* увеличенная зона нажатия для пальцев (визуально ничего не меняет) */
.gap::after{content:"";position:absolute;top:0;bottom:0;left:-6px;right:-6px;}
.gap .scis{
  position:absolute;left:50%;top:-.30em;transform:translateX(-50%) scale(.6);
  font-size:.42em;opacity:0;transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;
}
.gap .line{
  position:absolute;left:50%;top:.12em;bottom:.12em;width:0;
  transform:translateX(-50%);
  border-left:.06em dashed #E0D8F5;  /* бледная пунктирная линия видна всегда */
  transition:border-color .15s ease;
}
.gap:hover .scis,.gap:focus-visible .scis{opacity:.55;transform:translateX(-50%) scale(1);}
.gap:hover .line,.gap:focus-visible .line{border-left-color:#B6A9E8;}

.gap.cut{width:1em;}
.gap.cut .line{
  border-left:.09em solid var(--accent2);
  box-shadow:0 0 0 .02em rgba(78,197,241,.25);
}
.gap.cut .scis{opacity:1;transform:translateX(-50%) scale(1.05);}
.gap.cut .line{animation:cutIn .3s ease;}
@keyframes cutIn{from{transform:translateX(-50%) scaleY(0);}to{transform:translateX(-50%) scaleY(1);}}

.gap.wrong .line{border-left-color:var(--err);}
.gap.wrong .scis{opacity:1;}
.gap.wrong{animation:shake .45s ease;}
.gap.missed .line{border-left:.09em solid var(--ok);}
.gap.missed .scis{opacity:.9;}

@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.word-row.shake{animation:shake .45s ease;}

/* ---------- Плитки слогов ---------- */
.tiles-row{
  margin:auto;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  font-size:40px;line-height:1;
}
.tile{
  padding:.16em .3em;border-radius:.28em;font-weight:800;font-size:1em;
  background:#EAFBF1;border:.06em solid #9FE7BE;color:var(--text);
  opacity:0;transform:scale(.5);
  animation:tilePop .35s ease forwards;
  transition:box-shadow .2s ease,background .2s ease;
}
.tile .vowel{color:var(--err);}
.tile.speaking{background:#FFF0D9;border-color:#FFC978;box-shadow:0 6px 16px rgba(255,160,60,.35);transform:scale(1.08);}
@keyframes tilePop{to{opacity:1;transform:scale(1);}}

/* ---------- Кнопки управления ---------- */
.controls{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;
}
.ctrl-btn{
  font-family:inherit;font-weight:800;font-size:clamp(16px,3.6vw,19px);
  border:none;border-radius:20px;padding:13px 22px;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#FF9575,var(--accent));
  box-shadow:0 6px 14px rgba(255,122,89,.35);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.ctrl-btn:hover{transform:translateY(-2px);}
.ctrl-btn:active{transform:translateY(2px) scale(.98);}
.ctrl-btn.ghost{
  background:#F4F1FF;color:var(--text);box-shadow:0 4px 10px rgba(46,42,79,.12);
}
.ctrl-btn.next{background:linear-gradient(180deg,#63E39C,var(--ok));box-shadow:0 6px 14px rgba(59,201,125,.4);}
.ctrl-btn[disabled]{opacity:.45;cursor:default;transform:none;}

/* ---------- Результаты ---------- */
.result-card{text-align:center;}
.result-card h2{font-size:clamp(24px,6vw,34px);margin:.1em 0 .3em;}
.stars{font-size:clamp(40px,11vw,64px);line-height:1.1;min-height:1.2em;}
.stars span{display:inline-block;opacity:0;transform:scale(.2) rotate(-40deg);animation:starPop .5s ease forwards;}
@keyframes starPop{60%{transform:scale(1.25) rotate(6deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
.score-line{font-size:clamp(18px,4.2vw,22px);font-weight:700;margin:6px 0 4px;}
.parents{
  text-align:left;background:#FAF8FF;border-radius:18px;padding:10px 14px;margin:16px 0;
}
.parents summary{cursor:pointer;font-weight:800;font-size:17px;padding:4px 0;}
.parent-body{font-size:16px;line-height:1.5;padding-top:8px;}
.parent-item{padding:8px 0;border-top:1px solid #EDE7FB;}
.parent-item b{color:var(--err);}
.parent-item .good{color:#189A5B;font-weight:700;}
.result-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- Узкие экраны ---------- */
@media (max-width:420px){
  .app{padding:8px 8px 22px;}
  .card{border-radius:20px;}
  .ctrl-btn{padding:12px 16px;}
  .hero-row{gap:6px;}
  .bubble{padding:10px 12px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

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