/*
 * skin.css - проектный слой play.pokepok.com поверх скина felt-ivory (skins.css).
 * Подключается layout.php последним. Mobile-first, ни одного literal-цвета вне токенов
 * (цвета - var(--*)), ни одного max-width на прозе. Компоненты: мега-меню, пара кнопок
 * «Скачать / Регистрация», герой, чипы фактов, плитки разделов, шаги, витрина вопросов,
 * полоса на сукне, подвал по хабам.
 */

/* ================= кнопки ================= */
.btn--gold { background: var(--accent); color: var(--text); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 10px 28px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-mode="dark"] .btn--gold { color: var(--bg); }
.btn--gold:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 88%, var(--text) 12%); text-decoration: none; }
.btn__ico { width: 18px; height: 18px; margin-right: var(--s-2); flex: 0 0 auto; }
.dual-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.dual-cta--stack { flex-direction: column; align-items: stretch; }
.dual-cta .btn { min-height: 48px; }

/* ================= шапка и мега-меню ================= */
.site-header { --header-h: 68px; }
.site-header__bar { gap: var(--s-2); }
.site-header__dl { display: none; }
.site-header__cta { min-height: 40px; padding-inline: var(--s-4); font-size: var(--t-small); }
.nav-mega__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; align-items: stretch; height: var(--header-h); }
.nav-mega__item { position: relative; display: flex; align-items: center; }
.nav-mega__link { display: inline-flex; align-items: center; height: 100%; padding: 0 var(--s-3); color: var(--text-dim); font-weight: var(--fw-semi); font-size: var(--t-small); letter-spacing: .01em; border-bottom: 2px solid transparent; }
.nav-mega__link:hover, .nav-mega__link[aria-current="page"] { color: var(--brand); text-decoration: none; border-bottom-color: var(--accent); }
.nav-mega__panel {
  display: none; position: absolute; top: calc(100% - 1px); left: 0; z-index: var(--z-popover);
  min-width: 300px; padding: var(--s-4); background: var(--surface); border: var(--hairline);
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-pop);
}
.nav-mega__item:hover .nav-mega__panel, .nav-mega__item:focus-within .nav-mega__panel { display: block; }
.nav-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 0 var(--s-4); }
.nav-mega__sub { display: block; padding: var(--s-2) var(--s-2); color: var(--text-dim); font-size: var(--t-small); border-radius: var(--r-soft); white-space: nowrap; }
.nav-mega__sub:hover, .nav-mega__sub[aria-current="page"] { background: var(--brand-soft); color: var(--text); text-decoration: none; }
.nav-mega__all { display: inline-block; margin-top: var(--s-3); padding: var(--s-2); color: var(--brand); font-size: var(--t-small); font-weight: var(--fw-semi); }
@media (min-width: 768px) {
  .site-header__dl { display: inline-flex; min-height: 40px; padding-inline: var(--s-4); font-size: var(--t-small); }
}
@media (min-width: 1024px) {
  .nav-mega__link { padding: 0 var(--s-4); font-size: var(--t-body); }
}

/* ================= шторка: группы ================= */
.nav-drawer__group { border-radius: var(--r-md); }
.nav-drawer__summary { list-style: none; cursor: pointer; justify-content: space-between; }
.nav-drawer__summary::-webkit-details-marker { display: none; }
.nav-drawer__summary::after { content: "+"; color: var(--brand); font-size: 20px; }
.nav-drawer__group[open] .nav-drawer__summary::after { content: "\2212"; }
.nav-drawer__sub { display: grid; padding: 0 0 var(--s-2) var(--s-3); }
.nav-drawer__sublink { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); color: var(--text-mute); font-size: var(--t-small); border-radius: var(--r-md); }
.nav-drawer__sublink:hover, .nav-drawer__sublink[aria-current="page"] { background: var(--brand-soft); color: var(--text); text-decoration: none; }
.nav-drawer__cta { margin: 0 0 var(--s-4); }

