/* ItsAstrial — one theme for the whole site.
   Cartoon-chunky and lamp-lit rather than neon-cold: warm plum ground, thick
   borders, solid ledge shadows, and everything sitting slightly proud of the
   page like a sticker. One way to get anywhere: the menu. */

:root{
  /* evening, not midnight — a little red in the dark keeps it cosy */
  --bg:#120a20;--bg-2:#1a1030;--panel:#211538;--panel-2:#2b1b48;--line:#4a3070;
  --text:#fdf7ff;--muted:#c6b4de;--dim:#9a86ba;
  /* candy */
  --purple:#a95cff;--purple-soft:#d5aaff;--purple-deep:#6a24b7;
  --yellow:#ffd23f;--pink:#ff5fa2;--blue:#4cc9f0;--green:#8ef05a;--orange:#ff9f43;
  --ease:cubic-bezier(.22,1,.36,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --r:26px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);line-height:1.62;overflow-x:hidden;
  font-family:"Nunito",Inter,ui-rounded,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-weight:600;
}
/* warm blobs and a faint paper grain, all drawn in CSS — no image files */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(#ffffff0a 1.4px,transparent 1.5px) 0 0/24px 24px,
    radial-gradient(#ffffff07 1.4px,transparent 1.5px) 12px 12px/24px 24px,
    radial-gradient(48% 40% at 82% -6%,#8f3ce6 0,transparent 62%),
    radial-gradient(42% 36% at 6% 4%,#d4478f 0,transparent 60%),
    radial-gradient(54% 42% at 46% 104%,#3a2280 0,transparent 68%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(22% 18% at 24% 30%,#ffc45447 0,transparent 70%),
    radial-gradient(20% 16% at 76% 58%,#4cc9f03d 0,transparent 70%),
    radial-gradient(18% 15% at 52% 84%,#8ef05a33 0,transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}

a{color:inherit}
.shell{width:min(1160px,calc(100% - 32px));margin:auto}
.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---------- header: account + the one menu ---------- */
.topbar{position:sticky;top:0;z-index:40;border-bottom:3px solid #ffffff1a;background:#120a20d9;backdrop-filter:blur(16px)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.nav-right{display:flex;align-items:center;gap:10px;position:relative;margin-left:auto}

/* arcade buttons: they sit on a ledge and press into it */
.button{
  position:relative;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 22px;border:3px solid #ffffff26;border-radius:18px;background:var(--panel);
  color:var(--text);font:inherit;font-weight:900;font-size:.94rem;text-decoration:none;cursor:pointer;
  box-shadow:0 5px 0 #00000073;transition:transform .16s var(--pop),box-shadow .16s,background .2s,border-color .2s;
}
.button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #00000073;border-color:#ffffff4d;background:var(--panel-2)}
.button:active{transform:translateY(3px);box-shadow:0 1px 0 #00000073}
.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.button.primary{background:linear-gradient(160deg,#c07bff,#8b3fe0);border-color:#dcb6ff;box-shadow:0 5px 0 #4d1690,0 12px 26px #8b3fe047}
.button.primary:hover{box-shadow:0 7px 0 #4d1690,0 16px 32px #8b3fe063;animation:btnWobble .5s var(--pop)}
.button.primary:active{box-shadow:0 1px 0 #4d1690}
/* a small happy shrug when you point at the main action */
@keyframes btnWobble{
  0%{transform:translateY(-2px) rotate(0)}
  35%{transform:translateY(-3px) rotate(-1.8deg)}
  70%{transform:translateY(-2px) rotate(1.1deg)}
  100%{transform:translateY(-2px) rotate(0)}
}
.button.yellow{background:linear-gradient(160deg,#ffe071,#f5b400);border-color:#fff0b8;color:#3a2400;box-shadow:0 5px 0 #a97800,0 12px 26px #f5b40047}
.button.yellow:active{box-shadow:0 1px 0 #a97800}
.button.pink{background:linear-gradient(160deg,#ff86bb,#e63a86);border-color:#ffc2dc;color:#3d0722;box-shadow:0 5px 0 #a01a58}
.button.pink:active{box-shadow:0 1px 0 #a01a58}
.button.discord{background:linear-gradient(160deg,#8b93ff,#4a55d6);border-color:#b9beff;box-shadow:0 5px 0 #2f379e}
.button.discord:active{box-shadow:0 1px 0 #2f379e}
.button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:0 5px 0 #00000040;animation:none}

/* account chip */
.acct{
  display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 6px;border-radius:999px;
  border:3px solid #ffffff26;background:var(--panel);color:var(--text);font:inherit;font-weight:900;font-size:.86rem;
  text-decoration:none;cursor:pointer;box-shadow:0 4px 0 #00000066;
  transition:transform .16s var(--pop),box-shadow .16s,border-color .2s;
}
.acct:hover{transform:translateY(-2px);box-shadow:0 6px 0 #00000066;border-color:#ffffff4d}
.acct:active{transform:translateY(2px);box-shadow:0 1px 0 #00000066}
.acct .pip{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#ffd23f,#ff5fa2 55%,#a95cff);color:#220d33;font-size:.76rem;font-weight:900;
}
.acct.out .pip{background:#ffffff1f;color:var(--muted)}

/* hamburger — same purple slab as the in-game menu button */
.hamburger{
  width:52px;height:52px;display:grid;place-items:center;gap:5px;border-radius:16px;
  border:3px solid #b06bff;background:linear-gradient(180deg,#7b32c9,#4d1b8c);cursor:pointer;
  box-shadow:0 5px 0 #33105e;transition:transform .16s var(--pop),box-shadow .16s,filter .2s;
}
.hamburger:hover{transform:translateY(-2px);box-shadow:0 7px 0 #33105e;filter:brightness(1.14)}
.hamburger:active{transform:translateY(3px);box-shadow:0 1px 0 #33105e}
.hamburger i{display:block;width:20px;height:3px;border-radius:3px;background:#fff;transition:transform .3s var(--pop),opacity .2s}
.hamburger[aria-expanded=true] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded=true] i:nth-child(2){opacity:0}
.hamburger[aria-expanded=true] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* the one menu — every row is a filled purple slab, like in the games */
.menu{
  position:absolute;top:calc(100% + 14px);right:0;z-index:50;min-width:274px;padding:13px;
  border:3px solid #b06bff;border-radius:22px;background:#2f1450;
  box-shadow:0 7px 0 #33105e,0 28px 64px #000000b8;display:grid;gap:8px;
  transform-origin:top right;animation:menuPop .26s var(--pop);
}
@keyframes menuPop{from{opacity:0;transform:scale(.9) translateY(-8px)}to{opacity:1;transform:none}}
.menu a,.menu button{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  border:3px solid #a05fe8;background:linear-gradient(180deg,#5d2499,#431675);
  color:#fff;font:inherit;font-weight:800;font-size:.95rem;text-decoration:none;cursor:pointer;text-align:left;
  box-shadow:0 4px 0 #2b0d52;transition:transform .16s var(--pop),box-shadow .16s,filter .2s;
}
.menu a:hover,.menu button:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 6px 0 #2b0d52;filter:brightness(1.16)}
.menu a:active,.menu button:active{transform:translateY(2px);box-shadow:0 1px 0 #2b0d52}
.menu .ico{width:22px;text-align:center;font-size:1.05rem}
.menu hr{border:none;border-top:2px solid #ffffff26;margin:3px 2px}
.menu .sub{padding:6px 4px 0;color:#d3b4fa;font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--yellow);
  font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
h1,h2,h3{font-weight:900;letter-spacing:-.025em;line-height:1.06}
.grad{
  color:transparent;background:linear-gradient(100deg,#ffd23f,#ff5fa2 42%,#a95cff 78%);
  background-size:220% 100%;background-clip:text;-webkit-background-clip:text;
  animation:sweep 8s ease-in-out infinite alternate;
}
@keyframes sweep{from{background-position:0 0}to{background-position:100% 0}}
.lede{max-width:600px;margin:0;color:var(--muted);font-size:clamp(1.02rem,2vw,1.22rem);font-weight:600;line-height:1.6}
.section{padding:52px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.section-head h2{margin:6px 0 0;font-size:clamp(2rem,5vw,3.2rem)}
.section-head p{max-width:520px;margin:0;color:var(--muted)}

/* sticker cards — thick edge, solid ledge, sitting proud of the page */
.card{
  border:3px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),#180e2b);overflow:hidden;
  box-shadow:0 6px 0 #00000066,0 24px 48px #0000005c;
}
.tag{
  padding:7px 14px;border-radius:999px;background:#180e2b;border:2px solid var(--line);
  color:var(--muted);font-size:.74rem;font-weight:900;letter-spacing:.02em;
}
.tags{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- motion ---------- */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--pop)}
.js .rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}.rise.d2{transition-delay:.14s}.rise.d3{transition-delay:.21s}.rise.d4{transition-delay:.28s}

/* ---------- ads: a slot takes up no room until one actually fills ---------- */
.ad-slot{display:none;margin:30px auto 10px;max-width:970px}
.ad-slot.live{display:block}
.ad-slot::before{
  content:"Advertisement";display:block;margin-bottom:6px;
  color:var(--dim);font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- footer: no second navigation, just a sign-off ---------- */
footer{margin-top:46px;border-top:3px solid #ffffff1a;color:var(--dim)}
.footer-inner{min-height:84px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:.86rem;font-weight:700;padding:22px 0;text-align:center;flex-wrap:wrap}

/* ---------- confetti rain — the .rain overlay is created by site.js and filled with <i>s ---------- */
.rain{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.rain i{
  position:absolute;top:-24px;width:9px;height:15px;border-radius:2px;opacity:0;
  animation:confFall var(--fd,1.5s) cubic-bezier(.22,.8,.35,1) forwards;animation-delay:var(--dd,0s);
}
@keyframes confFall{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}
  100%{opacity:0;transform:translate3d(var(--dx,90px),108vh,0) rotate(var(--rr,540deg))}
}

/* the news ticker — the track holds two copies of the text so it loops seamless */
.ticker{overflow:hidden;border-top:3px solid #ffffff1a;border-bottom:3px solid #ffffff1a;background:#180e2b;position:relative;z-index:1}
.ticker .track{display:flex;width:max-content;padding:11px 0;animation:tickerMove 42s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{display:flex;align-items:center;gap:14px;padding:0 26px;white-space:nowrap;font-weight:800;font-size:.84rem;color:var(--muted)}
.ticker span b{color:var(--yellow);font-weight:900}
.ticker span i{font-style:normal;color:var(--dim)}
.ticker span .em{font-size:1rem}
@keyframes tickerMove{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* live players pill in the top bar */
.live-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  border:2px solid #8ef05a59;background:#8ef05a12;color:var(--green);text-decoration:none;
  font-size:.74rem;font-weight:900;letter-spacing:.04em;white-space:nowrap;
  transition:background .2s,border-color .2s,transform .16s var(--pop);
}
.live-pill:hover{background:#8ef05a22;border-color:#8ef05a;transform:translateY(-1px)}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* gun icons floating with the cartoon doodles */
.doodle img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 14px #00000059)}

.page-hero{padding:60px 0 6px}

@media(max-width:620px){
  .shell{width:min(100% - 22px,1160px)}
  .nav{min-height:66px}
  .section{padding:38px 0}
  .page-hero{padding:38px 0 4px}
  .menu{min-width:240px}
  .live-pill span{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
}