/* LoveSpark — styles.css
   Bubblegum Y2K kawaii. Textural. Nostalgic. Intentionally not minimal.
*/

/* ══════════════════════════════════ TOKENS ══════════════════════════════════ */
:root {
  --bg:          #1a0a12;
  --bg-card:     #f8edf3;
  --hot-pink:    #ff6eb4;
  --bubblegum:   #ffb3d9;
  --cream:       #fff5f9;
  --purple:      #c084fc;
  --deep-wine:   #3d0c22;
  --muted-pink:  #9c4a6e;
  --text-dark:   #2a0a18;
  --glow:        rgba(255, 110, 180, 0.5);
  --glow-purple: rgba(192, 132, 252, 0.35);

  --font-pixel: 'Press Start 2P', monospace;
  --font-mono:  'DM Mono', 'Courier New', monospace;
}

/* ══════════════════════════════════ RESET ═══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ════════════════════════════ GRAIN OVERLAY ═════════════════════════════════ */
.grain-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* ════════════════════════════ GLOW BLOBS ════════════════════════════════════ */
.glow-blob {
  pointer-events: none;
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  animation: blobDrift 18s ease-in-out infinite alternate;
}

.glow-blob-1 {
  width: 500px; height: 500px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(255,110,180,0.22) 0%, transparent 70%);
  animation-duration: 20s;
}

.glow-blob-2 {
  width: 400px; height: 400px;
  bottom: 10%; right: -80px;
  background: radial-gradient(circle, rgba(192,132,252,0.2) 0%, transparent 70%);
  animation-duration: 25s;
  animation-delay: -8s;
}

.glow-blob-3 {
  width: 300px; height: 300px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,110,180,0.1) 0%, transparent 70%);
  animation-duration: 30s;
  animation-delay: -14s;
}

@keyframes blobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.05); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}

/* ════════════════════════════ SPIRAL CANVAS ═════════════════════════════════ */
#spiral-canvas {
  pointer-events: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.07;
}

/* ════════════════════════════ SPARKLE FIELD ═════════════════════════════════ */
#sparkle-field {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
}

#sparkle-field .spark {
  position: absolute;
  color: var(--hot-pink);
  font-size: 12px;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  will-change: opacity, transform;
}

@keyframes twinkle {
  0%, 100% { opacity: 0;    transform: scale(0.6) rotate(0deg); }
  50%       { opacity: 0.8; transform: scale(1.2) rotate(20deg); }
}

/* ════════════════════════════ CURSOR SPARKS ═════════════════════════════════ */
#cursor-sparks {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.cursor-spark {
  position: absolute;
  pointer-events: none;
  font-size: 11px;
  color: var(--hot-pink);
  animation: sparkRise 0.8s ease-out forwards;
  will-change: transform, opacity;
  user-select: none;
}

@keyframes sparkRise {
  0%   { opacity: 1; transform: translate(0, 0)         scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* ════════════════════════════════ HERO ══════════════════════════════════════ */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* ── Starburst ──────────────────────────────────────────────────────────────── */
.starburst-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  z-index: -1;
}

.starburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg 10deg,
    rgba(255,110,180,0.06) 10deg 20deg,
    transparent 20deg 30deg,
    rgba(192,132,252,0.05) 30deg 40deg,
    transparent 40deg 50deg,
    rgba(255,110,180,0.06) 50deg 60deg,
    transparent 60deg 70deg,
    rgba(192,132,252,0.04) 70deg 80deg,
    transparent 80deg 90deg,
    rgba(255,110,180,0.06) 90deg 100deg,
    transparent 100deg 110deg,
    rgba(192,132,252,0.05) 110deg 120deg,
    transparent 120deg 130deg,
    rgba(255,110,180,0.06) 130deg 140deg,
    transparent 140deg 150deg,
    rgba(192,132,252,0.04) 150deg 160deg,
    transparent 160deg 170deg,
    rgba(255,110,180,0.06) 170deg 180deg,
    transparent 180deg 190deg,
    rgba(192,132,252,0.05) 190deg 200deg,
    transparent 200deg 210deg,
    rgba(255,110,180,0.06) 210deg 220deg,
    transparent 220deg 230deg,
    rgba(192,132,252,0.04) 230deg 240deg,
    transparent 240deg 250deg,
    rgba(255,110,180,0.06) 250deg 260deg,
    transparent 260deg 270deg,
    rgba(192,132,252,0.05) 270deg 280deg,
    transparent 280deg 290deg,
    rgba(255,110,180,0.06) 290deg 300deg,
    transparent 300deg 310deg,
    rgba(192,132,252,0.04) 310deg 320deg,
    transparent 320deg 330deg,
    rgba(255,110,180,0.06) 330deg 340deg,
    transparent 340deg 350deg,
    rgba(192,132,252,0.05) 350deg 360deg
  );
  border-radius: 50%;
  animation: starburstSpin 40s linear infinite;
}

