/* Карта места преступления, легенда и полоса людей над картой. */

:root {
  --zone-0: hsl(36 46% 81%);
  --zone-1: hsl(72 22% 80%);
  --zone-2: hsl(18 42% 84%);
  --zone-3: hsl(150 18% 80%);
  --zone-4: hsl(205 22% 82%);
  --zone-5: hsl(330 24% 86%);
  --zone-6: hsl(265 18% 84%);
  --zone-7: hsl(95 20% 84%);
  --block-ink: 0.22;

  /* Выборочный цвет предметов. Оттенки взяты тёмными: зоны на карте залиты
     своими цветами, и светлый значок перестаёт читаться как предмет —
     он спорит с заливкой вместо того, чтобы лежать на ней. */
  --tint-ink: #2b2118;
  --tint-green: #3d4a26;
  --tint-water: #27415a;
  --tint-warm: #6e4718;
}

:root[data-theme='blank'] {
  --zone-0: hsl(36 68% 86%);
  --zone-1: hsl(72 44% 86%);
  --zone-2: hsl(18 66% 89%);
  --zone-3: hsl(150 38% 87%);
  --zone-4: hsl(205 46% 88%);
  --zone-5: hsl(330 48% 91%);
  --zone-6: hsl(265 38% 90%);
  --zone-7: hsl(95 40% 88%);
  /* На светлом бланке заливки бледнее, и затенение занятых клеток нужно крепче. */
  --block-ink: 0.24;
  --tint-ink: #14100a;
  --tint-green: #2f3a1c;
  --tint-water: #1d3448;
  --tint-warm: #5a3a11;
}

.map {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.map__wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.map__stage {
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 12px 30px var(--shadow);
  border-radius: 2px;
}

/* Крупный план на телефоне: поле больше окна и прокручивается пальцем.
   Поля по краям — через margin: auto, а не выравнивание контейнера, иначе
   левый и верхний край поля ушли бы за начало прокрутки. */
.map[data-zoom='in'] .map__wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}

.map[data-zoom='in'] .map__wrap::-webkit-scrollbar {
  display: none;
}

.map[data-zoom='in'] .map__stage {
  margin: auto;
}

/* Тень у края, за которым есть ещё поле: без неё прокрутку не видно. */
.map[data-zoom='in']::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 0, 0, calc(var(--more-l, 0) * 0.55)), transparent 26px),
    linear-gradient(to left, rgba(0, 0, 0, calc(var(--more-r, 0) * 0.55)), transparent 26px),
    linear-gradient(to bottom, rgba(0, 0, 0, calc(var(--more-t, 0) * 0.55)), transparent 26px),
    linear-gradient(to top, rgba(0, 0, 0, calc(var(--more-b, 0) * 0.55)), transparent 26px);
}

.map__svg {
  display: block;
  color: var(--ink);
}

.map__cell {
  fill: var(--zone-0);
}

/* Один и тот же класс красит и клетку карты (SVG), и образец в легенде (HTML). */
.zone-0 { fill: var(--zone-0); background: var(--zone-0); }
.zone-1 { fill: var(--zone-1); background: var(--zone-1); }
.zone-2 { fill: var(--zone-2); background: var(--zone-2); }
.zone-3 { fill: var(--zone-3); background: var(--zone-3); }
.zone-4 { fill: var(--zone-4); background: var(--zone-4); }
.zone-5 { fill: var(--zone-5); background: var(--zone-5); }
.zone-6 { fill: var(--zone-6); background: var(--zone-6); }
.zone-7 { fill: var(--zone-7); background: var(--zone-7); }

/* Строка и колонка, закрытые чужой фишкой. Это следствие правила, а не пометка
   игрока, поэтому вид другой: заливка, а не крестик. */
/* Клетки, где человек может стоять по своей улике. Цвет синий: он не спорит
   ни с красной нитью занятости, ни с чернильным крестиком игрока. */
.map__allow-cell {
  display: none;
  fill: var(--stamp-blue);
  fill-opacity: 0.22;
  stroke: var(--stamp-blue);
  stroke-width: 7;
  stroke-dasharray: 13 9;
  pointer-events: none;
}

.map[data-picking='true'] .map__allow-cell {
  display: inline;
}

.map__block {
  display: none;
  fill: var(--ink);
  opacity: var(--block-ink);
  pointer-events: none;
}

.map[data-picking='true'] .map__block {
  display: inline;
}

/* Нити отвечают на вопрос «куда можно поставить этого человека», поэтому
   видны только при выбранной фишке. Без выбора карта чистая: зоны и значки
   не тонут в красной клетке. */
