/* Каркас экрана расследования: стол, шапка, панели, панель действий. */

.app {
  position: relative;
  display: grid;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: var(--desk);
  grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'hdr    hdr'
    'people map'
    'bar    bar';
  --gap: 10px;
  gap: var(--gap);
  padding: var(--gap);
  padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
}

/* Свет настольной лампы сверху и виньетка по краям — один слой под содержимым. */
.app::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 80% at 50% -10%,
      rgba(255, 243, 214, calc(var(--lamp-strength) * 0.5)) 0%,
      rgba(255, 243, 214, calc(var(--lamp-strength) * 0.14)) 38%,
      transparent 68%
    ),
    radial-gradient(130% 110% at 50% 45%, transparent 42%, var(--desk-edge) 100%);
}

.app > * {
  position: relative;
}

/* ── Шапка дела ───────────────────────────────────────────────────── */

.hdr {
  grid-area: hdr;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 7px 18px 8px;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px var(--shadow);
  clip-path: polygon(
    0 4px, 1.2% 1px, 6% 3px, 14% 0, 28% 3px, 46% 1px, 63% 4px, 78% 0, 90% 3px, 100% 1px,
    100% calc(100% - 3px), 88% 100%, 72% calc(100% - 2px), 55% 100%, 38% calc(100% - 3px),
    21% 100%, 9% calc(100% - 2px), 0 100%
  );
}

.hdr__no {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: pre-line;
  text-align: center;
  line-height: 1.15;
  padding-top: 6px;
}

.hdr__no--logo {
  text-transform: uppercase;
}

.hdr__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Название и сводка в одну строку, пока сводка помещается рядом; длинная
   сводка переносится, а не обрезается многоточием. */
.hdr__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  min-width: 0;
}

.hdr__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
}

.hdr__meta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Полное название игры над заголовком хаба. */
.hdr__app {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.hdr__task {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.hdr__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.hdr__badge {
  font-size: 16px;
  letter-spacing: 0.14em;
  border: 2px solid var(--stamp-blue);
  color: var(--stamp-blue);
  padding: 2px 8px;
  transform: rotate(-3deg);
  opacity: 0.85;
}

/* ── Панели ───────────────────────────────────────────────────────── */

.panel {
  min-width: 0;
  min-height: 0;
}

.panel--people {
  grid-area: people;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel--map {
  grid-area: map;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* Выбор обвиняемого — на месте списка людей, карта рядом не закрыта. На время
   выбора карта и панель действий не принимают касаний: расстановка та, что
   сверяется с решением. */
.panel--accuse {
  --pad: 18px;
  grid-area: people;
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pad);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px var(--shadow);
}

.panel--accuse[hidden] {
  display: none;
}

/* «К делу» всегда на виду, даже когда список подозреваемых прокручивается. */
.panel--accuse .sheet__actions {
  position: sticky;
  bottom: calc(-1 * var(--pad));
  margin: 12px calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: 10px var(--pad) var(--pad);
  background: var(--paper);
}

.accuse__zone {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}

.app[data-accusing='true'] .panel--map,
.app[data-accusing='true'] .bar {
  pointer-events: none;
}

.app[data-accusing='true'] .bar {
  opacity: 0.35;
}

/* ── Панель действий ──────────────────────────────────────────────── */

.bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Подсказка в панели сжимается первой: кнопка в две строки выше и хуже читается. */
.bar > .btn {
  flex-shrink: 0;
}

.btn {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 11px 16px;
  min-height: 46px;
  font-size: 16px;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px var(--shadow);
  transition: transform 0.1s ease;
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 4px var(--shadow);
}

.btn--ghost {
  background: transparent;
  border-color: var(--on-desk-line);
  color: var(--on-desk);
  box-shadow: none;
}

.btn--main {
  margin-left: auto;
  background: var(--accent);
  border-color: #6d1f1b;
  color: #fff3e2;
  font-weight: 700;
  padding-inline: 26px;
}

.btn--wide {
  width: 100%;
}

.bar__hint {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--on-desk);
  opacity: 0.62;
  font-size: 16px;
  line-height: 1.25;
}

.bar__hint[data-active='true'] {
  color: var(--lamp);
  opacity: 1;
  font-weight: 700;
}

.attempts__dots {
  display: flex;
  gap: 5px;
}

.attempts__dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--on-desk);
  border-radius: 50%;
}

.attempts__dot[data-spent='true'] {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Мобильные секции ─────────────────────────────────────────────── */

.sections {
  display: none;
  grid-area: tabs;
  gap: 6px;
}

/* Низкий десктоп (ноутбук с шапкой площадки и баннером): высота уходит карте.
   Сводка дела — справка, как на телефоне; кнопки панели уже, подсказка рядом
   с ними переносится на меньше строк. */
@media (orientation: landscape) and (min-width: 901px) and (max-height: 680px) {
  .app[data-screen='case'] .hdr {
    padding-top: 4px;
    padding-bottom: 5px;
  }

  .app[data-screen='case'] .hdr__meta {
    display: none;
  }

  .bar > .btn {
    padding-left: 12px;
    padding-right: 12px;
    letter-spacing: 0.04em;
  }
}

/* Третья вкладка нужна только на телефоне: на десктопе те же кнопки в панели. */
.sections__btn--menu {
  display: none;
}

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .sections__btn--menu {
    display: block;
  }
}

