/* Cinematic opening. All decorative layers leave the logo button accessible. */
header{height:82px;background:#09090bed;border-bottom:1px solid #ffffff10;backdrop-filter:blur(16px)}
header .brand{letter-spacing:-.04em;font-size:24px;gap:8px}header .brand img{width:48px;height:48px;margin:0}
header nav a{position:relative;font-size:13px;font-weight:600;letter-spacing:.025em;padding-block:12px}
header nav a::after{content:'';position:absolute;bottom:3px;left:0;right:0;height:2px;background:#fa293e;transform:scaleX(0);transform-origin:left;transition:transform .3s}
header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1)}
.hero.hero-arena.hero-epic{isolation:isolate;display:flex;align-items:center;min-height:740px;height:calc(100svh - 82px);max-height:1100px;padding:66px 7% 45px;background:radial-gradient(ellipse at 51% 45%,#300a1370,transparent 43%),linear-gradient(180deg,#09090b,#09090d 65%,#13090e);border-bottom:1px solid #fb293932}
.hero-epic::after{content:'';position:absolute;inset:24px 65px;pointer-events:none;border-top:1px solid #ffffff0b;border-bottom:1px solid #ffffff0b;z-index:0}
.hero-epic .arena-content{position:relative;z-index:2;width:100%;max-width:1600px;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);column-gap:22px;margin:auto;row-gap:0}
.hero-epic .arena-emblem{max-width:590px;isolation:isolate;z-index:2}
.hero-epic .arena-logo-float{width:102%;height:102%;border-radius:28px}
.hero-epic .arena-glitch>.arena-logo{filter:drop-shadow(0 22px 16px #0008) drop-shadow(0 0 24px #ff29384d)}
.hero-epic .arena-glitch-stage::before{inset:-15%;background:radial-gradient(ellipse,#ff243940,transparent 66%);filter:blur(30px);animation:crab-energy-breathe 7s ease-in-out infinite alternate}
.hero-epic .arena-energy{inset:-18%;opacity:.65}
.hero-epic h1{justify-self:start;text-align:left;font-size:clamp(78px,8.3vw,154px);line-height:.83;letter-spacing:-.045em;text-shadow:0 12px 45px #0008;z-index:3}
.hero-epic h1 em{display:inline-block;margin-top:13px;color:#ff2a40;text-shadow:0 0 45px #f6223033}
.hero-epic h1>span{position:static;display:block;margin-top:29px;font:500 10px/1.5 Consolas,monospace;letter-spacing:.3em;color:#a9a6af}
.hero-epic h1::after{content:'';display:block;width:63px;height:4px;background:linear-gradient(90deg,#ff293e,#ff293e00);margin-top:25px;transform:skewX(-25deg)}
.hero-epic .arena-tagline{z-index:3;text-align:left;padding-left:8px}
.hero-epic .arena-tagline strong{font-size:clamp(36px,4.65vw,86px);line-height:1;letter-spacing:-.025em;white-space:normal}
.hero-epic .arena-tagline strong small{display:block;color:#f6f3f2;font:800 .69em/1.1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.015em;margin-bottom:13px}
.hero-epic .arena-tagline strong>span{display:block;white-space:nowrap;color:#161015;-webkit-text-stroke:1px #f4dce1;text-shadow:0 0 28px #ff293922;transition:color .5s,text-shadow .5s}
.hero-epic .arena-tagline::after{content:'';display:block;margin-top:25px;width:100%;height:1px;background:linear-gradient(90deg,#ff2a4066,transparent)}
.epic-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.epic-wordmark{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font:800 clamp(250px,38vw,720px)/.8 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px #ffffff09;user-select:none;white-space:nowrap}
.epic-slice{position:absolute;top:-25%;height:150%;width:14%;background:linear-gradient(90deg,transparent,#fb293914);border-right:1px solid #ff344330;transform:skewX(-25deg);mask-image:linear-gradient(transparent,#000 25%,#000 65%,transparent);animation:epic-light-drift 12s ease-in-out infinite alternate}
.epic-slice-one{left:32%}.epic-slice-two{left:53%;width:7%;opacity:.65;animation-delay:-6s;animation-duration:15s}
.epic-horizon{position:absolute;bottom:16%;left:13%;width:74%;height:1px;background:linear-gradient(90deg,transparent,#ff33474d 40%,#ff516a99 50%,#ff33474d 60%,transparent);box-shadow:0 10px 70px 10px #ff17331a;transform:perspective(600px) rotateX(50deg)}
.hero-epic .arena-grid{z-index:0;opacity:.45;background-size:92px 92px;mask-image:radial-gradient(ellipse at 50% 75%,#000,transparent 70%)}
.hero-epic .arena-glow{z-index:0;width:850px;max-width:100%;background:radial-gradient(ellipse,#d9223430,transparent 65%)}
.epic-embers{position:absolute;inset:0}.epic-embers i{position:absolute;left:28%;bottom:23%;width:3px;height:3px;border-radius:1px;background:#ff4b5e;box-shadow:0 0 9px #ff2b45;animation:epic-ember-rise 9s linear infinite;opacity:0}
.epic-embers i:nth-child(2){left:42%;bottom:17%;animation-delay:-3s;animation-duration:11s}.epic-embers i:nth-child(3){left:65%;bottom:22%;animation-delay:-6s}.epic-embers i:nth-child(4){left:71%;bottom:30%;animation-delay:-2s;animation-duration:13s}.epic-embers i:nth-child(5){left:36%;bottom:30%;animation-delay:-7s;width:2px;height:2px}.epic-embers i:nth-child(6){left:57%;bottom:20%;animation-delay:-5s;animation-duration:12s}
.epic-signature{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:28px;margin-top:28px;animation:arena-enter 1.1s .3s both}
.hero-epic .arena-caption{font-size:14px;line-height:1.8;margin:0;color:#8b858f;letter-spacing:.02em}
.hero-epic .arena-caption strong{display:block;color:#e8e3e5;font-size:11px;font-weight:600;letter-spacing:.25em;margin-top:3px}
.epic-signature-line{width:70px;height:1px;background:linear-gradient(90deg,transparent,#f6384d80)}.epic-signature-line:last-child{transform:rotate(180deg)}
.hero-epic .arena-scroll{margin-top:26px;width:19px;height:31px;border-color:#ffffff30}
.hero-epic .arena-rail{width:24px;border-color:#ffffff09;background:#ffffff02;opacity:.7}.hero-epic .arena-rail-left{left:17px}.hero-epic .arena-rail-right{right:17px}.hero-epic .rail-word{font-size:14px;letter-spacing:.16em}.hero-epic .arena-rail i{font-size:12px;color:#ff3d51}
@keyframes epic-light-drift{from{translate:-20px 0;opacity:.4}to{translate:25px 0;opacity:1}}
@keyframes epic-ember-rise{0%{translate:0 0;opacity:0}20%{opacity:.7}75%{opacity:.3}100%{translate:35px -240px;opacity:0}}
@media(hover:hover) and (pointer:fine){.hero-epic .arena-tagline:hover strong>span{color:#f4e6e9;text-shadow:0 0 30px #ff29394d}.hero-epic .arena-glitch-stage:hover .arena-logo,.hero-epic .arena-glitch-stage:hover .glitch-echo{transform:translateX(4%) scale(1.055)}}
@media(min-width:701px) and (max-height:800px){.hero.hero-epic{min-height:600px;padding-block:44px 28px}.hero-epic .arena-emblem{max-width:440px}.epic-signature{margin-top:10px}.hero-epic .arena-scroll{margin-top:16px}}
@media(max-width:1100px){.hero.hero-epic{padding-inline:7%;min-height:650px}.hero-epic .arena-content{column-gap:12px;grid-template-columns:1fr 1.5fr 1fr}.hero-epic h1{font-size:clamp(60px,8vw,90px)}.hero-epic .arena-tagline strong{font-size:4.6vw}.hero-epic h1>span{font-size:8px;letter-spacing:.18em}.hero-epic .arena-tagline{padding-left:0}}
@media(max-width:700px){
 header{height:70px}header .brand{font-size:21px}header .brand img{width:39px;height:39px}
 .hero.hero-arena.hero-epic{height:auto;min-height:690px;max-height:none;padding:44px 30px 34px}
 .hero-epic::after{inset:16px 22px}
 .hero-epic .arena-content{grid-template-columns:1fr 1fr;column-gap:18px;row-gap:0;max-width:490px}
 .hero-epic h1{grid-column:1;grid-row:1;text-align:left;font-size:clamp(49px,13vw,84px);line-height:.85;align-self:center}
 .hero-epic h1 em{margin-top:7px}.hero-epic h1>span{font-size:7px;margin-top:17px;letter-spacing:.15em}.hero-epic h1::after{display:none}
 .hero-epic .arena-tagline{grid-column:2;grid-row:1;text-align:right;align-self:center}.hero-epic .arena-tagline strong{font-size:clamp(25px,6.1vw,42px);line-height:1.08}.hero-epic .arena-tagline strong small{margin-bottom:8px;font-size:.78em}.hero-epic .arena-tagline strong>span{-webkit-text-stroke:.7px #f4dce1}.hero-epic .arena-tagline::after{margin-top:18px}
 .hero-epic .arena-emblem{grid-column:1/-1;grid-row:2;width:min(100%,370px);margin:4px auto 0}.hero-epic .arena-logo-float{width:98%;height:98%}
 .epic-signature{margin-top:6px;gap:14px}.epic-signature-line{width:28px}.hero-epic .arena-caption{font-size:12px}.hero-epic .arena-caption strong{font-size:9px;letter-spacing:.16em}.hero-epic .arena-scroll{margin-top:20px}
 .hero-epic .arena-rail{width:12px}.hero-epic .arena-rail-left{left:4px}.hero-epic .arena-rail-right{right:4px}.hero-epic .rail-word{font-size:9px}.hero-epic .arena-rail i{font-size:9px}
 .epic-wordmark{font-size:80vw;top:53%}.epic-horizon{bottom:20%;left:7%;width:86%}.epic-slice-one{left:24%;width:25%}.epic-slice-two{left:64%}
}
@media(prefers-reduced-motion:reduce){.hero-epic *,.hero-epic *::before,.hero-epic *::after{animation:none!important;transition:none!important}.hero-epic .arena-glitch-stage:hover .arena-logo{transform:translateX(4%)}.epic-embers{display:none}.hero-epic .arena-emblem,.hero-epic h1,.hero-epic .arena-tagline,.epic-signature{opacity:1;translate:none}}
.hero-epic.arena-paused *,.hero-epic.arena-paused *::before{animation-play-state:paused!important}
/* Navigation centered independently of the logo and Discord shortcut. */
@media(min-width:901px){
 header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:18px}
 header>.brand{justify-self:start}header>.discord-holo{justify-self:end}
 header>.menu{display:none}
}
header nav{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:6px;border:1px solid #ffffff12;border-radius:18px;background:linear-gradient(145deg,#1c1b20b3,#101013e6);box-shadow:inset 0 1px #ffffff07,0 6px 25px #0003}
header nav a{isolation:isolate;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 20px;border:1px solid transparent;border-radius:12px;color:#b8b5bf;font-size:13px;font-weight:600;letter-spacing:.015em;white-space:nowrap;transition:scale .25s ease,translate .25s ease,color .25s,border-color .25s,background .25s,box-shadow .25s}
header nav a::after{content:'';position:absolute;inset:0;z-index:-1;width:auto;height:auto;background:linear-gradient(110deg,transparent 20%,#ffffff1c 48%,transparent 75%);transform:translateX(-150%) skewX(-18deg);transition:transform .6s ease;pointer-events:none}
header nav a[aria-current="location"]{color:#fff;border-color:#ff3d5050;background:linear-gradient(135deg,#60202c,#2a151e);box-shadow:inset 0 1px #ff74872b,0 0 16px #ff293913}
header nav a:focus-visible{outline:2px solid #ff586c;outline-offset:2px;color:white;background:#39202a}
@media(hover:hover) and (pointer:fine){
 header nav a:hover{scale:1.07;translate:0 -1px;color:#fff;border-color:#ff3d5066;background:linear-gradient(135deg,#4b1b27,#24151d);box-shadow:0 5px 18px #ff293921;z-index:2}
 header nav a:hover::after{transform:translateX(150%) skewX(-18deg)}
}
header nav a:active{scale:.96;translate:0 0}
@media(max-width:1100px) and (min-width:901px){header nav a{padding-inline:14px}}
@media(max-width:900px){
 header{display:flex;gap:18px;justify-content:space-between}
 header>.menu{display:block;margin-left:auto;padding:10px 13px;border:1px solid #ffffff20;border-radius:11px;background:#ffffff06;font-size:12px}
 header nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);margin:0;padding:10px;background:#111114fa;box-shadow:0 20px 40px #0007;gap:8px}
 header nav.open{display:grid;grid-template-columns:1fr 1fr;animation:nav-panel-enter .25s ease-out}
 header nav a{padding:12px 15px;min-height:46px;background:#ffffff04;border-color:#ffffff09;text-align:center}
}
@keyframes nav-panel-enter{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){header nav,header nav a,header nav a::after{animation:none!important;transition:none!important}header nav a:hover,header nav a:active{scale:none;translate:none}}