@font-face{font-family:"Monocraft";src:url(/fonts/monocraft.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Monocraft";src:url(/fonts/monocraft-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--gold:#ffd23f;--gold2:#ff9f1c;--ink:#f5f3ff;--mute:#b9b4d6;--glass:rgba(14,12,34,.72);--line:rgba(255,255,255,.14);--aura:#ffd23f;--focus:#ffd23f}
body[data-race=saiyan]{--aura:#ffd23f}body[data-race=namekian]{--aura:#5dff6a}body[data-race=majin]{--aura:#ff6fd8}body[data-race=arcosian]{--aura:#a77bff}
.fighter[data-race=saiyan],.slot[data-race=saiyan]{--c:#ffd23f}.fighter[data-race=namekian],.slot[data-race=namekian]{--c:#5dff6a}
.fighter[data-race=majin],.slot[data-race=majin]{--c:#ff6fd8}.fighter[data-race=arcosian],.slot[data-race=arcosian]{--c:#a77bff}
.c-ffd23f{--c:#ffd23f}.c-5aa8ff{--c:#5aa8ff}.c-5dff6a{--c:#5dff6a}.c-ff6fd8{--c:#ff6fd8}
*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);background:#0b0b1e;font:18px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.splash,.btn,.chips,.start,.race-name,.sel-h,.welcome,.slot span,summary,.vt,.win-title,.steps b,.brand{font-family:"Monocraft",ui-monospace,monospace}
[lang=he]{font-family:ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif!important}
img{max-width:100%;display:block}
a{color:var(--gold)}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:#000;color:#fff;padding:10px 16px;font-weight:700;border:2px solid var(--focus)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b0b1e}
.bg-sky{position:absolute;inset:-4%;background:url(/img/sky.webp) center 35%/cover no-repeat;filter:saturate(1.1) brightness(.62);transform:scale(1.04);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.1) translate(-1.5%,-1%)}}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(6,5,20,.55) 70%,rgba(6,5,20,.92) 100%),linear-gradient(180deg,rgba(6,5,20,.35),transparent 30%,transparent 60%,rgba(6,5,20,.85))}
#fx{position:absolute;inset:0;width:100%;height:100%}
body.at-title .bg-sky{filter:saturate(1.05) brightness(.5)}

/* ---------- shared UI ---------- */
.logo{margin:0;font-weight:700;line-height:.95;letter-spacing:.02em;color:var(--gold);
  background:linear-gradient(180deg,#fff6b0 0%,var(--gold) 45%,var(--gold2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 #6b3a00) drop-shadow(0 0 24px rgba(255,190,40,.45))}
.logo span{background:linear-gradient(180deg,#fff 0%,#d8e2ff 60%,#9fb2ff 100%);-webkit-background-clip:text;background-clip:text}
.splash{margin:0;font-weight:700;color:#ffff55;text-shadow:2px 2px 0 #3f3f15;transform:rotate(-12deg);animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{transform:rotate(-12deg) scale(1.08)}}
.btn{display:block;text-align:center;font-size:17px;font-weight:700;letter-spacing:.04em;color:#fff;text-decoration:none;padding:13px 18px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:2px solid rgba(255,255,255,.22);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .12s,border-color .12s,transform .08s}
.btn:hover,.btn:focus-visible{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:var(--aura)}
.btn:active{transform:translateY(1px)}
.btn.gold{color:#2a1600;text-shadow:none;background:linear-gradient(180deg,#fff2a0,var(--gold) 45%,var(--gold2));border-color:#fff3b0;box-shadow:inset 0 -3px 0 rgba(120,60,0,.45),0 0 24px rgba(255,190,40,.35)}
.btn.gold:hover,.btn.gold:focus-visible{filter:brightness(1.08)}
.btn.big{font-size:20px;padding:15px 26px}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:10;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.screen.on{opacity:1;visibility:visible;transition:opacity .22s ease}
html:has(body.game),body.game{height:100%;overflow:hidden;overscroll-behavior:none}
.flash{position:fixed;inset:0;z-index:60;background:#fff;pointer-events:none;animation:flash .38s ease-out forwards}
@keyframes flash{from{opacity:.85}to{opacity:0}}

/* title */
.s-title{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 16px;cursor:pointer}
.t-in{display:flex;flex-direction:column;align-items:center;max-width:980px}
.t-pre{margin:0 0 14px;font-size:clamp(14px,1.8vw,18px);letter-spacing:.3em;text-transform:uppercase;color:#d7d2ff;opacity:.85}
.s-title .logo{font-size:clamp(38px,10.4vw,170px)}
.s-title .splash{align-self:flex-end;margin:-.2em -.4em 0 0;font-size:clamp(15px,2.2vw,24px)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:30px 0 46px;padding:0;font-size:clamp(12px,1.4vw,15px)}
.chips li{padding:6px 14px;border:1px solid var(--line);background:rgba(10,8,30,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.chips li.gold{border-color:var(--gold);color:var(--gold)}
.start{font-size:clamp(18px,2.4vw,26px);color:#fff;text-decoration:none;letter-spacing:.12em;text-transform:uppercase;padding:12px 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.start span{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.corner{position:absolute;bottom:12px;margin:0;font-size:12px;color:#c9c5e6;opacity:.75}
.corner.left{left:16px}.corner.right{right:16px}

/* fighter select */
.sel-h{position:absolute;left:0;right:0;top:clamp(14px,3vh,34px);margin:0;text-align:center;font-size:clamp(18px,2.4vw,30px);letter-spacing:.3em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.stage{position:absolute;left:0;right:0;top:9vh;bottom:max(40vh,360px);perspective:900px}
.fighter{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:440/523;padding:0;border:0;background:none;cursor:pointer;
  transform:translateX(calc(-50% + var(--x,0%))) scale(var(--s,1));transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s,opacity .45s;opacity:var(--o,1);filter:var(--f,none)}
.fighter img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.fighter::before{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1}
.fighter.on{--f:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 22px var(--c));z-index:3}
.fighter.on::before{background:radial-gradient(closest-side,var(--c),transparent);opacity:.55}
.fighter.side{--f:saturate(.55) brightness(.62) blur(.4px);z-index:2}
.fighter.far{--o:0;pointer-events:none}
.fighter:focus-visible{outline:none}
.fighter.hop img{animation:hop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:translateY(0) scale(1,.94)}40%{transform:translateY(-4%) scale(.98,1.04)}100%{transform:none}}
.nav{position:absolute;top:45%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:rgba(10,8,30,.55);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:5}
.nav:hover{border-color:var(--aura);color:var(--aura)}
.nav.prev{left:max(2vw,10px)}.nav.next{right:max(2vw,10px)}
.info{position:absolute;left:50%;bottom:clamp(14px,3vh,30px);transform:translateX(-50%);width:min(760px,calc(100% - 24px));text-align:center;z-index:6}
.race-name{margin:0;font-size:clamp(34px,5.4vw,64px);font-weight:700;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.06em;text-shadow:0 0 18px var(--aura),0 0 40px var(--aura),0 4px 0 rgba(0,0,0,.6)}
.race-text{margin:10px auto 16px;max-width:560px;color:#e3e0fa;font-size:clamp(15px,1.6vw,18px);min-height:3.1em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.roster{display:flex;justify-content:center;gap:10px;margin:0 0 16px}
.slot{position:relative;width:clamp(64px,8vw,92px);padding:0 0 6px;border:2px solid var(--line);background:rgba(10,8,30,.6);cursor:pointer;color:#fff;transition:border-color .15s,transform .15s}
.slot img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.6) brightness(.8);transition:filter .15s}
.slot span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.slot:hover img{filter:none}
.slot[aria-checked=true]{border-color:var(--c);transform:translateY(-4px);box-shadow:0 0 0 1px var(--c),0 0 18px var(--c)}
.slot[aria-checked=true] img{filter:none}
.select{display:inline-block;min-width:min(340px,90%)}

/* menu */
.s-menu{display:grid;grid-template-columns:1fr minmax(320px,440px) 1fr;align-items:center;padding:24px 16px 80px}
.m-hero{grid-column:1;justify-self:end;height:min(70vh,640px);aspect-ratio:440/523;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--aura)) drop-shadow(0 0 24px var(--aura))}
.m-hero img{width:100%;height:100%;object-fit:contain}
.m-in{grid-column:2;display:flex;flex-direction:column;align-items:stretch}
.s-menu .logo{font-size:clamp(40px,5vw,72px);text-align:center}
.welcome{margin:8px 0 26px;text-align:center;font-weight:700;color:var(--aura);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 14px var(--aura)}
.menu{display:grid;gap:10px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-foot{position:absolute;left:16px;right:16px;bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;font-size:12px;color:#b9b4d6}
.m-foot p{margin:0;max-width:640px;opacity:.85}
.m-foot ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.m-foot a{color:#fff}

/* windows */
.win{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,4,16,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s linear .18s}
.win.on{opacity:1;visibility:visible;transition:opacity .18s}
.win-box{position:relative;width:min(1040px,100%);max-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(28,24,60,.96),rgba(14,12,34,.97));border:1px solid var(--line);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.win-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--aura),transparent)}
.win.on .win-box{animation:pop .2s ease-out}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:.3}}
.win-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.win-title{margin:0;font-size:clamp(22px,3vw,32px);color:#fff;text-transform:uppercase;letter-spacing:.08em}
.win-sub{margin:4px 0 0;color:var(--mute);font-size:16px}
.win-x{flex:none;display:grid;place-items:center;width:42px;height:42px;color:#fff;text-decoration:none;font-size:18px;border:1px solid var(--line)}
.win-x:hover{border-color:var(--aura);color:var(--aura)}
.win-body{overflow:auto;padding:20px 24px 24px;overscroll-behavior:contain}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:rgba(255,255,255,.04);border:1px solid var(--line);border-left:4px solid var(--c);padding:14px 16px}
.tile h3{margin:0 0 4px;font-size:19px}.tile p{margin:0;color:var(--mute);font-size:16px}
.trailer{display:block;position:relative;border:1px solid var(--line);margin-bottom:18px;text-decoration:none;color:#fff}
.trailer img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.play{position:absolute;left:50%;top:calc(50% - 24px);transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:rgba(226,35,26,.92);box-shadow:0 0 30px rgba(226,35,26,.6)}
.play::after{content:"";position:absolute;left:31px;top:24px;border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.trailer .cap{display:block;padding:12px 16px;background:rgba(255,255,255,.05);font-weight:700}
.vgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:620px){.vgrid{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.vgrid{grid-template-columns:1fr 1fr 1fr}}
.vcard a{display:block;height:100%;text-decoration:none;color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.vcard a:hover{border-color:var(--aura);transform:translateY(-2px)}
.vcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vt{display:block;padding:10px 12px 2px;font-weight:700;font-size:15px;line-height:1.35}
.vd{display:block;padding:0 12px 12px;color:var(--mute);font-size:14px}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}.row-btns .btn{flex:1 1 200px}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:46px 1fr;gap:4px 14px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:14px 16px}
.steps li::before{content:counter(s);grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;font:700 22px "Monocraft",monospace;color:#2a1600;background:var(--gold)}
.steps b{font-size:18px}.steps span{color:var(--mute);font-size:16px}
.log{border-left:4px solid var(--gold);background:rgba(255,255,255,.04);padding:16px 20px;max-width:620px}
.log p{margin:0 0 6px}.log ul{margin:0;padding-inline-start:22px;color:var(--mute)}
.faq{display:grid;gap:10px}
details{background:rgba(255,255,255,.04);border:1px solid var(--line)}
summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:16px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";color:var(--gold)}details[open] summary::before{content:"- "}
details p{margin:0;padding:0 18px 16px;color:var(--mute)}

/* ---------- phones ---------- */
@media (max-width:820px){
  .s-menu{grid-template-columns:1fr;align-content:center;padding:20px 16px 110px}
  .m-hero{display:none}
  .m-in{grid-column:1;width:min(440px,100%);justify-self:center}
  .m-foot{flex-direction:column;align-items:flex-start;gap:8px;font-size:11px}
}
@media (max-aspect-ratio:1/1){
  .stage{top:7vh;bottom:min(46vh,380px)}
  .nav{top:32%;width:46px;height:46px}
  .race-text{font-size:15px;margin:8px auto 12px;min-height:0}
  .roster{gap:6px}
  .sel-h{font-size:15px;letter-spacing:.2em}
}
@media(max-width:560px){.win{padding:0}.win-box{height:100%}.win-head{padding:16px 16px 12px}.win-body{padding:16px}.btn.big{font-size:18px}}
@media(prefers-reduced-motion:reduce){.bg-sky,.splash,.start span,.fighter.hop img{animation:none!important}.fighter,.screen,.win{transition:none}#fx{display:none}}
@media(forced-colors:active){.btn,.win-box,.slot,.nav{border:2px solid CanvasText}.logo,.logo span{-webkit-text-fill-color:CanvasText}}

/* ---------- text pages ---------- */
body.page{background:radial-gradient(120% 80% at 50% 0%,#1d1840,#0b0b1e 60%)}
.wrap{width:min(1080px,100%);margin:0 auto;padding:0 16px}
.bar{border-bottom:1px solid var(--line);background:rgba(10,8,30,.7)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:14px;padding-bottom:14px}
.bar a{color:#fff;text-decoration:none}
.brand{font-weight:700;color:var(--gold)!important}.brand span{color:#fff}
.doc{max-width:780px;padding:40px 16px 64px}
.doc h1{font-family:"Monocraft",monospace;font-size:clamp(28px,5vw,40px);color:var(--gold);margin:10px 0 8px}
.doc h2{font-size:21px;margin:30px 0 6px;color:#fff}
.doc p,.doc li{color:#dcdce4}
.pfoot{border-top:1px solid var(--line);padding:28px 0 40px;color:#b8b8c2;font-size:15px}
.pfoot ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0 0 14px;padding:0}
.pfoot a{color:#fff}
@media (max-height:720px) and (min-aspect-ratio:1/1){
  .stage{top:7vh;bottom:200px}
  .race-text{display:none}
  .race-name{font-size:clamp(28px,4vw,44px)}
  .roster{margin:8px 0 10px}.slot{width:58px}.slot span{display:none}
  .btn.big{padding:11px 22px;font-size:17px}
  .sel-h{font-size:18px}
}