/* Cozy World — сайт (client-release, 0.1). Палитра и шрифт — из игры: UiKit (Cream, Accent, Ink, Card), PT Sans. */
@font-face {
  font-family: "PT Sans";
  src: url("/assets/fonts/pt-sans-regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cocoa: #2a1f1b;        /* UiKit.Card — тёмные панели меню */
  --cocoa-2: #3a2c27;      /* UiKit.CardLight */
  --cream: #fff5e6;        /* UiKit.Cream — текст на тёмном */
  --peach: #ed996e;        /* UiKit.Accent — основная кнопка */
  --apricot: #ffb88c;      /* UiKit.AccentHover */
  --ink: #38291f;          /* UiKit.Ink — текст на кнопке */
  --milk-tea: #f6e6d6;     /* фон светлой темы */

  --bg: var(--milk-tea);
  --surface: #fff8ef;
  --text: var(--ink);
  --text-soft: #6e5547;
  --line: #e6cdb7;
  --link: #a8532f;
  --code-bg: #f0dcc8;
  --focus: #c4572c;

  --radius-button: 18px;
  --radius-frame: 10px;
  --measure: 62ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #211815;
    --surface: #2c211d;
    --text: #f6e7d6;
    --text-soft: #c7ad99;
    --line: #4a3830;
    --link: var(--apricot);
    --code-bg: #3a2c27;
    --focus: var(--apricot);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #211815;
  --surface: #2c211d;
  --text: #f6e7d6;
  --text-soft: #c7ad99;
  --line: #4a3830;
  --link: var(--apricot);
  --code-bg: #3a2c27;
  --focus: var(--apricot);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.55 "PT Sans", "Segoe UI", system-ui, sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0; }
p { margin: 0 0 1em; }
code, .hash {
  font-family: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  font-size: 0.86em;
  background: var(--code-bg);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------- кнопки как в главном меню игры: скруглённые, подпись слева, наведение — сдвиг подписи ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 30px 0 28px;
  border: 0;
  border-radius: var(--radius-button);
  font: inherit;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn .label { transition: transform .15s ease; }
.btn:hover .label { transform: translateX(8px); }
.btn:hover { transform: scale(1.02); }
.btn-primary { background: var(--peach); }
.btn-primary:hover { background: var(--apricot); }
.btn-secondary { background: rgba(255, 245, 230, .94); }
.btn-secondary:hover { background: #fff; }
.btn small { font-size: .78em; opacity: .75; white-space: nowrap; }
.btn svg { flex: none; }

/* ---------- верхняя панель (страницы кроме главной) ---------- */
.topbar {
  background: var(--cocoa);
  color: var(--cream);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.topbar .brand {
  color: var(--cream);
  text-decoration: none;
  font-size: 1.6rem;
  text-shadow: 2px 2px 0 rgba(31, 15, 10, .45);
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 245, 230, .35);
  border-radius: 50%;
  background: rgba(42, 31, 27, .55);
  color: var(--cream);
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(42, 31, 27, .8); }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

/* ---------- главная: первый экран повторяет главное меню игры ---------- */
.menu-hero {
  position: relative;
  overflow: hidden;
  background: var(--cocoa);
  color: var(--cream);
  min-height: min(760px, 100svh);
  display: grid;
}
.menu-hero .scene {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(68%, 1000px);
}
.menu-hero .scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}
/* затемнение слева — как UiKit.FadeLeft в меню */
.menu-hero .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cocoa) 0%, rgba(42, 31, 27, .82) 22%, rgba(42, 31, 27, .25) 62%, rgba(42, 31, 27, 0) 100%);
}
.menu-hero .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 72px 96px;
}
.logo {
  font-size: clamp(3.6rem, 10vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: .95;
  color: var(--cream);
  text-shadow: 4px 4px 0 rgba(31, 15, 10, .45);
  margin: 0;
}
.tagline {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  color: rgba(255, 230, 204, .78);
  margin: 18px 0 0 6px;
}
.greeting {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--apricot);
  text-shadow: 2px 2px 0 rgba(31, 15, 10, .35);
  margin: 26px 0 30px 6px;
  max-width: 30ch;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  width: min(460px, 100%);
}
.menu .btn { width: 100%; }
.menu-footer {
  position: absolute;
  right: 24px;
  bottom: 16px;
  margin: 0;
  font-size: .95rem;
  color: rgba(255, 230, 204, .72);
  text-align: right;
}
.menu-hero .theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

