:root { color-scheme: light; }

html, body {
  margin: 0;
  height: 100%;
  background: #86b8dd;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#gpu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background: #000;
}

/* Кадр 4:3 внутри окна (координаты задаёт Game.resize); весь UI позиционируется относительно него */
:root { --frame-x: 0px; --frame-y: 0px; --frame-w: 100vw; --frame-h: 100vh; --frame-scale: 1; }
.frame {
  position: absolute;
  left: var(--frame-x);
  top: var(--frame-y);
  width: var(--frame-w);
  height: var(--frame-h);
  pointer-events: none;
}

/* ---- интерфейс под кинескопом ---- */
/* всё, что внутри #ui, искажается той же выпуклостью, что и сцена (SVG-фильтр #crt-warp, см. index.html);
   экранные кнопки остаются снаружи — их зоны нажатия должны совпадать с картинкой */
.ui { position: absolute; inset: 0; pointer-events: none; }
.ui.warp { filter: url(#crt-warp); }
/* скан-линии на панелях интерфейса — как на сцене */
.crt-lines { position: relative; }
.crt-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* ---- экранные кнопки ---- */
.touch { position: absolute; inset: 0; pointer-events: none; }
.touch[hidden] { display: none; }

.key {
  pointer-events: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.key.active { background: rgba(255, 255, 255, 0.55); }

.dpad {
  position: absolute;
  left: calc(max(var(--frame-x), 0px) + 16px + env(safe-area-inset-left));
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  padding: 10px;
  pointer-events: auto;
  touch-action: none;
}
.dpad .key { width: 70px; height: 70px; }

.jump {
  position: absolute;
  right: calc(max(var(--frame-x), 0px) + 28px + env(safe-area-inset-right));
  bottom: calc(30px + env(safe-area-inset-bottom));
  width: 92px;
  height: 92px;
  font-size: 34px;
}

.throw {
  position: absolute;
  right: calc(max(var(--frame-x), 0px) + 140px + env(safe-area-inset-right));
  bottom: calc(52px + env(safe-area-inset-bottom));
  font-size: 30px;
}

/* узкий экран (портрет телефона): бросок над прыжком, иначе наезжает на d-pad */
@media (max-width: 560px) {
  .dpad { gap: 8px; }
  .dpad .key { width: 62px; height: 62px; font-size: 24px; }
  .throw {
    right: calc(max(var(--frame-x), 0px) + 36px + env(safe-area-inset-right));
    bottom: calc(140px + env(safe-area-inset-bottom));
  }
}
/* телефон в портрете: кадр 4:3 прижат к верху (Game.resize), под ним много места — кнопки крупнее и выше от края */
@media (orientation: portrait) and (pointer: coarse) {
  .dpad { bottom: calc(44px + env(safe-area-inset-bottom)); gap: 12px; }
  .dpad .key { width: 74px; height: 74px; font-size: 28px; }
  .jump { width: 104px; height: 104px; font-size: 38px; bottom: calc(48px + env(safe-area-inset-bottom)); }
  .throw { width: 84px; height: 84px; bottom: calc(176px + env(safe-area-inset-bottom)); }
  .talk { bottom: calc(176px + env(safe-area-inset-bottom)); }
}

/* ---- HUD ---- */
/* Масштаб HUD одним числом: базовые размеры (рожица 64px, текст 16px) умножаются на него. */
/* масштаб HUD следует за размером кадра: 1.2 при кадре 800px шириной */
:root { --hud-scale: calc(1.2 * var(--frame-scale)); }

.hud {
  position: absolute;
  left: calc(var(--frame-x) + 14px);
  top: calc(var(--frame-y) + 12px);
  display: flex;
  align-items: flex-start;
  gap: calc(8px * var(--hud-scale));
  pointer-events: none;
}
/* босс: та же рожица, но в правом углу; появляется с «выездом» */
.hud--boss { left: auto; right: calc(max(var(--frame-x), 0px) + 14px); }
.hud--boss[hidden] { display: none; }
.hud-face--boss { animation: hud-pop 0.4s ease-out; box-shadow: 0 0 0 3px rgba(160, 40, 30, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); }

/* колонка героя: аватарка, под ней счётчик яблок */
.hud-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--hud-scale));
}
.hud-item {
  display: inline-block;
  padding: calc(4px * var(--hud-scale)) calc(10px * var(--hud-scale));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: calc(14px * var(--hud-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.15s;
}
.hud-item.gain { background: rgba(60, 140, 50, 0.75); }
/* экран загрузки: по центру, поверх всего, пока Game.start не спрячет */
.loading {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #0b1420; color: #f3e6c8; font-family: inherit;
}
.loading[hidden] { display: none; }
.loading-name { font-size: 34px; font-weight: 700; letter-spacing: 0.04em; text-align: center; }
.loading-name span { display: block; font-size: 16px; font-weight: 400; opacity: 0.7; letter-spacing: 0.2em; text-transform: uppercase; }
.loading-bar { width: min(60vw, 360px); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.loading-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd27a, #e8a13a); transition: width 0.2s; }
.loading-text { font-size: 14px; opacity: 0.7; }
/* отступ под вырез экрана сверху — Game.resize прижимает к нему кадр в портрете */
:root { --safe-top: env(safe-area-inset-top, 0px); }

/* счётчик монет под яблоками: значок — аверс монеты (assets/ui/coin.png), при подборе вспыхивает золотом */
.hud-coins { display: inline-flex; align-items: center; gap: calc(5px * var(--hud-scale)); }
.hud-coins.gain { background: rgba(170, 130, 30, 0.8); }
.hud-coin {
  display: inline-block;
  width: calc(16px * var(--hud-scale));
  height: calc(16px * var(--hud-scale));
  background: url(assets/ui/coin.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.hud-key { background: rgba(120, 90, 30, 0.75); animation: hud-pop 0.4s ease-out; }
.hud-key[hidden] { display: none; }

/* рожица-индикатор состояния: спрайт из assets/hud_faces.png, позиция задаётся из JS по размеру элемента */
.hud-face {
  width: calc(64px * var(--hud-scale));
  height: calc(64px * var(--hud-scale));
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}
.hud-face.hurt { transform: scale(1.15); }
.hud-face[hidden] { display: none; }
/* напарник: того же размера, появляется с «выездом» */
.hud-face--duelist {
  animation: hud-pop 0.4s ease-out;
}
@keyframes hud-pop {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- диалог: панель внизу кадра, портрет слева ---- */
.dialogue {
  position: absolute;
  left: calc(var(--frame-x) + var(--frame-w) * 0.06);
  width: calc(var(--frame-w) * 0.88);
  bottom: calc(var(--frame-bottom) + var(--frame-h) * 0.05);
  display: flex;
  gap: calc(10px * var(--hud-scale));
  padding: calc(12px * var(--hud-scale));
  border-radius: calc(12px * var(--hud-scale));
  background: rgba(12, 10, 16, 0.9);
  border: 3px solid rgba(255, 220, 160, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65);
  color: #f3ead8;
  font-size: calc(21px * var(--hud-scale));
  line-height: 1.35;
  min-height: calc(110px * var(--hud-scale));
  pointer-events: none;
  animation: dialogue-in 0.18s ease-out;
}
.dialogue[hidden] { display: none; }
@keyframes dialogue-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialogue-portrait {
  flex: none;
  width: calc(100px * var(--hud-scale));
  height: calc(100px * var(--hud-scale));
  border-radius: calc(8px * var(--hud-scale));
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  border: 2px solid rgba(255, 220, 160, 0.45);
}
.dialogue-body { display: flex; flex-direction: column; gap: calc(3px * var(--hud-scale)); min-width: 0; }
.dialogue-name { font-weight: 700; color: #ffd98a; letter-spacing: 0.03em; font-size: 0.85em; }
.dialogue-text { flex: 1; }
.dialogue-meta { font-size: 0.7em; opacity: 0.6; }
/* мысли героя: приглушённая рамка, курсив */
.dialogue--thought { border-color: rgba(160, 200, 255, 0.35); background: rgba(10, 14, 24, 0.86); }
.dialogue--thought .dialogue-name { color: #a9c8ff; }
.dialogue--thought .dialogue-text { font-style: italic; color: #dde7f5; }

.talk-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--frame-bottom) + var(--frame-h) * 0.12);
  padding: calc(4px * var(--hud-scale)) calc(10px * var(--hud-scale));
  border-radius: 999px;
  background: rgba(12, 10, 16, 0.7);
  color: #ffd98a;
  font-size: calc(12px * var(--hud-scale));
  pointer-events: none;
}
.talk-hint[hidden] { display: none; }

.talk {
  position: absolute;
  right: calc(max(var(--frame-x), 0px) + 140px + env(safe-area-inset-right));
  bottom: calc(140px + env(safe-area-inset-bottom));
  font-size: 26px;
}

/* кнопка паузы на таче — правый верхний угол кадра */
.pause-key {
  position: absolute;
  right: calc(max(var(--frame-x), 0px) + 16px + env(safe-area-inset-right));
  top: calc(max(var(--frame-y), 0px) + 16px + env(safe-area-inset-top));
  width: 52px;
  height: 52px;
  font-size: 22px;
}

/* ---- пауза ---- */
.pause { pointer-events: auto; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 10, 0.62); }
.pause[hidden] { display: none; }
.pause-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(10px * var(--frame-scale));
  min-width: calc(300px * var(--frame-scale));
  padding: calc(22px * var(--frame-scale)) calc(28px * var(--frame-scale));
  border-radius: calc(16px * var(--frame-scale));
  background: rgba(14, 18, 28, 0.92);
  border: 2px solid rgba(255, 217, 138, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  color: #fff3dc;
  text-align: center;
}
.pause-title { margin: 0 0 calc(6px * var(--frame-scale)); font-size: calc(30px * var(--frame-scale)); color: #ffd98a; letter-spacing: 0.08em; }
.pause-item {
  font: inherit;
  font-size: calc(18px * var(--frame-scale));
  font-weight: 700;
  padding: calc(10px * var(--frame-scale)) calc(18px * var(--frame-scale));
  border: 2px solid transparent;
  border-radius: 999px;
  color: #fff3dc;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.pause-item.selected { color: #3b2410; background: linear-gradient(#ffd27a, #e8a13a); border-color: #ffe7b0; box-shadow: 0 4px 0 #8a5a18; }
.pause-hint { margin-top: calc(6px * var(--frame-scale)); font-size: calc(12px * var(--frame-scale)); opacity: 0.6; }
body.paused .touch, body.paused .talk-hint, body.paused .hint { visibility: hidden; }

/* ---- подсказка ---- */
.hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--frame-bottom) + 14px);
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s;
}
.hint.hide { opacity: 0; }

/* ---- главный экран ---- */
.title, .slides { pointer-events: auto; z-index: 5; }
.title[hidden], .slides[hidden] { display: none; }
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(10, 16, 24, 0.35) 0%, rgba(6, 10, 16, 0.78) 70%, rgba(4, 6, 10, 0.92) 100%);
  animation: title-in 0.8s ease-out;
}
@keyframes title-in { from { opacity: 0; } to { opacity: 1; } }
.title-card { text-align: center; color: #fff3dc; padding: calc(16px * var(--frame-scale)); }
.title-kicker {
  font-size: calc(13px * var(--frame-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: calc(10px * var(--frame-scale));
}
.title-name {
  margin: 0 0 calc(26px * var(--frame-scale));
  font-size: calc(46px * var(--frame-scale));
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffd98a;
  text-shadow: 0 2px 0 #7a4a12, 0 6px 22px rgba(0, 0, 0, 0.6);
}
.title-name span {
  display: block;
  font-size: calc(24px * var(--frame-scale));
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff3dc;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#title-btn {
  font: inherit;
  font-size: calc(20px * var(--frame-scale));
  font-weight: 700;
  padding: calc(12px * var(--frame-scale)) calc(30px * var(--frame-scale));
  border: none;
  border-radius: 999px;
  color: #3b2410;
  background: linear-gradient(#ffd27a, #e8a13a);
  box-shadow: 0 6px 0 #8a5a18, 0 12px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: title-pulse 1.6s ease-in-out infinite;
}
#title-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a5a18, 0 8px 20px rgba(0, 0, 0, 0.45); }
@keyframes title-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.title-hint { margin-top: calc(14px * var(--frame-scale)); font-size: calc(12px * var(--frame-scale)); opacity: 0.6; }
/* пока главный экран или заставка — интерфейс уровня скрыт */
body.menu .hud, body.menu .touch, body.menu .talk-hint, body.menu .dialogue, body.menu .hint { visibility: hidden; }

/* ---- заставка (слайды) ---- */
.slides {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 10, 0.82);
  cursor: pointer;
}
.slide {
  max-width: calc(560px * var(--frame-scale));
  padding: calc(20px * var(--frame-scale));
  text-align: center;
  color: #fff3dc;
  animation: dialogue-in 0.35s ease-out;
}
/* слайд с картинкой (сюжетные заставки): картинка во весь кадр (cover), титр и подпись — плашкой снизу поверх неё */
.slide.with-image {
  position: absolute;
  inset: 0;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.slide-image { display: block; margin: 0 auto calc(12px * var(--frame-scale)); max-width: 100%; max-height: calc(300px * var(--frame-scale)); border-radius: 12px; }
.slide.with-image .slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}
.slide.with-image .slide-caption {
  position: relative;
  z-index: 1;
  padding: calc(70px * var(--frame-scale)) calc(36px * var(--frame-scale)) calc(16px * var(--frame-scale));
  background: linear-gradient(to bottom, rgba(4, 6, 10, 0) 0%, rgba(4, 6, 10, 0.7) 40%, rgba(4, 6, 10, 0.92) 100%);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
}
.slide.with-image .slide-title { font-size: calc(26px * var(--frame-scale)); margin-bottom: calc(6px * var(--frame-scale)); }
.slide.with-image .slide-text { font-size: calc(18px * var(--frame-scale)); line-height: 1.4; }
.slide.with-image .slide-meta { margin-top: calc(10px * var(--frame-scale)); opacity: 0.7; }
.slide-image[hidden] { display: none; }
.slide-title { margin: 0 0 calc(10px * var(--frame-scale)); font-size: calc(28px * var(--frame-scale)); color: #ffd98a; }
.slide-title[hidden] { display: none; }
.slide-text { margin: 0; font-size: calc(19px * var(--frame-scale)); line-height: 1.5; }
.slide-meta { margin-top: calc(18px * var(--frame-scale)); font-size: calc(12px * var(--frame-scale)); opacity: 0.55; }

/* ---- оверлей (ошибка / финиш) ---- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 30, 40, 0.45);
  padding: 16px;
  pointer-events: auto;
}
.overlay[hidden] { display: none; }

.card {
  background: #fff8ea;
  color: #3b2f22;
  border-radius: 18px;
  padding: 24px 28px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.card h1 { margin: 0 0 8px; font-size: 28px; }
.card p { margin: 0 0 18px; line-height: 1.4; }
.card button {
  font: inherit;
  font-size: 17px;
  padding: 10px 26px;
  border-radius: 999px;
  border: 0;
  background: #6f9b3c;
  color: #fff;
  cursor: pointer;
}
.card button:active { background: #5a8630; }