From d8cd012ad15e8131185d68aeca50c22f5464cfea Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Sun, 10 May 2026 20:06:50 +0200
Subject: [PATCH] new retro mode

---
 apps/frontend/package-lock.json    |   7 +
 apps/frontend/package.json         |   1 +
 apps/frontend/src/main.ts          |   1 +
 apps/frontend/src/styles/retro.css | 844 +++++++++++++----------------
 4 files changed, 397 insertions(+), 456 deletions(-)

diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
index 2da7b73..9786365 100644
--- a/apps/frontend/package-lock.json
+++ b/apps/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "pinia": "^2.2.0",
+        "tuicss": "^2.1.2",
         "vue": "^3.5.0",
         "vue-i18n": "^10.0.8",
         "vue-router": "^4.4.0"
@@ -1984,6 +1985,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tuicss": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tuicss/-/tuicss-2.1.2.tgz",
+      "integrity": "sha512-bqsV0FPyargcF3s5wXAyFaZsQPf9a1jLeHqSURohQMXS06PkTfIuZwILE5bFoZouLhPjvhvNQanHaqMBU4/amA==",
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 79a24f6..99e08d8 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "pinia": "^2.2.0",
+    "tuicss": "^2.1.2",
     "vue": "^3.5.0",
     "vue-i18n": "^10.0.8",
     "vue-router": "^4.4.0"
diff --git a/apps/frontend/src/main.ts b/apps/frontend/src/main.ts
index a30021a..d1d4079 100644
--- a/apps/frontend/src/main.ts
+++ b/apps/frontend/src/main.ts
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import { router } from './router/index.router'
 import { i18n } from './i18n'
 import App from './App.vue'
+import 'tuicss/dist/tuicss.min.css'
 import './styles/global.css'
 import './styles/retro.css'
 
diff --git a/apps/frontend/src/styles/retro.css b/apps/frontend/src/styles/retro.css
index 70c3824..e6864f4 100644
--- a/apps/frontend/src/styles/retro.css
+++ b/apps/frontend/src/styles/retro.css
@@ -1,6 +1,11 @@
 /* ===================================================================
-   RETRO MODE — Windows 98 / GeoCities / Web 1.0 experience
+   RETRO MODE — TuiCss / DOS terminal experience
    Scoped under .retro-mode on the root app wrapper.
+   Color palette: TuiCss 168-value (CGA/EGA)
+     blue-168   #0000a8   cyan-168   #00a8a8
+     green-168  #00a800   yellow-168 #a8a800
+     red-168    #a80000   purple-168 #a800a8
+     gray-168   #a8a8a8   black      #000000
    =================================================================== */
 
 /* ---- ANIMATIONS ---- */
@@ -9,51 +14,28 @@
   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;
+  font-family: "Lucida Console", monospace !important;
+  background-color: #000 !important;
+  color: #fff !important;
 }
 
 .retro-mode * {
-  font-family: "Comic Sans MS", "Comic Sans", cursive !important;
+  font-family: "Lucida Console", monospace !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;
@@ -68,114 +50,138 @@
   min-height: auto !important;
 }
 
