/* Shared structure for Deadware prototypes. Each proto-*.html sets the theme tokens. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--body-size,18px)/1.6 var(--body-font);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
h1,h2,h3{font-family:var(--head-font);font-weight:var(--head-weight,700);line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(34px,5.4vw,64px)}
h2{font-size:clamp(26px,3.4vw,40px)}
.muted,.lead{color:var(--muted)}
.lead{font-size:1.15em;max-width:40em}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:60px}
.mini-logo{font:700 20px/1 var(--mono);color:var(--fg);text-decoration:none}.mini-logo span{color:var(--blood)}
.top nav{display:flex;gap:18px;flex:1;font-size:15px}.top nav a{color:var(--muted);text-decoration:none}.top nav a[aria-current]{color:var(--fg)}
.lang{font:14px var(--mono);color:var(--muted)}.lang b{color:var(--accent)}
.hero{padding:40px 0 56px;position:relative;overflow:hidden}
.hero-logo{width:min(100%,640px);margin:0 0 8px}
.dw-logo,.dw-pig{display:block;width:100%;height:auto;overflow:visible}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;padding:13px 24px;border-radius:var(--btn-r,999px);background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;border:2px solid var(--accent);font-family:inherit;font-size:16px;cursor:pointer}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn-soon{opacity:.7}
.sec{padding:56px 0;border-top:1px solid var(--line)}
.manifesto p{font-size:1.12em;max-width:44em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--card-r,22px);overflow:hidden;color:var(--fg);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.card img,.card-ph{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.card-ph{display:grid;place-items:center;background:#000;color:var(--muted);font:15px var(--mono)}
.card-b{padding:18px 20px 22px}.card-b p{color:var(--muted);margin:0 0 10px;font-size:.92em}.card-b small{font:13px var(--mono);color:var(--muted)}
.card h3{font-size:1.35em}
.card:hover{transform:translateY(-4px);border-color:var(--blood);box-shadow:0 18px 50px -20px var(--blood)}
.card:hover img{animation:flicker 1.2s steps(1) 1}
.badge{display:inline-block;font:12px var(--mono);padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);margin-bottom:10px}
.badge-dev{background:color-mix(in srgb,var(--blood) 22%,transparent);color:var(--blood-text,#ff5c6c)}
.queue{margin-top:26px;color:var(--muted);font-size:15px;line-height:2.1}.queue span{margin-right:8px}
.queue i{font-style:normal;border:1px dashed var(--line-strong);border-radius:99px;padding:3px 11px;margin:0 6px 0 0;white-space:nowrap}
.split-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.pig-col .dw-pig{max-width:260px;margin:10px auto 0}
.ball-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px;margin:12px auto 0}
.ball{position:relative;width:280px;height:280px;border-radius:50%;overflow:hidden;box-shadow:0 0 70px -10px var(--ball-glow),inset 0 0 50px #000;background:#000}
.ball-media{width:100%;height:100%;object-fit:cover;filter:saturate(1.2) hue-rotate(var(--ball-hue,0deg));transition:filter .7s,opacity .7s}
.ball-fog{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 40%,#fff3 0,transparent 40%),radial-gradient(circle at 70% 65%,var(--ball-glow) 0,transparent 45%);mix-blend-mode:screen;animation:fog 9s ease-in-out infinite alternate}
.ball-shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,#ffffff88 0,#ffffff00 22%),radial-gradient(circle at 50% 50%,transparent 58%,#000c 100%)}
.fogging .ball-media{filter:blur(14px) brightness(.5);opacity:.4}
.ball-base{width:190px;height:34px;margin-top:-10px;border-radius:50% 50% 14px 14px;background:linear-gradient(var(--base1,#3a2a1e),var(--base2,#120c08));box-shadow:0 10px 30px #000}
.ball-cap{min-height:3.2em;margin:18px 0 12px;font-size:1.05em}
.proto-note{font:12px var(--mono);color:var(--muted);opacity:.75;margin:10px 0 0}
.cmp{position:relative;margin:0;aspect-ratio:1200/779;border-radius:var(--card-r,22px);overflow:hidden;border:1px solid var(--line);--pos:50%}
.cmp img,.cmp canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);image-rendering:pixelated}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1px;background:var(--blood);box-shadow:0 0 18px var(--blood);pointer-events:none}
.cmp-tag{position:absolute;top:14px;font:13px var(--mono);background:#000b;color:#fff;padding:4px 10px;border-radius:99px}.cmp-tag-l{left:14px}.cmp-tag-r{right:14px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.facts{padding-left:1.1em;margin:0}.facts li{margin-bottom:8px}
.kicker{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blood-text,var(--blood));margin:0 0 14px}
.faq{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{cursor:pointer;font-weight:700;font-size:1.05em}.faq p{color:var(--muted);margin:8px 0 0}
.foot{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:14px}.foot p{max-width:62em}
/* controlled horror */
.dw-swing{transform-box:view-box;transform-origin:70px 128px;animation:swing 5s ease-in-out infinite}
.dw-swing-pig{transform-box:view-box;transform-origin:130px 0;animation:swing 6s ease-in-out infinite}
.dw-drip{transform-box:fill-box;transform-origin:top;animation:drip 7s ease-in-out infinite alternate}
.dw-drop{animation:drop 5s ease-in infinite;opacity:0}
@keyframes swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes drip{0%{transform:scaleY(.75)}100%{transform:scaleY(1.08)}}
@keyframes drop{0%,70%{transform:translateY(0);opacity:0}72%{opacity:1}100%{transform:translateY(140px);opacity:0}}
@keyframes fog{0%{transform:translate(-6%,4%) rotate(0)}100%{transform:translate(6%,-4%) rotate(25deg)}}
@keyframes flicker{0%{opacity:1}10%{opacity:.35}14%{opacity:1}40%{opacity:.7}44%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){.split-in,.two{grid-template-columns:1fr}.top nav{order:3;flex-basis:100%;padding-bottom:10px}.top-in{flex-wrap:wrap;gap:12px 20px}.ball{width:230px;height:230px}.sec{padding:40px 0}}


