/* ============================================================
   zMooshi — design tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:            #0d100b;
  --bg-1:          #12160e;
  --bg-2:          #191f14;
  --bg-3:          #222a1a;
  --ink:           #f5eedd;
  --ink-2:         #cbc2a6;
  --ink-3:         #8d9279;
  --border:        rgba(245,238,221,0.09);
  --border-2:      rgba(245,238,221,0.16);

  --accent:        #e2523f;
  --accent-ink:    #ff8a72;
  --accent-soft:   rgba(226,82,63,0.14);
  --moss:          #7ea854;
  --moss-ink:      #a7d47f;
  --moss-soft:     rgba(126,168,84,0.14);
  --cream:         #f2e9d6;
  --pond:          #6fa3b0;

  --font-display:  'Baloo 2', 'Inter', system-ui, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-s:  12px;
  --radius-m:  20px;
  --radius-l:  28px;
  --radius-xl: 40px;

  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px var(--border), 0 30px 80px -30px rgba(226,82,63,0.35);

  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:      #faf5e8;
  --bg-1:    #ffffff;
  --bg-2:    #fef9ee;
  --bg-3:    #f1e8d2;
  --ink:     #241c12;
  --ink-2:   #55492f;
  --ink-3:   #8c8060;
  --border:  rgba(36,28,18,0.09);
  --border-2:rgba(36,28,18,0.16);
  --accent-soft: rgba(226,82,63,0.10);
  --moss-soft:   rgba(126,168,84,0.14);
  --shadow-soft: 0 20px 50px -24px rgba(80,60,30,0.28);
  --shadow-glow: 0 0 0 1px var(--border), 0 30px 70px -30px rgba(226,82,63,0.22);
  color-scheme: light;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:0.74rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid rgba(226,82,63,0.25);
  padding:7px 14px 7px 10px; border-radius:999px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.section{ padding:120px 0; position:relative; }
.section-head{ max-width:640px; margin:0 0 56px; }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); margin:16px 0 14px; }
.section-head p{ color:var(--ink-2); font-size:1.05rem; line-height:1.65; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:var(--bg-2);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--border);
  padding:12px 28px;
  box-shadow:0 10px 30px -20px rgba(0,0,0,0.4);
}
.nav-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.nav-brand img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:0.9rem; font-weight:600; color:var(--ink-2);
  position:relative; padding:4px 0; transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-2); background:var(--bg-2); cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease);
}
.icon-btn:hover{ transform:translateY(-2px); background:var(--bg-3); }
.icon-btn svg{ width:18px; height:18px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:0.92rem;
  padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff9f3; box-shadow:0 10px 26px -10px rgba(226,82,63,0.55); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px -12px rgba(226,82,63,0.65); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn-ghost:hover{ background:var(--bg-2); transform:translateY(-2px); }
.btn-sm{ padding:9px 16px; font-size:0.82rem; }
.nav .btn-primary{ display:none; }
@media(min-width:860px){ .nav .btn-primary{ display:inline-flex; } }

@media(max-width:859px){
  .nav-links{ display:none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding:150px 0 100px; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 8%, rgba(126,168,84,0.20), transparent 60%),
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(226,82,63,0.22), transparent 60%),
    var(--bg);
}
.hero-banner{
  position:absolute; inset:0; z-index:0; opacity:0.16;
  background-image:url('assets/banner.png');
  background-size:cover; background-position:center 30%;
  filter:blur(2px) saturate(1.1);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 90%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 90%);
}
:root[data-theme="light"] .hero-banner{ opacity:0.22; }

.spore-field{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.spore{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--cream), var(--moss) 75%);
  opacity:0.55; filter:blur(0.3px);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:0.6; }
  90%{ opacity:0.35; }
  100%{ transform:translateY(-115vh) translateX(var(--drift,40px)) rotate(180deg); opacity:0; }
}

.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
@media(max-width:900px){ .hero-inner{ grid-template-columns:1fr; text-align:center; } }

.hero-text h1{
  font-size:clamp(3rem,7vw,5.4rem); line-height:0.98; margin:20px 0 22px;
}
.hero-text h1 .hl{ color:var(--accent); position:relative; }
.hero-text .lede{ font-size:1.2rem; color:var(--ink-2); max-width:520px; line-height:1.6; margin-bottom:34px; }
@media(max-width:900px){ .hero-text .lede{ margin-left:auto; margin-right:auto; } }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
@media(max-width:900px){ .hero-cta{ justify-content:center; } }

.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
@media(max-width:900px){ .hero-stats{ justify-content:center; } }
.hero-stats .stat b{
  font-family:var(--font-display); font-size:1.7rem; display:block; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero-stats .stat span{ font-size:0.78rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }

.hero-portrait{ position:relative; display:flex; justify-content:center; align-items:center; }
.portrait-ring{
  position:relative; width:min(420px,90%); aspect-ratio:1/1; border-radius:50%;
  padding:10px;
  background:conic-gradient(from 180deg, var(--accent), var(--moss), var(--pond), var(--accent));
  animation:spin 14s linear infinite;
  filter:drop-shadow(0 25px 60px rgba(226,82,63,0.28));
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.portrait-ring img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:6px solid var(--bg);
  animation:spin-rev 14s linear infinite;
}
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
.portrait-badge{
  position:absolute; bottom:6%; right:2%; z-index:3;
  background:var(--bg-1); border:1px solid var(--border-2); border-radius:999px;
  padding:10px 16px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-soft);
  animation:float 5s ease-in-out infinite;
  font-weight:700; font-size:0.85rem;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.portrait-badge .pulse{
  width:9px; height:9px; border-radius:50%; background:#5ec96b; position:relative;
}
.portrait-badge .pulse::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid #5ec96b;
  animation:pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring{ 0%{ transform:scale(0.6); opacity:0.8; } 100%{ transform:scale(1.8); opacity:0; } }
.portrait-badge.offline .pulse{ background:var(--ink-3); }
.portrait-badge.offline .pulse::after{ display:none; }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--ink-3); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  animation:bob 2.4s ease-in-out infinite; z-index:2;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }
.scroll-cue .line{ width:1px; height:36px; background:linear-gradient(var(--ink-3), transparent); }

/* ============================================================
   Live player
   ============================================================ */
