/* ============================================================
   «Прятки во времени» — математика, 7–10 лет (docs/22-pryatki.md)
   Карта занимает почти весь экран, поэтому интерфейс игры устроен
   иначе, чем в играх с карточками: панель сверху, задание снизу,
   между ними только карта.
   ============================================================ */

:root{
  --bg1:#FFF6E5; --bg2:#FFE3F1; --bg3:#EDE4FF;
  --theme-accent:#FF7A59;
  --accent:#FF7A59; --accent2:#4EC5F1;
  --ok:#3BC97D; --bad:#FF5A6E;
  --ink:#2E2A4F; --ink-soft:#5C5680;
  --card:#FFFFFFEE;
}

*{ 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(--ink);
  background:linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  -webkit-tap-highlight-color:transparent;
}

.hidden{ display:none !important; }

/* --- украшения эпохи --------------------------------------- */
.theme-deco{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.theme-deco span{
  position:absolute; font-size:clamp(24px, 5vmin, 46px);
  opacity:.28; filter:saturate(.9);
  animation:deco-float 7s ease-in-out infinite;
}
@keyframes deco-float{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }

.wrap{
  position:relative; z-index:1;
  max-width:1000px; margin:0 auto; padding:16px 14px 24px;
  min-height:100dvh;
}

/* --- карточки экранов --------------------------------------- */
.card{
  background:var(--card); border-radius:26px; padding:20px 18px 24px;
  box-shadow:0 12px 30px rgba(46,42,79,.14);
}

.title{ margin:6px 0 6px; font-size:clamp(26px, 6vw, 38px); text-align:center; }
.subtitle{ margin:0 auto 14px; max-width:38em; text-align:center; color:var(--ink-soft); }
.section-title{ margin:18px 0 10px; font-size:20px; text-align:center; }
.hint-line{ margin:14px 0 0; text-align:center; color:var(--ink-soft); font-size:15px; }

/* --- совёнок ------------------------------------------------ */
.hero-panel{
  display:flex; align-items:center; gap:12px;
  background:#FFFFFFCC; border-radius:20px; padding:10px 14px;
  box-shadow:0 4px 14px rgba(46,42,79,.10);
}
.hero-art{ flex:none; width:74px; height:74px; font-size:52px; line-height:1; }
.hero-art svg{ width:100%; height:100%; display:block; }
.hero-panel.compact .hero-art{ width:52px; height:52px; font-size:38px; }
.bubble{
  position:relative; flex:1 1 auto;
  background:#fff; border-radius:16px; padding:10px 14px;
  box-shadow:0 2px 8px rgba(46,42,79,.10);
  font-size:16px; line-height:1.35;
}
.hero-jump{ animation:hero-jump .5s ease; }
.hero-shake{ animation:hero-shake .45s ease; }
@keyframes hero-jump{ 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-12px) scale(1.04);} }
@keyframes hero-shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-6px) rotate(-3deg);} 75%{ transform:translateX(6px) rotate(3deg);} }

