/* ===================================================================
   RETRO MODE — Full TuiCss feature exploitation
   Features used:
     tui-window / tui-panel / tui-fieldset (double 6px white border)
     tui-nav / tui-statusbar / tui-statusbar-divider
     tui-button (green #00a800, shadow, cyan active)
     tui-table / striped-blue / hovered-blue
     tui-progress-bar / tui-indeterminate
     tui-divider / tui-black-divider
     tui-shadow (10px) / tui-shadow-2 (15px) / tui-shadow-3 (20px)
     tui-bg-blue-black / tui-bg-cyan-black textures
     168-value CGA/EGA color palette
     tui-shortcut / tui-border-double / color hover
   Scoped under .retro-mode on root app wrapper.
   =================================================================== */

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

@keyframes tui-indeterminate {
  from { left: 0; width: 40px; }
  50%  { width: 120px; }
  to   { left: 100%; width: 40px; }
}

/* ---- BASE ---- */
.retro-mode {
  font-family: "Lucida Console", monospace !important;
  background-color: #000 !important;
  color: #fff !important;
}

.retro-mode * {
  font-family: "Lucida Console", monospace !important;
  border-radius: 0 !important;
  transition: none !important;
}

.retro-mode .animate-spin {
  animation: spin 1s linear infinite !important;
}

.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;
}

/* ---- GLOBAL TAILWIND TEXT COLOR OVERRIDES ---- */
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-900,
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-800,
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-700 {
  color: #fff !important;
}

.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-600,
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-500 {
  color: #c8c8c8 !important;
}

.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-400,
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-300 {
  color: #a8a8a8 !important;
}

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

/* ---- NAVIGATION — tui-nav exact style ---- */
.retro-mode header.bg-gray-800 {
  background-color: #a8a8a8 !important;
  background-image: none !important;
  color: #000 !important;
  padding: 0 2px !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: auto !important;
}

/* Nav stretches to fill, lang selector pushed to right */
.retro-mode header.bg-gray-800 nav.hidden.md\:flex {
  flex: 1 !important;
}

.retro-mode header.bg-gray-800 nav > div {
  margin-left: auto !important;
  border-left: 2px solid #000 !important;
  padding-left: 8px !important;
}

.retro-mode header.bg-gray-800 a.text-xl {
  color: #000 !important;
  font-size: 14px !important;
  font-weight: normal !important;
  font-style: normal !important;
  padding: 1px 10px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  text-decoration: none !important;
  display: inline-block !important;
}

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

/* Nav links — tui-nav ul li style */
.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: 14px !important;
  font-weight: normal !important;
  padding: 1px 10px !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
}

/* TuiCss red-168-text highlight on first letter (keyboard shortcut style) */
.retro-mode header.bg-gray-800 nav.hidden a::first-letter,
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a::first-letter {
  color: #a80000 !important;
  font-weight: bold !important;
}

/* tui-nav ul li:hover → green-168 */
.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-color: #00a800 !important;
  color: #000 !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-color: #00a800 !important;
  color: #000 !important;
}

/* Hamburger — tui-button style */
.retro-mode header.bg-gray-800 button.md\:hidden {
  background-color: #00a800 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 2px 2px 0 #000 !important;
  margin: 2px !important;
  padding: 1px 10px !important;
  cursor: pointer !important;
}

/* Language selector — plain nav style, no shadow */
.retro-mode header.bg-gray-800 nav button {
  background: transparent !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1px 6px !important;
  cursor: pointer !important;
}

.retro-mode header.bg-gray-800 nav button.text-white {
  background-color: #00a800 !important;
  color: #000 !important;
}

.retro-mode nav.md\:hidden.absolute button {
  background: transparent !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
}

.retro-mode nav.md\:hidden.absolute button.text-white {
  background-color: #00a800 !important;
  color: #000 !important;
}

/* Mobile nav — tui-window popup style */
.retro-mode nav.md\:hidden.absolute {
  background-color: #a8a8a8 !important;
  border: 2px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
}

.retro-mode nav.md\:hidden.absolute a {
  color: #000 !important;
  font-size: 14px !important;
  border-bottom: 1px solid #000 !important;
}

.retro-mode nav.md\:hidden.absolute a:hover {
  background-color: #00a800 !important;
  color: #000 !important;
}

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

