/* ВСД «Вечер с друзьями»: палитра и стили игры. Подключается после css/game-editorial.css.
   Файл правит только исполнитель задачи 1. */
html[data-editorial="vsd"]{
  --pg-bg:#F7EEE8;--pg-paper:#FFFCF5;--pg-ink:#29243F;--pg-muted:#655F71;--pg-accent:#6B4274;--pg-deep:#29243F;
  --pg-button:#F1BA70;--pg-button-plate:#6B4274;--pg-glow:#8B556C;--pg-blush:#F0D9DF;--pg-bright:#F1BA70;--pg-honey:#F1BA70;
  --pg-hero:linear-gradient(126deg,#201F3B 0%,#28223F 49%,#44304F 100%);
  --pg-hero-shine:rgba(241,186,112,.10);
  --pg-shadow-ink:#141238;
  --pg-ribbon-bg:#25235A;--pg-ribbon-ink:#FFF3DB;
  --pg-final-from:#2E2A66;--pg-final-to:#1F2044;--pg-final-glow:rgba(241,186,112,.32);
  --pg-aud-icon-bg:#ECDFE6;
  --pg-fan-to:#ECDFE6;
  --pg-dark-bg:#1F2044;--pg-on-dark-ink:#FFF3DB;--pg-on-dark-muted:#E7D8DB;--pg-on-dark-accent:#F1BA70;
  --pg-quote-dark-from:#25235A;--pg-quote-dark-to:#1F2044;
  --pg-way-1:linear-gradient(160deg,#3A2F6E,#25235A);--pg-way-2:linear-gradient(160deg,#724771,#4A2C5A);
  --pg-cat-ink:#FFF3DB;
}
html[data-editorial="vsd"] .pg-hero{color:#FFF3DB;background:radial-gradient(52% 38% at 74% 104%,rgba(224,124,112,.20),transparent 72%),radial-gradient(58% 58% at 86% 34%,var(--pg-hero-glow),transparent 70%),radial-gradient(35% 48% at 12% 10%,var(--pg-hero-shine),transparent 76%),var(--pg-hero)}
html[data-editorial="vsd"] .pg-hero::before{border-color:#F1BA702b;box-shadow:0 0 0 74px #8B556C15,0 0 0 155px #8B556C0d}
html[data-editorial="vsd"] .pg-hero .pg-script{color:#F1BA70}
html[data-editorial="vsd"] .pg-hero :is(a,button,summary,[tabindex]):focus-visible{outline-color:#F1BA70}
html[data-editorial="vsd"] .pg-hero h1 em{color:#F1BA70}
html[data-editorial="vsd"] .pg-hero .pg-lead{color:#E7D8DB}
html[data-editorial="vsd"] .pg-hero .pg-stage-loading{color:#E7D8DB}
html[data-editorial="vsd"] .pg-hero .pg-facts li{border-color:#FFF3DB42;background:#FFF3DB16;color:#FFF3DB}
html[data-editorial="vsd"] .pg-hero .pg-facts .pg-dood{color:#F1BA70}
html[data-editorial="vsd"] .pg-hero .pg-orbit{border-color:#F1BA7033;background:#8B556C10;box-shadow:inset 0 0 0 32px #8B556C10,0 30px 90px #09081722}
/* ───────── Звёзды и гирлянда (мотивы упаковки) ───────── */
html[data-editorial="vsd"]{--vsd-stars:url('../../assets/games/vsd/decor/stars.svg');--vsd-garland:url('../../assets/games/vsd/decor/garland.svg')}
/* цвет полосы анонса — переменными раздела (полоса общая, css/base.css → «шапка») */
html[data-editorial="vsd"]{--pg-announce-bg:#25235A;--pg-announce-ink:#FFF3DB}
/* звёздное небо: два тайла разного размера, чтобы повтор не читался */
.pg-hero::after,.pg-finale-card::before,.pg-on-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vsd-stars) 0 0/720px 480px repeat,var(--vsd-stars) 310px 190px/1130px 753px repeat;opacity:.9;pointer-events:none;animation:vsd-stars 9s ease-in-out infinite alternate}
.pg-hero::after{-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.35) 0,#000 62%);mask-image:linear-gradient(100deg,rgba(0,0,0,.35) 0,#000 62%)}
.pg-finale-card::before{z-index:0;-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.5) 45%,#000 70%);mask-image:linear-gradient(100deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.5) 45%,#000 70%)}
.pg-on-dark{position:relative;isolation:isolate;overflow:hidden}
.pg-on-dark::before{opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
@keyframes vsd-stars{from{opacity:.7}to{opacity:1}}
.pg-on-dark::before{animation-name:vsd-stars-dim}
@keyframes vsd-stars-dim{from{opacity:.35}to{opacity:.6}}
.pg-garland{display:block;width:100%;height:auto;overflow:visible}
.pg-garland .bulb{filter:drop-shadow(0 0 5px rgba(241,186,112,.95))}
.pg-garland .b{animation:vsd-twinkle 4.2s ease-in-out infinite}
.pg-garland .b0{animation-delay:-.3s}.pg-garland .b1{animation-delay:-1.9s;animation-duration:3.4s}.pg-garland .b2{animation-delay:-3.1s;animation-duration:5s}.pg-garland .b3{animation-delay:-.9s;animation-duration:3.8s}.pg-garland .b4{animation-delay:-2.4s;animation-duration:4.6s}
.pg-garland--b .b{animation-delay:calc(var(--d,0s) - 1.2s)}
@keyframes vsd-twinkle{0%,100%{opacity:.62}45%{opacity:1}70%{opacity:.8}}
/* Hero: гирлянда через всю ширину экрана, вешается с верхнего края */
/* только над правой колонкой: от левого края колонки с продуктом до правого края экрана */
.pg-hero-garland{position:absolute;z-index:3;top:calc(-1 * var(--pg-space-section));right:calc(-1 * max(22px,(100vw - 1180px)/2));width:calc(100% + max(22px,(100vw - 1180px)/2));display:flex;pointer-events:none}
.pg-hero-garland .pg-garland{flex:0 0 max(560px,50.2vw);width:max(560px,50.2vw)}
.pg-hero-garland .pg-garland--b{display:none}
.pg-hero-garland{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
.pg-hero .pg-script{text-shadow:0 0 26px rgba(241,186,112,.28)}
.pg-hero h1 em{text-shadow:0 0 44px rgba(241,186,112,.30)}
.pg-hero .pg-orbit{background:radial-gradient(closest-side,rgba(241,186,112,.16),rgba(139,85,108,.10) 70%,transparent)}
.pg-hero .pg-float{box-shadow:0 17px 34px rgba(8,6,30,.55),0 0 28px rgba(241,186,112,.12)}
/* Колода: тонкая гирлянда сверху (повторяется бесшовно) */
.pg-gallery-section{position:relative}
/* вдвое мельче гирлянды hero (она шириной max(560px,50.2vw)), opacity около .6 */
.pg-gallery-section::before{content:"";position:absolute;top:0;left:0;right:0;height:56px;background:var(--vsd-garland) 0 0/max(280px,25.1vw) auto repeat-x;opacity:.6;pointer-events:none;animation:vsd-pulse 6s ease-in-out infinite alternate}
@keyframes vsd-pulse{from{opacity:.54}to{opacity:.66}}
.pg-gallery-section>.pg-wrap{position:relative}

/* ───────── About: тёмная цитата с картой ───────── */
.pg-about-aside{padding-bottom:72px}
.pg-about-aside::before{content:"";position:absolute;z-index:-1;right:-8%;bottom:-6%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(241,186,112,.22),transparent);pointer-events:none}
.pg-about-aside{isolation:isolate}
.pg-quote--dark{overflow:hidden;padding:46px 40px 92px;background:var(--vsd-stars) 0 0/540px auto repeat,linear-gradient(150deg,var(--pg-quote-dark-from),var(--pg-quote-dark-to))}
.pg-quote--dark::before{z-index:1;opacity:.6}
.pg-quote--dark p{position:relative;font-size:clamp(21px,2.2vw,27px);line-height:1.34}
.pg-quote--dark cite{position:relative}
.pg-mini-card{position:absolute;right:32px;bottom:0;z-index:2;width:104px;height:auto;border-radius:7px;transform:rotate(6deg);box-shadow:0 20px 34px -10px rgba(20,18,56,.6),0 0 0 1px rgba(255,243,219,.14);pointer-events:none}

/* ───────── How: тёмная ночь ───────── */
.pg-on-dark>.pg-wrap{position:relative;z-index:1}
.pg-flow-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px}
.pg-way-num{display:inline-block;padding:6px 12px;border:1px solid rgba(241,186,112,.4);border-radius:999px;color:#F1BA70;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pg-flow-top .pg-flow-heading{margin:0}
.pg-experience .pg-flow-card{position:relative}
.pg-experience .pg-flow-card::before{content:"";position:absolute;z-index:-1;inset:-14% -22%;background:radial-gradient(closest-side,rgba(241,186,112,.26),rgba(139,85,108,.12) 60%,transparent);pointer-events:none}
.pg-experience .pg-flow-card .pg-card{transform:rotate(-3deg)}
.pg-experience .pg-flow-card .pg-card:hover{transform:rotate(-1deg) translateY(-6px)}
.pg-experience .pg-flow-card .pg-card img{box-shadow:0 30px 50px -20px rgba(5,4,24,.8),0 0 0 1px rgba(255,243,219,.1)}
.pg-vsd-ways{margin-top:56px}
.pg-experience .pg-flow-card>span{color:var(--pg-on-dark-muted)}

/* ───────── Три настроения ───────── */
.pg-mood-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,5vw,72px);align-items:center;margin-bottom:var(--pg-space-head)}
.pg-mood-copy .pg-section-head{margin-bottom:0}
.pg-mood-scene img{width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(20,18,56,.28))}
.pg-mood{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-mood-cat{min-height:0;justify-content:flex-start;gap:0;box-shadow:0 28px 60px -30px rgba(20,18,56,.35)}
.pg-mood-cat::after{background:radial-gradient(60% 40% at 85% 0%,rgba(255,255,255,.55),transparent 70%)}
.pg-mood-cat .pg-cat-bottom{display:contents}
.pg-mood-cat .pg-cat-top{order:0}.pg-mood-cat .pg-pair{order:1}.pg-mood-cat .pg-cat-body{order:2}
.pg-mood-cat .pg-cat-num{font-size:11px;opacity:.75}
.pg-mood-cat .pg-cat-icon{opacity:.8;width:34px;height:34px}
.pg-mood-cat h3{margin-top:0;font-size:28px}
.pg-mood-cat p{color:#25235A;opacity:.82;font-size:14.5px}
.pg-pair{position:relative;flex:none;display:grid;place-items:center;height:252px;margin:6px 0 4px}
.pg-pair::before{content:"";position:absolute;width:250px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,.18) 70%,transparent)}
/* рубашка слева читается целиком (буква и подпись категории), лицевая карта выходит справа со сдвигом 104px и прикрывает только край */
.pg-pair-in{--pw:120px;--ps:104px;position:relative;width:calc(var(--pw) + var(--ps));height:230px}
.pg-pair-in img{position:absolute;width:var(--pw);height:auto;border-radius:7px;transition:transform .45s var(--pg-ease)}
.pg-pair-back{left:0;top:34px;transform:rotate(-6deg);box-shadow:0 18px 26px -12px rgba(20,18,56,.55)}
.pg-pair-face{left:var(--ps);top:0;transform:rotate(5deg);box-shadow:0 20px 30px -12px rgba(20,18,56,.5)}
.pg-mood-cat:hover .pg-pair-face{transform:translate(6px,-6px) rotate(8deg)}
.pg-mood-cat:hover .pg-pair-back{transform:translate(-4px,2px) rotate(-9deg)}
.pg-mood-cat .pg-cat-body{margin-top:8px}

/* на широких экранах заголовок стоит по центру рендера стола; верхний отступ секции уменьшаем, чтобы пустота над заголовком не накладывалась на отступ рендера */
@media(min-width:1024px){html[data-editorial="vsd"] .pg-detail-section{padding-top:40px}}

/* ───────── Proof, аудитория ───────── */
@media(min-width:641px){.pg-proof-item+.pg-proof-item{border-left:1px solid var(--pg-line)}}
.pg-aud-icon{transition:background-color .3s var(--pg-ease),color .3s var(--pg-ease)}
.pg-aud:hover .pg-aud-icon{background:#F1BA70;color:#25235A}

/* ───────── Финал: ночь, звёзды, гирлянда ───────── */
.pg-finale-card{padding-top:92px}
.pg-final-garland{position:absolute;z-index:1;top:0;left:0;right:0;display:flex;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent)}
.pg-final-garland .pg-garland{flex:0 0 max(440px,50%);width:max(440px,50%)}
.pg-finale h2 em{text-shadow:0 0 40px rgba(241,186,112,.4)}

/* ───────── Адаптив ───────── */
@media(max-width:1023px){.pg-mood-intro{grid-template-columns:1fr}.pg-mood-scene{display:none}.pg-mood-copy .pg-section-head{margin:0 auto;text-align:center}.pg-mood-copy .pg-head-lead{margin-inline:auto}}
@media(max-width:900px){.pg-quote--dark{padding:40px 28px 84px}.pg-about-aside{max-width:560px}}
@media(max-width:820px){
/* лента настроений — по правилу лент отзывов UI Library (#testimonials): первая карточка стоит на отступе страницы, а не у края экрана
   (scroll-padding в px — процент здесь считался бы от самой ленты и давал 0), снизу запас под тень карточки */
.pg-mood{--mood-gutter:22px;display:flex;grid-template-columns:none;gap:14px;margin:0 calc((100% - 100vw)/2) -34px;padding:6px var(--mood-gutter) 56px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--mood-gutter);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pg-mood::-webkit-scrollbar{display:none}
.pg-mood-cat{flex:0 0 min(78vw,310px);scroll-snap-align:start}
.pg-mood:focus-visible{outline-offset:-3px}
}
@media(max-width:820px){
/* в одну колонку гирлянда — статичный фон под верхним краем hero, чтобы не лежать на цене и кнопке */
.pg-hero-garland{display:none}
html[data-editorial="vsd"] .pg-hero{padding-top:84px;background:var(--vsd-garland) 50% 0/520px auto repeat-x,radial-gradient(52% 38% at 74% 104%,rgba(224,124,112,.20),transparent 72%),radial-gradient(58% 58% at 86% 34%,var(--pg-hero-glow),transparent 70%),radial-gradient(35% 48% at 12% 10%,var(--pg-hero-shine),transparent 76%),var(--pg-hero)}
}
@media(max-width:620px){
html[data-editorial="vsd"] .pg-hero{padding-top:76px;background-size:430px auto,auto,auto,auto,auto}
.pg-gallery-section::before{height:40px;background-size:230px auto}
.pg-vsd-ways{margin-top:32px}
.pg-quote--dark{padding:34px 22px 84px}
.pg-quote--dark p{font-size:19px}
.pg-mini-card{width:88px;right:22px}
.pg-about-aside{padding-bottom:64px}
.pg-finale-card{padding-top:76px}
.pg-final-garland .pg-garland{flex-basis:100%;width:100%}
.pg-final-garland .pg-garland--b{display:none}
}
@media(max-width:620px){.pg-mood{--mood-gutter:18px}}
@media(max-width:360px){.pg-mood{--mood-gutter:14px}.pg-pair-in{--pw:104px;--ps:88px}.pg-pair{height:226px}.pg-pair-in{height:208px}}
/* «Время открыть коробку»: коробка крупнее (камера вписывает её по высоте сцены) и цветное свечение за ней шире */
@media(max-width:620px){
.pg-final-stage{height:340px}
.pg-final-glow{width:150%}
}
@media(prefers-reduced-motion:reduce){
.pg-garland .b,.pg-hero::after,.pg-finale-card::before,.pg-on-dark::before,.pg-gallery-section::before,.pg-pair-in img{animation:none!important;transition:none!important}
.pg-mood-cat:hover .pg-pair-face,.pg-mood-cat:hover .pg-pair-back{transform:none}
.pg-mood-cat:hover .pg-pair-face{transform:rotate(6deg)}
.pg-mood-cat:hover .pg-pair-back{transform:rotate(-7deg)}
}
.pg-promise{overflow-x:clip}