/* ── Reset & Tokens ─────────────────────────────────────────────────────── */
:root{
  --sun:#F6D94A; --sunset:#F2A33E; --coral:#E2612B; --rust:#B5533B;
  --dusk:#7A4A6B; --twitch:#6441A5; --ocean:#2E86C9; --palm:#2E6B4C;
  --ink:#171310; --ink2:#221B17; --foam:#CDEBFA; --paper:#FFF8EC;
  --nav-h:64px;
  --r:14px;
  --shadow:5px 5px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:'Nunito Sans',sans-serif;
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:'Baloo 2',sans-serif;margin:0;line-height:1.1;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
section{position:relative;}
img{display:block;max-width:100%;}

/* ── Nav ────────────────────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  background:rgba(23,19,16,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(255,255,255,.07);
}
.brand img{height:40px;width:auto;}
.nav-links{
  display:flex;gap:24px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;
}
.nav-links a{opacity:.8;transition:opacity .15s;}
.nav-links a:hover{opacity:1;}
.nav-btns{display:flex;gap:8px;align-items:center;}
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:10px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;
  border:2.5px solid rgba(255,255,255,.25);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;color:#fff;
  transition:transform .12s,box-shadow .12s;
}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.nav-cta img{width:14px;height:14px;}

/* hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;cursor:pointer;background:none;border:none;padding:6px;
}
.hamburger span{
  display:block;width:100%;height:2.5px;
  background:#fff;border-radius:2px;
  transition:transform .25s,opacity .25s;
}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:190;
  background:rgba(23,19,16,.97);backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(255,255,255,.1);
  padding:20px 24px 28px;
  flex-direction:column;gap:4px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);
  opacity:.85;
}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{opacity:1;}
.mobile-menu-btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.mobile-menu-btns .nav-cta{flex:1;justify-content:center;font-size:15px;padding:12px;}

@media(max-width:860px){.nav-links{display:none;}}
@media(max-width:600px){
  .nav-btns{display:none;}
  .hamburger{display:flex;}
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;letter-spacing:2px;
  padding:6px 14px;border-radius:8px;
  border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
  margin-bottom:18px;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:12px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;
  border:3px solid var(--ink);box-shadow:var(--shadow);
  transition:transform .12s,box-shadow .12s;cursor:pointer;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-secondary{background:var(--paper);color:var(--coral);}
.btn-sm{padding:10px 18px;font-size:14px;border-width:2.5px;box-shadow:var(--shadow-sm);}

.divider{display:block;width:100%;line-height:0;margin-top:-2px;position:relative;z-index:1;}
.divider svg{width:100%;height:auto;display:block;}

.section-head{text-align:center;max-width:620px;margin:0 auto 52px;}
.section-head h2{font-size:clamp(28px,5vw,46px);color:#fff;}
.section-head p{margin-top:12px;font-size:16px;font-weight:600;color:#FFE9D6;line-height:1.6;}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 60px) 24px 80px;
  background:linear-gradient(170deg,var(--sunset) 0%,var(--coral) 100%);
  overflow:hidden;
}
.sun-mark{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:clamp(140px,22vw,220px);height:auto;}
.cloud{position:absolute;background:var(--foam);border:3px solid var(--ink);border-radius:50px;}
.palm{position:absolute;bottom:-20px;}
.palm.left{left:-20px;}
.palm.right{right:-20px;transform:scaleX(-1);}
@media(max-width:700px){
  .palm{opacity:.45;transform:scale(.55);}
  .palm.right{transform:scaleX(-1) scale(.55);}
  .palm.left{left:-60px;bottom:-50px;}
  .palm.right{right:-60px;bottom:-50px;}
}

.hero-content{position:relative;z-index:2;text-align:center;width:100%;max-width:700px;}
.logo-sticker{
  width:min(88vw,520px);height:auto;
  transform:rotate(-2deg);
  filter:drop-shadow(6px 7px 0 rgba(23,19,16,.55));
  margin:0 auto;
}
.hero-sub{
  margin:28px auto 0;max-width:500px;
  font-size:clamp(15px,2.5vw,18px);font-weight:700;
  color:var(--ink);line-height:1.55;
}
.hero-actions{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.countdown{
  margin:28px auto 0;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  padding:11px 20px;border-radius:10px;
  border:2.5px solid #000;box-shadow:var(--shadow-sm);
  max-width:90vw;
}
.countdown-dot{width:8px;height:8px;border-radius:50%;background:#666;flex-shrink:0;}
.countdown-dot.on{background:#ff4d4d;box-shadow:0 0 8px 2px rgba(255,77,77,.7);}

/* ── About ──────────────────────────────────────────────────────────────── */
.about{background:var(--paper);color:var(--ink);padding:clamp(60px,10vw,110px) 24px;}
.about-grid{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:center;
}
.monogram{
  width:160px;height:160px;border-radius:50%;
  background:var(--sun);border:4px solid var(--ink);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transform:rotate(-3deg);flex-shrink:0;
}
.monogram img{width:76%;height:76%;object-fit:contain;}
.about h2{font-size:clamp(26px,4vw,38px);color:var(--ink);}
.about p{margin-top:14px;font-size:15.5px;font-weight:600;line-height:1.65;color:#463A31;max-width:540px;}
.chips{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;}
.chip{
  display:flex;align-items:center;gap:8px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13.5px;
  padding:8px 14px;border-radius:999px;border:2.5px solid var(--ink);background:#fff;
}
.chip-dot{width:8px;height:8px;border-radius:50%;}
@media(max-width:680px){
  .about-grid{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .about p{max-width:100%;}
  .chips{justify-content:center;}
}

/* ── Schedule ───────────────────────────────────────────────────────────── */
.schedule{background:var(--coral);padding:clamp(60px,10vw,110px) 24px;}
.schedule .tag{background:var(--sun);color:var(--ink);transform:rotate(-2deg);}
.week{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;max-width:1020px;margin:0 auto;
}
.day{
  background:var(--paper);border-radius:14px;
  padding:18px 10px;text-align:center;color:var(--ink);
  border:3px solid var(--ink);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;
  height:176px;
}
.day.live{background:#FFF6D8;box-shadow:var(--shadow),0 0 0 3px var(--sun) inset;}
.day-name{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:1px;opacity:.65;
}
.day-icon{margin:12px auto 10px;width:28px;height:28px;flex-shrink:0;}
.day-status{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;}
.day.live .day-status{color:var(--coral);}
.day-time{display:block;margin-top:5px;font-size:11px;font-weight:700;min-height:16px;font-family:'JetBrains Mono',monospace;}
.legend{display:flex;justify-content:center;gap:24px;margin-top:36px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:#FFE9D6;}
.swatch{width:14px;height:14px;border-radius:4px;border:2px solid var(--ink);}
.swatch.on{background:var(--sun);}
.swatch.off{background:transparent;}

@media(max-width:860px){
  .week{grid-template-columns:repeat(4,1fr);}
  .day{height:auto;padding:16px 10px 18px;}
}
@media(max-width:500px){
  .week{grid-template-columns:repeat(2,1fr);}
}

/* ── Live & Clips ───────────────────────────────────────────────────────── */
.live{background:var(--rust);padding:clamp(60px,10vw,110px) 24px;}
.live .tag{background:var(--sun);color:var(--ink);transform:rotate(2deg);}
.player-card{
  max-width:880px;margin:0 auto 56px;
  background:var(--ink2);border-radius:18px;padding:12px;
  border:3px solid var(--ink);box-shadow:var(--shadow);
}
.player-frame{position:relative;width:100%;padding-top:56.25%;border-radius:9px;overflow:hidden;background:#000;}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.live-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 4px;flex-wrap:wrap;gap:10px;}
.live-status{display:flex;align-items:center;gap:8px;font-family:'Baloo 2',sans-serif;font-weight:700;color:#fff;font-size:14px;}
.live-dot{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 8px 2px rgba(255,77,77,.7);}
.live-link{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;color:var(--sun);}
.clips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto;}
.clip-card{background:var(--ink2);border-radius:13px;padding:9px;border:3px solid var(--ink);box-shadow:var(--shadow);}
.clip-frame{position:relative;width:100%;padding-top:56.25%;border-radius:7px;overflow:hidden;background:#000;}
.clip-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.clips-more{text-align:center;margin-top:40px;}
@media(max-width:780px){.clips-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:500px){.clips-grid{grid-template-columns:1fr;}}

/* ── SMP ────────────────────────────────────────────────────────────────── */
.smp{background:var(--dusk);padding:clamp(60px,10vw,120px) 24px;}
.smp-card{
  max-width:700px;margin:0 auto;
  background:var(--ink2);border-radius:20px;
  padding:clamp(32px,6vw,52px) clamp(24px,5vw,44px);
  text-align:center;position:relative;
  border:3px solid var(--ink);box-shadow:var(--shadow);
}
.ribbon{
  position:absolute;top:-18px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--palm);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;letter-spacing:2px;
  padding:8px 18px;border-radius:8px;
  border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.smp-card h3{font-size:clamp(22px,4vw,36px);color:#fff;margin-top:18px;}
.smp-card p{margin-top:16px;font-size:15px;font-weight:600;color:#E7DCE2;line-height:1.65;max-width:480px;margin-left:auto;margin-right:auto;}
.blocks{display:flex;justify-content:center;gap:7px;margin:24px 0 2px;}
.block{width:22px;height:22px;border-radius:5px;border:2px solid var(--ink);}
.block:nth-child(1){background:var(--palm);}
.block:nth-child(2){background:#5C4433;}
.block:nth-child(3){background:var(--sun);}
.block:nth-child(4){background:var(--ocean);}
.block:nth-child(5){background:var(--coral);}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{background:var(--paper);padding:clamp(60px,10vw,110px) 24px;}
.faq-list{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:#fff;border:3px solid var(--ink);border-radius:13px;
  box-shadow:var(--shadow);padding:16px 20px;
}
.faq-item summary{
  cursor:pointer;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:10px;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{
  width:24px;height:24px;border-radius:6px;border:2px solid var(--ink);
  background:var(--coral);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .2s;
}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-item p{margin:12px 0 2px 34px;font-size:14.5px;font-weight:600;color:#5a4c40;line-height:1.65;}

/* ── Community ──────────────────────────────────────────────────────────── */
.community{background:var(--ink);padding:clamp(70px,10vw,120px) 24px;text-align:center;overflow:hidden;}
.stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(2px 2px at 15% 18%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 72% 12%,#fff,transparent),
    radial-gradient(2px 2px at 38% 32%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 88% 40%,#fff,transparent),
    radial-gradient(2px 2px at 8% 58%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 52% 62%,#fff,transparent),
    radial-gradient(2px 2px at 92% 72%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 28% 82%,#fff,transparent),
    radial-gradient(1px 1px at 60% 88%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 45% 5%,#fff,transparent);
  opacity:.45;
}
.moon{position:relative;width:80px;height:80px;margin:0 auto 22px;border-radius:50%;background:var(--foam);border:3px solid #fff;}
.community h2{position:relative;font-size:clamp(26px,5vw,42px);color:#fff;}
.community > p{position:relative;max-width:440px;margin:16px auto 30px;font-weight:600;color:#C9D9E4;line-height:1.6;font-size:15.5px;}
.discord-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  background:var(--ocean);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;
  padding:16px 32px;border-radius:13px;
  border:3px solid rgba(255,255,255,.6);
  box-shadow:5px 5px 0 rgba(255,255,255,.25);
  transition:transform .12s;
}
.discord-btn:hover{transform:translate(-2px,-2px);}
.social-row{position:relative;margin-top:30px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.social-icon{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2.5px solid rgba(255,255,255,.4);
  transition:transform .12s,border-color .12s;
}
.social-icon:hover{transform:translateY(-3px);border-color:#fff;}
.social-icon img{width:22px;height:22px;}
.social-icon svg{width:22px;height:22px;}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{
  background:var(--ink);padding:32px 24px 40px;
  text-align:center;border-top:1px solid rgba(255,255,255,.1);
}
footer .brand{justify-content:center;margin-bottom:10px;}
footer .brand img{height:32px;}
footer p{font-size:12.5px;color:rgba(255,255,255,.4);font-weight:600;}
.footer-links{
  margin-top:16px;display:flex;justify-content:center;align-items:center;
  gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:700;
}
.footer-links a{
  color:rgba(255,255,255,.65);transition:color .2s;
  display:inline-flex;align-items:center;gap:5px;
}
.footer-links a:hover{color:#fff;}
.footer-links a img{width:12px;height:12px;opacity:.65;}
.footer-links span{color:rgba(255,255,255,.2);}

/* ── Scroll animations ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}