:root { color-scheme:dark; --bg:#0b0b10; --panel:#14141c; --ink:#f4f3f7; --muted:#9693a1; --quiet:#777482; --line:#292833; --purple:#a58bff; --purple-soft:#d4c7ff; --lime:#a8f05f; --mono:"DM Mono",monospace; --sans:"Space Grotesk",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; overflow-x:hidden; background:radial-gradient(ellipse at 78% 22%,#3826533b,transparent 34rem),radial-gradient(ellipse at 12% 76%,#1d23301c,transparent 28rem),var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body::before { position:fixed; z-index:-1; inset:0; background-image:radial-gradient(#d8caff60 .7px,transparent .9px); background-size:43px 43px; content:""; opacity:.15; pointer-events:none; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
main { display:flex; flex-direction:column; }
.wrap { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:5; height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff19; background:#0b0b10d9; backdrop-filter:blur(18px); }
.wordmark { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.08em; }
.brand-name { display:block; }.brand-name small { display:block; padding-top:4px; color:var(--quiet); font:7px var(--mono); letter-spacing:.15em; }
.mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--purple); background:linear-gradient(145deg,#a58bff25,#a58bff08); box-shadow:inset 0 0 13px #a58bff15,0 0 20px #a58bff17; color:var(--purple); font-size:16px; transform:skew(-7deg); }
.brand-dot { color:var(--purple); margin-left:-4px; }
nav { display:flex; align-items:center; gap:30px; color:#c0bec9; font:9px var(--mono); letter-spacing:.08em; }
nav a { transition:color .2s; } nav a:hover { color:var(--purple); }
.nav-live { display:flex; align-items:center; gap:9px; border:1px solid #75619c; background:linear-gradient(110deg,#a58bff19,#a58bff08); padding:11px 14px; color:#eee8ff; transition:background .2s,border-color .2s; }
.nav-live:hover { border-color:var(--purple); background:#a58bff2b; }
.nav-live-icon { color:var(--purple); font-size:8px; }
.discord-nav-link { display:flex; align-items:center; gap:8px; border:1px solid #4b3f60; background:#a58bff0c; padding:10px 12px; color:#d9d0ef; transition:background .2s,border-color .2s; }
.discord-nav-link:hover { border-color:#a58bff; background:#a58bff20; color:#fff; }
.discord-nav-link span { color:var(--purple); }
i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px #a8f05f80; }
.hero { position:relative; display:grid; width:100%; max-width:none; min-height:620px; grid-template-columns:1fr; align-items:center; gap:6vw; margin:0; padding:74px max(calc((100vw - 1120px)/2),32px) 82px; overflow:hidden; background:radial-gradient(ellipse at 75% 46%,#21183080,transparent 48%),var(--bg); }
.hero { order:0; }
.hero::before { position:absolute; top:-145px; right:17%; width:450px; height:450px; border:1px solid #a58bff12; border-radius:50%; box-shadow:0 0 0 38px #a58bff06,0 0 0 76px #a58bff04; content:""; }
.hero-copy { position:relative; z-index:1; max-width:560px; margin-inline:auto; text-align:center; }
.eyebrow,.section-kicker,.microcopy,.chip,.visual-index,.side-index,.player-state,.player-tab,.player-footnote,.status-strip,.back-top { font-family:var(--mono); letter-spacing:.1em; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:8px; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin:30px 0 24px; font-size:clamp(68px,8.8vw,116px); line-height:.83; letter-spacing:-.085em; font-weight:700; }
.outline { color:transparent; -webkit-text-stroke:1px #9791a3; }
.accent { color:var(--purple); }
.intro { max-width:390px; margin:0 auto 27px; color:var(--muted); font-size:14px; line-height:1.8; }
.primary-button { display:inline-flex; min-width:250px; align-items:center; justify-content:space-between; border:1px solid #9076c8; background:linear-gradient(110deg,#a58bff29,#a58bff0c); padding:15px 17px; color:#f2edff; font:9px var(--mono); letter-spacing:.08em; box-shadow:0 10px 35px #a58bff12; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s; }
.primary-button:hover { transform:translateY(-2px); border-color:var(--purple); background:#a58bff35; box-shadow:0 12px 38px #a58bff24; }
.primary-button span { color:var(--purple); font-size:15px; }
.microcopy { margin:17px 0 0; color:var(--quiet); font-size:7px; }
.hero-visual { position:relative; display:grid; min-height:420px; place-items:center; overflow:hidden; border:1px solid #55456e; background:radial-gradient(ellipse at 50% 47%,#332549 0,#191520 48%,#0e0d13 80%); box-shadow:0 25px 70px #0006,0 0 50px #a58bff0b; }
.hero-visual::after { position:absolute; inset:0; background:linear-gradient(120deg,transparent 35%,#d4c7ff0a 50%,transparent 65%); content:""; pointer-events:none; }
.visual-grid { position:absolute; inset:0; opacity:.28; background-image:linear-gradient(#8373a626 1px,transparent 1px),linear-gradient(90deg,#8373a626 1px,transparent 1px); background-size:30px 30px; transform:perspective(300px) rotateX(13deg) scale(1.15); transform-origin:center; }
.ring { position:absolute; left:50%; top:49%; width:270px; aspect-ratio:1; border:1px solid #aa92e86e; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 45px #a58bff16,inset 0 0 35px #a58bff0d; }
.ring::before { position:absolute; inset:18px; border:1px dashed #c2afff65; border-radius:inherit; content:""; animation:orbit-spin 38s linear infinite; }
.ring-two { width:190px; border-color:#a8f05f75; transform:translate(-50%,-50%) rotateX(62deg) rotate(-24deg); }
.ring-two::before { inset:23px; border-color:#a8f05f61; }
.visual-core { position:relative; z-index:1; display:grid; width:112px; aspect-ratio:1; place-items:center; border:1px solid #d0c2ffb5; background:linear-gradient(145deg,#a58bff44,#191520); box-shadow:0 0 55px #a58bff48,inset 0 0 30px #a58bff20; color:#f5f1ff; font-size:62px; font-weight:700; transform:rotate(45deg); animation:core-pulse 5s ease-in-out infinite; }
.visual-core span { transform:rotate(-45deg); }
.visual-core i { position:absolute; right:0; bottom:14px; width:8px; height:8px; border:2px solid #17141e; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); }
.visual-tag { position:absolute; z-index:2; top:48%; left:50%; color:#d7caff; font:8px/1.65 var(--mono); letter-spacing:.12em; text-align:center; transform:translate(-50%,-50%); }
.chip { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; border:1px solid #51485d; background:#121017e8; padding:9px 11px; color:#cbc5d5; font-size:7px; }
.chip-one { top:16%; left:9%; }.chip-two { right:9%; bottom:16%; color:#b8b3c0; }.chip-two b { color:var(--purple); font-size:12px; }
.visual-index { position:absolute; top:18px; right:19px; color:#797486; font-size:7px; }
.side-index { position:absolute; right:6px; bottom:43px; color:#777180; font-size:7px; writing-mode:vertical-rl; }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes core-pulse { 50% { box-shadow:0 0 72px #a58bff63,inset 0 0 35px #a58bff30; } }
.section { border-top:1px solid var(--line); padding-block:92px; }
.watch { background:linear-gradient(180deg,#111117,#0b0b10); }
.about { order:1; }.watch { order:2; }.fortnite-stats { order:3; }
.fortnite-stats { background:radial-gradient(ellipse at 82% 35%,#253a2226,transparent 32rem),#0d0e12; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:35px; }
.section-kicker { margin-bottom:14px; color:var(--purple); font-size:8px; }
h2 { margin-bottom:0; font-size:clamp(39px,5vw,60px); line-height:.98; letter-spacing:-.07em; }
.section-note { margin:0 0 4px; color:var(--muted); font-size:12px; line-height:1.8; }
.broadcast-shell { max-width:1010px; margin-inline:auto; border:1px solid #51475f; background:linear-gradient(145deg,#17151d,#0d0d12 48%); padding:13px; box-shadow:0 24px 80px #0008,0 0 60px #a58bff0d; }
.player-toolbar { display:flex; min-height:58px; align-items:center; justify-content:space-between; gap:16px; padding:0 7px 11px; }
.player-state { display:flex; align-items:center; gap:10px; }
.player-mark { display:grid; width:31px; height:31px; place-items:center; border:1px solid #655585; background:#a58bff14; color:var(--purple); font-size:13px; font-weight:700; }
.player-state b,.player-state small { display:block; }.player-state b { margin-bottom:4px; color:#e9e5f1; font-size:8px; }.player-state small { color:var(--quiet); font-size:7px; }
.player-tabs { display:flex; gap:6px; }
.player-tab { min-width:78px; border:1px solid #35313e; background:#15141a; padding:10px 13px; color:#a29dab; cursor:pointer; font-size:8px; transition:.2s; }
.player-tab:hover,.player-tab.selected { border-color:#aa90e5; background:linear-gradient(110deg,#a58bff31,#a58bff14); color:#f0eaff; box-shadow:inset 0 0 18px #a58bff10; }
.player-frame { width:100%; min-height:300px; aspect-ratio:16/9; overflow:hidden; border:1px solid #302d38; background:#050507; }
.player-frame iframe { display:block; width:100%; height:100%; min-width:400px; min-height:300px; border:0; }.player-frame iframe[hidden] { display:none; }
.player-fallback { display:flex; min-height:300px; height:100%; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }.player-fallback[hidden] { display:none; }
.player-fallback p { max-width:430px; margin:6px 0; color:var(--muted); font-size:13px; line-height:1.7; }.player-fallback .fallback-title { color:var(--ink); font-size:16px; font-weight:600; }
.player-fallback a { margin-top:13px; border:1px solid #7962ae; background:#a58bff16; padding:12px 16px; color:#e6dcff; font:8px var(--mono); }
.player-footnote { display:flex; justify-content:space-between; gap:12px; padding:12px 6px 1px; color:var(--quiet); font-size:7px; }.player-footnote a { color:var(--purple-soft); }.player-footnote a:hover { color:var(--lime); }
.fortnite-panel { max-width:1010px; margin-inline:auto; border:1px solid #3b403a; background:linear-gradient(145deg,#171a17,#101116 65%); padding:clamp(20px,4vw,34px); box-shadow:0 24px 70px #0006; }
.personal-fortnite-stats { min-height:280px; }.fortnite-panel > .stats-search,.fortnite-panel > #fortnite-stats-message,.fortnite-panel > #fortnite-stats-results { display:none; }
.stats-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #30312f; padding-bottom:20px; }.stats-profile { display:flex; align-items:center; gap:12px; }.stats-player-icon { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border:1px solid #718d4c; background-color:#a8f05f14; background-position:center; background-size:cover; color:var(--lime); font-weight:700; }.stats-profile small { color:var(--quiet); font:7px var(--mono); letter-spacing:.1em; }.stats-profile h3 { margin:5px 0 0; font-size:20px; letter-spacing:-.04em; }.stats-tabs { display:flex; gap:7px; }.stats-tab { border:1px solid #3f4839; background:#111411; padding:11px 13px; color:#aeb0a7; cursor:pointer; font:8px var(--mono); letter-spacing:.08em; transition:.2s; }.stats-tab:hover,.stats-tab.selected { border-color:#83ab56; background:linear-gradient(115deg,#a8f05f24,#a8f05f0d); color:#edffdf; }.stats-tab:disabled { cursor:wait; opacity:.55; }
.personal-stats-results { margin-top:24px; }.personal-stats-results[hidden] { display:none; }.stats-period-line { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:13px; color:var(--quiet); font:7px var(--mono); letter-spacing:.12em; }.stats-period { color:var(--lime); }
.personal-fortnite-stats .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.personal-fortnite-stats .stat-card { position:relative; min-height:114px; overflow:hidden; background:linear-gradient(145deg,#191d18,#101310); }.personal-fortnite-stats .stat-card::after { position:absolute; right:-15px; bottom:-45px; width:100px; height:100px; border:1px solid #a8f05f12; border-radius:50%; content:""; }.personal-fortnite-stats .stat-card.featured { border-color:#668147; background:linear-gradient(145deg,#25301e,#12170f); }.personal-fortnite-stats .stat-card.featured strong { color:#dffff0; }
.stats-search { max-width:620px; margin:0 auto; }.stats-search label { display:block; margin-bottom:10px; color:var(--lime); font:8px var(--mono); letter-spacing:.13em; }
.stats-search-row { display:flex; gap:9px; }.stats-search input { min-width:0; flex:1; border:1px solid #41413d; background:#0e0f12; padding:14px 15px; color:var(--ink); font:12px var(--sans); outline:none; }.stats-search input:focus { border-color:var(--lime); box-shadow:0 0 0 3px #a8f05f18; }.stats-search input::placeholder { color:#6d6d73; }
.stats-search button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #718d4c; background:linear-gradient(110deg,#a8f05f20,#a8f05f08); padding:12px 15px; color:#e9ffd9; cursor:pointer; font:8px var(--mono); letter-spacing:.06em; transition:background .2s,border-color .2s; }.stats-search button:hover { border-color:var(--lime); background:#a8f05f27; }.stats-search button:disabled { opacity:.55; cursor:wait; }.stats-search button span { color:var(--lime); }
.stats-message { margin:20px auto 0; color:var(--quiet); font:9px var(--mono); line-height:1.7; text-align:center; }.stats-message.error { color:#ff9a9a; }
.stats-results { margin-top:31px; }.stats-results[hidden] { display:none; }.stats-player-heading { display:flex; align-items:center; gap:12px; border-bottom:1px solid #30312f; padding-bottom:18px; }.stats-player-icon { display:grid; width:40px; height:40px; place-items:center; border:1px solid #708749; background:#a8f05f14; color:var(--lime); font-weight:700; }.stats-player-heading small { color:var(--quiet); font:7px var(--mono); letter-spacing:.1em; }.stats-player-heading h3 { margin:4px 0 0; font-size:18px; }.stats-period { margin-left:auto; color:var(--lime); font:8px var(--mono); letter-spacing:.1em; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:17px; }.stat-card { min-height:94px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #30312f; background:linear-gradient(145deg,#191b19,#121317); padding:15px; }.stat-card span { color:var(--quiet); font:7px var(--mono); letter-spacing:.12em; }.stat-card strong { color:#f4f5f1; font-size:clamp(20px,3vw,29px); line-height:1; letter-spacing:-.04em; }
.about { position:relative; padding-block:96px 76px; background:radial-gradient(ellipse at 82% 50%,#34224840,transparent 36rem); }
.about-heading { display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:10%; margin-bottom:54px; }
.about-heading h2 { line-height:1.08; }.about-text { position:relative; width:100%; max-width:460px; padding:29px 30px 26px; border:1px solid #393542; background:linear-gradient(145deg,#191720eb,#111116eb); box-shadow:0 18px 50px #0004,inset 0 1px #ffffff08; color:#aaa6b4; font-size:13px; line-height:1.8; }.about-text::before { position:absolute; top:-1px; left:25px; width:64px; height:2px; background:linear-gradient(90deg,var(--lime),var(--purple)); content:""; }.about-kicker { display:flex; align-items:center; gap:9px; margin-bottom:20px; color:var(--purple-soft); font:8px var(--mono); letter-spacing:.12em; }.about-text p { margin-bottom:15px; }.about-text strong { color:var(--ink); font-weight:600; }
.status-strip { display:flex; align-items:center; gap:11px; border-block:1px solid var(--line); padding:15px 0; color:#9995a2; font-size:7px; }.status-strip i { width:6px; height:6px; border-radius:50%; background:var(--lime); }.strip-right { margin-left:auto; }.strip-right b { color:var(--purple); }
.site-footer { display:flex; min-height:82px; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); }.site-footer p { margin:0; color:var(--quiet); font-size:10px; }.back-top { color:#aaa5b4; font-size:7px; }.back-top:hover { color:var(--purple); }
:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
@media(max-width:820px) {
  .wrap { width:min(100% - 44px,650px); }
  .hero { min-height:0; grid-template-columns:1fr; gap:36px; padding:60px 32px 68px; }.hero h1 { font-size:clamp(68px,14vw,100px); }.hero-visual { min-height:335px; }.side-index { display:none; }
  .section { padding-block:72px; }.section-heading { align-items:flex-start; flex-direction:column; gap:18px; }.about-heading { grid-template-columns:1fr; gap:25px; margin-bottom:38px; }.about-text { max-width:100%; padding:25px 22px; }
}
@media(max-width:520px) {
  .wrap { width:calc(100% - 36px); }.site-header { height:72px; }.wordmark { font-size:10px; }.mark { width:29px; height:29px; }
  .site-header { height:auto; min-height:72px; flex-wrap:wrap; gap:10px; padding-block:12px; }nav { width:100%; justify-content:space-between; gap:8px; font-size:6px; }nav>a:first-child,nav>a[href="#about"] { display:none; }.nav-live { padding:9px 8px; }.discord-nav-link { gap:4px; padding:9px 8px; }
  .hero { gap:29px; padding:52px 20px 57px; }.hero h1 { font-size:clamp(57px,14vw,76px); }.intro { font-size:13px; }.hero-visual { min-height:270px; }
  .ring { width:220px; }.ring-two { width:155px; }.visual-core { width:89px; font-size:50px; }.chip { font-size:6px; padding:8px; }.chip-one { top:13px; left:12px; }.chip-two { right:12px; bottom:12px; }.visual-index { top:13px; right:12px; }
  .section { padding-block:61px; }h2 { font-size:clamp(37px,11vw,52px); }.section-note { font-size:11px; }
  .player-toolbar { align-items:flex-start; flex-direction:column; gap:11px; padding:3px 3px 11px; }.player-tabs { width:100%; }.player-tab { flex:1; }.player-frame { min-height:300px; }.player-frame iframe { min-height:300px; }.player-footnote { font-size:6px; }
  .status-strip { flex-wrap:wrap; line-height:1.7; }.strip-right { width:100%; margin:3px 0 0 17px; }.site-footer { min-height:0; flex-wrap:wrap; padding-block:19px; }.site-footer p { order:3; width:100%; }
  .stats-toolbar { align-items:flex-start; flex-direction:column; }.stats-tabs { width:100%; }.stats-tab { flex:1; padding-inline:8px; }.personal-fortnite-stats .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.personal-fortnite-stats .stat-card { min-height:94px; }.stats-period-line { align-items:flex-start; flex-direction:column; gap:6px; }
  .stats-search-row { flex-direction:column; }.stats-search button { justify-content:center; }.stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.stat-card { min-height:82px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }
