.guide-body { background:#050505;scroll-behavior:smooth; }
.guide-shell { min-height:100svh;overflow:hidden;background:linear-gradient(90deg,rgba(112,221,255,.025),transparent 28%,transparent 72%,rgba(255,123,123,.025)),#050505; }
.guide-shell::before { position:fixed;inset:0;z-index:20;content:"";pointer-events:none;opacity:.08;background:repeating-linear-gradient(180deg,transparent 0,transparent 4px,rgba(255,255,255,.05) 5px); }
.guide-topbar { position:relative;z-index:10;display:grid;width:min(1320px,calc(100% - 40px));height:76px;margin:0 auto;grid-template-columns:1fr 1fr;align-items:center;border-bottom:1px solid var(--line); }
.guide-brand { color:var(--white);text-decoration:none;justify-self:start; }
.guide-back { justify-self:end;border:1px solid #764044;padding:10px 14px;color:#ffc6c6;background:#241012;text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:.2s ease; }
.guide-back:hover { border-color:var(--red);background:#3a171a;transform:translateY(-2px); }
.guide-back span { margin-right:8px; }
.guide-main { width:min(1220px,calc(100% - 40px));margin:0 auto; }
.guide-hero { display:grid;min-height:calc(100svh - 76px);grid-template-columns:minmax(0,1fr) minmax(380px,.78fr);gap:clamp(40px,7vw,100px);align-items:center;padding:70px 0 90px; }
.guide-hero-copy h1 { margin:0;font:italic 900 clamp(5rem,11vw,9.6rem)/.76 var(--display);letter-spacing:-.045em;text-transform:uppercase; }
.guide-hero-copy h1 span { color:transparent;-webkit-text-stroke:2px var(--white);text-shadow:-7px 0 rgba(112,221,255,.15),7px 0 rgba(255,123,123,.16); }
.guide-hero-copy>p:not(.kicker) { max-width:650px;margin:34px 0;color:#9499a0;font-size:.95rem;line-height:1.8; }
.guide-cta { display:inline-block;text-align:center;text-decoration:none; }
.guide-demo { position:relative;border:1px solid #42464d;padding:22px;background:linear-gradient(145deg,rgba(112,221,255,.07),transparent 45%,rgba(255,123,123,.07)),#090a0b;box-shadow:22px 22px 0 #0d0e10;transform:rotate(1deg); }
.guide-demo::before { position:absolute;top:-10px;right:28px;width:64px;height:20px;content:"";background:linear-gradient(90deg,var(--blue) 50%,var(--red) 50%);opacity:.8; }
.demo-status { display:flex;justify-content:space-between;color:#757a81;font-size:.62rem;font-weight:700;letter-spacing:.12em; }.demo-status span:first-child { color:var(--blue); }.demo-status span:last-child { color:var(--red); }
.demo-fighters { display:grid;height:260px;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border-bottom:2px solid #eceff1; }
.demo-fighters>strong { color:#555a61;font:italic 900 2rem var(--display); }
.mini-fighter { --fighter:var(--blue);position:relative;width:120px;height:190px;justify-self:center;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--fighter) 55%,transparent)); }
.red-fighter { --fighter:var(--red);transform:scaleX(-1); }.mini-fighter::before { position:absolute;top:12px;left:42px;width:38px;height:38px;border:7px solid var(--fighter);border-radius:50%;content:""; }.mini-fighter::after { position:absolute;top:58px;left:57px;width:9px;height:76px;border-radius:8px;background:var(--fighter);content:"";transform:rotate(-8deg);transform-origin:top; }
.mini-fighter i,.mini-fighter b,.mini-fighter em { position:absolute;display:block;height:8px;border-radius:8px;background:var(--fighter);transform-origin:left center; }.mini-fighter i { top:68px;left:60px;width:70px;transform:rotate(-13deg); }.mini-fighter b { top:126px;left:60px;width:68px;transform:rotate(52deg); }.mini-fighter em { top:128px;left:61px;width:70px;transform:rotate(112deg); }
.demo-word { margin-top:18px;border:1px solid #34383e;padding:14px 16px;text-align:center;background:#070708; }.demo-word small { display:block;color:#858a91;font-size:.6rem;letter-spacing:.18em;text-align:left; }.demo-word strong { font:900 2.5rem var(--display);letter-spacing:.18em; }.demo-word strong span { color:var(--blue); }
.guide-demo>p { margin:12px 0 0;color:#747980;font-size:.7rem;text-align:center; }
.guide-nav { position:sticky;top:0;z-index:12;display:flex;overflow-x:auto;border:1px solid #383c42;background:rgba(6,6,7,.94);backdrop-filter:blur(12px);scrollbar-width:none; }
.guide-nav a { flex:1;min-width:max-content;border-right:1px solid #282b30;padding:14px 18px;color:#8b9097;text-align:center;text-decoration:none;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }.guide-nav a:last-child { border-right:0; }.guide-nav a:hover { color:var(--white);background:#111317; }
.guide-section { padding:110px 0 10px;scroll-margin-top:45px; }
.section-heading { display:flex;align-items:flex-start;gap:20px;margin-bottom:42px; }.section-heading>span { min-width:48px;border:1px solid #454950;padding:8px;color:var(--blue);font-size:.72rem;font-weight:700;text-align:center; }.section-heading .kicker { margin:0 0 10px; }.section-heading h2 { margin:0;font:italic 900 clamp(3.7rem,8vw,6.5rem)/.78 var(--display);letter-spacing:-.025em;text-transform:uppercase; }
.step-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #35393f;border-left:1px solid #35393f; }
.step-grid article { position:relative;min-height:280px;border-right:1px solid #35393f;border-bottom:1px solid #35393f;padding:30px 26px;background:#090a0b; }.step-grid article:hover { background:#0e1012; }.step-grid article>b { color:#24282d;font:italic 900 5rem var(--display); }.step-grid article>span { position:absolute;top:34px;right:24px;color:var(--blue);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; }.step-grid h3,.control-grid h3,.mechanic-grid h3,.advanced-grid h3,.mode-guide-grid h3,.ping-guide h3 { margin:22px 0 10px;font:800 1.65rem var(--display);letter-spacing:.03em;text-transform:uppercase; }.step-grid p,.control-grid p,.mechanic-grid p,.advanced-grid p,.mode-guide-grid p,.ping-guide p { margin:0;color:#858a91;font-size:.8rem;line-height:1.75; }
.control-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }.control-grid article { display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;border:1px solid #35393f;padding:24px;background:#090a0b; }.control-grid h3 { margin:0 0 5px; }.control-grid kbd,.all-in-intro kbd { display:grid;min-height:64px;place-items:center;border:1px solid #70757d;border-bottom-width:5px;color:var(--white);background:#111317;font:700 .7rem var(--mono);letter-spacing:.1em; }
.guide-rule { display:grid;margin-top:12px;grid-template-columns:auto 1fr;gap:22px;align-items:center;border:1px solid var(--blue);padding:20px 24px;background:rgba(112,221,255,.045); }.guide-rule strong { color:var(--blue);font:.84rem var(--mono);letter-spacing:.12em;text-transform:uppercase; }.guide-rule p { margin:0;color:#b4b8be;font-size:.8rem;line-height:1.7; }
.mechanic-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.mechanic-card { min-height:230px;border:1px solid #35393f;border-top:4px solid var(--accent,#888);padding:28px;background:linear-gradient(155deg,color-mix(in srgb,var(--accent,#888) 8%,transparent),transparent 54%),#090a0b; }.mechanic-card h3 { margin-top:28px;font-size:2rem; }.blue-card { --accent:var(--blue); }.neutral-card { --accent:#f6f7f8; }.heal-card { --accent:#9cffb0; }.ult-card { --accent:#b280ff; }.red-card { --accent:var(--red); }
.all-in-intro { display:grid;margin-bottom:12px;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;border:1px solid #3a3e44;padding:22px 26px;background:#090a0b; }.all-in-intro>p { margin:0;color:#b0b4ba;font-size:.82rem;line-height:1.75; }.all-in-intro kbd { display:inline-grid;min-height:auto;margin:0 4px;padding:4px 7px;border-bottom-width:2px; }.all-in-intro>div { display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center; }.all-in-intro b { border:1px solid #fff;padding:7px 10px;font-size:.68rem;letter-spacing:.1em; }.all-in-intro span { color:#858a91;font-size:.74rem;line-height:1.55; }
.ability-list { display:grid;gap:8px; }.ability-card { --ability:#fff;border:1px solid #383c42;border-left:5px solid var(--ability);background:linear-gradient(100deg,color-mix(in srgb,var(--ability) 7%,transparent),transparent 36%),#090a0b; }.ability-card summary { display:grid;min-height:112px;grid-template-columns:54px 1fr auto 36px;gap:22px;align-items:center;padding:20px 24px;cursor:pointer;list-style:none; }.ability-card summary::-webkit-details-marker { display:none; }.ability-number { color:var(--ability);font-size:.7rem;font-weight:700; }.ability-card h3 { margin:0;font:italic 900 clamp(2rem,5vw,3.2rem)/.88 var(--display);text-transform:uppercase; }.ability-card code,.advanced-grid code { border:1px solid color-mix(in srgb,var(--ability) 45%,#333);padding:9px 12px;color:var(--ability);background:#070708;font:.72rem var(--mono);letter-spacing:.08em; }.ability-card summary i { color:var(--ability);font:normal 300 1.6rem var(--mono);transition:transform .2s ease; }.ability-card[open] summary i { transform:rotate(45deg); }.ability-body { display:grid;grid-template-columns:1fr 1.25fr;gap:42px;border-top:1px solid #30343a;padding:24px 82px 30px; }.ability-body>p { margin:0;color:#a4a8ae;font-size:.82rem;line-height:1.8; }.ability-body dl { display:grid;margin:0;grid-template-columns:repeat(3,1fr);gap:8px; }.ability-body dl div { border:1px solid #2d3035;padding:10px 12px;background:#08090a; }.ability-body dt { color:#696e75;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase; }.ability-body dd { margin:5px 0 0;color:#d5d7da;font:700 .72rem var(--mono); }.void-ability { --ability:#a970ff; }.shrine-ability { --ability:#ff4b57; }.instinct-ability { --ability:#e9fbff; }.bunshin-ability { --ability:#ff9d45; }.tsukuyomi-ability { --ability:#e32636; }
.advanced-grid { display:grid;grid-template-columns:1.05fr .95fr;gap:12px; }.clash-panel { min-height:520px;border:1px solid #474b52;padding:34px;background:linear-gradient(135deg,rgba(255,75,87,.13),transparent 48%,rgba(169,112,255,.14)),#08090a; }.clash-sides { display:grid;height:190px;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);background:linear-gradient(112deg,rgba(255,75,87,.22) 0 48.5%,#f6f7f8 49% 50%,rgba(169,112,255,.22) 50.5%); }.clash-sides span { color:#b6bac0;font-size:.62rem;font-weight:700;letter-spacing:.1em; }.clash-sides b { font:italic 900 2.4rem/.72 var(--display);text-shadow:-3px 0 var(--red),3px 0 #a970ff; }.clash-panel h3 { margin-top:30px;font-size:2.3rem; }.clash-panel code { display:block;margin:20px 0;color:#fff;text-align:center;font-size:1rem;--ability:#fff; }.advanced-stack { display:grid;gap:10px; }.advanced-stack article { border:1px solid #35393f;padding:25px;background:#090a0b; }.advanced-stack h3 { margin:0 0 13px; }.advanced-stack code { display:inline-block;margin-bottom:14px;--ability:var(--blue); }
.mode-guide-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }.mode-guide-grid article { min-height:250px;border:1px solid #35393f;padding:28px;background:#090a0b; }.mode-index { color:var(--blue);font-size:.65rem;font-weight:700; }.mode-guide-grid h3 { margin-top:38px;font-size:2rem; }.mode-guide-grid .coming-mode { opacity:.58;border-style:dashed; }
.match-format { display:grid;margin-top:12px;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;border:1px solid #3a3e44;padding:25px 30px;background:linear-gradient(90deg,rgba(112,221,255,.05),transparent 50%,rgba(255,123,123,.05)); }.match-format>strong { color:#5e636a;font:italic 900 1.5rem var(--display); }.match-format>div:last-child { text-align:right; }.match-format small { color:#747980;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; }.match-format h3 { margin:6px 0;font:italic 900 2rem var(--display);text-transform:uppercase; }.match-format>div:first-child h3 { color:var(--blue); }.match-format>div:last-child h3 { color:var(--red); }.match-format p { margin:0;color:#858a91;font-size:.75rem; }
.ping-guide { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }.ping-guide article { --ping:#fff;min-height:230px;border:1px solid #35393f;border-top:3px solid var(--ping);padding:28px;background:#090a0b; }.guide-ping { display:flex;height:34px;align-items:end;gap:5px; }.guide-ping i { display:block;width:7px;background:var(--ping);box-shadow:0 0 8px color-mix(in srgb,var(--ping) 60%,transparent); }.guide-ping i:nth-child(1) { height:12px; }.guide-ping i:nth-child(2) { height:22px; }.guide-ping i:nth-child(3) { height:32px; }.ping-guide h3 { margin-top:30px; }.ping-good { --ping:#9cffb0!important; }.ping-okay { --ping:#ffd06f!important; }.ping-poor { --ping:var(--red)!important; }.ping-sync { --ping:#8d9299!important; }.sync-ring { width:34px;height:34px;border:4px solid #282c31;border-top-color:#8d9299;border-radius:50%;animation:guide-spin .9s linear infinite; }
.tip-list { margin:0;padding:0;border-top:1px solid #35393f;list-style:none; }.tip-list li { display:grid;grid-template-columns:70px 1fr;border-bottom:1px solid #35393f;padding:22px 0;align-items:center; }.tip-list b { color:var(--blue);font-size:.68rem; }.tip-list span { color:#8e939a;font-size:.8rem;line-height:1.7; }.tip-list strong { color:var(--white); }
.guide-finish { margin:120px 0 80px;border:1px solid #44484f;padding:clamp(45px,8vw,90px);text-align:center;background:radial-gradient(circle at 22% 40%,rgba(112,221,255,.08),transparent 30%),radial-gradient(circle at 78% 60%,rgba(255,123,123,.08),transparent 30%),#08090a; }.guide-finish h2 { margin:0 0 40px;font:italic 900 clamp(4rem,11vw,8rem)/.78 var(--display);letter-spacing:-.035em;text-transform:uppercase; }.guide-finish a { display:inline-block;text-decoration:none; }
.guide-footer { display:flex;width:min(1220px,calc(100% - 40px));margin:0 auto;align-items:center;justify-content:space-between;border-top:1px solid #35393f;padding:24px 0 34px;color:#747980;font-size:.68rem;text-transform:uppercase; }.guide-footer>span { color:#fff;font:italic 900 1.2rem var(--display);letter-spacing:.08em; }.guide-footer p { margin:0; }.guide-footer a { color:#aeb2b8;text-decoration:none; }
@keyframes guide-spin { to{transform:rotate(360deg)} }
@media (max-width:980px) { .guide-hero{grid-template-columns:1fr;padding-top:90px}.guide-demo{width:min(600px,100%);justify-self:center}.step-grid,.mode-guide-grid{grid-template-columns:repeat(2,1fr)}.mechanic-grid{grid-template-columns:repeat(2,1fr)}.advanced-grid{grid-template-columns:1fr}.ping-guide{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px) { .guide-topbar{grid-template-columns:1fr auto}.guide-label{display:none}.guide-main{width:min(100% - 24px,1220px)}.guide-topbar,.guide-footer{width:calc(100% - 24px)}.guide-back{padding:9px 10px;font-size:.62rem}.guide-hero{min-height:auto;padding:70px 0}.guide-hero-copy h1{font-size:clamp(4.4rem,22vw,7rem)}.guide-demo{box-shadow:10px 10px 0 #0d0e10;padding:14px}.demo-fighters{height:215px}.mini-fighter{transform:scale(.78)}.red-fighter{transform:scaleX(-1) scale(.78)}.guide-nav{margin:0 -12px}.guide-section{padding-top:85px}.section-heading h2{font-size:3.7rem}.step-grid,.control-grid,.mechanic-grid,.mode-guide-grid,.ping-guide{grid-template-columns:1fr}.step-grid article{min-height:230px}.control-grid article{grid-template-columns:85px 1fr;padding:18px}.guide-rule,.all-in-intro,.ability-body{grid-template-columns:1fr}.all-in-intro>div{grid-template-columns:1fr}.ability-card summary{grid-template-columns:34px 1fr 28px;gap:12px;padding:18px 14px}.ability-card summary code{grid-column:2/4;grid-row:2}.ability-card summary i{grid-column:3;grid-row:1}.ability-body{gap:18px;padding:20px 20px 25px}.ability-body dl{grid-template-columns:1fr}.clash-panel{padding:20px}.clash-sides{height:150px}.clash-sides b{font-size:1.8rem}.match-format{grid-template-columns:1fr;text-align:center}.match-format>div:last-child{text-align:center}.guide-finish{margin-top:90px}.guide-footer p{display:none} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.guide-body *{animation-duration:.01ms!important;animation-iteration-count:1!important} }