.map__rule {
  display: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0.4;
  pointer-events: none;
}

.map[data-picking='true'] .map__rule {
  display: inline;
}

/* Нить только что поставленной фишки протягивается и гаснет — этот кадр
   объясняет правило строки и колонки лучше любого текста. */
.map__rule--new {
  display: inline;
  opacity: 0.9;
  stroke-width: 5;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: thread 0.5s ease-out forwards, thread-fade 0.5s ease-in 0.8s forwards;
}

@keyframes thread {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes thread-fade {
  to {
    opacity: 0;
  }
}

.map__solid-cell {
  fill: url(#solid-hatch);
  pointer-events: none;
}

.map__icon {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.8;
  pointer-events: none;
}

.map__icon--solid {
  opacity: 0.55;
}

/* Значок-картинка: фигура работает маской, цвет даёт заливка. */
.map__icon--photo rect {
  fill: var(--tint-ink);
  stroke: none;
}

.map__icon--photo.tint-green rect {
  fill: var(--tint-green);
}

.map__icon--photo.tint-water rect {
  fill: var(--tint-water);
}

.map__icon--photo.tint-warm rect {
  fill: var(--tint-warm);
}

.map__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0.3;
  pointer-events: none;
}

.map__border {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: square;
  pointer-events: none;
}

.map__hit {
  fill: transparent;
  cursor: pointer;
}

.cross__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.92;
}

.cross__line[data-draw='true'] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 0.2s ease-out forwards;
}

.cross__line[data-draw='true'][data-delay='1'] {
  animation-delay: 0.1s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.map__marks,
.map__tokens {
  pointer-events: none;
}

.map__token-disc {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 5;
}

.map__token-no {
  fill: var(--paper);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 46px;
  text-anchor: middle;
  dominant-baseline: central;
}

.map__token--victim .map__token-disc {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 6;
}

.map__token--picked .map__token-disc {
  stroke: var(--accent);
  stroke-width: 8;
}

/* ── Фишка с портретом ────────────────────────────────────────────── */

.map__token--face .map__token-disc {
  fill: var(--photo);
  stroke: var(--paper);
  stroke-width: 6;
}

.map__token-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
}

.map__token--victim .map__token-ring {
  stroke: var(--accent);
  stroke-width: 8;
}

.map__token--picked .map__token-ring {
  stroke: var(--accent);
  stroke-width: 8;
  stroke-dasharray: 14 9;
}

/* Выбор обвиняемого: карта вне зоны потерпевшей притемнена, зона обведена. */
.map__veil-cell {
  fill: var(--desk);
  opacity: 0.55;
}

.map__focus {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: square;
}

/* Свидетели сказали «стоит не там»: толстая красная кайма, пока фишку не перенесут. */
.map__token.map__token--wrong .map__token-disc {
  stroke: var(--accent);
  stroke-width: 14;
  animation: token-wrong 0.9s ease-in-out 3;
}

@keyframes token-wrong {
  50% {
    stroke-width: 24;
  }
}

.map__token-badge {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 4;
}

.map__token--victim .map__token-badge {
  fill: var(--accent);
}

.map__token-no--small {
  font-size: 29px;
}

/* Предмет под фишкой: бумажный кружок в углу напротив номера. */
.map__token-item-disc {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
}

/* На мелкой клетке кружок крупнее: силуэт важнее того края портрета,
   который он закрывает. */
.map__stage[data-small='true'] .map__token-item {
  transform: scale(1.3);
}

.map__token-item .map__icon {
  opacity: 1;
  /* Рисованный значок уменьшен вдвое — линию утолщаем, чтобы не истаяла. */
  stroke-width: 9;
}

/* ── Подписи зон ──────────────────────────────────────────────────── */

.map__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map__zone-name {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 1px 9px;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  opacity: 0.94;
  box-shadow: 0 1px 4px var(--shadow);
}

.map[data-focusing='true'] .map__zone-name[data-focus='false'] {
  display: none;
}

/* При выборе обвиняемого предметы под фишками не нужны, а на мелком поле
   их кружки закрывают лица — в том числе лицо потерпевшей. */
.map[data-focusing='true'] .map__token-item {
  display: none;
}

/* ── Стороны света ────────────────────────────────────────────────── */

/* Подписи лежат на столе снаружи поля, в полях `.map__wrap`, которые
   отводит `relayout`: клетки, фишки и таблички зон они не закрывают. */