-/* ---- NAVIGATION HEADER ---- */
+/* ---- NAVIGATION HEADER → tui-nav style ---- */
 .retro-mode header.bg-gray-800 {
-  background: linear-gradient(180deg, #D4D0C8 0%, #C0BCAC 100%) !important;
+  background-color: #a8a8a8 !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;
+  padding: 0 2px !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  display: block !important;
+  width: 100% !important;
+  min-height: auto !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;
+  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;
-  background: #E8E4D0 !important;
+  display: inline-block !important;
 }
 
 .retro-mode header.bg-gray-800 a.text-xl::before {
-  content: "💾 " !important;
-  font-style: normal !important;
+  content: "" !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;
+  font-size: 14px !important;
+  font-weight: normal !important;
+  padding: 1px 10px !important;
+  display: inline-block !important;
   text-decoration: none !important;
+  border: 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;
+  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: #000080 !important;
-  color: #fff !important;
-  font-weight: bold !important;
+  background-color: #00a800 !important;
+  color: #000 !important;
 }
 
-.retro-mode header.bg-gray-800 button {
-  background: #D4D0C8 !important;
+/* Hamburger only */
+.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 buttons — plain nav style */
+.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;
-  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;
+  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: 12px !important;
-  border-bottom: 1px solid #C0BDB8 !important;
+  font-size: 14px !important;
+  border-bottom: 1px solid #000 !important;
 }
+
 .retro-mode nav.md\:hidden.absolute a:hover {
-  background: #000080 !important;
-  color: #FFFF00 !important;
+  background-color: #00a800 !important;
+  color: #000 !important;
 }
 
 /* ---- MAIN CONTAINER ---- */
 .retro-mode .main-container,
 .retro-mode .blog-main {
   margin-top: 0 !important;
-  padding: 8px !important;
+  padding: 12px !important;
   max-width: 960px !important;
 }
 
-/* ---- HERO SECTIONS → Win98 title bar ---- */
+/* ---- HERO SECTIONS → tui-window header style ---- */
 .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;
+  background-color: #0000a8 !important;
+  padding: 8px 12px !important;
   color: #fff !important;
   overflow: visible !important;
   text-align: left !important;
-  border-bottom: 2px solid #0a0a0a !important;
-  box-shadow: 0 2px 0 #404080 !important;
+  border: none !important;
+  box-shadow: 4px 4px 0 #000 !important;
 }
 
 .retro-mode .hero-decor-blob,
@@ -195,37 +201,37 @@
 }
 
 .retro-mode .hero-title {
-  font-size: 14px !important;
+  font-size: 18px !important;
   font-weight: bold !important;
-  font-style: italic !important;
-  font-family: "Comic Sans MS", cursive !important;
+  font-style: normal !important;
+  font-family: "Lucida Console", monospace !important;
   margin: 0 !important;
-  letter-spacing: 1px !important;
-  -webkit-text-fill-color: #fff !important;
+  letter-spacing: 0 !important;
   color: #fff !important;
-  text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,0.4) !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: #FFFF88 !important;
+  -webkit-text-fill-color: #ffff00 !important;
   background: none !important;
 }
 
 .retro-mode .hero-subtitle {
-  font-size: 11px !important;
-  color: #C8DFFF !important;
-  margin: 2px 0 0 !important;
+  font-size: 14px !important;
+  color: #c8c8c8 !important;
+  margin: 4px 0 0 !important;
   max-width: none !important;
 }
 
 .retro-mode .back-link {
-  color: #FFFF88 !important;
-  font-size: 11px !important;
+  color: #00ffff !important;
+  font-size: 14px !important;
   text-decoration: underline !important;
 }
 
-/* ---- WINDOWS / PANELS ---- */
+/* ---- WINDOWS / PANELS → tui-window style ---- */
 .retro-mode .card-base,
 .retro-mode .card-interactive,
 .retro-mode .blog-post-card,
@@ -238,11 +244,11 @@
 .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;
+  background-color: #0000a8 !important;
+  color: #fff !important;
+  border: none !important;
+  outline: none !important;
+  box-shadow: 10px 10px 0 #000 !important;
   transform: none !important;
 }
 
@@ -256,617 +262,547 @@
 .retro-mode .shadow-lg,
 .retro-mode .shadow-sm,
 .retro-mode .shadow-md {
-  box-shadow: 2px 2px 0 #0a0a0a !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
-/* ---- BUTTONS ---- */
+/* ---- BUTTONS → tui-button style ---- */
 .retro-mode .btn-hero,
 .retro-mode .btn-hero-teal,
 .retro-mode .btn-hero-indigo,
 .retro-mode .btn-primary {
-  background: #D4D0C8 !important;
+  background-color: #00a800 !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;
+  border: none !important;
+  box-shadow: 4px 4px 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: 4px 14px 5px !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;
 }
 
-/* Play buttons — bright green */
+.retro-mode .btn-hero:active,
+.retro-mode .btn-primary:active {
+  background-color: #00a8a8 !important;
+  box-shadow: none !important;
+}
+
+/* Play buttons */
 .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;
+  background-color: #00a800 !important;
+  color: #000 !important;
+  border: none !important;
+  box-shadow: 4px 4px 0 #000 !important;
+  font-family: "Lucida Console", monospace !important;
+  font-size: 14px !important;
+  padding: 1px 10px !important;
+  cursor: pointer !important;
 }
 
