/* Отель на Хеллоуин — сайт игры
 *
 * Три слоя:
 * 1. Отель — тёмное дерево, латунь, обои, ковровая дорожка, засечный шрифт.
 * 2. ЮБуст — логотип, фирменный красный на кнопках и метках, Бустик-портье.
 * 3. Хоррор — местами: мигающая лампа, красный свет из-под 237, призраки РКН в заблокированных номерах.
 */

:root {
  --ink: #141312;
  --ink-2: #1b1917;
  --ink-3: #23201d;
  --wall: #191614;
  --door: #2b231e;
  --door-2: #33291f;
  --door-edge: #43362b;
  --line: #2e2925;
  --line-2: #463c34;
  --paper: #f1e9dc;
  --paper-2: #c6b8a4;
  --paper-3: #8f8271;
  --brass: #c9a25a;
  --brass-2: #8e7040;
  --brass-light: #ffd896;
  --red: #ff0930; /* фирменный красный ЮБуста */
  --red-hover: #e0072a;
  --red-text: #ff4a63;
  --carpet: #4a0c16;
  --carpet-2: #2f070e;
  --ghost: #8ec5ff; /* призраки РКН — в синей «реестровой» гамме */
  --ghost-ink: #0d2643;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --page: 1120px;
  --gutter: 24px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.55 var(--sans);
  font-feature-settings: "kern", "liga", "lnum";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Зерно старой плёнки поверх всего — едва заметно */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration-color: var(--brass-2); text-underline-offset: 3px; }