/* ================= герой ================= */
.hero-pp { position: relative; padding-block: var(--s-6) var(--s-5); overflow: hidden; }
.hero-pp::before { content: ""; position: absolute; inset: 0; background: var(--ambient); pointer-events: none; }
.hero-pp__grid { position: relative; display: grid; gap: var(--s-5); align-items: center; }
.hero-pp__eyebrow { margin-bottom: var(--s-3); }
.hero-pp h1 { font-size: clamp(1.75rem, 6.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; margin-bottom: var(--s-4); }
.hero-pp__lede { color: var(--text-dim); font-size: calc(var(--t-body) * 1.08); line-height: var(--lh-base); margin-bottom: var(--s-5); }
.hero-pp__cta { margin-bottom: var(--s-5); }
.hero-pp__media picture, .hero-pp__media img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.hero-pp__aside { display: grid; gap: var(--s-3); }
.hero-pp--felt { background: var(--felt); color: var(--on-felt); }
.hero-pp--felt::before { background: radial-gradient(60% 60% at 80% 0%, rgba(201,162,39,.22), transparent 70%); }
.hero-pp--felt h1, .hero-pp--felt .hero-pp__lede, .hero-pp--felt .chip__v { color: var(--on-felt); }
.hero-pp--felt .hero-pp__eyebrow { color: var(--accent); }
.hero-pp--felt .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.hero-pp--felt .chip__k { color: var(--on-felt-mute); }
.hero-pp--felt .btn--primary { background: var(--surface); background-image: none; color: var(--felt); }
.hero-pp--felt a:not(.btn) { color: var(--accent); }
@media (min-width: 768px) {
  .hero-pp { padding-block: var(--s-8) var(--s-7); }
}
@media (min-width: 1024px) {
  .hero-pp__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-8); }
  .hero-pp__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ================= чипы фактов ================= */
.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.chip { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--hairline); border-radius: var(--r-md); min-width: 0; }
.chip__v { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--t-h4); color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.chip__k { font-size: var(--t-tiny); color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; }
.chips--band { margin-block: var(--s-5); }
@media (min-width: 640px) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } .chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= плитки разделов ================= */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-block: var(--s-5); }
.tile { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; color: var(--text); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
a.tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.tile__media picture, .tile__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tile__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.tile__tag { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-2); font-weight: var(--fw-bold); }
.tile__title { margin: 0; font-size: var(--t-h4); line-height: 1.3; }
a.tile:hover .tile__title { color: var(--brand); }
.tile__text { margin: 0; color: var(--text-mute); font-size: var(--t-small); line-height: var(--lh-base); }
.tiles--compact .tile__body { padding: var(--s-4); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= шаги ================= */
.steps { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.steps__item { position: relative; padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 44px); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); counter-increment: step; }
.steps__item::before { content: counter(step); position: absolute; left: var(--s-4); top: var(--s-4); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--t-small); }
.steps__title { margin: 0 0 var(--s-2); font-size: var(--t-h4); }
.steps__item p { margin: 0; color: var(--text-dim); }

/* ================= картинки в тексте ================= */
.fig { margin: var(--s-5) 0; }
.fig picture, .fig img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: var(--hairline); }
.fig figcaption { margin-top: var(--s-2); color: var(--text-mute); font-size: var(--t-small); }
.fig--float { margin-block: var(--s-4); }
@media (min-width: 768px) {
  .fig--float { float: right; width: 42%; margin: 0 0 var(--s-4) var(--s-5); }
  .prose::after { content: ""; display: table; clear: both; }
}
.suit-art { width: 120px; height: 120px; color: var(--brand); }

/* ================= полоса на сукне ================= */
.felt-band { background: var(--felt); color: var(--on-felt); padding-block: var(--s-7); margin-top: var(--s-6); position: relative; overflow: hidden; }
.felt-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 100% 50%, rgba(201,162,39,.2), transparent 70%); pointer-events: none; }
.felt-band__in { position: relative; display: grid; gap: var(--s-5); align-items: center; }
.felt-band h2 { color: var(--on-felt); margin: 0 0 var(--s-2); font-size: var(--t-h2); }
.felt-band p { margin: 0; color: var(--on-felt-mute); }
.felt-band .btn--primary { background: var(--surface); background-image: none; color: var(--felt); }
@media (min-width: 1024px) { .felt-band__in { grid-template-columns: minmax(0, 1.4fr) auto; } }