/* ---- HERO SECTIONS — tui-bg-blue-black, no frame ---- */
.retro-mode .hero-section,
.retro-mode .hero-section-gradient,
.retro-mode .hero-section-slate,
.retro-mode .blog-header {
  background-color: #0000a8 !important;
  background-image: url("../../node_modules/tuicss/dist/images/bg-blue-black.png") !important;
  background-repeat: repeat !important;
  border: none !important;
  padding: 12px !important;
  color: #fff !important;
  overflow: visible !important;
  text-align: center !important;
  box-shadow: none !important;
}

.retro-mode .hero-container,
.retro-mode .post-hero-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* tui-progress-bar strip under hero — tui-indeterminate decoration */
.retro-mode .hero-section::after,
.retro-mode .hero-section-gradient::after,
.retro-mode .hero-section-slate::after,
.retro-mode .blog-header::after {
  content: "" !important;
  display: block !important;
  height: 10px !important;
  background-color: #00a8a8 !important;
  margin-top: 8px !important;
  position: relative !important;
  overflow: hidden !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: 18px !important;
  font-weight: bold !important;
  font-style: normal !important;
  font-family: "Lucida Console", monospace !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  background: none !important;
}

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

.retro-mode .hero-subtitle {
  font-size: 14px !important;
  color: #c8c8c8 !important;
  margin: 4px 0 0 !important;
  max-width: none !important;
}

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

/* ---- CARDS/WINDOWS — tui-window + tui-fieldset (6px double white border) ---- */
.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-color: #0000a8 !important;
  background-image: none !important;
  color: #fff !important;
  border: 6px white double !important;
  outline: none !important;
  box-shadow: 10px 10px 0 #000 !important;  /* tui-shadow */
  padding: 12px !important;
  transform: none !important;
}

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

/* tui-divider between card sections */
.retro-mode .card-base > * + *,
.retro-mode .card-interactive > * + *,
.retro-mode .bg-white.rounded-3xl > * + * {
  border-top: 2px solid #fff;
  padding-top: 8px !important;
  margin-top: 8px !important;
}

