/* ===== Ударение-ловушка — стили ===== */

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

*{box-sizing:border-box;}

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;
  background-attachment: fixed;
  min-height:100%;
  -webkit-text-size-adjust:100%;
}

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

/* ---------- Шапка ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;}
.logo-emoji{font-size:28px;}
.logo-text{font-size:clamp(17px,4.4vw,24px);}
.topbar-btns{display:flex;gap:8px;}

.icon-btn{
  font-size:22px;
  line-height:1;
  width:48px;height:48px;
  border:none;border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.icon-btn:hover{transform:translateY(-2px) scale(1.05);}
.icon-btn:active{transform:scale(.94);}
.icon-btn.off{opacity:.45;}

/* ---------- Общие блоки ---------- */
.screen.hidden,.hidden{display:none !important;}

.card{
  background:var(--card);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:clamp(16px,4vw,30px);
}

.title{
  margin:0 0 10px;
  font-size:clamp(26px,6.5vw,38px);
  text-align:center;
}

.big-btn{
  display:block;
  width:100%;
  max-width:340px;
  margin:16px auto 0;
  padding:16px 22px;
  font:inherit;
  font-size:clamp(19px,4.6vw,23px);
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,#FF9276,var(--accent));
  border:none;border-radius:22px;
  box-shadow:0 8px 0 #E05B3C, var(--shadow);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.big-btn:hover{transform:translateY(-2px);}
.big-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #E05B3C;}

.ghost-btn{
  display:block;
  width:100%;
  max-width:340px;
  margin:12px auto 0;
  padding:13px 20px;
  font:inherit;font-size:18px;font-weight:700;
  color:var(--text);
  background:#F1EFFA;
  border:none;border-radius:20px;
  cursor:pointer;
  transition:transform .12s ease,background .15s ease;
}
.ghost-btn:hover{background:#E6E2F7;transform:translateY(-2px);}
.ghost-btn:active{transform:scale(.97);}

button:focus-visible,
summary:focus-visible{
  outline:4px solid #7B61FF;
  outline-offset:3px;
}

/* ---------- Стартовый экран ---------- */
.start-card{text-align:center;}
.start-emoji{font-size:clamp(56px,15vw,84px);animation:heroIdle 3s ease-in-out infinite;}
.rules{
  font-size:clamp(16px,3.9vw,19px);
  line-height:1.5;
  margin:6px auto 18px;
  max-width:620px;
}
.pick-label{font-weight:800;font-size:19px;margin:0 0 10px;}

.diff-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.diff-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 6px;
  font:inherit;
  color:var(--text);
  background:#F6F3FF;
  border:4px solid transparent;
  border-radius:22px;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.diff-btn:hover{transform:translateY(-3px);background:#EFE9FF;}
.diff-btn:active{transform:scale(.96);}
.diff-btn.selected{border-color:var(--accent2);background:#E4F6FF;}
.diff-emoji{font-size:30px;}
.diff-name{font-weight:800;font-size:clamp(14px,3.6vw,18px);}
.diff-hint{font-size:12px;opacity:.7;line-height:1.2;}

.best-line{text-align:center;margin:14px 0 0;font-size:16px;opacity:.75;min-height:20px;}

/* ---------- Прогресс ---------- */
.progress-wrap{margin-bottom:12px;}
.progress-top{
  display:flex;justify-content:space-between;align-items:center;
  font-weight:800;font-size:clamp(15px,3.8vw,18px);
  margin-bottom:6px;
}
.score-text{color:#C98A00;}
.progress-bar{
  height:14px;border-radius:12px;
  background:#FFFFFFAA;
  overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(46,42,79,.12);
}
.progress-fill{
  height:100%;width:0;
  border-radius:12px;
  background:linear-gradient(90deg,var(--accent2),var(--ok));
  transition:width .35s ease;
}

/* ---------- Игровое поле ---------- */
.game-card{text-align:center;}
.task-label{
  margin:0 0 14px;
  font-size:clamp(18px,4.4vw,22px);
  font-weight:700;
  opacity:.8;
}

.word-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(6px,1.8vw,12px);
  margin:26px 0 22px;
  min-height:clamp(80px,20vw,120px);
}

/* Плитка слога */
.syl{
  position:relative;
  display:flex;
  align-items:center;
  padding:clamp(10px,2.6vw,18px) clamp(10px,3vw,20px);
  font:inherit;
  font-size:clamp(26px,8.4vw,52px);
  font-weight:800;
  letter-spacing:1px;
  color:#fff;
  border:none;
  border-radius:20px;
  cursor:pointer;
  box-shadow:0 7px 0 rgba(0,0,0,.16), var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.syl:hover{transform:translateY(-5px) rotate(-2deg);filter:brightness(1.08);}
.syl:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.16);}
.syl[disabled]{cursor:default;}
/* Длинные слова — мельче плитки, чтобы слово влезало в одну строку на телефоне */
.word-row.n4 .syl{font-size:clamp(21px,6.2vw,44px);}
.word-row.n5 .syl,
.word-row.n6 .syl{
  font-size:clamp(17px,5vw,38px);
  padding-left:clamp(7px,2vw,16px);
  padding-right:clamp(7px,2vw,16px);
  letter-spacing:0;
}

.syl.c0{background:linear-gradient(180deg,#7FD8FF,#4EC5F1);}
.syl.c1{background:linear-gradient(180deg,#FFA98F,#FF7A59);}
.syl.c2{background:linear-gradient(180deg,#9FE6B8,#3BC97D);}
.syl.c3{background:linear-gradient(180deg,#C6A9FF,#8C6BF2);}
.syl.c4{background:linear-gradient(180deg,#FFD86B,#F5B301);}

.syl.wrong{
  background:linear-gradient(180deg,#FF8E9C,var(--bad)) !important;
  animation:shake .45s ease;
}
.syl.right{
  background:linear-gradient(180deg,#8FE9B6,var(--ok)) !important;
  animation:pop .5s ease;
}
.syl.faded{opacity:.42;filter:grayscale(.35);}

.ltr{position:relative;display:inline-block;}

/* Значок ударения над гласной */
.accent{
  position:absolute;
  left:50%;
  top:-.30em;
  width:.13em;
  height:.34em;
  border-radius:.08em;
  background:#FFF3C4;
  box-shadow:0 0 10px rgba(255,220,120,.95);
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(-25deg);
  animation:accentDrop .5s cubic-bezier(.2,1.5,.5,1);
}
.accent.dark{background:#2E2A4F;box-shadow:none;}

.listen-btn{
  font:inherit;font-size:clamp(16px,4vw,19px);font-weight:800;
  color:#12657F;
  background:#E4F6FF;
  border:none;border-radius:20px;
  padding:13px 22px;
  cursor:pointer;
  transition:transform .12s ease,background .15s ease;
}
.listen-btn:hover{background:#CFEEFF;transform:translateY(-2px);}
.listen-btn:active{transform:scale(.96);}

/* Панель с ответом */
.reveal{
  margin-top:20px;
  padding-top:18px;
  border-top:3px dashed #EDE8FB;
  animation:fadeUp .35s ease;
}
.reveal-word{
  font-size:clamp(28px,8vw,54px);
  font-weight:800;
  letter-spacing:1px;
  color:var(--text);
  margin-bottom:10px;
  cursor:pointer;          /* клик по слову — озвучка */
  overflow-wrap:anywhere;
}
.reveal-word:hover{color:var(--accent);}
.reveal-tip{
  font-size:clamp(15px,3.9vw,19px);
  line-height:1.5;
  margin:0 auto;
  max-width:640px;
  background:#FFF8E2;
  border-radius:18px;
  padding:12px 16px;
}

/* ---------- Совёнок ---------- */
.hero-box{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-top:16px;
}
.hero-inline{justify-content:center;margin-top:18px;}
.hero-art{
  font-size:clamp(44px,11vw,64px);
  line-height:1;
  flex:0 0 auto;
  animation:heroIdle 3s ease-in-out infinite;
}
.hero-art.happy{animation:heroJump .6s ease 2;}
.hero-art.sad{animation:heroWobble .6s ease 2;}

.bubble{
  position:relative;
  flex:1 1 auto;
  background:var(--card);
  border-radius:22px 22px 6px 22px;
  padding:12px 16px;
  font-size:clamp(15px,3.8vw,18px);
  line-height:1.45;
  box-shadow:var(--shadow);
  min-height:24px;
}
.bubble.ok{background:#E7FBF0;}
.bubble.bad{background:#FFEFF1;}

/* ---------- Звёздный салют ---------- */
.burst-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:50;
}
.burst-star{
  position:absolute;
  font-size:64px;
  transform:translate(-50%,-50%);
  animation:starBurst 1.1s ease-out forwards;
  filter:drop-shadow(0 0 14px rgba(255,193,46,.9));
}
.spark{
  position:absolute;
  font-size:20px;
  transform:translate(-50%,-50%);
  animation:sparkFly .9s ease-out forwards;
}
.fly-star{
  position:fixed;
  font-size:34px;
  z-index:60;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:left .8s cubic-bezier(.3,-0.2,.5,1), top .8s cubic-bezier(.3,-0.2,.5,1), opacity .8s ease, font-size .8s ease;
}

/* ---------- Результаты ---------- */
.result-card{text-align:center;}
.stars-row{
  display:flex;justify-content:center;gap:10px;
  font-size:clamp(46px,13vw,72px);
  margin:8px 0 6px;
  min-height:1.1em;
}
.stars-row span{opacity:0;animation:starIn .6s ease forwards;}
.stars-row .dim{filter:grayscale(1);opacity:.3;animation:none;}
.result-score{font-size:clamp(18px,4.6vw,22px);font-weight:800;margin:4px 0 0;}

.parents{
  margin:20px auto 0;
  text-align:left;
  background:#F7F5FF;
  border-radius:20px;
  padding:12px 16px;
  max-width:640px;
}
.parents summary{
  cursor:pointer;
  font-weight:800;
  font-size:17px;
  list-style:none;
}
.parents summary::-webkit-details-marker{display:none;}
.parents-body{margin-top:10px;font-size:16px;line-height:1.55;}
.parents-body ul{margin:6px 0 0;padding-left:20px;}
.parents-body li{margin-bottom:8px;}
.parents-body .child{color:var(--bad);font-weight:700;}
.parents-body .corr{color:#1F9D5C;font-weight:700;}

.result-btns{margin-top:6px;}

/* ---------- Анимации ---------- */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(-9px) rotate(-3deg);}
  30%{transform:translateX(9px) rotate(3deg);}
  45%{transform:translateX(-7px) rotate(-2deg);}
  60%{transform:translateX(7px) rotate(2deg);}
  80%{transform:translateX(-3px);}
}
@keyframes pop{
  0%{transform:scale(1);}
  45%{transform:scale(1.18) rotate(-3deg);}
  100%{transform:scale(1);}
}
@keyframes accentDrop{
  0%{opacity:0;transform:translateX(-50%) translateY(-26px) rotate(-25deg) scale(1.9);}
  60%{opacity:1;transform:translateX(-50%) translateY(3px) rotate(-25deg) scale(1);}
  100%{opacity:1;transform:translateX(-50%) translateY(0) rotate(-25deg) scale(1);}
}
@keyframes starBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0deg);}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.5) rotate(200deg);}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(340deg);}
  100%{opacity:0;transform:translate(-50%,-140%) scale(.5) rotate(420deg);}
}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.4);}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1);}
}
@keyframes starIn{
  0%{opacity:0;transform:scale(0) rotate(-140deg);}
  70%{opacity:1;transform:scale(1.25) rotate(12deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}
@keyframes heroIdle{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-5px) rotate(2deg);}
}
@keyframes heroJump{
  0%,100%{transform:translateY(0) scale(1);}
  30%{transform:translateY(-20px) scale(1.12);}
  60%{transform:translateY(0) scale(.96);}
}
@keyframes heroWobble{
  0%,100%{transform:rotate(0);}
  25%{transform:rotate(-13deg);}
  75%{transform:rotate(13deg);}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Адаптив ---------- */
@media (max-width:420px){
  .app{padding:10px 10px 30px;}
  .card{border-radius:22px;}
  .diff-row{gap:6px;}
  .diff-btn{padding:10px 3px;border-width:3px;border-radius:18px;}
  .diff-emoji{font-size:26px;}
  .diff-hint{display:none;}
  .word-row{gap:6px;margin:18px 0 16px;}
  .syl{border-radius:16px;padding:9px 9px;}
  .icon-btn{width:44px;height:44px;font-size:20px;}
}

@media (min-width:900px){
  .word-row{margin:36px 0 28px;}
  .hero-box{max-width:820px;margin-left:auto;margin-right:auto;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !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; }
}