@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{
 --bg:#060a0c;--bg2:#0b1316;--panel:#0d171a;--panel2:#112025;
 --fg:#d7e7e4;--muted:#5f7d79;
 --sculk:#18e3d6;--sculk-dim:#0e8f88;--sculk-deep:#0b3b39;
 --gold:#e6b23a;--border:#153033;
 --pixel:'Press Start 2P',ui-monospace,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:var(--sculk);text-decoration:none}
::selection{background:var(--sculk-deep);color:#eafffd}

svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}
img.mc{image-rendering:pixelated;image-rendering:crisp-edges;width:26px;height:26px;vertical-align:middle;flex-shrink:0;filter:drop-shadow(0 0 5px rgba(24,227,214,.30))}
nav a img.mc{width:20px;height:20px}
h2 img.mc{width:32px;height:32px}
footer img.mc{width:17px;height:17px}

/* ---------- фон ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-4;
 background:
  radial-gradient(ellipse at 50% -8%,rgba(24,227,214,.13),transparent 55%),
  radial-gradient(circle at 10% 90%,rgba(14,143,136,.10),transparent 45%),
  radial-gradient(circle at 90% 70%,rgba(24,227,214,.07),transparent 45%);
 animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7}45%{opacity:1}55%{opacity:.88}}
/* анимированный sculk-фон, 30% */
.sculkbg{position:fixed;inset:0;z-index:-5;pointer-events:none;opacity:.3;
 background-image:url(img/sculk.png);background-size:104px;image-rendering:pixelated;image-rendering:crisp-edges;
 animation:sculkpan 55s linear infinite}
@keyframes sculkpan{from{background-position:0 0}to{background-position:208px 312px}}
body::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
 background-image:linear-gradient(rgba(24,227,214,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(24,227,214,.03) 1px,transparent 1px);
 background-size:34px 34px;
 -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);
 mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%)}