/* ---------- обычные разделы ---------- */
.section { padding-block: 72px; }
.section + .section { border-top: 1px solid var(--line); }
.section h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: 20px;
}
.lead {
  font-size: 1.25rem;
  max-width: var(--measure);
}

/* окна в квартиру: одна большая сцена и две поменьше */
.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}
.rooms figure { margin: 0; }
.rooms .wide { grid-column: 1 / -1; }
.rooms img {
  width: 100%;
  border-radius: var(--radius-frame);
  background: var(--code-bg);
}
.rooms .wide img { aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 40%; }
.rooms .pair img { aspect-ratio: 4 / 3; object-fit: cover; }
.rooms figcaption {
  color: var(--text-soft);
  font-size: .98rem;
  margin-top: 8px;
}

/* что нового */
.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px 48px;
  margin-top: 12px;
}
.notes h3 {
  font-size: 1.3rem;
  margin: 22px 0 8px;
}
.notes ul { margin: 0; padding-left: 1.1em; }
.notes li { margin-bottom: 6px; max-width: var(--measure); }
.notes li::marker { color: var(--peach); }
.notes-meta { color: var(--text-soft); margin-top: -8px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}
.cta-row p { margin: 0; color: var(--text-soft); max-width: 46ch; }

.site-footer {
  padding-block: 32px 40px;
  color: var(--text-soft);
  font-size: .95rem;
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0 0 6px; }

/* ---------- страница скачивания ---------- */
.download-head { padding-block: 56px 8px; }
.download-head h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 14px; }
.release-line { color: var(--text-soft); font-size: 1.15rem; min-height: 1.6em; }
.download-box {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: 28px;
  margin-top: 24px;
  border-radius: var(--radius-frame);
  background: var(--surface);
  border: 1px solid var(--line);
}
.hash-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: var(--text-soft);
  max-width: 100%;
}
.hash { word-break: break-all; color: var(--text); }
.copy-btn {
  font: inherit;
  font-size: .9rem;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--peach); }
.notice {
  border-left: 4px solid var(--peach);
  padding: 4px 0 4px 16px;
  max-width: var(--measure);
}
.notice[hidden] { display: none; }
.columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}
.steps { padding-left: 1.4em; margin: 0; }
.steps li { margin-bottom: 12px; max-width: var(--measure); }
.steps li::marker { color: var(--peach); font-weight: 700; }
.reqs { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.reqs dt { color: var(--text-soft); }
.reqs dd { margin: 0; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .menu-hero { min-height: auto; }
  .menu-hero .scene { width: 100%; }
  .menu-hero .scene::before {
    background: linear-gradient(180deg, rgba(42, 31, 27, .35) 0%, rgba(42, 31, 27, .82) 45%, var(--cocoa) 100%);
  }
  .menu-hero .wrap { padding-block: 120px 72px; }
  .menu-footer { position: relative; right: auto; bottom: auto; text-align: left; margin: -48px 16px 24px 22px; }
  .section { padding-block: 52px; }
  .rooms { grid-template-columns: 1fr; }
  .rooms .wide img { aspect-ratio: 16 / 9; }
  .columns { grid-template-columns: 1fr; gap: 36px; }
  .download-box { padding: 20px; }
  .btn { font-size: 1.2rem; min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .label { transition: none; }
  .btn:hover, .btn:hover .label { transform: none; }
}