.live-section{ padding:100px 0; }
.live-frame{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  border:1px solid var(--border-2); box-shadow:var(--shadow-glow);
  background:var(--bg-2); aspect-ratio:16/9;
}
.live-frame iframe{ width:100%; height:100%; border:0; }
.live-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:22px;
}
.live-topbar h2{ font-size:clamp(1.6rem,3vw,2.2rem); }

/* ============================================================
   Cards / grids
   ============================================================ */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:30px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:var(--border-2); box-shadow:var(--shadow-soft); }
.card .ico{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-ink); margin-bottom:18px; font-size:1.4rem;
}
.card h3{ font-size:1.15rem; margin-bottom:10px; }
.card p{ color:var(--ink-2); font-size:0.93rem; line-height:1.6; }

/* about / value section */
.about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media(max-width:860px){ .about-wrap{ grid-template-columns:1fr; } }
.quote-card{
  background:linear-gradient(155deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:var(--radius-l);
  padding:36px; position:relative; box-shadow:var(--shadow-soft);
}
.quote-card::before{
  content:"“"; font-family:var(--font-display); font-size:5rem; color:var(--accent);
  opacity:0.35; position:absolute; top:6px; left:20px; line-height:1;
}
.quote-card p{ font-size:1.3rem; font-family:var(--font-display); font-weight:600; line-height:1.5; position:relative; z-index:1; }
.quote-card .who{ margin-top:20px; display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:0.85rem; }
.quote-card .who img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }

/* games grid */
.game-card{
  position:relative; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--border);
  padding:28px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg-2); transition:transform .4s var(--ease);
}
.game-card:hover{ transform:translateY(-6px); }
.game-card .tag{
  position:absolute; top:20px; left:20px; z-index:2; font-size:0.7rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--bg-3); color:var(--ink-2);
}
.game-card h3{ font-size:1.3rem; margin-bottom:6px; }
.game-card p{ color:var(--ink-2); font-size:0.88rem; }
.game-card .glow{
  position:absolute; inset:0; opacity:0.5; z-index:0;
  background:radial-gradient(circle at 80% 0%, var(--accent-soft), transparent 60%);
}
.game-card > *:not(.glow):not(.tag){ position:relative; z-index:1; }

/* clips */
.clip-card{
  border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--border);
  background:var(--bg-2); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.clip-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.clip-embed{ aspect-ratio:16/9; background:#000; }
.clip-embed iframe{ width:100%; height:100%; border:0; }
.clip-meta{ padding:18px 20px; }
.clip-meta h3{ font-size:1rem; margin-bottom:6px; }
.clip-meta .row{ display:flex; align-items:center; justify-content:space-between; color:var(--ink-3); font-size:0.78rem; }

/* vod / youtube */
.yt-wrap{
  border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--border-2);
  box-shadow:var(--shadow-glow); aspect-ratio:16/9; background:var(--bg-2);
}
.yt-wrap iframe{ width:100%; height:100%; border:0; }
.note-strip{
  display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--ink-3); font-size:0.83rem;
}
.note-strip svg{ width:16px; height:16px; flex-shrink:0; }

