@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --neon-pink: #ff1493;
  --neon-green: #00ff41;
  --neon-blue: #00e5ff;
  --neon-yellow: #ffe600;
  --neon-orange: #ff4400;
  --neon-purple: #bf00ff;
  --neon-red: #ff0030;
  --dark-bg: #05051a;
  --window-bg: #000060;
  --window-light: #d0d0d0;
  --window-dark: #606060;
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Comic Sans MS', 'Courier New', cursive, sans-serif;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--dark-bg);
  color: var(--neon-green);
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><text y='18' font-size='18'>⭐</text></svg>"),
    auto;
  overflow-x: hidden;
}

#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

#cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ===== SCROLLBAR RETRO ===== */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: #000;
  border: 2px solid var(--neon-pink);
  box-shadow: inset 0 0 6px var(--neon-pink);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-purple));
  border: 2px outset var(--window-light);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--neon-yellow), var(--neon-orange));
}

/* ===== MAIN LAYOUT ===== */
#main-table {
  max-width: 800px;
  width: 96%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 4px ridge var(--neon-pink);
  background: rgba(0, 0, 0, 0.8);
  box-shadow:
    0 0 20px var(--neon-blue),
    0 0 40px var(--neon-pink),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
}

#header {
  text-align: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(204, 0, 255, 0.3), rgba(0, 0, 0, 0.5));
  border-bottom: 3px ridge var(--neon-pink);
}

#nav {
  width: 180px;
  vertical-align: top;
  background: rgba(0, 0, 128, 0.4);
  border-right: 3px ridge var(--neon-blue);
  padding: 10px;
}

#content {
  padding: 20px;
  vertical-align: top;
  min-height: 400px;
}

#footer {
  text-align: center;
  padding: 15px;
  background: linear-gradient(0deg, rgba(204, 0, 255, 0.3), rgba(0, 0, 0, 0.5));
  border-top: 3px ridge var(--neon-pink);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
  #main-table,
  #main-table tbody,
  #main-table tr,
  #main-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #nav {
    border-right: none;
    border-bottom: 3px ridge var(--neon-blue);
  }
  #content {
    padding: 10px;
  }
  .construction-bar {
    width: 100%;
  }
  .card {
    flex: 1 1 100%;
  }
  #music-player {
    width: 280px;
    right: 5px;
    bottom: 5px;
  }
  .footer-credits {
    gap: 10px;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 15px;
  }
  h2 {
    font-size: 11px;
  }
  .counter-digits {
    font-size: 26px;
  }
  .gif-card {
    width: 45%;
  }
  .game-card {
    flex: 1 1 100%;
  }
  .window-body {
    padding: 8px;
  }
  .nav-link {
    padding: 10px 8px;
    font-size: 9px;
  }
  .marquee-text {
    animation-duration: 25s;
  }
  #music-player {
    width: 240px;
  }
  .quiz-option {
    font-size: 9px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 13px;
  }
  h2 {
    font-size: 10px;
  }
  #music-player {
    width: 200px;
    right: 3px;
    bottom: 3px;
  }
  .counter-digits {
    font-size: 20px;
    padding: 3px 10px;
  }
  .badges {
    gap: 4px;
  }
  .badge {
    width: 72px;
    height: 26px;
    font-size: 6px;
  }
  .footer-credits {
    flex-direction: column;
    gap: 3px;
    align-items: center;
  }
  .construction-bar {
    font-size: 6px;
    padding: 3px;
  }
  .guestbook-form input,
  .guestbook-form textarea {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  h1 {
    font-size: 11px;
  }
  h2 {
    font-size: 9px;
  }
  .nav-link {
    padding: 12px 8px;
    font-size: 8px;
  }
  .marquee-text {
    animation-duration: 30s;
    font-size: 9px;
  }
  .gif-card {
    width: 100%;
  }
  .specs-table td:first-child {
    font-size: 7px;
  }
  .content-text {
    font-size: 12px;
  }
  .quiz-option {
    font-size: 8px;
    padding: 12px 8px;
  }
}

/* ===== MARQUEE ===== */
.marquee-container {
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink), var(--neon-purple));
  border: 2px inset var(--window-light);
  padding: 5px;
  margin: 10px 0;
  overflow: hidden;
  box-shadow: 0 0 15px var(--neon-pink);
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 15s linear infinite;
  color: var(--neon-yellow);
  font-family: var(--font-pixel);
  font-size: 11px;
  text-shadow: 2px 2px 0 #000;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ===== BLINK ===== */