#fx{position:fixed;inset:0;z-index:-2;pointer-events:none}
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particles i{position:absolute;bottom:-12px;width:4px;height:4px;background:var(--sculk);border-radius:1px;
 box-shadow:0 0 9px var(--sculk),0 0 3px #eafffd;opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(.5);opacity:0}12%{opacity:.9}88%{opacity:.6}100%{transform:translateY(-106vh) scale(1);opacity:0}}

/* ---------- пиксель-арт рамки по бокам ---------- */
.pxframe{position:fixed;top:0;bottom:0;width:36px;z-index:15;pointer-events:none;
 image-rendering:pixelated;image-rendering:crisp-edges;
 background-repeat:repeat-y;background-size:36px auto;
 filter:drop-shadow(0 0 10px rgba(24,227,214,.25));
 animation:pulse 3.4s ease-in-out infinite;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 144' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='144' fill='%230b1316'/%3E%3Crect x='0' y='0' width='2' height='144' fill='%230b3b39'/%3E%3Crect x='3' y='0' width='1' height='144' fill='%23153033'/%3E%3Crect x='2' y='6' width='2' height='6' fill='%230e8f88'/%3E%3Crect x='4' y='10' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='4' y='24' width='4' height='4' fill='%23112025'/%3E%3Crect x='6' y='26' width='2' height='2' fill='%230b3b39'/%3E%3Crect x='2' y='34' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='4' y='36' width='2' height='6' fill='%230e8f88'/%3E%3Crect x='6' y='48' width='4' height='4' fill='%230b3b39'/%3E%3Crect x='8' y='50' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='2' y='58' width='2' height='8' fill='%230e8f88'/%3E%3Crect x='4' y='62' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='4' y='74' width='4' height='6' fill='%23112025'/%3E%3Crect x='2' y='86' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='4' y='88' width='2' height='4' fill='%230b3b39'/%3E%3Crect x='6' y='100' width='2' height='2' fill='%230e8f88'/%3E%3Crect x='2' y='108' width='4' height='4' fill='%230b3b39'/%3E%3Crect x='4' y='110' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='2' y='122' width='2' height='6' fill='%230e8f88'/%3E%3Crect x='4' y='132' width='2' height='2' fill='%2318e3d6'/%3E%3Crect x='6' y='136' width='2' height='2' fill='%230b3b39'/%3E%3C/svg%3E")}
.pxframe.l{left:0}
.pxframe.r{right:0;transform:scaleX(-1)}
@media(max-width:1180px){.pxframe{display:none}}

/* ---------- интро ---------- */
#intro{position:fixed;inset:0;z-index:100;background:#04070a;display:flex;align-items:center;justify-content:center;cursor:pointer;
 transition:opacity .8s ease,visibility .8s}
#intro.gone{opacity:0;visibility:hidden}
.intro-box{position:relative;text-align:center}
.intro-title{font-family:var(--pixel);font-size:clamp(1.2em,5vw,2.6em);color:#eafffd;letter-spacing:.35em;text-indent:.35em;
 animation:introTitle 1.6s cubic-bezier(.2,.8,.2,1) both .3s;
 text-shadow:0 0 18px rgba(24,227,214,.7),0 0 60px rgba(24,227,214,.3)}
@keyframes introTitle{0%{opacity:0;letter-spacing:1.2em;filter:blur(8px)}100%{opacity:1;letter-spacing:.35em;filter:blur(0)}}
.intro-sub{font-family:var(--pixel);font-size:.6em;color:var(--sculk-dim);margin-top:2em;animation:fadeIn 1s both 1.4s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ring{position:absolute;top:50%;left:50%;width:70px;height:70px;border:2px solid var(--sculk);border-radius:50%;
 transform:translate(-50%,-50%);opacity:0;animation:ring 2.2s ease-out infinite}
.ring:nth-child(2){animation-delay:.55s}
.ring:nth-child(3){animation-delay:1.1s}
@keyframes ring{0%{width:60px;height:60px;opacity:.8}100%{width:min(70vw,560px);height:min(70vw,560px);opacity:0}}

/* ---------- шапка ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(6,10,12,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(24,227,214,.14)}
nav{display:flex;gap:22px;align-items:center;height:66px;flex-wrap:wrap}
.brand{font-family:var(--pixel);font-size:.92em;color:var(--fg);display:flex;align-items:center;gap:11px;text-shadow:0 0 10px rgba(24,227,214,.45)}
nav a:not(.brand){color:var(--muted);font-weight:600;font-size:1em;display:inline-flex;align-items:center;gap:8px;padding:6px 2px;position:relative;transition:.15s}
nav a:not(.brand)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--sculk);box-shadow:0 0 8px var(--sculk);transition:width .22s}
nav a:not(.brand):hover{color:#dffffb}
nav a:not(.brand):hover::after{width:100%}
nav .sp{flex:1}

.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* ---------- герой ---------- */
.hero{min-height:calc(100vh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px 90px;position:relative}
.hero-text{max-width:760px}
.hero-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:min(80vw,720px);aspect-ratio:1;z-index:-1;opacity:.5}
.hero-heart span{position:absolute;inset:0;border:1px solid rgba(24,227,214,.4);border-radius:50%;animation:heart 4.5s ease-out infinite}
.hero-heart span:nth-child(2){animation-delay:1.5s}
.hero-heart span:nth-child(3){animation-delay:3s}
@keyframes heart{0%{transform:scale(.12);opacity:.9}70%{opacity:.15}100%{transform:scale(1);opacity:0}}
.kicker{font-family:var(--pixel);font-size:.78em;color:var(--sculk-dim);letter-spacing:.3em;text-indent:.3em;margin-bottom:2.2em;animation:fadeSlide .9s both .1s}
.hero h1{font-family:var(--pixel);font-size:clamp(2em,8vw,4.2em);line-height:1.3;color:#eafffd;
 text-shadow:0 0 18px rgba(24,227,214,.55),0 0 60px rgba(24,227,214,.25);
 animation:fadeSlide .9s both .25s,glow 3.4s ease-in-out infinite 1.2s}
@keyframes glow{0%,100%{text-shadow:0 0 16px rgba(24,227,214,.5),0 0 50px rgba(24,227,214,.2)}50%{text-shadow:0 0 30px rgba(24,227,214,.9),0 0 85px rgba(24,227,214,.45)}}
@keyframes fadeSlide{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .tag{color:var(--muted);font-size:1.32em;margin:1.8em auto 2.4em;max-width:720px;animation:fadeSlide .9s both .45s}

.btn-row{display:flex;gap:16px;justify-content:center;align-items:stretch;flex-wrap:wrap;animation:fadeSlide .9s both .65s}
.btn{font-family:inherit;font-size:1.12em;background:linear-gradient(#1a2b2b,#0e1c1c);color:var(--sculk);border:1px solid var(--sculk-dim);
 padding:0 28px;height:60px;font-weight:700;cursor:pointer;transition:.09s;display:inline-flex;align-items:center;gap:11px;
 box-shadow:inset 0 1px 0 rgba(24,227,214,.25),0 5px 0 #06201e,0 7px 14px rgba(0,0,0,.5)}
.btn svg{width:19px;height:19px}
.btn img.mc{width:23px;height:23px}
.btn:hover{color:#eafffd;border-color:var(--sculk);box-shadow:inset 0 1px 0 rgba(24,227,214,.4),0 5px 0 #06201e,0 0 26px rgba(24,227,214,.45)}
.btn:active{transform:translateY(5px);box-shadow:inset 0 1px 0 rgba(24,227,214,.2),0 0 0 #06201e}
.btn.primary{background:linear-gradient(#12494a,#0a2e2c);color:#eafffd;border-color:var(--sculk)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(24,227,214,.5),0 5px 0 #06201e,0 0 34px rgba(24,227,214,.6)}
.btn code{font-family:var(--pixel);font-size:.8em;color:inherit}

.hero .meta{margin-top:2.4em;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeSlide .9s both .85s}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(13,23,26,.8);border:1px solid var(--border);border-radius:2px;padding:9px 17px;font-size:.95em;color:var(--muted)}
.pill img.mc{width:18px;height:18px}
.pill b{color:#cfeeeb;font-weight:600}
.dot{width:8px;height:8px;background:#41d36c;border-radius:50%;box-shadow:0 0 8px #41d36c;animation:pulse 2s infinite}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--sculk-dim);animation:hint 2s ease-in-out infinite}
.scroll-hint svg{width:26px;height:26px}
@keyframes hint{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,9px);opacity:1}}

/* ---------- секции ---------- */
section{padding:80px 0}
h2{font-family:var(--pixel);font-size:1.3em;line-height:1.5;margin-bottom:1.4em;color:#dffffb;display:flex;align-items:center;gap:14px;text-shadow:0 0 10px rgba(24,227,214,.3)}
h2 svg{width:24px;height:24px;color:var(--sculk);filter:drop-shadow(0 0 5px var(--sculk));flex-shrink:0}
.sub{color:var(--muted);margin:-1em 0 2em;font-size:1.1em}

.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px}
.card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);padding:30px 28px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);display:block}
.card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--sculk-deep);transition:.2s}
.card::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(24,227,214,.07),transparent);transition:left .5s;pointer-events:none}
.card:hover{transform:translateY(-5px);border-color:var(--sculk-dim)}
.card:hover::before{background:var(--sculk);box-shadow:0 0 14px var(--sculk)}
.card:hover::after{left:120%}
.card img.mc{width:48px;height:48px;margin-bottom:16px;filter:drop-shadow(0 0 9px rgba(24,227,214,.45));transition:transform .25s}
.card:hover img.mc{transform:scale(1.15) rotate(-4deg)}
.card h3{font-size:1.22em;margin-bottom:7px;color:#eafffd}
.card p{color:var(--muted);font-size:1em}

/* ---------- боссы ---------- */
.bosses{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px}
.boss{position:relative;min-height:340px;border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;transition:transform .25s,border-color .25s}
.boss .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.45) saturate(.85);transition:transform .6s ease,filter .4s;z-index:0}
.boss::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,12,.15) 0%,rgba(6,10,12,.92) 82%);z-index:1}
.boss>*:not(.bg){position:relative;z-index:2}
.boss:hover{transform:translateY(-5px);border-color:var(--sculk-dim)}
.boss:hover .bg{transform:scale(1.07);filter:brightness(.6) saturate(1.05)}
.boss img.mc{width:44px;height:44px;margin-bottom:12px;filter:drop-shadow(0 0 8px rgba(24,227,214,.5))}
.boss h3{font-family:var(--pixel);font-size:.9em;line-height:1.6;color:#eafffd;margin-bottom:9px;text-shadow:0 0 10px rgba(24,227,214,.4)}
.boss p{color:#a9c4c0;font-size:1em}
.boss .lvl{position:absolute;top:16px;right:16px;font-family:var(--pixel);font-size:.62em;color:var(--gold);background:rgba(6,10,12,.75);border:1px solid rgba(230,178,58,.4);padding:7px 11px;z-index:2;text-shadow:0 0 8px rgba(230,178,58,.5)}

/* ---------- шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px;counter-reset:st}
.step{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);padding:30px 28px;position:relative;counter-increment:st}
.step::before{content:"0" counter(st);font-family:var(--pixel);font-size:.85em;color:var(--sculk);display:block;margin-bottom:15px;text-shadow:0 0 10px rgba(24,227,214,.5)}
.step h3{font-size:1.15em;color:#eafffd;margin-bottom:7px}
.step p{color:var(--muted);font-size:1em}
.step .btn{margin-top:16px;height:48px;font-size:.98em}

.center{display:flex;justify-content:center}
.build-scene{margin-top:40px;width:100%;line-height:0}
#build{display:block;width:100%;height:176px;image-rendering:pixelated;image-rendering:crisp-edges}
footer{border-top:1px solid var(--border);color:var(--muted);padding:26px 34px 30px;font-size:.85em;margin-top:0}
.foot-authors{display:flex;flex-direction:column;gap:5px;text-align:left;max-width:1040px;margin:0 auto 16px;padding:0 24px}
.foot-authors .role{color:#cfeeeb;font-weight:600}
.foot-tag{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;color:var(--muted);border-top:1px solid var(--border);padding-top:16px;text-align:center}

/* ---------- гайд ---------- */
.guide h1{font-family:var(--pixel);font-size:1.55em;line-height:1.45;color:#eafffd;text-shadow:0 0 14px rgba(24,227,214,.4);margin:1.2em 0 .5em;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.guide h3{font-family:var(--pixel);font-size:.92em;line-height:1.5;color:var(--sculk);margin:1.9em 0 .5em;display:flex;align-items:center;gap:10px;text-shadow:0 0 8px rgba(24,227,214,.3)}
.guide h3 img.mc{width:24px;height:24px}
.guide h4{margin:1.1em 0 .2em;font-size:1.05em;color:#cfeeeb}
.guide p{margin:.55em 0;color:#b9d0cd}
.guide ul{margin:.4em 0 .7em 1.3em;color:#b9d0cd}
.guide li{margin:.3em 0}
.guide figure{margin:1.1em 0}
.guide img:not(.mc){max-width:100%;border:1px solid var(--border);display:block;box-shadow:0 0 24px rgba(0,0,0,.5),0 0 0 1px rgba(24,227,214,.08)}
.guide figcaption{color:var(--muted);font-size:.85em;margin-top:.4em;border-left:2px solid var(--sculk-deep);padding-left:10px}
.guide blockquote{border-left:3px solid var(--sculk);background:linear-gradient(90deg,rgba(24,227,214,.06),transparent);padding:14px 18px;margin:1.4em 0;color:#dbf3f0}
.guide hr{border:0;border-top:1px solid var(--border);margin:2.2em 0}
.guide li b{color:var(--sculk)}
.guide code{background:var(--bg2);border:1px solid var(--border);padding:2px 7px;font-size:.9em;color:var(--gold)}
b{color:#eafffd}
.back{color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.back:hover{color:var(--sculk)}
.back svg{width:16px;height:16px}
.tag{color:var(--muted)}

@media(max-width:600px){
 h2{font-size:1em}
 .brand{font-size:.72em}
 .guide h1{font-size:1.1em}
 .guide h3{font-size:.78em}
 nav{gap:14px;height:60px}
 .btn{height:52px;padding:0 18px;font-size:1em}
 .boss{min-height:250px}
 .hero .tag{font-size:1.12em}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .rv{opacity:1;transform:none}
 #intro{display:none}
}

/* разделитель секций — sculk-жила с ромбом */
.divider{height:2px;margin:10px 0;border:0;position:relative;
 background:linear-gradient(90deg,transparent,var(--sculk-deep) 18%,var(--sculk-dim) 50%,var(--sculk-deep) 82%,transparent)}
.divider::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);
 background:var(--sculk);box-shadow:0 0 12px var(--sculk);border:1px solid #eafffd}

/* древо боссов */
.btree{margin:1.2em 0 1.8em;max-width:360px}
.btree summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
 font-family:var(--pixel);font-size:.85em;color:#eafffd;
 background:linear-gradient(#12494a,#0a2e2c);border:1px solid var(--sculk);padding:15px 18px;
 box-shadow:inset 0 1px 0 rgba(24,227,214,.4),0 4px 0 #06201e;transition:.1s}
.btree summary::-webkit-details-marker{display:none}
.btree summary img.mc{width:22px;height:22px}
.btree summary:hover{box-shadow:inset 0 1px 0 rgba(24,227,214,.5),0 4px 0 #06201e,0 0 22px rgba(24,227,214,.45)}
.btree summary .chev{margin-left:auto;width:18px;height:18px;color:var(--sculk);transition:transform .25s}
.btree[open] summary .chev{transform:rotate(180deg)}
.btree .branches{position:relative;margin-top:10px;padding-left:30px;display:flex;flex-direction:column;gap:9px;animation:branchIn .3s ease}
@keyframes branchIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.btree .branches::before{content:"";position:absolute;left:11px;top:-6px;bottom:22px;width:2px;background:var(--sculk-dim);box-shadow:0 0 6px rgba(24,227,214,.35)}
.btree .branches a{position:relative;display:flex;align-items:center;gap:11px;
 background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);
 padding:13px 16px;color:#dffffb;font-weight:600;transition:.15s}
.btree .branches a::before{content:"";position:absolute;left:-19px;top:50%;width:19px;height:2px;background:var(--sculk-dim);box-shadow:0 0 6px rgba(24,227,214,.35)}
.btree .branches a:hover{border-color:var(--sculk);transform:translateX(4px);box-shadow:0 0 16px rgba(24,227,214,.28)}
.btree .branches a img.mc{width:26px;height:26px}

/* авторы в футере */
footer a{color:var(--sculk-dim)}
footer a:hover{color:var(--sculk)}

/* галерея */
#gallery{padding-bottom:66px}
.gal{position:relative;display:flex;align-items:center;gap:12px}
.gal-view{overflow:hidden;flex:1;border:1px solid var(--border);box-shadow:0 0 34px rgba(0,0,0,.55),0 0 0 1px rgba(24,227,214,.06)}
.gal-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.gal-slide{flex:0 0 100%;margin:0;position:relative}
.gal-slide img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;cursor:zoom-in}
.gal-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 15px;
 background:linear-gradient(transparent,rgba(6,10,12,.92));color:#eafffd;font-weight:600;font-size:1.05em}
.gal-nav{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(#1a2b2b,#0e1c1c);color:var(--sculk);border:1px solid var(--sculk-dim);cursor:pointer;transition:.1s;
 box-shadow:inset 0 1px 0 rgba(24,227,214,.25),0 3px 0 #06201e}
.gal-nav:hover{color:#eafffd;box-shadow:inset 0 1px 0 rgba(24,227,214,.4),0 3px 0 #06201e,0 0 16px rgba(24,227,214,.45)}
.gal-nav:active{transform:translateY(3px)}
.gal-nav svg{width:22px;height:22px}
.gal-dots{position:absolute;left:0;right:0;bottom:-30px;display:flex;gap:9px;justify-content:center}
.gdot{width:9px;height:9px;border-radius:50%;background:var(--sculk-deep);border:0;cursor:pointer;transition:.15s;padding:0}
.gdot.on{background:var(--sculk);box-shadow:0 0 8px var(--sculk)}

/* лайтбокс */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,7,10,.93);backdrop-filter:blur(7px);
 display:none;align-items:center;justify-content:center;padding:4vh 70px}
.lb.on{display:flex;animation:lbin .2s ease}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.lb-fig img{max-width:90vw;max-height:80vh;object-fit:contain;cursor:zoom-out;border:1px solid var(--border);box-shadow:0 0 60px rgba(24,227,214,.16)}
.lb-fig figcaption{font-family:var(--pixel);font-size:.9em;color:#eafffd;text-shadow:0 0 10px rgba(24,227,214,.4);text-align:center}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;display:flex;align-items:center;justify-content:center;
 background:rgba(13,23,26,.72);color:var(--sculk);border:1px solid var(--sculk-dim);cursor:pointer;transition:.1s}
.lb-nav:hover{color:#eafffd;box-shadow:0 0 20px rgba(24,227,214,.5)}
.lb-nav.prev{left:16px}.lb-nav.next{right:16px}
.lb-nav svg{width:28px;height:28px}
.lb-close{position:fixed;top:16px;right:16px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
 background:rgba(13,23,26,.72);color:var(--fg);border:1px solid var(--border);cursor:pointer;transition:.1s}
.lb-close:hover{color:#eafffd;border-color:var(--sculk)}
.lb-close svg{width:22px;height:22px}
@media(max-width:600px){.lb{padding:2vh 6px}.lb-nav{width:40px;height:40px}.lb-nav.prev{left:6px}.lb-nav.next{right:6px}.gal-slide figcaption{font-size:.92em}}

#gallery{padding-top:30px}
#gallery h2{justify-content:center;text-align:center}

/* back-ссылки -> кнопки (везде) */
.back{color:#dffffb;font-weight:600;display:inline-flex;align-items:center;gap:8px;
 background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--sculk-dim);
 padding:10px 18px;margin:4px 8px 4px 0;transition:.12s;
 box-shadow:inset 0 1px 0 rgba(24,227,214,.2),0 3px 0 #06201e}
.back:hover{color:#fff;border-color:var(--sculk);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(24,227,214,.35),0 3px 0 #06201e,0 0 16px rgba(24,227,214,.35)}
.back:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(24,227,214,.2),0 0 0 #06201e}
.back svg{width:16px;height:16px}

/* дропдаун "Правила" в навигации (древовидно) */
.ndrop{position:relative;display:inline-flex;align-items:center}
.ndrop-t{color:var(--muted);font-weight:600;font-size:1em;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:6px 2px;transition:.15s}
.ndrop-t img.mc{width:19px;height:19px}
.ndrop-t::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:3px;transition:transform .2s}
.ndrop:hover .ndrop-t{color:var(--sculk)}
.ndrop:hover .ndrop-t::after{transform:rotate(180deg)}
.ndrop-menu{position:absolute;top:100%;left:-10px;min-width:210px;padding:8px 0 8px 16px;
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:30;
 background:rgba(9,15,17,.97);border:1px solid var(--sculk-dim);box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 0 1px rgba(24,227,214,.08)}
.ndrop:hover .ndrop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ndrop-menu::before{content:"";position:absolute;left:8px;top:6px;bottom:12px;width:2px;background:var(--sculk-dim);box-shadow:0 0 6px rgba(24,227,214,.3)}
.ndrop-menu a{position:relative;display:flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;color:#cfeeeb;font-weight:600;font-size:.95em;transition:.13s}
.ndrop-menu a::before{content:"";position:absolute;left:-16px;top:50%;width:16px;height:2px;background:var(--sculk-dim);box-shadow:0 0 6px rgba(24,227,214,.3)}
.ndrop-menu a:hover{background:rgba(24,227,214,.08);color:#fff;transform:translateX(3px)}
.ndrop-menu a img.mc{width:20px;height:20px}

/* широкая карточка (Правила во всю ширину) */
.card.wide{margin-bottom:16px}
.card.wide .wrapc{display:flex;align-items:center;gap:18px}
.card.wide img.mc{margin-bottom:0}
@media(max-width:600px){.ndrop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:22px}.card.wide .wrapc{flex-direction:column;align-items:flex-start;gap:8px}}

/* --- hero3d --- */
.hero{overflow:hidden}
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(115% 80% at 50% 44%, transparent 0%, transparent 40%, rgba(3,7,10,.6) 82%, rgba(3,7,10,.9) 100%),
  linear-gradient(180deg, rgba(3,7,10,.5) 0%, transparent 24%, transparent 60%, rgba(3,7,10,.88) 100%)}
.hero-text{position:relative;z-index:2}
.hero .scroll-hint{z-index:3}
.hero.no3d #hero3d{display:none}

/* --- hero3d split --- */
.hero{align-items:flex-start;text-align:left}
.hero-text{max-width:min(540px,46%);margin:0 0 0 clamp(24px,7vw,110px)}
.hero .kicker{margin-left:0}
.hero h1{text-align:left}
.hero .tag{margin-left:0;margin-right:0;max-width:520px}
.hero .btn-row{justify-content:flex-start}
.hero .meta{justify-content:flex-start}
#hero3d{left:auto;right:0;width:54%}
.hero-scrim{left:auto;right:0;width:54%;background:
  linear-gradient(90deg,#04080b 0%,rgba(4,8,11,.55) 14%,transparent 36%),
  linear-gradient(180deg,transparent 62%,rgba(3,7,10,.8) 100%)}
.hero .scroll-hint{left:50%}
@media(max-width:900px){
 .hero{align-items:center;text-align:center;padding-left:20px}
 .hero-text{max-width:760px;margin:0 auto}
 .hero .kicker{margin-left:auto}
 .hero h1{text-align:center}
 .hero .tag{margin-left:auto;margin-right:auto}
 .hero .btn-row{justify-content:center}
 .hero .meta{justify-content:center}
 #hero3d{left:0;width:100%}
 .hero-scrim{left:0;width:100%;background:radial-gradient(115% 80% at 50% 44%,transparent 0%,transparent 40%,rgba(3,7,10,.6) 82%,rgba(3,7,10,.9) 100%),linear-gradient(180deg,rgba(3,7,10,.5) 0%,transparent 24%,transparent 60%,rgba(3,7,10,.88) 100%)}
}

/* --- hero3d split v2 --- */
#hero3d{position:fixed;top:0;right:0;left:auto;width:54%;height:100vh;z-index:-1;display:block;pointer-events:none;transition:opacity .35s linear}
.hero-scrim{left:0;right:auto;width:100%;background:linear-gradient(180deg,transparent 72%,rgba(3,7,10,.45) 100%)}
@media(max-width:900px){ #hero3d{width:100%} }

/* --- altar3d --- */
.altar3d{position:relative;width:100%;height:420px;margin:1.2em 0;border:1px solid var(--border);
 background:radial-gradient(90% 90% at 50% 60%,rgba(24,227,214,.05),transparent 70%),linear-gradient(160deg,rgba(10,18,21,.75),rgba(6,10,12,.9));
 overflow:hidden;cursor:grab;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 30px rgba(0,0,0,.35)}
.altar3d.grabbing{cursor:grabbing}
.altar3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.a3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.a3d-label{position:absolute;left:0;top:0;opacity:0;transition:opacity .2s;white-space:nowrap;
 font-family:var(--pixel);font-size:.6em;color:#eafffd;background:rgba(6,12,14,.88);border:1px solid var(--sculk-dim);
 padding:5px 9px;text-shadow:0 0 6px rgba(24,227,214,.5);box-shadow:0 0 12px rgba(0,0,0,.5)}
.a3d-tip{position:absolute;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;z-index:2;
 font-family:var(--pixel);font-size:.62em;color:var(--sculk);background:rgba(6,12,14,.92);border:1px solid var(--sculk-dim);padding:5px 9px}
.a3d-hint{position:absolute;left:0;right:0;bottom:0;padding:9px 14px;font-size:.82em;color:var(--muted);
 background:linear-gradient(transparent,rgba(4,8,10,.85) 40%);pointer-events:none}
.a3d-hint kbd{font-family:var(--pixel);font-size:.85em;color:var(--sculk);border:1px solid var(--sculk-dim);padding:1px 6px;background:rgba(24,227,214,.06)}
.a3d-btn{position:absolute;top:10px;right:10px;z-index:3;font-family:var(--pixel);font-size:.6em;color:var(--muted);
 background:rgba(6,12,14,.85);border:1px solid var(--border);padding:7px 11px;cursor:pointer;transition:.15s}
.a3d-btn:hover,.a3d-btn.on{color:var(--sculk);border-color:var(--sculk-dim);box-shadow:0 0 14px rgba(24,227,214,.25)}
@media(max-width:600px){.altar3d{height:320px}}

/* --- ecat --- */
.ecat-bar{position:sticky;top:66px;z-index:5;background:rgba(6,10,12,.92);backdrop-filter:blur(10px);
 border:1px solid var(--border);padding:16px;margin:1.4em 0 1.2em;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#eq{flex:1 1 260px;background:var(--bg2);border:1px solid var(--border);color:var(--fg);font-family:inherit;font-size:1em;
 padding:12px 15px;outline:none;transition:border-color .15s}
#eq:focus{border-color:var(--sculk-dim);box-shadow:0 0 16px rgba(24,227,214,.15)}
.ecat-chips{display:flex;flex-wrap:wrap;gap:7px}
.ecat-chips button{font-family:var(--pixel);font-size:.58em;color:var(--muted);background:rgba(13,23,26,.8);
 border:1px solid var(--border);padding:8px 11px;cursor:pointer;transition:.13s}
.ecat-chips button:hover{color:var(--sculk);border-color:var(--sculk-dim)}
.ecat-chips button.on{color:#06201e;background:var(--sculk);border-color:var(--sculk);text-shadow:none;font-weight:700}
.ecat-count{font-family:var(--pixel);font-size:.62em;color:var(--sculk-dim);margin-left:auto}
.ecat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.ecard{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--border);padding:18px 18px 15px;
 position:relative;transition:transform .15s,border-color .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.ecard:hover{transform:translateY(-3px);border-color:var(--sculk-dim)}
.ecard-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.ecard-top b{color:#eafffd;font-size:1.06em}
.elvl{font-family:var(--pixel);font-size:.6em;color:var(--gold);white-space:nowrap;text-shadow:0 0 8px rgba(230,178,58,.4)}
.ecat-tag{display:inline-block;font-family:var(--pixel);font-size:.52em;color:var(--sculk-dim);border:1px solid var(--border);
 padding:3px 8px;margin-bottom:9px}
.ecard p{color:var(--muted);font-size:.95em;margin:0}
.ecat-none{color:var(--muted);text-align:center;padding:40px 0}
@media(max-width:600px){.ecat-bar{top:60px}.ecat-count{display:none}}

/* --- logo assets --- */
.brand-logo{height:34px;width:auto;display:block;image-rendering:auto}
.intro-logo{width:min(520px,72vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 22px rgba(24,227,214,.35))}
.hero h1.hero-logo-h{line-height:0;margin:0 0 18px}
.hero h1.hero-logo-h img{width:min(600px,86%);height:auto;display:inline-block}
@media(max-width:560px){.brand-logo{height:28px}}