/* schedule */
.schedule-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
@media(max-width:800px){ .schedule-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:480px){ .schedule-grid{ grid-template-columns:repeat(2,1fr); } }
.day-card{
  border:1px solid var(--border); border-radius:var(--radius-s); padding:18px 12px;
  text-align:center; background:var(--bg-2); transition:transform .3s var(--ease), border-color .3s;
}
.day-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.day-card .d{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-3); font-weight:700; margin-bottom:10px; }
.day-card .bar{
  height:60px; border-radius:8px; background:var(--bg-3); position:relative; overflow:hidden; margin-bottom:10px;
  display:flex; align-items:flex-end;
}
.day-card .bar .fill{ width:100%; background:linear-gradient(180deg, var(--accent), var(--moss)); border-radius:8px; }
.day-card .t{ font-size:0.72rem; color:var(--ink-2); font-weight:600; }
.day-card.off .bar .fill{ opacity:0.12; }
.day-card.off .t{ color:var(--ink-3); }

/* community rules */
.rules-card{
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:30px 40px;
}
@media(max-width:760px){ .rules-card{ grid-template-columns:1fr; } }
.rule{ display:flex; gap:14px; align-items:flex-start; }
.rule .n{
  width:32px; height:32px; border-radius:10px; background:var(--moss-soft); color:var(--moss-ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; flex-shrink:0;
}
.rule p{ color:var(--ink-2); font-size:0.95rem; line-height:1.55; }

/* discord */
.discord-card{
  margin-top:24px; padding:26px 30px; border-radius:var(--radius-l);
  background:linear-gradient(135deg, var(--moss-soft), transparent 70%), var(--bg-2);
  border:1px solid var(--border); box-shadow:var(--shadow-soft);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.discord-card-icon{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  background:var(--moss-soft); color:var(--moss-ink);
  display:flex; align-items:center; justify-content:center;
}
.discord-card > div:nth-child(2){ flex:1; min-width:220px; }
.discord-card h3{ font-size:1.05rem; margin-bottom:4px; }
.discord-card p{ color:var(--ink-2); font-size:0.9rem; line-height:1.5; }
.discord-card code{
  background:var(--bg-3); border:1px solid var(--border-2); border-radius:6px;
  padding:1px 6px; font-family:var(--font-body); font-weight:700; color:var(--accent-ink); font-size:0.85em;
}
@media(max-width:600px){ .discord-card{ flex-direction:column; text-align:center; } }

/* CTA band */
.cta-band{
  border-radius:var(--radius-xl); padding:70px 50px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--border-2);
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 55%),
             radial-gradient(circle at 80% 90%, var(--moss-soft), transparent 55%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:16px; }
.cta-band p{ color:var(--ink-2); max-width:480px; margin:0 auto 30px; }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* footer */
footer{ border-top:1px solid var(--border); padding:50px 0 30px; margin-top:60px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; }
.footer-brand img{ width:30px; height:30px; border-radius:50%; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ color:var(--ink-2); font-size:0.88rem; font-weight:600; transition:color .2s; }
.footer-links a:hover{ color:var(--accent-ink); }
.footer-bottom{ margin-top:34px; padding-top:24px; border-top:1px solid var(--border); color:var(--ink-3); font-size:0.78rem; text-align:center; }

/* utility */
.text-accent{ color:var(--accent-ink); }
.mt-lg{ margin-top:60px; }
.hidden{ display:none !important; }

@media(max-width:640px){
  .section{ padding:80px 0; }
  .hero{ padding-top:130px; }
}

/* ============================================================
   Section seams — gradient blend + mushroom line divider
   ============================================================ */
.seam{
  position:relative;
  height:110px;
  margin:-60px 0;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
.seam.down{ background:linear-gradient(to bottom, var(--bg), var(--bg-1)); }
.seam.up{   background:linear-gradient(to bottom, var(--bg-1), var(--bg)); }
.seam-shrooms{
  width:100%; height:32px;
  background-color:var(--ink-3);
  opacity:0.4;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Crect x='11' y='20' width='5' height='12' rx='2.5' fill='white'/%3E%3Cellipse cx='13.5' cy='16' rx='11' ry='8' fill='white'/%3E%3Crect x='30' y='24' width='3.5' height='8' rx='1.75' fill='white'/%3E%3Cellipse cx='31.5' cy='21' rx='7' ry='5.2' fill='white'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Crect x='11' y='20' width='5' height='12' rx='2.5' fill='white'/%3E%3Cellipse cx='13.5' cy='16' rx='11' ry='8' fill='white'/%3E%3Crect x='30' y='24' width='3.5' height='8' rx='1.75' fill='white'/%3E%3Cellipse cx='31.5' cy='21' rx='7' ry='5.2' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:44px 32px; mask-size:44px 32px;
  -webkit-mask-position:bottom left; mask-position:bottom left;
}

@media(max-width:640px){
  .seam{ height:70px; margin:-40px 0; }
  .seam-shrooms{ height:22px; -webkit-mask-size:32px 22px; mask-size:32px 22px; }
}