:root{--bk:#000;--bone:#e9e7e2;--ash:#8d8f92;--ink:#17181a;--ice:#a9bccb;--display:'Anton','Impact',sans-serif;--gothic:'Pirata One','Georgia',serif;--body:'Barlow',system-ui,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);color-scheme:dark}
body{margin:0;background:var(--bk);color:var(--bone);font:400 17px/1.6 var(--body);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;margin:0;letter-spacing:.01em}
.goth{font-family:var(--gothic);letter-spacing:.02em}
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}
section{position:relative;padding:7rem 0}
.cut{clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%);background:var(--ink);padding:10rem 0}

/* loader: the logo is cut on the diagonal, then the slabs part */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bk)}
#loader .half{position:absolute;inset:0;background:var(--bk);display:grid;place-items:center;transition:transform 1s cubic-bezier(.7,0,.2,1)}
#loader .a{clip-path:polygon(0 0,100% 0,0 100%)}
#loader .b{clip-path:polygon(100% 0,100% 100%,0 100%)}
#loader.go .a{transform:translate(-110%,-110%)}
#loader.go .b{transform:translate(110%,110%)}
#loader.done{display:none}
body:not(.ready){overflow:hidden}
#loader .lg{position:relative;width:min(58vw,320px);aspect-ratio:1;z-index:2;animation:pulse .6s 1.45s both;transition:opacity .3s}
#loader.go .lg{opacity:0}
#loader .sh{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:fly 1.4s cubic-bezier(.16,.84,.3,1) forwards}
#loader .s1{--x:-85vw;--y:60vh;--r:-25deg}
#loader .s2{--x:-70vw;--y:-60vh;--r:-40deg;animation-delay:.2s}
#loader .s3{--x:85vw;--y:60vh;--r:35deg;animation-delay:.35s}
@keyframes fly{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.7);filter:blur(10px)}55%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes pulse{0%{filter:none;transform:scale(1)}35%{filter:brightness(2.4);transform:scale(1.07)}100%{filter:none;transform:scale(1)}}
#loader .slash{position:absolute;left:-40%;right:-40%;top:50%;height:2px;background:#fff;opacity:0;transform:translateY(-50%) rotate(-38deg) scaleX(0);animation:slash .6s 1.4s ease-out both}
@keyframes slash{0%{opacity:1;transform:translateY(-50%) rotate(-38deg) scaleX(0)}60%{opacity:1;transform:translateY(-50%) rotate(-38deg) scaleX(1)}100%{opacity:0;transform:translateY(-50%) rotate(-38deg) scaleX(1)}}

/* cursor blade */

nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.25rem;mix-blend-mode:difference}
nav img{height:38px}
nav a.reg{font-family:var(--display);font-size:1rem;text-decoration:none;padding:.5rem 1.2rem;border:1px solid var(--bone);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}

/* hero */
.hero{min-height:100svh;display:grid;align-content:center;text-align:center;padding:4.5rem 0 2.5rem;overflow:hidden}
.hero .mark{width:min(54vw,300px,30vh);margin:0 auto -1rem;opacity:.9;will-change:transform}
.hero h1{font-size:clamp(3.4rem,min(16vw,21vh),11rem);letter-spacing:.03em;text-transform:uppercase;position:relative}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(40px) skewX(-8deg);animation:slam .9s cubic-bezier(.2,.8,.2,1) forwards;animation-play-state:paused}body.ready .hero h1 span{animation-play-state:running}
@keyframes slam{0%{opacity:0;transform:translateY(80px) skewX(-14deg) scale(1.2);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .goth,.hero>div{animation:fadeup .9s 1.4s both;animation-play-state:paused}
body.ready .hero .goth,body.ready .hero>div{animation-play-state:running}
@keyframes rise{to{opacity:1;transform:none}}
.hero .goth{font-size:clamp(1.6rem,4.5vw,2.6rem);color:var(--ice);margin:.6rem 0 1.4rem}
.btn{display:inline-block;font-family:var(--display);font-size:1.15rem;letter-spacing:.06em;text-decoration:none;color:var(--bk);background:var(--bone);padding:1rem 2.6rem;border:0;cursor:pointer;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--ice);transform:translateX(-101%) skewX(-20deg);transition:transform .35s;z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--ash)}
.btn.ghost::before{background:var(--bone)}
.btn.ghost:hover{color:var(--bk)}
.next{margin-top:1.5rem;color:var(--ash);font-size:.95rem}
#count{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.4rem);color:var(--bone);margin-top:.3rem}