.map__dir {
  position: absolute;
  color: var(--on-desk);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.map__dir--n,
.map__dir--s {
  left: 50%;
  transform: translateX(-50%);
}

.map__dir--n {
  bottom: calc(100% + 4px);
}

.map__dir--s {
  top: calc(100% + 4px);
}

/* По бокам — вертикально, как на полях географической карты: запад читается
   снизу вверх, восток сверху вниз. */
.map__stage[data-compass='sides'] .map__dir--w,
.map__stage[data-compass='sides'] .map__dir--e {
  top: 50%;
  writing-mode: vertical-rl;
}

.map__stage[data-compass='sides'] .map__dir--w {
  right: calc(100% + 4px);
  transform: translateY(-50%) rotate(180deg);
}

.map__stage[data-compass='sides'] .map__dir--e {
  left: calc(100% + 4px);
  transform: translateY(-50%);
}

/* Узкий экран: запад и восток — по краям строки над картой, со стрелкой,
   раз подпись стоит не у своего края. */
.map__stage[data-compass='top'] .map__dir--w,
.map__stage[data-compass='top'] .map__dir--e {
  bottom: calc(100% + 4px);
}

.map__stage[data-compass='top'] .map__dir--w {
  left: 0;
}

.map__stage[data-compass='top'] .map__dir--e {
  right: 0;
}

.map__stage[data-compass='top'] .map__dir--w::before {
  content: '← ';
}

.map__stage[data-compass='top'] .map__dir--e::after {
  content: ' →';
}

/* ── Легенда ──────────────────────────────────────────────────────── */

/* Легенда забирает всё, что осталось рядом с картой: на широком экране
   пустой полосы справа нет, а строки встают в несколько колонок. */
.legend {
  flex: 1 1 auto;
  min-width: 200px;
  min-height: 0;
  align-self: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px var(--shadow);
  padding: 10px 12px;
}

.legend__block + .legend__block {
  margin-top: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

.legend__title {
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.legend__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 5px 14px;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.2;
}

.legend__swatch {
  flex: 0 0 auto;
  width: 26px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.legend__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.legend__item--solid {
  color: var(--ink-soft);
}

.legend__item--solid .legend__icon {
  opacity: 0.7;
}

.legend__icon--photo {
  display: block;
  background-color: var(--tint-ink);
  mask-image: var(--mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--mask);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.legend__icon--photo.tint-green {
  background-color: var(--tint-green);
}

.legend__icon--photo.tint-water {
  background-color: var(--tint-water);
}

.legend__icon--photo.tint-warm {
  background-color: var(--tint-warm);
}

/* ── Полоса людей над картой (телефон) ────────────────────────────── */

.chips {
  display: none;
  flex: 0 0 auto;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.chips::-webkit-scrollbar {
  display: none;
}

/* Ширина фишки — по самому длинному слову её имени: имя переносится
   только по пробелу и не обрезается. */
.chip {
  flex: 0 0 auto;
  width: min-content;
  min-width: 74px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 10px var(--shadow);
  position: relative;
}

.chip__photo {
  width: 34px;
  height: 42px;
  background: var(--photo);
  overflow: hidden;
  position: relative;
}

.chip__photo svg,
.chip__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.chip__photo img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.chip__no {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
}

.chip__name {
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
  padding: 0 3px;
}

.chip[data-picked='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(163, 49, 43, 0.3);
}

.chip[data-placed='true'] {
  opacity: 0.5;
}

.chip[data-victim='true'] .chip__no {
  color: var(--accent);
}

/* ── Кнопки под картой (телефон, планшет) ────────────────────────── */

.maptools {
  display: none;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: space-between;
}

.maptools__btn {
  min-height: 44px;
  padding: 8px 14px;
}

.maptools__btn[aria-pressed='true'] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* Кнопка крупного плана справа, даже когда легенда одна. */
.maptools__btn + .maptools__btn {
  margin-left: auto;
}

.maptools__btn[hidden] {
  display: none;
}

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

  .maptools {
    display: flex;
  }

  .panel--map {
    position: relative;
  }

  /* Легенда — по кнопке, поверх нижней части карты: постоянная, она заняла
     бы у поля четверть высоты экрана. */
  .legend {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 52px;
    z-index: 5;
    max-width: none;
    max-height: 60%;
    padding: 8px 10px;
  }

  .panel--map[data-legend='open'] .legend {
    display: block;
  }

  /* Фишка в полосе — портрет слева от имени: в столбик она на треть выше,
     и эту высоту отдала бы клетка карты. */
  .chip {
    flex-direction: row;
    min-height: 52px;
    gap: 6px;
    padding: 4px 8px 4px 4px;
  }

  .chip__name {
    text-align: left;
    padding: 0;
  }

  .legend__items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
  }


  .legend__block + .legend__block {
    margin-top: 8px;
    padding-top: 8px;
  }
}