/* ВНД «Вечер на двоих»: палитра и стили игры. Подключается после css/game-editorial.css.
   Мотивы упаковки и буклета: сумеречное небо, полная луна с кратерами, четырёхлучевые звёзды, горы у воды, плашки тем как на картах. */
html[data-editorial="vnd"]{
  --pg-bg:#F6F0F7;--pg-paper:#FFFCFD;--pg-ink:#2F2A4A;--pg-muted:#5F5878;--pg-accent:#6A4B9C;--pg-deep:#2B2A5C;
  --pg-button:#F0C27B;--pg-button-plate:#4B3F86;--pg-glow:#B98AAE;--pg-blush:#EEDDEB;--pg-bright:#F0C27B;--pg-honey:#F0C27B;
  --pg-hero:linear-gradient(180deg,#25245A 0%,#34306D 46%,#544684 72%,#8F6CA0 88%,#D49AA6 100%);
  --pg-hero-glow:rgba(233,242,228,.16);--pg-hero-shine:rgba(240,194,123,.08);
  --pg-shadow-ink:#1B1840;
  --pg-ribbon-bg:#2B2A5C;--pg-ribbon-ink:#FFF6EA;--pg-ribbon-mark:#F0C27B;
  --pg-final-from:#2B2A5C;--pg-final-to:#4A3F7E;--pg-final-glow:rgba(233,242,228,.30);
  --pg-aud-icon-bg:#E9DFF3;
  --pg-fan-to:#E9DFF3;
  --pg-dark-bg:#25245A;--pg-on-dark-ink:#FFF6EA;--pg-on-dark-muted:#E2DAEE;--pg-on-dark-accent:#F0C27B;
  --pg-quote-dark-from:#2B2A5C;--pg-quote-dark-to:#463C7A;
  --pg-cat-ink:#FFF6EA;
  /* мотивы */
  --vnd-sparkles:url('../../assets/games/vnd/decor/sparkles.svg');
  --vnd-mountains:url('../../assets/games/vnd/decor/mountains.svg');
  --vnd-moon:#E9F2E4;--vnd-moon-shade:#DBE7D6;--vnd-lilac:#C9B3E3;--vnd-label:#8F68BE;
}
/* цвет полосы анонса — переменными раздела (полоса общая, css/base.css → «шапка») */
html[data-editorial="vnd"]{--pg-announce-bg:#2B2A5C;--pg-announce-ink:#FFF6EA}

/* ───────── Hero: сумерки над водой ───────── */
html[data-editorial="vnd"] .pg-hero{color:#FFF6EA;padding-bottom:170px;background:var(--vnd-mountains) 50% 100%/max(1440px,100%) 150px no-repeat,radial-gradient(60% 40% at 78% 92%,rgba(240,194,123,.22),transparent 72%),var(--pg-hero)}
html[data-editorial="vnd"] .pg-hero::before{display:none}
html[data-editorial="vnd"] .pg-hero .pg-script{color:#F0C27B;text-shadow:0 0 26px rgba(240,194,123,.28)}
html[data-editorial="vnd"] .pg-hero h1 em{color:#F0C27B;text-shadow:0 0 44px rgba(240,194,123,.30)}
html[data-editorial="vnd"] .pg-hero .pg-lead,html[data-editorial="vnd"] .pg-hero .pg-stage-loading{color:#E2DAEE}
html[data-editorial="vnd"] .pg-hero .pg-facts li{border-color:#FFF6EA42;background:rgba(43,42,92,.5);color:#FFF6EA}
html[data-editorial="vnd"] .pg-hero .pg-facts .pg-dood{color:#F0C27B}
html[data-editorial="vnd"] .pg-hero :is(a,button,summary,[tabindex]):focus-visible{outline-color:#F0C27B}
/* звёздное небо с четырёхлучевыми искрами (как на упаковке); у горизонта гаснет */
.pg-hero::after,.pg-on-dark::before,.pg-finale-card::before,.pg-quote--dark::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--vnd-sparkles) 0 0/720px 480px repeat,var(--vnd-sparkles) 300px 170px/1080px 720px repeat;pointer-events:none;animation:vnd-twinkle 7s ease-in-out infinite alternate}
/* за текстом искры приглушены, у горизонта гаснут */
.pg-hero::after,.pg-finale-card::before{-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 40%,#000 62%),linear-gradient(180deg,#000 0,#000 48%,transparent 84%);mask-image:linear-gradient(100deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 40%,#000 62%),linear-gradient(180deg,#000 0,#000 48%,transparent 84%);-webkit-mask-composite:source-in;mask-composite:intersect}
@keyframes vnd-twinkle{from{opacity:.55}to{opacity:1}}
/* полная луна за коробкой (вместо кольца-орбиты) */
html[data-editorial="vnd"] .pg-orbit{width:min(88%,440px);border:0;background:radial-gradient(circle at 30% 28%,var(--vnd-moon-shade) 0 5.5%,transparent 6%),radial-gradient(circle at 68% 22%,var(--vnd-moon-shade) 0 3.5%,transparent 4%),radial-gradient(circle at 78% 58%,var(--vnd-moon-shade) 0 6.5%,transparent 7%),radial-gradient(circle at 22% 70%,var(--vnd-moon-shade) 0 4%,transparent 4.5%),radial-gradient(circle at 52% 84%,var(--vnd-moon-shade) 0 3%,transparent 3.5%),radial-gradient(circle at 42% 40%,#F4F9F1,var(--vnd-moon) 62%,#DDEAD8);box-shadow:0 0 60px 10px rgba(233,242,228,.28),0 0 160px 40px rgba(201,179,227,.22)}
.pg-hero .pg-float{box-shadow:0 17px 34px rgba(12,10,40,.5),0 0 26px rgba(233,242,228,.14)}

/* ───────── About: ночная цитата ───────── */
.pg-quote--dark{overflow:hidden;isolation:isolate}
.pg-quote--dark::after{z-index:-1;opacity:.55;background-size:540px 360px,820px 546px}
.pg-quote--dark::before{z-index:0}
/* маленькая луна в углу цитаты */
.pg-quote--dark blockquote{position:relative}
.pg-quote--dark{padding-right:clamp(36px,9vw,110px)}
.pg-about-aside{position:relative}
.pg-about-aside::after{content:"";position:absolute;right:-18px;top:-26px;width:84px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 34%,var(--vnd-moon-shade) 0 9%,transparent 10%),radial-gradient(circle at 66% 62%,var(--vnd-moon-shade) 0 12%,transparent 13%),radial-gradient(circle at 42% 40%,#F4F9F1,var(--vnd-moon) 62%,#DDEAD8);box-shadow:0 0 40px 6px rgba(233,242,228,.45);pointer-events:none}
.pg-quote--dark p{font-size:clamp(20px,2.1vw,26px);line-height:1.36}
.pg-quote--dark cite{font-size:13px;line-height:1.5}

/* ───────── Колода ───────── */
.pg-gallery-section{position:relative}

/* ───────── «Двадцать одна тема»: ночная секция, плашки как на картах ───────── */
.pg-on-dark{position:relative;isolation:isolate;overflow:hidden}
.pg-on-dark>.pg-wrap{position:relative;z-index:1}
.pg-on-dark::before{opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);animation-name:vnd-twinkle-dim}
@keyframes vnd-twinkle-dim{from{opacity:.3}to{opacity:.6}}
.vnd-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;max-width:980px;margin:0 auto;padding:0;list-style:none;counter-reset:none}
html[data-editorial="vnd"] .vnd-topic{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 20px 8px 10px;border:2px solid var(--vnd-label);border-radius:999px;background:#F3EDF8;color:#2F2A4A;font-family:StampatelloFaceto,Inter,sans-serif;font-size:21px;font-weight:400;line-height:1.05;letter-spacing:.02em;text-align:left;box-shadow:0 0 0 4px #F3EDF8,0 14px 26px -16px rgba(5,4,24,.7)}
.vnd-topic-num{display:grid;place-items:center;flex:none;min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:#E3D6F1;color:#4B3F86;font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.02em}
button.vnd-topic{cursor:pointer;transition:transform .25s var(--pg-ease),background-color .25s var(--pg-ease)}
/* у тем с фото карты справа выглядывает миниатюра настоящей карты */
html[data-editorial="vnd"] .vnd-topic--card{padding-right:52px;background:#FFF6EA;box-shadow:0 0 0 4px #FFF6EA,0 14px 26px -16px rgba(5,4,24,.7)}
.vnd-topic--card img{position:absolute;right:8px;top:50%;width:30px;height:auto;border-radius:3px;transform:translateY(-50%) rotate(8deg);box-shadow:0 4px 10px rgba(20,18,56,.35);transition:transform .3s var(--pg-ease)}
.vnd-topic--card:is(:hover,:focus-visible){transform:translateY(-3px)}
.vnd-topic--card:is(:hover,:focus-visible) img{transform:translateY(-62%) rotate(14deg) scale(1.5)}
.vnd-topic--card:focus-visible{outline:3px solid #F0C27B;outline-offset:6px}
.vnd-topics li:nth-child(odd) .vnd-topic{transform:rotate(-.8deg)}
.vnd-topics li:nth-child(3n) .vnd-topic{transform:rotate(.9deg)}
.vnd-topics li:nth-child(odd) .vnd-topic--card:is(:hover,:focus-visible),.vnd-topics li:nth-child(3n) .vnd-topic--card:is(:hover,:focus-visible){transform:translateY(-3px)}
/* подсказка под заголовком секции: подтягивается к нему (отступ заголовка → контент отдаёт её списку тем) */
.vnd-topics-note{margin:calc(10px - var(--pg-space-head)) 0 24px;color:var(--pg-on-dark-muted);font-size:14px;text-align:center}

/* ───────── Что в коробке ───────── */
.vnd-kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.vnd-kit-copy .pg-section-head{margin-bottom:28px}
.vnd-kit-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.vnd-kit-list li{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:16px 20px;border:1px solid var(--pg-line);border-radius:var(--pg-radius-card);background:var(--pg-paper)}
.vnd-kit-list b{position:relative;top:-.16em;color:var(--pg-accent);font-family:StampatelloFaceto,Inter,sans-serif;font-size:40px;font-weight:400;line-height:1;text-align:center} /* у StampatelloFaceto цифры сидят ниже середины строки — поднимаем к центру карточки */
.vnd-kit-list span{color:var(--pg-ink-soft);font-size:15px;line-height:1.5}
.vnd-kit-scene{position:relative;min-height:500px;isolation:isolate}
.vnd-kit-moon{position:absolute;z-index:-1;left:50%;top:46%;width:min(92%,420px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 30% 30%,var(--vnd-moon-shade) 0 5%,transparent 5.5%),radial-gradient(circle at 72% 64%,var(--vnd-moon-shade) 0 6%,transparent 6.5%),radial-gradient(circle at 60% 20%,var(--vnd-moon-shade) 0 3%,transparent 3.5%),radial-gradient(circle at 42% 40%,#F4F9F1,var(--vnd-moon) 62%,#DDEAD8);box-shadow:0 0 80px 10px rgba(201,179,227,.35)}
.vnd-kit-piece{position:absolute;padding:0;border:0;background:none;border-radius:8px;transition:transform .45s var(--pg-ease)}
.vnd-kit-piece img{width:100%;height:auto;border-radius:8px;box-shadow:0 26px 40px -18px rgba(27,24,64,.55)}
.vnd-kit-booklet{left:6%;top:14%;width:36%;transform:rotate(-7deg);z-index:2}
.vnd-kit-page{left:34%;top:4%;width:34%;transform:rotate(3deg);z-index:1}
.vnd-kit-card{width:28%}
.vnd-kit-card--a{right:4%;top:22%;transform:rotate(9deg);z-index:2}
.vnd-kit-card--b{right:18%;bottom:2%;transform:rotate(-4deg);z-index:3}
.vnd-kit-booklet:is(:hover,:focus-visible){transform:rotate(-9deg) translateY(-8px)}
.vnd-kit-page:is(:hover,:focus-visible){transform:rotate(1deg) translateY(-8px)}
.vnd-kit-card--a:is(:hover,:focus-visible){transform:rotate(12deg) translateY(-8px)}
.vnd-kit-card--b:is(:hover,:focus-visible){transform:rotate(-6deg) translateY(-8px)}

/* ───────── Аудитория ───────── */
.pg-aud-icon{transition:background-color .3s var(--pg-ease),color .3s var(--pg-ease)}
.pg-aud:hover .pg-aud-icon{background:#2B2A5C;color:#F0C27B}

/* ───────── Отзывы (ui-library #testimonials) ───────── */
.vnd-reviews{background:linear-gradient(180deg,var(--pg-blush) 0%,var(--pg-bg) 55%)}
.vnd-testi{display:flex;gap:16px;overflow-x:auto;cursor:grab;padding:4px 2px 12px;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.vnd-testi::-webkit-scrollbar{display:none}
.vnd-testi.is-dragging{scroll-snap-type:none;user-select:none;cursor:grabbing}
.vnd-testi.is-dragging .vnd-testi-card{pointer-events:none}
.vnd-testi-card:first-child{margin-left:auto}.vnd-testi-card:last-child{margin-right:auto}
.vnd-testi-card{flex:0 0 260px;display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--pg-line);border-radius:16px;background:var(--pg-paper);scroll-snap-align:start}
.vnd-testi-card p{margin:0}
.vnd-testi-name{display:inline-flex;align-items:center;gap:8px;color:var(--pg-accent);font-family:StampatelloFaceto,Inter,sans-serif;font-size:18px}
.vnd-testi-name .pg-dood{width:16px;height:16px}
.vnd-testi-stars{display:flex;gap:3px;color:#9A6418}
.vnd-testi-stars .pg-dood{width:15px;height:15px}
.vnd-testi-text{flex:1;color:var(--pg-ink);font-size:13px;line-height:1.55}
.vnd-testi-src{margin-top:4px;color:var(--pg-muted);font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.vnd-testi:focus-visible{outline-offset:2px}

/* ───────── Финал: луна встаёт над горами ───────── */
.pg-finale-card{isolation:isolate;padding-bottom:120px;background:var(--vnd-mountains) 50% 100%/max(1100px,100%) 120px no-repeat,linear-gradient(170deg,var(--pg-final-from) 0%,#3A3473 58%,#7A5E98 86%,#C996A6 100%)}
.pg-finale-card::before{z-index:-1}
.pg-final-glow{width:min(78%,360px);border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--vnd-moon-shade) 0 5%,transparent 5.5%),radial-gradient(circle at 72% 62%,var(--vnd-moon-shade) 0 6%,transparent 6.5%),radial-gradient(circle at 42% 40%,#F4F9F1,var(--vnd-moon) 62%,#DDEAD8);box-shadow:0 0 70px 14px rgba(233,242,228,.30)}
.pg-finale h2 em{color:#F0C27B;text-shadow:0 0 40px rgba(240,194,123,.4)}
.pg-finale-card .pg-script{color:#F0C27B}

/* ───────── Адаптив ───────── */
@media(max-width:1023px){.vnd-kit{grid-template-columns:1fr}.vnd-kit-scene{max-width:560px;width:100%;margin:0 auto;min-height:440px}}
@media(max-width:820px){
html[data-editorial="vnd"] .pg-hero{padding-bottom:120px;background-size:900px 110px,auto,auto}
.pg-about-aside::after{width:64px;right:-6px;top:-22px}
}
@media(max-width:620px){
.vnd-topics{gap:10px 8px}
html[data-editorial="vnd"] .vnd-topic{min-height:44px;padding:5px 12px 5px 6px;font-size:17px;gap:7px}
html[data-editorial="vnd"] .vnd-topic--card{padding-right:40px}
.pg-hero::after{animation-name:vnd-twinkle-dim}
.vnd-topic--card img{width:24px}
.vnd-topic-num{min-width:26px;height:26px;font-size:11px}
.vnd-kit-scene{min-height:360px}
.vnd-kit-list li{grid-template-columns:56px 1fr;padding:14px 16px}
.vnd-kit-list b{font-size:32px}
.vnd-testi{gap:12px;padding-right:20px}
.vnd-testi-card{flex-basis:285px;padding:18px}
.vnd-testi-text{font-size:14px}
.pg-finale-card{padding-bottom:64px;background-size:760px 60px,auto} /* горы ниже и ниже кнопки: блок короче, содержимое на месте */
.pg-quote--dark{padding-right:28px}
/* светлые секции переходят друг в друга без шва — между их содержимым 56px, как у края тёмной секции, а не 56 + 56 */
:is(.pg-promise + .pg-gallery-section,.pg-detail-section + .pg-audience,.pg-audience + .vnd-reviews,.vnd-reviews + .pg-gallery){padding-top:0}
}
@media(prefers-reduced-motion:reduce){
.pg-hero::after,.pg-on-dark::before,.pg-finale-card::before,.pg-quote--dark::after{animation:none!important}
.vnd-topic,.vnd-topic img,.vnd-kit-piece{transition:none!important}
}
/* телефон и планшет: лента отзывов — до краёв экрана, а не до полей колонки (раньше карточки обрезались на 18–22px от края);
   внутренний отступ = поле колонки, чтобы первая карточка стояла вровень с текстом (ui-library → «Горизонтальный ряд карточек») */
/* поле колонки — как у .pg-wrap (22 / 18 / 14 px): scroll-padding в процентах считался бы от ширины самой ленты, поэтому числа */
@media(max-width:820px){.vnd-testi{--g:22px;margin-inline:calc(-1 * var(--g));padding-inline:var(--g);scroll-padding-inline:var(--g)}}
@media(max-width:620px){.vnd-testi{--g:18px}}
@media(max-width:360px){.vnd-testi{--g:14px}}