@property --phantom-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{color-scheme:dark;--purple:#8f35ea;--purple2:#c280ff;--text:#f7f3fa;--line:rgba(194,128,255,.25)}
*{box-sizing:border-box}html{min-height:100%;background:#060408}
body{min-height:100vh;margin:0;padding:22px;display:grid;place-items:center;color:var(--text);font-family:Inter,Arial,sans-serif;background:linear-gradient(90deg,rgba(6,4,9,.76),rgba(6,4,9,.45) 55%,rgba(6,4,9,.66)),linear-gradient(0deg,rgba(6,4,9,.78),transparent 45%),url('/assets/hero/phantom-ghost-summoning-poster-v2.jpg') 72% center/cover fixed no-repeat}
body:before{content:"";position:fixed;inset:-15%;z-index:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.8) 0 1.2px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.55) 0 .8px,transparent 1.4px);background-size:170px 190px,260px 230px,120px 150px;background-position:12px 30px,80px 110px,45px 75px;animation:phantom-dust 24s linear infinite}
.phantom-gateway{position:relative;isolation:isolate;width:min(100%,960px);padding:32px 40px 25px;border:1px solid transparent;border-radius:14px;background:linear-gradient(145deg,rgba(13,8,18,.93),rgba(7,5,10,.96)) padding-box;box-shadow:0 24px 70px rgba(0,0,0,.62);backdrop-filter:blur(14px);overflow:visible}
.phantom-gateway:before,.phantom-gateway:after{content:"";position:absolute;pointer-events:none;border-radius:inherit;background:conic-gradient(from var(--phantom-angle),transparent 0deg,transparent 285deg,rgba(126,40,232,.06) 300deg,#7731dd 316deg,#c280ff 332deg,#5b22bd 346deg,transparent 360deg);animation:phantom-spin 7s linear infinite}
.phantom-gateway:before{z-index:-1;inset:-1px;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.phantom-gateway:after{z-index:-2;inset:-4px;opacity:.42;filter:blur(9px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:4px}
@keyframes phantom-spin{to{--phantom-angle:360deg}}
@keyframes phantom-dust{to{transform:translate3d(70px,-90px,0)}}
.identity{display:grid;justify-items:center;text-align:center;padding-bottom:18px;border-bottom:1px solid rgba(194,128,255,.14)}
.brand-logo{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(80,28,112,.55),rgba(12,7,17,.92) 70%);box-shadow:0 0 0 1px rgba(194,128,255,.28),0 0 25px rgba(126,46,195,.2)}
.brand-logo img{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(142,53,234,.24))}
.identity-copy{min-width:0;margin-top:10px}.eyebrow{margin:0 0 5px;color:var(--purple2);font:700 8px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}.eyebrow i{display:none}
h1{margin:0;font:800 32px/.9 'Barlow Condensed',sans-serif;letter-spacing:.015em}.handle{margin:7px 0 0;color:var(--purple2);font:700 8px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}.intro{max-width:560px;margin:8px auto 0;color:#b6adbb;font-size:9px;line-height:1.5}blockquote{margin:12px 0 0;padding:9px 16px;border:0;border-top:1px solid rgba(194,128,255,.18);color:#d3cad8;font:600 13px/1.35 'Barlow Condensed',sans-serif}
.portal{padding:17px 0 12px}.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.portal-link{position:relative;min-height:108px;padding:15px;display:grid;grid-template-columns:1fr auto;grid-template-rows:30px auto;align-items:center;gap:6px 10px;overflow:hidden;border:1px solid var(--line);border-radius:9px;color:#fff;text-decoration:none;background:linear-gradient(145deg,rgba(30,17,41,.92),rgba(15,10,20,.94));transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.portal-link:before{content:"";position:absolute;left:0;inset-block:0;width:2px;background:#6e2da9}.portal-link.discord{background:radial-gradient(circle at 85% 10%,rgba(153,55,222,.22),transparent 42%),linear-gradient(145deg,rgba(50,22,68,.94),rgba(20,11,28,.96))}.portal-link.discord:before{background:var(--purple2)}
.portal-number{display:none}.portal-link>img,.portal-link>svg{grid-column:1;grid-row:1;width:27px;height:27px;filter:brightness(0) invert(1)}.portal-link>svg{fill:none;stroke:#fff;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.portal-link>span:not(.portal-number){grid-column:1/-1;grid-row:2;display:grid;gap:3px}.portal-link strong{font:800 17px/1 'Barlow Condensed',sans-serif;letter-spacing:.035em;text-transform:uppercase}.portal-link small{color:#aaa0af;font-size:8px}.portal-link>b{grid-column:2;grid-row:1;color:#cfa4fa;font-size:14px}.portal-link em{position:absolute;right:10px;bottom:10px;padding:4px 6px;border:1px solid rgba(142,53,234,.38);border-radius:12px;color:#c99aff;background:rgba(120,40,232,.08);font:700 7px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}.portal-link:hover,.portal-link:focus-visible{outline:0;transform:translateY(-3px);border-color:var(--purple2);background:#261431;box-shadow:0 10px 24px rgba(0,0,0,.24),0 0 18px rgba(119,39,183,.14)}
.socials{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:1px}.socials a{min-height:42px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(194,128,255,.15);border-radius:7px;color:#d4ccd8;text-decoration:none;background:rgba(17,11,22,.74);transition:border-color .2s,background .2s}.socials img{width:16px;height:16px;filter:brightness(0) invert(1);opacity:.82}.socials span{font:700 9px/1 'Barlow Condensed',sans-serif;letter-spacing:.055em;text-transform:uppercase}.socials a:hover,.socials a:focus-visible{outline:0;border-color:var(--purple2);background:#24122c;color:#fff}
footer{padding-top:10px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid rgba(194,128,255,.12);color:#6f6675;font-size:6px;letter-spacing:.11em;text-transform:uppercase}footer p{margin:0;color:#938899}footer a{justify-self:end;color:#817587;text-decoration:none}footer a:hover{color:#d7b4ff}
@media(max-width:650px){body{padding:12px;background-position:72% center}.phantom-gateway{padding:21px 18px 15px}.brand-logo{width:64px;height:64px}.brand-logo img{width:58px;height:58px}.link-grid{grid-template-columns:1fr}.portal-link{min-height:66px;grid-template-columns:28px 1fr auto;grid-template-rows:auto;padding:10px 12px}.portal-link>img,.portal-link>svg{grid-column:1;grid-row:1;width:22px;height:22px}.portal-link>span:not(.portal-number){grid-column:2;grid-row:1}.portal-link>b{grid-column:3;grid-row:1}.portal-link em{right:40px;bottom:auto;top:50%;transform:translateY(-50%)}.socials{grid-column:auto;grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr auto}footer p{display:none}}
@media(max-width:380px){body{padding:0}.phantom-gateway{min-height:100vh;border:0;border-radius:0}.identity{padding-bottom:14px}.portal{padding-top:13px}.socials a{min-height:39px}}
@media(max-height:680px) and (min-width:651px){body{padding:8px}.phantom-gateway{padding-block:18px 11px}.identity{padding-bottom:13px}.brand-logo{width:66px;height:66px}.brand-logo img{width:60px;height:60px}.portal{padding-block:11px 8px}.portal-link{min-height:104px}.socials a{min-height:36px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.phantom-gateway:before,.phantom-gateway:after,body:before{animation:none}}