.blink {
  animation: blink-anim 1s step-end infinite;
}
@keyframes blink-anim {
  50% {
    opacity: 0;
  }
}
.blink-fast {
  animation: blink-anim 0.5s step-end infinite;
}

/* ===== RAINBOW DIVIDER ===== */
.rainbow-divider {
  height: 6px;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff6600,
    #ffff00,
    #39ff14,
    #00d4ff,
    #0000ff,
    #cc00ff,
    #ff0000
  );
  border: 2px outset var(--window-light);
  margin: 15px 0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.rainbow-divider hr {
  display: none;
}

.sparkle-divider {
  text-align: center;
  margin: 15px 0;
  font-size: 16px;
  letter-spacing: 5px;
  animation: sparkle-blink 2s step-start infinite;
}
@keyframes sparkle-blink {
  50% {
    opacity: 0.3;
  }
}

.welcome-subtitle {
  color: var(--neon-blue);
  font-family: 'Comic Sans MS', cursive;
  font-size: 16px;
  font-style: italic;
  margin: 5px 0;
}

/* ===== HEADINGS ===== */
h1 {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--neon-pink);
  text-shadow:
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-pink),
    2px 2px 0 #000;
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--neon-yellow);
  text-shadow:
    0 0 8px var(--neon-yellow),
    2px 2px 0 #000;
  margin-bottom: 10px;
}

h3 {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--neon-blue);
  text-shadow: 0 0 6px var(--neon-blue);
  margin-bottom: 8px;
}

/* ===== NAVIGATION ===== */
.nav-title {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--neon-yellow);
  text-align: center;
  text-shadow: 0 0 8px var(--neon-yellow);
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px dashed var(--neon-pink);
}

.nav-link {
  display: block;
  padding: 8px 10px;
  margin: 3px 0;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--neon-green);
  text-decoration: none;
  border: 2px outset var(--window-light);
  background: linear-gradient(180deg, #1a1a6e, #000080);
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  transition: all 0.2s;
  border-radius: 2px;
}

.nav-link:hover {
  color: var(--neon-yellow);
  border: 2px inset var(--neon-yellow);
  background: linear-gradient(180deg, #2a2a8e, #1a1a6e);
  box-shadow: 0 0 10px var(--neon-yellow);
  transform: scale(1.03);
}

.nav-link::before {
  content: '┌ ';
  color: var(--neon-pink);
}
.nav-link::after {
  content: ' ┐';
  color: var(--neon-pink);
}

.nav-link.active {
  color: var(--neon-yellow);
  border: 2px solid var(--neon-yellow);
  background: linear-gradient(180deg, #2a1a6e, #1a0a4e);
  box-shadow: 0 0 10px var(--neon-yellow);
}

.nav-counter {
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  border: 2px inset var(--window-light);
  background: #000;
}

.nav-counter-title {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--neon-yellow);
  margin-bottom: 5px;
}

.nav-counter-digits {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--neon-red);
  text-shadow: 0 0 10px var(--neon-red);
  background: #111;
  padding: 5px;
  letter-spacing: 3px;
}

/* ===== WINDOW BOX (Windows 98 style) ===== */
.window-box {
  border: 3px solid;
  border-color: var(--window-light) var(--window-dark) var(--window-dark) var(--window-light);
  background: rgba(0, 0, 64, 0.8);
  margin: 10px 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.window-title {
  background: linear-gradient(90deg, var(--neon-purple), #000080);
  color: #fff;
  padding: 3px 6px;
  font-family: var(--font-pixel);
  font-size: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.window-btn {
  width: 16px;
  height: 14px;
  border: 2px outset var(--window-light);
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 10px;
  text-align: center;
  cursor: pointer;
  color: #000;
  user-select: none;
}

.window-btn.minimize {
  background: #c0c0c0;
}
.window-btn.maximize {
  background: #c0c0c0;
}
.window-btn.close {
  background: #ff0000;
  color: #fff;
}

.window-body {
  padding: 15px;
}

/* ===== GLOW TEXT ===== */
.glow-pink {
  color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink);
}
.glow-green {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green);
}
.glow-blue {
  color: var(--neon-blue);
  text-shadow: 0 0 10px var(--neon-blue);
}
.glow-yellow {
  color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--neon-yellow);
}

