/* Create the Battle — главная страница. Визуальный язык игры: тёмно-синий фон,
   кремовые панели с толстым контуром, жёлтые кнопки, фиолетовые плашки заголовков,
   Russo One для заголовков и Rubik для текста. Без сторонних запросов. */

@font-face{font-family:"Russo One";src:url(../fonts/russo-one.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/rubik-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/rubik-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy:#1d1a2b;--navy-deep:#14121d;--navy-2:#262238;--navy-3:#332d49;--navy-4:#443c60;
  --cream:#fff3d6;--cream-2:#f6e7c4;--cream-3:#dcc693;
  --yellow:#f8c62c;--yellow-2:#ffd95a;--yellow-dark:#c48f05;
  --purple:#8b3df2;--purple-2:#aa66ff;--purple-dark:#5a2ab3;
  --red:#e8463b;--green:#2fc06e;--blue:#2fb3f0;
  --ink:#1d1a2b;--ink-soft:#4f4868;--text:#f3eee2;--muted:#b9b2cb;
  --font-title:"Russo One","Arial Black",Impact,sans-serif;
  --font-text:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;--gutter:16px;
  --ease-pop:cubic-bezier(.2,.9,.3,1.25);
}
@media (min-width:700px){:root{--gutter:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--navy-deep);color:var(--text);font:17px/1.6 var(--font-text);overflow-x:hidden}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
b,strong{font-weight:700}
ul,ol{margin:0;padding:0}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--yellow);color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}

