/* ===== Машина времени (английский, Past Simple) — общий стиль детских игр ===== */

:root{
  --accent: #FF7A59;
  --accent2: #4EC5F1;
  --ok: #3BC97D;
  --bad: #FF5A6E;
  --text: #2E2A4F;
  --shadow: 0 8px 18px rgba(46,42,79,.14);
  --radius: 20px;
  /* фон и акцент комнаты — переопределяются из game.js при смене темы */
  --bg1:#FFF6E5; --bg2:#FFE3F1; --bg3:#E6F4FF;
  --theme-accent:#FF7A59;
  /* выбор — свой цвет, не зелёный и не красный: у «Эры динозавров»
     акцент темы зелёный, и выбранная деталь читалась как «верно» */
  --vybor: #6A5AE0;
  /* цвета машины — тоже из темы раунда */
  --m-korpus: #6A5AE0; --m-ten: #453A9E; --m-ekran: #15123A; --m-svet: #8CF7E1; --m-ruchka: #FF7A59;
}

*{ box-sizing: border-box; }

html, body{ margin: 0; padding: 0; min-height: 100%; }

body{
  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;
  padding: 10px 10px 20px;
  -webkit-text-size-adjust: 100%;
}

.hidden{ display: none !important; }

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

/* ---------- Общие элементы ---------- */

