/* Grimhold — страница статуса. Шрифты игры (OFL, fonts/), палитра — её интерфейса. */

@font-face { font-family: 'Cormorant SC'; font-weight: 700; font-display: swap; src: url(fonts/CormorantSC-bold-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Cormorant SC'; font-weight: 700; font-display: swap; src: url(fonts/CormorantSC-bold-cyrillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+2116; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-display: swap; src: url(fonts/EBGaramond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-display: swap; src: url(fonts/EBGaramond-cyrillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+2116; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-display: swap; src: url(fonts/EBGaramond-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-display: swap; src: url(fonts/EBGaramond-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+2116; }
@font-face { font-family: 'Marck Script'; font-display: swap; src: url(fonts/MarckScript-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Marck Script'; font-display: swap; src: url(fonts/MarckScript-cyrillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+2116; }

:root {
  --bg: #0e0c0a;
  --bg-2: #14110d;
  --panel: #1a1611;
  --line: #2f2820;
  --line-hi: #4a3e2c;
  --gold: #c9a45c;
  --gold-hi: #ecd29a;
  --ink: #ece3cf;
  --dim: #a2988a;
  --live: #93c27a;
  --new: #e0904f;
  --blood: #a3392a;
  --display: 'Cormorant SC', 'EB Garamond', Georgia, serif;
  --text: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --wrap: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Переходы к разделам — ниже липкой шапки (58px), а не под ней. */
html { scroll-behavior: smooth; scroll-padding-top: 58px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 19px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--gold-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* Языки: русский по умолчанию, английский — переключателем. */
:root:not([data-lang='en']) [lang='en'] { display: none; }
:root[data-lang='en'] [lang='ru'] { display: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 58px; }
.mark { font: 700 22px/1 var(--display); letter-spacing: 0.24em; color: var(--gold-hi); text-decoration: none; }
.top nav { display: flex; gap: 18px; margin-left: auto; font-size: 16px; }
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
.lang { display: flex; border: 1px solid var(--line-hi); border-radius: 999px; overflow: hidden; }
.lang button { background: none; border: 0; padding: 3px 10px; font: 600 13px/1.4 var(--text); letter-spacing: 0.06em; color: var(--dim); cursor: pointer; }
.lang button[aria-pressed='true'] { background: var(--line-hi); color: var(--gold-hi); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 4px; border: 1px solid var(--gold);
  font: 700 17px/1.2 var(--display); letter-spacing: 0.08em; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #d9b56c, #a8843f); color: #1b140a;
}
.btn:hover { background: linear-gradient(180deg, #ecd29a, #c19a52); }
.btn.ghost { background: transparent; color: var(--gold-hi); }
.btn.ghost:hover { background: rgba(201, 164, 92, 0.12); }

/* ---------- первый экран ---------- */
/*
 * Ангел с площади под небом — кадр владельца из игры. Лицо и небо открыты,
 * надписи — внизу, на затемнении у его подола.
 */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: clamp(600px, 58vw, 920px);
  border-bottom: 1px solid var(--line);
}
.hero-art {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 18%;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 12, 10, 0.25) 0%, transparent 14%, transparent 40%, rgba(14, 12, 10, 0.62) 66%, var(--bg) 100%),
    radial-gradient(ellipse 70% 120% at 50% 30%, transparent 55%, rgba(14, 12, 10, 0.55) 100%);
}
.hero .wrap { width: 100%; padding-block: 48px clamp(40px, 6vw, 72px); text-align: center; }
.hero h1 {
  margin: 0; font: 700 clamp(46px, 10vw, 112px)/1 var(--display); letter-spacing: 0.3em; padding-left: 0.3em;
  background: linear-gradient(180deg, #f6e7bf 0%, #c9a45c 60%, #8b6c37 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8));
}
.hero .lead { margin: 14px auto 0; max-width: 34em; font-style: italic; font-size: clamp(18px, 2.4vw, 22px); color: #e2d6bc; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
/*
 * Состояние игры — строкой состояния, а не кнопками: без овалов и рамок,
 * отрезки через тонкую черту, у живого — огонёк (05.10, владелец:
 * «похожи на кнопку… сделать как индикаторы, как статус-бары»).
 */
.status {
  list-style: none; margin: 22px auto 0; padding: 0; display: inline-flex; flex-wrap: wrap; justify-content: center;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.0), rgba(10, 8, 6, 0.55));
  border-bottom: 1px solid rgba(201, 164, 92, 0.35);
  font: 600 13px/1.2 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.status li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 18px; }
.status li + li { box-shadow: inset 1px 0 0 rgba(201, 164, 92, 0.22); }
.status .online { color: var(--ink); }
.status .led { width: 7px; height: 7px; border-radius: 1px; background: var(--live); box-shadow: 0 0 6px var(--live), 0 0 14px color-mix(in srgb, var(--live) 50%, transparent); }
.status .online .led { animation: led 2.4s ease-in-out infinite; }
.status .stage .led { width: 14px; height: 4px; background: var(--gold); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 60%, transparent); }
@keyframes led { 50% { opacity: 0.45; } }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero .actions + .actions { margin-top: 12px; }
/* Отзыв — видная кнопка под главными: тот же камень, свой знак «!». */
.btn.talk { background: rgba(20, 17, 13, 0.78); border-color: var(--line-hi); color: var(--ink); font-size: 16px; padding-block: 8px; }
.btn.talk:hover { background: rgba(48, 38, 24, 0.9); border-color: var(--gold); color: var(--gold-hi); }
.btn.talk .bang {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #d9b56c, #a8843f); color: #1b140a; font: 700 15px/1 var(--display);
}
.diary-note .narrow { display: none; }
@media (pointer: coarse) and (max-width: 900px) {
  .diary-note .wide { display: none; }
  .diary-note .narrow { display: inline; }
}
.hero .note { margin-top: 14px; font-size: 15px; color: var(--dim); }

/* ---------- разделы ---------- */
section { padding-block: clamp(48px, 7vw, 84px); }
section + section { border-top: 1px solid var(--line); }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
h2 { margin: 0; font: 700 clamp(28px, 4vw, 40px)/1.1 var(--display); letter-spacing: 0.06em; color: var(--gold-hi); text-wrap: balance; }
.head p { margin: 0; color: var(--dim); font-size: 17px; }

/* ---------- ролик и дневник ---------- */
.film video { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line-hi); border-radius: 4px; }

/*
 * Под роликом — дневник: книга из игры лежит на столе в пятне свечи.
 * Щелчок — она вылетает и раскрывается, как в игре (diary.js).
 */
.diary {
  display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: 6px;
  background:
    radial-gradient(ellipse 46% 80% at 22% 55%, rgba(224, 144, 79, 0.16), transparent 70%),
    linear-gradient(180deg, #17120d, #100d0a);
}
.tome {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(18px 26px 26px rgba(0, 0, 0, 0.75));
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.2s ease;
}
.tome img { width: 100%; height: auto; }
.tome:hover { transform: translateY(-6px) rotate(-1deg); filter: drop-shadow(22px 34px 30px rgba(0, 0, 0, 0.8)) brightness(1.08); }
.tome:focus-visible { outline-offset: 8px; }
/* Книга улетела на экран — на столе её нет, пока не вернётся. */
.tome.away { opacity: 0; transition: none; }
.diary-text h3 { margin: 0 0 18px; font: 700 clamp(26px, 3.4vw, 34px)/1.1 var(--display); letter-spacing: 0.06em; color: var(--gold-hi); }
.diary-text blockquote { margin: 0 0 26px; max-width: 34em; }
.diary-text blockquote p { margin: 0; font-style: italic; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: #ddd0b4; }
.diary-text blockquote .by { margin-top: 10px; font: 22px/1.2 'Marck Script', var(--text); color: var(--gold); }
.diary-note { margin: 14px 0 0; font-size: 15px; color: var(--dim); }
#diaryOpen[aria-busy='true'] { opacity: 0.7; cursor: progress; }
/* Книга на экране — страница под ней не крутится. */
html.reading { overflow: hidden; }
#bookCanvas { touch-action: none; }

/* Без WebGPU — то же письмо простым листом пергамента. */
dialog.letter {
  width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: transparent; overflow: visible;
}
dialog.letter::backdrop { background: rgba(4, 3, 2, 0.82); }
.letter-sheet {
  max-height: calc(100dvh - 24px); overflow-y: auto; padding: clamp(36px, 8vw, 84px) clamp(28px, 8vw, 88px);
  background: #d9c08f url(book3d/textures/parchment_0.webp) center / 100% 100% no-repeat;
  color: #2c1b0f; font: 20px/1.55 var(--text); text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.letter-sheet .kicker { margin: 0; text-indent: 0; text-align: center; font: 700 16px/1 var(--display); letter-spacing: 0.3em; color: #7a1c10; }
.letter-sheet h3 { margin: 10px 0 26px; text-align: center; font: 700 clamp(28px, 5vw, 38px)/1.1 var(--display); color: #2c1b0f; }
.letter-sheet p { margin: 0 0 0.7em; text-indent: 1.6em; }
.letter-sheet h3 + p { text-indent: 0; }
.letter-sheet h3 + p::first-letter { float: left; margin: 6px 10px 0 0; font: 700 74px/0.8 var(--display); color: #a8321a; }
.letter-sheet .note { margin-top: 1.2em; text-indent: 0; text-align: right; font: 26px/1.3 'Marck Script', var(--text); color: #6b2a17; }
.letter-sheet hr { width: 40%; margin: 1.4em auto; border: 0; border-top: 1px solid rgba(122, 28, 16, 0.5); }
.letter-sheet article + article { margin-top: 2.4em; }
.letter-close {
  position: absolute; top: -14px; right: -14px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid #8a6a3a; background: #1c150f; color: #e5c47e; font-size: 17px;
}

/* ---------- что в игре ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.card .shot { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: zoom-in; background: #000; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card .shot:hover img { transform: scale(1.04); }
.card .body { padding: 14px 16px 18px; display: grid; gap: 6px; }
.card h3 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 22px/1.2 var(--display); letter-spacing: 0.04em; color: var(--ink); }
.card p { margin: 0; color: #cfc5b2; font-size: 17px; line-height: 1.45; }
.pill { font: 600 12px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid; }
.pill.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.pill.new { color: var(--new); border-color: color-mix(in srgb, var(--new) 50%, transparent); }

/*
 * Свёртка «Что уже в игре» (владелец, 08.10): видно первый ряд и половину
 * второго, остальное — по стрелке. Высоту свёрнутого считает site.js по
 * самим карточкам (рядов на ширину — сколько влезет), низ гаснет в фон.
 */
.fold { position: relative; }
.fold-body { position: relative; overflow: hidden; transition: max-height 0.7s ease; }
.fold-fade {
  position: absolute; inset: auto 0 0 0; height: 160px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 70%, transparent) 55%, var(--bg));
  transition: opacity 0.4s ease;
}
.fold[data-open='true'] .fold-fade, .fold.flat .fold-fade { opacity: 0; }
.fold-toggle {
  display: flex; align-items: center; gap: 10px; margin: 6px auto 0; padding: 11px 22px 11px 24px; cursor: pointer;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel);
  color: var(--gold-hi); font: 700 18px/1 var(--display); letter-spacing: 0.08em;
  transition: border-color 0.2s, background 0.2s;
}
.fold-toggle:hover { border-color: var(--gold); background: #211b14; }
.fold-toggle[hidden] { display: none; }
.fold-toggle .chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s ease; }
.fold-toggle[aria-expanded='true'] .chev { transform: rotate(180deg); }
.fold-toggle[aria-expanded='true'] .when-closed, .fold-toggle[aria-expanded='false'] .when-open { display: none; }
.fold-toggle[aria-expanded='false'] { animation: nudge 2.8s ease-in-out 1.2s 2; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- лента кадров ---------- */
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.strip button { padding: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; cursor: zoom-in; background: #000; aspect-ratio: 16 / 9; }
.strip img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.2s; }
.strip button:hover img { opacity: 1; }

/* ---------- обновления ---------- */
.log { display: grid; gap: 0; }
.log article { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.log article:first-child { border-top: 0; }
.log time { font: 700 19px/1.3 var(--display); color: var(--gold); letter-spacing: 0.04em; }
.log ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: #d4cab6; font-size: 17px; }
.log li::marker { color: var(--gold); }

/* ---------- отзыв ---------- */
.voice { text-align: center; }
.voice h2 { margin-bottom: 10px; }
.voice p { margin: 0 auto 24px; max-width: 32em; color: var(--dim); }

.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  border: 1px solid #8a6a3a; color: #e5c47e;
  background: radial-gradient(circle at 35% 30%, #3d2d1f 0%, #1c150f 62%, #0d0a07 100%);
  box-shadow: inset 0 0 0 3px rgba(18, 13, 9, 0.9), inset 0 0 0 4px rgba(201, 161, 74, 0.45), 0 4px 14px rgba(0, 0, 0, 0.7);
  font: 700 28px/1 Georgia, serif;
}
.fab:hover { color: #f6deA0; box-shadow: inset 0 0 0 3px rgba(18, 13, 9, 0.9), inset 0 0 0 4px rgba(214, 170, 82, 0.7), 0 0 16px rgba(214, 170, 82, 0.45); }

dialog {
  width: min(520px, calc(100vw - 32px)); padding: 22px 22px 18px;
  background: #110f0c; color: var(--ink); border: 1px solid #6b5a3a; border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
}
dialog::backdrop { background: rgba(5, 4, 3, 0.72); }
dialog h3 { margin: 0 0 6px; font: 700 26px/1.2 var(--display); color: var(--gold-hi); text-align: center; }
dialog .sub { margin: 0 0 14px; color: var(--dim); font-size: 16px; text-align: center; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.kinds button { padding: 7px 4px; border: 1px solid var(--line-hi); border-radius: 3px; background: #17140f; color: var(--dim); cursor: pointer; font-size: 16px; }
.kinds button[aria-pressed='true'] { border-color: var(--gold); color: var(--gold-hi); background: #221c11; }
dialog textarea {
  display: block; width: 100%; min-height: 150px; max-height: 50vh; resize: vertical; padding: 10px 12px;
  background: #0b0a08; color: var(--ink); border: 1px solid var(--line-hi); border-radius: 3px; font: 17px/1.45 var(--text);
}
dialog textarea:focus { outline: none; border-color: var(--gold); }
.foot { display: flex; justify-content: space-between; gap: 12px; min-height: 22px; margin: 8px 0 14px; font-size: 14px; color: var(--dim); }
.foot .ok { color: var(--live); }
.foot .bad { color: #eba59f; }
.row { display: flex; justify-content: center; gap: 10px; }
.row .btn[disabled] { opacity: 0.5; cursor: default; }

dialog.view { width: min(1400px, calc(100vw - 24px)); padding: 0; background: #000; border-color: var(--line-hi); }
dialog.view img { width: 100%; }
dialog.view figcaption { padding: 10px 14px; font-size: 16px; color: var(--dim); background: #0e0c0a; }

/* ---------- подвал ---------- */
footer { border-top: 1px solid var(--line); padding-block: 28px 90px; color: var(--dim); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (max-width: 700px) {
  .hero { min-height: max(720px, calc(100svh - 58px)); }
  .hero::after { background: linear-gradient(180deg, rgba(14, 12, 10, 0.25) 0%, transparent 12%, transparent 30%, rgba(14, 12, 10, 0.6) 52%, var(--bg) 100%); }
  .diary { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tome { width: min(220px, 60vw); }
  .diary-text blockquote { margin-inline: auto; }
  .letter-close { top: 6px; right: 6px; }
  .letter-sheet { text-align: left; }
  /* Строка состояния на телефоне — столбцом: отрезки друг под другом. */
  .status { flex-direction: column; align-items: stretch; }
  .status li { justify-content: center; padding: 6px 18px; }
  .status li + li { box-shadow: inset 0 1px 0 rgba(201, 164, 92, 0.18); }
}
@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .log article { grid-template-columns: 1fr; gap: 8px; }
  .top nav { display: none; }
  .lang { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status .online .led { animation: none; }
  .tome, .tome:hover { transition: none; transform: none; }
  .card .shot img { transition: none; }
  .fold-body, .fold-fade, .fold-toggle .chev { transition: none; }
  .fold-toggle[aria-expanded='false'] { animation: none; }
}