.sections__btn {
  flex: 1 1 0;
  min-height: 48px;
  border: 2px solid var(--on-desk-line);
  background: transparent;
  color: var(--on-desk);
  font-size: 16px;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  opacity: 0.8;
}

.sections__btn[aria-selected='true'] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  opacity: 1;
}

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .app {
    --gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'hdr'
      'tabs'
      'stage'
      'bar';
  }

  .sections {
    display: flex;
  }

  /* Штамп «Дело дня» делит строку только с названием, задача дела идёт
     под ним во всю ширину: иначе штамп сжимался и заезжал на название. */
  .hdr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'no line side'
      'no task task';
    align-items: start;
    padding: 8px 12px;
    gap: 0 10px;
  }

  .hdr__no {
    grid-area: no;
  }

  .hdr__main {
    display: contents;
  }

  .hdr__line {
    grid-area: line;
  }

  .hdr__task {
    grid-area: task;
  }

  /* В хабе задачи нет: полное название игры встаёт на её место, под заголовок. */
  .hdr__app {
    grid-area: task;
  }

  .hdr__title {
    font-size: 17px;
    /* Длинное английское название иначе выходит за узкую колонку шапки. */
    overflow-wrap: break-word;
  }

  /* Дата дела на телефоне отнимала у названия треть ширины; она есть в хабе. */
  .hdr__side {
    grid-area: side;
    padding-top: 4px;
  }

  .hdr__badge {
    width: min-content;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-align: center;
  }

  .hdr__badge--date {
    display: none;
  }

  .hdr__meta {
    font-size: 16px;
  }

  .hdr__line {
    display: block;
  }

  /* Размер поля и уровень — справка, а не инструкция: на телефоне эти строки
     отнимают у карты больше, чем дают игроку. */
  .hdr__meta {
    display: none;
  }

  .hdr__task {
    font-size: 16px;
    line-height: 1.3;
  }

  /* На вкладке карты шапка — только номер и название: задачу дела игрок
     читает на вкладке людей, а высота нужна полю. */
  .app[data-screen='case'][data-section='map'] .hdr__task {
    display: none;
  }

  .panel--people,
  .panel--map {
    grid-area: stage;
  }

  .panel--map {
    flex-direction: column;
    gap: 6px;
  }

  .bar__hint {
    display: none;
  }

  /* На 390 px в панель действий влезают только кнопки самого дела. */
  .bar .btn--ghost:not([hidden]) {
    display: none;
  }

  .bar .btn--ghost.btn--ask:not([hidden]),
  .bar .btn--ghost.bar__keep:not([hidden]) {
    display: block;
  }

  .bar {
    gap: 8px;
  }

  .btn {
    padding: 10px 12px;
    letter-spacing: 0.06em;
  }

  .btn--main {
    padding-inline: 18px;
  }
}

/* Телефон и планшет в портрете: выбор обвиняемого под картой, шапка, вкладки,
   полоса фишек, легенда и панель действий уступают карте место. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .app[data-accusing='true'] {
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      'stage'
      'dock';
  }

  .app[data-accusing='true'] .hdr,
  .app[data-accusing='true'] .sections,
  .app[data-accusing='true'] .chips,
  .app[data-accusing='true'] .maptools,
  .app[data-accusing='true'] .legend,
  .app[data-accusing='true'] .bar {
    display: none;
  }

  .panel--accuse {
    --pad: 12px;
    grid-area: dock;
    max-height: 56dvh;
  }

  .panel--accuse .sheet__title {
    font-size: 20px;
  }

  .panel--accuse .sheet__sub {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .panel--accuse .accuse__zone {
    margin-bottom: 8px;
  }

  /* Подозреваемые — одной строкой с прокруткой вбок, как полоса фишек над
     картой: в столбик список занял бы полэкрана, и карта с зоной потерпевшей
     стала бы мелкой. */
  .panel--accuse .suspects {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }

  .panel--accuse .suspects::-webkit-scrollbar {
    display: none;
  }

  .panel--accuse .suspects__item {
    flex: 0 0 auto;
    width: min-content;
    min-height: 52px;
    padding: 3px 8px 3px 4px;
    gap: 6px;
  }

  .panel--accuse .suspects__photo {
    width: 32px;
    height: 38px;
  }
}

/* Экраны между делами: одна колонка, шапка и панель действий те же. */
.app[data-screen='hub'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'hdr'
    'stage'
    'bar';
}