/* ===================================================================
   RETRO MODE — Windows 98 / GeoCities / Web 1.0 experience
   Scoped under .retro-mode on the root app wrapper.
   =================================================================== */

/* ---- ANIMATIONS ---- */
@keyframes retro-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes retro-rainbow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes retro-marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

@keyframes retro-pulse-border {
  0%, 100% { border-color: #FF00FF; }
  33%       { border-color: #FFFF00; }
  66%       { border-color: #00FFFF; }
}

/* ---- BASE ---- */
.retro-mode {
  font-family: "Comic Sans MS", "Comic Sans", cursive !important;
  background-color: #008080 !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.04) 0px, rgba(0, 0, 0, 0.04) 1px,
      transparent 1px, transparent 8px
    ) !important;
  color: #000 !important;
}

.retro-mode * {
  font-family: "Comic Sans MS", "Comic Sans", cursive !important;
  border-radius: 0 !important;
  transition: none !important;
}

/* Keep actual spinners spinning */
.retro-mode .animate-spin {
  animation: spin 1s linear infinite !important;
}
/* New badges blink freely */
.retro-mode .new-post-badge,
.retro-mode .new-badge {
  animation: retro-blink 0.9s step-start infinite !important;
}
.retro-mode .new-post-dot,
.retro-mode .new-dot {
  animation: none !important;
}

/* ---- PAGE BACKGROUNDS ---- */
.retro-mode .bg-gray-50,
.retro-mode .home-container,
.retro-mode .blog-container,
.retro-mode .howtos-container {
  background: transparent !important;
  min-height: auto !important;
}

/* ---- NAVIGATION HEADER ---- */
.retro-mode header.bg-gray-800 {
  background: linear-gradient(180deg, #D4D0C8 0%, #C0BCAC 100%) !important;
  color: #000 !important;
  padding: 2px 0 2px 4px !important;
  border-bottom: 2px solid #808080 !important;
  box-shadow: 0 2px 0 #fff, 0 3px 0 #0a0a0a !important;
  display: flex !important;
  align-items: stretch !important;
  min-height: 26px !important;
}

.retro-mode header.bg-gray-800 a.text-xl {
  color: #000 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  font-style: italic !important;
  padding: 2px 10px !important;
  border-right: 2px solid #808080 !important;
  box-shadow: inset -1px 0 0 #fff !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  background: #E8E4D0 !important;
}

.retro-mode header.bg-gray-800 a.text-xl::before {
  content: "💾 " !important;
  font-style: normal !important;
}

.retro-mode header.bg-gray-800 nav.hidden a,
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a {
  color: #000 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 2px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-right: 1px solid #C0BDB8 !important;
  text-decoration: none !important;
}

.retro-mode header.bg-gray-800 nav a:hover,
.retro-mode header.bg-gray-800 nav.hidden a:hover,
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a:hover {
  background: #000080 !important;
  color: #FFFF00 !important;
}

.retro-mode header.bg-gray-800 nav a.router-link-exact-active,
.retro-mode header.bg-gray-800 nav.hidden a.router-link-exact-active,
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a.router-link-exact-active {
  background: #000080 !important;
  color: #fff !important;
  font-weight: bold !important;
}

.retro-mode header.bg-gray-800 button {
  background: #D4D0C8 !important;
  color: #000 !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #fff,
    inset -1px -1px 0 0 #0a0a0a,
    inset 2px 2px 0 0 #D4D0C8,
    inset -2px -2px 0 0 #808080 !important;
  margin: 2px 4px !important;
}

/* Mobile nav */
.retro-mode nav.md\:hidden.absolute {
  background: #D4D0C8 !important;
  border: 2px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}
.retro-mode nav.md\:hidden.absolute a {
  color: #000 !important;
  font-size: 12px !important;
  border-bottom: 1px solid #C0BDB8 !important;
}
.retro-mode nav.md\:hidden.absolute a:hover {
  background: #000080 !important;
  color: #FFFF00 !important;
}

/* ---- MAIN CONTAINER ---- */
.retro-mode .main-container,
.retro-mode .blog-main {
  margin-top: 0 !important;
  padding: 8px !important;
  max-width: 960px !important;
}

/* ---- HERO SECTIONS → Win98 title bar ---- */
.retro-mode .hero-section,
.retro-mode .hero-section-gradient,
.retro-mode .hero-section-slate,
.retro-mode .blog-header {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 40%),
    linear-gradient(to right, #000080, #0844C8, #1084D0, #0844C8, #000080) !important;
  padding: 5px 10px !important;
  color: #fff !important;
  overflow: visible !important;
  text-align: left !important;
  border-bottom: 2px solid #0a0a0a !important;
  box-shadow: 0 2px 0 #404080 !important;
}

.retro-mode .hero-decor-blob,
.retro-mode .home-header-decor,
.retro-mode .howtos-header-decor,
.retro-mode .blog-header-decor { display: none !important; }

.retro-mode .hero-badge { display: none !important; }

.retro-mode .hero-container,
.retro-mode .post-hero-container {
  max-width: none !important;
  padding: 0 !important;
  position: static !important;
  z-index: auto !important;
  margin: 0 !important;
}

.retro-mode .hero-title {
  font-size: 14px !important;
  font-weight: bold !important;
  font-style: italic !important;
  font-family: "Comic Sans MS", cursive !important;
  margin: 0 !important;
  letter-spacing: 1px !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,0.4) !important;
  background: none !important;
}

.retro-mode .hero-title span.text-transparent {
  -webkit-text-fill-color: #FFFF88 !important;
  background: none !important;
}

.retro-mode .hero-subtitle {
  font-size: 11px !important;
  color: #C8DFFF !important;
  margin: 2px 0 0 !important;
  max-width: none !important;
}

.retro-mode .back-link {
  color: #FFFF88 !important;
  font-size: 11px !important;
  text-decoration: underline !important;
}

/* ---- WINDOWS / PANELS ---- */
.retro-mode .card-base,
.retro-mode .card-interactive,
.retro-mode .blog-post-card,
.retro-mode .software-card,
.retro-mode .countdown-card,
.retro-mode .featured-card,
.retro-mode .yt-featured-wrapper,
.retro-mode .contact-card,
.retro-mode .commit-item,
.retro-mode .team-card,
.retro-mode .bg-white.rounded-3xl,
.retro-mode .bg-white.rounded-2xl {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
  transform: none !important;
}

.retro-mode .card-interactive:hover,
.retro-mode .team-card:hover {
  transform: none !important;
}

.retro-mode .shadow-xl,
.retro-mode .shadow-2xl,
.retro-mode .shadow-lg,
.retro-mode .shadow-sm,
.retro-mode .shadow-md {
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

/* ---- BUTTONS ---- */
.retro-mode .btn-hero,
.retro-mode .btn-hero-teal,
.retro-mode .btn-hero-indigo,
.retro-mode .btn-primary {
  background: #D4D0C8 !important;
  color: #000 !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #fff,
    inset -1px -1px 0 0 #0a0a0a,
    inset 2px 2px 0 0 #D4D0C8,
    inset -2px -2px 0 0 #808080 !important;
  font-family: "Comic Sans MS", cursive !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-shadow: none !important;
  transform: none !important;
  padding: 4px 14px 5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Play buttons — bright green */
.retro-mode .btn-play-sm,
.retro-mode .featured-btn-play,
.retro-mode .yt-play-button {
  background: #008000 !important;
  color: #fff !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #40C040,
    inset -1px -1px 0 0 #004000,
    inset 2px 2px 0 0 #20A020,
    inset -2px -2px 0 0 #003000 !important;
  font-weight: bold !important;
  font-family: "Comic Sans MS", cursive !important;
  font-size: 11px !important;
  padding: 3px 10px 4px !important;
  text-shadow: 1px 1px 0 #004000 !important;
}

/* Info / secondary buttons — orange */
.retro-mode .btn-info-sm,
.retro-mode .featured-btn-secondary {
  background: #FF8000 !important;
  color: #fff !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #FFBE80,
    inset -1px -1px 0 0 #804000,
    inset 2px 2px 0 0 #FFA040,
    inset -2px -2px 0 0 #603000 !important;
  font-weight: bold !important;
  font-family: "Comic Sans MS", cursive !important;
  font-size: 11px !important;
  padding: 3px 10px 4px !important;
  text-shadow: 1px 1px 0 #603000 !important;
}

/* Wiki / external buttons — purple */
.retro-mode .browse-wiki-btn {
  background: #800080 !important;
  color: #fff !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #D080D0,
    inset -1px -1px 0 0 #400040,
    inset 2px 2px 0 0 #A040A0,
    inset -2px -2px 0 0 #300030 !important;
  font-weight: bold !important;
  font-size: 12px !important;
  text-shadow: 1px 1px 0 #400040 !important;
  padding: 4px 14px 5px !important;
}

/* Discord button */
.retro-mode .discord-hero-btn {
  background: #5865F2 !important;
  color: #fff !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #9BA4FF,
    inset -1px -1px 0 0 #2030C0,
    inset 2px 2px 0 0 #7080FF,
    inset -2px -2px 0 0 #102080 !important;
  font-weight: bold !important;
  font-size: 12px !important;
  text-shadow: 1px 1px 0 #2030C0 !important;
  padding: 4px 14px 5px !important;
}

.retro-mode .read-more-btn {
  color: #0000EE !important;
  font-weight: bold !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12px !important;
}

/* All active states */
.retro-mode .btn-hero:active,
.retro-mode .btn-primary:active,
.retro-mode .btn-play-sm:active,
.retro-mode .btn-info-sm:active,
.retro-mode .browse-wiki-btn:active,
.retro-mode .discord-hero-btn:active,
.retro-mode .yt-play-button:active,
.retro-mode .featured-btn-play:active {
  padding-top: 5px !important;
  padding-left: 15px !important;
  filter: brightness(0.85) !important;
}

/* Filter buttons */
.retro-mode .filter-btn {
  background: #D4D0C8 !important;
  color: #000080 !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #fff,
    inset -1px -1px 0 0 #0a0a0a,
    inset 2px 2px 0 0 #D4D0C8,
    inset -2px -2px 0 0 #808080 !important;
  padding: 2px 10px 3px !important;
  font-size: 11px !important;
  font-weight: bold !important;
}

.retro-mode .filter-btn:hover {
  background: #000080 !important;
  color: #FFFF00 !important;
}

.retro-mode .filter-btn.active {
  background: #000080 !important;
  color: #FFFF00 !important;
  box-shadow:
    inset 1px 1px 0 0 #0a0a0a,
    inset -1px -1px 0 0 #fff,
    inset 2px 2px 0 0 #808080,
    inset -2px -2px 0 0 #D4D0C8 !important;
}

/* ---- STATUS BADGES ---- */
.retro-mode .status-badge {
  padding: 1px 6px !important;
  font-size: 10px !important;
  font-weight: bold !important;
  font-family: "Comic Sans MS", cursive !important;
  border: 2px solid !important;
}

.retro-mode .status-released { background: #00CC00 !important; color: #fff !important; border-color: #007700 !important; text-shadow: 1px 1px 0 #007700 !important; }
.retro-mode .status-demo { background: #0000CC !important; color: #fff !important; border-color: #000077 !important; text-shadow: 1px 1px 0 #000077 !important; }
.retro-mode .status-development { background: #FFCC00 !important; color: #000 !important; border-color: #886600 !important; }
.retro-mode .status-archived { background: #808080 !important; color: #fff !important; border-color: #404040 !important; text-shadow: 1px 1px 0 #404040 !important; }

/* ---- COUNTDOWN ---- */
.retro-mode .countdown-card {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
  padding: 12px !important;
}

.retro-mode .countdown-event-name {
  font-size: 12px !important;
  font-weight: bold !important;
  font-style: italic !important;
  letter-spacing: 2px !important;
  color: #000080 !important;
  text-transform: uppercase !important;
}

.retro-mode .countdown-timer {
  display: inline-block !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 36px !important;
  font-style: normal !important;
  background: #000 !important;
  -webkit-text-fill-color: #00FF00 !important;
  color: #00FF00 !important;
  padding: 8px 16px !important;
  border: 2px solid #808080 !important;
  box-shadow:
    inset 2px 2px 0 0 #404040,
    inset -2px -2px 0 0 #C0C0C0,
    0 0 6px rgba(0, 255, 0, 0.4) !important;
  letter-spacing: 4px !important;
  text-shadow: 0 0 10px #00FF00 !important;
}

.retro-mode .countdown-date {
  font-size: 12px !important;
  color: #404040 !important;
  font-style: italic !important;
}

.retro-mode .upcoming-events-title {
  color: #000080 !important;
  font-size: 13px !important;
}

.retro-mode .upcoming-event-item {
  background: #FFFFC8 !important;
  border: 1px solid #AAAA00 !important;
}

/* ---- FEATURED GAME CARD ---- */
.retro-mode .featured-card {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
}

.retro-mode .featured-badge {
  background: #FF00FF !important;
  color: #fff !important;
  border: 2px solid #880088 !important;
  text-shadow: 1px 1px 0 #880088 !important;
}

.retro-mode .featured-title {
  font-size: 20px !important;
  font-weight: bold !important;
  font-style: italic !important;
  -webkit-text-fill-color: #000080 !important;
  color: #000080 !important;
  text-shadow: 1px 1px 0 #8888CC !important;
}

.retro-mode .featured-desc {
  color: #404040 !important;
  font-size: 12px !important;
}

.retro-mode .featured-image {
  border: 3px solid !important;
  border-color: #808080 #fff #fff #808080 !important;
  outline: 1px solid #0a0a0a !important;
}

.retro-mode .featured-version-badge {
  background: #FFFF00 !important;
  color: #000 !important;
  border: 1px solid #888800 !important;
}

/* ---- YOUTUBE ---- */
.retro-mode .yt-featured-wrapper {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

.retro-mode .yt-glow { display: none !important; }
.retro-mode .yt-status-blob,
.retro-mode .yt-status-dot { display: none !important; }

.retro-mode .yt-label-text {
  color: #000 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  font-style: italic !important;
}

.retro-mode .yt-channel-link {
  color: #0000EE !important;
  text-decoration: underline !important;
  font-weight: bold !important;
  font-size: 12px !important;
}

.retro-mode .yt-player-container {
  border: 3px solid !important;
  border-color: #808080 #fff #fff #808080 !important;
  outline: 1px solid #0a0a0a !important;
}

.retro-mode .yt-new-tag {
  background: #FF0000 !important;
  color: #FFFF00 !important;
  border: 2px solid #880000 !important;
  font-weight: bold !important;
  animation: retro-blink 0.8s step-start infinite !important;
  text-shadow: 1px 1px 0 #880000 !important;
}

.retro-mode .yt-video-title {
  color: #000080 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-style: italic !important;
}

.retro-mode .yt-stats-row {
  color: #404040 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
}

/* ---- NAV CARDS ---- */
.retro-mode .nav-card-icon {
  background: #C8E8FF !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
}

.retro-mode .nav-card-title {
  color: #000080 !important;
  font-size: 15px !important;
  font-weight: bold !important;
  font-style: italic !important;
  text-decoration: underline !important;
}

.retro-mode .nav-card-desc {
  color: #404040 !important;
  font-size: 11px !important;
}

/* AI notice */
.retro-mode .border-indigo-100 {
  background: #FFFF99 !important;
  border: 2px solid #888800 !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

/* ---- BLOG ---- */
.retro-mode .blog-post-card {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

.retro-mode .blog-post-title a {
  color: #0000EE !important;
  font-size: 16px !important;
  font-weight: bold !important;
  font-style: italic !important;
  text-decoration: underline !important;
}

.retro-mode .blog-post-title a:hover {
  color: #FF00FF !important;
}

.retro-mode .new-post-badge {
  background: #FF4444 !important;
  color: #fff !important;
  border: 2px solid #880000 !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #880000 !important;
}

.retro-mode .blog-post-preview::after {
  background: linear-gradient(to bottom, transparent, #D4D0C8) !important;
}

.retro-mode .blog-post-description {
  color: #000080 !important;
  font-style: italic !important;
}

.retro-mode .blog-post-body {
  color: #404040 !important;
}

/* ---- SOFTWARE CATALOG ---- */
.retro-mode .software-card {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

.retro-mode .software-thumb {
  border: 3px solid !important;
  border-color: #808080 #fff #fff #808080 !important;
  outline: 1px solid #0a0a0a !important;
}

.retro-mode .software-title {
  color: #0000EE !important;
  font-style: italic !important;
  text-decoration: underline !important;
}

.retro-mode .software-desc { color: #404040 !important; }
.retro-mode .software-meta { color: #808080 !important; }

/* Catalog show — latest release panel */
.retro-mode .bg-gradient-to-br.from-indigo-600 {
  background: #000080 !important;
  border: 2px solid !important;
  border-color: #6060CC #000020 #000020 #6060CC !important;
  outline: 1px solid #0a0a0a !important;
}

.retro-mode .bg-gradient-to-br.from-indigo-600 .text-4xl,
.retro-mode .bg-gradient-to-br.from-indigo-600 .text-white {
  color: #FFFF00 !important;
  -webkit-text-fill-color: #FFFF00 !important;
}

.retro-mode .bg-gradient-to-br.from-indigo-600 .text-indigo-100 {
  color: #C8C8FF !important;
}

.retro-mode .bg-gradient-to-br.from-indigo-600 a {
  background: #D4D0C8 !important;
  color: #000 !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #fff,
    inset -1px -1px 0 0 #0a0a0a,
    inset 2px 2px 0 0 #D4D0C8,
    inset -2px -2px 0 0 #808080 !important;
  text-decoration: none !important;
  font-weight: bold !important;
  padding: 3px 10px 4px !important;
}

.retro-mode .bg-gradient-to-br.from-purple-700 {
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%), linear-gradient(to right, #000080, #1084D0) !important;
}

.retro-mode .text-purple-200,
.retro-mode .text-purple-100 { color: #C8C8FF !important; }
.retro-mode .text-purple-300 { color: #D8D8FF !important; }

/* Tables */
.retro-mode table th {
  background: #000080 !important;
  color: #FFFF00 !important;
  font-weight: bold !important;
  border: 1px solid #0a0a0a !important;
  box-shadow: none !important;
}

.retro-mode table thead { background: #000080 !important; }

.retro-mode table tr:nth-child(odd) td { background: #FFFFFF !important; }
.retro-mode table tr:nth-child(even) td { background: #C8E8FF !important; }

.retro-mode table tr:hover td {
  background: #000080 !important;
  color: #FFFF00 !important;
}
.retro-mode table tr:hover a { color: #FFFF00 !important; }

/* ---- TEAM ---- */
.retro-mode .team-card {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
  transform: none !important;
}

.retro-mode .team-card-title {
  color: #000080 !important;
  font-style: italic !important;
  font-size: 13px !important;
}

.retro-mode .team-card-desc {
  color: #404040 !important;
  font-size: 11px !important;
}

.retro-mode .team-card-image-container {
  border: 3px solid !important;
  border-color: #808080 #fff #fff #808080 !important;
  outline: 1px solid #0a0a0a !important;
}

/* ---- CONTACT ---- */
.retro-mode .contact-card {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

.retro-mode .contact-card-title { color: #000080 !important; font-style: italic !important; }

.retro-mode .email-link {
  color: #0000EE !important;
  font-weight: bold !important;
  font-size: 14px !important;
  text-decoration: underline !important;
}

.retro-mode .community-link-discord { color: #5865F2 !important; font-weight: bold !important; text-decoration: underline !important; }
.retro-mode .community-link-youtube { color: #CC0000 !important; font-weight: bold !important; text-decoration: underline !important; }
.retro-mode .community-section { border-left-color: #808080 !important; }
.retro-mode .community-section-title { color: #000080 !important; font-style: italic !important; }

.retro-mode .irc-box {
  background: #000 !important;
  border: 2px solid #808080 !important;
  box-shadow: inset 1px 1px 0 0 #404040 !important;
}

.retro-mode .irc-network { color: #00FF00 !important; font-family: "Courier New", monospace !important; }
.retro-mode .irc-channel { color: #00FF00 !important; font-family: "Courier New", monospace !important; text-shadow: 0 0 8px #00FF00 !important; }

.retro-mode .bbs-box {
  background: #000 !important;
  border: 2px solid #808080 !important;
  box-shadow: inset 1px 1px 0 0 #404040 !important;
}

.retro-mode .bbs-host { color: #FFAA00 !important; font-family: "Courier New", monospace !important; }
.retro-mode .bbs-port { color: #FFAA00 !important; font-family: "Courier New", monospace !important; text-shadow: 0 0 8px #FFAA00 !important; }

/* ---- CODE PAGE ---- */
.retro-mode .error-alert {
  background: #FFCCCC !important;
  border: 2px solid #CC0000 !important;
  color: #880000 !important;
}

.retro-mode .commit-item {
  background: #D4D0C8 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  outline: 1px solid #0a0a0a !important;
  box-shadow: 2px 2px 0 #0a0a0a !important;
}

.retro-mode .commits-section-title {
  color: #000080 !important;
  font-style: italic !important;
  text-decoration: underline !important;
}

.retro-mode .repo-link,
.retro-mode .commit-repo-link,
.retro-mode .commit-sha-link {
  color: #0000EE !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

/* ---- HOWTOS ---- */
.retro-mode .howto-card-title {
  color: #0000EE !important;
  font-style: italic !important;
  text-decoration: underline !important;
}

.retro-mode .group:hover .howto-card-title { color: #FF00FF !important; }
.retro-mode .howto-card-footer { border-top-color: #808080 !important; }
.retro-mode .howto-card-read-link { color: #0000EE !important; font-weight: bold !important; transform: none !important; }

.retro-mode .new-badge {
  background: #FF4444 !important;
  color: #fff !important;
  border: 2px solid #880000 !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 0 #880000 !important;
}

/* ---- WIKI CONTENT ---- */
.retro-mode .wiki-content { font-size: 13px !important; }
.retro-mode .wiki-content h1 { color: #000080 !important; font-style: italic !important; border-bottom: 2px solid #808080 !important; }
.retro-mode .wiki-content h2 { color: #800080 !important; font-style: italic !important; }
.retro-mode .wiki-content h3 { color: #008000 !important; }
.retro-mode .wiki-content a { color: #0000EE !important; text-decoration: underline !important; }
.retro-mode .wiki-content a:visited { color: #800080 !important; }
.retro-mode .wiki-content img { border: 3px solid #808080 !important; outline: 1px solid #0a0a0a !important; }
.retro-mode .wiki-content pre { background: #000 !important; color: #00FF00 !important; border: 2px solid #808080 !important; text-shadow: 0 0 6px #00FF00 !important; }
.retro-mode .wiki-content code { background: #FFFFC8 !important; color: #800000 !important; border: 1px solid #888800 !important; }
.retro-mode .wiki-content blockquote { border-left: 4px solid #FF00FF !important; background: #FFF0FF !important; }
.retro-mode .wiki-content th { background: #000080 !important; color: #FFFF00 !important; }
.retro-mode .wiki-content tr:nth-child(even) td { background: #C8E8FF !important; }

/* ---- RETRO TOGGLE BAR (taskbar style) ---- */
.retro-toggle-bar {
  padding: 6px 8px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

.retro-toggle-btn {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: #333;
}

.retro-toggle-btn:hover {
  background: #e4e4e4;
}

.retro-mode .retro-toggle-bar {
  background: linear-gradient(180deg, #D4D0C8 0%, #C0BCAC 100%) !important;
  border-top: 2px solid #fff !important;
  box-shadow: 0 -1px 0 #0a0a0a, inset 0 1px 0 #E8E4DC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 6px !important;
  gap: 8px !important;
}

.retro-mode .retro-toggle-bar::before {
  content: "★ teletypegames.org ★" !important;
  font-size: 10px !important;
  color: #808080 !important;
  font-family: "Comic Sans MS", cursive !important;
  font-style: italic !important;
}

.retro-mode .retro-toggle-btn {
  background: #D4D0C8 !important;
  color: #000 !important;
  border: 1px solid #0a0a0a !important;
  box-shadow:
    inset 1px 1px 0 0 #fff,
    inset -1px -1px 0 0 #0a0a0a,
    inset 2px 2px 0 0 #D4D0C8,
    inset -2px -2px 0 0 #808080 !important;
  font-family: "Comic Sans MS", cursive !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 3px 10px 4px !important;
  min-height: 20px !important;
}

.retro-mode .retro-toggle-btn:active {
  box-shadow:
    inset 1px 1px 0 0 #0a0a0a,
    inset -1px -1px 0 0 #fff,
    inset 2px 2px 0 0 #808080,
    inset -2px -2px 0 0 #D4D0C8 !important;
  padding: 4px 9px 3px 11px !important;
}

.retro-mode .retro-toggle-bar::after {
  content: "🖥" !important;
  font-size: 14px !important;
  font-style: normal !important;
}