.starburst-slow {
  width: 500px;
  height: 500px;
  animation: starburstSpin 70s linear infinite reverse;
  opacity: 0.6;
}

@keyframes starburstSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Heart orb ──────────────────────────────────────────────────────────────── */
.heart-orb {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heart-glyph {
  font-size: 3rem;
  color: var(--hot-pink);
  text-shadow:
    0 0 20px var(--hot-pink),
    0 0 40px var(--hot-pink),
    0 0 80px rgba(255,110,180,0.5);
  animation: heartPulse 2.4s ease-in-out infinite;
  display: block;
  line-height: 1;
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%       { transform: scale(1.12); filter: brightness(1.2); }
}

.orb-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid;
  transform: translate(-50%, -50%);
  animation: ringExpand 3s ease-out infinite;
}

.orb-ring-1 { width: 80px;  height: 80px;  border-color: rgba(255,110,180,0.6);  animation-delay: 0s; }
.orb-ring-2 { width: 80px;  height: 80px;  border-color: rgba(255,110,180,0.35); animation-delay: 1s; }
.orb-ring-3 { width: 80px;  height: 80px;  border-color: rgba(192,132,252,0.25); animation-delay: 2s; }

@keyframes ringExpand {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

/* ── Logo & text ────────────────────────────────────────────────────────────── */
.logo-text {
  font-family: var(--font-pixel);
  font-size: clamp(1.6rem, 5vw, 3rem);
  color: var(--hot-pink);
  text-shadow:
    0 0 12px var(--hot-pink),
    0 0 30px rgba(255,110,180,0.6),
    2px 2px 0 var(--deep-wine),
    4px 4px 0 rgba(192,132,252,0.3);
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: var(--bubblegum);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.sub-tagline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-pink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Hero social links ──────────────────────────────────────────────────── */
.hero-socials {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-social-link {
  color: #ff4da6;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 77, 166, 0.6), 0 0 20px rgba(255, 77, 166, 0.3);
  transition: text-shadow 0.2s ease, color 0.2s ease;
}

.hero-social-link:hover {
  color: #ff70b8;
  text-shadow:
    0 0 10px rgba(255, 77, 166, 0.8),
    0 0 30px rgba(255, 77, 166, 0.5),
    0 0 50px rgba(255, 77, 166, 0.25);
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.hero-cta {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--hot-pink);
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  text-decoration: none;
  letter-spacing: 0.08em;
  border: 2px solid var(--cream);
  box-shadow:
    4px 4px 0 var(--deep-wine),
    0 0 20px rgba(255,110,180,0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hero-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 var(--deep-wine),
    0 0 30px rgba(255,110,180,0.7);
}

.hero-cta--null {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #f5e9ff;
  border-color: #c084fc;
  box-shadow:
    4px 4px 0 #3b0764,
    0 0 18px rgba(168,85,247,0.6),
    0 0 36px rgba(124,58,237,0.3);
}

.hero-cta--null:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 #3b0764,
    0 0 28px rgba(168,85,247,0.8),
    0 0 56px rgba(124,58,237,0.5);
}

.hero-cta--zara {
  background: #000000;
  color: #f5d742;
  border-color: #cc2222;
  text-shadow: 0 0 8px rgba(245,215,66,0.6);
  box-shadow:
    4px 4px 0 #1a0000,
    0 0 12px rgba(204,34,34,0.4),
    0 0 28px rgba(204,34,34,0.15);
}

.hero-cta--zara:hover {
  transform: translate(-2px, -2px);
  text-shadow: 0 0 14px rgba(245,215,66,0.9);
  box-shadow:
    6px 6px 0 #1a0000,
    0 0 20px rgba(204,34,34,0.6),
    0 0 48px rgba(204,34,34,0.25);
}

.hero-cta--forging {
  background: #0A0A0A;
  color: #FF6A00;
  border-color: #FF6A00;
  text-shadow: 0 0 8px rgba(255,106,0,0.6);
  box-shadow:
    4px 4px 0 #1a0800,
    0 0 12px rgba(255,106,0,0.4),
    0 0 28px rgba(255,106,0,0.15);
}

.hero-cta--forging:hover {
  transform: translate(-2px, -2px);
  text-shadow: 0 0 14px rgba(255,106,0,0.9);
  box-shadow:
    6px 6px 0 #1a0800,
    0 0 20px rgba(255,106,0,0.6),
    0 0 48px rgba(255,106,0,0.25);
}

.hero-cta--games {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  color: #ffffff;
  border-color: #38bdf8;
  text-shadow: 0 0 8px rgba(255,182,218,0.5), 0 0 20px rgba(56,189,248,0.4);
  box-shadow:
    4px 4px 0 #0c4a6e,
    0 0 12px rgba(14,165,233,0.5),
    0 0 28px rgba(14,165,233,0.2),
    0 0 40px rgba(255,110,180,0.1);
}

.hero-cta--games:hover {
  transform: translate(-2px, -2px);
  text-shadow: 0 0 14px rgba(255,182,218,0.8), 0 0 28px rgba(56,189,248,0.6);
  box-shadow:
    6px 6px 0 #0c4a6e,
    0 0 20px rgba(14,165,233,0.7),
    0 0 48px rgba(14,165,233,0.3),
    0 0 60px rgba(255,110,180,0.15);
}

/* ════════════════════════════ SECTION HEADERS ═══════════════════════════════ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 3rem;
}

.section-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.85rem, 2.5vw, 1.2rem);
  color: var(--cream);
  text-shadow: 0 0 12px rgba(255,110,180,0.4);
  letter-spacing: 0.1em;
}

.section-deco {
  color: var(--hot-pink);
  font-size: 1.3rem;
  text-shadow: 0 0 8px var(--hot-pink);
  animation: twinkle 2.5s ease-in-out infinite;
}

.section-deco:nth-child(3) { animation-delay: 1.2s; }

/* ════════════════════════════ TOOLS SECTION ═════════════════════════════════ */
.tools-section {
  position: relative;
  z-index: 2;
  padding: 6rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* ════════════════════════════ WIN98 CARDS ═══════════════════════════════════ */
.win98-card {
  background: var(--bg-card);
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #7a3050;
  border-bottom: 2px solid #7a3050;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.8),
    inset -1px -1px 0 rgba(100,30,60,0.4),
    4px 4px 0 rgba(0,0,0,0.4),
    0 0 30px rgba(255,110,180,0.08);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.18s ease;
}

.win98-card:hover {
  transform: translate(-3px, -4px);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.8),
    inset -1px -1px 0 rgba(100,30,60,0.4),
    8px 8px 0 rgba(0,0,0,0.5),
    0 0 40px rgba(255,110,180,0.2);
}

/* Titlebar */
.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  background: linear-gradient(90deg, #c8458a 0%, #e8659c 40%, #b0307a 100%);
  border-bottom: 1px solid #8a2060;
  user-select: none;
}

.win-title {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
}

.win-buttons {
  display: flex;
  gap: 3px;
}

.win-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  font-size: 0.5rem;
  background: linear-gradient(180deg, #f0c0d8 0%, #d890b0 100%);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #8a3060;
  border-bottom: 1px solid #8a3060;
  color: var(--text-dark);
  cursor: default;
  flex-shrink: 0;
}

.win-btn:hover { background: linear-gradient(180deg, #ffd0e8 0%, #e8a0c0 100%); }

.win-btn-close {
  background: linear-gradient(180deg, #f090b0 0%, #d06090 100%);
}

.win-btn-close:hover {
  background: linear-gradient(180deg, #ff8080 0%, #cc4060 100%);
}

/* Card body */
.card-body {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.card-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--hot-pink);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--deep-wine);
  align-self: flex-start;
}

.card-desc {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dark);
  line-height: 1.6;
}

.card-link {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.45rem 1.1rem;
  background: linear-gradient(180deg, #ff8ec8 0%, #e0508a 100%);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-top: 2px solid #ffcce8;
  border-left: 2px solid #ffcce8;
  border-right: 2px solid #8a2060;
  border-bottom: 2px solid #8a2060;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  align-self: flex-start;
  transition: transform 0.1s ease;
}

.card-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}

.card-link--soon {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted-pink);
  letter-spacing: 0.04em;
}

/* ════════════════════════════ NOTICE SECTION ════════════════════════════════ */
.notice-section {
  position: relative;
  z-index: 2;
  padding: 3rem 2rem 0;
  text-align: center;
}

.notice-inner {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 110, 180, 0.06);
  border: 1px solid rgba(255, 110, 180, 0.2);
  padding: 2rem 2.5rem;
  border-radius: 12px;
}

.notice-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--bubblegum);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.notice-link {
  color: var(--hot-pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 110, 180, 0.4);
  transition: border-color 0.2s ease;
}

.notice-link:hover {
  border-color: var(--hot-pink);
}

/* ════════════════════════════ MISSION SECTION ═══════════════════════════════ */
.mission-section {
  position: relative;
  z-index: 2;
  padding: 6rem 2rem;
  text-align: center;
}

.mission-inner {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,110,180,0.2);
  padding: 3rem 2.5rem;
  box-shadow:
    inset 0 0 40px rgba(255,110,180,0.04),
    0 0 40px rgba(255,110,180,0.06);
}

