/* ── DESIGN TOKENS ── */
:root {
  --aqua:          #a8e6e0;
  --aqua-light:    #d4f5f2;
  --aqua-dark:     #5ecdc4;
  --pink:          #f7b8cc;
  --pink-light:    #fce4ed;
  --pink-mid:      #f48fb1;
  --pink-hot:      #e91e8c;
  --lavender:      #d8c8f0;
  --lavender-light:#ede5f8;
  --lavender-dark: #b39ddb;
  --white-fluff:   #fff8fd;
  --text-dark:     #4a3060;
  --text-mid:      #7b5ea7;
  --text-light:    #a98dc8;
  --yellow:        #fff176;
  --card-bg:       rgba(255,255,255,0.75);
  --shadow:        0 4px 24px rgba(100,50,130,0.10);
  --radius:        20px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--white-fluff);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── BANNER ── */
.site-banner {
  padding: 0.6rem 1.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

/* ── NAV ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,248,253,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--pink-light);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  font-family: 'Pacifico', cursive;
  font-size: 1.5rem;
  background: linear-gradient(120deg, var(--aqua-dark), var(--pink-hot), var(--lavender-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-mid);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--pink-hot); }
.nav-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--pink-hot);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  animation: pulse 2s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-live-dot {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: blink 1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(233,30,140,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(233,30,140,0); }
}

/* ── HERO ── */
.hero {
  min-height: 92vh;
  background: linear-gradient(160deg, var(--aqua-light) 0%, var(--pink-light) 45%, var(--lavender-light) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.25;
  animation: float-blob 8s ease-in-out infinite;
  pointer-events: none;
}
.blob1 { width:320px;height:320px;background:var(--aqua);    top:-80px;  left:-80px;  animation-delay:0s; }
.blob2 { width:200px;height:200px;background:var(--pink);    top:20%;    right:-60px; animation-delay:2s; }
.blob3 { width:260px;height:260px;background:var(--lavender);bottom:-60px;left:15%;  animation-delay:4s; }
.blob4 { width:140px;height:140px;background:var(--pink-mid);bottom:10%; right:8%;   animation-delay:1s; }
@keyframes float-blob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(10px,-15px) scale(1.05); }
}

.hero-avatar {
  width: 180px; height: 180px;
  margin-bottom: 1.8rem;
  animation: hero-bob 4s ease-in-out infinite;
  filter: drop-shadow(0 12px 32px rgba(233,30,140,0.22));
  position: relative; z-index: 1;
}
@keyframes hero-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero-name {
  font-family: 'Pacifico', cursive;
  font-size: clamp(3rem, 8vw, 5.5rem);
  background: linear-gradient(120deg, var(--aqua-dark), var(--pink-hot), var(--lavender-dark), var(--aqua-dark));
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  position: relative; z-index: 1;
}
@keyframes shimmer { to { background-position: 300%; } }

.hero-tagline {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 2.5rem;
  position: relative; z-index: 1;
}

.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative; z-index: 1;
}
.btn {
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.15); }
.btn-twitch  { background: linear-gradient(135deg,#9147ff,#6441a5); color:#fff; }
.btn-rainbow { background: linear-gradient(135deg,var(--aqua-dark),var(--pink-hot)); color:#fff; }

/* live preview card in hero */
.live-card {
  margin-top: 2.5rem;
  background: var(--card-bg);
  border: 2px solid var(--pink-mid);
  border-radius: var(--radius);
  padding: 1.2rem 1.8rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow);
  position: relative; z-index: 1;
  max-width: 480px;
  text-align: left;
}
.live-card-thumb {
  width: 80px; height: 45px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.live-card-info .live-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pink-hot);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.live-card-info .live-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}
.live-card-info .live-game {
  font-size: 0.82rem;
  color: var(--text-mid);
}
.live-card-info .live-viewers {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pink-hot);
  margin-top: 0.25rem;
}