/* --- выбор сложности --------------------------------------- */
.levels{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.level-btn{
  display:grid; gap:2px; padding:14px 12px;
  border:3px solid transparent; border-radius:20px;
  background:#fff; font:inherit; color:inherit; cursor:pointer; text-align:center;
  box-shadow:0 4px 0 rgba(46,42,79,.10);
}
.level-btn:hover{ background:#FFF7F3; }
.level-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(46,42,79,.10); }
.level-btn:focus-visible{ outline:3px solid var(--accent2); outline-offset:3px; }
.level-btn[aria-pressed="true"]{ border-color:var(--accent); background:#FFF1EC; }
.level-emoji{ font-size:32px; }
.level-name{ font-weight:800; font-size:19px; }
.level-desc{ color:var(--ink-soft); font-size:14px; }

.big-btn{
  display:block; width:100%; max-width:340px; margin:16px auto 0;
  padding:14px 20px; border:none; border-radius:20px;
  background:var(--accent); color:#fff;
  font:inherit; font-size:22px; font-weight:800; cursor:pointer;
  box-shadow:0 5px 0 #D9553A;
}
.big-btn:hover{ filter:brightness(1.05); }
.big-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #D9553A; }
.big-btn:focus-visible{ outline:3px solid var(--accent2); outline-offset:3px; }
.big-btn.ghost{ background:#fff; color:var(--ink); box-shadow:0 5px 0 rgba(46,42,79,.14); }

/* --- список эпох -------------------------------------------- */
.eras{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.era-chip{
  display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:16px; padding:8px 12px; font-size:15px;
  box-shadow:0 3px 10px rgba(46,42,79,.08);
}
.era-chip b{ font-size:22px; }
.era-chip.dim{ opacity:.45; }

/* --- верхняя панель игры ------------------------------------ */
.game-head{
  display:flex; align-items:center; gap:10px;
  background:#FFFFFFDD; border-radius:20px; padding:8px 12px;
  box-shadow:0 4px 14px rgba(46,42,79,.10);
}
.mini-btn{
  flex:none; height:40px; padding:0 12px; border:none; border-radius:14px;
  background:#F1EDFF; color:var(--ink); font:inherit; font-weight:700; cursor:pointer;
}
.mini-btn:hover{ background:#E7E0FF; }
.mini-btn:focus-visible{ outline:3px solid var(--accent2); outline-offset:2px; }
.progress-info{ flex:1 1 auto; min-width:0; display:grid; gap:4px 12px; grid-template-columns:auto 1fr; align-items:center; }
.progress-info > span:first-child{ font-size:14px; font-weight:700; white-space:nowrap; }
.theme-chip{
  justify-self:end; min-width:0; font-size:13px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* На узком телефоне эпоха и так подписана над заданием — вторую
   подпись убираем, чтобы «Задание 3 из 10» не обрезалось. */
@media (max-width:560px){ .theme-chip{ display:none; } }
.progress-bar{ grid-column:1 / -1; height:8px; border-radius:6px; background:#EEE9FF; overflow:hidden; }
.progress-fill{ height:100%; width:0; border-radius:6px; background:var(--theme-accent); transition:width .3s ease; }
.score-badge{ flex:none; font-weight:800; font-size:18px; }

/* Кнопка «Выйти» стоит слева сверху, поэтому первая строка панели
   сдвигается вправо, чтобы под ней не оказалось «Меню». */
.game-head{ margin-top:52px; }
@media (max-width:480px){ .game-head{ margin-top:46px; } }

/* --- карта --------------------------------------------------- */
.map-wrap{
  position:relative; margin-top:10px;
  border-radius:24px; overflow:hidden;
  background:#DFF1FF;
  box-shadow:0 12px 30px rgba(46,42,79,.16);
  height:min(62dvh, 560px);
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.map{ position:absolute; inset:0; cursor:grab; }
.map.dragging{ cursor:grabbing; }
.map svg{ display:block; width:100%; height:100%; }

/* Предметы: то, на что можно нажать */
.hit{ cursor:pointer; }
.hit:focus-visible{ outline:none; }
.hit:focus-visible .hit-ring{ opacity:1; stroke:#4EC5F1; }
.hit-ring{ opacity:0; transition:opacity .2s ease; }
.hit.wrong{ animation:hit-shake .45s ease; }
@keyframes hit-shake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-7px);} 60%{ transform:translateX(7px);} }
.hit.found .hit-ring{ opacity:1; stroke:#3BC97D; animation:ring-pulse 1.1s ease-in-out infinite; }
.hit.shown .hit-ring{ opacity:1; stroke:#FF7A59; animation:ring-pulse 1.1s ease-in-out infinite; }
@keyframes ring-pulse{ 0%,100%{ stroke-width:5; opacity:.9; } 50%{ stroke-width:9; opacity:.5; } }

/* Кнопки зума стоят по небу вверху справа: внизу они закрывали ягоды
   на кусте, а на «всей карте» верх мира предметам не отдан вовсе. */
.zoom-buttons{ position:absolute; right:10px; top:10px; display:flex; gap:6px; }

.icon-btn{
  width:44px; height:44px; border:none; border-radius:14px;
  background:#FFFFFFEE; font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 3px 10px rgba(46,42,79,.16);
}
.icon-btn:hover{ background:#fff; }
.icon-btn:active{ transform:translateY(2px); }
.icon-btn:focus-visible{ outline:3px solid var(--accent2); outline-offset:2px; }
.top-buttons{ position:fixed; top:10px; right:10px; z-index:60; display:flex; gap:8px; }
.icon-btn.off{ opacity:.5; }

/* Совёнок стоит по небу вверху слева и карту не заслоняет: предметы
   лежат ниже линии горизонта, а место справа оставлено кнопкам зума.
   Указатель сквозь панель проходит: в углу внизу она забирала себе
   нажатие, и верный куст под ней было не то что не сосчитать — не нажать. */
.map-area{ position:relative; }
.play-hero{
  /* Панель широкая нарочно: разбор ошибки в узкой колонке разворачивается
     в пять строк и вылезает из неба на карту. */
  position:absolute; left:10px; top:10px; width:min(70%, 480px);
  max-width:calc(100% - 170px);
  background:#FFFFFFEE; pointer-events:none;
}
@media (max-width:700px), (max-height:640px){
  /* На телефоне карта узкая, и та же панель разворачивается в семь
     строк — полкарты. Здесь совёнок говорит строкой под картой, а
     подсказка про перетаскивание уступает ему место: она про то же. */
  .play-hero{
    position:static; width:auto; max-width:none; margin-top:8px;
    padding:6px 10px; background:#FFFFFFEE;
  }
  .play-hero .hero-art{ width:40px; height:40px; font-size:28px; }
  .play-hero .bubble{ font-size:14px; padding:7px 9px; line-height:1.25; }
  .bubble{ font-size:15px; padding:8px 10px; }
  .how-line{ display:none; }
  /* Строка совёнка встала под картой, и карта уступает ей высоту:
     иначе экран телефона приходится прокручивать, чтобы прочитать
     задание. */
  .map-wrap{ height:min(55dvh, 460px); }
}

/* Стрелка к цели: висит у края карты и поворачивается за предметом */
.finder{
  position:absolute; left:50%; top:50%; width:0; height:0;
  pointer-events:none; z-index:5;
}
.finder-arrow{
  position:absolute; transform-origin:center;
  font-size:34px; color:var(--accent);
  text-shadow:0 0 8px #fff, 0 0 14px #fff;
  animation:finder-blink 1.2s ease-in-out infinite;
}
@keyframes finder-blink{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* --- строка задания ------------------------------------------ */
.task-bar{
  display:grid; gap:6px; width:100%; margin-top:10px;
  padding:12px 16px; border:none; border-radius:20px;
  background:#FFFFFFEE; color:inherit; font:inherit; text-align:left; cursor:pointer;
  box-shadow:0 6px 18px rgba(46,42,79,.12);
}
.task-bar:hover{ background:#fff; }
.task-bar:focus-visible{ outline:3px solid var(--accent2); outline-offset:3px; }
.task-era{ font-size:14px; font-weight:700; color:var(--theme-accent); }
.task-text{ font-size:clamp(20px, 4.4vw, 28px); font-weight:800; line-height:1.25; }

.how-line{ margin:8px 0 0; text-align:center; color:var(--ink-soft); font-size:14px; }

/* --- окно находки -------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(46,42,79,.45);
}
.modal-card{
  width:min(460px, 100%); background:#fff; border-radius:24px; padding:18px;
  box-shadow:0 20px 50px rgba(46,42,79,.30);
  animation:modal-in .25s ease;
}
@keyframes modal-in{ from{ transform:translateY(16px) scale(.96); opacity:0; } }
.modal-title{ margin:0 0 6px; text-align:center; font-size:20px; }
.modal-task{ margin:0 0 14px; text-align:center; font-size:clamp(24px, 6vw, 32px); font-weight:800; }
.modal-hint{ margin:12px 0 0; text-align:center; color:var(--ink-soft); font-size:15px; min-height:1.2em; }

.answers{ display:grid; gap:10px; grid-template-columns:repeat(2, 1fr); }
.answer-btn{
  padding:14px 10px; border:3px solid transparent; border-radius:18px;
  background:#F4F1FF; color:var(--ink);
  font:inherit; font-size:26px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 0 rgba(46,42,79,.10);
}
.answer-btn:hover{ background:#EBE6FF; }
.answer-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(46,42,79,.10); }
.answer-btn:focus-visible{ outline:3px solid var(--accent2); outline-offset:3px; }
.answer-btn.wrong{ background:#FFE7EA; border-color:var(--bad); animation:hit-shake .45s ease; }
.answer-btn.right{ background:#E4FBEE; border-color:var(--ok); }

/* --- результаты ----------------------------------------------- */
.stars{ display:flex; justify-content:center; gap:10px; font-size:46px; min-height:56px; }
.stars span{ animation:star-pop .5s ease backwards; }
@keyframes star-pop{ from{ transform:scale(.2) rotate(-30deg); opacity:0; } }
.result-score{ margin:8px 0 14px; text-align:center; font-size:20px; font-weight:700; }
.best-line{ margin:12px 0 0; text-align:center; color:var(--ink-soft); }
.result-buttons{ display:grid; gap:10px; margin-top:16px; }

.parents{ margin-top:18px; background:#F7F5FF; border-radius:18px; padding:10px 14px; }
.parents summary{ cursor:pointer; font-weight:700; }
.parents-body{ margin-top:10px; font-size:15px; line-height:1.5; }
.parents-body p{ margin:6px 0; }
.parents-body .miss{ color:#B04250; }

.confetti{ position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden; }
.confetti i{
  position:absolute; width:10px; height:14px; border-radius:3px;
  animation:confetti-fall 2.2s linear forwards;
}
@keyframes confetti-fall{ to{ transform:translateY(110vh) rotate(540deg); opacity:.2; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

.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:focus-visible{ outline:3px solid var(--accent2); outline-offset:2px; }
/* Вариант для игр без собственной верхней панели. */
.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; }
}