/* BATCH deck shell, current generation (decks from 2026-10-22 on): placeholders, print,
   phone layout, gameplay video button, case links, growing bars, before/after slider.
   Load after deck.css. Older decks keep their own versions of these rules inline. */
/* BATCH tokens (BATCH design system) */
:root{
  --primary:#4242d5; --lime:#e4ff97; --pink:#f38be9; --violet:#a259ff; --sky:#80caff; --orange:#ff8311;
  --surface:#f7f7f7; --ink:#111; --white:#fff;
  --font-display:"Dela Gothic One","Arial Black",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --bar-h:72px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-ui:cubic-bezier(.22,.7,.3,1);
}

 

/* Stage: fixed 1920×1080 (16:9) canvas scaled into the space above the bar */

/* Image placeholders: keep the slot's size, show what goes there */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:18px;text-align:center;border-radius:inherit;border:3px dashed rgba(17,17,17,.22);container-type:size;
  color:rgba(17,17,17,.56);
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.28) 22px 44px)}
.ph svg{width:56px;height:56px;flex:none;opacity:.8}
.ph span{max-width:34ch;font:500 clamp(13px,4.4cqi,22px)/1.35 var(--font-mono);letter-spacing:.02em;text-wrap:balance}
.ph--dark{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.34);
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.08) 22px 44px)}
@container (max-height:170px){.ph svg{display:none}}

/* Bottom control bar — BATCH: ink bar, lime blocks, round buttons */

/* BATCH × KidBurg lockup */
.bar__logo{display:flex;align-items:center;gap:14px;flex:none}
.bar__logo img{display:block}
.bar__batch{height:26px}
.bar__client{height:46px;width:auto}
.bar__name{font-size:18px;font-weight:600;white-space:nowrap}
.bar__x{width:14px;height:14px;color:rgba(255,255,255,.5)}

/* tooltip: the slide's name, fades up above the hovered segment */

/* Reveal: blocks rise in with a short stagger each time a slide opens */

/* Progress bars (age split on slide 03) grow from zero */
.grow{transform-origin:left center;transform:scaleX(0)}
.slide.is-in .grow{transform:none;transition:transform 1100ms var(--ease-out) 300ms}