/* ── RAINBOW DIVIDER ── */
.rainbow-bar {
  height: 8px;
  background: linear-gradient(to right,
    var(--pink-mid), #ce93d8, var(--aqua-dark),
    #a5d6a7, var(--yellow), #ffcc80, var(--pink-mid));
}

/* ── SECTION WRAPPER ── */
.section-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 5rem 2rem;
}
.section-title {
  font-family: 'Pacifico', cursive;
  font-size: 2rem;
  color: var(--pink-hot);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ── ABOUT ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media(max-width:660px) { .about-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}
.card-pink   { border-color: var(--pink);     background: linear-gradient(135deg,var(--pink-light),#fff8fd); }
.card-aqua   { border-color: var(--aqua);     background: linear-gradient(135deg,var(--aqua-light),#fff8fd); }
.card-lav    { border-color: var(--lavender); background: linear-gradient(135deg,var(--lavender-light),#fff8fd); }

.card p { font-size: 1.05rem; color: var(--text-dark); line-height: 1.8; }
.card strong { color: var(--pink-hot); }

.flopsy-title {
  font-family: 'Pacifico', cursive;
  font-size: 1.4rem;
  color: var(--text-mid);
  margin-bottom: 0.4rem;
  text-align: center;
}
.flopsy-badge {
  display: inline-block;
  background: var(--pink-light);
  color: var(--pink-hot);
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: 50px;
  padding: 0.3rem 1rem;
  margin: 0 auto 1rem;
  text-align: center;
}
.flopsy-card-inner { text-align: center; }

/* ── SONA STATS ── */
.stats-bg {
  background: linear-gradient(135deg, var(--pink-light), var(--lavender-light));
  padding: 5rem 2rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  max-width: 1040px;
  margin: 0 auto;
}
.stat-card {
  background: rgba(255,255,255,0.8);
  border-radius: 18px;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.stat-card.sc-aqua { border-color: var(--aqua-dark); }
.stat-card.sc-pink { border-color: var(--pink-mid); }
.stat-card.sc-lav  { border-color: var(--lavender-dark); }
.stat-card.sc-yell { border-color: #f9a825; }
.stat-icon  { font-size: 2.4rem; margin-bottom: 0.5rem; }
.stat-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
.stat-value { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-top: 0.2rem; }

/* ── SCHEDULE ── */
.schedule-bg {
  background: linear-gradient(135deg, var(--lavender-light), var(--aqua-light));
  padding: 5rem 2rem;
}
.schedule-inner { max-width: 760px; margin: 0 auto; }
.day-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.75);
  border-radius: 16px;
  margin-bottom: 0.75rem;
  border-left: 5px solid var(--pink-hot);
  font-weight: 600;
  color: var(--text-dark);
  transition: transform 0.15s;
}
.day-row:hover { transform: translateX(4px); }
.day-row.off { border-left-color: var(--aqua-dark); opacity: 0.6; }
.day-name { min-width: 110px; font-weight: 800; color: var(--text-mid); }
.day-time { color: var(--pink-hot); }
.day-row.off .day-time { color: var(--aqua-dark); }
.schedule-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-light);
}

/* ── VODS ── */
.vods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.vod-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--lavender);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.vod-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(100,50,130,0.15); }
.vod-thumb-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.vod-thumb { width: 100%; height: 100%; object-fit: cover; }
.vod-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.vod-info { padding: 1rem 1.2rem; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.vod-title { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); line-height: 1.4; }
.vod-meta  { font-size: 0.78rem; color: var(--text-light); margin-top: auto; }
.vod-link  {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.6rem; color: var(--pink-hot);
  font-weight: 800; font-size: 0.85rem;
}

/* ── SOCIALS ── */
.socials-wrap {
  padding: 5rem 2rem;
  text-align: center;
}
.social-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}
.social-pill {
  padding: 0.75rem 1.8rem;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.social-pill:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.sp-twitch  { background: linear-gradient(135deg,#9147ff,#6441a5); }
.sp-twitter { background: linear-gradient(135deg,#1da1f2,#0d8ecf); }
.sp-discord { background: linear-gradient(135deg,#5865f2,#404eed); }
.sp-default { background: linear-gradient(135deg,var(--pink-mid),var(--pink-hot)); }

/* ── FOOTER ── */
footer {
  background: var(--lavender-light);
  text-align: center;
  padding: 2.5rem 2rem;
  font-size: 0.9rem;
  color: var(--text-mid);
}
footer .footer-logo {
  font-family: 'Pacifico', cursive;
  font-size: 1.5rem;
  color: var(--pink-hot);
  margin-bottom: 0.5rem;
}

/* ── MAINTENANCE ── */
.maintenance-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, var(--aqua-light), var(--pink-light), var(--lavender-light));
  padding: 2rem;
}
.maintenance-page h1 {
  font-family: 'Pacifico', cursive;
  font-size: 2.5rem;
  color: var(--pink-hot);
  margin: 1rem 0;
}
.maintenance-page p {
  font-size: 1.1rem;
  color: var(--text-mid);
  font-weight: 600;
}

/* ── UTILITIES ── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }