/* ── bby.mirako.org — Style v3 ✨ Rosalina 💙 Luma ⭐ ── */
/* Cosmic blue theme — azul claro e estrelas */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: #f0f4ff;
  min-height: 100vh;
  overflow-x: hidden;
  background: #070b24;
}

/* ── Yu Yu Hakusho wallpaper background ── */
.bg-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #070b24 url('bg-yyh.jpg') no-repeat center center / cover;
}

/* ── Twinkling stars (pure CSS) ── */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #b0d4ff;
  border-radius: 50%;
  animation: twinkle var(--d, 3s) ease-in-out infinite alternate;
}
.stars span:nth-child(1)  { top: 8%;  left: 12%; --d: 2.5s; opacity: 0.6; }
.stars span:nth-child(2)  { top: 15%; left: 45%; --d: 3.8s; opacity: 0.4; width: 3px; height: 3px; }
.stars span:nth-child(3)  { top: 25%; left: 78%; --d: 2.0s; opacity: 0.7; }
.stars span:nth-child(4)  { top: 35%; left: 30%; --d: 4.2s; opacity: 0.5; width: 1px; height: 1px; }
.stars span:nth-child(5)  { top: 42%; left: 60%; --d: 3.0s; opacity: 0.8; }
.stars span:nth-child(6)  { top: 55%; left: 15%; --d: 3.5s; opacity: 0.3; width: 3px; height: 3px; }
.stars span:nth-child(7)  { top: 60%; left: 85%; --d: 2.8s; opacity: 0.6; }
.stars span:nth-child(8)  { top: 70%; left: 40%; --d: 4.0s; opacity: 0.4; }
.stars span:nth-child(9)  { top: 78%; left: 70%; --d: 2.2s; opacity: 0.7; width: 1px; height: 1px; }
.stars span:nth-child(10) { top: 88%; left: 25%; --d: 3.3s; opacity: 0.5; }
.stars span:nth-child(11) { top: 5%;  left: 92%; --d: 2.7s; opacity: 0.6; }
.stars span:nth-child(12) { top: 48%; left: 5%;  --d: 3.1s; opacity: 0.8; }
.stars span:nth-child(13) { top: 92%; left: 55%; --d: 4.5s; opacity: 0.3; width: 3px; height: 3px; }
.stars span:nth-child(14) { top: 18%; left: 65%; --d: 2.3s; opacity: 0.5; }
.stars span:nth-child(15) { top: 72%; left: 90%; --d: 3.7s; opacity: 0.4; }
.stars span:nth-child(16) { top: 32%; left: 50%; --d: 2.9s; opacity: 0.9; width: 1px; height: 1px; }
.stars span:nth-child(17) { top: 50%; left: 75%; --d: 3.4s; opacity: 0.6; }
.stars span:nth-child(18) { top: 65%; left: 10%; --d: 2.1s; opacity: 0.7; }
.stars span:nth-child(19) { top: 10%; left: 35%; --d: 4.8s; opacity: 0.2; }
.stars span:nth-child(20) { top: 82%; left: 48%; --d: 2.6s; opacity: 0.5; }

@keyframes twinkle {
  0%   { opacity: var(--o, 0.3); transform: scale(0.8); }
  100% { opacity: var(--o, 1);   transform: scale(1.2); }
}

/* ── Rosalina & Luma character art ── */
.bg-character {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 420px;
  height: 100vh;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.bg-character::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 420px;
  height: 90vh;
  background: url('bg-bby.jpg') no-repeat bottom center;
  background-size: contain;
  opacity: 0.65;
  filter: drop-shadow(0 0 60px rgba(100,180,255,0.15));
  animation: charFloat 6s ease-in-out infinite;
}
/* Glow aura behind the character */
.bg-character::after {
  content: '';
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(100,180,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes charFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Gradient overlay for readability ── */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(5,10,32,0.55) 0%,
    rgba(5,10,32,0.35) 40%,
    rgba(5,10,32,0.30) 60%,
    rgba(5,10,32,0.50) 80%,
    rgba(5,10,32,0.75) 100%
  );
  pointer-events: none;
}

/* ── Cosmic blue color palette ── */
:root {
  --blue-light:    #87CEEB;
  --blue-pale:     #B0E0E6;
  --blue-sky:      #6BB5FF;
  --blue-star:     #4A9EFF;
  --blue-deep:     #1C3F8A;
  --blue-mid:      #2A5CB8;
  --blue-dark:     #0F1F4A;
  --blue-glow:     rgba(100,180,255,0.15);
  --text-primary:  #f0f4ff;
  --text-secondary:#b0c4ff;
  --text-muted:    #7a8ec0;
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);
  --gold:          #FFD700;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Nav ── */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0 2rem;
}
.logo {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-star), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(100,180,255,0.2);
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color .2s, text-shadow .2s;
}
.nav-links a:hover {
  color: var(--blue-light);
  text-shadow: 0 0 12px rgba(135,206,235,0.3);
}