-/* Info / secondary buttons — orange */
+/* Info / secondary buttons */
 .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;
+  background-color: #a8a800 !important;
+  color: #000 !important;
+  border: none !important;
+  box-shadow: 4px 4px 0 #000 !important;
+  font-family: "Lucida Console", monospace !important;
+  font-size: 14px !important;
+  padding: 1px 10px !important;
+  cursor: pointer !important;
 }
 
-/* Wiki / external buttons — purple */
+/* Wiki / external buttons */
 .retro-mode .browse-wiki-btn {
-  background: #800080 !important;
+  background-color: #a800a8 !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;
+  border: none !important;
+  box-shadow: 4px 4px 0 #000 !important;
+  font-size: 14px !important;
+  padding: 1px 10px !important;
+  cursor: pointer !important;
 }
 
 /* Discord button */
 .retro-mode .discord-hero-btn {
-  background: #5865F2 !important;
+  background-color: #0000a8 !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;
+  border: 2px solid #a8a8a8 !important;
+  box-shadow: 4px 4px 0 #000 !important;
+  font-size: 14px !important;
+  padding: 1px 10px !important;
+  cursor: pointer !important;
 }
 
 .retro-mode .read-more-btn {
-  color: #0000EE !important;
-  font-weight: bold !important;
+  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: 12px !important;
+  font-size: 14px !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;
+  background-color: #00a8a8 !important;
+  box-shadow: none !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;
+  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: #000080 !important;
-  color: #FFFF00 !important;
+  background-color: #00a800 !important;
+  color: #000 !important;
+  box-shadow: none !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;
+  background-color: #00a8a8 !important;
+  color: #000 !important;
+  box-shadow: none !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;
+  padding: 0 6px !important;
+  font-size: 12px !important;
+  border: none !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; }
+.retro-mode .status-released   { background-color: #00a800 !important; color: #000 !important; }
+.retro-mode .status-demo       { background-color: #0000a8 !important; color: #fff !important; }
+.retro-mode .status-development { background-color: #a8a800 !important; color: #000 !important; }
+.retro-mode .status-archived   { background-color: #a8a8a8 !important; color: #000 !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
   padding: 12px !important;
 }
 
 .retro-mode .countdown-event-name {
-  font-size: 12px !important;
+  font-size: 14px !important;
   font-weight: bold !important;
-  font-style: italic !important;
-  letter-spacing: 2px !important;
-  color: #000080 !important;
+  color: #ffff00 !important;
+  letter-spacing: 0 !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-family: "Lucida Console", monospace !important;
+  font-size: 32px !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;
+  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 10px #00FF00 !important;
+  text-shadow: 0 0 6px #00ff00 !important;
 }
 
 .retro-mode .countdown-date {
   font-size: 12px !important;
-  color: #404040 !important;
-  font-style: italic !important;
+  color: #c8c8c8 !important;
 }
 
 .retro-mode .upcoming-events-title {
-  color: #000080 !important;
-  font-size: 13px !important;
+  color: #ffff00 !important;
+  font-size: 14px !important;
 }
 
 .retro-mode .upcoming-event-item {
-  background: #FFFFC8 !important;
-  border: 1px solid #AAAA00 !important;
+  background-color: #000 !important;
+  border: 1px solid #a8a8a8 !important;
+  color: #fff !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
 .retro-mode .featured-badge {
-  background: #FF00FF !important;
+  background-color: #a800a8 !important;
   color: #fff !important;
-  border: 2px solid #880088 !important;
-  text-shadow: 1px 1px 0 #880088 !important;
+  border: none !important;
+  box-shadow: 2px 2px 0 #000 !important;
 }
 
 .retro-mode .featured-title {
-  font-size: 20px !important;
+  font-size: 18px !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;
+  font-style: normal !important;
+  color: #ffff00 !important;
+  -webkit-text-fill-color: #ffff00 !important;
+  text-shadow: none !important;
 }
 
 .retro-mode .featured-desc {
-  color: #404040 !important;
-  font-size: 12px !important;
+  color: #c8c8c8 !important;
+  font-size: 14px !important;
 }
 
 .retro-mode .featured-image {
-  border: 3px solid !important;
-  border-color: #808080 #fff #fff #808080 !important;
-  outline: 1px solid #0a0a0a !important;
+  border: 2px solid #a8a8a8 !important;
+  outline: none !important;
 }
 
 .retro-mode .featured-version-badge {
-  background: #FFFF00 !important;
+  background-color: #a8a800 !important;
   color: #000 !important;
-  border: 1px solid #888800 !important;
+  border: none !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
-.retro-mode .yt-glow { display: none !important; }
+.retro-mode .yt-glow,
 .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;
+  color: #fff !important;
+  font-size: 14px !important;
+  font-weight: normal !important;
 }
 
 .retro-mode .yt-channel-link {
-  color: #0000EE !important;
+  color: #00ffff !important;
   text-decoration: underline !important;
-  font-weight: bold !important;
-  font-size: 12px !important;
+  font-size: 14px !important;
 }
 
 .retro-mode .yt-player-container {
-  border: 3px solid !important;
-  border-color: #808080 #fff #fff #808080 !important;
-  outline: 1px solid #0a0a0a !important;
+  border: 2px solid #a8a8a8 !important;
+  outline: none !important;
 }
 
 .retro-mode .yt-new-tag {
-  background: #FF0000 !important;
-  color: #FFFF00 !important;
-  border: 2px solid #880000 !important;
+  background-color: #a80000 !important;
+  color: #ffff00 !important;
+  border: none !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;
+  color: #ffff00 !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;
+  color: #c8c8c8 !important;
+  font-family: "Lucida Console", monospace !important;
+  font-size: 12px !important;
 }
 
 /* ---- NAV CARDS ---- */
 .retro-mode .nav-card-icon {
-  background: #C8E8FF !important;
-  border: 2px solid !important;
-  border-color: #fff #808080 #808080 #fff !important;
+  background-color: #00a8a8 !important;
+  border: 2px solid #000 !important;
 }
 
 .retro-mode .nav-card-title {
-  color: #000080 !important;
-  font-size: 15px !important;
+  color: #00ffff !important;
+  font-size: 14px !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;
+  color: #c8c8c8 !important;
+  font-size: 12px !important;
 }
 
 /* AI notice */
 .retro-mode .border-indigo-100 {
-  background: #FFFF99 !important;
-  border: 2px solid #888800 !important;
-  box-shadow: 2px 2px 0 #0a0a0a !important;
+  background-color: #0000a8 !important;
+  border: 2px solid #a8a8a8 !important;
+  box-shadow: 4px 4px 0 #000 !important;
+  color: #fff !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
 .retro-mode .blog-post-title a {
-  color: #0000EE !important;
+  color: #00ffff !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;
+  color: #ffff00 !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;
+  background-color: #a80000 !important;
+  color: #ffff00 !important;
+  border: none !important;
 }
 
 .retro-mode .blog-post-preview::after {
-  background: linear-gradient(to bottom, transparent, #D4D0C8) !important;
+  background: linear-gradient(to bottom, transparent, #0000a8) !important;
 }
 
 .retro-mode .blog-post-description {
-  color: #000080 !important;
-  font-style: italic !important;
+  color: #c8c8c8 !important;
 }
 
 .retro-mode .blog-post-body {
-  color: #404040 !important;
+  color: #fff !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
 .retro-mode .software-thumb {
-  border: 3px solid !important;
-  border-color: #808080 #fff #fff #808080 !important;
-  outline: 1px solid #0a0a0a !important;
+  border: 2px solid #a8a8a8 !important;
+  outline: none !important;
 }
 
 .retro-mode .software-title {
-  color: #0000EE !important;
-  font-style: italic !important;
+  color: #00ffff !important;
   text-decoration: underline !important;
 }
 
-.retro-mode .software-desc { color: #404040 !important; }
-.retro-mode .software-meta { color: #808080 !important; }
+.retro-mode .software-desc { color: #fff !important; }
+.retro-mode .software-meta { color: #c8c8c8 !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;
+  background-color: #0000a8 !important;
+  border: 2px solid #a8a8a8 !important;
+  box-shadow: 10px 10px 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;
+  color: #ffff00 !important;
+  -webkit-text-fill-color: #ffff00 !important;
 }
 
 .retro-mode .bg-gradient-to-br.from-indigo-600 .text-indigo-100 {
-  color: #C8C8FF !important;
+  color: #a8a8a8 !important;
 }
 
 .retro-mode .bg-gradient-to-br.from-indigo-600 a {
-  background: #D4D0C8 !important;
+  background-color: #00a800 !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;
+  border: none !important;
+  box-shadow: 4px 4px 0 #000 !important;
   text-decoration: none !important;
-  font-weight: bold !important;
-  padding: 3px 10px 4px !important;
+  padding: 1px 10px !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;
+  background-color: #0000a8 !important;
 }
 
 .retro-mode .text-purple-200,
-.retro-mode .text-purple-100 { color: #C8C8FF !important; }
-.retro-mode .text-purple-300 { color: #D8D8FF !important; }
+.retro-mode .text-purple-100,
+.retro-mode .text-purple-300 { color: #a8a8a8 !important; }
+
+/* Tables → tui-table style */
+.retro-mode table {
+  border: 2px solid #a8a8a8 !important;
+  border-collapse: collapse !important;
+}
 
-/* Tables */
 .retro-mode table th {
-  background: #000080 !important;
-  color: #FFFF00 !important;
+  background-color: #a8a8a8 !important;
+  color: #ffff00 !important;
   font-weight: bold !important;
-  border: 1px solid #0a0a0a !important;
+  border: 2px solid #a8a8a8 !important;
+  padding: 5px !important;
   box-shadow: none !important;
 }
 
-.retro-mode table thead { background: #000080 !important; }
+.retro-mode table thead { background-color: #a8a8a8 !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 td {
+  border: 2px solid #a8a8a8 !important;
+  padding: 5px !important;
+}
+
+.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; }
 
 .retro-mode table tr:hover td {
-  background: #000080 !important;
-  color: #FFFF00 !important;
+  background-color: #0000ff !important;
+  color: #000 !important;
 }
-.retro-mode table tr:hover a { color: #FFFF00 !important; }
+.retro-mode table tr:hover a { color: #000 !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
   transform: none !important;
 }
 
 .retro-mode .team-card-title {
-  color: #000080 !important;
-  font-style: italic !important;
-  font-size: 13px !important;
+  color: #ffff00 !important;
+  font-size: 14px !important;
 }
 
 .retro-mode .team-card-desc {
-  color: #404040 !important;
-  font-size: 11px !important;
+  color: #c8c8c8 !important;
+  font-size: 12px !important;
 }
 
 .retro-mode .team-card-image-container {
-  border: 3px solid !important;
-  border-color: #808080 #fff #fff #808080 !important;
-  outline: 1px solid #0a0a0a !important;
+  border: 2px solid #a8a8a8 !important;
+  outline: none !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
-.retro-mode .contact-card-title { color: #000080 !important; font-style: italic !important; }
+.retro-mode .contact-card-title { color: #ffff00 !important; }
 
 .retro-mode .email-link {
-  color: #0000EE !important;
-  font-weight: bold !important;
+  color: #00ffff !important;
+  font-weight: normal !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 .community-link-discord { color: #00ffff !important; font-weight: normal !important; text-decoration: underline !important; }
+.retro-mode .community-link-youtube { color: #a80000 !important; font-weight: normal !important; text-decoration: underline !important; }
+.retro-mode .community-section { border-left-color: #a8a8a8 !important; }
+.retro-mode .community-section-title { color: #ffff00 !important; }
 
 .retro-mode .irc-box {
-  background: #000 !important;
-  border: 2px solid #808080 !important;
-  box-shadow: inset 1px 1px 0 0 #404040 !important;
+  background-color: #000 !important;
+  border: 2px solid #a8a8a8 !important;
+  box-shadow: none !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 .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: #000 !important;
-  border: 2px solid #808080 !important;
-  box-shadow: inset 1px 1px 0 0 #404040 !important;
+  background-color: #000 !important;
+  border: 2px solid #a8a8a8 !important;
+  box-shadow: none !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; }
+.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: #FFCCCC !important;
-  border: 2px solid #CC0000 !important;
-  color: #880000 !important;
+  background-color: #a80000 !important;
+  border: none !important;
+  color: #fff !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;
+  background-color: #0000a8 !important;
+  box-shadow: 10px 10px 0 #000 !important;
 }
 
 .retro-mode .commits-section-title {
-  color: #000080 !important;
-  font-style: italic !important;
+  color: #ffff00 !important;
   text-decoration: underline !important;
 }
 
 .retro-mode .repo-link,
 .retro-mode .commit-repo-link,
 .retro-mode .commit-sha-link {
-  color: #0000EE !important;
+  color: #00ffff !important;
   text-decoration: underline !important;
-  font-weight: bold !important;
+  font-weight: normal !important;
 }
 
 /* ---- HOWTOS ---- */
 .retro-mode .howto-card-title {
-  color: #0000EE !important;
-  font-style: italic !important;
+  color: #00ffff !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 .group:hover .howto-card-title { color: #ffff00 !important; }
+.retro-mode .howto-card-footer { border-top-color: #a8a8a8 !important; }
+.retro-mode .howto-card-read-link { color: #00ffff !important; font-weight: normal !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;
+  background-color: #a80000 !important;
+  color: #ffff00 !important;
+  border: none !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-mode .wiki-content { font-size: 14px !important; color: #fff !important; }
+.retro-mode .wiki-content h1 { color: #ffff00 !important; border-bottom: 2px solid #a8a8a8 !important; font-style: normal !important; }
+.retro-mode .wiki-content h2 { color: #00ffff !important; font-style: normal !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; }
+.retro-mode .wiki-content img { border: 2px solid #a8a8a8 !important; outline: none !important; }
+.retro-mode .wiki-content pre { background-color: #000 !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; }
+.retro-mode .wiki-content blockquote { border-left: 4px solid #a800a8 !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 (taskbar style) ---- */
+/* ---- RETRO TOGGLE BAR → tui-statusbar style ---- */
 .retro-toggle-bar {
-  padding: 6px 8px;
-  background: #f5f5f5;
+  padding: 0 1px;
+  background-color: #f5f5f5;
   border-top: 1px solid #e0e0e0;
   text-align: center;
 }
 
 .retro-toggle-btn {
-  background: #f0f0f0;
+  background-color: #f0f0f0;
   border: 1px solid #ccc;
-  padding: 4px 14px;
+  padding: 2px 10px;
   cursor: pointer;
   font-size: 12px;
   font-family: inherit;
@@ -874,55 +810,51 @@
 }
 
 .retro-toggle-btn:hover {
-  background: #e4e4e4;
+  background-color: #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;
+  background-color: #a8a8a8 !important;
+  border-top: none !important;
+  box-shadow: none !important;
   display: flex !important;
   align-items: center !important;
-  justify-content: center !important;
-  padding: 3px 6px !important;
-  gap: 8px !important;
+  justify-content: flex-start !important;
+  padding: 0 1px !important;
+  gap: 0 !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;
+  content: "" !important;
 }
 
 .retro-mode .retro-toggle-bar::after {
-  content: "🖥" !important;
+  content: "" !important;
+}
+
+.retro-mode .retro-toggle-btn {
+  background-color: #a8a8a8 !important;
+  color: #000 !important;
+  border: none !important;
+  box-shadow: none !important;
+  font-family: "Lucida Console", monospace !important;
   font-size: 14px !important;
-  font-style: normal !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;
+}
+
+.retro-mode .retro-toggle-btn:active {
+  background-color: #0000a8 !important;
+  color: #fff !important;
+  box-shadow: none !important;
+  padding: 2px 10px !important;
 }