/* Shared SVG artwork and paper controls for the main and Odyssey campaigns. */
.noir-game.campaign-ink {
  --ng-paper: #fff9e9;
  --ng-cream: #292822;
  --ng-ink: #292822;
  --ng-gold: #e7c576;
  --ng-pink: #d69b8b;
  --ng-selection: #577e9b;
  color: #292822;
  background: #f5f3e9;
}
.campaign-ink .ng-top { gap: 7px; }
.campaign-ink .ng-icon,
.campaign-ink .ng-tool,
.campaign-ink .ng-hint,
.campaign-ink .ng-chip,
.campaign-ink .ng-submit {
  border: 1.7px solid #292822;
  border-radius: 7px;
  color: #292822;
  background: #fffbef;
  box-shadow: 2px 3px 0 #29282226;
}
.campaign-ink .ng-icon { width: 38px; height: 46px; flex: none; }
.campaign-ink .ng-tools { gap: 5px; padding: 0; background: none; }
.campaign-ink .ng-tool { font-size: 11px; }
.campaign-ink .ng-tool.active { background: #efda9d; box-shadow: 2px 3px 0 #29282244; }
.campaign-ink .ng-tool:hover:not(.active),
.campaign-ink .ng-chip:hover:not(:disabled) { color: #292822; background: #efe9d7; }
.campaign-ink .ng-hint { padding: 0 9px; background: #e4b2a1; }
.campaign-ink .ng-hint-copy small { color: #553e30; background: #f1cbbc; }
.campaign-ink .ng-hint-count { border: 1.5px solid #292822; background: #f2dfad; }
.campaign-ink .ng-submit { color: #817966; background: #eee9dc; }
.campaign-ink .ng-submit.ready { color: #292822; background: #bdd0a6; box-shadow: 2px 3px 0 #29282230; }
.campaign-ink .ng-timer { color: #292822; }
.campaign-ink .odyssey-icon-svg { flex: none; width: 25px; height: 25px; fill: initial; stroke: initial; stroke-width: initial; }
.campaign-ink .ng-tool .odyssey-icon-svg { width: 28px; height: 28px; }
.campaign-ink .ng-chip .odyssey-icon-svg,
.campaign-ink .ng-submit .odyssey-icon-svg,
.campaign-ink .ng-timer .odyssey-icon-svg { width: 21px; height: 21px; }
.campaign-ink .ng-help span:first-child { width: auto; height: auto; border: 0; border-radius: 0; }
.campaign-ink .ng-suspects > h2 { color: #292822; }
.campaign-ink .ng-suspects { background: #ebe8dc; border: 1.5px solid #292822; border-radius: 8px; box-shadow: 3px 4px 0 #29282222; }
.campaign-ink .ng-card {
  border: 1.8px solid #292822;
  border-radius: 6px;
  color: #292822;
  background: #fff9e9;
  box-shadow: 3px 4px 0 #29282226;
}
.campaign-ink .ng-card:hover { background: #fff4d6; box-shadow: 3px 4px 0 #29282240; }
.campaign-ink .ng-card.selected { outline: none; }
.campaign-ink .ng-card.placed { opacity: .55; }
.campaign-ink .ng-card.placed.selected { opacity: 1; }
.campaign-ink .ng-card.validation-correct { --ng-selection: #527d5d; }
.campaign-ink .ng-card.has-conflict,
.campaign-ink .ng-card.validation-wrong { --ng-selection: #a3121f; }
.noir-game.campaign-ink .suspect-card.ng-card { border: 1.8px solid #292822; background: #fff9e9; box-shadow: 3px 4px 0 #29282226; }
.noir-game.campaign-ink .suspect-card.ng-card.selected { border-color: var(--ng-selection); background: #fff9e9; box-shadow: 0 0 0 2px var(--ng-selection), 3px 4px 0 #29282226; }
.noir-game.campaign-ink .suspect-card.ng-card::after { width: 6px; height: 6px; border: 1px solid #292822; background: #bcac8b; box-shadow: 1px 1px 0 #29282230; }
.noir-game.campaign-ink .suspect-card.ng-card.selected::after { display: none; }
.campaign-ink .ng-photo,
.campaign-ink .ng-card:nth-child(even) .ng-photo { border-color: #292822; background: #d9ceb2; }
.campaign-ink .ng-photo::before { display: none; }
.campaign-ink .ng-photo img { width: 100%; height: 100%; object-fit: cover; background: none !important; filter: none; }
/* Телефон: выбранная карточка обводится целиком одной рамкой, фото и показания — без своих рамок. */
.campaign-ink .ng-card.selected .ng-photo { outline: none; }
.campaign-ink .ng-card.selected .ng-card-body { outline: none; }
.campaign-ink .ng-name { color: #292822; }
.campaign-ink .ng-name em { color: #fff; background: #8a3b44; }
.campaign-ink .ng-clue { color: #443e32; }
.campaign-ink .ng-clue-icon { background: #ede3cb; border-color: #b6a989; }
.campaign-ink .ng-clue-icon img { filter: none; }
.campaign-ink .ng-hints { color: #66774f; border-color: #b0b69a; }
.noir-game.campaign-ink .board-wrap {
  border: 3px solid #292822;
  border-radius: 2px;
  background: #efe8d3;
  box-shadow: 5px 6px 0 #29282222;
}
.noir-game.campaign-ink .board-wrap::after { display: none; }
.campaign-ink .cell {
  background-image: var(--floor-image);
  background-size: 100% 100%;
  background-position: center;
  border-radius: 0;
}
/* Opaque, neutral SVG lines replace borders tinted by the room's fallback colour. */
.campaign-ink .board-grid { position: relative; }
.noir-game.campaign-ink .cell {
  border-width: 0 !important;
  background-color: #efe8d3;
  background-origin: border-box;
  background-repeat: no-repeat;
  box-shadow: none;
}
.campaign-ink .board-lines {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.campaign-ink .board-lines path {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.campaign-ink .board-cell-lines { stroke: #6b6254; stroke-width: 1px; }
.campaign-ink .board-room-walls { stroke: #292822; stroke-width: 4px; }
.campaign-noir .board-room-walls { stroke-width: 8px; }
.campaign-ink .cell.object-footprint { z-index: 2; }
.campaign-ink .cell.object-anchor { z-index: 4; }
.campaign-ink .cell.has-character { z-index: 8; }
.campaign-ink .cell .object-image {
  width: 86%; height: 86%;
  object-fit: contain;
  filter: none;
  transform: none;
}
.campaign-ink .cell .object-image.multi-cell-object {
  position: absolute; top: 7%; left: 7%;
  width: calc(var(--object-cols) * 100% - 14%);
  height: calc(var(--object-rows) * 100% - 14%);
  object-fit: fill;
}
.campaign-ink .cell:hover .object-image { transform: none; }
.campaign-ink .cell-cross { display: grid; place-items: center; inset: 0; }
.campaign-ink .cell-cross::before,
.campaign-ink .cell-cross::after { display: none; }
.campaign-ink .cell-cross .odyssey-icon-svg { width: 68%; height: 68%; }
/* Автокрестики такие же жирные, как поставленные вручную. */
.noir-game.campaign-ink .cell-cross.auto { opacity: 1; }
/* Крестики и заметки выше ковра (якорная клетка ковра — z-index 4 и закрывает остальные три),
   но ниже полароида (8) и линий доски (9). */
.noir-game.campaign-ink .cell-cross { z-index: 5; }
/* Заметки под крестиком: подозреваемый в этой клетке уже исключён строкой или столбцом. */
.noir-game.campaign-ink .cell-notes.struck { opacity: 0.4; }
.campaign-ink .room-label { border-color: #292822; color: #292822; background: #fff9e9e8; box-shadow: 1px 2px 0 #29282220; white-space: normal; text-overflow: clip; line-height: 1.05; font-size: clamp(6px, 1.55cqw, 11px); padding: 2px 3px; letter-spacing: 0; }
/* Полароид всегда целиком внутри клетки: фото тянется по рамке, а не задаёт её высоту,
   поэтому крупная подпись не выталкивает карточку за край доски. */
.campaign-ink .placed-portrait,
.campaign-ink .placed-portrait.on-object {
  z-index: 8; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch;
  width: 68%; height: 80%; padding: 5% 5% 0;
  border: 1.5px solid #292822; border-radius: 2px;
  background: #fffbee; box-shadow: 2px 4px 0 #29282238;
  overflow: hidden; transform: rotate(var(--tilt, -2deg));
}
.game-screen.campaign-ink .placed-portrait img {
  width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
  border: 1px solid #292822; object-fit: cover; object-position: 50% 30%; transform: none;
}
/* На ковре полароид меньше и прижат к внешнему углу своей четверти — середина ковра видна. */
.campaign-ink .placed-portrait.on-rug { width: 56%; height: 66%; padding: 4% 4% 0; }
.campaign-ink .placed-portrait.on-rug .polaroid-name { font-size: clamp(6px, 10cqw, 13px); }
.campaign-ink .placed-portrait.on-rug.rug-q-0-0 { justify-self: start; align-self: start; margin: 5% 0 0 5%; }
.campaign-ink .placed-portrait.on-rug.rug-q-0-1 { justify-self: end; align-self: start; margin: 5% 5% 0 0; }
.campaign-ink .placed-portrait.on-rug.rug-q-1-0 { justify-self: start; align-self: end; margin: 0 0 5% 5%; }
.campaign-ink .placed-portrait.on-rug.rug-q-1-1 { justify-self: end; align-self: end; margin: 0 5% 5% 0; }
/* Каждая клетка — контейнер, поэтому подпись на полароиде считается от ширины клетки
   и одинаково читается во всех кампаниях и на любом размере поля. */
.noir-game.campaign-ink .cell { container-type: inline-size; }
.campaign-ink .polaroid-name { color: #292822; font-size: clamp(6px, 10.5cqw, 16px); font-weight: 700; line-height: 1.5; text-align: center; white-space: nowrap; overflow: hidden; }
.campaign-ink .placed-portrait.victim { border-color: #a85649; background: #fae1d1; }
.campaign-ink .placed-portrait[data-suspect-id="1"] { --tilt: 2deg; }
.campaign-ink .placed-portrait[data-suspect-id="3"] { --tilt: 2.5deg; }
.campaign-ink .placed-portrait[data-suspect-id="6"] { --tilt: -2.5deg; }
.odyssey-screen .case-preview-cell { background-image: var(--floor-image); }
.odyssey-screen .preview-object-anchor { z-index: 3; }
.odyssey-screen .case-preview-object { filter: none; }
@media (max-width: 599px) {
  .campaign-ink .ng-top { gap: 4px; }
  .campaign-ink .ng-tools { gap: 3px; }
  .campaign-ink .ng-icon { width: 28px; height: 40px; }
  .campaign-ink .ng-icon .odyssey-icon-svg { width: 21px; height: 21px; }
  .campaign-ink .ng-tool { font-size: 9px; }
  .campaign-ink .ng-tool .odyssey-icon-svg { width: 23px; height: 23px; }
  .campaign-ink .ng-hint { padding: 0 5px; gap: 3px; }
  .campaign-ink .ng-hint-bulb .odyssey-icon-svg { width: 22px; height: 22px; }
}

.cases-screen .preview-object-anchor { z-index: 3; }
.cases-screen .case-preview-object { filter: none; }

/* Each desktop suspect is a small polaroid overlapping its own testimony card. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .noir-game.campaign-ink .suspect-card.ng-card,
  .noir-game.campaign-ink .suspect-card.ng-card.selected,
  .noir-game.campaign-ink .suspect-card.ng-card.victim {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    opacity: 1;
  }
  .noir-game.campaign-ink .suspect-card.ng-card::after { display: none; }
  .campaign-ink .ng-polaroid {
    position: relative;
    z-index: 2;
    flex: none;
    align-self: center;
    width: min(100%, calc(var(--ng-portrait-size) + 44px));
    padding: 6px 6px 5px;
    border: 1.8px solid #292822;
    border-radius: 2px;
    color: #292822;
    background: #fffbef;
    box-shadow: 3px 4px 0 #29282226;
    transform: rotate(-1deg);
  }
  .campaign-ink .ng-card:nth-child(even) .ng-polaroid { transform: rotate(1deg); }
  .campaign-ink .ng-card.selected .ng-polaroid {
    border-color: var(--ng-selection);
    box-shadow: 0 0 0 2px var(--ng-selection), 3px 5px 0 #29282226;
    transform: translateY(-2px);
  }
  .campaign-ink .ng-card.placed .ng-polaroid { opacity: .6; }
  .campaign-ink .ng-card.placed.selected .ng-polaroid { opacity: 1; }
  .campaign-ink .ng-card.selected .ng-polaroid .ng-photo { outline: none; box-shadow: none; }
  .campaign-ink .ng-polaroid .ng-photo,
  .campaign-ink .ng-card:nth-child(even) .ng-photo {
    width: var(--ng-portrait-size);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
  .campaign-ink .ng-polaroid .ng-photo img { height: auto; aspect-ratio: 1; }
  .campaign-ink .ng-portrait-name {
    display: block;
    padding-top: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    font: italic 700 clamp(10px, .88vw, 14px)/1.15 Georgia, serif;
    text-align: center;
  }
  .campaign-ink .ng-portrait-badge {
    position: absolute;
    top: 5px;
    left: 3px;
    display: block;
    padding: 2px 4px;
    border-radius: 3px;
    color: #fff;
    background: #8a3b44;
    font: 800 8px/1.2 system-ui, sans-serif;
  }
  .campaign-ink .ng-portrait-check {
    position: absolute;
    top: 5px;
    right: 4px;
    display: grid;
    width: 15px;
    height: 15px;
  }
  .campaign-ink .ng-card .ng-card-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    margin-top: -8px;
    padding: 18px 8px 10px;
    border: 1.7px solid #292822;
    border-radius: 5px;
    background: #fff9e9;
    box-shadow: 3px 4px 0 #29282226;
  }
  .campaign-ink .ng-card.selected .ng-card-body {
    outline: none;
    border-color: var(--ng-selection);
    box-shadow: 0 0 0 2px var(--ng-selection), 3px 5px 0 #29282226;
  }
  .campaign-ink .ng-card.has-conflict .ng-card-body,
  .campaign-ink .ng-card.validation-wrong .ng-card-body { border-color: #a3121f; }
  .campaign-ink .ng-card.validation-correct .ng-card-body { border-color: #527d5d; }
  .campaign-ink .ng-card-body > .ng-name { display: none; }
  .campaign-ink .ng-card .ng-clues { gap: 6px; }
  .campaign-ink .ng-card .ng-clue { gap: 4px; padding: 2px 0; font-size: 12px; line-height: 1.35; }
  .campaign-ink .ng-card .ng-clue-text { min-width: 0; overflow-wrap: anywhere; }
  .campaign-ink .ng-card .ng-clue-icon,
  .campaign-ink .ng-card .ng-clue-icon img { width: 17px; height: 17px; }
  .campaign-ink .ng-card .ng-clue-icon svg { width: 15px; height: 15px; }
  .campaign-ink .ng-card .ng-clue:hover { background: #29282208; }
  .campaign-ink .ng-polaroid:focus-visible,
  .campaign-ink .ng-card .ng-clue:focus-visible { outline: 2px solid #292822; outline-offset: 2px; }
  .campaign-ink .ng-card .ng-hints { font-size: 11px; line-height: 1.3; }
  .campaign-ink .ng-suspects.dense .ng-clue { font-size: 11px; }
  .campaign-ink .ng-suspects.dense .ng-portrait-name { font-size: 11px; }
  .campaign-ink .ng-suspects.dense .ng-clue-icon,
  .campaign-ink .ng-suspects.dense .ng-clue-icon img { width: 14px; height: 14px; }
}

/* Ковёр рисуется в первой клетке и заходит на соседние. Клетки ковра не создают свой слой,
   поэтому их пол остаётся под ковром, а полароиды (z-index 8) — над ним. */
.campaign-ink .cell.object-footprint-rug { isolation: auto; z-index: auto !important; }
.campaign-ink .cell.object-footprint-rug.object-anchor { isolation: isolate; z-index: 4 !important; }
/* Подсветка наведения на клетке ковра без filter: он создаёт слой и уводит полароид под ковёр. */
.campaign-ink .cell.object-footprint-rug:hover:not(.blocked) { filter: none; transform: none; box-shadow: inset 0 0 0 3px #29282230; }

/* Стены и сетка поверх полароидов (клетка с героем — z-index 8): линии всегда сплошные. */
.noir-game.campaign-ink .board-lines { z-index: 9; }

/* Поле всегда помещается в свою область по ширине и высоте (в окне Яндекс Игр высота бывает меньше ширины). */
.noir-game .board-wrap { min-width: 0; }

/* ── Заметки: маленькие полароиды подозреваемых ── */
.noir-game.campaign-ink .cell-notes {
  z-index: 5;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-content: center;
  place-items: center;
  gap: 4%;
  width: 88%;
  height: 88%;
  pointer-events: none;
}
.noir-game.campaign-ink .cell-notes.note-count-1 { grid-template-columns: 1fr; }
.noir-game.campaign-ink .cell-notes.note-count-5 { grid-template-columns: repeat(3, 1fr); gap: 3%; }
.noir-game.campaign-ink .note-polaroid {
  display: block;
  width: 88%;
  padding: 7% 7% 18%;
  border: 1px solid #292822;
  border-radius: 1px;
  background: #fffbee;
  box-shadow: 1px 2px 0 #29282233;
  transform: rotate(-4deg);
}
.noir-game.campaign-ink .cell-notes.note-count-1 .note-polaroid { width: 46%; }
.noir-game.campaign-ink .note-polaroid:nth-child(even) { transform: rotate(4deg); }
.noir-game.campaign-ink .note-polaroid:nth-child(3n) { transform: rotate(-2deg); }
.noir-game.campaign-ink .note-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 0.5px solid #29282299;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 30%;
  box-shadow: none;
  transform: none;
}

/* ── Компьютер: подписи инструментов помещаются и в узком окне ── */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) and (max-width: 1400px) {
  .campaign-ink .ng-tool { font-size: 10px; letter-spacing: -0.01em; padding-inline: 1px; }
}

/* ── Компьютер: подсказка, что ниже есть ещё подозреваемые ── */
.ng-more { display: none; }
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .ng-suspects { position: relative; }
  .ng-suspects.has-more::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    content: "";
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, transparent, #ebe8dc 78%);
    pointer-events: none;
  }
  .ng-more:not([hidden]) {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1.5px solid #292822;
    border-radius: 999px;
    color: #292822;
    background: #fff9e9;
    box-shadow: 2px 3px 0 #29282233;
    font: 800 13px/1.2 system-ui, sans-serif;
    cursor: pointer;
    transform: translateX(-50%);
  }
  .ng-more:hover { background: #fff1cf; }

  /* ошибка в показаниях: красным подсвечено само показание, карточку и полароид не обводим */
  .campaign-ink .ng-card.has-conflict:not(.validation-wrong) { --ng-selection: #577e9b; }
  .campaign-ink .ng-card.has-conflict:not(.validation-wrong) .ng-card-body { border-color: #292822; }
  .campaign-ink .ng-card.has-conflict.selected:not(.validation-wrong) .ng-card-body { border-color: var(--ng-selection); }
}

/* ── Телефон в низком окне (например, внутри Яндекс Игр): карточки компактнее, поле крупнее.
   Обычные телефоны (высота от 641 px) остаются как есть. ── */
@media (max-width: 680px) and (max-height: 640px) {
  .noir-game.campaign-ink .suspect-card.ng-card { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 6px 10px 8px 6px; }
  .campaign-ink .ng-suspects { padding-top: 4px; }
  .campaign-ink .ng-suspects > h2 { margin-bottom: 2px; font-size: 13px; }
  .campaign-ink .ng-name { font-size: 14px; padding-bottom: 3px; }
  .campaign-ink .ng-card .ng-clue { font-size: 12px; line-height: 1.25; }
  .campaign-ink .ng-photo { padding: 3px 3px 9px; }
}

/* ── Верхняя панель: компактная «Подсказка», крупные инструменты слева ──
   Подсказка — узкая колонка (лампочка, подпись под ней, счётчик), как у инструментов; место отдано четырём инструментам. */
.campaign-ink .ng-icon { height: auto; min-height: 46px; }
.campaign-ink .ng-tools { min-height: 56px; }
.campaign-ink .ng-tool { font-size: 12px; gap: 2px; }
.campaign-ink .ng-tool .odyssey-icon-svg { width: 31px; height: 31px; }
.campaign-ink .ng-hint { flex-direction: column; justify-content: center; gap: 0; width: 68px; padding: 2px 3px; }
.campaign-ink .ng-hint-bulb { font-size: 22px; line-height: 1; }
.campaign-ink .ng-hint-bulb .odyssey-icon-svg { width: 28px; height: 28px; }
.campaign-ink .ng-hint-copy { justify-items: center; }
.campaign-ink .ng-hint-copy small { margin-top: 0; padding: 0; background: none; font-size: 8.5px; letter-spacing: 0; }
@media (max-width: 599px) {
  .campaign-ink .ng-icon { min-height: 40px; }
  .campaign-ink .ng-tools { min-height: 48px; }
  .campaign-ink .ng-tool { font-size: 10px; }
  .campaign-ink .ng-tool .odyssey-icon-svg { width: 25px; height: 25px; }
  .campaign-ink .ng-hint { width: 48px; padding: 2px 1px; }
  .campaign-ink .ng-hint-bulb .odyssey-icon-svg { width: 22px; height: 22px; }
  .campaign-ink .ng-hint-copy small { font-size: 7.5px; }
}
/* Узкий компьютер и телефон: подписи инструментов должны помещаться целиком (правила выше только для просторных окон). */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) and (max-width: 1400px) {
  .campaign-ink .ng-top { gap: 4px; }
  .campaign-ink .ng-tools { gap: 3px; }
  .campaign-ink .ng-tool { font-size: 10px; letter-spacing: -0.01em; padding-inline: 0; }
  .campaign-ink .ng-tool .odyssey-icon-svg { width: 27px; height: 27px; }
  .campaign-ink .ng-hint { width: 58px; }
}
@media (max-width: 599px) {
  .campaign-ink .ng-tool { font-size: 9px; letter-spacing: -0.02em; padding-inline: 0; }
}
/* Правая колонка в окнах 700–1000 px всегда 380 px: иконки уже, подсказка уже, подписи инструментов 9.5 px, чтобы «Поставить» влезало. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) and (max-width: 1000px) {
  .campaign-ink .ng-icon { width: 34px; }
  .campaign-ink .ng-hint { width: 52px; }
  .campaign-ink .ng-hint-copy small { font-size: 8px; }
  .campaign-ink .ng-tool { font-size: 9.5px; letter-spacing: -0.02em; }
}