a:hover { color: var(--brass); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
img { max-width: 100%; }

[hidden] { display: none !important; }

.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
main { flex: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Обои: латунный ромбовидный узор на тёмной стене */
.wallpaper {
  background-color: var(--wall);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='84' viewBox='0 0 56 84'%3E%3Cg fill='none' stroke='%23c9a25a' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M28 0 C40 14 40 28 28 42 C16 28 16 14 28 0Z M28 42 C40 56 40 70 28 84 C16 70 16 56 28 42Z M0 21 C12 35 12 49 0 63 M56 21 C44 35 44 49 56 63'/%3E%3Ccircle cx='28' cy='42' r='2.5'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3Ccircle cx='56' cy='0' r='2.5'/%3E%3Ccircle cx='0' cy='84' r='2.5'/%3E%3Ccircle cx='56' cy='84' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Шапка и подвал ---------- */

.masthead { position: relative; z-index: 2; border-bottom: 1px solid var(--line); background: var(--ink); }
.masthead .page { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.wordmark { display: flex; align-items: center; gap: 14px; text-decoration: none; white-space: nowrap; }
.wordmark img { height: 32px; width: auto; display: block; }
.wordmark span { padding-left: 14px; border-left: 1px solid var(--line-2); font: italic 500 20px/1 var(--serif); color: var(--brass); }
.wordmark:hover span { color: var(--brass-light); }
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; color: var(--paper-2); }
.masthead nav a { text-decoration: none; }
.masthead .account { display: flex; gap: 14px; align-items: baseline; }
.masthead .account .email { color: var(--paper-3); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.colophon { border-top: 1px solid var(--line); margin-top: 96px; color: var(--paper-3); font-size: 14px; }
.colophon .page { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-top: 28px; padding-bottom: 40px; }
.colophon .page > :first-child { margin-right: auto; display: flex; align-items: center; gap: 12px; }
.colophon img { height: 20px; width: auto; opacity: 0.85; }
.colophon a { text-decoration: none; }

/* ---------- Типографика ---------- */

.kicker {
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.display {
  font-size: clamp(44px, 7.2vw, 84px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.display em { font-style: italic; color: var(--brass-light); }
.headline { font-size: clamp(34px, 5vw, 56px); line-height: 1.04; }
.lead { font-size: 19px; line-height: 1.55; color: var(--paper-2); max-width: 36em; }
.muted { color: var(--paper-3); }
.section-title { font-size: 30px; line-height: 1.1; margin-bottom: 18px; }
.mono { font-family: var(--mono); font-size: 0.92em; }

/* ---------- Кнопки и поля ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--red); border-radius: 2px;
  background: var(--red); color: #fff;
  font: 700 16px/1 var(--sans); letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.button:hover { background: var(--red-hover); border-color: var(--red-hover); color: #fff; }
.button:disabled { opacity: 0.55; cursor: default; }
.button.secondary { background: transparent; border-color: var(--line-2); color: var(--paper); font-weight: 600; }
.button.secondary:hover { border-color: var(--brass-2); background: transparent; color: var(--paper); }
.button.small { min-height: 36px; padding: 0 14px; font-size: 14px; }

.link-button {
  border: 0; padding: 0; background: none; color: var(--paper-2);
  font: inherit; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--brass-2); text-underline-offset: 3px;
}
.link-button:hover { color: var(--brass); }
.link-button:disabled { color: var(--paper-3); text-decoration: none; cursor: default; }

.field { display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--paper-2); }
.input {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line-2); border-radius: 2px;
  font: 17px/1 var(--sans);
}
.input::placeholder { color: var(--paper-3); }
.input:focus { outline: none; border-color: var(--brass); }
.input.code-input { font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; }

.notice { font-size: 15px; color: var(--paper-2); }
.notice.error { color: var(--red-text); }

/* Выделения в текстах: важное — золотом, опасное — фирменным красным */
.hl { color: var(--brass-light); font-weight: 700; }
.hl-danger { color: var(--red-text); font-weight: 700; }

/* Заглушки, пока данные едут по медленной сети */
.skeleton {
  display: block; height: 0.8em; margin: 0.45em 0; max-width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ink-3) 0%, #332e29 45%, var(--ink-3) 90%) 0 0 / 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton.w25 { width: 25%; }
.skeleton.w30 { width: 30%; }
.skeleton.w40 { width: 40%; }
.skeleton.w50 { width: 50%; }
.skeleton.w55 { width: 55%; }
.skeleton.w60 { width: 60%; }
.skeleton.w70 { width: 70%; }
.skeleton.w80 { width: 80%; }
.skeleton.w90 { width: 90%; }
.skeleton.w95 { width: 95%; }
.skeleton.w100 { width: 100%; }
@keyframes shimmer {
  to { background-position: -220% 0; }
}

/* ---------- Бустик ---------- */

.bustik { display: block; height: auto; user-select: none; -webkit-user-drag: none; }

/* ---------- 3D-предметы с подсветкой ---------- */

/* Тыква, конфета, призрак и мышь — глянцевые и красные, поэтому под ними тёплое красное свечение */
.glow { position: relative; display: inline-grid; place-items: center; isolation: isolate; }
.glow::before {
  content: ""; position: absolute; z-index: -1; inset: -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 120, 80, 0.55), rgba(255, 9, 48, 0.28) 45%, rgba(255, 9, 48, 0) 100%);
  filter: blur(6px);
  animation: glow-pulse 4.2s ease-in-out infinite;
}
.glow img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); animation: float 6s ease-in-out infinite; }
.glow-pumpkin::before { background: radial-gradient(closest-side, rgba(255, 190, 110, 0.6), rgba(255, 60, 40, 0.28) 48%, rgba(255, 9, 48, 0) 100%); }
.glow-xs { width: 64px; }
.glow-md { width: 120px; }
.glow-lg { width: 200px; }

@keyframes glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6%) rotate(1.5deg); }
}

/* ---------- Коридор ---------- */

.corridor { position: relative; }
.corridor .doors {
  position: relative;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px);
  /* Обои — во всю ширину, двери — по центру, не шире 1000px */
  padding: 72px max(clamp(0px, 2vw, 24px), calc((100% - 1000px) / 2)) 0;
}
.corridor .runner {
  height: 22px;
  background:
    linear-gradient(var(--brass-2), var(--brass-2)) 0 4px / 100% 1px no-repeat,
    linear-gradient(var(--brass-2), var(--brass-2)) 0 calc(100% - 4px) / 100% 1px no-repeat,
    var(--carpet);
  border-top: 1px solid var(--line-2);
}

.slot { position: relative; animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.slot:nth-child(2) { animation-delay: 0.05s; }
.slot:nth-child(3) { animation-delay: 0.1s; }
.slot:nth-child(4) { animation-delay: 0.15s; }
.slot:nth-child(5) { animation-delay: 0.2s; }
.slot:nth-child(6) { animation-delay: 0.25s; }
.slot:nth-child(7) { animation-delay: 0.3s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
}

/* Бра над дверью: латунный плафон и пятно тёплого света на стене */
.lamp { position: absolute; left: 50%; top: -58px; width: 22px; height: 10px; transform: translateX(-50%); }
.lamp::before {
  content: ""; position: absolute; inset: 0;
  background: var(--brass); border-radius: 11px 11px 2px 2px;
}
.lamp::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 180%; min-width: 90px; height: 120px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 55% at 50% 0%, rgba(255, 216, 150, 0.2), rgba(255, 216, 150, 0) 70%);
  pointer-events: none;
  transition: opacity 0.3s;
}
.lamp.flicker::after,
.lamp.flicker::before { animation: flicker 9s infinite steps(1, end); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: 0.15; }
  43% { opacity: 1; }
  45% { opacity: 0.35; }
  46% { opacity: 0.05; }
  48% { opacity: 1; }
  78% { opacity: 1; }
  79% { opacity: 0.2; }
  80% { opacity: 1; }
}

/* Дверь: коробка с тёмным проёмом и полотно, которое открывается */
.door {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 9;
  padding: 0; margin: 0; cursor: pointer;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 216, 150, 0.12), transparent 70%), #0b0908;
  color: var(--paper);
  border: 1px solid var(--door-edge); border-bottom: 0; border-radius: 1px 1px 0 0;
  box-shadow: 0 0 0 4px #1e1a17, 0 0 0 5px var(--line-2);
  font: inherit;
  perspective: 700px;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.25s, border-color 0.25s, opacity 0.25s;
}
.door .leaf {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--door), var(--door-2) 50%, var(--door));
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), filter 0.3s;
  backface-visibility: hidden;
}
.door .leaf::before,
.door .leaf::after {
  /* филёнки */
  content: ""; position: absolute; left: 16%; right: 16%;
  border: 1px solid var(--door-edge);
}
.door .leaf::before { top: 24%; height: 26%; }
.door .leaf::after { top: 56%; height: 34%; }
/* Табличка с названием номера: «Телеграм», «Ютуб»… Длинное название переносится на вторую строку */
.door .plate {
  position: absolute; z-index: 1; top: 8%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 88%;
  padding: 3px 7px 2px; background: var(--brass); color: #2a1d0c;
  font: 700 clamp(12px, 1.25vw, 16px)/1.1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: 0.01em;
  text-align: center; overflow-wrap: anywhere; hyphens: auto;
}
.door .knob {
  position: absolute; z-index: 1; right: 10%; top: 52%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
}

button.door:not(:disabled):hover,
button.door:not(:disabled):focus-visible { border-color: var(--brass-2); box-shadow: 0 0 0 4px #1e1a17, 0 0 0 5px var(--brass-2); }
button.door:not(:disabled):hover .leaf,
button.door:not(:disabled):focus-visible .leaf { transform: rotateY(-16deg); }
.slot:has(button.door:not(:disabled):hover) .lamp::after { opacity: 1.6; filter: brightness(1.4); }
.door:disabled { cursor: default; }
.door.dim { opacity: 0.4; }
.door.selected { border-color: var(--brass); box-shadow: 0 0 0 4px #1e1a17, 0 0 0 5px var(--brass), 0 0 28px rgba(255, 216, 150, 0.18); }

/* 237: из-под двери пробивается красный свет, а за дверью красно */
.door.r237 { background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 9, 48, 0.4), transparent 75%), #0b0908; }
.door.r237 .leak {
  position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 0; height: 2px;
  background: var(--red); box-shadow: 0 0 10px 2px rgba(255, 9, 48, 0.55), 0 6px 18px 6px rgba(255, 9, 48, 0.18);
  animation: leak 5s ease-in-out infinite;
}
@keyframes leak {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.door .tag {
  position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); white-space: nowrap;
  font: 600 11px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass);
  text-align: center;
  animation: rise 0.4s both;
}