/* Undo divider for non-semantic children */
.retro-mode .bg-white.rounded-3xl dl > * + *,
.retro-mode .bg-white.rounded-3xl .flex > * + * {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

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

/* ---- BUTTONS — tui-button exact style ---- */
.retro-mode .btn-hero,
.retro-mode .btn-hero-teal,
.retro-mode .btn-hero-indigo,
.retro-mode .btn-primary {
  background-color: #00a800 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 10px 10px 0 #000 !important;
  font-family: "Lucida Console", monospace !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-shadow: none !important;
  transform: none !important;
  padding: 1px 10px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

.retro-mode .btn-hero:active,
.retro-mode .btn-primary:active {
  background-color: #00a8a8 !important;
  box-shadow: none !important;
}

/* Play buttons — green-168 */
.retro-mode .btn-play-sm,
.retro-mode .featured-btn-play,
.retro-mode .yt-play-button {
  background-color: #00a800 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 10px 10px 0 #000 !important;
  font-family: "Lucida Console", monospace !important;
  font-size: 14px !important;
  padding: 1px 10px !important;
  cursor: pointer !important;
}

/* Info / secondary — yellow-168 */
.retro-mode .btn-info-sm,
.retro-mode .featured-btn-secondary {
  background-color: #a8a800 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 10px 10px 0 #000 !important;
  font-family: "Lucida Console", monospace !important;
  font-size: 14px !important;
  padding: 1px 10px !important;
  cursor: pointer !important;
}

/* Wiki / external — purple-168 + white text */
.retro-mode .browse-wiki-btn {
  background-color: #a800a8 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 10px 10px 0 #000 !important;
  font-size: 14px !important;
  padding: 1px 10px !important;
  cursor: pointer !important;
}

/* Discord — blue-168 + white text + gray border */
.retro-mode .discord-hero-btn {
  background-color: #0000a8 !important;
  color: #fff !important;
  border: 2px solid #a8a8a8 !important;
  box-shadow: 10px 10px 0 #000 !important;
  font-size: 14px !important;
  padding: 1px 10px !important;
  cursor: pointer !important;
}

.retro-mode .read-more-btn {
  color: #00ffff !important;
  font-weight: normal !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 14px !important;
}

/* tui-button active state — cyan-168 */
.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 {
  background-color: #00a8a8 !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Filter buttons — gray-168 base, green-168 active (tui-button variant) */
.retro-mode .filter-btn {
  background-color: #a8a8a8 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 4px 4px 0 #000 !important;
  padding: 1px 10px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.retro-mode .filter-btn:hover {
  background-color: #00a800 !important;
  color: #000 !important;
  box-shadow: none !important;
}

.retro-mode .filter-btn.active {
  background-color: #00a8a8 !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* ---- STATUS BADGES — 168-value colors ---- */
.retro-mode .status-badge {
  padding: 0 6px !important;
  font-size: 12px !important;
  border: none !important;
}

.retro-mode .status-released    { background-color: #00a800 !important; color: #000 !important; }
.retro-mode .status-demo        { background-color: #0000a8 !important; color: #fff !important; border: 2px solid #a8a8a8 !important; }
.retro-mode .status-development { background-color: #a8a800 !important; color: #000 !important; }
.retro-mode .status-archived    { background-color: #a8a8a8 !important; color: #000 !important; }

/* ---- COUNTDOWN — tui-window + tui-progress-bar ---- */
.retro-mode .countdown-card {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
  padding: 12px !important;
}

.retro-mode .countdown-event-name {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #ffff00 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

/* Terminal-style countdown display */
.retro-mode .countdown-timer {
  display: inline-block !important;
  font-family: "Lucida Console", monospace !important;
  font-size: 32px !important;
  font-style: normal !important;
  background-color: #000 !important;
  color: #00ff00 !important;
  -webkit-text-fill-color: #00ff00 !important;
  padding: 4px 12px !important;
  border: 2px solid #a8a8a8 !important;
  box-shadow: 4px 4px 0 #000 !important;
  letter-spacing: 4px !important;
  text-shadow: 0 0 6px #00ff00 !important;
}

/* tui-progress-bar strip at countdown bottom */
.retro-mode .countdown-card::after {
  content: "" !important;
  display: block !important;
  height: 10px !important;
  background-color: #00a8a8 !important;
  margin-top: 10px !important;
  position: relative !important;
  overflow: hidden !important;
}

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

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

.retro-mode .upcoming-event-item {
  background-color: #000 !important;
  border: 2px solid #a8a8a8 !important;
  color: #fff !important;
}

/* ---- FEATURED GAME CARD — tui-shadow-2 (15px) ---- */
.retro-mode .featured-card {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 15px 15px 0 #000 !important;
}

.retro-mode .featured-badge {
  background-color: #a800a8 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 4px 4px 0 #000 !important;
}

.retro-mode .featured-title {
  font-size: 18px !important;
  font-weight: bold !important;
  font-style: normal !important;
  color: #ffff00 !important;
  -webkit-text-fill-color: #ffff00 !important;
  text-shadow: none !important;
}

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

/* tui-border-solid on images */
.retro-mode .featured-image {
  border: 2px solid #a8a8a8 !important;
  outline: none !important;
}

.retro-mode .featured-version-badge {
  background-color: #a8a800 !important;
  color: #000 !important;
  border: none !important;
}

/* ---- YOUTUBE — tui-window + tui-shadow ---- */
.retro-mode .yt-featured-wrapper {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
}

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

.retro-mode .yt-label-text {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: normal !important;
}

.retro-mode .yt-channel-link {
  color: #00ffff !important;
  text-decoration: underline !important;
  font-size: 14px !important;
}

/* tui-border-solid */
.retro-mode .yt-player-container {
  border: 2px solid #a8a8a8 !important;
  outline: none !important;
}

/* tui-indeterminate blink on NEW tag */
.retro-mode .yt-new-tag {
  background-color: #a80000 !important;
  color: #ffff00 !important;
  border: none !important;
  font-weight: bold !important;
  animation: retro-blink 0.8s step-start infinite !important;
}

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

.retro-mode .yt-stats-row {
  color: #c8c8c8 !important;
  font-family: "Lucida Console", monospace !important;
  font-size: 12px !important;
}

/* ---- NAV CARDS ---- */
/* tui-bg-cyan-black texture for icon boxes */
.retro-mode .nav-card-icon {
  background-color: #00a8a8 !important;
  background-image: url("../../node_modules/tuicss/dist/images/bg-cyan-black.png") !important;
  background-repeat: repeat !important;
  border: 2px solid #000 !important;
}

.retro-mode .nav-card-title {
  color: #00ffff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-decoration: underline !important;
}

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

/* AI notice */
.retro-mode .border-indigo-100 {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 4px 4px 0 #000 !important;
  color: #fff !important;
}

/* ---- BLOG ---- */
.retro-mode .blog-post-card {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
  padding: 12px !important;
}

/* tui-divider between blog post title and body */
.retro-mode .blog-post-title {
  border-bottom: 2px solid #fff !important;
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
}

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

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

.retro-mode .new-post-badge {
  background-color: #a80000 !important;
  color: #ffff00 !important;
  border: none !important;
}

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

.retro-mode .blog-post-description {
  color: #c8c8c8 !important;
}

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

/* ---- SOFTWARE CATALOG ---- */
.retro-mode .software-card {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
  padding: 12px !important;
}

/* tui-border-solid on thumbnails */
.retro-mode .software-thumb {
  border: 2px solid #a8a8a8 !important;
  outline: none !important;
}

.retro-mode .software-title {
  color: #00ffff !important;
  text-decoration: underline !important;
}

.retro-mode .software-desc { color: #fff !important; }
.retro-mode .software-meta { color: #c8c8c8 !important; }

/* Catalog release panel — tui-shadow-2 (15px) */
.retro-mode .bg-gradient-to-br.from-indigo-600 {
  background-color: #0000a8 !important;
  background-image: url("../../node_modules/tuicss/dist/images/bg-blue-black.png") !important;
  background-repeat: repeat !important;
  border: 6px white double !important;
  box-shadow: 15px 15px 0 #000 !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: #c8c8c8 !important;
}

/* Release action buttons — tui-button */
.retro-mode .bg-gradient-to-br.from-indigo-600 a {
  background-color: #00a800 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 4px 4px 0 #000 !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  white-space: normal !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2em !important;
}

.retro-mode .bg-gradient-to-br.from-indigo-600 a:active {
  background-color: #00a8a8 !important;
  box-shadow: none !important;
}

/* tui-divider between version and buttons */
.retro-mode .bg-gradient-to-br.from-indigo-600 .flex.flex-col > * + *,
.retro-mode .bg-gradient-to-br.from-indigo-600 .flex.flex-row > * + * {
  border: none !important;
}

.retro-mode .bg-gradient-to-br.from-purple-700 {
  background-color: #0000a8 !important;
  background-image: none !important;
}

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

/* ---- TABLES — tui-table + striped-blue + hovered-blue ---- */
.retro-mode table {
  border: 2px solid #a8a8a8 !important;
  border-collapse: collapse !important;
}

.retro-mode table th {
  background-color: #a8a8a8 !important;
  color: #ffff00 !important;
  font-weight: bold !important;
  border: 2px solid #a8a8a8 !important;
  padding: 5px !important;
  box-shadow: none !important;
}

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

.retro-mode table td {
  border: 2px solid #a8a8a8 !important;
  padding: 5px !important;
}

/* striped-blue: odd=black, even=blue */
.retro-mode table tr:nth-child(odd) td  { background-color: #000 !important; color: #fff !important; }
.retro-mode table tr:nth-child(even) td { background-color: #0000a8 !important; color: #fff !important; }

/* hovered-blue: bright #0000ff, black text */
.retro-mode table tr:hover td {
  background-color: #0000ff !important;
  color: #000 !important;
}
.retro-mode table tr:hover a { color: #000 !important; }

/* ---- TEAM ---- */
.retro-mode .team-card {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
  transform: none !important;
  padding: 12px !important;
}

.retro-mode .team-card-title {
  color: #ffff00 !important;
  font-size: 14px !important;
}

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

/* tui-border-solid on avatar */
.retro-mode .team-card-image-container {
  border: 2px solid #a8a8a8 !important;
  outline: none !important;
}

/* ---- CONTACT ---- */
.retro-mode .contact-card {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
  padding: 12px !important;
}

.retro-mode .contact-card-title { color: #ffff00 !important; }

.retro-mode .email-link {
  color: #00ffff !important;
  font-weight: normal !important;
  font-size: 14px !important;
  text-decoration: underline !important;
}

.retro-mode .community-link-discord { color: #00ffff !important; text-decoration: underline !important; }
.retro-mode .community-link-youtube { color: #a80000 !important; text-decoration: underline !important; }

/* tui-divider */
.retro-mode .community-section {
  border-left: none !important;
  border-top: 2px solid #fff !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
}

.retro-mode .community-section-title { color: #ffff00 !important; }

/* IRC / BBS — tui-bg-green-black terminal boxes */
.retro-mode .irc-box {
  background-color: #000 !important;
  background-image: url("../../node_modules/tuicss/dist/images/bg-green-black.png") !important;
  background-repeat: repeat !important;
  border: 2px solid #a8a8a8 !important;
  box-shadow: none !important;
}

.retro-mode .irc-network { color: #00ff00 !important; font-family: "Lucida Console", monospace !important; }
.retro-mode .irc-channel { color: #00ff00 !important; font-family: "Lucida Console", monospace !important; text-shadow: 0 0 6px #00ff00 !important; }

.retro-mode .bbs-box {
  background-color: #000 !important;
  background-image: url("../../node_modules/tuicss/dist/images/bg-yellow-black.png") !important;
  background-repeat: repeat !important;
  border: 2px solid #a8a8a8 !important;
  box-shadow: none !important;
}

.retro-mode .bbs-host { color: #a8a800 !important; font-family: "Lucida Console", monospace !important; }
.retro-mode .bbs-port { color: #a8a800 !important; font-family: "Lucida Console", monospace !important; text-shadow: 0 0 6px #a8a800 !important; }

/* ---- CODE PAGE ---- */
.retro-mode .error-alert {
  background-color: #a80000 !important;
  border: none !important;
  color: #fff !important;
}

.retro-mode .commit-item {
  background-color: #0000a8 !important;
  border: 6px white double !important;
  box-shadow: 10px 10px 0 #000 !important;
  padding: 12px !important;
}

.retro-mode .commits-section-title {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

.retro-mode .repo-link,
.retro-mode .commit-repo-link,
.retro-mode .commit-sha-link {
  color: #00ffff !important;
  text-decoration: underline !important;
  font-weight: normal !important;
}

/* ---- HOWTOS ---- */
.retro-mode .howto-card-title {
  color: #00ffff !important;
  text-decoration: underline !important;
}

.retro-mode .group:hover .howto-card-title { color: #ffff00 !important; }

/* tui-black-divider */
.retro-mode .howto-card-footer {
  border-top: 2px solid #fff !important;
}

.retro-mode .howto-card-read-link { color: #00ffff !important; font-weight: normal !important; transform: none !important; }

.retro-mode .new-badge {
  background-color: #a80000 !important;
  color: #ffff00 !important;
  border: none !important;
}

/* ---- WIKI CONTENT ---- */
.retro-mode .wiki-content { font-size: 14px !important; color: #fff !important; }

/* tui-divider under h1 */
.retro-mode .wiki-content h1 {
  color: #ffff00 !important;
  border-bottom: 2px solid #fff !important;
  padding-bottom: 4px !important;
}

.retro-mode .wiki-content h2 { color: #00ffff !important; }
.retro-mode .wiki-content h3 { color: #00ff00 !important; }
.retro-mode .wiki-content a { color: #00ffff !important; text-decoration: underline !important; }
.retro-mode .wiki-content a:visited { color: #a800a8 !important; }

/* tui-border-solid on images */
.retro-mode .wiki-content img { border: 2px solid #a8a8a8 !important; outline: none !important; }

/* Terminal code blocks */
.retro-mode .wiki-content pre {
  background-color: #000 !important;
  background-image: url("../../node_modules/tuicss/dist/images/bg-green-black.png") !important;
  background-repeat: repeat !important;
  color: #00ff00 !important;
  border: 2px solid #a8a8a8 !important;
  text-shadow: 0 0 4px #00ff00 !important;
}

.retro-mode .wiki-content code { background-color: #000 !important; color: #00ff00 !important; border: 1px solid #a8a8a8 !important; }

/* tui-border-solid blockquote */
.retro-mode .wiki-content blockquote {
  border-left: 6px white double !important;
  background-color: #00002a !important;
}

.retro-mode .wiki-content th { background-color: #a8a8a8 !important; color: #ffff00 !important; }
.retro-mode .wiki-content tr:nth-child(even) td { background-color: #0000a8 !important; }

/* ---- RETRO TOGGLE BAR — tui-statusbar exact style ---- */
.retro-toggle-bar {
  padding: 0 1px;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

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

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

/* tui-statusbar in retro mode */
.retro-mode .retro-toggle-bar {
  background-color: #a8a8a8 !important;
  border-top: none !important;
  box-shadow: none !important;
  display: block !important;
  padding: 0 1px !important;
  width: 100% !important;
}

.retro-mode .retro-toggle-bar::before {
  content: "" !important;
}

.retro-mode .retro-toggle-bar::after {
  content: "" !important;
}

/* tui-statusbar ul li style */
.retro-mode .retro-toggle-btn {
  display: inline-block !important;
  background: transparent !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Lucida Console", monospace !important;
  font-size: 14px !important;
  font-weight: normal !important;
  padding: 2px 10px !important;
  min-height: auto !important;
  margin-left: 10px !important;
  cursor: pointer !important;
}

.retro-mode .retro-toggle-btn:hover {
  background-color: #00a800 !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* tui-statusbar ul li:active → blue-168 */
.retro-mode .retro-toggle-btn:active {
  background-color: #0000a8 !important;
  color: #fff !important;
  box-shadow: none !important;
  padding: 2px 10px !important;
}
