/* ===== Поезд морфем — стили ===== */
: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;
  /* цвет вагона: у нераскрытого нейтральный, у раскрытого — цвет морфемы */
  --wg:#C8C0E0; --wg-soft:#F6F4FF;
}

*{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,
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(40px,11vw,68px);line-height:1;margin-bottom:6px;letter-spacing:-.08em;}
.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 16px;max-width:640px;}

/* полоска обозначений: как выглядят вагоны разных частей слова */
.legend{
  display:flex;flex-wrap:wrap;gap:clamp(8px,2.4vw,18px);
  justify-content:center;align-items:flex-end;
  margin:0 auto 20px;font-size:20px;
}
.lg-item{padding-bottom:.4em;}

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

/* ---------- Строка задания ---------- */
.task-title{
  text-align:center;font-weight:700;
  font-size:clamp(17px,3.9vw,22px);line-height:1.35;
  margin:2px 0 10px;
}
.task-title b{color:var(--accent);}

/* ---------- Сцена ---------- */
.stage{
  user-select:none;-webkit-user-select:none;
  min-height:clamp(150px,34vw,220px);
  padding:6px 0 2px;
}

/* ================= ВАГОНЫ =================
   Слово в игре — состав: у каждого вагона кузов, колёса и место
   под значок морфемы. Размер задаётся одним font-size на составе
   (его считает fitTrain), всё внутри — в em. */
.train,.cut-train{
  display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  gap:0 .12em;
  font-size:34px;line-height:1;
  padding:.9em 0 .5em;
}
.loco{
  font-size:1.5em;line-height:1;margin-right:.05em;
  transform:translateY(.06em);
  filter:drop-shadow(0 4px 8px rgba(46,42,79,.18));
}

.wagon{
  position:relative;flex:0 0 auto;
  margin-bottom:.34em;      /* место под колёса */
}
.wg-body{
  position:relative;
  min-width:.9em;
  padding:.22em .3em;
  border:.075em solid var(--wg);
  border-radius:.28em .28em .12em .12em;
  background:var(--wg-soft);
  box-shadow:0 .1em 0 rgba(46,42,79,.10);
  transition:background .25s ease,border-color .25s ease;
}
.wg-text{
  display:inline-block;
  font-weight:800;font-size:1em;letter-spacing:.01em;
  color:var(--text);white-space:nowrap;
}
/* окончание обводят рамкой вместе с буквами, соединительную гласную — кружком
   (так чертят в тетради, docs/15-razbor.md) */
.wg-text.boxed{border:.06em solid var(--wg);padding:0 .08em;min-width:.5em;text-align:center;}
.wg-text.circled{border:.06em solid var(--wg);border-radius:50%;padding:0 .16em;}
.wg-text.dashed{border-style:dashed;}
.wagon.zero .wg-text{min-width:.6em;height:1em;}

/* Значок морфемы над кузовом: приставка, корень, суффикс.

   Ширина задана числом, а не парой left/right. `<svg>` для браузера
   картинка: у абсолютно позиционированной картинки с `width:auto`
   правый край не растягивает её, а игнорируется — ширина берётся
   из пропорций поля (100 к 12), то есть всегда 2.83em. Значок над
   «к» выходил такой же длины, как над «город», и дуги соседних
   вагонов налезали друг на друга. */
.wg-mark{
  position:absolute;left:.1em;top:-.42em;
  width:calc(100% - .2em);height:.34em;
  overflow:visible;pointer-events:none;
}
.wg-cap{
  margin-top:.42em;text-align:center;
  font-size:.34em;font-weight:700;line-height:1.15;color:var(--wg);
  white-space:nowrap;
}

/* колёса */
.wg-wheels{
  position:absolute;left:.18em;right:.18em;bottom:-.3em;
  display:flex;justify-content:space-between;pointer-events:none;
}
.wg-wheels i{
  display:block;width:.3em;height:.3em;border-radius:50%;
  background:#6E6790;box-shadow:inset 0 0 0 .06em #fff;
}

.wagon.roll-in{opacity:0;transform:translateX(1.2em);animation:rollIn .45s ease forwards;}
@keyframes rollIn{to{opacity:1;transform:none;}}

/* ---------- «Расцепи вагоны» ---------- */
.cut-train{overflow-x:auto;overflow-y:hidden;}
.cut-wagon .wg-text{display:inline-flex;align-items:center;}
.letter{display:inline-block;}
/* Кнопка своего размера букв не наследует: без font-size:inherit её em
   считался от 13px браузера, и место разреза оставалось узкой щелью
   в шесть пикселей независимо от того, как крупно едет состав. */
.hitch{
  position:relative;
  display:inline-block;
  font-size:inherit;
  width:.34em;height:1em;padding:0;margin:0;
  border:none;background:transparent;cursor:pointer;
  touch-action:manipulation;
}
/* увеличенная зона нажатия для пальца — на вид ничего не меняет */
.hitch::after{content:"";position:absolute;top:-.3em;bottom:-.3em;left:-.1em;right:-.1em;}
/* Линия разреза. Тонкий пунктир из border-left был почти не виден, и
   ребёнок не понимал, куда нажать в первом задании: теперь это заметная
   штриховка во всю высоту кузова, а штрихи заданы градиентом — их размер
   растёт вместе с составом, а не остаётся в пикселях. */
.hitch-line{
  position:absolute;left:50%;top:-.26em;bottom:-.26em;width:.07em;
  transform:translateX(-50%);
  border-radius:.04em;
  background:repeating-linear-gradient(
    to bottom,
    #8F80CE 0 .14em,
    transparent .14em .24em
  );
  transition:transform .15s ease,background .15s ease;
}
.hitch:hover .hitch-line,.hitch:focus-visible .hitch-line{
  transform:translateX(-50%) scaleX(1.6);
  background:repeating-linear-gradient(
    to bottom,
    var(--accent) 0 .14em,
    transparent .14em .24em
  );
}

