/* Сайт игры: тёмное дерево и золото, как в игре. Шрифт заголовков —
   Philosopher (тот же, что в игре; SIL OFL, fonts/OFL.txt) — подмножество:
   латиница и кириллица (с казахскими и украинскими буквами), знаки. */
@font-face {
  font-family: "Philosopher";
  src: url("/fonts/philosopher.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --bg: #17120d;
  --panel: #241b13;
  --line: #3a2c1f;
  --text: #ece3d3;
  --muted: #b8a993;
  --gold: #f2c95f;
  --gold-deep: #c99a33;
  --link: #f2c95f;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

header.top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1040px; margin: 0 auto; padding: 12px 16px;
}
header.top .brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
  font-family: "Philosopher", serif; font-size: 20px; }
header.top .brand img { width: 36px; height: 36px; border-radius: 9px; }
header.top .lang a { margin-left: 12px; text-decoration: none; color: var(--muted); }
header.top .lang a[aria-current] { color: var(--gold); }

/* Первый экран: текст слева, мини-маджонг справа (на телефоне — столбиком). */
.hero-wrap { position: relative; overflow: hidden; }
.hero { position: relative; display: grid; grid-template-columns: 1fr minmax(300px, 410px); gap: 44px;
  align-items: center; padding: 18px 16px 44px; }