.mission-text {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--bubblegum);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.mission-sparkles {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.mission-sparkles span {
  color: var(--hot-pink);
  font-size: 1.1rem;
  text-shadow: 0 0 8px var(--hot-pink);
  animation: twinkle 2s ease-in-out infinite;
}

.mission-sparkles span:nth-child(1) { animation-delay: 0s;    color: var(--hot-pink); }
.mission-sparkles span:nth-child(2) { animation-delay: 0.4s;  color: var(--bubblegum); }
.mission-sparkles span:nth-child(3) { animation-delay: 0.8s;  color: var(--hot-pink); }
.mission-sparkles span:nth-child(4) { animation-delay: 1.2s;  color: var(--purple); }
.mission-sparkles span:nth-child(5) { animation-delay: 1.6s;  color: var(--bubblegum); }

/* ════════════════════════════ SUPPORT SECTION ═══════════════════════════════ */
.support-section {
  position: relative;
  z-index: 2;
  padding: 5rem 2rem;
  text-align: center;
}

.support-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.support-text {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--cream);
  line-height: 1.7;
}

.kofi-btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  background: linear-gradient(135deg, #ff6eb4 0%, #c084fc 100%);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow:
    4px 4px 0 rgba(0,0,0,0.4),
    0 0 24px rgba(255,110,180,0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kofi-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 rgba(0,0,0,0.5),
    0 0 36px rgba(255,110,180,0.6);
}

.support-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-pink);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════ FOOTER ════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 2;
  padding: 3rem 2rem 4rem;
  text-align: center;
  border-top: 1px solid rgba(255,110,180,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-pink);
  letter-spacing: 0.06em;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--bubblegum);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.footer-link:hover {
  color: var(--hot-pink);
  text-shadow: 0 0 8px var(--hot-pink);
}