/* ── Кирпичики игры ─────────────────────────────────────────── */
.plate{display:inline-block;margin:0;font-family:var(--font-title);font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:#fff;font-size:clamp(22px,3.4vw,34px);line-height:1;padding:14px 30px 15px;border:3px solid var(--navy);border-radius:16px;background:linear-gradient(180deg,var(--purple-2),var(--purple));box-shadow:0 7px 0 var(--purple-dark),0 7px 0 3px var(--navy);text-shadow:0 2px 0 rgba(0,0,0,.28);transform:rotate(-1.2deg)}
.sec-head{text-align:center;margin:0 0 32px}
.sec-head p{color:var(--muted);max-width:640px;margin:20px auto 0;font-size:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-title);font-weight:400;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;color:var(--ink);background:var(--cream);border:3px solid var(--navy);border-radius:16px;padding:13px 22px;font-size:16px;line-height:1;cursor:pointer;box-shadow:0 6px 0 var(--cream-3),0 6px 0 3px var(--navy);transition:transform .14s var(--ease-pop),box-shadow .14s;white-space:nowrap}
.btn-yellow{background:linear-gradient(180deg,var(--yellow-2),var(--yellow));box-shadow:0 6px 0 var(--yellow-dark),0 6px 0 3px var(--navy)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cream-3),0 2px 0 3px var(--navy)}
.btn-yellow:active{box-shadow:0 2px 0 var(--yellow-dark),0 2px 0 3px var(--navy)}
.btn-lg{font-size:17px;padding:16px 24px;border-radius:18px}
.btn:focus-visible{outline:3px solid #fff;outline-offset:4px}

.panel{background:var(--cream);color:var(--ink);border:3px solid var(--navy);border-radius:22px;box-shadow:0 8px 0 var(--cream-3),0 8px 0 3px var(--navy);padding:24px 22px}
@media (min-width:700px){.panel{padding:30px 32px}}

.chip{display:inline-block;font-family:var(--font-title);text-transform:uppercase;font-size:12px;letter-spacing:.04em;line-height:1;padding:7px 11px;border-radius:999px;border:2px solid var(--navy);background:var(--cream);color:var(--ink)}
.chip-blue{background:#bfe9fb}.chip-green{background:#b9f0c9}.chip-yellow{background:var(--yellow)}.chip-purple{background:#e5cdff}
.badge{display:inline-block;font-family:var(--font-title);text-transform:uppercase;font-size:12px;letter-spacing:.06em;padding:7px 12px;border-radius:999px;border:2px solid var(--navy);color:#fff}
.badge-green{background:var(--green);box-shadow:0 3px 0 #1d8a4c}
.kicker{display:inline-block;font-family:var(--font-title);color:var(--yellow);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}

/* ── Шапка ─────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(20,18,29,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:2px solid rgba(255,255,255,.06);transition:box-shadow .25s}
.top.scrolled{box-shadow:0 6px 30px rgba(0,0,0,.45)}
.top-in{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-title);font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.brand-img{width:36px;height:36px;border-radius:10px;border:2px solid var(--navy);box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.nav{display:none;gap:2px;margin-left:auto}
.nav a{font:500 15px/1 var(--font-text);color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:10px;transition:color .15s,background .15s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.btn-top{margin-left:auto;padding:10px 14px;font-size:13px;border-width:2px;border-radius:12px;box-shadow:0 4px 0 var(--yellow-dark),0 4px 0 2px var(--navy)}
.btn-top:active{box-shadow:0 1px 0 var(--yellow-dark),0 1px 0 2px var(--navy)}
@media (min-width:960px){.nav{display:flex}.btn-top{margin-left:8px}}

/* ── Герой ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:36px 0 44px;isolation:isolate}
.hero-bg{position:absolute;inset:-12% 0 0;z-index:-1}
.hero-bg picture,.hero-bg-img{width:100%;height:100%}
.hero-bg-img{object-fit:cover;object-position:center 45%;will-change:transform}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,29,.62) 0%,rgba(20,18,29,.42) 45%,var(--navy-deep) 100%)}
.hero-grid{display:grid;gap:14px;grid-template-areas:"copy" "art" "cta"}
.hero-copy{grid-area:copy}.hero-art{grid-area:art}.hero-cta{grid-area:cta}
@media (min-width:900px){
  .hero{padding:64px 0 72px}
  .hero-grid{grid-template-columns:1.05fr 1fr;grid-template-areas:"copy art" "cta art";align-items:center;column-gap:36px;row-gap:28px}
}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.eyebrow-text{font-size:14px;color:var(--muted);letter-spacing:.02em}
.title{font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:clamp(44px,8.6vw,78px);line-height:.95;margin:12px 0 10px;color:var(--yellow);letter-spacing:.01em;
  text-shadow:-3px 0 var(--navy),3px 0 var(--navy),0 -3px var(--navy),0 3px var(--navy),-2px -2px var(--navy),2px -2px var(--navy),-2px 2px var(--navy),2px 2px var(--navy),0 8px 0 var(--navy),0 14px 30px rgba(0,0,0,.5)}
.title span{display:inline-block;white-space:nowrap}
.pitch{font-family:var(--font-title);text-transform:uppercase;font-size:clamp(18px,3vw,27px);color:#fff;margin:0 0 14px;letter-spacing:.02em;text-shadow:0 2px 0 var(--navy),0 4px 18px rgba(0,0,0,.5)}
.lead{font-size:clamp(17px,1.7vw,19px);max-width:520px;margin:0;color:var(--text);text-shadow:0 1px 10px rgba(0,0,0,.5)}
#comics .lead{text-shadow:none;margin:18px 0 22px;max-width:none}

.hero-art{position:relative;height:clamp(260px,58vw,460px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.glow{position:absolute;left:50%;top:44%;width:min(72%,460px);height:auto;transform:translate(-50%,-50%) scale(1.1);opacity:.45;animation:flicker 4.5s ease-in-out infinite}
.sprite{position:relative;flex:0 0 auto}
.sprite .bob{position:relative;animation:bob 3.8s ease-in-out infinite}
.sprite picture{position:relative;z-index:1}
.sprite img{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.shadow{position:absolute;left:50%;bottom:-8px;width:62%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent 80%);transform:translateX(-50%);z-index:0;animation:shadow 3.8s ease-in-out infinite}
.sprite-shoker{width:clamp(200px,32vw,320px);z-index:2}
.sprite-tembl{width:clamp(150px,24vw,245px);margin-right:-6%;margin-bottom:2%;z-index:1}
.sprite-tembl .bob,.sprite-tembl .shadow{animation-delay:-1.6s}
.burst{position:absolute;pointer-events:none;z-index:2}
.burst-img{width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.burst-bah{right:2%;top:4%;width:clamp(84px,15vw,150px);transform:rotate(10deg)}
.gem{position:absolute;width:clamp(34px,6vw,56px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:floaty 5s ease-in-out infinite}
.gem-img{width:100%;height:auto}
.gem-1{left:4%;bottom:34%;animation-delay:-2s}
.gem-2{left:14%;top:6%;width:clamp(40px,7vw,64px);animation-delay:-.7s}
.spark{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;background:var(--yellow-2);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);opacity:0;animation:twinkle 2.6s ease-in-out infinite;animation-delay:var(--t,0s);pointer-events:none}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
.cta-row .btn{flex:1 1 auto}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;list-style:none;color:var(--muted);font-size:14px}
.trust li{position:relative;padding-left:18px}
.trust li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--navy)}

/* Вступительная анимация */
.js .hero-copy>*{animation:rise .7s var(--ease-pop) both}
.js .hero-copy>:nth-child(2){animation-delay:.08s}
.js .hero-copy>:nth-child(3){animation-delay:.18s}
.js .hero-copy>:nth-child(4){animation-delay:.26s}
.js .hero-cta{animation:rise .7s .36s var(--ease-pop) both}
.js .sprite-shoker{animation:enterRight .8s .15s var(--ease-pop) both}
.js .sprite-tembl{animation:enterLeft .8s .3s var(--ease-pop) both}
.js .burst-bah{animation:pop .55s .95s var(--ease-pop) both}
.js .glow{animation:flicker 4.5s 1s ease-in-out infinite,fadeIn 1.2s .6s both}

/* ── Бегущая строка звуков ─────────────────────────────────── */
.ticker{overflow:hidden;background:var(--navy);border-block:3px solid var(--navy-3);padding:10px 0;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--navy),transparent)}
.ticker-track{display:flex;align-items:center;width:max-content;animation:ticker 192s linear infinite;will-change:transform;backface-visibility:hidden}
/* отступ — у каждого слова (а не gap): тогда период ленты ровно половина её ширины */
.ticker-track picture{flex:none;margin-right:34px}
.ticker-track img{height:58px;width:auto}
.ticker-track picture:nth-child(odd) img{transform:rotate(-5deg)}
.ticker-track picture:nth-child(even) img{transform:rotate(4deg) translateY(2px)}

/* ── Секции ────────────────────────────────────────────────── */
.sec{padding:64px 0;position:relative}
@media (min-width:900px){.sec{padding:96px 0}}
.sec-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:28px}
.sec-bg picture,.sec-bg-img{width:100%;height:100%}
.sec-bg-img{object-fit:cover;opacity:.28}
.sec-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,29,.35),rgba(20,18,29,.8))}

