/* ============================================
   90s GEOCITIES THEME - MAXIMUM NOSTALGIA
   ============================================ */

[data-theme="90s"] {
  /* 90s Color Palette */
  --primary-color: #ff00ff;      /* Hot pink/magenta */
  --secondary-color: #00ffff;     /* Cyan */
  --accent-color: #ffff00;        /* Yellow */
  --text-color: #000000;
  --text-shadow: #ff00ff;
  --background: #c0c0c0;          /* Classic gray */
  --background-alt: #ffffff;
  --border-color: #000000;
  --link-color: #0000ff;          /* Blue links */
  --visited-link: #800080;        /* Purple visited */
}

/* 90s Body Styling */
[data-theme="90s"] body {
  background: #c0c0c0;
  color: #000000;
  font-family: 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif !important;
  /* Add tiled background pattern */
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);
  animation: rainbow-bg 10s ease infinite;
}

/* Rainbow background animation */
@keyframes rainbow-bg {
  0% { background-color: #ff99ff; }
  20% { background-color: #99ffff; }
  40% { background-color: #ffff99; }
  60% { background-color: #99ff99; }
  80% { background-color: #ff9999; }
  100% { background-color: #ff99ff; }
}

/* 90s Header - Maximum Chaos */
[data-theme="90s"] .site-header {
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 400% 400%;
  animation: gradient-shift 3s ease infinite;
  border: 5px ridge #ff00ff;
  border-bottom: 10px outset #ffff00;
  box-shadow:
    0 0 20px #ff00ff,
    0 0 40px #00ffff,
    inset 0 0 20px rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
}

/* Animated gradient shift */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Under construction banner */
[data-theme="90s"] .site-header::before {
  content: '🚧 UNDER CONSTRUCTION 🚧';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(
    45deg,
    #ffff00,
    #ffff00 10px,
    #000000 10px,
    #000000 20px
  );
  color: #ff0000;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  font-size: 0.8rem;
  text-shadow: 2px 2px #ffffff;
  animation: blink 0.5s infinite;
  z-index: 1000;
  pointer-events: none;
}

/* Removed starfield - was too distracting */

/* 90s Navigation */
[data-theme="90s"] .main-nav {
  position: relative;
  z-index: 10001;
  margin-top: 30px; /* Space for construction banner */
}

/* Allow dropdowns to escape header overflow */
[data-theme="90s"] .site-header {
  overflow: visible !important;
}

[data-theme="90s"] .nav-menu li a {
  color: #ff00ff !important;
  text-shadow: 2px 2px #00ffff;
  font-weight: bold;
  text-decoration: underline;
  background: linear-gradient(45deg, #ffff00, #ff00ff);
  padding: 5px 15px !important;
  border: 3px outset #ffffff;
  display: inline-block;
  animation: wobble 2s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

[data-theme="90s"] .nav-menu li a:hover {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  animation: shake 0.3s ease-in-out infinite, glow-pulse 1s ease-in-out infinite;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text y="15" font-size="16">👆</text></svg>'), pointer;
}

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(-2deg); }
  25% { transform: translateX(-5px) rotate(2deg); }
  75% { transform: translateX(5px) rotate(-2deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 5px #ff00ff, 0 0 10px #00ffff; }
  50% { box-shadow: 0 0 20px #ff00ff, 0 0 30px #00ffff, 0 0 40px #ffff00; }
}

/* 90s Logo - Add spinning effect */
[data-theme="90s"] .logo-img {
  animation: spin-wobble 3s ease-in-out infinite;
  filter: hue-rotate(0deg) saturate(1.5);
  border: 5px ridge #ff00ff;
}

@keyframes spin-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); filter: hue-rotate(0deg); }
  25% { transform: rotate(-5deg) scale(1.05); filter: hue-rotate(90deg); }
  50% { transform: rotate(0deg) scale(1.1); filter: hue-rotate(180deg); }
  75% { transform: rotate(5deg) scale(1.05); filter: hue-rotate(270deg); }
}

/* 90s Main Content */
[data-theme="90s"] .site-main {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23ffffff" width="100" height="100"/><circle fill="%23ff00ff" cx="25" cy="25" r="3"/><circle fill="%2300ffff" cx="75" cy="25" r="3"/><circle fill="%23ffff00" cx="25" cy="75" r="3"/><circle fill="%23ff00ff" cx="75" cy="75" r="3"/></svg>');
  animation: scroll-bg 20s linear infinite;
}

@keyframes scroll-bg {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
}

/* 90s Cards and Boxes */
[data-theme="90s"] .welcome,
[data-theme="90s"] .post-preview,
[data-theme="90s"] .sidebar-section,
[data-theme="90s"] .game-page,
[data-theme="90s"] .variant-page,
[data-theme="90s"] .case-type-page,
[data-theme="90s"] .page-content,
[data-theme="90s"] .blog-post {
  background: #ffffff;
  border: 5px ridge #ff00ff !important;
  box-shadow:
    10px 10px 0 #00ffff,
    15px 15px 0 #ffff00,
    20px 20px 0 #ff00ff !important;
  position: relative;
}

/* Add animated border */
[data-theme="90s"] .welcome::before,
[data-theme="90s"] .game-page::before,
[data-theme="90s"] .variant-page::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid transparent;
  border-image: repeating-linear-gradient(
    45deg,
    #ff00ff,
    #ff00ff 10px,
    #00ffff 10px,
    #00ffff 20px,
    #ffff00 20px,
    #ffff00 30px
  ) 5;
  animation: border-march 1s linear infinite;
  pointer-events: none;
}

@keyframes border-march {
  from { border-image-slice: 0; }
  to { border-image-slice: 30; }
}

/* 90s Headings */
[data-theme="90s"] h1,
[data-theme="90s"] h2,
[data-theme="90s"] h3 {
  font-family: 'Impact', 'Arial Black', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #ff00ff, #0000ff, #ff0000, #ff00ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-text 3s ease infinite;
  text-shadow: 3px 3px #000000;
  position: relative;
}

/* Post preview titles need better contrast on white background */
[data-theme="90s"] .post-preview h3,
[data-theme="90s"] .post-preview h3 a {
  background: linear-gradient(90deg, #ff00ff, #0000ff, #ff0000, #ff00ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-text 3s ease infinite;
  text-shadow: 2px 2px #000000;
}

@keyframes gradient-text {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Add marquee effect to h1 */
[data-theme="90s"] h1::after {
  content: ' ★ BEST SITE ON THE WEB ★';
  font-size: 0.5em;
  animation: slide 10s linear infinite;
}

/* 90s Links */
[data-theme="90s"] a {
  color: #0000ff !important;
  text-decoration: underline;
  font-weight: bold;
  text-shadow: 1px 1px #ffff00;
}

[data-theme="90s"] a:visited {
  color: #800080 !important;
}

[data-theme="90s"] a:hover {
  color: #ff0000 !important;
  background: #ffff00;
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 90s Buttons */
[data-theme="90s"] button,
[data-theme="90s"] .view-all a {
  background: linear-gradient(45deg, #ff00ff, #00ffff) !important;
  border: 5px outset #ffffff !important;
  color: #000000 !important;
  font-weight: bold !important;
  text-shadow: 1px 1px #ffffff;
  padding: 10px 20px !important;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text y="15" font-size="16">👆</text></svg>'), pointer;
}

[data-theme="90s"] button:hover,
[data-theme="90s"] .view-all a:hover {
  border-style: inset !important;
  animation: rainbow-button 1s ease infinite;
}

@keyframes rainbow-button {
  0% { background: linear-gradient(45deg, #ff00ff, #00ffff); }
  25% { background: linear-gradient(45deg, #00ffff, #ffff00); }
  50% { background: linear-gradient(45deg, #ffff00, #ff00ff); }
  75% { background: linear-gradient(45deg, #ff00ff, #00ffff); }
  100% { background: linear-gradient(45deg, #00ffff, #ffff00); }
}

/* 90s Tables */
[data-theme="90s"] .variants-table {
  border: 5px double #ff00ff;
  background: #ffffff;
}

[data-theme="90s"] .variants-table thead {
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00);
  color: #000000;
  font-weight: bold;
  text-shadow: 2px 2px #ffffff;
}

[data-theme="90s"] .variants-table tbody tr {
  border: 2px solid #ff00ff;
}

[data-theme="90s"] .variants-table tbody tr:nth-child(odd) {
  background: #ffffcc;
}

[data-theme="90s"] .variants-table tbody tr:nth-child(even) {
  background: #ccffff;
}

[data-theme="90s"] .variants-table tbody tr:hover {
  background: #ffccff !important;
  animation: row-flash 0.5s ease infinite;
}

@keyframes row-flash {
  0%, 100% { background: #ffccff; }
  50% { background: #ccffff; }
}

/* 90s Letter Boxes */
[data-theme="90s"] .letter-box {
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  border: 3px outset #ffffff;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 2px 2px #000000;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

[data-theme="90s"] .letter-box:hover {
  animation: spin 0.5s ease-in-out, glow-pulse 0.5s ease-in-out infinite;
  border-style: inset;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 90s Images - Add borders and effects */
[data-theme="90s"] img {
  border: 5px ridge #ff00ff;
  box-shadow: 5px 5px 0 #00ffff;
  animation: tilt 5s ease-in-out infinite;
}

@keyframes tilt {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

/* 90s Sidebar */
[data-theme="90s"] .sidebar-section h3 {
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  color: #ffffff;
  padding: 10px;
  text-align: center;
  border: 3px outset #ffffff;
  font-family: 'Impact', sans-serif;
}

/* 90s Stats */
[data-theme="90s"] .stat {
  background: linear-gradient(135deg, #ffff00, #ff00ff);
  border: 3px groove #ffffff;
  animation: pulse-scale 2s ease-in-out infinite;
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

[data-theme="90s"] .stat-number {
  color: #ff0000;
  text-shadow: 2px 2px #00ffff, 4px 4px #ffff00;
  animation: number-bounce 1s ease-in-out infinite;
}

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

/* 90s Progress Bars */
[data-theme="90s"] .progress-bar {
  background: #c0c0c0;
  border: 2px inset #ffffff;
}

[data-theme="90s"] .progress-fill {
  background: repeating-linear-gradient(
    45deg,
    #ff00ff,
    #ff00ff 10px,
    #00ffff 10px,
    #00ffff 20px
  );
  animation: progress-stripe 1s linear infinite;
}

@keyframes progress-stripe {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

/* 90s Footer */
[data-theme="90s"] .site-footer {
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00);
  border-top: 10px ridge #ffffff;
  color: #000000;
  font-weight: bold;
  text-shadow: 2px 2px #ffffff;
  position: relative;
}

[data-theme="90s"] .site-footer::before {
  content: '💾 Best Viewed in Netscape Navigator 💾';
  display: block;
  font-size: 0.8rem;
  margin-bottom: 10px;
  animation: blink 1s infinite;
}

[data-theme="90s"] .site-footer::after {
  content: '👾 You are visitor #' counter(visitors) ' 👾';
  display: block;
  counter-increment: visitors;
  margin-top: 10px;
  background: #000000;
  color: #00ff00;
  padding: 5px;
  font-family: 'Courier New', monospace;
  border: 3px inset #808080;
}

/* Add a "NEW!" badge to recent items */
[data-theme="90s"] .post-preview::before {
  content: '✨ NEW! ✨';
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff0000;
  color: #ffff00;
  padding: 5px 15px;
  border: 3px solid #ffffff;
  font-weight: bold;
  transform: rotate(15deg);
  animation: blink 0.5s infinite, rotate-badge 3s ease-in-out infinite;
  z-index: 10;
}

@keyframes rotate-badge {
  0%, 100% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
}

/* Visitor counter reset */
@counter-style visitors {
  system: numeric;
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
}

/* Hit counter style */
[data-theme="90s"] .site-footer {
  counter-reset: visitors 1337; /* Start at 1337 for authenticity */
}

/* Add scrolling text effect */
[data-theme="90s"] .breadcrumb {
  background: #000000;
  color: #00ff00;
  padding: 10px;
  font-family: 'Courier New', monospace;
  border: 3px inset #808080;
  overflow: hidden;
  white-space: nowrap;
}

[data-theme="90s"] .breadcrumb::before {
  content: '>>> ';
  color: #00ff00;
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Comic Sans EVERYTHING */
[data-theme="90s"] * {
  font-family: 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif !important;
}

/* Except monospace elements */
[data-theme="90s"] code,
[data-theme="90s"] pre,
[data-theme="90s"] .breadcrumb {
  font-family: 'Courier New', monospace !important;
}

/* Screen effects */
[data-theme="90s"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 100;
  animation: scanlines 0.5s linear infinite;
}

@keyframes scanlines {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

/* Add some fun cursor effects */
[data-theme="90s"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text y="15" font-size="16">🖱️</text></svg>'), auto;
}

/* Special hover cursors */
[data-theme="90s"] a:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text y="15" font-size="16">👉</text></svg>'), pointer;
}

/* Retro loading spinner for search */
[data-theme="90s"] #search .pagefind-ui__search-input {
  background: #ffffff;
  border: 3px inset #808080;
  font-family: 'Comic Sans MS', cursive;
  color: #000000;
}

[data-theme="90s"] #search .pagefind-ui__results {
  background: #ffffff;
  border: 5px ridge #ff00ff;
  box-shadow: 10px 10px 0 #00ffff;
}

/* ============================================
   90s ENTITY PAGES (PUBLISHER/DEVELOPER)
   ============================================ */

[data-theme="90s"] .entity-header {
  border-bottom: 5px groove #ff00ff;
  background: linear-gradient(90deg, #ffffcc, #ccffff, #ffccff);
  padding: 1.5rem;
  border-radius: 0;
  box-shadow: 5px 5px 0 #00ffff;
  animation: header-pulse 2s ease-in-out infinite;
}

@keyframes header-pulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

[data-theme="90s"] .entity-logo {
  border: 3px ridge #ff00ff;
  box-shadow: 3px 3px 0 #00ffff;
  animation: logo-wobble 3s ease-in-out infinite;
  filter: saturate(1.5) hue-rotate(0deg);
}

@keyframes logo-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); filter: saturate(1.5) hue-rotate(0deg); }
  25% { transform: rotate(-3deg) scale(1.05); filter: saturate(1.8) hue-rotate(30deg); }
  50% { transform: rotate(0deg) scale(1.1); filter: saturate(1.5) hue-rotate(60deg); }
  75% { transform: rotate(3deg) scale(1.05); filter: saturate(1.8) hue-rotate(30deg); }
}

[data-theme="90s"] .entity-title h1 {
  text-shadow: 3px 3px #ff00ff, 6px 6px #00ffff !important;
  animation: title-bounce 1s ease-in-out infinite;
}

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

[data-theme="90s"] .entity-tagline {
  color: #ff00ff !important;
  font-weight: bold;
  text-shadow: 2px 2px #00ffff;
  background: #ffff00;
  padding: 5px 10px;
  border: 2px solid #000000;
  display: inline-block;
  animation: tagline-blink 2s ease-in-out infinite;
}

@keyframes tagline-blink {
  0%, 49%, 100% { opacity: 1; }
  50%, 99% { opacity: 0.7; }
}

[data-theme="90s"] .inline-logo {
  border: 2px ridge #ff00ff;
  animation: inline-logo-spin 5s linear infinite;
}

@keyframes inline-logo-spin {
  0%, 90% { transform: rotate(0deg); }
  95% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

/* Make entity header really stand out in 90s mode */
[data-theme="90s"] .entity-header::before {
  content: '⭐ FEATURED ENTITY ⭐';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff0000;
  color: #ffff00;
  padding: 5px 20px;
  border: 3px solid #ffffff;
  font-weight: bold;
  font-size: 0.8rem;
  animation: blink 1s infinite;
  z-index: 10;
}

/* Base ad container styling */
.ad-container {
  margin: 2rem 0;
  padding: 1rem;
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* Horizontal ads (between content) */
.ad-horizontal {
  max-width: 100%;
  min-height: 90px;
}

/* Sidebar ads */
.ad-sidebar {
  position: sticky;
  top: 20px;
  margin: 1rem 0;
  min-height: 250px;
}

/* In-feed ads (within game listings) */
.ad-infeed {
  grid-column: 1 / -1; /* If using CSS Grid for game listings */
  margin: 1rem 0;
  min-height: 100px;
}

/* Optional: Add a subtle "Advertisement" label */
.ad-container::before {
  content: "Advertisement";
  display: block;
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ad-sidebar {
    position: static;
    margin: 1.5rem 0;
  }

  .ad-container {
    margin: 1.5rem 0;
  }
}

/* Dark mode support (if your site has it) */
@media (prefers-color-scheme: dark) {
  .ad-container {
    background: #2a2a2a;
    border-color: #404040;
  }

  .ad-container::before {
    color: #666;
  }
}
/* ============================================
   FOOTER STYLES - 90S MODE
   ============================================ */

[data-theme="90s"] .variant-footer,
[data-theme="90s"] .game-footer {
  border-top: 1px double #0000ff;
  background: #c0c0c0;
  padding: 1rem;
  margin-top: 2rem;
}

[data-theme="90s"] .last-updated {
  color: #000080;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
}

/* ============================================
   DATA PROCESSING NOTICE BOXES - 90S MODE
   ============================================ */

[data-theme="90s"] .data-processing-notice {
  background: #c0c0c0;
  border: 3px outset #ffffff;
  padding: 0.1rem;
}

[data-theme="90s"] .notice-box {
  background: #ffffff;
  border: 2px inset #808080;
  padding: 1rem;
  border-radius: 0;
}

[data-theme="90s"] .notice-box h3 {
  color: #000080;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
  margin-top: 0;
}

[data-theme="90s"] .notice-box p {
  color: #000000;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
}

[data-theme="90s"] .processing-note {
  background: #ffff00;
  border: 2px solid #000000;
  color: #000000;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
  border-radius: 0;
}