/* ── Hero ── */
.hero {
  text-align: center;
  padding: 2.5rem 0 3.5rem;
}
.emoji-row {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 20px rgba(135,206,235,0.2));
}
.hero h1 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.hero h1 span {
  background: linear-gradient(135deg, var(--blue-light), var(--blue-star), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(100,180,255,0.15));
}
.hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}



/* ── Section titles ── */
.section-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
}
.section-title span {
  background: linear-gradient(135deg, var(--blue-light), var(--blue-star));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Streams grid ── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  margin-bottom: 3.5rem;
}
.game-card {
  background: var(--glass-bg);
  border: 1px solid rgba(135,206,235,0.08);
  border-radius: 1.2rem;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.game-card:hover {
  background: rgba(74,158,255,0.06);
  border-color: rgba(135,206,235,0.2);
  box-shadow: 0 4px 20px var(--blue-glow);
}
.game-card .emoji { font-size: 2.4rem; margin-bottom: 0.5rem; }
.game-card h4 { font-family: 'Fredoka', sans-serif; font-size: 1rem; margin-bottom: 0.2rem; }
.game-card p { font-size: 0.8rem; color: var(--text-muted); }

/* ── Status badge ── */
.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.3rem;
}
.status-badge.online {
  background: rgba(34,197,94,.15);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.25);
}
.status-badge.offline {
  background: rgba(100,100,140,.12);
  color: var(--text-muted);
  border: 1px solid rgba(100,100,140,.1);
}

/* ── Social / CTA ── */
.cta-section {
  text-align: center;
  padding: 1.5rem 0 3rem;
}
.cta-section p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(135,206,235,0.06);
  border: 1px solid rgba(135,206,235,0.12);
  border-radius: 2rem;
  padding: 0.65rem 1.4rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all .3s;
}
.social-btn:hover {
  background: rgba(74,158,255,0.12);
  border-color: var(--blue-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--blue-glow);
}
.social-btn .emoji { font-size: 1.2rem; }

.divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-light), var(--blue-star), var(--gold));
  border-radius: 3px;
  margin: 0 auto 2.5rem;
}

/* ── Contact form ── */
.contact-form {
  max-width: 480px;
  margin: 0 auto 2rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(135,206,235,0.12);
  border-radius: 0.9rem;
  padding: 0.8rem 1rem;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue-star);
  box-shadow: 0 0 0 3px rgba(74,158,255,0.12);
}
.contact-form textarea {
  min-height: 100px;
  resize: vertical;
}
.contact-form button {
  width: 100%;
  background: linear-gradient(135deg, var(--blue-star), var(--blue-mid));
  border: none;
  border-radius: 2rem;
  padding: 0.8rem 1.5rem;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74,158,255,0.3);
}
.contact-form button:active {
  transform: translateY(0);
}

.contact-msg {
  text-align: center;
  padding: 0.8rem;
  border-radius: 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.contact-msg.success {
  background: rgba(34,197,94,.08);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.15);
}
.contact-msg.error {
  background: rgba(239,68,68,.08);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.15);
}

/* ── Counter ── */
.visitor-counter {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
  margin-top: -1.5rem;
  margin-bottom: 1rem;
}

/* ── Footer ── */
footer {
  text-align: center;
  padding: 2rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}
footer .heart {
  background: linear-gradient(135deg, var(--blue-pale), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Flash messages ── */
.flash-msg {
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.flash-msg.success { background: rgba(34,197,94,.08); color: #4ade80; border: 1px solid rgba(34,197,94,.15); }
.flash-msg.error   { background: rgba(239,68,68,.08); color: #f87171; border: 1px solid rgba(239,68,68,.15); }

/* ── Twitch Embed ── */
.twitch-wrap {
  max-width: 800px;
  margin: 0 auto 2rem;
}
.twitch-player {
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(135,206,235,0.15);
  box-shadow: 0 8px 40px rgba(74,158,255,0.1);
  transition: box-shadow .3s;
}
.twitch-player:hover {
  box-shadow: 0 12px 50px rgba(74,158,255,0.2);
}
.twitch-player iframe {
  display: block;
  border: none;
}
.twitch-cta {
  text-align: center;
  margin-top: 1rem;
}
.twitch-btn {
  background: rgba(145,70,255,0.12) !important;
  border-color: rgba(145,70,255,0.25) !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.05rem !important;
  padding: 0.75rem 2rem !important;
}
.twitch-btn:hover {
  background: rgba(145,70,255,0.2) !important;
  border-color: #9146FF !important;
  box-shadow: 0 4px 20px rgba(145,70,255,0.25) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .bg-character {
    width: 250px;
    opacity: 0.4;
  }
  .bg-character::before {
    width: 250px;
  }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 2.2rem; }
  .emoji-row { font-size: 2.5rem; }
  .nav-links { display: none; }
  .games-grid { grid-template-columns: 1fr 1fr; }
  .bg-character {
    width: 180px;
    opacity: 0.3;
  }
  .bg-character::before {
    width: 180px;
  }
}