/* ===== BUTTONS ===== */
.retro-btn {
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 8px 15px;
  background: linear-gradient(180deg, var(--neon-purple), #000080);
  color: var(--neon-yellow);
  border: 3px outset var(--window-light);
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
}

.retro-btn:hover {
  background: linear-gradient(180deg, var(--neon-pink), #400040);
  border: 3px inset var(--window-light);
  color: #fff;
}

.retro-btn:active {
  border-style: inset;
  background: #000;
}

/* ===== GUESTBOOK STYLES ===== */
.guestbook-form {
  margin-bottom: 20px;
}

.guestbook-form label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--neon-yellow);
  margin-top: 10px;
  margin-bottom: 3px;
}

.guestbook-form input,
.guestbook-form textarea {
  width: 100%;
  padding: 5px;
  background: #000;
  color: var(--neon-green);
  border: 2px inset var(--window-light);
  font-family: var(--font-body);
  font-size: 14px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
  outline: none;
  border-color: var(--neon-pink);
  box-shadow:
    0 0 10px var(--neon-pink),
    inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.guestbook-form textarea {
  height: 100px;
  resize: vertical;
}

.guestbook-entry {
  border: 2px ridge var(--neon-blue);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  margin: 8px 0;
}

.guestbook-entry .entry-name {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--neon-pink);
}

.guestbook-entry .entry-date {
  font-size: 10px;
  color: var(--window-dark);
  font-style: italic;
}

.guestbook-entry .entry-message {
  margin-top: 5px;
  color: var(--neon-green);
  line-height: 1.4;
}

.guestbook-divider {
  text-align: center;
  color: var(--neon-pink);
  font-size: 12px;
  margin: 10px 0;
}

/* ===== MUSIC PLAYER ===== */
#music-player {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 320px;
  z-index: 1000;
}

.player-window {
  border: 3px solid;
  border-color: var(--window-light) var(--window-dark) var(--window-dark) var(--window-light);
  background: #000040;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, 0.5),
    0 0 20px var(--neon-purple);
}

.player-titlebar {
  background: linear-gradient(90deg, #000080, #400080, #000080);
  color: #fff;
  padding: 3px 6px;
  font-family: var(--font-pixel);
  font-size: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-body {
  padding: 10px;
}

.player-display {
  background: #0a0a0a;
  border: 2px inset var(--window-light);
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
  overflow: hidden;
}

.player-title {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--neon-green);
  text-shadow: 0 0 6px var(--neon-green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  min-width: 100%;
}

.player-title.marquee {
  animation: marquee-scroll 8s linear infinite;
}

.player-artist {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--neon-yellow);
  margin-top: 3px;
}

.player-progress {
  width: 100%;
  height: 8px;
  background: #111;
  border: 1px inset var(--window-light);
  margin: 8px 0;
  position: relative;
}

.player-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
  transition: width 0.3s;
}

.player-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--neon-green);
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.player-btn {
  width: 40px;
  height: 30px;
  font-family: var(--font-pixel);
  font-size: 16px;
  background: linear-gradient(180deg, #2a2a8e, #000080);
  color: var(--neon-green);
  border: 2px outset var(--window-light);
  cursor: pointer;
  text-align: center;
  line-height: 26px;
}

.player-btn:hover {
  background: linear-gradient(180deg, #400080, #200040);
  border-color: var(--neon-pink);
  color: var(--neon-pink);
}

.player-btn:active {
  border-style: inset;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.player-volume label {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--neon-blue);
}

.player-volume input[type='range'] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #111;
  border: 1px inset var(--window-light);
  outline: none;
}

.player-volume input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 18px;
  background: linear-gradient(180deg, var(--neon-green), #006400);
  border: 2px outset var(--window-light);
  cursor: pointer;
}

/* ===== COUNTER ===== */
.counter-container {
  text-align: center;
  margin: 15px 0;
  padding: 10px;
  background: #000;
  border: 3px ridge var(--neon-blue);
  box-shadow: 0 0 15px var(--neon-blue);
}

.counter-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--neon-yellow);
  margin-bottom: 5px;
}

.counter-digits {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 32px;
  font-weight: bold;
  color: var(--neon-red);
  background: #111;
  padding: 5px 15px;
  border: 2px inset var(--window-light);
  text-shadow: 0 0 15px #ff0000;
  letter-spacing: 4px;
}

/* ===== BADGES / BUTTONS 88x31 ===== */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
}

.badge {
  width: 88px;
  height: 31px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 7px;
  text-align: center;
  cursor: default;
}

