/* =========================================================
   Визуальная новелла — стили
   Единый «стеклянный» стиль: тёмное и светлое стекло, острые углы,
   шрифт Saxonia Antiqua. Экраны, переходы, плашка диалога и т.д.
   ========================================================= */

/* ---- ШРИФТ Saxonia Antiqua ----
   Положите файл шрифта в assets/fonts/ (см. инструкцию там).
   Пока файла нет — используется запасной serif (Georgia). */
@font-face{
  font-family:'Saxonia Antiqua';
  src: url('../assets/fonts/SaxoniaAntiqua.woff2') format('woff2'),
       url('../assets/fonts/SaxoniaAntiqua.woff')  format('woff'),
       url('../assets/fonts/SaxoniaAntiqua.otf')   format('opentype'),
       url('../assets/fonts/SaxoniaAntiqua.ttf')   format('truetype');
  font-weight: normal;
  font-display: swap;
}

:root{
  --bg:            #0b0d17;
  --bg-2:          #12152a;
  --text:          #f2f3fb;
  --muted:         #aab0cc;
  --danger:        #f0687c;

  /* СТЕКЛО — тёмное и светлое */
  --glass-dark:    rgba(14, 17, 30, 0.52);
  --glass-dark-2:  rgba(22, 26, 46, 0.60);
  --glass-light:   rgba(255, 255, 255, 0.30);
  --glass-light-2: rgba(255, 255, 255, 0.44);
  --border-soft:   rgba(255,255,255,0.16);
  --border-strong: rgba(255,255,255,0.45);
  --glass-blur:    blur(13px) saturate(135%);

  --shadow:        0 18px 50px rgba(0,0,0,0.45);
  --font-ui:       "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-title:    'Saxonia Antiqua', Georgia, "Times New Roman", serif;
  --trans:         420ms;

  /* габариты «сцены» — чтобы верхнее меню совпадало с плашкой по краям */
  --stage-max:     1500px;
  --stage-pad:     clamp(16px, 3cqw, 48px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:#000;                 /* чёрные поля вокруг кадра 16:9 */
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
}
/* ---- КАДР ИГРЫ: всегда 16:9 ----
   Размер кадра ограничивает МЕНЬШАЯ сторона окна; по большей стороне
   остаются чёрные поля (letterbox сверху/снизу либо pillarbox по бокам).
   Центрируется через inset:0 + margin:auto — БЕЗ transform: transform на
   родителе ломает backdrop-filter (размытие) у стеклянных кнопок внутри.
   container-type:size — чтобы единицы cqw/cqh внутри считались ОТ КАДРА,
   а не от окна: весь UI (текст, кнопки, отступы) масштабируется вместе с
   кадром и сохраняет положение и пропорции относительно фона. */
#app{
  position:fixed; inset:0; margin:auto;
  width:min(100vw, 177.7778vh);    /* 16/9 */
  height:min(100vh, 56.25vw);      /* 9/16 */
  overflow:hidden;
  background:#000;
  container-type:size;
}

/* =========================================================
   ЭКРАНЫ и переходы (кроссфейд)
   ========================================================= */
.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--trans) ease, visibility var(--trans) ease;
  z-index:1;
}
.screen.active{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; }

/* Сплеш-скрин при запуске — чёрный экран, белые надписи (не пропускается) */
.splash-screen{ background:#000; }
.splash-line{
  font-family:var(--font-title);
  font-weight:700; font-size:24px; letter-spacing:.5px;   /* как кнопки верхнего меню и имя персонажа */
  color:#fff; text-align:center; padding:0 24px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  opacity:0; transition:opacity 800ms ease;
}
.splash-line.shown{ opacity:1; }

/* Все экраны-меню — единый фон (картинка menu_bg).
   Фон вынесен в ::before, чтобы его можно было анимировать
   (transform/filter на самом экране сломали бы backdrop-filter кнопок). */
.menu-screen{
  background:#0b0d17;
  overflow:hidden;
}
.menu-screen::before{
  content:''; position:absolute; inset:0;
  background:#0b0d17 url('../assets/backgrounds/menu_bg.png') center/cover no-repeat;
  animation:
    bgDrift 18s ease-in-out infinite alternate,   /* «дыхание» камеры */
    bgFocus 21s ease-in-out infinite;             /* изредка теряем фокус на ~полсекунды */
  will-change:transform, filter;
}
/* плавный дрейф; scale > 1 — запас, чтобы края не оголялись */
@keyframes bgDrift{
  0%  { transform:scale(1.07) translate(0, 0); }
  33% { transform:scale(1.09) translate(-14px, 9px); }
  66% { transform:scale(1.07) translate(12px, -7px); }
  100%{ transform:scale(1.10) translate(-4px, 6px); }
}
@keyframes bgFocus{
  0%, 90%, 96%, 100%{ filter:blur(0); }
  92%, 94%          { filter:blur(2.5px); }
}
/* содержимое меню — поверх анимируемого фона */
.menu-screen .menu-inner{ position:relative; z-index:1; }

/* Главное меню — БЕЗ затемнения, содержимое справа */
#mainMenu{ justify-content:flex-end; }

/* Стартовый экран — маленький тёмный бокс внизу по центру (стиль плашки диалога) */
#startScreen{ cursor:pointer; align-items:flex-end; }
.start-hint{
  position:relative; z-index:1;            /* поверх анимируемого фона */
  margin-bottom:clamp(28px, 7cqh, 70px);    /* отступ от нижнего края */
  background:rgba(0,0,0,0.60);             /* как плашка диалога */
  border:1px solid rgba(255,255,255,0.14);
  border-radius:0;
  padding:10px 24px;
  font-family:var(--font-title);
  font-size:clamp(15px, 1.7cqw, 19px);      /* текст — как в истории, чуть меньше */
  color:#fff;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 6px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  animation:pulse 2.4s ease-in-out infinite;
}
/* Дополнительные экраны — лёгкое затемнение поверх фото (чтобы панели читались) */
#chapterSelect::after, #settingsScreen::after, #savesScreen::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,9,18,0.66), rgba(8,9,18,0.62));
}

.menu-inner{
  width:min(560px, 92cqw);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:30px;
  animation:rise var(--trans) ease;
}
.menu-inner.wide{ width:min(980px, 94cqw); }

/* содержимое стартового экрана и главного меню — к правому краю */
#startScreen .menu-inner,
#mainMenu .menu-inner{
  align-items:flex-end; text-align:right;
  margin-right:clamp(24px, 7cqw, 120px);
  width:min(460px, 80cqw);
}

/* Только from-кадр: после анимации transform снимается полностью,
   иначе висящий transform на родителе ломает backdrop-filter
   (размытие) у стеклянных кнопок внутри */
@keyframes rise{ from{transform:translateY(18px);opacity:0;} }

/* =========================================================
   ТИПОГРАФИКА
   ========================================================= */
.game-title{
  font-family:var(--font-title);
  font-size:clamp(38px, 6cqw, 68px);
  font-weight:700; letter-spacing:2px; line-height:1.1;
  color:#fff;
  text-shadow:0 4px 26px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.6);
}
.game-subtitle{
  color:#fff; font-size:16px; letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,0.75);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.65;} 50%{opacity:1;} }

.screen-title{
  font-family:var(--font-title);
  font-size:clamp(26px, 3.4cqw, 40px);
  letter-spacing:1px; margin-bottom:8px; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,0.6);
}

/* =========================================================
   КНОПКИ (единый стеклянный стиль, острые углы)
   ========================================================= */
.menu-buttons{
  display:flex; flex-direction:column; gap:14px;
  width:100%; align-items:stretch; margin-top:8px;
}

/* базовая кнопка — ТЁМНОЕ стекло, белый текст */
.btn{
  font-family:var(--font-title);
  font-size:19px; letter-spacing:1px;
  color:#fff;
  background:var(--glass-dark);
  border:1px solid var(--border-soft);
  border-radius:0;                       /* острые углы */
  padding:15px 30px; min-width:260px;
  cursor:pointer;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  transition:transform .18s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--glass-dark-2);
  border-color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.btn:active{ transform:translateY(0) scale(.98); }