@media (max-width:699px){
  :root{--bar-h:60px}
  .bar{gap:14px}
  .bar__logo{display:none}
  .steps{gap:3px}
  .counter{font-size:13px}
  .btn{width:40px;height:40px}
  .canvas{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .slide,.slide.is-active,.step::before{transition:none}
  .rv,.grow{opacity:1;transform:none}
  .slide.is-in .rv,.slide.is-in .grow{transition:none}
}

/* ===== Mobile portrait: slides reflow into one column and zoom to fit above the bar ===== */
html.m{--bar-h:48px}

html.m .slide [style*="grid-template-columns"]:not([data-keep]){grid-template-columns:minmax(0,1fr)!important}

html.m .slide [style*="margin-top:auto"],html.m .slide [style*="margin:auto 0 0"]{margin-top:0!important}
html.m .slide [style*="margin:36px 0 0"],html.m .slide [style*="margin-top:36px"]{margin-top:0!important}
html.m .slide :has(> .ph),html.m .slide :has(> .pic){min-height:260px}
html.m .slide img[src*="batch-sign"]{display:none}
html.m .slide h1,html.m .slide h2[style*="font-size:120px"]{font-size:76px!important}
html.m .slide h2[style*="font-size:84px"]{font-size:60px!important}

html.m .bar__logo,html.m .counter{display:none}

/* ===== Print / PDF (?print=1): every slide is one 1920×1080 page ===== */

html.print .slide{position:relative!important;inset:auto;opacity:1;visibility:visible;transition:none;
  height:1080px;overflow:hidden;break-after:page;page-break-after:always}
html.print .rv,html.print .grow{opacity:1!important;transform:none!important;transition:none!important}

/* Gameplay video slide */
[data-vid] video{background:#111}
html.m .slide[data-vid]{padding:0!important;height:auto;min-height:0!important;aspect-ratio:16/9}
html.print .vid-sound{display:none}

/* ===== Mobile portrait, deck-specific: slide = screen from the top edge to the slim bar ===== */
html.m{--bar-h:34px}
html.m .bar{padding-top:0;gap:8px}
html.m .steps{height:22px;margin:0 6px}
html.m .step{height:22px}
html.m .step::before{height:3px}
html.m .step.is-cur::before{height:6px}
html.m .btn{width:26px;height:26px;border-width:1px}
html.m .btn svg{width:12px;height:12px}
/* small row grids keep their columns (age bars, metric rows, ladder) */
html.m .slide [style*="margin-left:"]{margin-left:0!important}
/* picture boxes never collapse into strips */
html.m .slide :has(> .pic){min-height:300px!important}
/* picture cards: picture beside the text instead of above it */
html.m .slide [style*="grid-template-rows:minmax(0,1fr) auto"]{grid-template-rows:none!important;grid-template-columns:38% minmax(0,1fr)!important}
html.m .slide [style*="grid-template-rows:minmax(0,1fr) auto"] > :has(> .pic){min-height:180px!important}
html.m .slide [style*="grid-template-rows:minmax(0,1fr) auto"] > [style*="height:2"]{height:auto!important}
/* progression ladder: reward goes under the status */
html.m .slide [style*="grid-template-columns:150px 300px 1fr"]{grid-template-columns:130px minmax(0,1fr)!important;row-gap:4px!important;padding:18px 32px!important;border-radius:32px!important}
html.m .slide [style*="grid-template-columns:150px 300px 1fr"] > :nth-child(3){grid-column:2}
html.m .slide [style*="padding:0 40px 0 310px"]{display:none!important}
html.m .slide [style*="aspect-ratio:16/9"]:has(> .pic){min-height:0!important}
/* rows with arrows stack vertically */
html.m .slide [data-stack]{flex-direction:column!important;align-items:stretch!important}
html.m .slide [data-stack] > svg,html.m .slide svg[style*="justify-self:center"]{transform:rotate(90deg);align-self:center}
/* headings: long Russian words must fit the narrow column */
html.m .slide h2{font-size:44px!important}
html.m .slide h2[style*="font-size:72px"]{font-size:52px!important}
html.m .slide h1{font-size:72px!important}
html.m .slide h2,html.m .slide h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html.m .slide [style*="grid-template-rows:minmax(0,1fr) auto"] h3{font-size:28px!important}
html.m .slide [style*="grid-template-columns:150px 300px 1fr"] > span:first-child{font-size:44px!important}
/* gameplay video fills the screen down to the bar */
html.m .slide[data-vid]{aspect-ratio:auto!important;min-height:var(--mh)!important}
html.m .slide[data-vid] video{object-fit:contain!important}
/* ===== Mobile: image placeholders keep height ===== */
html.m .slide :has(> .ph){min-height:300px!important}
/* Gameplay video starts on click: big play button over the poster */
.vid-play{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border:0;border-radius:999px;
  background:var(--lime);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.35);
  transition:transform 280ms var(--ease-ui),opacity 280ms var(--ease-ui)}
.vid-play svg{width:92px;height:92px;margin-left:12px}
.vid-play:hover{transform:scale(1.06)}
.slide.is-playing .vid-play{opacity:0;pointer-events:none;transform:scale(.9)}
.slide.is-loading .vid-play{animation:vidpulse 900ms var(--ease-ui) infinite alternate;cursor:progress}
@keyframes vidpulse{to{transform:scale(.9);opacity:.75}}
.slide[data-vid] video{cursor:pointer}
html.print .vid-play{display:none}
/* «О нас»: case cards are links to the games */
.case-link{transition:transform 240ms var(--ease-ui),box-shadow 240ms var(--ease-ui)}
.case-link:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(17,17,17,.12)}
.case-go{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:999px;background:var(--primary);color:#fff;display:grid;place-items:center}
.case-go svg{width:16px;height:16px}
.case-link[style*="border-radius:24px"] .case-go{top:auto;bottom:8px;right:8px;width:24px;height:24px}
.case-link[style*="border-radius:24px"] .case-go svg{width:13px;height:13px}
.case-link:hover .case-go{background:var(--lime);color:var(--ink)}

/* bars of the promo chart grow from the bottom */
.growy{transform-origin:center bottom;transform:scaleY(0)}
.slide.is-in .growy{transform:none;transition:transform 900ms var(--ease-out) 250ms}
html.print .growy{transform:none!important}
@media (prefers-reduced-motion:reduce){.growy{transform:none}}
/* before / after comparison (pictures VISUAL_0N_*_BEFORE / _AFTER go into .cmp__a / .cmp__b) */
.cmp{--x:50%;position:relative;border-radius:28px;overflow:hidden;min-height:0;cursor:ew-resize;touch-action:none;user-select:none;outline:none}
.cmp__a,.cmp__b{position:absolute;inset:0;display:flex;align-items:center;border-radius:inherit}
.cmp__a{background:repeating-linear-gradient(135deg,#ececea 0 22px,#f4f4f2 22px 44px);justify-content:flex-start;padding:0 0 0 7%}
.cmp__b{background:repeating-linear-gradient(135deg,#d9ecff 0 22px,#e6f3ff 22px 44px);justify-content:flex-end;padding:0 7% 0 0;clip-path:inset(0 0 0 var(--x))}
.cmp__a > span,.cmp__b > span{font:500 17px/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:rgba(17,17,17,.55);max-width:38%}
.cmp__b > span{text-align:right}
.cmp > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__a > .cmp__tag,.cmp__b > .cmp__tag{position:absolute;bottom:18px;max-width:none;background:rgba(17,17,17,.78);color:#fff;border-radius:999px;padding:8px 14px;font:500 15px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.cmp__a > .cmp__tag{left:18px}
.cmp__b > .cmp__tag{right:18px}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:#111;pointer-events:none}
.cmp__line b{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:999px;background:#e4ff97;border:4px solid #111;
  box-shadow:0 6px 18px rgba(0,0,0,.2)}
.cmp__line b::before,.cmp__line b::after{content:"";position:absolute;top:50%;margin-top:-7px;border:7px solid transparent}
.cmp__line b::before{left:3px;border-right-color:#111}
.cmp__line b::after{right:3px;border-left-color:#111}
.cmp__name{position:absolute;left:18px;top:18px;background:#111;color:#fff;border-radius:999px;padding:9px 16px;font:500 16px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.cmp:focus-visible .cmp__line b{box-shadow:0 0 0 4px #4242d5}
html.print .cmp{--x:50%!important}
html.m .slide .cmp{min-height:260px}