.title{
  font-size: clamp(26px, 6vw, 40px);
  text-align: center;
  margin: 8px 0 4px;
  color: var(--theme-accent);
  text-shadow: 0 2px 0 #fff;
}
.subtitle{
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(17px, 3.6vw, 22px);
  color: #6b6590;
}
.rules{
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  font-size: clamp(16px, 3.4vw, 19px);
  line-height: 1.45;
  margin: 0 0 18px;
}
.pick-title{
  font-size: clamp(18px, 4vw, 23px);
  margin: 16px 0 8px;
  text-align: center;
}
.picker{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.pick-btn{
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 150px;
  padding: 12px 16px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s, border-color .15s, background .15s;
}
.pick-btn b{ font-size: clamp(17px, 3.8vw, 21px); }
.pick-btn small{ font-size: 14px; color: #6b6590; }
.pick-btn:hover{ transform: translateY(-2px); }
.pick-btn:active{ transform: translateY(1px) scale(.98); }
.pick-btn.selected{ border-color: var(--accent); background: #FFF0EB; }

.big-btn{
  display: block;
  margin: 22px auto 0;
  font: inherit;
  font-weight: 800;
  font-size: clamp(19px, 4.4vw, 25px);
  padding: 15px 34px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(180deg, #FF9776, var(--accent));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 0 #e05f41, var(--shadow);
  transition: transform .1s, box-shadow .1s;
}
.big-btn:hover{ filter: brightness(1.05); }
.big-btn:active{ transform: translateY(5px); box-shadow: 0 3px 0 #e05f41; }
.big-btn-2{
  background: linear-gradient(180deg, #7BD8F6, var(--accent2));
  box-shadow: 0 8px 0 #2e9dc6, var(--shadow);
}
.big-btn-2:active{ box-shadow: 0 3px 0 #2e9dc6; }

.link-btn{
  display: block;
  margin: 12px auto 0;
  font: inherit;
  font-size: 17px;
  background: none;
  border: none;
  color: #6b6590;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 12px;
}
.link-btn:hover{ color: var(--accent); }

.best-line{ text-align: center; margin-top: 16px; color: #6b6590; font-size: 16px; }

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

/* ---------- Кнопки звука ---------- */

.audio-panel{
  position: fixed;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  z-index: 30;
}
.icon-btn{
  width: 46px;
  height: 46px;
  font-size: 22px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s;
}
.icon-btn:hover{ transform: scale(1.08); }
.icon-btn.off{ opacity: .45; }

@media (max-width: 760px){
  .screen > .title:first-child{ margin-top: 52px; }
}

/* ---------- HUD ---------- */

.hud{ margin: 6px 0 8px; }
.hud-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 100px 0 var(--exit-space);
}
@media (max-width: 640px){
  .hud-row{ padding: 0; margin-top: var(--exit-drop); }
}
.hud-chip{
  background: #fff;
  border-radius: 16px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: clamp(15px, 3.4vw, 19px);
  box-shadow: var(--shadow);
}
.progress{
  height: 12px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(46,42,79,.12);
}
.progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent2), var(--ok));
  border-radius: 10px;
  transition: width .35s ease;
}

/* ---------- Задание ---------- */

.zadanie{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 14px;
  margin-bottom: 8px;
  text-align: center;
}
.z-row{ display: flex; align-items: center; justify-content: center; gap: 10px; }
.z-text{
  margin: 0;
  font-size: clamp(21px, 5vw, 28px);
  font-weight: 800;
  color: var(--text);
}
.z-hint{ margin: 4px 0 0; font-size: clamp(14px, 3.2vw, 16px); color: #6b6590; }
.say-btn{
  flex: none;
  width: 42px; height: 42px;
  border: none; border-radius: 50%;
  background: #EEF7FF;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(46,42,79,.12);
}
.say-btn:active{ transform: translateY(2px); }

/* ---------- Предложение про сегодня ---------- */

.z-vid{
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b6590;
}
.vremya-slovo{
  background: none;
  color: var(--theme-accent);
  border-bottom: 3px solid var(--theme-accent);
  padding: 0 2px;
}

/* ---------- Машина времени ---------- */

.mashina{
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--m-korpus), var(--m-ten));
  border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(0,0,0,.18), var(--shadow);
  padding: 8px 10px;
  margin-bottom: 8px;
  color: #fff;
}
.mashina-art{ flex: 0 0 auto; width: clamp(56px, 13vw, 96px); height: auto; }
.sh-zub{ fill: none; stroke: var(--m-svet); stroke-width: 7; stroke-dasharray: 5 4; opacity: .8; }
.sh-telo{ fill: var(--m-ten); stroke: var(--m-svet); stroke-width: 2; }
.sh-os{ fill: var(--m-ruchka); }
.lampa{ fill: var(--m-ruchka); }
.shesterenka{ transform-box: fill-box; transform-origin: center; }
.mashina.v-proshlom .sh-1{ animation: krutNazad 1.1s ease-out; }
.mashina.v-proshlom .sh-2{ animation: krutVpered 1.1s ease-out; }
.mashina.v-proshlom .lampa{ fill: var(--m-svet); }
@keyframes krutNazad{ from{ transform: rotate(0); } to{ transform: rotate(-360deg); } }
@keyframes krutVpered{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

.ekran{
  flex: 1 1 auto;
  min-width: 0;
  background: var(--m-ekran);
  border-radius: 14px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.45);
  padding: 6px 10px;
  text-align: center;
}
.ekran-mesto{ display: block; font-size: 13px; color: var(--m-svet); opacity: .75; }
.ekran-stroka{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px;
  font-weight: 800;
  font-size: clamp(17px, 4.2vw, 23px);
}
.ekran-seg{ color: var(--m-svet); transition: opacity .4s, text-decoration-color .4s; }
.ekran-strelka{ color: #fff; opacity: .35; transition: opacity .4s; }
.ekran-vch{ color: #fff; opacity: .25; transition: opacity .4s, transform .4s; }
.mashina.v-proshlom .ekran-seg{ opacity: .45; text-decoration: line-through; }
.mashina.v-proshlom .ekran-strelka{ opacity: .8; }
.mashina.v-proshlom .ekran-vch{ opacity: 1; color: var(--m-svet); animation: vspyshka .6s ease; }
@keyframes vspyshka{ 0%{ transform: scale(.6); } 60%{ transform: scale(1.18); } 100%{ transform: scale(1); } }

.rychag{
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; font-weight: 800; font-size: 14px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 16px;
  padding: 4px 8px 6px;
  cursor: pointer;
  animation: zovRychaga 1.6s ease-in-out infinite;
}
.rychag:disabled{ cursor: default; animation: none; opacity: .85; }
.rychag-art{ width: 34px; height: 58px; overflow: visible; }
.rychag-osnova{ fill: var(--m-ten); stroke: #fff; stroke-width: 2; }
.rychag-shtanga{ fill: #E8E4F4; }
.rychag-shar{ fill: var(--m-ruchka); stroke: #fff; stroke-width: 2; }
.rychag-ruchka{ transform-box: view-box; transform-origin: 20px 56px; transition: transform .45s cubic-bezier(.4,1.6,.5,1); }
.rychag[aria-pressed="true"] .rychag-ruchka{ transform: rotate(-40deg); }
@keyframes zovRychaga{ 0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.0); } 50%{ box-shadow: 0 0 0 6px rgba(255,255,255,.28); } }

/* ---------- Верстак ---------- */

.verstak{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 12px 10px;
  text-align: center;
}
.ramka-label{
  margin: 0;
  font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #6b6590;
}
.ramka{
  margin: 2px 0 6px;
  font-size: clamp(19px, 4.6vw, 25px);
  font-weight: 800;
  line-height: 1.6;
  border-radius: 12px;
  padding: 2px 6px;
}
.ramka.bad{ animation: shake .42s ease; }
.ramka.ok .mesto{ border-color: var(--ok); background: #E6F9EE; }
.mesto{
  display: inline-block;
  min-width: 2.6em;
  padding: 0 8px;
  border: 3px dashed var(--vybor);
  border-radius: 10px;
  background: #FAF8FF;
  color: var(--text);
  line-height: 1.3;
}
.mesto.izmeneno{ border-style: solid; }
.mesto.pusto{ color: #b8b2d6; }
.mesto-pom{ border-color: #9a93c4; }

.stanok{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px;
  min-height: 48px;
  margin: 0 auto 6px;
  padding: 4px 10px;
  background: repeating-linear-gradient(135deg, #F4EFE6 0 10px, #EFE8DC 10px 20px);
  border-radius: 14px;
  font-weight: 800;
  font-size: clamp(20px, 4.8vw, 26px);
}
.st-osnova{ background: #fff; border-radius: 10px; padding: 2px 10px; box-shadow: 0 3px 0 rgba(46,42,79,.12); }
.st-detal{ font-size: .7em; color: #6b6590; }
.st-strelka{ color: #6b6590; }
.st-rez{ background: #FFF6E0; border: 3px solid #F4B400; border-radius: 10px; padding: 0 10px; }

.ne-lozhitsya{
  margin: 0 0 6px;
  font-size: 15px;
  color: #6b4b00;
  background: #FFF6E0;
  border-radius: 10px;
  padding: 4px 10px;
}

.ryad{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px;
}
.ryad-label{ font-size: 15px; font-weight: 800; color: #6b6590; }
.detal, .karta{
  font: inherit;
  font-weight: 800;
  font-size: clamp(16px, 3.8vw, 19px);
  padding: 7px 12px;
  border: 3px solid transparent;
  border-radius: 14px;
  background: #F3EFFF;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(46,42,79,.14);
  transition: transform .1s;
}
.detal:active, .karta:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(46,42,79,.14); }
.detal.vybrana, .karta.vybrana{ border-color: var(--vybor); background: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 0 rgba(46,42,79,.14); }
.detal:disabled, .karta:disabled{ cursor: default; }
.pom-btn{ background: #EAF4FF; }
.detal-yashchik{ background: #FFF1DE; }
.yashchik{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 8px auto 0;
  padding: 8px;
  max-width: 520px;
  background: #FFF6E8;
  border: 2px dashed #E5B566;
  border-radius: 14px;
}
.karta{ background: #fff; }

.verstak-knopki{
  display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; align-items: center;
  margin-top: 10px;
}
.small-btn{
  font: inherit;
  font-weight: 800;
  font-size: 17px;
  padding: 9px 16px;
  border: none;
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(46,42,79,.14);
}
.small-btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(46,42,79,.14); }
.small-btn:disabled{ opacity: .45; cursor: default; }
.small-btn-main{ background: linear-gradient(180deg, #FF9776, var(--accent)); color: #fff; box-shadow: 0 4px 0 #e05f41; }

@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(7px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(3px); }
}

.otklik{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  scroll-margin-bottom: 10px;
}
.razbor{
  flex: 1 1 260px;
  margin: 0;
  background: #FFF6E0;
  border-left: 6px solid #F4B400;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: clamp(15px, 3.4vw, 18px);
  line-height: 1.4;
}
.otklik .big-btn{
  flex: 0 0 auto;
  margin: 0 auto;
  font-size: clamp(18px, 4vw, 21px);
  padding: 10px 24px;
  box-shadow: 0 6px 0 #2e9dc6, var(--shadow);
}

.slovarik{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  margin: 12px 0 0;
  /* своя подложка: украшения темы висят position: fixed, и на телефоне
     при прокрутке любое из них проходит под словариком */
  position: relative;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  font-size: 15px;
  color: #5b5680;
}
.slovarik b{ color: var(--text); }

/* ---------- Результаты ---------- */

.stars{
  text-align: center;
  font-size: clamp(44px, 12vw, 76px);
  min-height: 1.2em;
  letter-spacing: 6px;
}
.stars span{ display: inline-block; opacity: 0; animation: starIn .5s ease forwards; }
@keyframes starIn{
  0%{ opacity: 0; transform: scale(.2) rotate(-60deg); }
  70%{ opacity: 1; transform: scale(1.3) rotate(10deg); }
  100%{ opacity: 1; transform: scale(1) rotate(0); }
}
.result-line{ text-align: center; font-size: clamp(18px, 4.2vw, 24px); font-weight: 700; margin: 6px 0; }
.star-rules{ text-align: center; color: #6b6590; font-size: 16px; line-height: 1.5; margin: 4px 0 0; }
/* диапазон звёзд по строкам не рвётся: «6–» и «8» на разных строках читались двумя числами */
.star-rules .nw{ white-space: nowrap; }
.result-btns{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.result-btns .big-btn{ margin-top: 18px; }

.parents{
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  margin-top: 24px;
}
.parents summary{ cursor: pointer; font-weight: 700; font-size: 18px; padding: 4px; }
.parents-body{ font-size: 16px; line-height: 1.6; padding-top: 8px; }
.parents-body ul{ margin: 6px 0; padding-left: 20px; }
.parents-body li{ margin-bottom: 8px; }

/* ---------- Совёнок Наум ---------- */

.hero-art{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 780px;
  margin: 18px auto 0;
  padding: 0 4px;
}
.hero-emoji{ font-size: clamp(40px, 9vw, 58px); flex: 0 0 auto; line-height: 1; }
.hero-emoji.happy{ animation: heroJump .6s ease; }
.hero-emoji.sad{ animation: heroWobble .6s ease; }
@keyframes heroJump{
  0%,100%{ transform: translateY(0); }
  30%{ transform: translateY(-18px) scale(1.1); }
  60%{ transform: translateY(0) scale(.97); }
}
@keyframes heroWobble{
  0%,100%{ transform: rotate(0); }
  25%{ transform: rotate(-10deg); }
  50%{ transform: rotate(9deg); }
  75%{ transform: rotate(-5deg); }
}
.hero-bubble{
  background: #fff;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  font-size: clamp(15px, 3.4vw, 18px);
  line-height: 1.4;
  position: relative;
  flex: 1 1 auto;
}
.hero-bubble::before{
  content: "";
  position: absolute;
  left: -9px;
  top: 22px;
  border: 9px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}

/* Наум съезжает в левый угол, только когда угол есть: поле шириной
   780 пикселей стоит по центру, и слева от него свободно `50vw - 400px`. */
@media (min-width: 1180px){
  .hero-art{
    position: fixed;
    left: 14px;
    bottom: 14px;
    width: min(380px, calc(50vw - 410px));
    margin: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .hero-bubble{ font-size: 15px; }
  .hero-bubble::before{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .hero-emoji.happy, .hero-emoji.sad, .ramka.bad{ animation: none; }
  .rychag, .mashina.v-proshlom .shesterenka, .mashina.v-proshlom .ekran-vch{ animation: none !important; }
  .rychag-ruchka{ transition: none; }
}

/* ================================================================
   ОФОРМЛЕНИЕ РАУНДА (темы)
   ================================================================ */

.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);
  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-deco span{ opacity: .32; }
}
@media (prefers-reduced-motion: reduce){
  .theme-deco span{ animation: none !important; }
  .theme-chip.is-new{ animation: none; }
}

/* ---------- кнопка возврата на страницу игры ---------- */
: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); }
.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; }
}

/* ---------- Альбомный телефон (844×390 и ниже по высоте) ----------
   Закреплённые углы — «Выйти», «Во весь экран», звук и музыка — при
   прокрутке ложились на задание: на телефоне боком их некуда отодвинуть.
   Здесь они уходят вместе со страницей и стоят только над шапкой,
   где им и оставлено место. */
@media (orientation: landscape) and (max-height: 520px){
  .exit-btn--float, .audio-panel{ position: absolute; }
}