/* Эмоджи-алхимия · страница «Об игре»
   Те же шрифты и палитра, что в styles.css (значения скопированы оттуда); тема — по настройке устройства, без скриптов.
   Колонка узкая, как в читалке: ~640 px, на телефоне — поля 16 px. */

:root {
  --bg: #F7EBEB;
  --surface: #FFFFFF;
  --ink: #2B2329;
  --ink-2: #6E646C;
  --ink-3: #ADA2AA;
  --line: rgba(96, 52, 66, .08);
  --line-2: rgba(96, 52, 66, .15);
  --inverse: #FFFFFF;
  --shadow-btn: 0 12px 26px -12px rgba(0, 0, 0, .5);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311;
    --surface: #1C1B19;
    --ink: #F1EFEA;
    --ink-2: #A29E96;
    --ink-3: #6A6760;
    --line: rgba(255, 248, 235, .08);
    --line-2: rgba(255, 248, 235, .16);
    --inverse: #131311;
    --shadow-btn: 0 12px 26px -12px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.page {
  max-width: 640px; margin: 0 auto;
  padding: calc(40px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.page { text-align: center; }
.hero { display: block; width: min(220px, 56vw); height: auto; margin: 0 auto 22px; }
h1 { font-family: var(--font-round); font-weight: 650; letter-spacing: -.02em; margin: 0; font-size: clamp(30px, 8vw, 40px); line-height: 1.1; }
p { margin: 0 0 16px; }
.lead { margin: 12px 0 22px; font-size: 19px; line-height: 1.4; color: var(--ink-2); }

/* тезисы: значок слева, строка справа; последний — просьба оценивать — на подложке */
.theses { list-style: none; margin: 40px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.theses li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: baseline; color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
.theses .e { font-size: 22px; line-height: 1.2; text-align: center; }
.theses b { color: var(--ink); font-weight: 600; }
.theses .key b { display: block; }
.theses .key { padding: 14px 16px 14px 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); grid-template-columns: 58px minmax(0, 1fr); column-gap: 0; }

.play {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; min-width: 210px; padding: 0 30px; margin-top: 4px; border-radius: 27px;
  background: var(--ink); color: var(--inverse); text-decoration: none;
  font: 600 17px/1 var(--font-round); letter-spacing: .005em;
  box-shadow: var(--shadow-btn);
  transition: transform .2s ease, opacity .2s;
}
.play:active { transform: scale(.96); }
@media (hover: hover) { .play:hover { opacity: .88; } }
.play:focus-visible { outline-offset: 4px; border-radius: 27px; }

.by { margin: 40px 0 0; color: var(--ink-2); }
.by a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (hover: hover) { .by a:hover { text-decoration-color: currentColor; } }

.by .pair { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); }   /* вторая строка подписи (решение автора 04.10) */
.by.sub { margin-top: 10px; font-size: 14px; color: var(--ink-3); }

/* страница «Данные игроков» (/privacy): текст слева, таблица хранения — карточками, без горизонтальной прокрутки */
.doc { text-align: left; overflow-wrap: anywhere; }
.doc .hero.small { width: 96px; margin: 0 0 18px; }
.doc h1 { font-size: clamp(26px, 7vw, 34px); }
.doc .lead { margin: 8px 0 8px; font-size: 17px; }
.doc h2 { font: 650 19px/1.3 var(--font-round); letter-spacing: -.01em; margin: 34px 0 10px; text-wrap: balance; }
.doc p, .doc li { text-wrap: pretty; }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
@media (hover: hover) { .doc a:hover { text-decoration-color: currentColor; } }
.doc a.play { color: var(--inverse); text-decoration: none; }
.doc .plain { margin: 0 0 16px; padding-left: 22px; }
.doc .plain li { margin: 0 0 6px; }
.doc .cards { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc .cards li { padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.doc .cards h3 { margin: 0 0 8px; font: 600 16px/1.35 var(--font); }
.doc .cards dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.doc .cards dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; font-size: 15px; line-height: 1.45; }
.doc .cards dt { color: var(--ink-3); }
.doc .cards dd { margin: 0; color: var(--ink-2); }
.doc .back { margin: 36px 0 18px; }
.doc .center { text-align: center; margin: 0; }
@media (max-width: 420px) {
  .doc .cards dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 1px; }
}

/* ссылка-карточка на письмо разработчика (на /about, между тезисами и подписью): тот же вид, что у .theses .key */
.letter-link { margin: 16px 0 0; text-align: left; }
.letter-link a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 16px;
  border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); text-decoration: none; line-height: 1.4; transition: transform .2s ease, box-shadow .2s;
}
.letter-link .e { font-size: 22px; line-height: 1.2; text-align: center; }
.letter-link b { display: block; color: var(--ink); font-weight: 600; }
.letter-link .go { font-size: 20px; color: var(--ink-3); transition: transform .2s ease, color .2s; }
.letter-link a:active { transform: scale(.985); }
@media (hover: hover) { .letter-link a:hover { box-shadow: inset 0 0 0 1px var(--line-2); } .letter-link a:hover .go { transform: translateX(3px); color: var(--ink); } }

/* письмо разработчика (/from-author): текст слева, абзацы читаемым цветом; разделы — как заголовки на .doc, пункты — тот же список .theses */
.letter { text-align: left; }
.letter p { margin: 0 0 16px; color: var(--ink); text-wrap: pretty; }
.letter h2 { font: 650 19px/1.3 var(--font-round); letter-spacing: -.01em; margin: 34px 0 14px; text-wrap: balance; }
.letter .theses { margin: 0 0 8px; }
.letter-page h1 { margin-bottom: 18px; }
.letter-page .play { margin-top: 12px; }
.letter-page .back { margin: 22px 0 0; text-align: center; }

@media (max-width: 420px) {
  .play { width: 100%; }
}