/* Заблокированный номер: полотно темнеет, из-за двери выплывает призрак, поверх — лента */
.door.blocked .leaf { filter: brightness(0.55) saturate(0.7); }
.door .ghost {
  position: absolute; z-index: 2; left: 14%; width: 72%; bottom: 10%; height: auto;
  filter: drop-shadow(0 0 14px rgba(255, 9, 48, 0.55));
  animation: ghost-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.35s + var(--order, 0) * 0.3s) both, hover-ghost 3.4s ease-in-out 1.4s infinite;
  pointer-events: none;
}
@keyframes ghost-in {
  from { opacity: 0; transform: translateY(26%) scale(0.85); }
}
@keyframes hover-ghost {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7%); }
}
.door .tape {
  position: absolute; z-index: 3; left: -12%; right: -12%; top: 40%;
  transform: rotate(-9deg);
  background: var(--paper); color: var(--red);
  font: 800 clamp(8px, 0.95vw, 11px)/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 0; text-align: center; white-space: nowrap; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  animation: tape 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(0.6s + var(--order, 0) * 0.3s) both;
  pointer-events: none;
}
.door .tape::after { content: "Заблокировано"; }
@keyframes tape {
  from { opacity: 0; transform: rotate(-24deg) scale(1.7); }
}

/* Только что выбрали: Невидимка проскальзывает внутрь, призрак дёргает ручку */
.door.hide-in .leaf { animation: swing 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes swing {
  0% { transform: rotateY(0); }
  30%, 55% { transform: rotateY(-78deg); }
  100% { transform: rotateY(0); }
}
.door.haunt { animation: rattle 0.6s linear; }
.door.haunt .leaf { animation: haunt-glow 1.4s ease-out; }
@keyframes rattle {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-2px); }
  30%, 60%, 90% { transform: translateX(2px); }
}
@keyframes haunt-glow {
  0% { box-shadow: inset 0 0 0 rgba(255, 9, 48, 0); }
  30% { box-shadow: inset 0 0 40px rgba(255, 9, 48, 0.55); }
  100% { box-shadow: inset 0 0 0 rgba(255, 9, 48, 0); }
}

.corridor.has-tags .doors { padding-bottom: 34px; }
.corridor.static .door { cursor: default; }

/* ---------- Игрок ---------- */

.role { font: 600 24px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--paper); }
.role.ghost { font-style: italic; color: var(--ghost); }

/* Жизни — ключи от номера */
.keys { display: inline-flex; gap: 4px; vertical-align: middle; }
.keys span { display: block; animation: key-in 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.keys span:nth-child(2) { animation-delay: 0.1s; }
.keys span:nth-child(3) { animation-delay: 0.2s; }
.keys span:nth-child(4) { animation-delay: 0.3s; }
.keys svg { display: block; width: 26px; height: 12px; color: var(--brass); }
.keys .lost svg { color: var(--line-2); }
@keyframes key-in {
  from { opacity: 0; transform: translateY(-10px) rotate(-30deg); }
}

/* Штамп для внесённых в реестр */
.stamp {
  display: inline-block; padding: 4px 10px; border: 2px solid var(--red); color: var(--red-text);
  font: 800 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-3deg);
  animation: stamp 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both;
}
@keyframes stamp {
  from { opacity: 0; transform: rotate(-12deg) scale(1.8); }
}

/* ---------- Итоги, коды, журнал, розыгрыш ---------- */

.result-meta { color: var(--paper-3); font-size: 15px; margin: 10px 0 22px; }