.badge-winamp {
  background: #000;
  color: var(--neon-green);
  border-color: var(--neon-green);
}
.badge-windows {
  background: linear-gradient(180deg, #0066cc, #003399);
  color: #fff;
  border-color: #3399ff;
}
.badge-geocities {
  background: linear-gradient(180deg, #ff6ec7, #cc00ff);
  color: #fff;
}
.badge-notepad {
  background: #ffffcc;
  color: #000;
  font-family: 'Comic Sans MS', cursive;
}
.badge-netscape {
  background: linear-gradient(180deg, #0066cc, #003366);
  color: #fff;
}
.badge-ie {
  background: linear-gradient(180deg, #0066ff, #003399);
  color: #fff;
}
.badge-counter {
  background: #000;
  color: var(--neon-red);
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

/* ===== QUIZ STYLES ===== */
.quiz-container {
  max-width: 600px;
  margin: 0 auto;
}

.quiz-question {
  margin-bottom: 20px;
  padding: 15px;
  border: 2px ridge var(--neon-blue);
  background: rgba(0, 0, 0, 0.5);
}

.quiz-question h3 {
  margin-bottom: 10px;
}

.quiz-option {
  display: block;
  padding: 8px 12px;
  margin: 4px 0;
  background: rgba(0, 0, 128, 0.3);
  border: 2px outset var(--window-light);
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--neon-green);
  transition: all 0.2s;
}

.quiz-option:hover {
  background: rgba(0, 0, 200, 0.5);
  border-color: var(--neon-yellow);
  color: var(--neon-yellow);
}

.quiz-option.selected {
  border: 2px solid var(--neon-yellow);
  background: rgba(255, 204, 0, 0.2);
  color: var(--neon-yellow);
  box-shadow: 0 0 10px var(--neon-yellow);
}

.quiz-result {
  text-align: center;
  padding: 20px;
}

.quiz-result-score {
  font-family: var(--font-pixel);
  font-size: 30px;
  color: var(--neon-yellow);
  text-shadow: 0 0 20px var(--neon-yellow);
  margin: 20px 0;
}

/* ===== CONTENT STYLES ===== */
.content-text {
  color: var(--neon-green);
  line-height: 1.6;
  font-size: 14px;
}

.content-text a {
  color: var(--neon-yellow);
  text-decoration: underline wavy var(--neon-pink);
}

.content-text a:hover {
  color: var(--neon-pink);
  text-shadow: 0 0 5px var(--neon-pink);
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card {
  flex: 1 1 200px;
  border: 2px ridge var(--neon-blue);
  padding: 12px;
  background: rgba(0, 0, 0, 0.5);
}

.card h4 {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--neon-yellow);
  text-shadow: 0 0 5px var(--neon-yellow);
  margin-bottom: 6px;
}

.card p {
  color: var(--neon-green);
  font-size: 12px;
  line-height: 1.4;
}

.highlight-box {
  background: rgba(255, 255, 0, 0.1);
  border: 2px dashed var(--neon-yellow);
  padding: 12px;
  margin: 10px 0;
}

.highlight-box p {
  color: var(--neon-yellow);
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.5;
}

/* ===== UPDATE LOG ===== */
.update-log {
  font-size: 11px;
}

.update-entry {
  border-bottom: 1px dotted var(--neon-blue);
  padding: 5px 0;
}

.update-date {
  color: var(--neon-pink);
  font-family: var(--font-pixel);
  font-size: 7px;
}

.update-badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 6px;
  padding: 2px 5px;
  margin-left: 5px;
}

.update-badge.new {
  background: var(--neon-red);
  color: #fff;
  animation: blink-anim 1s step-end infinite;
}

/* ===== CONSTRUCTION BAR ===== */
.construction-bar {
  background: repeating-linear-gradient(45deg, #ffcc00, #ffcc00 10px, #000 10px, #000 20px);
  color: #000;
  text-align: center;
  padding: 5px;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: bold;
  margin: 5px auto;
  border: 2px solid #000;
  max-width: 800px;
  width: 96%;
}

/* ===== FOOTER ELEMENTS ===== */
.footer-text {
  font-size: 10px;
  color: var(--window-dark);
  font-style: italic;
}

.footer-credits {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.footer-credits span {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--neon-blue);
}

/* ===== GLITTER TEXT (LatAm 2000s style) ===== */
@keyframes glitter {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.glitter-pink {
  background: linear-gradient(
    135deg,
    #ff6ec7,
    #ff1493,
    #ff6ec7,
    #ff00ff,
    #ff69b4,
    #ff1493,
    #ff6ec7,
    #ff00ff
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitter 3s ease infinite;
  text-shadow: none;
}

.glitter-gold {
  background: linear-gradient(
    135deg,
    #ffd700,
    #ffaa00,
    #ffd700,
    #ffff00,
    #ffd700,
    #ffaa00,
    #ffd700,
    #ffff00
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitter 3s ease infinite;
  text-shadow: none;
}

.glitter-blue {
  background: linear-gradient(
    135deg,
    #00d4ff,
    #0099ff,
    #00d4ff,
    #0066ff,
    #00d4ff,
    #0099ff,
    #00d4ff,
    #0066ff
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitter 3s ease infinite;
  text-shadow: none;
}

.glitter-rainbow {
  background: linear-gradient(
    135deg,
    #ff0000,
    #ff6600,
    #ffff00,
    #39ff14,
    #00d4ff,
    #0000ff,
    #cc00ff,
    #ff0000
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitter 2s ease infinite;
  text-shadow: none;
}

/* ===== GLOW PULSE (para H1/H2) ===== */
@keyframes glow-pulse {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 8px currentColor);
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 18px currentColor);
  }
}

h1.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ===== FRIENDS SECTION (Hi5/Metroflog style) ===== */
.friends-section {
  margin: 15px 0;
}

.friends-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.friend-card {
  flex: 0 0 120px;
  text-align: center;
  padding: 12px 8px;
  border: 3px ridge var(--neon-pink);
  background: rgba(255, 20, 147, 0.08);
  transition: all 0.3s;
}

.friend-card:hover {
  border-color: var(--neon-yellow);
  box-shadow: 0 0 20px var(--neon-yellow);
  transform: scale(1.08) rotate(-2deg);
}

.friend-avatar {
  font-size: 32px;
  margin-bottom: 6px;
  animation: friend-bounce 2s ease-in-out infinite;
}

@keyframes friend-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.friend-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
  word-break: break-all;
  line-height: 1.4;
  margin-bottom: 4px;
}

.friend-msg {
  font-family: 'Comic Sans MS', cursive;
  font-size: 10px;
  color: var(--neon-blue);
  font-style: italic;
  line-height: 1.3;
}

/* ===== SPARKLE OVERLAY ===== */
#sparkle-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255, 20, 147, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(0, 212, 255, 0.3), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(57, 255, 20, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 20% 90%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 60% 55%, rgba(255, 20, 147, 0.3), transparent),
    radial-gradient(1px 1px at 80% 15%, rgba(255, 255, 0, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 15% 50%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 45% 85%, rgba(0, 212, 255, 0.3), transparent),
    radial-gradient(1px 1px at 75% 65%, rgba(255, 20, 147, 0.3), transparent),
    radial-gradient(1px 1px at 95% 35%, rgba(57, 255, 20, 0.3), transparent);
  animation: sparkle-twinkle 4s ease-in-out infinite alternate;
}

@keyframes sparkle-twinkle {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* ===== METROFLOG PHOTO GALLERY ===== */
.metroflog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
}

.metroflog-card {
  width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px 8px 4px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  transition: all 0.3s;
  position: relative;
}

.metroflog-card:hover {
  box-shadow:
    0 0 20px var(--neon-yellow),
    3px 3px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.metroflog-photo {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  overflow: hidden;
}

.metroflog-emoji {
  font-size: 48px;
  margin-bottom: 8px;
}

.metroflog-title {
  font-family: 'Comic Sans MS', cursive;
  font-size: 12px;
  color: #333;
  font-weight: bold;
  text-align: center;
  padding: 0 5px;
}

.metroflog-date {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
  padding: 2px 4px;
  font-family: Arial, sans-serif;
}

.metroflog-details {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 2px 4px;
  color: #666;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}

.metroflog-comments-section {
  max-height: 120px;
  overflow-y: auto;
  padding: 0 2px;
}

.metroflog-comment {
  font-size: 10px;
  color: #333;
  padding: 2px 0;
  border-bottom: 1px dotted #eee;
  line-height: 1.3;
}

.metroflog-comment-author {
  font-weight: bold;
  color: #0066cc;
  margin-right: 3px;
}

.metroflog-add-comment {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #eee;
}

.metroflog-input {
  flex: 1;
  font-size: 10px;
  padding: 2px 4px;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  min-width: 0;
}

.metroflog-submit {
  font-size: 9px;
  padding: 2px 8px;
  background: #0066cc;
  color: #fff;
  border: none;
  cursor: pointer;
}

.metroflog-submit:hover {
  background: #003399;
}