/* Об игре */
.about-grid{display:grid;gap:30px;align-items:start}
@media (min-width:900px){.about-grid{grid-template-columns:1.1fr .9fr;gap:40px}}
.about-text p{margin:0 0 14px;font-size:18px;line-height:1.55}
.about-text p:last-of-type{margin-bottom:0}
.quote{margin:18px 0 0;padding:16px 18px;border-left:5px solid var(--purple);background:rgba(139,61,242,.09);border-radius:0 14px 14px 0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.quote b{display:block;font-family:var(--font-title);font-size:15px;margin-top:10px;text-transform:uppercase;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:22px 0 0}
.stats li{background:var(--navy);color:var(--cream);border-radius:14px;padding:12px 6px 10px;text-align:center;border:2px solid var(--navy-3)}
.stats b{display:block;font-family:var(--font-title);font-weight:400;font-size:28px;line-height:1;color:var(--yellow);margin-bottom:5px}
.stats span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;line-height:1.2;display:block}

.comic{background:#fff;color:var(--ink);border:3px solid var(--navy);border-radius:14px;padding:12px;display:grid;gap:10px;box-shadow:0 8px 0 var(--cream-3),0 8px 0 3px var(--navy);transform:rotate(1deg)}
.comic-title{font-family:var(--font-title);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);text-align:center;margin:2px 0 0}
.panel-c{position:relative;border:3px solid var(--navy);border-radius:6px;background:#fdf7e8;background-image:radial-gradient(rgba(29,26,43,.06) 1px,transparent 1.5px);background-size:9px 9px;padding:14px 12px 12px;display:flex;gap:8px;align-items:flex-end;min-height:120px}
.panel-c .num{position:absolute;left:-3px;top:-3px;background:#fff;border:3px solid var(--navy);font-family:var(--font-title);font-size:13px;line-height:1;padding:4px 8px;border-radius:6px 0 8px 0;z-index:1}
.narr{margin:0;background:#fff7d6;border:2px solid var(--navy);padding:8px 12px;font-size:15px;line-height:1.4;font-style:italic;border-radius:4px;box-shadow:2px 2px 0 var(--navy)}
.bubbles{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0}
.bubble{position:relative;margin:0;background:#fff;border:2px solid var(--navy);border-radius:14px;padding:7px 11px;font-size:14px;line-height:1.35;box-shadow:2px 2px 0 var(--navy);max-width:92%}
.bubble b{font-family:var(--font-title);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-right:2px}
.bubble-r{align-self:flex-end}
.bubbles .bubble:first-child{max-width:84%}
.bubble::after{content:"";position:absolute;bottom:-8px;width:12px;height:12px;background:#fff;border:2px solid var(--navy);border-top:0;border-left:0;transform:rotate(45deg)}
.bubble-l::after{left:18px}
.bubble-r::after{right:18px;transform:rotate(45deg) scaleX(-1) rotate(-90deg)}
.comic-sprite{width:72px;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.comic-sprite-flip img{transform:scaleX(-1)}
.burst-comic{right:-10px;top:-16px;width:64px;transform:rotate(12deg);z-index:2}
.comic-foot{margin:0;text-align:right;font-size:14px}
.comic-foot a{color:var(--purple-dark);font-weight:700;text-decoration:none}
.comic-foot a:hover{text-decoration:underline}

/* Как играть */
.feature{display:grid;gap:22px;margin:0 0 56px;align-items:center;position:relative}
.feature:last-child{margin-bottom:0}
.feature-forge,.feature-arena{padding:26px 18px 30px;border-radius:28px;border:2px solid var(--navy-3);background:var(--navy-2);overflow:hidden}
@media (min-width:900px){
  .feature{grid-template-columns:1fr 1.15fr;gap:48px;margin-bottom:84px}
  .feature-rev .feature-copy{order:2}
  .feature-forge,.feature-arena{padding:40px 40px 44px}
}
.feature h3{font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3vw,34px);line-height:1.05;margin:0 0 14px;color:#fff}
.feature p{margin:0 0 12px;color:var(--text)}
.feature p:last-child{margin-bottom:0}
.feature ul:not(.skills):not(.places){margin:10px 0 0;padding-left:20px;color:var(--muted)}
.feature ul:not(.skills):not(.places) li{margin:4px 0}
.feature a{color:var(--yellow-2)}
.shot{position:relative;align-self:center;isolation:isolate}
.shot img{width:100%;border-radius:18px;border:3px solid var(--navy);box-shadow:0 10px 0 var(--navy-2),0 10px 0 3px var(--navy),0 30px 60px rgba(0,0,0,.5);background:var(--navy)}
.burst-shot{width:clamp(70px,12vw,120px)}
.burst-s1{left:-4%;top:-10%;transform:rotate(-12deg)}
.burst-s2{right:-3%;top:-8%;transform:rotate(9deg)}
.burst-s3{right:4%;bottom:-12%;transform:rotate(-6deg)}
.burst-s4{left:-4%;bottom:-6%;transform:rotate(-10deg)}
@media (max-width:899px){.burst-s1{left:0}.burst-s2{right:0}.burst-s3{right:2%}.burst-s4{left:0}}
.skills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:4px 0 14px}
.skills .chip{font-size:11px}

.shot-stack{padding:8% 0 0 14%}
.shot-stack .shot-back{position:absolute;left:0;top:0;width:72%;transform:rotate(-4deg);opacity:.92}
.shot-stack .shot-front{position:relative;transform:rotate(1.5deg)}

/* Кузница: рисунок → оружие */
.forge-demo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:22px}
.forge-canvas,.forge-result{position:relative;aspect-ratio:1;border:3px solid var(--navy);border-radius:16px;overflow:hidden}
.forge-canvas{background:#fff;box-shadow:0 6px 0 var(--navy-3),0 6px 0 3px var(--navy)}
.forge-result{background:radial-gradient(circle at 50% 45%,#3a3157,var(--navy) 75%);box-shadow:0 6px 0 var(--navy-3),0 6px 0 3px var(--navy);display:grid;place-items:center}
.doodle{width:100%;height:100%}
.doodle path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .doodle path{stroke-dashoffset:1}
.js .doodle .d1{animation:draw1 8s linear infinite}
.js .doodle .d2{animation:draw2 8s linear infinite}
.js .doodle .d3{animation:draw3 8s linear infinite}
.js .doodle .d4{animation:draw4 8s linear infinite}
.js .doodle .d5{animation:draw5 8s linear infinite}
.forge-result picture{width:64%;max-width:200px;position:relative;z-index:1;margin-bottom:8%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.js .forge-result picture{animation:forged 8s var(--ease-pop) infinite}
.forge-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,243,214,.95),rgba(248,198,44,.6) 35%,transparent 70%);opacity:0}
.js .forge-flash{animation:flash 8s linear infinite}
.js .forge-result .spark{animation:twinkleOnce 8s linear infinite;animation-delay:var(--t,0s)}
.forge-label{position:absolute;left:8px;right:8px;bottom:8px;text-align:center;font-family:var(--font-title);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:rgba(255,255,255,.8);border-radius:8px;padding:4px 6px;line-height:1.1;z-index:2}
.forge-label-result{color:var(--ink);background:var(--yellow);border:2px solid var(--navy)}
.js .forge-label-result{opacity:0;animation:labelIn 8s linear infinite}
.forge-mid{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-title);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.forge-arrow{width:34px;height:12px;background:var(--yellow);clip-path:polygon(0 35%,60% 35%,60% 0,100% 50%,60% 100%,60% 65%,0 65%)}
.js .forge-arrow{animation:nudge 1.2s ease-in-out infinite}

/* Арена */
.steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 16px}
.step{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-title);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px 5px 5px;border-radius:999px;border:2px solid var(--navy);background:var(--navy-3);color:var(--cream)}
.step i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);font-style:normal;font-size:11px;color:#fff}
.step.on{background:var(--yellow);color:var(--ink)}
.step.on i{background:var(--navy);color:var(--yellow)}
.places{display:grid;gap:8px;list-style:none;margin:0 0 14px}
.place{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:rgba(20,18,29,.55);border:2px solid var(--navy-3);border-radius:14px;padding:10px 14px}
.place b{display:block;font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:14px;color:#fff;margin-bottom:2px}
.place span{font-size:14px;color:var(--muted);line-height:1.4}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--navy);box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.dot-road{background:linear-gradient(180deg,#8fd3ff,#3d8ad8)}
.dot-fort{background:linear-gradient(180deg,#ffb15e,#c8551f)}
.dot-forest{background:linear-gradient(180deg,#8fe08a,#2d8a3e)}

/* ── Герои ─────────────────────────────────────────────────── */
.morphs{display:grid;gap:20px;margin-bottom:26px}
@media (min-width:860px){.morphs{grid-template-columns:1fr 1fr}}
.morph{position:relative;overflow:hidden;background:var(--navy-2);border:3px solid var(--navy);border-radius:26px;padding:18px;display:grid;gap:14px;box-shadow:0 8px 0 var(--navy),0 24px 50px rgba(0,0,0,.4)}
@media (min-width:560px){.morph{grid-template-columns:250px 1fr;align-items:center;gap:20px;padding:22px}.morph-stage{width:250px}}
.morph-red{background:radial-gradient(circle at 25% 40%,rgba(232,70,59,.22),transparent 55%),var(--navy-2)}
.morph-green{background:radial-gradient(circle at 25% 40%,rgba(47,192,110,.2),transparent 55%),var(--navy-2)}
.morph-stage{position:relative;width:min(100%,250px);aspect-ratio:1;margin:0 auto}
.morph-aura{position:absolute;left:50%;top:50%;width:120%;height:auto;transform:translate(-50%,-52%);opacity:0;transition:opacity .35s;pointer-events:none}
.morph-red .morph-aura{filter:hue-rotate(230deg) saturate(1.3)}
.morph.on .morph-aura{opacity:.75;animation:auraFlicker 1.1s ease-in-out infinite}
.morph-static{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .25s}
.morph-static img{max-height:100%;width:auto;height:auto}
.morph.ready .morph-static{opacity:0}
.morph-frames{position:absolute;inset:0;background-repeat:no-repeat;background-size:auto 100%;background-position:0 0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.morph.on .morph-frames{animation:morphFwd .9s steps(7) forwards}
.morph.back .morph-frames{animation:morphBack .7s steps(7) forwards}
.burst-morph{right:-6%;top:0;width:34%;opacity:0;transform:scale(0) rotate(14deg)}
.morph.on .burst-morph{animation:pop .5s .55s var(--ease-pop) forwards}
.morph-info h3{font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);line-height:1.1;margin:0 0 10px;color:#fff}
.nw{white-space:nowrap}
.morph-info p{margin:0 0 16px;color:var(--text);font-size:16px}
.morph-btn{font-size:15px;padding:12px 20px}
.morph-btn[aria-pressed="true"]{background:var(--cream);box-shadow:0 6px 0 var(--cream-3),0 6px 0 3px var(--navy)}
html:not(.js) .morph-btn{display:none}

.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;list-style:none;margin:0 0 36px}
@media (max-width:699px){
  .forms{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:4px 4px 12px;margin:0 -4px 28px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .forms::-webkit-scrollbar{display:none}
  .form{flex:0 0 min(60%,220px);scroll-snap-align:start}
}
.form{background:var(--navy-2);border:2px solid var(--navy-3);border-radius:18px;padding:14px 10px 14px;text-align:center;transition:border-color .2s,transform .2s}
.form:hover{border-color:var(--purple-2)}
.form picture{display:grid;place-items:center;height:150px;margin:0 auto 10px}
.form img{height:150px;width:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.form b{display:block;font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:12px;line-height:1.2;color:#fff}
.form small{display:block;color:var(--muted);font-size:12px;margin:5px 0 8px;line-height:1.3}
.form .chip{font-size:10px;padding:5px 9px}

.group-title{font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:14px;letter-spacing:.1em;color:var(--yellow);margin:0 0 12px;display:flex;align-items:center;gap:12px}
.group-title::after{content:"";flex:1;height:2px;background:var(--navy-3)}
.fighters{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:12px;list-style:none;margin:0 0 26px}
.fighter{background:var(--navy-2);border:2px solid var(--navy-3);border-radius:18px;padding:14px 8px 12px;text-align:center;transition:border-color .2s,transform .2s;will-change:transform}
.fighter:hover{border-color:var(--yellow)}
.fighter picture{display:grid;place-items:center;height:118px;margin:0 auto 10px}
.fighter img{height:118px;width:auto;transition:transform .25s var(--ease-pop);filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.fighter:hover img{transform:translateY(-6px) scale(1.07)}
.fighter b{display:block;font-family:var(--font-title);font-weight:400;font-size:12px;text-transform:uppercase;color:#fff;margin-bottom:7px;letter-spacing:.02em}
.fighter .chip{font-size:10px;padding:5px 8px}
.note{text-align:center;color:var(--muted);margin:0;font-size:15px}
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out,border-color .2s}

/* ── Карусель ──────────────────────────────────────────────── */
.carousel{position:relative}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 6px 14px;margin:0 -6px;list-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline-offset:-3px}
.slide{flex:0 0 min(88%,760px);scroll-snap-align:center}
.slide figure{margin:0}
.slide img{width:100%;border-radius:18px;border:3px solid var(--navy);box-shadow:0 8px 0 var(--navy-2),0 8px 0 3px var(--navy);background:var(--navy)}
.slide figcaption{margin:14px 4px 0;color:var(--muted);font-size:15px;line-height:1.45}
.slide figcaption b{color:#fff;font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:13px;letter-spacing:.04em;display:block;margin-bottom:2px}
.car-btn{position:absolute;top:34%;z-index:2;width:50px;height:50px;border-radius:50%;border:3px solid var(--navy);background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--cream-3),0 4px 0 3px var(--navy);cursor:pointer;display:none;place-items:center;padding:0;transition:transform .14s}
.car-btn:hover{transform:translateY(-2px)}
.car-btn:active{transform:translateY(2px)}
.js .car-btn{display:grid}
.car-prev{left:-10px}.car-next{right:-10px}
@media (min-width:1240px){.car-prev{left:-60px}.car-next{right:-60px}}
.dots{display:none;justify-content:center;gap:9px;margin-top:6px}
.js .dots{display:flex}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--cream);background:transparent;padding:0;cursor:pointer;transition:background .15s,transform .15s}
.dots button[aria-current="true"]{background:var(--yellow);border-color:var(--yellow);transform:scale(1.25)}

/* ── Комиксы ───────────────────────────────────────────────── */
.comics-grid{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.comics-grid{grid-template-columns:1fr 1fr;gap:56px}}
.comics-copy .plate{margin-bottom:6px}
.fan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 4px 20px}
.fan a{position:relative;display:block;border:3px solid var(--navy);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 6px 0 var(--navy-2),0 6px 0 3px var(--navy);transition:transform .3s var(--ease-pop),z-index 0s;text-decoration:none}
.fan a:nth-child(1){transform:rotate(-7deg) translateY(14px)}
.fan a:nth-child(2){transform:rotate(-2deg)}
.fan a:nth-child(3){transform:rotate(2deg)}
.fan a:nth-child(4){transform:rotate(7deg) translateY(14px)}
.fan a:hover,.fan a:focus-visible{transform:rotate(0) translateY(-10px) scale(1.06);z-index:2}
.fan img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top}
.fan span{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:var(--cream);font-family:var(--font-title);font-size:10px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:5px 4px}
.chapters{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:24px 0 0}
.chapters a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:13px;color:var(--text);background:var(--navy-2);border:2px solid var(--navy-3);border-radius:999px;padding:5px 11px 5px 5px;transition:border-color .15s,background .15s}
.chapters a:hover{border-color:var(--yellow);background:var(--navy-3)}
.chapters i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--ink);font-style:normal;font-family:var(--font-title);font-size:11px}

/* ── Родителям ─────────────────────────────────────────────── */
.parents{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));list-style:none}
.pcard{background:var(--cream);color:var(--ink);border:3px solid var(--navy);border-radius:20px;padding:20px;box-shadow:0 6px 0 var(--cream-3),0 6px 0 3px var(--navy)}
.pcard .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--navy);color:var(--yellow);margin-bottom:12px}
.pcard svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard b{font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:14px;display:block;margin-bottom:6px;line-height:1.2}
.pcard p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.links-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 0}

/* ── Вопросы ───────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--navy-2);border:2px solid var(--navy-3);border-radius:16px;margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--navy-4)}
.faq summary{cursor:pointer;padding:16px 52px 16px 20px;font-weight:700;font-size:17px;line-height:1.4;color:#fff;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--font-title);font-size:24px;color:var(--yellow);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px;color:var(--muted);font-size:16px}
.faq .a a{color:var(--yellow-2)}

/* ── Подвал ────────────────────────────────────────────────── */
.foot-wrap{border-top:3px solid var(--navy-3);padding:44px 0 40px;color:var(--muted);font-size:15px;background:var(--navy)}
.foot{display:grid;gap:22px}
@media (min-width:800px){.foot{grid-template-columns:1fr auto;align-items:start}}
.foot .brand{margin-bottom:14px}
.foot p{margin:0 0 6px}
.email{color:#fff;font-weight:700;user-select:all}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-links a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--navy-3);padding-bottom:2px}
.foot-links a:hover{border-color:var(--yellow)}
.copy{margin:28px auto 0;font-size:14px}

/* ── Появление при прокрутке ───────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
.js .comic[data-reveal].in{transform:rotate(1deg)}
.js .in .burst-shot,.js .in .burst-comic{opacity:1}
.js .burst-shot{opacity:0;transform:scale(0)}
.js .in .burst-shot{animation:pop .55s var(--ease-pop) forwards}
.js .in .burst-s1{animation-delay:.35s}.js .in .burst-s2{animation-delay:.55s}.js .in .burst-s3{animation-delay:.75s}.js .in .burst-s4{animation-delay:.4s}
.js .burst-comic{opacity:0;transform:scale(0)}
.js .in .burst-comic{animation:popComic .5s .6s var(--ease-pop) forwards}

/* ── Ключевые кадры ────────────────────────────────────────── */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.8);opacity:.55}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes flicker{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1.08)}30%{opacity:.58;transform:translate(-50%,-50%) scale(1.14)}55%{opacity:.36;transform:translate(-50%,-50%) scale(1.04)}80%{opacity:.62;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes auraFlicker{0%,100%{opacity:.75;transform:translate(-50%,-52%) scale(1)}50%{opacity:.45;transform:translate(-50%,-52%) scale(1.06)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:.45}}
@keyframes enterRight{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes enterLeft{from{opacity:0;transform:translateX(-60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(0) rotate(-25deg)}65%{opacity:1;transform:scale(1.18) rotate(10deg)}100%{opacity:1;transform:scale(1) rotate(8deg)}}
@keyframes popComic{0%{opacity:0;transform:scale(0) rotate(-20deg)}65%{opacity:1;transform:scale(1.2) rotate(16deg)}100%{opacity:1;transform:scale(1) rotate(12deg)}}
@keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes morphFwd{from{background-position-x:0}to{background-position-x:100%}}
@keyframes morphBack{from{background-position-x:100%}to{background-position-x:0}}
/* кузница: 8-секундный цикл — рисунок (0–46%), вспышка (46–54%), результат (52–90%) */
@keyframes draw1{0%,5%{stroke-dashoffset:1}16%,92%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes draw2{0%,16%{stroke-dashoffset:1}24%,92%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes draw3{0%,25%{stroke-dashoffset:1}33%,92%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes draw4{0%,34%{stroke-dashoffset:1}40%,92%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes draw5{0%,41%{stroke-dashoffset:1}46%,92%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes forged{0%,50%{opacity:0;transform:scale(.3) rotate(-30deg)}57%{opacity:1;transform:scale(1.12) rotate(5deg)}62%,88%{opacity:1;transform:scale(1) rotate(0)}93%,100%{opacity:0;transform:scale(.5)}}
@keyframes flash{0%,46%{opacity:0}50%{opacity:1}58%,100%{opacity:0}}
@keyframes twinkleOnce{0%,50%{opacity:0;transform:scale(.2)}56%{opacity:1;transform:scale(1.2) rotate(45deg)}66%,100%{opacity:0;transform:scale(.2)}}
@keyframes labelIn{0%,56%{opacity:0;transform:translateY(8px)}62%,90%{opacity:1;transform:none}94%,100%{opacity:0}}

/* ── Меньше движения ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .comic[data-reveal]{transform:rotate(1deg)}
  .js .burst-shot,.js .burst-comic,.burst-morph{opacity:1;transform:none}
  .ticker-track{animation:none}
  .doodle path{stroke-dashoffset:0;animation:none!important}
  .forge-result picture,.forge-label-result{opacity:1;animation:none!important;transform:none}
  .forge-flash,.forge-result .spark,.spark{display:none}
  .morph.on .morph-frames{animation:none;background-position-x:100%}
  .morph.back .morph-frames{animation:none;background-position-x:0}
  .glow{animation:none;opacity:.5}
}
.download-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:center}
.sec-download .lead{margin:24px 0 20px}
.sec-download .note{margin:24px 0 0;text-align:left}
.download-qr{text-align:center}
.download-qr img{display:block;width:180px;height:180px;margin:0 auto 12px;background:#fff;border-radius:12px}
.download-qr p{font-weight:700;margin:8px 0}
.download-qr a{font-size:14px}
@media(max-width:640px){.download-grid{grid-template-columns:1fr;gap:28px}.download-qr{justify-self:start;text-align:left}.download-qr img{margin-left:0}}