.ledger { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font: 600 12px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-3); padding: 0 8px 10px 0; border-bottom: 1px solid var(--line-2); }
.ledger td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--line); }
.ledger td.num, .ledger th.num { text-align: right; }
.ledger .room { font: 600 20px/1 var(--serif); font-variant-numeric: lining-nums; }
.ledger tr.blocked td { color: var(--paper); }
.ledger tr.blocked .flag { color: var(--red-text); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.ledger tr.mine .room::after { content: " · ты"; font: 500 13px var(--sans); color: var(--brass); }
.ledger .rkn { color: var(--ghost); font-size: 13px; white-space: nowrap; opacity: 0.85; }

.codes { display: grid; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.code-row:first-child { border-top: 1px solid var(--line); }
.code-row .title { font-size: 14px; color: var(--paper-2); }
.code-row .value { font: 500 18px/1.3 var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.code-row .value.pending { font: 15px/1.4 var(--sans); color: var(--paper-3); letter-spacing: 0; }
.code-row .hint { grid-column: 1 / -1; font-size: 14px; color: var(--paper-3); }
.code-row > .button { grid-row: 1 / span 2; grid-column: 2; }

.upsell { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; border-left: 2px solid var(--brass); padding: 4px 0 4px 18px; color: var(--paper-2); }
.upsell img { width: 56px; }

.journal { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.journal li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.journal .when { color: var(--paper-3); font-variant-numeric: tabular-nums; }
.journal-more { margin-top: 14px; font-size: 14px; }

.winners { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.winners li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.winners .prize { color: var(--paper-2); }
.hash { margin: 0; display: grid; gap: 14px; }
.hash dt { font: 600 12px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-3); }
.hash dd { margin: 6px 0 0; font: 13px/1.6 var(--mono); color: var(--paper-2); overflow-wrap: anywhere; }
.winners + .hash { margin-top: 28px; }

.copy-done { color: var(--brass) !important; border-color: var(--brass) !important; }

/* ---------- Правила ---------- */

.article { max-width: 760px; padding: 64px 0 0; }
.article-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.article-head img { width: 140px; }
.article .display { font-size: clamp(42px, 6vw, 68px); }
.article .lead { margin-top: 22px; }
.article section { margin-top: 56px; }
.article h2 { font-size: 34px; line-height: 1.1; margin-bottom: 16px; }
.article p + p, .article p + ul, .article ul + p, .article ol + p { margin-top: 14px; }
.article ul, .article ol { margin: 14px 0 0; padding-left: 22px; color: var(--paper-2); }
.article li + li { margin-top: 8px; }
.article p { color: var(--paper-2); }
.article strong { color: var(--brass-light); font-weight: 700; }
.article strong.danger { color: var(--red-text); }
.article .table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.article .table th, .article .table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.article .table th { color: var(--paper-3); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.article .table td:first-child { white-space: nowrap; color: var(--paper); font-variant-numeric: tabular-nums; }
.article .table + p { margin-top: 18px; }
.article dl { margin: 18px 0 0; }
.article dt { font: 600 21px/1.3 var(--serif); color: var(--paper); margin-top: 26px; }
.article dd { margin: 8px 0 0; color: var(--paper-2); }

.not-found { padding: 96px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: center; }
.not-found > div { display: grid; gap: 22px; }
.not-found img { width: 200px; }

/* ---------- Движение ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Адаптив ---------- */

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .masthead .page { min-height: 56px; gap: 12px; }
  .wordmark img { height: 24px; }
  .wordmark span { display: none; }
  .lead { font-size: 17px; }
  /* Двери с названиями не влезают в экран по семь — коридор листается вбок, выбранная дверь — по центру */
  .corridor .doors {
    grid-template-columns: repeat(7, 78px); gap: 12px; padding: 52px 16px 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .corridor .doors::-webkit-scrollbar { display: none; }
  .corridor .slot { scroll-snap-align: center; }
  .lamp { top: -40px; width: 14px; height: 7px; }
  .lamp::after { min-width: 56px; height: 80px; }
  .door { box-shadow: 0 0 0 2px #1e1a17, 0 0 0 3px var(--line-2); }
  .door.selected { box-shadow: 0 0 0 2px #1e1a17, 0 0 0 3px var(--brass), 0 0 20px rgba(255, 216, 150, 0.18); }
  .door .plate { padding: 2px 4px 1px; font-size: 11px; max-width: 92%; }
  .door .knob { width: 5px; height: 5px; }
  .door .tape { font-size: 10px; padding: 5px 0; }
  .door .tape::after { content: "РКН"; }
  .door .tag { bottom: -24px; font-size: 10px; letter-spacing: 0.06em; }
  .corridor.has-tags .doors { padding-bottom: 28px; }
  .journal li { grid-template-columns: 64px minmax(0, 1fr); }
  .article-head img { width: 96px; }
  .not-found { grid-template-columns: 1fr; }
  .not-found img { width: 140px; grid-row: 1; }
  .colophon { margin-top: 72px; }
}