.footer-sep {
  color: var(--hot-pink);
  font-size: 0.8rem;
  opacity: 0.6;
}

.footer-heart {
  color: var(--hot-pink);
  font-size: 1.4rem;
  text-shadow: 0 0 10px var(--hot-pink);
  animation: heartPulse 3s ease-in-out infinite;
}

/* ════════════════════════════════ RESPONSIVE ════════════════════════════════ */
@media (max-width: 600px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 5rem 1.5rem 3rem;
  }

  .notice-inner {
    padding: 1.5rem 1.2rem;
  }

  .mission-inner {
    padding: 2rem 1.5rem;
  }

  .win-title {
    font-size: 0.48rem;
  }
}

/* ════════════════════════════ AARON CARD ════════════════════════════════════ */
.win98-card--aaron {
  background: #0d1117;
  border-top: 2px solid #1a5c35;
  border-left: 2px solid #1a5c35;
  border-right: 2px solid #071a0e;
  border-bottom: 2px solid #071a0e;
  box-shadow:
    inset 1px 1px 0 rgba(34,197,94,0.12),
    inset -1px -1px 0 rgba(0,0,0,0.6),
    4px 4px 0 rgba(0,0,0,0.6),
    0 0 30px rgba(34,197,94,0.05);
}

.win98-card--aaron:hover {
  box-shadow:
    inset 1px 1px 0 rgba(34,197,94,0.12),
    inset -1px -1px 0 rgba(0,0,0,0.6),
    8px 8px 0 rgba(0,0,0,0.6),
    0 0 40px rgba(34,197,94,0.14);
}