/* та же беда, что у .hitch: без наследования размера сцепка между
   вагонами оставалась планкой в пять пикселей — её не было видно */
.coupler{
  position:relative;flex:0 0 auto;
  font-size:inherit;
  width:.5em;height:1.6em;margin-bottom:.34em;padding:0;
  border:none;background:transparent;cursor:pointer;
  touch-action:manipulation;
}
.coupler::after{content:"";position:absolute;inset:-.2em;}
/* планка сцепки идёт понизу, на уровне колёс: посередине она читалась
   бы как дефис в слове, а не как крючок между вагонами */
.cp-bar{
  position:absolute;left:.06em;right:.06em;bottom:.1em;height:.1em;
  border-radius:.05em;
  background:#8A80B4;
  box-shadow:0 0 0 .04em rgba(255,255,255,.7);
  animation:cpIn .25s ease;
}
.coupler:hover .cp-bar{background:var(--err);}
@keyframes cpIn{from{transform:scaleX(.2);}to{transform:none;}}

/* ---------- «Кто в вагоне» ---------- */
.wagon.ask .wg-body{
  border-color:var(--accent);background:#FFF3EC;
  animation:askPulse 1.5s ease-in-out infinite;
}
@keyframes askPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,89,.35);}50%{box-shadow:0 0 0 .16em rgba(255,122,89,.22);}}
.wg-flag{
  position:absolute;left:50%;top:-.9em;transform:translateX(-50%);
  font-size:.46em;font-weight:800;color:#fff;
  background:var(--accent);border-radius:.5em;
  padding:.05em .4em;
  box-shadow:0 .1em .3em rgba(255,122,89,.5);
}

.answers{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;
}
.ans-btn{
  flex:0 1 auto;min-width:132px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 16px 10px;
  border:3px solid var(--wg);border-radius:18px;
  background:var(--wg-soft);cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:800;color:var(--text);
  transition:transform .12s ease,box-shadow .12s ease;
}
.ans-btn:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(46,42,79,.14);}
.ans-btn:active{transform:translateY(1px) scale(.98);}
.ans-btn.wrong{animation:shake .45s ease;border-color:var(--err);}
.ans-mark{display:block;width:54px;height:18px;}
.ans-mark svg{width:100%;height:100%;overflow:visible;}
.mk-box{display:block;width:34px;height:18px;margin:0 auto;border:2px solid var(--wg);}
.mk-circle{display:block;width:26px;height:18px;margin:0 auto;border:2px solid var(--wg);border-radius:50%;}

/* ---------- «Собери состав» ---------- */
.slot{
  flex:0 0 auto;
  min-width:2.4em;min-height:2em;
  margin-bottom:.34em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:.075em dashed var(--wg);border-radius:.28em;
  background:rgba(255,255,255,.6);
  padding:.14em .2em;
}
.slot .wagon{margin-bottom:0;}
.slot .wg-wheels{display:none;}
.slot-mark{width:1.7em;height:.55em;}
.slot-mark svg{width:100%;height:100%;overflow:visible;}
.slot-mark .mk-box{width:1.1em;height:.5em;border-width:.05em;}
.slot-mark .mk-circle{width:.8em;height:.5em;border-width:.05em;}
.slot-name{font-size:.34em;font-weight:700;color:var(--wg);margin-top:.7em;white-space:nowrap;}
.wagon.placed{cursor:pointer;}

.depot-box{
  margin-top:12px;padding:10px 12px 16px;
  background:#F7F5FF;border-radius:20px;
}
.depot-title{font-size:15px;font-weight:800;opacity:.6;text-align:center;margin-bottom:10px;}
.depot{
  display:flex;flex-wrap:wrap;gap:14px .8em;justify-content:center;
  font-size:clamp(22px,5.4vw,34px);line-height:1;
}
.depot .wagon{cursor:pointer;transition:transform .12s ease;}
.depot .wagon:hover{transform:translateY(-4px);}
.depot .wagon:active{transform:translateY(1px) scale(.97);}

/* ---------- «Лишний вагон» ---------- */
.cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;max-width:620px;margin:8px auto 0;
}
.word-card{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:16px 12px;border:3px solid #E4DEFA;border-radius:20px;
  background:#FBF9FF;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:clamp(18px,4.6vw,24px);color:var(--text);
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.word-card:hover{transform:translateY(-3px);border-color:#C9BCF5;}
.word-card:active{transform:translateY(1px) scale(.98);}
.wc-loco{font-size:1.1em;}
.word-card.wrong{animation:shake .45s ease;border-color:var(--err);}
.word-card.dimmed{opacity:.55;}
.word-card.is-odd{border-color:var(--ok);background:#EAFBF1;opacity:1;}
.word-card.is-ok{opacity:.6;}
.word-card[disabled]{cursor:default;}

/* пояснение про нулевое окончание */
.zero-note{
  margin:10px auto 0;max-width:560px;text-align:center;
  background:#F4F0FF;border:2px dashed #C9BCF5;border-radius:16px;
  padding:9px 14px;font-size:clamp(15px,3.3vw,17px);font-weight:600;
}

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

/* ---------- Кнопки управления ---------- */
.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;}
  .ans-btn{min-width:0;flex:1 1 44%;padding:10px 8px 8px;font-size:15px;}
  .cards{gap:9px;}
}

@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;
  margin-left:10px;
}
.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), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. */
.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); }
@media (max-width:480px){
  .exit-btn{ height:40px; padding:0 12px; font-size:14px; }
  .brand{font-size:16px;}
}