.ticker{overflow:hidden;background:var(--bone);color:var(--bk);transform:rotate(-1.6deg) scale(1.03);padding:.7rem 0;margin:-1rem 0;position:relative;z-index:3}
.ticker div{display:flex;width:max-content;animation:tick 28s linear infinite;font-family:var(--display);font-size:1.6rem;white-space:nowrap}
.ticker span{padding:0 1.6rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* about */
.about{display:grid;gap:3rem;grid-template-columns:1.2fr 1fr;align-items:center}
.about h2{font-size:clamp(2.6rem,7vw,5.2rem)}
.about p{color:#c4c3bf;max-width:46ch}
.stat{display:flex;gap:2.2rem;margin-top:2rem}
.stat b{font-family:var(--display);font-weight:400;font-size:2.6rem;display:block;line-height:1}
.stat small{color:var(--ash)}
.about figure{margin:0;transform:rotate(2deg);box-shadow:0 0 0 1px #2a2c2f}

/* seasons */
.seasons{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;margin-top:3rem}
.season{display:grid;gap:1.2rem;align-content:start}
.season .poster{overflow:hidden;clip-path:polygon(0 0,94% 0,100% 6%,100% 100%,6% 100%,0 94%)}
.season .poster img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s;filter:grayscale(.55)}
.season:hover .poster img{transform:scale(1.05);filter:none}
.season h3{font-size:2.4rem}
.season dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.2rem;margin:0;color:#c4c3bf}
.season dt{color:var(--ash)}
.season dd{margin:0}
.tag{display:inline-block;font-family:var(--gothic);font-size:1.4rem;color:var(--ice)}

/* current */
.soon{text-align:center}
.soon h2{font-size:clamp(3rem,11vw,8rem);-webkit-text-stroke:1.5px var(--bone);color:transparent}
.soon p{color:var(--ash);max-width:48ch;margin:1rem auto 0}

/* gallery */
.gal{columns:3 260px;column-gap:1rem;margin-top:2.5rem}
.gal figure{margin:0 0 1rem;break-inside:avoid;overflow:hidden;background:#0d0e0f}
.gal img{width:100%;transition:transform .7s,filter .5s;filter:grayscale(1) contrast(1.05)}
.gal figure:hover img{transform:scale(1.06);filter:none}
.gal .empty{aspect-ratio:4/5;display:grid;place-items:center;border:1px dashed #3a3c40;color:var(--ash);font-family:var(--gothic);font-size:1.5rem;text-align:center;padding:1rem}

/* register */
.card{max-width:640px;margin:2.5rem auto 0;background:#000;padding:2rem;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));box-shadow:inset 0 0 0 1px #34363a}
.bar{height:3px;background:#26282b;margin-bottom:1.6rem}
.bar i{display:block;height:100%;width:25%;background:var(--bone);transition:width .5s}
.step{display:none}.step.on{display:block;animation:rise .5s both}
label{display:block;margin:1rem 0 .3rem;color:var(--ash);font-size:.9rem}
input,select{width:100%;background:transparent;color:var(--bone);border:0;border-bottom:1px solid #4a4c50;padding:.6rem 0;font:inherit;border-radius:0}
input:focus,select:focus{outline:0;border-color:var(--ice)}
select option{background:#000}
.opts{display:grid;gap:.8rem}
.opt{border:1px solid #34363a;padding:1rem 1.2rem;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;transition:border-color .2s,background .2s}
.opt.sel{border-color:var(--bone);background:#111}
.opt.off{opacity:.45;cursor:not-allowed}
.opt b{font-family:var(--display);font-weight:400;font-size:1.3rem}
.pay{background:#0e0f10;padding:1rem 1.2rem;margin-top:1rem;color:#c4c3bf;font-size:.95rem}
.row{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
.err{color:#d98b8b;font-size:.9rem;min-height:1.2em;margin-top:.8rem}
#shot{max-height:180px;margin-top:.8rem}
.done-id{font-family:var(--display);font-size:2.6rem;color:var(--ice)}

footer{padding:4rem 0 3rem;text-align:center;color:var(--ash)}
footer img{width:70px;margin:0 auto 1rem}
footer a{margin:0 .8rem}

.rv{opacity:0;transform:translateY(34px) skewY(1.5deg);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:760px){section{padding:4.5rem 0}.cut{padding:7rem 0}.about,.seasons{grid-template-columns:1fr}.card{padding:1.4rem}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}}

/* ---- v2 upgrades ---- */
:root{--hot:#cfcfcf;--gold:#e9e7e2}
#blade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:95}
#flash{display:none;position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:96}
body.hit #flash{display:block;animation:gl .26s steps(5) both}
@keyframes flash{0%{opacity:.6}100%{opacity:0}}
#flash{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--hot) 16%,transparent) 0 3px,transparent 3px 10px,color-mix(in srgb,var(--ice) 14%,transparent) 10px 13px,transparent 13px 22px);mix-blend-mode:screen}
@keyframes gl{0%{opacity:1;transform:translateX(-7px);clip-path:inset(10% 0 55% 0)}25%{transform:translateX(6px);clip-path:inset(55% 0 15% 0)}50%{transform:translateX(-4px);clip-path:inset(0 0 75% 0)}75%{transform:translateX(3px);clip-path:inset(35% 0 30% 0)}100%{opacity:0;transform:none;clip-path:inset(0)}}
#sp{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 0;will-change:transform;background:var(--hot);z-index:60}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero>*:not(#fx){position:relative;z-index:1}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,color-mix(in srgb,var(--hot) 14%,transparent));pointer-events:none}
.hero h1{text-shadow:0 0 60px color-mix(in srgb,var(--ice) 18%,transparent)}
.hero h1:hover{animation:glitch .4s steps(2) 1}
@keyframes glitch{25%{text-shadow:4px 0 var(--hot),-4px 0 var(--ice)}50%{text-shadow:-5px 0 var(--hot),5px 0 var(--ice);transform:translateX(3px)}100%{text-shadow:none}}
.ticker span:nth-child(5n+2){color:var(--hot)}
.btn{transition:transform .15s}.btn:active{transform:scale(.96) skewX(-4deg)}
.btn::before{background:var(--hot)}.btn:hover,.btn:focus-visible{color:#fff}
.btn.ghost::before{background:var(--bone)}.btn.ghost:hover{color:var(--bk)}
.rnd{font-family:var(--display);font-size:1.05rem;letter-spacing:.08em;display:flex;justify-content:space-between;margin-bottom:.5rem;color:var(--ash)}
.rnd b{font-weight:400;color:var(--bone)}
.bar{height:16px;padding:3px;background:#15161a;border:1px solid #4a4c50;transform:skewX(-18deg);margin:0 .5rem 1.6rem}
.bar i{background:linear-gradient(90deg,var(--hot),var(--gold));box-shadow:0 0 14px color-mix(in srgb,var(--hot) 60%,transparent)}
.opt:not(.off):hover{border-color:var(--hot)}
input:focus,select:focus{border-color:var(--hot)}
.done-id{color:var(--gold);text-shadow:0 0 24px color-mix(in srgb,var(--gold) 35%,transparent)}
.soon h2{-webkit-text-stroke-color:var(--hot)}
@media(prefers-reduced-motion:reduce){body.hit #flash{animation:none}.hero h1:hover{animation:none}}

footer .soc{position:static;display:flex;justify-content:center;gap:1.1rem;padding:.5rem 0 0;mix-blend-mode:normal}
.soc a{margin:0;position:relative;width:62px;height:62px;display:grid;place-items:center;text-decoration:none;color:var(--bone);background:#111;box-shadow:inset 0 0 0 1px #34363a;transform:skewX(-14deg);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s,color .25s}
.soc a span{display:grid;transform:skewX(14deg)}
.soc svg{width:28px;height:28px;transition:transform .25s}
.soc a:hover,.soc a:focus-visible{background:var(--hot);color:#fff;transform:skewX(-14deg) translateY(-8px);box-shadow:0 12px 30px color-mix(in srgb,var(--hot) 45%,transparent)}
.soc a:hover svg{transform:scale(1.18) rotate(-8deg)}
.soc a::after{content:attr(data-t);position:absolute;bottom:-1.9rem;left:50%;transform:skewX(14deg) translateX(-50%);font:1rem var(--gothic);color:var(--ice);white-space:nowrap;opacity:0;transition:opacity .2s}
.soc a:hover::after,.soc a:focus-visible::after{opacity:1}
footer{padding-bottom:4.5rem}

/* ---- v3: pick-your-game theming ---- */
@property --hot{syntax:'<color>';inherits:true;initial-value:#e5242f}
@property --ice{syntax:'<color>';inherits:true;initial-value:#a9bccb}
@property --gold{syntax:'<color>';inherits:true;initial-value:#ffc247}
@property --ink{syntax:'<color>';inherits:true;initial-value:#17181a}
:root{transition:--hot 1.2s ease,--ice 1.2s ease,--gold 1.2s ease,--ink 1.2s ease}
html.tk{--hot:#e5242f;--ice:#ff8d93;--gold:#ffc247;--ink:#1c0f11}
html.pb{--hot:#8b5cf6;--ice:#cdb8ff;--gold:#e6d3ff;--ink:#150f26}
.hero{position:relative}
#blade{z-index:99}
#aura{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s;background:radial-gradient(70% 45% at 50% -5%,color-mix(in srgb,var(--hot) 15%,transparent),transparent 70%),radial-gradient(60% 40% at 50% 110%,color-mix(in srgb,var(--hot) 11%,transparent),transparent 70%)}
html.tk #aura,html.pb #aura{opacity:1}
@keyframes breathe{50%{transform:scale(1.1);filter:brightness(1.4)}}
#frame{position:fixed;inset:0;z-index:80;pointer-events:none;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow 1.4s}
html.tk #frame,html.pb #frame{box-shadow:inset 0 0 150px -20px color-mix(in srgb,var(--hot) 20%,transparent)}
body.pick{overflow:hidden}
#pick{position:fixed;inset:0;z-index:98;display:grid;place-items:center;padding:1.2rem;background:rgba(0,0,0,.45);opacity:0;transition:opacity .9s}
#pick.again{background:rgba(0,0,0,.8);backdrop-filter:blur(14px)}
body.gate>header,body.gate>.ticker,body.gate>section,body.gate>footer,body.gate>nav{visibility:hidden}
body.gate .hero h1 span,body.gate .hero .goth,body.gate .hero>div{animation:none!important}
#pick[hidden]{display:none}#pick.show{opacity:1}
.pk-card{width:min(560px,100%);padding:2.4rem 2rem 1.6rem;background:#050506;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));box-shadow:inset 0 0 0 1px #3a3c40;transform:translateY(34px) scale(.96);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
#pick.show .pk-card{transform:none}
.pk-t{font:2.3rem/1 var(--display);margin:0;min-height:1em}
.pk-t::after{content:"";display:inline-block;width:3px;height:.9em;margin-left:6px;background:var(--bone);vertical-align:-.1em;animation:blip 1s steps(2) infinite}
#pk-name{font:1.6rem var(--display);letter-spacing:.05em;text-transform:uppercase;margin-top:1.6rem}
.pk-h{color:var(--ash);margin:1.2rem 0 0;font-size:.95rem}.pk-h.err{color:#ff8d93}
.pk-games{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.pk{border:0;font:inherit;color:var(--bone);cursor:pointer;position:relative;overflow:hidden;padding:1.5rem .8rem;background:#0b0b0d;box-shadow:inset 0 0 0 1px #34363a;transform:skewX(-8deg);transition:transform .3s,box-shadow .3s,background .3s}
.pk>*{display:block;transform:skewX(8deg)}
.pk b{font:2.1rem/1 var(--display)}.pk small{color:var(--ash);margin-top:.4rem}
.pk::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s}
.pk:hover::before,.pk:focus-visible::before{transform:translateX(120%)}
.pk.tk:hover,.pk.tk:focus-visible{background:#1a0507;transform:skewX(-8deg) translateY(-5px);box-shadow:inset 0 0 0 1px #e5242f,0 0 46px rgba(229,36,47,.5)}
.pk.pb:hover,.pk.pb:focus-visible{background:#120a22;transform:skewX(-8deg) translateY(-5px);box-shadow:inset 0 0 0 1px #8b5cf6,0 0 46px rgba(139,92,246,.55)}
.pk-skip[hidden]{display:none}.pk-skip{display:block;margin:1.2rem auto 0;background:none;border:0;color:var(--ash);font:inherit;font-size:.9rem;text-decoration:underline;cursor:pointer}
.wave{position:fixed;inset:0;z-index:99;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),color-mix(in srgb,var(--c) 85%,transparent),color-mix(in srgb,var(--c) 40%,transparent) 60%,transparent);animation:wave 1.4s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes wave{0%{clip-path:circle(0 at var(--x) var(--y));opacity:1}70%{opacity:.8}100%{clip-path:circle(150vmax at var(--x) var(--y));opacity:0}}
.ring{position:fixed;z-index:99;pointer-events:none;width:40px;height:40px;margin:-20px 0 0 -20px;border:2px solid var(--c);border-radius:50%;box-shadow:0 0 30px var(--c);animation:ring 1.3s cubic-bezier(.2,.7,.2,1) forwards}
.wave,.ring{display:none}
@keyframes ring{to{transform:scale(45);opacity:0}}
.word{position:fixed;inset:0;z-index:99;display:grid;place-items:center;pointer-events:none;font:clamp(5rem,26vw,20rem)/1 var(--display);color:transparent;-webkit-text-stroke:2px var(--c);text-shadow:0 0 60px var(--c);opacity:0;animation:word 1.7s .2s ease-out forwards}
@keyframes word{0%{opacity:0;letter-spacing:.35em;transform:scale(1.25)}35%{opacity:1}100%{opacity:0;letter-spacing:.02em;transform:scale(1)}}
#chip{display:flex;align-items:center;gap:.5rem;margin:0 .8rem 0 auto;max-width:46vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:.95rem var(--display);letter-spacing:.05em;color:var(--bone);background:transparent;border:1px solid var(--hot);padding:.45rem 1rem;cursor:pointer;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
#chip[hidden]{display:none}
#chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot);animation:blip 1.6s infinite}
@keyframes blip{50%{opacity:.25}}
@media(max-width:520px){.pk-games{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.wave,.ring,.word{animation:none;opacity:0}#aura{animation:none}}
#fx,.hero::after{opacity:0;transition:opacity 1.8s ease}
html.tk #fx,html.pb #fx,html.tk .hero::after,html.pb .hero::after{opacity:1}

/* ---- v4: upgrades ---- */
#sk{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:99}
#sp{box-shadow:0 0 12px var(--hot)}
body>nav{transition:transform .45s cubic-bezier(.2,.8,.2,1)}body>nav.hide{transform:translateY(-120%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,35%),color-mix(in srgb,var(--ice) 15%,transparent),transparent 62%)}
.hero .mark{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--hot) 45%,transparent))}
@keyframes halo{50%{filter:drop-shadow(0 0 30px color-mix(in srgb,var(--hot) 60%,transparent)) brightness(1.18)}}
.hero h1.gl{animation:glitch .42s steps(2) 1}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;opacity:0}
.in .ch{animation:chIn .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*38ms)}
@keyframes chIn{0%{opacity:0;transform:translateY(70%) skewX(-16deg) scale(1.2);filter:blur(7px)}100%{opacity:1;transform:none;filter:none}}
.poster{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s}
.poster::after{content:"";position:absolute;inset:0;background:var(--hot);transform:scaleX(0);pointer-events:none}
.in .poster::after{animation:wipe 1.1s cubic-bezier(.7,0,.2,1) both}
@keyframes wipe{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.ticker.out{background:transparent;color:transparent;-webkit-text-stroke:1px var(--bone);transform:rotate(1.4deg) scale(1.03);margin:2rem 0 -1rem}
.ticker.out div{animation-direction:reverse;animation-duration:36s}
.gal img{cursor:zoom-in}
#lb{position:fixed;inset:0;z-index:97;display:grid;place-items:center;background:rgba(0,0,0,.93);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
#lb[hidden]{display:none}#lb.on{opacity:1}
#lb img{max-width:92vw;max-height:86vh;box-shadow:0 0 90px -12px var(--hot);transform:scale(.9);transition:transform .45s cubic-bezier(.2,.8,.2,1);cursor:pointer}#lb.on img{transform:none}
#lb button{position:absolute;top:calc(.8rem + env(safe-area-inset-top,0px));right:1.2rem;background:none;border:0;color:var(--bone);font:2.8rem/1 var(--display);cursor:pointer}
#top{position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:60;width:48px;height:48px;border:0;background:var(--bone);color:var(--bk);cursor:pointer;font-size:1rem;clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);transform:translateY(90px);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .2s}
#top.on{transform:none}#top:hover{background:var(--hot);color:#fff}
.card.sh{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}
.opt.sel{box-shadow:0 0 28px -10px var(--hot)}
input:focus,select:focus{box-shadow:0 10px 14px -12px var(--hot)}
#rid{cursor:pointer}#rid.cp::after{content:" copied";font-size:1rem;color:var(--ash)}
@media(prefers-reduced-motion:reduce){.ch{opacity:1}.in .ch,.in .poster::after,.hero .mark,.hero h1.gl,.card.sh{animation:none}}

/* ---- CROSS start ---- */
.hw{font-style:normal;display:inline-block;white-space:nowrap}
html:not(.tk) body>nav>img{display:none}
.nvt{font:1.6rem/1 var(--display);letter-spacing:.14em}html.tk .nvt{display:none}

/* ---- one site, two games ---- */
html.pb .tkonly{display:none!important}html:not(.pb) .pbonly{display:none!important}
html.pb .opt[data-g="pb"]{order:-1}.opt[data-g]{cursor:pointer}.opt[data-g]:hover{background:#111}
#gallery{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* ---- PUBG page ---- */
html.pb .hero h1{font-size:clamp(1.5rem,8.2vw,6rem);white-space:nowrap}
.pbfig{background:#0b0b0d}.pbfig svg{display:block;width:100%}
.pbfig .z0{fill:none;stroke:var(--hot);stroke-width:2;stroke-opacity:.35}
.pbfig .zn{fill:color-mix(in srgb,var(--hot) 14%,transparent);stroke:var(--hot);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:zone 6s ease-in-out infinite}
@keyframes zone{0%,8%{transform:scale(1)}92%,100%{transform:scale(.2)}}
.pbfig .t1{font:2.4rem var(--display);fill:var(--bone);letter-spacing:.06em}.pbfig .t2{font:1rem var(--display);fill:var(--hot);letter-spacing:.3em}
.pl{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}.pl h3{grid-column:1/-1;font-size:1.3rem;margin-top:1.2rem;color:var(--ice)}#shot{max-height:160px;margin-top:.8rem}
@media(max-width:520px){.pl{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.pbfig .zn{animation:none}}
@media(max-width:800px){.about{grid-template-columns:1fr}.pbfig{max-width:420px}}

/* ---- perf (mobile) ---- */
body>nav.nb{mix-blend-mode:normal}
@media(pointer:coarse){#blade{display:none}#lb{backdrop-filter:none}}
.gal img,.about figure img,.season .poster img{height:auto}