:root{
  --purple:#8b5cf6;
  --purple2:#6d28d9;
  --dark:#050507;
  --green:#4ade80;
  --red:#f87171;
  --pad:22px;
  --gap:18px;
}
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Aldrich',system-ui,sans-serif;
  min-height:100vh;
  min-height:100dvh;
  padding:var(--pad);
  color:#fff;
  background:
    linear-gradient(rgba(5,5,7,.80),rgba(5,5,7,.88)),
    url("background.webp") center/cover fixed,
    var(--dark);
}

/* ---------- Grids: each page fills exactly one screen on desktop ---------- */
.grid{
  max-width:1200px;
  margin:auto;
  height:calc(100vh - var(--pad)*2);
  height:calc(100dvh - var(--pad)*2);
  min-height:560px;
  display:grid;
  gap:var(--gap);
  grid-template-rows:repeat(3,minmax(0,1fr));
}
.grid-home{
  grid-template-columns:1fr 2fr;
  grid-template-areas:
    "logo play"
    "discord stats"
    "join store";
}
.grid-stats{
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:
    "title title status status players players"
    "version version address address motd motd"
    "list list list list list list";
}
.grid-join{
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "title title ip ip"
    "s1 s2 s3 s4"
    "help help note note";
}
.a-logo{grid-area:logo}.a-play{grid-area:play}.a-discord{grid-area:discord}
.a-stats{grid-area:stats}.a-join{grid-area:join}.a-store{grid-area:store}
.a-title{grid-area:title}.a-status{grid-area:status}.a-players{grid-area:players}
.a-version{grid-area:version}.a-address{grid-area:address}.a-motd{grid-area:motd}
.a-list{grid-area:list}
.a-ip{grid-area:ip}.a-s1{grid-area:s1}.a-s2{grid-area:s2}.a-s3{grid-area:s3}.a-s4{grid-area:s4}
.a-help{grid-area:help}.a-note{grid-area:note}

/* ---------- Tiles ---------- */
.tile{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:30px;
  padding:clamp(18px,3vh,30px);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:inherit;
  text-decoration:none;
  font:inherit;
  text-align:left;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.15),transparent);
  pointer-events:none;
  z-index:-1;
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.22),transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:1;
}
.tile:hover::after{opacity:1}

.tile h2{
  font-weight:400;
  font-size:clamp(1.05rem,2.4vh,1.4rem);
  letter-spacing:.05em;
  margin-bottom:8px;
}
.big{font-size:clamp(1.6rem,4.4vh,2.4rem);line-height:1.1;overflow-wrap:anywhere}
.sub{opacity:.6;font-size:clamp(.8rem,1.8vh,.95rem);margin-top:8px}
.text{opacity:.78;font-size:clamp(.85rem,1.9vh,1rem);line-height:1.45}

a.tile,button.tile,.tile.copy{cursor:pointer}
a.tile:hover,button.tile:hover,.tile.copy:hover{
  transform:translateY(-5px);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 35px rgba(139,92,246,.28);
}
a.tile:focus-visible,button.tile:focus-visible,.back:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:4px;
}

