/* Публичные страницы: лендинг на главной, гайд, энциклопедия. */

/* ——— Лендинг вокруг формы входа (в приложении и при входе скрыт) ——— */
.is-app .lp-only,
.has-token .lp-only { display: none !important; }

html:not(.is-app):not(.has-token) .auth-screen {
  display: block;
  padding: 0;
  overflow: visible;
}
html:not(.is-app):not(.has-token) .auth-screen::before { display: none; }

.lp-wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }

.lp-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: max(14px, env(safe-area-inset-top)) 0 14px;
}
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--gold, #e8b86d); font-weight: 700; font-size: 1.05rem; }
.lp-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; font-size: 0.92rem; }
.lp-nav a { color: var(--text, #e8ecf4); font-weight: 500; }
.lp-nav a:hover { color: var(--gold, #e8b86d); }

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px);
  gap: 40px;
  align-items: center;
  padding: 36px 0 56px;
}
.is-app .lp-hero, .has-token .lp-hero { display: contents; }
.lp-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  font-weight: 700;
  color: #fff;
}
.lp-hero h1 span { color: var(--gold, #e8b86d); }
.lp-lead { margin: 0 0 20px; font-size: 1.08rem; line-height: 1.6; color: #c9d1e0; max-width: 60ch; }
.lp-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; color: #dfe5f0; }
.lp-points li { padding-left: 22px; position: relative; }
.lp-points li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #e8b86d); }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-cta .btn { width: auto; padding-inline: 22px; text-decoration: none; }
html:not(.is-app):not(.has-token) .lp-hero .auth-frame { width: 100%; }
.auth-card__head h2 {
  margin: 8px 0 0;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--gold, #e8b86d);
}

.lp-section { padding: 48px 0; border-top: 1px solid rgba(120, 140, 170, 0.18); }
.lp-section h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; }
.lp-section > .lp-wrap > p.lp-sub { margin: 0 0 26px; color: #b6c0d2; max-width: 75ch; line-height: 1.6; }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lp-card {
  padding: 18px 18px 16px;
  border: 1px solid rgba(120, 140, 170, 0.26);
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.78);
}
.lp-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--gold, #e8b86d); }
.lp-card p { margin: 0; color: #c3ccdb; line-height: 1.55; font-size: 0.95rem; }

.lp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lp-shots--mobile { grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); justify-content: center; margin-top: 18px; }
.lp-shot { margin: 0; }
.lp-shot a { display: block; border: 1px solid rgba(180, 140, 70, 0.35); border-radius: 10px; overflow: hidden; background: #060a12; }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot figcaption { margin-top: 8px; font-size: 0.9rem; color: #aab4c6; }

.lp-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.lp-steps li { counter-increment: step; padding: 18px; border: 1px solid rgba(120, 140, 170, 0.26); border-radius: 10px; background: rgba(8, 14, 26, 0.78); color: #c3ccdb; line-height: 1.55; }
.lp-steps li::before { content: counter(step); display: block; font-size: 1.6rem; font-weight: 700; color: var(--gold, #e8b86d); margin-bottom: 6px; }
.lp-steps strong { color: #fff; }

.lp-faq details { border: 1px solid rgba(120, 140, 170, 0.26); border-radius: 10px; background: rgba(8, 14, 26, 0.78); padding: 14px 18px; margin-bottom: 10px; }
.lp-faq summary { cursor: pointer; font-weight: 600; color: #fff; }
.lp-faq details p { margin: 10px 0 0; color: #c3ccdb; line-height: 1.6; }

.lp-footer { border-top: 1px solid rgba(120, 140, 170, 0.18); padding: 26px 0 max(26px, env(safe-area-inset-bottom)); color: #8f99ab; font-size: 0.9rem; }
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.lp-footer a { color: #c3ccdb; font-weight: 500; }
.lp-footer span:first-child { margin-right: auto; }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: 26px; padding: 18px 0 40px; }
  .lp-nav { display: none; }
  .lp-section { padding: 36px 0; }
}

/* ——— Отдельные страницы (гайд, энциклопедия, 404) ——— */
body.site-page {
  margin: 0;
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #e8ecf4;
  background: #03060c url('/skins/kos/bg.jpg') center top / cover fixed;
  -webkit-font-smoothing: antialiased;
}
body.site-page::before { content: ''; position: fixed; inset: 0; background: rgba(3, 6, 12, 0.72); z-index: -1; }
.site-page * { box-sizing: border-box; }
.site-page a { color: #f0c14d; text-decoration: none; font-weight: 600; }
.site-page a:hover { color: #ffe08a; }
.site-page .lp-nav { display: flex; }
.site-page .logo-ring {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 50%;
  border: 1px solid #a67c3a; color: #e8b86d; font-size: 0.65rem; font-weight: 700;
}
.site-article { padding: 18px 0 56px; max-width: 860px; }
.site-article h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin: 18px 0 14px; color: #fff; }
.site-article h2 { font-size: 1.4rem; margin: 34px 0 10px; color: #e8b86d; }
.site-article h3 { font-size: 1.1rem; margin: 22px 0 6px; color: #fff; }
.site-article p, .site-article li { color: #cfd6e3; }
.site-article ul, .site-article ol { padding-left: 22px; }
.site-crumbs { font-size: 0.88rem; color: #8f99ab; }
.site-crumbs a { font-weight: 500; }
.site-play {
  display: inline-block; margin-top: 8px; padding: 12px 26px; border-radius: 8px;
  background: linear-gradient(180deg, #f0c878, #b9853a); color: #1a1206 !important; font-weight: 700;
}
.wiki-list { display: grid; gap: 12px; margin-top: 18px; }
.wiki-item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px; border: 1px solid rgba(120, 140, 170, 0.26); border-radius: 10px; background: rgba(8, 14, 26, 0.82); }
.wiki-item img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(180, 140, 70, 0.35); }
.wiki-item h2, .wiki-item h3 { margin: 0 0 6px; font-size: 1.1rem; color: #e8b86d; }
.wiki-item p { margin: 0 0 6px; font-size: 0.96rem; }
.wiki-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0 !important; list-style: none; }
.wiki-cats a { display: block; padding: 18px; border: 1px solid rgba(120, 140, 170, 0.26); border-radius: 10px; background: rgba(8, 14, 26, 0.82); }
.wiki-cats span { display: block; margin-top: 4px; color: #aab4c6; font-weight: 400; font-size: 0.92rem; }

/* ——— Таблицы и карточка статьи энциклопедии ——— */
.wiki-hero { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin: 18px 0 8px; }
.wiki-hero img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(180, 140, 70, 0.45); }
.wiki-hero h1 { margin: 0 0 6px; }
.wiki-hero p { margin: 0; }
.wiki-table-wrap { margin: 10px 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(120, 140, 170, 0.26); background: rgba(8, 14, 26, 0.82); }
.wiki-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.wiki-table th, .wiki-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(120, 140, 170, 0.16); vertical-align: top; color: #cfd6e3; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.wiki-table tbody tr:last-child th, .wiki-table tbody tr:last-child td { border-bottom: 0; }
.wiki-table thead th { color: #e8b86d; font-weight: 600; white-space: nowrap; }
.wiki-table tbody th { color: #fff; font-weight: 600; }
.wiki-table td { font-variant-numeric: tabular-nums; }
.wiki-note { font-size: 0.88rem; color: #8f99ab !important; }
.wiki-links { line-height: 2; }
.wiki-item h2 a { color: inherit; }
.site-article { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .wiki-table th, .wiki-table td { padding: 7px 10px; }
  .wiki-hero { grid-template-columns: 72px 1fr; }
  .wiki-hero img { width: 72px; height: 72px; }
}

/* ——— Блок ссылок на гайды на главной ——— */
.lp-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.lp-links a { display: block; height: 100%; padding: 16px 18px; border: 1px solid rgba(120, 140, 170, 0.26); border-radius: 10px; background: rgba(8, 14, 26, 0.78); color: #fff; font-weight: 600; }
.lp-links a:hover { border-color: rgba(232, 184, 109, 0.6); }
.lp-links span { display: block; margin-top: 4px; color: #aab4c6; font-weight: 400; font-size: 0.92rem; }
/* ——— Игрокам (вошли в игру или открыли из приложения) не показываем страницы, сделанные для поиска ——— */
.is-app .seo-only, .has-token .seo-only { display: none !important; }
.player-only { display: none; }
/* Страница открыта внутри игры (окно энциклопедии): только содержимое, без выхода на сайт. */
.is-embed .lp-top, .is-embed .lp-footer, .is-embed .site-play, .is-embed .seo-only { display: none !important; }
.is-embed .site-crumbs a[href="/"] { pointer-events: none; color: inherit; text-decoration: none; }
.is-app .player-only, .has-token .player-only { display: inline; }
.is-app .guest-only, .has-token .guest-only { display: none; }