/* акцентная кнопка — СВЕТЛОЕ стекло, тёмный текст */
.btn-primary{
  background:var(--glass-light);
  border:1px solid var(--border-strong);
  color:#15171f; font-weight:700; text-shadow:none;
  box-shadow:0 8px 26px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary:hover{ background:var(--glass-light-2); border-color:#fff; }

.btn-ghost{
  background:var(--glass-dark);
  min-width:auto; padding:12px 22px; font-size:16px; color:#fff;
}
.btn-ghost:hover{ background:var(--glass-dark-2); color:#fff; }

.back-btn{ margin-top:14px; }

/* =========================================================
   ВЫБОР ГЛАВЫ (стеклянные карточки)
   ========================================================= */
.chapter-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px; width:100%;
}
.chapter-card{
  position:relative;
  border:1px solid var(--border-soft);
  border-radius:0;
  overflow:hidden;
  background:var(--glass-dark);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  cursor:pointer; text-align:left;
  transition:transform .2s ease, border-color .25s ease, box-shadow .25s ease;
  min-height:190px; display:flex; flex-direction:column;
}
.chapter-card:hover{ transform:translateY(-4px); border-color:#fff; box-shadow:var(--shadow); }
.chapter-card .thumb{ height:110px; background-size:cover; background-position:center; background-color:#1b1c20; }
.chapter-card .cc-body{ padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.chapter-card .cc-num{ color:#fff; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.chapter-card .cc-title{ font-family:var(--font-title); font-size:20px; color:#fff; }
.chapter-card .cc-status{ margin-top:auto; font-size:13px; color:var(--muted); }
.chapter-card.locked{ cursor:not-allowed; opacity:.55; filter:grayscale(.5); }
.chapter-card.locked:hover{ transform:none; border-color:var(--border-soft); box-shadow:none; }
.chapter-card.locked .lock{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(8,9,18,0.5); font-size:34px;
}
.chapter-card.done .cc-status{ color:#fff; }

/* =========================================================
   НАСТРОЙКИ (стеклянная панель)
   ========================================================= */
.settings-panel{
  width:100%;
  background:var(--glass-dark);
  border:1px solid var(--border-soft);
  border-radius:0;
  padding:26px;
  display:flex; flex-direction:column; gap:22px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.settings-row{ display:grid; grid-template-columns:130px 1fr 70px; align-items:center; gap:16px; }
.settings-row label{ font-size:17px; color:#fff; text-align:left; font-family:var(--font-title); }
.settings-val{ color:#fff; font-size:14px; text-align:right; }

input[type="range"]{
  -webkit-appearance:none; appearance:none; height:6px; border-radius:6px;
  background:linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.12) 70%);
  outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:none; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:none; box-shadow:0 2px 8px rgba(0,0,0,.4); }

/* =========================================================
   СОХРАНЕНИЯ (стеклянные карточки)
   ========================================================= */
.saves-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:18px; width:100%; max-height:64cqh; overflow-y:auto; padding:4px;
}
.save-card{
  position:relative;
  border:1px solid var(--border-soft);
  border-radius:0; overflow:hidden;
  background:var(--glass-dark);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  cursor:pointer;
  transition:transform .2s ease, border-color .25s ease, box-shadow .25s ease;
}
.save-card:hover{ transform:translateY(-3px); border-color:#fff; box-shadow:var(--shadow); }
.save-card .thumb{ height:120px; background-size:cover; background-position:center; background-color:#1b1c20; }
.save-card .sc-body{ padding:12px 14px; }
.save-card .sc-title{ font-family:var(--font-title); font-size:18px; margin-bottom:4px; color:#fff; }
.save-card .sc-meta{ font-size:13px; color:var(--muted); display:flex; justify-content:space-between; }
.save-card .sc-progress{ color:#fff; }
.save-card .sc-del{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:0;
  background:rgba(8,9,18,0.7); border:1px solid var(--border-soft);
  color:var(--muted); cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s;
}
.save-card .sc-del:hover{ background:var(--danger); color:#fff; }
.empty-msg{
  grid-column:1/-1;                      /* растянуть на всю сетку */
  text-align:center;
  color:#fff; font-size:16px; padding:40px 0; text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* =========================================================
   ИГРА — СЦЕНА
   ========================================================= */
#game{ background:#000; }
.stage{ position:absolute; inset:0; overflow:hidden; }

/* --- фон + кроссфейд --- */
.bg-layer{ position:absolute; inset:0; background:#000; }
.bg-img{ position:absolute; inset:0; opacity:0; transition:opacity 600ms ease; background-size:cover; background-position:center; }
.bg-img.shown{ opacity:1; }
.bg-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.bg-img.placeholder img{ display:none; }
.bg-img.placeholder::after{
  content:attr(data-label); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.35); font-size:20px; letter-spacing:2px; text-transform:uppercase;
}

/* --- персонажи (гибкое позиционирование) --- */
.char-layer{ position:absolute; inset:0; }
.char{
  position:absolute; bottom:0;
  transform:translateX(-50%);
  transition:left .5s ease, bottom .5s ease, height .5s ease;
  will-change:left, bottom, height;
}
.char-inner{
  height:100%; opacity:0;
  transform:translateY(26px) scaleX(var(--flip, 1));
  transition:opacity .5s ease, transform .5s ease;
}
.char.shown .char-inner{ opacity:1; transform:translateY(0) scaleX(var(--flip, 1)); }
.char.leaving .char-inner{ opacity:0; transform:translateY(20px) scaleX(var(--flip, 1)); }
.char-inner img{ height:100%; width:auto; display:block; }
.char.placeholder .char-inner{
  width:clamp(130px, 15cqw, 240px);
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(16,17,22,0.7));
  border:1px dashed rgba(255,255,255,0.2); border-bottom:none; position:relative;
}
.char.placeholder img{ display:none; }
.char.placeholder .char-inner::after{
  content:attr(data-label); position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:24px;
  color:rgba(255,255,255,0.7); font-size:16px; letter-spacing:1px;
}

/* =========================================================
   ВЕРХНЕЕ МЕНЮ (в игре) — светлое стекло, острые углы
   Текст — в формате имени персонажа (Saxonia bold, белый, 24px).
   Левый край совпадает с левым краем плашки, прогресс — по правому краю.
   ========================================================= */
.topbar{
  position:absolute; top:0; left:0; right:0;
  padding:16px var(--stage-pad);
  z-index:6;
}
.topbar-inner{
  max-width:var(--stage-max); margin:0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.top-btn, .progress-pill{
  font-family:var(--font-title);
  font-weight:700;
  font-size:24px;                       /* как имя персонажа */
  letter-spacing:.5px;
  color:#fff;                           /* белый */
  background:var(--glass-light);
  border:1px solid var(--border-strong);
  border-radius:0;                      /* острые углы */
  padding:6px 18px;
  cursor:pointer;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 4px 18px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.5);
  transition:background .2s, transform .15s;
}
.top-btn:hover{ background:var(--glass-light-2); transform:translateY(-1px); }
.top-btn:active{ transform:translateY(0) scale(.98); }
.progress-pill{ margin-left:auto; cursor:default; }
.progress-pill b{ color:#fff; }

/* =========================================================
   ПЛАШКА ДИАЛОГА — тёмное стекло, острые углы
   ========================================================= */
.dialogue{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 var(--stage-pad) clamp(16px, 3cqh, 32px);
  z-index:5; cursor:pointer;
}
.dialogue-inner{
  position:relative;
  max-width:var(--stage-max); margin:0 auto;
  background:rgba(0,0,0,0.60);            /* #000000, 60% */
  border:1px solid rgba(255,255,255,0.14);
  border-radius:0;                        /* острые углы */
  padding:22px 30px 30px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 -6px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  min-height:150px;
}
.speaker{
  font-family:var(--font-title);
  font-size:24px; color:#fff; font-weight:700; letter-spacing:.5px;
  margin-bottom:12px;
}
.speaker:empty{ display:none; }
.speaker:not(:empty)::after{
  content:''; display:block; height:2px; width:min(320px, 55%); margin-top:8px;
  background:linear-gradient(90deg, rgba(255,255,255,0.65), rgba(255,255,255,0.06) 80%, transparent);
}
.dialogue-text{
  font-family:var(--font-title);
  font-size:clamp(17px, 2cqw, 22px); line-height:1.6; color:#fff;
  min-height:52px; white-space:pre-wrap;
}

/* кнопки выбора внутри плашки */
.choices{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.choices:empty{ display:none; }
.choice-btn{
  font-family:var(--font-title); font-size:18px; color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:0; padding:13px 18px; cursor:pointer; text-align:left;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  opacity:0; transform:translateY(8px);
  animation:choiceIn .35s ease forwards;
  transition:background .2s, transform .15s, border-color .2s;
}
.choice-btn:hover{ background:rgba(255,255,255,0.2); border-color:#fff; transform:translateX(4px); }
@keyframes choiceIn{ to{ opacity:1; transform:translateY(0);} }

/* =========================================================
   ЧЁРНЫЙ ПЕРЕХОД МЕЖДУ ЛОКАЦИЯМИ (смена фона)
   Экран уходит в чёрный, под ним меняется фон, затем проявляется.
   Выше topbar и плашки, но ниже оверлея окончания главы.
   ========================================================= */
.scene-fade{
  position:absolute; inset:0; z-index:9;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity 300ms ease;
}
.scene-fade.shown{ opacity:1; }

/* титр-сплеш поверх чёрного перехода (перевод времени/локации внутри главы) —
   белая надпись по центру, как на стартовом сплеше; своя плавность появления */
.scene-fade-line{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title);
  font-weight:700; font-size:24px; letter-spacing:.5px;
  color:#fff; text-align:center; padding:0 24px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  opacity:0; transition:opacity 500ms ease; pointer-events:none;
}
.scene-fade-line.shown{ opacity:1; }

/* =========================================================
   ОВЕРЛЕЙ ОКОНЧАНИЯ ГЛАВЫ (стекло)
   ========================================================= */
.overlay{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,7,15,0.72); backdrop-filter:blur(6px);
  transition:opacity .4s ease;
}
.overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.overlay-card{
  text-align:center;
  background:var(--glass-dark-2);
  border:1px solid var(--border-soft); border-radius:0;
  padding:40px 46px; box-shadow:var(--shadow);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  animation:rise .4s ease; max-width:440px;
}
.overlay-card h2{ font-family:var(--font-title); font-size:30px; margin-bottom:12px; color:#fff; }
.overlay-card p{ color:var(--muted); margin-bottom:24px; line-height:1.5; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:38px; transform:translate(-50%, 20px);
  background:var(--glass-dark-2);
  border:1px solid var(--border-strong); border-radius:0;
  color:#fff; padding:12px 24px; font-size:15px; box-shadow:var(--shadow);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; z-index:50;
}
.toast.shown{ opacity:1; transform:translate(-50%, 0); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.14); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.24); }