/* ---------- Logo tile ---------- */
.logo{
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(25,25,35,.5));
}
.logo h1{
  font-weight:400;
  font-size:clamp(3rem,10vh,5rem);
  line-height:1;
  text-shadow:0 0 20px var(--purple),0 0 50px var(--purple);
  animation:glow 4s ease-in-out infinite;
}
.logo p{opacity:.7;letter-spacing:.3em;margin-top:12px;font-size:clamp(.8rem,1.9vh,1rem)}
@keyframes glow{
  0%,100%{text-shadow:0 0 20px var(--purple),0 0 50px var(--purple)}
  50%{text-shadow:0 0 28px #a78bfa,0 0 80px var(--purple)}
}

/* ---------- Play Now tile ---------- */
.play{padding:0}
.play .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:saturate(1.1) contrast(1.06);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.play:hover .bg{transform:scale(1.05)}
.play::before{
  z-index:-1;
  background:
    linear-gradient(to top,rgba(5,5,10,.85) 0%,rgba(5,5,10,.35) 38%,rgba(5,5,10,0) 65%),
    linear-gradient(135deg,rgba(139,92,246,.18),transparent 55%);
}
.play .content{padding:clamp(18px,3vh,30px)}
.play h2{font-size:clamp(1.8rem,6vh,3rem);margin-bottom:6px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.ip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:clamp(1rem,2.6vh,1.4rem);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.ip svg,.copyicon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;opacity:.75;flex:none}
.hint{font-size:clamp(.75rem,1.6vh,.85rem);opacity:.65;margin-top:6px}

/* ---------- Centered icon tiles (Discord) ---------- */
.center{align-items:center;justify-content:center;text-align:center;gap:6px}
.center h2{margin-bottom:0}
.center span{opacity:.7;font-size:clamp(.8rem,1.8vh,.95rem)}
.discord-icon{width:clamp(44px,8vh,64px);height:clamp(44px,8vh,64px);margin-bottom:4px}

/* ---------- Bars, dots ---------- */
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:14px;overflow:hidden}
.bar i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--purple2),var(--purple));
  box-shadow:0 0 12px var(--purple);
  transition:width 1s ease;
}
.dot{display:inline-block;width:.5em;height:.5em;border-radius:50%;margin-right:.45em;vertical-align:middle;background:#888}
.dot.on{background:var(--green);animation:pulse 2s infinite}
.dot.off{background:var(--red)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 .7em rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.store{background:linear-gradient(135deg,rgba(109,40,217,.6),rgba(15,15,20,.5))}
.arrow{display:inline-block;transition:transform .25s ease}
a.tile:hover .arrow{transform:translateX(5px)}

/* ---------- Sub pages ---------- */
.back{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;margin-bottom:auto;
  padding:8px 16px;border-radius:99px;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;text-decoration:none;
  font-size:clamp(.8rem,1.8vh,.95rem);
  transition:background .2s ease,border-color .2s ease;
}
.back:hover{background:rgba(139,92,246,.3);border-color:var(--purple)}
.title-tile{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(25,25,35,.5))}
.title-tile h1{font-weight:400;font-size:clamp(1.6rem,4.6vh,2.5rem);line-height:1.05;text-shadow:0 0 24px var(--purple)}
.srvicon{width:clamp(32px,6vh,52px);height:clamp(32px,6vh,52px);border-radius:10px;image-rendering:pixelated;margin-bottom:10px;display:none}

.step{justify-content:space-between}
.num{font-size:clamp(2rem,6vh,3.2rem);line-height:1;color:var(--purple);text-shadow:0 0 22px var(--purple)}
.step h2{margin-bottom:6px}
.code{
  display:inline-block;padding:2px 10px;border-radius:8px;
  background:rgba(139,92,246,.22);border:1px solid rgba(139,92,246,.4);
  white-space:nowrap;
}
.bigip{font-size:clamp(1.5rem,5vh,2.6rem);line-height:1.1;display:flex;align-items:center;gap:14px;overflow-wrap:anywhere}

.chips{display:flex;flex-wrap:wrap;gap:8px;overflow:auto;max-height:100%;padding-right:4px}
.chip{padding:6px 14px;border-radius:99px;background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.35);font-size:clamp(.8rem,1.8vh,.95rem)}
.scroll{overflow:auto}
.motd{white-space:pre-line}

.switch{display:inline-flex;gap:4px;padding:4px;margin-top:12px;align-self:flex-start;border-radius:99px;border:1px solid rgba(255,255,255,.18)}
.switch button{font:inherit;color:#fff;background:none;border:0;padding:6px 18px;border-radius:99px;cursor:pointer;font-size:clamp(.8rem,1.8vh,.95rem);transition:background .2s ease}
.switch button:hover{background:rgba(139,92,246,.25)}
.switch button[aria-pressed="true"]{background:var(--purple)}
.switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:25px;left:50%;
  transform:translate(-50%,20px);
  background:var(--purple);
  padding:12px 22px;border-radius:12px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:100;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Mobile: stack and scroll ---------- */
@media (max-width:900px){
  :root{--pad:15px;--gap:15px}
  .grid{
    height:auto;min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-template-areas:none;
    grid-auto-rows:minmax(180px,auto);
  }
  .grid > *{grid-area:auto !important}
  .play{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}