.win98-card--aaron .titlebar {
  background: linear-gradient(90deg, #071a0e 0%, #0f3d22 45%, #071a0e 100%);
  border-bottom: 1px solid #1a5c35;
}

.win98-card--aaron .win-btn {
  background: linear-gradient(180deg, #0f3d22 0%, #071a0e 100%);
  border-top: 1px solid #22c55e;
  border-left: 1px solid #22c55e;
  border-right: 1px solid #071a0e;
  border-bottom: 1px solid #071a0e;
  color: #86efac;
}

.win98-card--aaron .win-btn:hover {
  background: linear-gradient(180deg, #166534 0%, #0d4a26 100%);
}

.win98-card--aaron .win-btn-close {
  background: linear-gradient(180deg, #1a3520 0%, #0a1f10 100%);
}

.win98-card--aaron .win-btn-close:hover {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
}

.win98-card--aaron .card-badge {
  background: #22c55e;
  color: #052e16;
  border-color: #16a34a;
}

.win98-card--aaron .card-desc {
  color: #94a3b8;
}

.win98-card--aaron .card-link--soon {
  color: #22c55e;
  font-style: normal;
  opacity: 0.75;
}

.win98-card--aaron .card-link {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  border-top: 2px solid #86efac;
  border-left: 2px solid #86efac;
  border-right: 2px solid #0a5c2b;
  border-bottom: 2px solid #0a5c2b;
}

.aaron-memorial {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #4b5563;
  font-style: italic;
  letter-spacing: 0.03em;
  border-top: 1px solid #1e2d22;
  padding-top: 0.65rem;
  margin-top: 0.1rem;
}

/* ════════════════════════════ SCROLLBAR ═════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--hot-pink), var(--purple));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--hot-pink); }

/* ════════════════════════════ SELECTION ═════════════════════════════════════ */
::selection {
  background: rgba(255,110,180,0.35);
  color: var(--cream);
}