/* Главное меню (ui/title-menu.js): столбик пунктов и панель подменю рядом, сцена Лощины видна справа */
.boot-inner { width: auto; max-width: calc(100vw - 7vw - 24px); }
.boot-menu.title-menu { display: grid; grid-template-columns: 300px; align-items: start; }

/* ── Пункты ── */
.title-nav { display: flex; flex-direction: column; gap: 2px; }
.title-item {
  position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 11px 16px 11px 22px; text-align: left; cursor: pointer;
  background: transparent; border: none; border-radius: 2px; color: var(--ink);
  font-family: var(--font-title); font-size: 21px; letter-spacing: .3px;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.title-item::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--gold);
  transform: translateY(-50%); transition: height .18s ease;
}
.title-item-sub { font-family: var(--font); font-size: 12px; letter-spacing: .2px; color: var(--ink-dim); }
.title-item:hover, .title-item:focus-visible, .title-item.open {
  background: linear-gradient(90deg, rgba(219, 194, 140, .14), rgba(219, 194, 140, 0)); color: var(--gold-2); padding-left: 28px; outline: none;
}
.title-item:hover::before, .title-item:focus-visible::before, .title-item.open::before { height: 70%; }
.title-item.primary { margin-bottom: 8px; padding-top: 14px; padding-bottom: 14px; font-size: 25px; }
.title-item.primary .title-item-name::before { content: '▸ '; color: var(--gold); }
.title-item.primary .title-item-sub { color: #cfd8cc; }

/* ── Панель подменю ── */
.title-panel {
  /* во всю высоту справа от пунктов, над подписью внизу — не зависит от того, где кончается заголовок */
  position: fixed; top: 48px; max-height: calc(100vh - 112px); left: calc(7vw + 340px); width: min(440px, calc(100vw - 7vw - 380px)); overflow-y: auto; z-index: 3;
  padding: 18px 22px 22px; background: rgba(10, 26, 28, .88); border: 1px solid var(--edge); border-left: 2px solid var(--gold);
  border-radius: 2px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(3px);
  animation: title-panel-in .2s ease;
}
@keyframes title-panel-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.title-panel-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.title-panel-head h2 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--gold-2); }
.title-panel-head p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
.title-back {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge); background: transparent;
  color: var(--gold); cursor: pointer; font-size: 15px;
}
.title-back:hover { border-color: var(--edge-strong); background: rgba(219, 194, 140, .1); }
.title-label { margin: 16px 0 8px; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.title-note { margin: 8px 0 0; font-size: 11px; color: var(--ink-dim); }
.title-warn { margin: 10px 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: #f0dcb0; background: rgba(219, 194, 140, .1); border-left: 2px solid var(--gold); }
.title-warn.bad { color: #ffc9b8; background: rgba(209, 122, 89, .12); border-left-color: #d17a59; }

/* выбор слота и сложности */
.title-choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.title-choice-col { display: grid; gap: 8px; }
.title-choice {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); border-radius: 3px; color: var(--ink);
}
.title-choice b { font-size: 13px; color: var(--gold-2); }
.title-choice span { font-size: 11.5px; line-height: 1.45; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-choice.wide span { white-space: normal; }
.title-choice:hover { border-color: var(--edge-strong); }
.title-choice.on { border-color: var(--gold); background: rgba(219, 194, 140, .12); box-shadow: inset 2px 0 0 var(--gold); }
.title-go { margin-top: 18px; width: 100%; padding: 12px; font-size: 15px; }

/* карточки сохранений */
.title-save { padding: 12px 14px; margin-bottom: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); border-radius: 3px; }
.title-save.active { box-shadow: inset 2px 0 0 var(--gold); }
.title-save.broken { border-color: #a4483c; }
.title-save-slot { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.title-save h3 { margin: 6px 0 4px; font-family: var(--font-title); font-weight: 400; font-size: 18px; color: var(--ink); }
.title-save p { margin: 2px 0; font-size: 12px; color: #d3dccf; }
.title-save .dim { color: var(--ink-dim); }
.title-save-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.title-save-actions .btn { padding: 6px 12px; font-size: 12px; }

/* об игре */
.title-about { margin: 0; font-size: 13px; line-height: 1.6; color: #d3dccf; }
.title-credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.title-credits li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--edge); border-radius: 3px; }
.title-credits b { font-size: 13px; font-weight: 600; color: var(--gold-2); }
.title-credits span { font-size: 12px; line-height: 1.45; color: var(--ink-dim); }

.title-status { grid-column: 1; max-width: 300px; min-height: 16px; margin: 14px 0 0 22px; font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); }

/* узкий экран: панель поверх, во всю ширину колонки */
@media (max-width: 900px) {
  .boot-menu.title-menu { grid-template-columns: minmax(0, 340px); }
  .title-panel { inset: 16px; width: auto; max-height: none; z-index: 5; background: rgba(10, 26, 28, .97); }
  .title-choice-row { grid-template-columns: 1fr; }

}
@media (max-height: 640px) {
  .title-item { padding-top: 7px; padding-bottom: 7px; font-size: 18px; }
  .title-item.primary { font-size: 21px; }
}
/* телефон боком: высоты мало — заголовок слева, меню справа, подменю поверх всего */
@media (max-height: 520px) and (min-width: 560px) {
  .boot-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); column-gap: 28px; align-items: start;
    width: 100%; max-width: none; padding: max(14px, env(safe-area-inset-top)) max(4vw, env(safe-area-inset-right)) 24px max(5vw, env(safe-area-inset-left)); }
  .boot-inner > * { grid-column: 1; }
  .boot-inner > .boot-menu, .boot-inner > .boot-progress { grid-column: 2; grid-row: 1 / span 8; align-self: center; }
  .boot-emblem { display: none; }
  .boot-eyebrow { margin-bottom: 8px; font-size: 9px; }
  .boot h1, .boot.menu-panel-open h1 { font-size: clamp(28px, 7.5vh, 40px); letter-spacing: -.6px; }
  .boot-sub, .boot.menu-panel-open .boot-sub { font-size: 15px; margin: 6px 0 10px; letter-spacing: 3px; }
  .boot-description { font-size: 12px; line-height: 1.6; margin-bottom: 8px; }
  .boot-touch-note, .boot-slow-note { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.5; }
  .boot-footer { display: none; }
  .boot-menu.title-menu { grid-template-columns: minmax(0, 1fr); }
  .title-item { padding: 6px 12px 6px 18px; font-size: 17px; }
  .title-item.primary { margin-bottom: 4px; padding-top: 8px; padding-bottom: 8px; font-size: 20px; }
  .title-item-sub { font-size: 11px; }
  .title-panel { inset: 10px; width: auto; max-height: none; z-index: 5; padding: 12px 16px 14px; background: rgba(10, 26, 28, .97); }
  .title-panel-head { margin-bottom: 6px; }
  .title-panel-head h2 { font-size: 19px; }
  .title-panel-head p { margin-top: 2px; }
  .title-label { margin: 8px 0 5px; }
  /* слоты в ряд, сложность — в две колонки: «Начать путешествие» видно без прокрутки */
  .title-choice-row { grid-template-columns: repeat(3, 1fr); }
  .title-choice-col { grid-template-columns: 1fr 1fr; }
  .title-choice { padding: 8px 10px; }
  .title-go { margin-top: 12px; padding: 10px; }
  .title-status { margin-left: 18px; }
}
.reduced-motion .title-panel { animation: none; }
.reduced-motion .title-item, .reduced-motion .title-item::before { transition: none; }

/* подменю открыто: заголовок сжимается, описание уходит — левая колонка помещается до панели */
.boot h1, .boot-sub, .boot-description, .boot-eyebrow, .boot-emblem { transition: font-size .22s ease, margin .22s ease, opacity .22s ease, max-height .22s ease; }
.boot-description, .boot-eyebrow, .boot-emblem { max-height: 120px; overflow: hidden; }
.boot.menu-panel-open h1 { font-size: 34px; letter-spacing: -.6px; max-width: 300px; }
.boot.menu-panel-open .boot-sub { font-size: 16px; margin: 10px 0 20px; }
.boot.menu-panel-open .boot-description, .boot.menu-panel-open .boot-eyebrow, .boot.menu-panel-open .boot-emblem { max-height: 0; margin: 0; opacity: 0; }
.reduced-motion .boot h1, .reduced-motion .boot-sub, .reduced-motion .boot-description { transition: none; }