.hero h1 { font-family: "Philosopher", serif; color: var(--gold); font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.08; margin: 0 0 14px; }
.hero p.lead { font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 22px; }
.hero .try { color: var(--muted); margin: 22px 0 0; font-size: 16px; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .hero .demo { margin: 0 auto; }
}
.play {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(#f6d77c, var(--gold-deep)); color: #2a1c0c;
  font-weight: 700; font-size: 19px; text-decoration: none;
  padding: 14px 26px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.play:hover { filter: brightness(1.06); }
.play svg { width: 22px; height: 22px; }
.free { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }
.play.small { font-size: 16px; padding: 11px 18px; }

section { padding: 36px 0; border-top: 1px solid var(--line); }
section h2 { font-family: "Philosopher", serif; color: var(--gold); font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 16px; text-align: center; }

.trailer { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000;
  max-width: 880px; margin: 0 auto; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.trailer button { all: unset; cursor: pointer; position: absolute; inset: 0; }
.trailer button img { width: 100%; height: 100%; object-fit: cover; }
.trailer button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.6)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2c95f' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
  center / 46px no-repeat; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.feature img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.feature .text { padding: 14px 16px 18px; }
.feature h3 { font-family: "Philosopher", serif; color: var(--gold); font-size: 22px; margin: 0 0 6px; }
.feature p { margin: 0; color: var(--text); }

.how ul { max-width: 720px; margin: 0 auto; padding-left: 22px; }
.how li { margin: 6px 0; }
.center { text-align: center; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 15px; text-align: center; }
footer a, footer .contact { margin: 0 8px; }
footer .contact a { margin: 0; }

/* Страницы-документы (политика, удаление данных): текст в одну колонку. */
.doc { max-width: 760px; padding-bottom: 24px; }
.doc h1 { font-family: "Philosopher", serif; color: var(--gold); font-size: clamp(26px, 4.5vw, 36px);
  line-height: 1.2; margin: 18px 0 8px; }
.doc h2 { font-family: "Philosopher", serif; color: var(--gold); font-size: 26px; margin: 36px 0 8px; }
.doc h3 { font-size: 18px; margin: 24px 0 4px; }
.doc ul, .doc ol { padding-left: 22px; margin: 6px 0; }
.doc .muted { color: var(--muted); font-size: 15px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Появление при прокрутке (без JS — всё видно сразу). */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Падающие тайлы на первом экране. */
/* Тайлы тают к краям блока, а не обрезаются его границей. */
.rain { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 62%, transparent 100%); }
.drop { position: absolute; top: -12%; background: #f1f3ec; border-radius: 12% / 10%;
  box-shadow: 2px 3px 0 #2b7c77; animation: fall linear infinite; }
.drop img { width: 86%; height: auto; margin: 7%; }
@keyframes fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(130vh) rotate(var(--spin)); } }

/* Мини-маджонг: лавка Мажобэ сверху, жердь полки, поле. Размеры — в долях
   ширины (cqw). */
.demo { position: relative; width: min(410px, 100%); aspect-ratio: 10 / 13.6; container-type: inline-size;
  border-radius: 22px; overflow: hidden; background: #1d150e; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
/* Лавка с головой уходит под жердь (жердь выше по слою) — без щели на стыке. */
.d-top { position: absolute; top: 0; left: 0; right: 0; height: 41cqw; overflow: hidden; }
.d-shop { width: 100%; height: 100%; object-fit: cover; }
/* Низ арта головы — 9 % прозрачных строк; голова опущена под жердь с
   запасом на прыжок (кивок, смех, «привстал» — до 3 % её высоты). */
.d-head { position: absolute; left: 0; right: 0; bottom: -4cqw; transition: transform .25s ease; }
.d-head img { width: 100%; height: auto; }
.d-pole { position: absolute; z-index: 5; top: 37.5cqw; left: 0; right: 0; height: 7cqw;
  background: url("/img/pole.webp") center / 100% 100%; display: flex; justify-content: space-around; align-items: center; }
.d-pole b { font-family: "Philosopher", serif; color: var(--gold); font-size: 4.4cqw; text-shadow: 0 1px 2px #000; }
.d-field { position: absolute; top: 44.5cqw; bottom: 0; left: 0; right: 0;
  background: url("/img/field.webp") center / cover; box-shadow: inset 0 0 40px rgba(0,0,0,.45); }
.d-hint { position: absolute; z-index: 400; left: 0; right: 0; bottom: 3.5cqw; text-align: center; font-size: 4cqw;
  color: #fff; text-shadow: 0 1px 3px #000; animation: breathe 1.6s ease-in-out infinite; transition: opacity .3s; pointer-events: none; }
.d-hint.gone { opacity: 0; animation: none; }
@keyframes breathe { 50% { opacity: .45; } }
.tile { position: absolute; padding: 0; border: 0; background: #f1f3ec; border-radius: 12% / 10%; cursor: pointer;
  box-shadow: 1.5px 2px 0 #d8e3e8, 3px 5px 0 #2b7c77, 4px 9px 12px rgba(0,0,0,.35);
  transition: left .33s cubic-bezier(.3,.8,.3,1), top .33s cubic-bezier(.3,.8,.3,1), width .33s, height .33s, background .2s; }
.tile img { width: 86%; height: auto; margin: 7%; pointer-events: none; }
.tile.blocked { background: #b7c0d1; cursor: default; }
.tile.blocked img { filter: saturate(.7) brightness(.92); }
.tile:not(.blocked):hover { filter: brightness(1.06); }
.tile.pop { animation: pop .32s ease-out forwards; }
@keyframes pop { to { transform: scale(1.3); opacity: 0; } }
.shard { position: absolute; z-index: 300; width: 9px; height: 11px; background: #2f8f88; border-radius: 2px; pointer-events: none; }
.hole { position: absolute; z-index: 150; width: 50cqw; height: 50cqw; margin: -25cqw 0 0 -25cqw; border-radius: 50%;
  background: radial-gradient(circle, #000 54%, #120a03 60%, #ffb35c 64%, rgba(255,140,40,.45) 70%, transparent 76%);
  transform: scale(0); animation: hole-open .45s ease-out forwards; }
.hole.close { animation: hole-close .4s ease-in forwards; }
@keyframes hole-open { to { transform: scale(1); } }
@keyframes hole-close { from { transform: scale(1); } to { transform: scale(0); } }
.d-msg { position: absolute; z-index: 500; top: 44.5cqw; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 0 8cqw; text-align: center;
  background: rgba(16, 11, 7, .82); animation: fade-in .35s ease; }
.d-msg[hidden] { display: none; }
.d-msg h3 { font-family: "Philosopher", serif; color: var(--gold); font-size: 8cqw; margin: 0; }
.d-msg p { margin: 0 0 6px; font-size: 4.2cqw; }
.d-msg .again { background: none; border: 1px solid var(--muted); color: var(--text); border-radius: 12px;
  padding: 9px 18px; font: inherit; cursor: pointer; }
@keyframes fade-in { from { opacity: 0; } }

/* Глаза Мажобэ: зрачки поверх белков головы (watch.json игры). */
.mz-head .pupil { position: absolute; border-radius: 50%; background: #1a120c; transition: transform .09s ease-out; }
.mz-head .pupil::after { content: ""; position: absolute; left: 22%; top: 20%; width: 28%; height: 28%;
  border-radius: 50%; background: rgba(255,255,255,.85); }
.mz-head.perk { transform: translateY(-3%); }
.mz-head.nod { animation: nod .35s ease; }
.mz-head.laugh { animation: laugh .18s ease-in-out 6; }
@keyframes nod { 40% { transform: translateY(-2.5%); } }
@keyframes laugh { 50% { transform: translateY(-3%) rotate(-1deg); } }

/* Мажобэ выглядывает из-за жерди над нижней кнопкой. */
/* Высота — чтобы голова целиком (с макушкой) влезала над жердью. */
.peek { position: relative; width: min(440px, 92%); aspect-ratio: 2.55; margin: 34px auto 8px; overflow: hidden; }
.peek-head { position: absolute; left: 0; right: 0; bottom: -10%; transform: translateY(45%); transition: transform 1s cubic-bezier(.2,.9,.3,1.1) .3s; }
.peek-head img { width: 100%; height: auto; }
.js .reveal.in .peek-head, .peek-head.perk { transform: none; }
.reveal:not(.in) .peek-head { transform: translateY(45%); }
.peek-pole { position: absolute; left: -4%; right: -4%; bottom: 0; height: 22%; background: url("/img/pole.webp") center / 100% 100%; }

/* Вопросы и ответы: раскрывающиеся строки. */
.faq { max-width: 760px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; }
.faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--gold); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--text); }

/* «Как играть»: хлебные крошки, картинка механик. */
.crumbs { color: var(--muted); font-size: 15px; margin: 10px 0 0; }
.doc .lead { font-size: 19px; }
.doc-shot { width: min(300px, 70%); margin: 18px auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.doc .play { margin-top: 6px; }

/* Выбор языка в шапке: свёрнутый список (без скриптов). */
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; color: var(--gold); padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 15px; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; color: var(--muted); }
.langs-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px; padding: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.langs-list a { color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: 15px; }
.langs-list a:hover { background: var(--line); }
.langs-list a[aria-current] { color: var(--gold); }

/* Вторичная кнопка-ссылка («Как играть»): контур золотом, стрелка уезжает
   вправо при наведении. */
.more { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 22px;
  border: 1.5px solid var(--gold-deep); border-radius: 14px; color: var(--gold); text-decoration: none;
  font-family: "Philosopher", serif; font-size: 19px; transition: background .2s, color .2s; }
.more span { transition: transform .2s; }
.more:hover { background: rgba(242, 201, 95, .1); }
.more:hover span { transform: translateX(4px); }