:root {
  /* Шапки модалок, фон подсказки, счётчик, перезапуск, кнопки в попапах фактов / победы */
  --orange: #f7840f;
  /* Подложка карточек модалок */
  --cream: #f0ccad;
  --cream-2: #f0ccad;
  --overlay: rgba(0, 0, 0, 0.58);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --radius: 18px;
  --radius-sm: 14px;
  --font: "Montserrat", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: var(--font);
  background: #1a1a1a;
  color: #1a1a1a;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.boot-preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(247, 132, 15, 0.94) 0%, #f7840f 52%, #d97212 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: opacity 0.22s ease;
}

.boot-preloader__label {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.boot-preloader.boot-preloader--hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- scrollable wide scene --- */
.scroll-shell {
  container-type: inline-size;
  container-name: game;
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  /* Стабильная высота: полоса горизонтального скролла не съедает clientHeight появлением/пропаданием. */
  scrollbar-gutter: stable;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  /* Нативная горизонтальная полоса скрыта — индикатор только в блоке подсказки. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-shell::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.scroll-shell.scroll-shell--grabbable {
  cursor: grab;
}

.scroll-shell.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

.scroll-shell.is-grabbing .manul {
  cursor: grabbing;
}

/* Ряд не короче окна: при узкой сцене она по центру, при широкой — ширина контента для скролла. */
.scroll-shell__sizer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 100%;
  width: max-content;
  box-sizing: border-box;
}

.zoom-outer {
  flex: 0 0 auto;
  align-self: stretch;
  display: block;
  width: max-content;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.scene {
  position: relative;
  display: block;
  width: max-content;
  max-width: none;
  height: auto;
  line-height: 0;
  vertical-align: top;
  transform-origin: top left;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.scene .bg {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  width: auto;
  user-select: none;
  pointer-events: none;
}

.scene-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  /* Выше обычных манулов, но ниже выделенного (.manul.is-spotlight). */
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.scene-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scene-overlay.hidden {
  display: none;
}

#manuls-root {
  position: absolute;
  inset: 0;
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.scene.scene--manuls-ready #manuls-root {
  opacity: 1;
}

.manul {
  position: absolute;
  z-index: 12;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  line-height: 0;
  transition: transform 0.15s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.manul img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  vertical-align: top;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  image-rendering: auto;
  image-rendering: high-quality;
}

.manul:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.04);
}

.manul:disabled {
  cursor: default;
}

.manul.is-behind-dim {
  filter: brightness(0.42) saturate(0.85);
  pointer-events: none;
}

.manul.is-spotlight {
  z-index: 120 !important;
  filter: none;
}