/* ================= витрина вопросов ================= */
.qcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-block: var(--s-5); }
.qcard { min-width: 0; }
.qcard__link { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; color: var(--text); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.qcard__link:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.qcard__media picture, .qcard__media img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
.qcard__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.qcard__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .06em; }
.qcard__rubric { color: var(--brand-2); font-weight: var(--fw-bold); }
.qcard__date { color: var(--text-faint); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.qcard__title { margin: 0; font-size: var(--t-h4); line-height: 1.3; }
.qcard__link:hover .qcard__title { color: var(--brand); }
.qcard__text { margin: 0; color: var(--text-mute); font-size: var(--t-small); line-height: var(--lh-base); }
.rubric { padding-block: var(--s-6); border-top: var(--hairline); }
.rubric__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.rubric__head h2 { margin: 0; }
.rubric__count { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--t-small); }
.rubric-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-4) var(--s-5); }
.rubric-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--text-dim); font-size: var(--t-small); font-weight: var(--fw-medium); }
.rubric-nav a:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
@media (min-width: 640px) { .qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= разное ================= */
.answer { padding: var(--s-4) var(--s-5); background: var(--highlight-pale); border-left: 4px solid var(--accent); border-radius: var(--r-md); margin-block: var(--s-4) var(--s-5); color: var(--text); }
.answer p { margin: 0; }
.answer p + p { margin-top: var(--s-2); }
.next-read__h { font-size: var(--t-h3); margin-bottom: 0; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-5); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-1); }
.prose .table-scroll { margin-block: var(--s-5); }
.data-table table { min-width: 520px; }
.data-table th[scope="row"] { text-align: left; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); color: var(--text); font-weight: var(--fw-semi); }
.split { display: grid; gap: var(--s-5); margin-block: var(--s-5); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pill-list { list-style: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill-list li { padding: var(--s-2) var(--s-3); background: var(--surface); border: var(--hairline); border-radius: var(--r-pill); font-size: var(--t-small); color: var(--text-dim); }
.verdict { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-xl); margin-block: var(--s-5); box-shadow: var(--shadow-card); }
.verdict__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-block: var(--s-2); border-top: var(--hairline); }
.verdict__row:first-child { border-top: 0; padding-top: 0; }
.verdict__k { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.verdict__v { color: var(--text); }
@media (min-width: 640px) { .verdict__row { grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; } }

/* ================= подвал ================= */
.site-footer { background: var(--bg-3); }
.site-footer__top { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: var(--hairline); align-items: center; }
.site-footer__top-text { margin: 0; color: var(--text-dim); font-family: var(--font-display); font-size: var(--t-h4); line-height: 1.35; }
.site-footer__col a { min-height: 36px; line-height: 36px; font-size: var(--t-small); }
.site-footer__title { color: var(--brand); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 768px) { .site-footer__col a { min-height: 30px; line-height: 30px; } }

/* ================= крошки, штамп ================= */
.breadcrumbs { font-size: var(--t-small); }

/* ================= схемы ================= */
.fig--svg svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.fig--svg { padding: var(--s-4); background: var(--surface-2); border: var(--hairline); border-radius: var(--r-lg); }
.fig--svg figcaption { text-align: center; }

/* одна колонка плиток внутри split - на любой ширине (после медиазапросов, специфичность выше) */
.tiles.tiles--1 { grid-template-columns: minmax(0, 1fr); }

/* иллюстрация сукна (генератор, декоративная, alt не нужен - фон через image-set) */
.hero-pp--felt, .felt-band {
  background-color: var(--felt);
  background-image: linear-gradient(90deg, var(--felt) 0%, var(--felt) 38%, rgba(11, 74, 51, .78) 70%, rgba(11, 74, 51, .55) 100%),
                    image-set(url("../img/hero-felt-1024.webp") 1x, url("../img/hero-felt-1600.webp") 2x);
  background-size: cover, cover; background-position: center, right center;
}
.felt-band { background-image: linear-gradient(90deg, var(--felt) 0%, var(--felt) 55%, rgba(11, 74, 51, .8) 100%), image-set(url("../img/hero-felt-1024.webp") 1x, url("../img/hero-felt-1600.webp") 2x); }
.hero-pp--felt::before, .felt-band::before { display: none; }
@media (min-width: 1024px) { .tiles--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* шапка на узком экране: кнопка партнёрки живёт в шторке, знак ниже (05: 360 без прокрутки) */
@media (max-width: 639px) {
  .site-header__cta { display: none; }
  .site-header__logo img { height: 30px; }
}
.nav-mega__link, .nav-mega__sub, .nav-mega__all, .nav-drawer__link, .nav-drawer__sublink, .site-footer__col a, .rubric-nav a, a.tile, .qcard__link { text-decoration: none; }
/* длинный текст кнопки переносится, а не растягивает герой (замер приёмки 360px) */
.dual-cta .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.25; padding-block: var(--s-2); }