/* YoshiSenpaiIsCute site styles */
:root {
  color-scheme: dark;
  /* Pink theme */
  --bg: #120a12; /* deep pink-ish background */
  --panel: #1a0f1a; /* soft plum panel */
  --text: #ffeef5; /* warm light text */
  --muted: #ffcee1; /* pastel pink for muted text */
  --accent: #ff7eb6; /* pink accent */
  /* Pastel heart palette */
  --heart-pink: #ffb3c7;
  --heart-lilac: #e3ccff;
  --heart-mint: #c9fff0;
  --heart-yellow: #ffe7b8;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(255, 126, 182, 0.18), transparent),
    radial-gradient(900px 600px at 10% -10%, rgba(227, 204, 255, 0.22), transparent),
    var(--bg);
  color: var(--text);
}

/* Cute subtle heart pattern overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'>\
    <g fill='none' stroke='none' fill-opacity='0.18'>\
      <path fill='%23ffb3c7' d='M20 22c3-8 14-8 17 0 3-8 14-8 17 0 1 9-9 15-17 22-8-7-18-13-17-22z'/>\
      <circle fill='%23e3ccff' cx='62' cy='16' r='6'/>\
      <circle fill='%23c9fff0' cx='10' cy='58' r='5'/>\
      <path fill='%23ffe7b8' d='M52 56c2.2-5.8 10.2-5.8 12.4 0 2.2-5.8 10.2-5.8 12.4 0 .8 6.5-6.6 10.8-12.4 15.8C58.6 66.8 51.2 62.5 52 56z'/>\
    </g>\
  </svg>");
  background-size: 120px 120px;
  opacity: 0.18;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(10,10,16,0.6);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}
.container { max-width: 1280px; margin: 1rem auto 0; padding: 0 1rem; }

/* About panel */
.about-panel { position: relative; overflow: hidden; }
.about-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 85% -20%, rgba(255,159,198,.25), transparent),
              radial-gradient(460px 300px at 0% 120%, rgba(227,204,255,.25), transparent);
  pointer-events: none;
}
.about-panel .badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem; border-radius: 999px;
  font-weight: 700; font-size: .85rem; letter-spacing: .2px;
  background: linear-gradient(135deg, var(--heart-pink), var(--heart-lilac));
  color: #1a0f1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.pill::before { content: "❤"; font-size: .9rem; color: #ff6aa7; }
.about-text { color: var(--text); opacity: .95; line-height: 1.6; margin: .25rem 0 0; }
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  letter-spacing: .2px;
}
.brand .dot { width: 10px; height: 10px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 12px #22c55e; }
.brand a {
  color: var(--text);
  text-decoration: none;
}
.brand a:hover { color: #fff; }

.layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 1rem;
  align-items: start;
  max-width: 1280px;
  margin: 1rem auto;
  padding: 0 1rem 2rem;
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: clip;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card { padding: 1rem; }
.muted { color: var(--muted); font-size: .95rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,126,182,.25), rgba(255,126,182,.08));
  color: var(--text); text-decoration: none; font-weight: 600;
}
.btn:hover { border-color: rgba(255,255,255,.18); }
.btn.primary { background: linear-gradient(180deg, #ff9fc6, #ff6aa7); border-color: #ff4f98; }
.btn.primary:hover { filter: brightness(1.05); }

footer { color: var(--muted); text-align: center; padding: 2rem 1rem; }

/* Cute socials */
.socials {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.btn.social {
  position: relative;
  border-radius: 999px;
  padding: .65rem 1rem;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  background: linear-gradient(135deg, var(--heart-pink), var(--heart-lilac));
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.btn.social:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.btn.social svg { width: 1.1rem; height: 1.1rem; }
.btn .label { line-height: 1; }
.btn.social::after {
  content: "♡";
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: .9;
  color: var(--heart-pink);
  animation: heart-pulse 2.4s ease-in-out infinite;
}
.btn.social::before {
  content: "";
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--heart-yellow), transparent 70%),
              radial-gradient(circle at 70% 70%, var(--heart-mint), transparent 70%);
  filter: blur(.2px);
  opacity: .8;
}

@keyframes heart-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  20% { transform: translateY(-50%) scale(1.1); }
  40% { transform: translateY(-50%) scale(1); }
}
.btn.social.x {
  background: linear-gradient(135deg, var(--heart-lilac), var(--heart-mint));
  border-color: rgba(255,255,255,.18);
}
.btn.social.x svg { fill: #fff; }

.btn.social.tiktok {
  background: linear-gradient(135deg, var(--heart-pink), var(--heart-yellow));
  border-color: rgba(255,255,255,.18);
}
.btn.social.tiktok svg { fill: #fff; }

.btn.social.youtube {
  background: linear-gradient(135deg, #ffd1e2, #ff9fc6);
  border-color: #ffb3c7cc;
}
.btn.social.youtube svg { fill: #fff; }

.btn.social.discord {
  background: linear-gradient(135deg, #c7d2ff, #a5b4ff); /* pastel blurple */
  border-color: rgba(197, 208, 255, 0.7);
}
.btn.social.discord svg { fill: #fff; }

.btn.social.donate {
  background: linear-gradient(135deg, #ffe0ea, #ffd1b3); /* pink to peach */
  border-color: rgba(255, 179, 199, 0.8);
}
.btn.social.donate svg { fill: #fff; }

/* Image card for Yoshi */
.image-card .photo-frame {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: radial-gradient(600px 400px at 70% -10%, rgba(255,159,198,.25), transparent),
              radial-gradient(400px 300px at 0% 100%, rgba(227,204,255,.25), transparent),
              #1f1320;
}
.image-card .photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.image-card .photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 80px at 10% 10%, rgba(255,179,199,.25), transparent 70%),
              radial-gradient(120px 80px at 90% 90%, rgba(201,255,240,.25), transparent 70%);
  pointer-events: none;
}