/* Plain near-black ground, no colour washes. D = A's structure and type (curtain, gothic logo, serif, centred hero, calm sections) + C's colour and cards (slime green, purple glow, striped card frames) */
:root{--bg:#09090a;--fg:#f4f1e8;--muted:#a8a2b4;--line:#222224;--line-strong:#3c3c40;--card:#121213;--accent:#b8f53d;--on-accent:#0b0a0d;--blood:#c1121f;--blood-text:#ff5c6c;--ball-glow:#c1121f;--ball-hue:30deg;--head-font:"Yeseva One",serif;--head-weight:400;--body-font:"PT Serif",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--card-r:26px;--base1:#2a2a2c;--base2:#0a0a0b}
body{background:var(--bg)}
/* A: centred hero (curtain removed at owner's request) */
.hero{text-align:center}.hero .wrap{display:flex;flex-direction:column;align-items:center}.hero .lead{margin:0 auto}.hero .btns{justify-content:center}
.hero-logo{margin:30px auto 0}
.hero h1{font-size:clamp(30px,4.4vw,52px)}
.hero-game{padding-top:64px}
/* A: headings with an underline; colour from C */
/* Logo key carried through: metal lettering, bone with a red glow, a sigil under every heading */
h1,h2{font-family:"Yeseva One",serif;letter-spacing:.02em;color:var(--fg);text-shadow:0 0 18px #c1121f73}
h2::after{content:"";display:block;width:140px;height:18px;margin-top:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c1121f' stroke-width='6'%3E%3Ccircle r='46'/%3E%3Cpath d='M0 44L-25.9 -35.6L41.8 13.6L-41.8 13.6L25.9 -35.6Z'/%3E%3C/g%3E%3C/svg%3E") center/18px no-repeat,linear-gradient(var(--blood),var(--blood)) left center/56px 2px no-repeat,linear-gradient(var(--blood),var(--blood)) right center/56px 2px no-repeat}
.sec+.sec{position:relative}.sec+.sec::before{content:"";position:absolute;left:50%;top:-11px;width:22px;height:22px;margin-left:-11px;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c1121f' stroke-width='6'%3E%3Ccircle r='46'/%3E%3Cpath d='M0 44L-25.9 -35.6L41.8 13.6L-41.8 13.6L25.9 -35.6Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.manifesto h2,.manifesto p{text-align:center;margin-left:auto;margin-right:auto}.manifesto h2::after{margin:12px auto 0}
.btn{letter-spacing:.06em;text-transform:uppercase;font-size:14px}
/* C: striped Beetlejuice card frames */
.card{border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,repeating-linear-gradient(45deg,#3a1418 0 10px,#151516 10px 20px) border-box}
.card:hover{transform:translateY(-4px) rotate(-.6deg);border-color:transparent;box-shadow:0 18px 50px -18px #c1121f;background:linear-gradient(var(--card),var(--card)) padding-box,repeating-linear-gradient(45deg,#f4f1e8 0 10px,#0b0a0d 10px 20px) border-box}
.badge{background:#b8f53d;color:#0b0a0d;font-weight:700}
.badge-dev{background:#c1121f;color:#f4f1e8}
.queue i{border-color:#5a1a1f;color:#e6c9cb}
.faq summary::marker{color:var(--accent)}
.kicker{color:var(--blood-text)}
/* Frankenstein head under «Воскреслі»: low, wide, shocked every 2.5 s */
.franken{display:block;width:100%;height:auto;max-height:150px;margin:-6px 0 26px;overflow:visible}
.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
.all-games{text-align:center;margin:34px 0 0}
.vp.who{grid-template-columns:1fr;gap:14px;max-width:760px;margin:0 auto 26px;text-align:left}.vp.who li{font:17px/1.5 var(--body-font);color:var(--fg);padding-left:32px}.vp.who li::before{width:18px;height:18px;top:.2em}
/* First screen v3 (owner): headline left, value propositions as bullets right */
.hero.h2c{text-align:left;padding:72px 0 64px}
.h2c .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.h2c h1{text-align:left;margin:0 0 18px;font-size:clamp(52px,7.2vw,104px);line-height:.95;text-shadow:0 0 28px #c1121f8c}
.h2c .lead{font-size:1.25em}
.h2c .vp{grid-template-columns:1fr;gap:22px}
.h2c .lead{margin:0;max-width:34em}
.vp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin:0;padding:0;list-style:none}
.vp li{position:relative;padding-left:46px;font:400 clamp(24px,2.4vw,32px)/1.15 "Yeseva One",serif;color:var(--fg);letter-spacing:.02em}
.vp li::before{content:"";position:absolute;left:0;top:.1em;width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c1121f' stroke-width='7'%3E%3Ccircle r='44'/%3E%3Cpath d='M0 42L-24.7 -34L39.9 13L-39.9 13L24.7 -34Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 5px #c1121f)}
.vp b{display:block;font:400 21px/1.15 "Yeseva One",serif;color:var(--fg);margin-bottom:4px;letter-spacing:.02em}
@media (max-width:620px){.vp{grid-template-columns:1fr}}
@media (max-width:900px){.h2c .wrap{grid-template-columns:1fr;gap:34px}}
/* heroes4-map.jpg has black edges baked in (left ~22px, top ~26px): zoom them out of the frame */
.card{overflow:hidden}.card-b{position:relative;background:var(--card)}.card img[src$="heroes4-map.jpg"],.gc-th img[src$="heroes4-map.jpg"]{transform:scale(1.07);transform-origin:40% 40%}
.fk-slot .franken{margin:26px 0}
@media (max-width:900px){.cards3{grid-template-columns:1fr}}
.fk-arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:bevel;opacity:0;filter:drop-shadow(0 0 6px var(--accent));animation:fk-arc 1.5s steps(1) infinite}
.fk-arc.b{stroke-width:1.5;animation-delay:.04s}
.fk-head{transform-box:view-box;transform-origin:500px 150px;animation:fk-shake 1.5s linear infinite}
.fk-skin{fill:#8db365;animation:fk-skin 1.5s steps(1) infinite}
.fk-hair{transform-box:view-box;transform-origin:500px 50px;animation:fk-hair 1.5s steps(1) infinite}
.fk-open{opacity:0;animation:fk-open 1.5s steps(1) infinite}.fk-shut{animation:fk-shut 1.5s steps(1) infinite}
.fk-orb{fill:#c1121f;filter:drop-shadow(0 0 8px #c1121f);animation:fk-orb 1.5s steps(1) infinite}
@keyframes fk-arc{0%,51.7%{opacity:0}53.3%{opacity:1}58.3%{opacity:0}61.7%{opacity:1}70%{opacity:.3}73.3%{opacity:1}81.7%,100%{opacity:0}}
@keyframes fk-shake{0%,51.7%,83.3%,100%{transform:none}55%{transform:translate(-3px,-2px) rotate(-1.2deg)}60%{transform:translate(3px,1px) rotate(1deg)}65%{transform:translate(-2px,-3px) rotate(-.8deg)}71.7%{transform:translate(2px,0) rotate(.9deg)}78.3%{transform:translate(-1px,-1px)}}
@keyframes fk-skin{0%,51.7%{fill:#8db365}53.3%{fill:#f4f1e8}58.3%{fill:#8db365}61.7%{fill:#f4f1e8}66.7%,100%{fill:#8db365}}
@keyframes fk-hair{0%,51.7%,83.3%,100%{transform:none}53.3%{transform:translateY(-7px) scaleY(1.25)}}
@keyframes fk-open{0%,51.7%,83.3%,100%{opacity:0}53.3%{opacity:1}}
@keyframes fk-shut{0%,51.7%,83.3%,100%{opacity:1}53.3%{opacity:0}}
@keyframes fk-orb{0%,51.7%,83.3%,100%{fill:#c1121f}53.3%{fill:#b8f53d}}
/* Logo + hanging skeleton live in the top-left of the header; hero keeps only the headline */
.top{position:relative}
.top-in{min-height:68px}
/* .brand keeps its slot so the menu stays put; the logo itself sits at the header's left edge */
.brand{flex:0 0 auto;width:270px;height:44px}
.brand .dw-logo{position:absolute;z-index:6;left:max(16px,env(safe-area-inset-left,0px));top:8px;width:270px}
.mini-logo{display:none}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;padding:0;margin:0;list-style:none;counter-reset:st}
.how li{counter-increment:st;color:var(--muted)}.how li::before{content:counter(st);display:block;font:40px/1 "Metal Mania",serif;color:var(--blood-text);margin-bottom:8px}.how b{display:block;color:var(--fg);margin-bottom:4px}
.top nav{flex-wrap:wrap;row-gap:4px}
.top nav a{position:relative;padding:4px 0;transition:color .2s}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blood);box-shadow:0 0 8px var(--blood);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.top nav a:hover,.top nav a:focus-visible{color:var(--accent)}.top nav a:hover::after,.top nav a:focus-visible::after{transform:scaleX(1)}
.hero-logo{display:none}
.hero{padding-top:64px}
@media (max-width:760px){.brand{width:200px;height:34px}.brand .dw-logo{width:200px}}
/* Second screen = game carousel (owner 2026-11-06): boxed, shifted left; right column lists what the port did */
.gcs-in{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(250px,1fr);gap:34px;align-items:center;max-width:1400px;margin:0 auto 0 max(16px,calc(50vw - 740px));padding:0 20px 0 0}
.gcs-k{grid-column:1/-1;margin:0 0 -18px}
.gc{position:relative;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:flex-end;border:1px solid var(--line-strong);border-radius:6px;background:#09090a}
.gc-bg{position:absolute;inset:0;opacity:0;transition:opacity .9s}
.gc-bg.on{opacity:1}
.gc-bg img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 8s linear}
.gc-bg.on img{transform:scale(1)}
.gc-bg.ph{background:radial-gradient(60% 70% at 72% 45%,#3a0a0f 0,#120607 55%,#09090a 100%)}
.gc-bg.ph::after{content:"";position:absolute;right:8%;top:14%;width:min(46vw,520px);aspect-ratio:1;opacity:.22;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c1121f' stroke-width='2'%3E%3Ccircle r='46'/%3E%3Cpath d='M0 44L-25.9 -35.6L41.8 13.6L-41.8 13.6L25.9 -35.6Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 18px #c1121f)}
.gc-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#09090af2 0,#09090ad0 30%,#09090a66 56%,#09090a00 78%),linear-gradient(0deg,#09090a 0,#09090a00 30%)}
.gc-in{position:relative;z-index:1;width:100%;padding:90px 34px 18px}
.gc-slide{display:none;max-width:470px}
.gc-slide.on{display:block;animation:gc-up .6s ease both}
@keyframes gc-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gc-mark{display:inline-flex;flex-direction:column;align-items:flex-start;margin-bottom:22px;font:28px/1.05 "Yeseva One",serif;color:var(--fg);text-shadow:0 0 14px #c1121fa6;border-left:3px solid var(--blood);padding:4px 0 4px 14px}
.gc-mark small{font:11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blood-text);text-shadow:none;margin-top:6px}
.gc h3{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(30px,3.4vw,46px);text-transform:uppercase;line-height:1;margin:0 0 10px;text-shadow:0 0 18px #c1121f73}
.gc-sub{font:600 15px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);margin:0 0 14px}
.gc-body{font:14px/1.7 var(--mono);color:#d8d3c6;margin:0;max-width:34em}
.gc .btns{justify-content:flex-start}
.gc-btn{display:inline-flex;align-items:center;gap:12px;padding:11px 16px;border:1.5px solid var(--accent);color:var(--accent);text-decoration:none;font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#09090a80;transition:background .2s,color .2s}
.gc-btn::after{content:"→";transition:transform .2s}
.gc-btn:hover,.gc-btn:focus-visible{background:var(--accent);color:var(--on-accent)}.gc-btn:hover::after{transform:translateX(4px)}
.gc-btn.ghost{border-color:var(--fg);color:var(--fg)}.gc-btn.ghost:hover{background:var(--fg);color:var(--on-accent)}
.gc-thumbs{display:flex;justify-content:center;gap:12px;margin-top:40px;flex-wrap:wrap}
.gc-done{display:flex;flex-direction:column;justify-content:center}
.gc-done .kicker{margin-bottom:6px}
.gc-done h4{font:26px/1.1 "Yeseva One",serif;color:var(--fg);margin:0 0 18px;text-shadow:0 0 14px #c1121f73}
.gc-list{display:none;list-style:none;margin:0;padding:0}.gc-list.on{display:block;animation:gc-up .5s ease both}
.gc-list li{position:relative;padding:0 0 14px 30px;color:var(--muted);line-height:1.5}
.gc-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c1121f' stroke-width='8'%3E%3Ccircle r='44'/%3E%3Cpath d='M0 42L-24.7 -34L39.9 13L-39.9 13L24.7 -34Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.gc-list b{display:block;color:var(--fg)}
.gc-list.wait li::before{opacity:.45}
.gc-th{position:relative;width:104px;height:58px;padding:0;border:2px solid #f4f1e833;background:#121213;cursor:pointer;overflow:hidden;opacity:.62;transition:opacity .2s,border-color .2s}
.gc-th img{width:100%;height:100%;object-fit:cover;display:block}
.gc-th span{display:flex;align-items:center;justify-content:center;height:100%;padding:0 6px;font:13px/1.05 "Yeseva One",serif;color:#e6c9cb;text-align:center}
.gc-th:hover{opacity:1}
.gc-th.on{opacity:1;border:3px solid var(--fg);box-shadow:0 0 16px #c1121f99}
.gc-th.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blood);transform-origin:left;animation:gc-prog 7s linear both}
.gcs.paused .gc-th.on::after{animation-play-state:paused}
@keyframes gc-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.gcs-in{grid-template-columns:1fr;margin:0 auto;padding:0 16px}.gc{aspect-ratio:auto;min-height:500px}}
@media (max-width:760px){.gc-in{padding:150px 18px 14px}.gc-shade{background:linear-gradient(0deg,#09090a 0,#09090ae6 45%,#09090a80 75%,#09090a33 100%)}.gc-th{width:72px;height:42px}.gc-th span{font-size:11px}.gc-thumbs{gap:8px;margin-top:32px}}
@media (prefers-reduced-motion:reduce){.gc-bg,.gc-bg img{transition:none}.gc-slide.on{animation:none}.gc-th.on::after{animation:none}}

/* v27 (owner: screen at least 2x lower, headline still big): one column; headline full width; theses in one row of four */
.hero.h2c{padding:36px 0 34px}
.h2c .wrap{grid-template-columns:1fr;gap:18px}
.h2c h1{font-size:clamp(40px,5.6vw,80px);line-height:1;margin:0 0 6px;max-width:none}
.h2c .lead{font-size:1.05em;margin:0}
.h2c .vp{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:10px 34px}
.vp li{font-size:20px;padding-left:30px}.vp li::before{width:20px;height:20px;top:.05em}
@media (max-width:900px){.h2c .vp{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}.vp li{font-size:17px;padding-left:26px}.vp li::before{width:17px;height:17px}}

/* v35: masonic sigil as the divider above About; nothing under its heading */
#about h2::after{display:none}
#about.sec::before{width:30px;height:30px;margin-left:-15px;top:-15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23c1121f' stroke-width='6' stroke-linejoin='miter'%3E%3Cpath d='M-30 40L0 -36L30 40'/%3E%3Ccircle cy='-40' r='6'/%3E%3Cpath d='M-44 2L0 44L44 2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* v37: hero subtitle */
.h2c .h2c-sub{font-family:"Yeseva One",serif;font-size:clamp(22px,2.6vw,36px);line-height:1.15;letter-spacing:.02em;color:var(--fg);opacity:.85;margin:10px 0 0;max-width:none}

/* v38: About — life timeline with icons, highlighted phrases, punchline, CTA */
#about .vp.who{position:relative;gap:22px;max-width:720px}
#about .vp.who::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--blood),#c1121f33)}
#about .vp.who li{padding-left:58px;min-height:40px;display:flex;align-items:center}
#about .vp.who li::before{display:none}
#about .who-ic{position:absolute;left:0;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1.5px solid var(--blood);box-shadow:0 0 10px #c1121f55;display:grid;place-items:center}
#about .who-ic svg{width:22px;height:22px;fill:none;stroke:var(--fg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#about .who-out{font:400 clamp(26px,3vw,40px)/1.15 "Yeseva One",serif;color:var(--fg);text-shadow:0 0 18px #c1121f73;max-width:760px;margin:34px auto 22px}
#about .who-cta{display:flex;align-items:center;gap:22px;max-width:760px;margin:0 auto;padding:18px 22px;border-left:3px solid var(--accent);background:#b8f53d0d;text-align:left}
#about .who-cta p{margin:0;text-align:left;font-size:17px;line-height:1.5}
#about .who-cta .gc-btn{flex:none}
@media (max-width:640px){#about .who-cta{flex-direction:column;align-items:flex-start}}

/* v39: split screen — questions left, rights holders right */
.two-halves .split-in{grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.two-halves .split-in>div{padding:8px 44px}
.two-halves .half-ask{padding-left:0}
.two-halves .half-rights{border-left:2px solid var(--blood);background:linear-gradient(90deg,#c1121f14,transparent 70%);padding-right:0}
.two-halves h2{font-size:clamp(28px,3vw,42px);line-height:1.1}
.rights{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:12px}
.rights li{position:relative;padding-left:26px;font-size:16px;line-height:1.5}
.rights li::before{content:"§";position:absolute;left:0;top:0;color:var(--blood);font:700 18px/1.4 var(--mono)}
@media (max-width:760px){.two-halves .split-in{grid-template-columns:1fr}.two-halves .split-in>div{padding:0}.two-halves .half-rights{border-left:0;border-top:2px solid var(--blood);margin-top:32px;padding-top:28px}}

/* v41: hanged piggy bank in the rights half */
.two-halves .half-rights{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:28px;align-items:start}
.rights-pig{margin:0;text-align:center}
.rights-pig .dw-pig{max-width:170px;margin:-8px auto 0}
.rights-pig figcaption{margin-top:10px;font:400 15px/1.3 "Yeseva One",serif;color:var(--fg);opacity:.9}
@media (max-width:1100px){.two-halves .half-rights{grid-template-columns:1fr}.rights-pig{max-width:260px;margin:8px auto 0}}

/* v42: smaller hero subtitle; pig pushed to the right edge, away from the text */
.h2c .h2c-sub{font-size:clamp(17px,1.6vw,22px);line-height:1.3;opacity:.8;margin-top:14px}
.two-halves .half-rights{grid-template-columns:minmax(0,1fr) 170px;gap:56px}
.rights-pig{justify-self:end;transform:translateX(28px)}
@media (max-width:1280px){.two-halves .half-rights{grid-template-columns:1fr}.rights-pig{justify-self:center;transform:none}}

/* v43 */ .rights-mail{margin:10px 0 0;font:13px var(--mono);color:var(--muted)}
/* v44: crisper headline and logo — glow on a separate layer, thinner text glow */
h1,h2,.h2c-sub{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
.h2c h1{text-shadow:0 0 28px #c1121f8c}
h2{text-shadow:0 0 12px #c1121f4d}

/* v49: UK/EN in the right corner; ball = glass orb with a bone die, click plays a random answer then resets */
.top .lang{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:6}
@media (max-width:1320px){.top-in{padding-right:96px}}
@media (max-width:760px){.top .lang{top:22px;transform:none}.top-in{padding-right:20px}}
.orb-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:460px;margin:12px auto 0}
.orb{background:radial-gradient(circle at 50% 62%,#3a0a0f 0,#150608 55%,#050505 100%)}
.orb [hidden]{display:none!important}
.orb .orb-img,.orb .orb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.orb .ball-fog,.orb .ball-shine{pointer-events:none}.playing .ball-fog{opacity:.35}
.orb-die{position:absolute;left:50%;top:50%;z-index:2;width:42%;aspect-ratio:1;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%);filter:drop-shadow(0 0 14px #c1121f99);animation:orb-float 3.2s ease-in-out infinite;transition:opacity .3s,filter .2s}
.orb-die svg{display:block;width:100%;height:100%;transition:transform .2s}
.orb-die:hover,.orb-die:focus-visible{filter:drop-shadow(0 0 24px #c1121f)}.orb-die:hover svg,.orb-die:focus-visible svg{transform:scale(1.07)}
.rolling .orb-die svg{animation:orb-roll .6s ease-in both}
.playing .orb-die{opacity:0;pointer-events:none}
.orb-cap{min-height:3.2em;margin:18px 0 0;font-size:1.05em}
@keyframes orb-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-55%)}}
@keyframes orb-roll{to{transform:rotate(540deg) scale(.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.orb-die{animation:none}.rolling .orb-die svg{animation:none}}

/* v50: pig level with «Ми фанати, не пірати.», closer to the right edge (text items become grid items) */
@media (min-width:1281px){
.two-halves .half-rights{row-gap:0;column-gap:56px;align-content:start}
.half-rights .rights-txt{display:contents}
.half-rights .rights-txt>*{grid-column:1}
.half-rights .rights-pig{grid-column:2;grid-row:2/span 5;align-self:start;transform:translateX(60px)}
.half-rights .rights-pig .dw-pig{margin-top:0}}

/* v52: pig and caption lower and wider; caption in the body font, ~3 lines; rights half gets more room */
@media (min-width:1281px){
#ask .wrap{max-width:1360px}
.two-halves .split-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.two-halves .half-rights{grid-template-columns:minmax(0,1fr) 340px;column-gap:48px}
.half-rights .rights-pig{transform:translateX(40px);margin-top:26px}
.half-rights .rights-pig .dw-pig{max-width:220px}}
.rights-pig figcaption{font:400 15px/1.45 var(--body-font);opacity:.85}

/* v56: hero glow on its own layer under crisp letters (shadow no longer touches glyph edges) */
.h2c h1{position:relative;isolation:isolate;text-shadow:none}
.h2c h1::before{content:attr(data-g);position:absolute;inset:0;z-index:-1;color:transparent;text-shadow:0 0 28px #c1121f8c,0 0 10px #c1121f59;pointer-events:none}

/* v58 */ #about .who-out{margin:48px auto 34px}
/* v48: smaller hero subtitle */ .h2c .h2c-sub{font-size:clamp(15px,1.3vw,18px)}
/* v47 */ .half-ask .ball-wrap{max-width:460px}.half-ask .ball{width:340px;height:340px} @media (max-width:760px){.half-ask .ball{width:260px;height:260px}}
/* v59: inner pages — game page, catalogue, about, how, stories, FAQ, enthusiasts */
.top nav a[aria-current="page"]{color:var(--accent)}
.pg-hero{padding:64px 0 40px}
.pg-hero h1{font-size:clamp(34px,4.6vw,60px);margin:0 0 14px;line-height:1.05}
.pg-hero .lead{max-width:760px;font-size:clamp(16px,1.4vw,19px)}
.crumbs{font:13px var(--mono);color:var(--muted);margin:0 0 18px}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--fg)}.crumbs span{margin:0 8px;opacity:.6}
.answer{border-left:3px solid var(--blood);padding:4px 0 4px 18px;margin:22px 0 0;max-width:760px;font-size:17px;line-height:1.55}
.answer b{color:var(--accent);font-weight:700}
.pg-sec{padding:44px 0}.pg-sec h2{font-size:clamp(26px,2.8vw,36px);margin:0 0 22px}
/* game page */
.gp-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.gp-shot{border-radius:var(--card-r);overflow:hidden;border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,repeating-linear-gradient(45deg,#3a1418 0 10px,#151516 10px 20px) border-box;aspect-ratio:16/10}
.gp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.gp-shot .card-ph{height:100%;display:flex;align-items:center;justify-content:center}
.dl{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin:26px 0 8px}
.dl .gc-btn{font-size:15px}
.dl-gh{font:15px var(--body-font);color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--blood)}
.dl-gh:hover{color:var(--accent)}
.dl-note{font:13px var(--mono);color:var(--muted);margin:6px 0 0}
.vers{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:4px;margin:18px 0 0;gap:4px}
.vers button{font:600 13px var(--mono);background:none;border:0;color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer}
.vers button.on{background:var(--fg);color:var(--on-accent)}
.vers button i{font-style:normal;opacity:.7;font-weight:400}
.spec{width:100%;border-collapse:collapse;font-size:16px}
.spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:34%;font:600 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:0}
.feat li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;font-size:15px;line-height:1.5;color:var(--muted)}
.feat b{display:block;color:var(--fg);font-size:17px;margin:0 0 6px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:820px}
.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 70px;background:var(--card);border:1px solid var(--line);border-radius:16px;font-size:16px;line-height:1.5}
.steps li::before{content:counter(s);position:absolute;left:18px;top:12px;width:36px;height:36px;border-radius:50%;background:var(--blood);color:var(--fg);font:22px/36px "Metal Mania",serif;text-align:center}
.steps li b{color:var(--fg)}.steps li span{color:var(--muted)}
.steps code,.pg code{font:13px var(--mono);background:#1b1b1d;border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.callout{max-width:820px;margin:18px 0 0;padding:14px 18px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--muted);font-size:15px}
.callout b{color:var(--fg)}
.story-txt{max-width:760px;font-size:17px;line-height:1.65}.story-txt p{margin:0 0 16px}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.shots img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* catalogue */
.cat-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.cat-bar button{font:600 13px var(--mono);background:none;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:8px 16px;cursor:pointer}
.cat-bar button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cat .card small{display:block;margin-top:8px}
.cat-auto{font:13px var(--mono);color:var(--muted);margin:26px 0 0}
/* about */
.ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ab-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 28px}
.ab-card h3{font:24px "Yeseva One",serif;margin:0 0 10px;color:var(--fg)}
.ab-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.ab-card p b{color:var(--fg)}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.team li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;font-size:14px;color:var(--muted);line-height:1.45}
.team li b{display:block;color:var(--fg);font-size:16px;margin:0 0 4px}
.team li i{display:block;font:12px var(--mono);color:var(--blood-text);font-style:normal;margin:0 0 8px}
/* stories */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.post{display:block;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-3px);box-shadow:0 18px 50px -22px #c1121f}
.post img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.post .card-ph{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center}
.post-b{padding:20px 24px 24px}
.post-b h3{font-size:22px;margin:6px 0 10px;line-height:1.2}
.post-b p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.meta{font:12px var(--mono);color:var(--blood-text);text-transform:uppercase;letter-spacing:.06em}
.article{max-width:740px;margin:0 auto}
.article p{font-size:18px;line-height:1.7;margin:0 0 20px}
.article .lede{font-size:21px;color:var(--fg)}
.article h2{font-size:28px;margin:34px 0 14px}
.article blockquote{margin:26px 0;padding:6px 0 6px 20px;border-left:3px solid var(--blood);font-style:italic;color:var(--muted)}
.article img{width:100%;border-radius:16px;margin:8px 0 24px}
/* FAQ */
.faq-nav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.faq-nav a{font:600 13px var(--mono);color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:8px 16px;text-decoration:none}
.faq-nav a:hover{color:var(--fg);border-color:var(--fg)}
.faq-grp{margin:0 0 34px}.faq-grp h2{font-size:28px}
.faq-search{width:100%;max-width:520px;font:16px var(--body-font);padding:12px 16px;border-radius:12px;border:1px solid var(--line-strong);background:var(--card);color:var(--fg);margin:0 0 22px}
/* enthusiasts */
.en-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.en-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 28px}
.en-card h3{font:24px "Yeseva One",serif;margin:0 0 6px}
.en-card .meta{display:block;margin:0 0 12px}
.en-card p,.en-card li{color:var(--muted);font-size:15px;line-height:1.6}
.en-card ul{padding-left:18px;margin:10px 0 0}
.en-cta{text-align:center;margin:40px auto 0;max-width:640px}
.en-cta p{color:var(--muted)}
@media (max-width:900px){.gp-top,.ab-grid,.en-grid,.posts{grid-template-columns:1fr}.feat,.cat,.rel,.shots{grid-template-columns:repeat(2,minmax(0,1fr))}.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.feat,.cat,.rel,.shots,.team{grid-template-columns:1fr}.steps li{padding-left:62px}.spec th{width:40%}}
/* v62 */
.cards2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* v119: three games → three columns on wide screens */@media (min-width:900px){.cards2:has(>.card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.cat{grid-template-columns:repeat(2,minmax(0,1fr))}.rel{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sub-h{font:600 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:26px 0 12px}
.need{max-width:820px;margin:0;padding-left:20px;font-size:16px;line-height:1.6}.need li{margin:0 0 8px}
.essay{max-width:740px;font-size:18px;line-height:1.7}.essay p{margin:0 0 18px}.essay h3{font:28px "Yeseva One",serif;margin:34px 0 10px}
.essay .drop{font-size:21px;color:var(--fg)}
.post-end{margin-top:30px}.post-end a{color:var(--accent)}
@media (max-width:900px){.feat4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards2,.cat,.rel,.feat4{grid-template-columns:1fr!important}}

/* v60: logo lettering as HTML text (Safari rasterised it inside the animated SVG); hero subtitle in the body font */
.brand{--lw:270px}@media (max-width:760px){.brand{--lw:200px}}
.brand .dw-word,.brand .dw-glow{position:absolute;z-index:6;left:calc(max(16px,env(safe-area-inset-left,0px)) + var(--lw)*.03158);top:calc(8px + var(--lw)*.0047);font:400 calc(var(--lw)*.19737)/1 "Metal Mania","Pirata One",serif;letter-spacing:calc(var(--lw)*-.00185);white-space:nowrap;pointer-events:none;-webkit-font-smoothing:antialiased}
.brand .dw-glow{color:#c1121f;text-shadow:0 0 1px #c1121f,0 0 4px #c1121f99;opacity:.45}
.brand .dw-word{z-index:7;color:#f4f1e8;background:linear-gradient(#f4f1e8 0 62%,#c1121f 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero.h2c .h2c-sub{font-family:var(--body-font);font-size:clamp(17px,1.45vw,21px);line-height:1.45;letter-spacing:0;opacity:1;color:var(--fg);max-width:620px}

/* v63: orb answers FAQ questions in text */
.orb .orb-q{position:absolute;inset:17% 13% 27%;margin:0;display:flex;flex-direction:column;gap:.55em;align-items:center;justify-content:center;text-align:center;font:600 clamp(15px,1.5vw,20px)/1.3 "PT Serif",serif;color:#f4f1e8;text-shadow:0 0 12px #c1121f,0 2px 4px #000;opacity:0;transition:opacity .4s;pointer-events:none;z-index:1}
.playing .orb-q{opacity:1}.orb-q b{font-weight:700}.orb-q span{font:400 clamp(13px,1.1vw,15px)/1.35 "PT Serif",serif;color:#e9e2d0;text-shadow:0 0 8px #000,0 1px 3px #000}
@media (max-width:760px){.orb .orb-q{font-size:14px;inset:15% 11% 25%}.orb-q span{font-size:12.5px}}
.playing .orb-die{opacity:1;pointer-events:auto;width:17%;top:83%;animation:none}
.orb-cap:empty{display:none}

/* v69: compact how-it-works */
.how-hero{padding-bottom:10px}.how-hero .lead b{color:var(--fg)}
.how-sec{padding-top:24px}.how-sec h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 14px}
.how-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.pros{list-style:none;margin:0;padding:0}.pros li{padding:7px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--muted)}.pros li b{color:var(--fg)}
.how-why{margin:18px 0 0;font-size:15px;color:var(--muted);line-height:1.55}.how-why b{color:var(--fg)}
@media (max-width:900px){.how-grid{grid-template-columns:1fr;gap:28px}}

/* v77: visual jokes on inner pages — pull quotes, sigil dividers, margin doodles, FAQ icons and stamps, tombstone steps */
.pull{position:relative;margin:44px auto;max-width:640px;text-align:center;font:400 clamp(28px,3.4vw,44px)/1.12 "Yeseva One",serif;color:var(--fg);text-shadow:0 0 18px #c1121f88,0 0 2px #c1121f;transform:rotate(-1.2deg)}
.pull::before{content:"\201C";display:block;font-size:1.9em;line-height:.6;color:var(--blood);text-shadow:none;margin:0 0 6px}
.pull,.article .pull{clear:both;border:0;padding:0;font-style:normal;color:var(--fg)}
.pull small{display:block;margin:14px 0 0;font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blood-text);text-shadow:none}
.rip{display:block;width:100%;max-width:560px;height:44px;margin:30px auto;overflow:visible}
.rip .drip{fill:var(--blood);transform-origin:top;animation:drip 5s ease-in infinite}
.rip .drip:nth-of-type(2){animation-delay:1.7s}.rip .drip:nth-of-type(3){animation-delay:3.1s}
@keyframes drip{0%,60%{transform:scaleY(1)}75%{transform:scaleY(1.6)}76%,100%{transform:scaleY(1)}}
.doodle{float:right;width:170px;margin:4px 0 14px 28px;text-align:center}
.doodle.l{float:left;margin:4px 28px 14px 0}
.doodle svg{width:100%;height:auto;display:block;overflow:visible}
.doodle figcaption{font:12px/1.35 var(--mono);color:var(--muted);margin:8px 0 0;transform:rotate(-2deg)}
.essay h3,.article h2{clear:none}.essay::after,.article::after{content:"";display:block;clear:both}
@media (max-width:700px){.doodle,.doodle.l{float:none;width:140px;margin:6px auto 18px}}
/* dead bulb */
.bulb-fil{stroke:#5a1a1f;animation:bulb 6s steps(1) infinite}
@keyframes bulb{0%,88%,92%,100%{stroke:#5a1a1f;filter:none}89%,91%{stroke:#ffb347;filter:drop-shadow(0 0 6px #ffb347)}}
/* Yasha's knife glint */
.ya-glint{fill:#fff;opacity:0;animation:glint 3.5s ease-in-out infinite}
@keyframes glint{0%,70%,100%{opacity:0;transform:translateX(0)}80%{opacity:.9}90%{opacity:0;transform:translateX(30px)}}
.ya-eye{animation:wink 4s steps(1) infinite;transform-origin:center;transform-box:fill-box}
@keyframes wink{0%,46%,50%,100%{transform:scaleY(1)}47%,49%{transform:scaleY(.1)}}
/* CRT */
.tv-scr{animation:scan 2.4s steps(2) infinite}
@keyframes scan{0%{fill:#1d2a22}50%{fill:#24382c}}
/* FAQ */
.faq-grp h2{display:flex;align-items:center;gap:12px}
.ico{width:30px;height:30px;flex:0 0 30px;stroke:var(--blood);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.faq-nav a .ico{width:16px;height:16px;flex-basis:16px;vertical-align:-3px;margin-right:6px;stroke:currentColor}
.stamp{display:inline-block;margin-left:12px;padding:2px 9px 1px;border:2px solid var(--blood);border-radius:6px;color:var(--blood-text);font:400 15px/1.2 "Yeseva One",serif;letter-spacing:.06em;transform:rotate(-7deg);vertical-align:2px;opacity:.9;mix-blend-mode:screen;white-space:nowrap}
/* enthusiasts */
.en-card h3{display:flex;align-items:center;gap:12px}.en-card .ico{width:34px;height:34px;flex-basis:34px}
/* tombstone install steps */
.steps.graves{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:34px 18px;max-width:1000px;align-items:end;padding-bottom:8px}
.steps.graves li{padding:62px 14px 22px;text-align:center;border-radius:110px 110px 10px 10px/80px 80px 10px 10px;background:linear-gradient(#232326,#18181a);border:1px solid var(--line-strong);border-bottom:0;font-size:15px}
.steps.graves li::after{content:"";position:absolute;left:-9px;right:-9px;bottom:-8px;height:8px;border-radius:4px;background:#1f2a1c}
.steps.graves li::before{left:50%;top:14px;margin-left:-18px;background:none;border:2px solid var(--blood);color:var(--blood-text);line-height:32px}
.steps.graves li b{display:block;font:18px/1.15 "Yeseva One",serif;margin:0 0 6px;letter-spacing:.02em}
.steps.graves li span{display:block}
@media (max-width:900px){.steps.graves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps.graves{grid-template-columns:1fr}.steps.graves li{padding-left:18px}}

/* v88: screenshots live inside the before/after slider as switchable frames */
.shot-th{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.shot-th button{flex:0 0 132px;padding:0;border:2px solid transparent;border-radius:10px;background:none;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.shot-th button:hover{opacity:.9}.shot-th button[aria-selected="true"]{opacity:1;border-color:var(--blood)}
.shot-th img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}

/* v90: «Ще одна воскресла» is a separate zone at the bottom of a game page */
.rel-sec{margin-top:40px;padding:44px 0 52px;background:linear-gradient(#050506,#0f0f11);border-top:2px solid var(--blood);box-shadow:inset 0 14px 30px -18px rgba(193,18,31,.55)}
.rel-kick{margin:0 0 6px;font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blood-text)}
.rel-sec .rel{grid-template-columns:repeat(auto-fill,minmax(300px,420px))}

/* v92: the step rail — the only step-by-step pattern on the site: equal cards, red badge numbers on one bleeding line */
.rail{--g:16px;list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);position:relative;counter-reset:none}
.rail::before{content:"";position:absolute;top:19px;height:2px;left:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) / 2);right:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) / 2);background:var(--blood);box-shadow:0 0 12px var(--blood)}
.rail li{position:relative;margin-top:20px;padding:34px 16px 18px;background:var(--card);border:1px solid var(--line-strong);border-radius:14px;font-size:15px;line-height:1.5;color:var(--muted)}
.rail li b{display:block;color:var(--fg);font:17px/1.25 "Yeseva One",serif;margin:0 0 6px}
.rail-n{position:absolute;top:-20px;left:50%;margin-left:-20px;width:40px;height:40px;border-radius:50%;background:var(--bg);border:2px solid var(--blood);color:var(--blood-text);font:20px/36px "Metal Mania",serif;text-align:center;box-shadow:0 0 14px rgba(193,18,31,.45)}
.rail li{text-align:center}
@media (min-width:1101px){#install .rail{width:min(1400px,calc(100vw - 64px));margin-left:50%;transform:translateX(-50%)}}
@media (max-width:1100px){.rail{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));row-gap:28px}.rail::before{display:none}}
@media (max-width:600px){.rail{grid-template-columns:1fr;row-gap:12px}.rail li{text-align:left;margin-top:0;padding:14px 16px 16px 66px}.rail-n{top:14px;left:14px;margin-left:0}}
/* v93: install = one aligned wide block; needs and steps are separate groups of separate cards */
@media (min-width:1101px){#install .inst{width:min(1400px,calc(100vw - 64px));margin-left:50%;transform:translateX(-50%)}#install .rail{width:auto;margin-left:0;transform:none}}
.inst-blk+.inst-blk{margin-top:40px;padding-top:6px;border-top:1px solid var(--line)}
.inst-blk .sub-h{margin:26px 0 16px}
#install .need{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
#install .need li{position:relative;margin:0;padding:16px 18px 16px 48px;background:var(--card);border:1px solid var(--line-strong);border-radius:14px;font-size:15px;line-height:1.5;color:var(--muted)}
#install .need li::before{content:"";position:absolute;left:18px;top:21px;width:12px;height:12px;border-radius:50%;border:2px solid var(--blood);box-shadow:0 0 8px rgba(193,18,31,.45)}
/* v94: game page — the before/after slider with its frames sits in the first screen */
.gp-cmp{min-width:0}.gp-cmp .cmp{margin:0}.gp-cmp .shot-th button{flex-basis:96px}
/* v95: bigger slider in the game hero (~60% width) */
@media (min-width:901px){.gp-top:has(.gp-cmp){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px}.gp-top:has(.gp-cmp) h1{font-size:clamp(32px,3.4vw,52px)}}
/* v99: lighter game page — chips for needs, short cards */
.need-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.need-row li{display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--card);border:1px solid var(--line-strong);border-radius:999px;font-size:15px;color:var(--fg)}
.need-row li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;border:2px solid var(--blood);box-shadow:0 0 8px rgba(193,18,31,.45)}
#install .rail li{font-size:14px}
/* v102: even more room for the hero slider on wide screens */
@media (min-width:1101px){.gp-top:has(.gp-cmp){grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}}
/* v103: hero slider reaches a bit further right on wide screens */
@media (min-width:1101px){.gp-cmp{margin-right:calc(-1 * clamp(0px, (100vw - 1160px) / 2, 60px))}}
/* v105: tighter essay rows (About): smaller doodle, top-aligned, less air */
@media (min-width:1100px){.essay .ab-row{gap:32px;align-items:start;padding:10px 0}.essay .ab-row .ab-side .doodle{width:110px;max-width:110px}}
.essay .punch{font-family:"Yeseva One",serif;font-size:1.35em;line-height:1.3;color:#f4f1e8;border-left:4px solid #c1121f;background:rgba(193,18,31,.08);padding:12px 18px;margin:16px 0}
.dl-req{font-size:14px;color:var(--muted);margin:4px 0 0}
.m-only,.st-tgl{display:none}
@media (max-width:760px){
 header.top nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:18px;padding-bottom:6px;gap:0}
 header.top nav::-webkit-scrollbar{display:none}
 header.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
 header.top nav{padding-left:38px}
 .hero.h2c .m-only{display:inline-flex;margin-top:22px}
 .crumbs a,.dl-gh,a.more,footer a{display:inline-flex;align-items:center;min-height:44px}
 details summary{min-height:44px;display:flex;align-items:center}
 .story-txt:not(.open) .st-more{display:none}
 .story-txt:not(.open) .st-tgl{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:var(--fg);font:inherit;text-decoration:underline;text-decoration-color:var(--blood);text-underline-offset:4px;cursor:pointer}
}
.lang a.lang-sw{color:var(--muted);text-decoration:none}.lang a.lang-sw:hover{color:var(--accent)}
@media (max-width:760px){.lang a.lang-sw{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}}

/* v80: denser inner pages; on wide screens doodles and pull quotes live in a right rail, FAQ gets a side nav */
.pg-hero{padding:40px 0 22px}
.pg-sec{padding:28px 0}
.pg-sec h2{margin:0 0 16px}
.rip{margin:10px auto 18px}
.pull{margin:30px auto}
.essay h3{margin:26px 0 8px}
.need{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px 32px}
.steps.graves{max-width:none}
.gp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.gp-duo .story-txt,.gp-duo .faq{max-width:none}
@media (min-width:1100px){
 .essay,.article{max-width:1120px}
 .essay>*,.article>*{max-width:700px}
 .article>img{max-width:none}
 .essay>.doodle,.essay>.doodle.l,.article>.doodle{float:right;clear:right;width:300px;max-width:300px;margin:0 0 26px;padding:0 50px}
 .essay>.pull,.article>.pull{float:right;clear:right;width:340px;max-width:340px;margin:6px 0 30px;text-align:left;font-size:30px;transform:rotate(-2deg)}
 .faq-cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;max-width:1120px}
 .faq-side{position:sticky;top:90px}
 .faq-side .faq-search{margin:0 0 14px}
 .faq-side .faq-nav{flex-direction:column;align-items:flex-start;gap:8px;margin:0}
 .faq-main .faq-grp:first-child h2{margin-top:0}
 .faq-main .faq{max-width:none}
}
@media (max-width:1099px){.gp-duo{grid-template-columns:1fr;gap:24px}}

/* v83: about = one visual per section, placed next to its own text */
.ab-row{display:grid;grid-template-columns:minmax(0,700px) minmax(0,1fr);gap:56px;align-items:center;padding:18px 0}
.essay>.ab-row{max-width:none}
.ab-row h3{margin-top:0}
.ab-row .ab-txt>p:last-child{margin-bottom:0}
.ab-side{display:flex;justify-content:center}
.ab-side .doodle,.ab-side .doodle.l{float:none;width:160px;max-width:160px;margin:0;padding:0}
.ab-side .pull{margin:0;max-width:340px;text-align:left;font-size:24px;line-height:1.15}
.ab-row{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
@media (max-width:1099px){.ab-row{grid-template-columns:1fr;gap:18px}.ab-side .doodle{width:150px}.ab-side .pull{text-align:center}}