.manul.is-spotlight img {
  filter: brightness(1.16) contrast(1.05) drop-shadow(0 0 12px rgba(255, 255, 255, 0.55))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.manul.is-escaping {
  z-index: 120 !important;
  pointer-events: none;
}

@keyframes manulHopAway {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  18% {
    transform: translate(-50%, -50%) translateY(-14px) scale(1.06);
    opacity: 1;
  }
  38% {
    transform: translate(-50%, -50%) translateY(4px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(140vw, -55vh) rotate(18deg) scale(0.35);
    opacity: 0;
  }
}

.manul--hop {
  animation: manulHopAway 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* --- fact popup (Frame 4): fixed поверх сцены и HUD; рамка задаётся из JS под .scene --- */
.fact-layer {
  position: fixed;
  z-index: 250;
  box-sizing: border-box;
  pointer-events: none;
}

.fact-layer:not(.hidden) {
  pointer-events: auto;
}

.fact-layer.hidden {
  display: none;
}

.fact-popup {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 40%);
  transform: translate(
    calc(-50% + var(--popup-nudge-x, 0px)),
    calc(-100% - 40px + var(--popup-nudge-y, 0px))
  );
  width: min(440px, calc(100vw - 32px));
  width: min(440px, calc(100cqi - 32px));
  max-width: 92vw;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 18px;
  text-align: left;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

/* Альтернативные якоря, если карточка не помещается над манулом (у края сцены / вьюпорта). */
.fact-popup.fact-popup--side-right {
  transform: translate(
    calc(14px + var(--popup-nudge-x, 0px)),
    calc(-50% + var(--popup-nudge-y, 0px))
  );
}

.fact-popup.fact-popup--side-left {
  transform: translate(
    calc(-100% - 14px + var(--popup-nudge-x, 0px)),
    calc(-50% + var(--popup-nudge-y, 0px))
  );
}

.fact-popup.fact-popup--below {
  transform: translate(
    calc(-50% + var(--popup-nudge-x, 0px)),
    calc(14px + var(--popup-nudge-y, 0px))
  );
}

.fact-popup__text {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 500;
  color: #333;
}

.fact-popup .btn-cta {
  width: 100%;
}

/* --- HUD --- */
.hud {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 200;
  display: none;
  align-items: center;
  gap: 10px;
}

.hud.is-visible {
  display: flex;
}

.hud-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.hud-btn--round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-btn--round:hover {
  filter: brightness(1.05);
}

.hud-counter {
  min-width: 88px;
  padding: 0 16px;
  height: 44px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: scale(1);
}

@keyframes hudCounterPop {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

.hud-counter.hud-counter--pop {
  animation: hudCounterPop 0.45s cubic-bezier(0.34, 1.25, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hud-counter.hud-counter--pop {
    animation: none;
  }
}

/* --- modals (Frames 1, 2, 5) --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: rgba(0, 0, 0, 0.35);
}

.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  width: min(420px, 100%);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream);
}

.modal-card--wide {
  width: min(520px, 100%);
}

.modal-head {
  background: var(--orange);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 1.45rem;
  padding: 28px 16px;
  line-height: 1.35;
  border-radius: 18px;
}

.modal-body {
  padding: 40px 60px 20px;
  background: var(--cream-2);
}

.modal-body p {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.5;
  font-weight: 500;
}

.modal-body p:last-of-type {
  margin-bottom: 8px;
}

.modal-body .lead {
  font-weight: 700;
  margin-bottom: 12px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  padding: 8px 0 35px 4px;
}

.btn-cta {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: 12px 70px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: var(--orange);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(247, 132, 15, 0.42);
}

/* Ярко-оранжевый: интро «Далее» / «Начнём» и кнопка победы «Начать сначала». */
#intro-cta.btn-cta,
#vic-close.btn-cta {
  background: #ed4020;
  box-shadow: 0 4px 12px rgba(237, 64, 32, 0.42);
}

.btn-cta:hover {
  filter: brightness(1.06);
}

.trophy {
  display: block;
  margin: 0 auto 18px;
  text-align: center;
  line-height: 0;
}

.trophy img {
  display: block;
  width: auto;
  max-width: min(100%, 11.5rem);
  max-height: 11.5rem;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Выше по специфичности, чем .modal-body p (иначе остаётся 0.94rem / 500). */
.modal-body p.victory-msg {
  text-align: center;
  font-size: 1.14rem;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 16px !important;
}

/* --- bottom scroll / zoom hint --- */
.scroll-hint-bar {
  flex-shrink: 0;
  width: 100%;
  z-index: 150;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(247, 132, 15, 0.94) 0%, #f7840f 52%, #d97212 100%);
  border-top: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
  pointer-events: none;
}

.scroll-hint-bar[hidden] {
  display: none !important;
}

/* Узкая полоска-индикатор прокрутки только внутри подсказки (не на всю ширину экрана). */
.scroll-hint-bar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: min(420px, calc(100% - 28px));
  margin: 0 auto 8px;
  box-sizing: border-box;
  pointer-events: auto;
}

.scroll-hint-bar__track {
  flex: 1;
  min-width: 0;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.scroll-hint-bar__track--dragging {
  cursor: grabbing;
}

.scroll-hint-bar__thumb {
  position: absolute;
  left: 0;
  top: calc(50% - 3.5px);
  width: 28px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: transform 0.08s ease-out, width 0.08s ease-out;
  pointer-events: auto;
  cursor: grab;
}

.scroll-hint-bar__thumb.scroll-hint-bar__thumb--dragging {
  transition: none;
  cursor: grabbing;
}

.scroll-hint-bar__chev {
  flex-shrink: 0;
  appearance: none;
  margin: 0;
  padding: 0 4px;
  min-width: 2rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.scroll-hint-bar__chev:hover:not(:disabled) {
  opacity: 1;
}

.scroll-hint-bar__chev:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  animation: none;
}

.scroll-hint-bar__chev--l:not(:disabled) {
  animation: scrollHintBounceL 1.35s ease-in-out infinite;
}

.scroll-hint-bar__chev--r:not(:disabled) {
  animation: scrollHintBounceR 1.35s ease-in-out infinite;
}

@keyframes scrollHintBounceL {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-6px);
  }
}

@keyframes scrollHintBounceR {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

.scroll-hint-bar__text {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.96;
  font-size: 0.72rem;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .modal-body {
    padding: 28px 22px 18px;
  }

  .fact-popup {
    width: min(360px, calc(100vw - 24px));
    width: min(360px, calc(100cqi - 24px));
    padding: 16px 16px 14px;
  }

  .scroll-hint-bar__text {
    font-size: 0.66rem;
    padding: 0 4px;
  }

  .scroll-hint-bar__text-wheel {
    display: none;
  }
}