/* ==========================================
   RETRO OS THEME - Windows 95/98/2000 Style
   ========================================== */

/* --- CSS Variables --- */
:root {
  /* Light theme - Mint Fresh */
  --win-bg: #e0f2e0;
  /* Mint green desktop */
  --win-chrome: #d0e8d0;
  /* Light mint chrome */
  --win-chrome-light: #f0f8f0;
  /* Very light mint highlight */
  --win-chrome-dark: #a0c0a0;
  /* Medium mint shadow */
  --win-chrome-darker: #2d8659;
  /* Dark green outer edge */
  --win-titlebar: #2d8659;
  /* Dark green title bars */
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #1a4d3a;
  /* Forest green border */
  --win-content-bg: #ffffff;
  --win-text: #1a4d3a;
  /* Forest green text */
  --win-text-secondary: #4caf50;
  /* Green secondary */
  --win-link: #2d8659;
  /* Dark green links */
  --win-button-face: #d0e8d0;
  --win-selection: #4caf50;
  /* Green selection */
  --win-selection-text: #ffffff;
  --header-bg: #d0e8d0;
  /* Light mint header */
  --logo-color: #1a4d3a;
  /* Forest green logo */
  --terminal-bg: #ffffff;
  --terminal-text: #1a4d3a;
  --terminal-prompt: #2d8659;
  --color-success: #28a745;
  /* Defined explicit success color */
  --header-hover-bg: #ffffff;
  --header-hover-text: #1a4d3a;
}

html[data-theme="dark"] {
  /* Dark theme - Terminal Green (Classic CRT) */
  --win-bg: #0a0a0a;
  /* Pure black */
  --win-chrome: #0f0f0f;
  /* Near black chrome */
  --win-chrome-light: #2a2a2a;
  /* Dark highlight */
  --win-chrome-dark: #000000;
  /* Black shadow */
  --win-chrome-darker: #00ff00;
  /* Green border accent */
  --win-titlebar: #000000;
  --win-titlebar-text: #00ff00;
  --win-titlebar-border: #00ff00;
  --win-content-bg: #0a0a0a;
  --win-text: #00dd00;
  --win-text-secondary: #00aa00;
  --win-link: #00ff00;
  --win-button-face: #1a1a1a;
  --win-selection: #00ff00;
  --win-selection-text: #000000;
  --header-bg: #000000;
  --logo-color: #00ff00;
  --terminal-bg: #000000;
  --terminal-text: #00ff00;
  --terminal-prompt: #00ff00;
  --color-success: #00ff00;
  /* Defined explicit success color */
  --header-hover-bg: #00ff00;
  --header-hover-text: #000000;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

html,
body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  background: var(--win-bg);
  color: var(--win-text);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Beveled Border Mixins (as classes) --- */
.bevel-raised {
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  box-shadow: inset 1px 1px 0 var(--win-chrome), inset -1px -1px 0 var(--win-chrome-dark);
}

.bevel-inset {
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  box-shadow: inset 1px 1px 0 var(--win-chrome-darker), inset -1px -1px 0 var(--win-chrome);
}

/* ==========================================
   WINDOW COMPONENT
   ========================================== */
.window {
  background: var(--win-chrome);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  box-shadow:
    inset 1px 1px 0 var(--win-chrome),
    inset -1px -1px 0 var(--win-chrome-dark),
    2px 2px 8px rgba(0, 0, 0, 0.3);
  margin: 16px;
}

.window-titlebar {
  background: var(--win-titlebar);
  color: var(--win-titlebar-text);
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 12px;
  user-select: none;
}

.window-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}

.window-title-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.window-controls {
  display: flex;
  gap: 2px;
}

.window-btn {
  width: 16px;
  height: 14px;
  background: var(--win-button-face);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  font-family: "Marlett", sans-serif;
  font-size: 8px;
  line-height: 10px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  color: #000;
}

.window-btn:active {
  border-color: var(--win-chrome-darker) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-darker);
}

.window-btn-min::after {
  content: "🗕";
  font-size: 10px;
}

.window-btn-max::after {
  content: "🗖";
  font-size: 10px;
}

.window-btn-close::after {
  content: "✕";
  font-size: 10px;
  font-weight: bold;
}

.window-content {
  background: var(--win-content-bg);
  color: var(--win-text);
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  margin: 2px;
  padding: 12px;
}

/* ==========================================
   MENU BAR (replaces sidebar)
   ========================================== */
.menubar {
  background: var(--win-chrome);
  border-bottom: 2px solid var(--win-chrome-darker);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

html[data-theme="dark"] .menubar {
  background: #000000;
  border-bottom: 1px solid #00ff00;
}

.menubar-item {
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--win-text);
  font-size: 13px;
  border: none;
  border-right: 1px solid var(--win-chrome-darker);
}

html[data-theme="dark"] .menubar-item {
  color: #00ff00;
  border-right: 1px solid #004400;
}

.menubar-item:hover {
  background: var(--win-selection);
  color: var(--win-selection-text);
  text-decoration: none;
}

html[data-theme="dark"] .menubar-item:hover {
  background: #00ff00;
  color: #000000;
}

.menubar-item.active {
  background: var(--win-selection);
  color: var(--win-selection-text);
  text-decoration: none;
}

html[data-theme="dark"] .menubar-item.active {
  background: #003300;
  color: #00ff00;
}

.menubar-spacer {
  flex: 1;
}

.menubar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}

/* ==========================================
   HEADER (Title Window)
   ========================================== */
header {
  background: var(--header-bg);
  border-bottom: 2px solid var(--win-chrome-darker);
  padding: 24px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html[data-theme="dark"] header {
  background: #000000;
  border-bottom: 1px solid #00ff00;
}

#ascii-logo-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

#ascii-logo {
  display: block;
  max-width: 100%;
  height: auto;
  width: clamp(300px, 50vw, 640px);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Transform black text to Forest Green (#1a4d3a) for light mode */
  /* Computed filter approximation for #1a4d3a from black */
  filter: invert(24%) sepia(34%) saturate(733%) hue-rotate(79deg) brightness(97%) contrast(89%);
}

html[data-theme="dark"] #ascii-logo {
  /* Transform black text to Terminal Green (#00ff00) for dark mode */
  /* Computed filter approximation for #00ff00 from black */
  filter: invert(56%) sepia(89%) saturate(3000%) hue-rotate(86deg) brightness(119%) contrast(119%);
}

/* ==========================================
   MAIN CONTENT AREA (Desktop)
   ========================================== */
.desktop {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1;
}

.content {
  max-width: 900px;
  margin: 16px auto 0 auto;
  /* Top margin for gap below header */
  width: 100%;
}

/* ==========================================
   TERMINAL WINDOW (for home.sh, skills.sh)
   ========================================== */
.terminal-window {
  background: var(--win-chrome);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.terminal-header {
  background: var(--win-titlebar);
  color: var(--win-titlebar-text);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 12px;
  border-bottom: 1px solid var(--win-titlebar-border);
}

html[data-theme="dark"] .terminal-header {
  border: 1px solid #00ff00;
  border-bottom: 1px solid #00ff00;
}

.terminal-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

.terminal-title::before {
  content: ">_";
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
}

.terminal-buttons {
  display: flex;
  gap: 2px;
}

.terminal-button {
  width: 16px;
  height: 14px;
  background: var(--win-button-face);
  border: 1px solid var(--win-chrome-darker);
  cursor: pointer;
  padding: 0;
  font-size: 8px;
  line-height: 10px;
  text-align: center;
  color: var(--win-text);
}

html[data-theme="dark"] .terminal-button {
  background: #000000;
  border: 1px solid #00ff00;
  color: #00ff00;
}

.terminal-button:active {
  background: var(--win-selection);
}

.terminal-minimize::after {
  content: "_";
  font-weight: bold;
}

.terminal-maximize::after {
  content: "□";
}

.terminal-close::after {
  content: "×";
  font-weight: bold;
}

.terminal-content {
  background: var(--terminal-bg, #ffffff);
  color: var(--terminal-text, #1a4d3a);
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--win-chrome-dark);
  margin: 2px;
  min-height: 100px;
}

html[data-theme="dark"] .terminal-content {
  background: #000000;
  color: #00ff00;
  border: 1px solid #00ff00;
}

.terminal-prompt {
  color: var(--terminal-prompt, #000000);
  margin-bottom: 4px;
}

html[data-theme="dark"] .terminal-prompt {
  color: #00ff00;
}

.terminal-prompt::before {
  content: "$ ";
  color: var(--win-text-secondary);
}

.stardate-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: inherit;
}

.real-date {
  color: var(--win-text-secondary);
}

html[data-theme="dark"] .terminal-prompt::before {
  color: #00aa00;
}

.terminal-output {
  color: var(--terminal-text, #000000);
  margin-bottom: 12px;
  margin-left: 0;
}

html[data-theme="dark"] .terminal-output {
  color: #00dd00;
}

.terminal-command {
  margin-bottom: 8px;
}

.skills-tree {
  color: var(--terminal-prompt, #000000);
  font-family: "Consolas", "Courier New", monospace;
  white-space: pre;
  margin: 8px 0;
}

html[data-theme="dark"] .skills-tree {
  color: #00ff00;
}

.github-tree {
  color: var(--terminal-prompt, #000000);
  font-family: "Consolas", "Courier New", monospace;
  line-height: 1.6;
  margin: 8px 0;
}

html[data-theme="dark"] .github-tree {
  color: #00ff00;
}

.tree-line {
  font-family: "Consolas", "Courier New", monospace;
}

.tree-prefix {
  white-space: pre;
}

.github-project-link {
  color: var(--terminal-prompt, #000000);
  text-decoration: underline;
  cursor: pointer;
}

html[data-theme="dark"] .github-project-link {
  color: #00ff00;
}

.github-project-link:hover {
  color: var(--win-link);
  text-decoration: underline;
}

html[data-theme="dark"] .github-project-link:hover {
  color: #66ff66;
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--terminal-prompt, #000000);
  animation: blink 1s step-end infinite;
}

html[data-theme="dark"] .terminal-cursor {
  background: #00ff00;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.terminal-prompt-line {
  display: flex;
  align-items: center;
}

/* Terminal window styling */
.skills-directory {
  background: var(--win-chrome);
  border: 2px solid var(--win-chrome-darker);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  margin: 16px auto;
  max-width: 900px;
  border-radius: 0;
}

html[data-theme="dark"] .skills-directory {
  background: #000000;
  border: 1px solid #00ff00;
  box-shadow: none;
}

.skills-directory.minimized .terminal-content {
  display: none;
}

.skills-directory.hidden {
  display: none;
}

/* ==========================================
   POST TILES (as file icons / list items)
   ========================================== */
.recent-posts,
.posts-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 900px;
  margin: 0 auto 16px auto;
  background: var(--win-chrome);
  border: 2px solid var(--win-chrome-darker);
  padding: 2px;
}

html[data-theme="dark"] .recent-posts,
html[data-theme="dark"] .posts-grid {
  background: #000000;
  border: 1px solid #00ff00;
}

.posts-grid {
  margin-top: 16px;
}

.recent-posts::before,
.posts-grid::before {
  content: "[] Recent Posts";
  display: block;
  background: var(--win-titlebar);
  color: var(--win-titlebar-text);
  padding: 4px 6px;
  font-weight: bold;
  font-size: 12px;
  margin: -2px -2px 2px -2px;
  border-bottom: 1px solid var(--win-chrome-darker);
}

html[data-theme="dark"] .recent-posts::before,
html[data-theme="dark"] .posts-grid::before {
  background: #000000;
  color: #00ff00;
  border-bottom: 1px solid #00ff00;
}

.posts-grid::before {
  content: "[] All Posts";
}

.post-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--win-content-bg);
  color: var(--win-text);
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 13px;
}

.post-tile:hover {
  background: var(--win-selection);
  color: var(--win-selection-text);
  text-decoration: none;
}

html[data-theme="dark"] .form-group select option {
  background: #000000;
  color: #00ff00;
}

/* Season Lock Style */
.form-group select.correct-locked {
  border-color: var(--win-selection);
  color: var(--win-selection-text);
  background-color: var(--win-selection);
  opacity: 1;
  /* Remove native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom tick */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 40px;
  /* Ensure padding clears the icon */
}

/* Dark mode adjustment for locked season */
html[data-theme="dark"] .form-group select.correct-locked {
  border-color: #00ff00;
  color: #000000;
  background-color: #00ff00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

html[data-theme="dark"] .post-tile {
  background: #000000;
  color: #00ff00;
}

html[data-theme="dark"] .post-tile:hover {
  background: #00ff00;
  color: #000000;
}

.post-tile::before {
  content: ">";
  font-family: monospace;
  font-weight: bold;
}

.post-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.post-tile-title {
  font-weight: normal;
  font-family: inherit;
}

.post-tile-date {
  font-size: 12px;
  color: var(--win-text-secondary);
}

.post-tile:hover .post-tile-date {
  color: var(--win-selection-text);
}

/* ==========================================
   MARKDOWN CONTENT (in windows)
   ========================================== */
.markdown-section {
  background: var(--win-chrome);
  border: 2px solid var(--win-chrome-darker);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  margin: 16px auto;
  max-width: 900px;
  padding: 0;
  border-radius: 0;
}

html[data-theme="dark"] .markdown-section {
  background: #000000;
  border: 1px solid #00ff00;
  box-shadow: none;
}

.markdown-section::before {
  content: "[] Document";
  display: block;
  background: var(--win-titlebar);
  color: var(--win-titlebar-text);
  padding: 4px 6px;
  font-weight: bold;
  font-size: 12px;
  border-bottom: 1px solid var(--win-chrome-darker);
}

html[data-theme="dark"] .markdown-section::before {
  background: #000000;
  color: #00ff00;
  border-bottom: 1px solid #00ff00;
}

.markdown-section>*:not(:first-child) {
  margin-left: 2px;
  margin-right: 2px;
}

.markdown-section .post-date {
  position: static;
  display: block;
  padding: 4px 12px;
  background: var(--win-chrome);
  font-size: 12px;
  color: var(--win-text-secondary);
  border-bottom: 1px solid var(--win-chrome-dark);
}

.markdown-content,
.markdown-section>p,
.markdown-section>div:not(.post-header) {
  background: var(--win-content-bg);
  color: var(--win-text);
  padding: 12px;
  border: 1px solid var(--win-chrome-dark);
  margin: 2px;
  border-radius: 0;
}

html[data-theme="dark"] .markdown-content,
html[data-theme="dark"] .markdown-section>p,
html[data-theme="dark"] .markdown-section>div:not(.post-header) {
  background: #000000;
  color: #00dd00;
  border: 1px solid #00ff00;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-section h1,
.markdown-section h2,
.markdown-section h3 {
  color: var(--win-chrome-darker);
  margin-top: 0;
}

html[data-theme="dark"] .markdown-content h1,
html[data-theme="dark"] .markdown-content h2,
html[data-theme="dark"] .markdown-content h3,
html[data-theme="dark"] .markdown-section h1,
html[data-theme="dark"] .markdown-section h2,
html[data-theme="dark"] .markdown-section h3 {
  color: #00ff00;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol {
  line-height: 1.6;
  margin: 8px 0;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  display: block;
  margin: 12px auto;
}

/* ==========================================
   POST VIEW
   ========================================== */
.post-header {
  background: var(--win-chrome);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--win-chrome-dark);
}

.post-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--win-text);
  margin: 0;
}

.post-date {
  font-size: 12px;
  color: var(--win-text-secondary);
}

/* ==========================================
   BUTTONS (Classic 3D style)
   ========================================== */
.btn,
button,
input[type="submit"] {
  background: var(--win-button-face);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  padding: 4px 16px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--win-text);
}

.btn:active,
button:active,
input[type="submit"]:active {
  border-color: var(--win-chrome-darker) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-darker);
}

.btn:focus,
button:focus {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* ==========================================
   LINKS
   ========================================== */
a {
  color: var(--win-link);
  text-decoration: underline;
}

a:hover {
  color: var(--win-link);
}

a:visited {
  color: #404040;
}

html[data-theme="dark"] a {
  color: #00ff00;
}

html[data-theme="dark"] a:visited {
  color: #00aa00;
}

html[data-theme="dark"] a:hover {
  color: #66ff66;
}

/* ==========================================
   FOOTER (Status bar style)
   ========================================== */
footer,
.site-footer {
  background: var(--win-chrome);
  border-top: 2px solid var(--win-chrome-darker);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--win-text-secondary);
  display: flex;
  align-items: center;
}

html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer {
  background: #000000;
  border-top: 1px solid #00ff00;
  color: #00aa00;
}

.site-footer p {
  margin: 0;
  padding: 2px 8px;
  background: var(--win-content-bg);
  border: 1px solid var(--win-chrome-dark);
  flex: 1;
  text-align: center;
}

html[data-theme="dark"] .site-footer p {
  background: #000000;
  border: 1px solid #004400;
  color: #00aa00;
}

/* ==========================================
   THEME TOGGLE (as a button)
   ========================================== */
#theme-toggle {
  background: var(--win-button-face);
  border: 2px solid var(--win-chrome-darker);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--win-text);
  margin-right: 4px;
}

#theme-toggle:hover {
  background: var(--win-selection);
  color: var(--win-selection-text);
}

html[data-theme="dark"] #theme-toggle {
  background: #000000;
  border: 1px solid #00ff00;
  color: #00ff00;
}

html[data-theme="dark"] #theme-toggle:hover {
  background: #00ff00;
  color: #000000;
}

#theme-toggle .moon-icon,
#theme-toggle .sun-icon {
  width: 14px;
  height: 14px;
}

html[data-theme="dark"] #theme-toggle .moon-icon {
  display: none;
}

html[data-theme="dark"] #theme-toggle .sun-icon {
  display: block !important;
}

html:not([data-theme="dark"]) #theme-toggle .sun-icon {
  display: none;
}

/* ==========================================
   SIDEBAR (Converted to horizontal nav)
   ========================================== */
#sidebar-layer {
  display: none;
  /* Hide old sidebar */
}

#sidebar-toggle {
  display: none;
  /* Hide toggle */
}

.sidebar-nav,
.sidebar-content,
.sidebar-footer {
  display: none;
}

/* ==========================================
   SCROLLBAR (Classic style)
   ========================================== */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--win-chrome);
  border: 1px solid var(--win-chrome-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--win-button-face);
  border: 2px solid var(--win-chrome-darker);
}

::-webkit-scrollbar-button {
  background: var(--win-button-face);
  border: 1px solid var(--win-chrome-darker);
  height: 14px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #000000;
  border: 1px solid #004400;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #003300;
  border: 1px solid #00ff00;
}

html[data-theme="dark"] ::-webkit-scrollbar-button {
  background: #000000;
  border: 1px solid #00ff00;
}

/* ==========================================
   REMOVE OLD STYLES
   ========================================== */
.ascii-background,
#ascii-background,
#ascii-canvas,
.ascii-overlay {
  display: none !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  .menubar {
    flex-wrap: wrap;
  }

  .menubar-item {
    padding: 6px 8px;
  }

  .terminal-window,
  .markdown-section,
  .skills-directory,
  .recent-posts,
  .posts-grid {
    margin: 8px;
  }

  /* Removed #ascii-logo font-size and overflow-x rules - using fluid clamp() instead */
  /* Removed header overflow-x rule - using overflow: hidden instead */
}

@media (max-width: 480px) {
  /* Removed #ascii-logo font-size rule - using fluid clamp() instead */

  .post-tile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ==========================================
   TNG QUIZ SPECIFIC STYLES
   ========================================== */

/* Screenshot Area */
.screenshot-area {
  margin-bottom: 16px;
}

.screenshot-wrapper {
  position: relative;
  background: var(--win-content-bg);
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  padding: 4px;
}

.screenshot {
  width: 100%;
  height: auto;
  display: block;
}

.screenshot-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black */
  color: #ffffff;
  /* White text for contrast */
  padding: 6px 10px;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  /* Blur behind the element */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  z-index: 10;
}

.screenshot-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 10;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: 14px;
  font-weight: bold;
}

.overlay-top-left {
  top: 10px;
  left: 10px;
}

.overlay-bottom-left {
  bottom: 10px;
  left: 10px;
  max-width: 90%;
}

html[data-theme="dark"] .screenshot-counter,
html[data-theme="dark"] .screenshot-overlay {
  background: rgba(0, 51, 0, 0.7);
  /* Semi-transparent dark green */
  color: #00ff00;
  border: 1px solid rgba(0, 255, 0, 0.5);
}

/* Hint Area */
.hint-area {
  margin-bottom: 16px;
  background: #ffffcc;
  border: 2px solid var(--win-chrome-darker);
  padding: 16px;
  font-size: 13px;
}

html[data-theme="dark"] .hint-area {
  background: #003300;
  color: #ffff99;
  border: 1px solid #00ff00;
}

.hint-content strong {
  color: var(--win-chrome-darker);
}

html[data-theme="dark"] .hint-content strong {
  color: #00ff00;
}

/* Input Area & Forms */
.input-area {
  margin-bottom: 16px;
}

.guess-form {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-title {
  position: relative;
}

.form-group label {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.form-group input,
.form-group select {
  padding: 10px;
  background: var(--win-content-bg);
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  color: var(--win-text);
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  min-height: 36px;
  line-height: 1.4;
}

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select {
  background: #0a0a0a;
  border: 1px solid #00ff00;
  color: #00dd00;
}

.form-group input:focus,
.form-group select:focus {
  outline: 1px dotted var(--win-text);
  outline-offset: -3px;
}

/* Episode Dropdown */
#episodeDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--win-content-bg);
  border: 2px solid var(--win-chrome-darker);
  margin-top: 2px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

#episodeDropdown.active {
  display: block;
}

.episode-option {
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--win-chrome-dark);
}

.episode-option:hover,
.episode-option.selected {
  background: var(--win-selection);
  color: var(--win-selection-text);
}

html[data-theme="dark"] .episode-option:hover,
html[data-theme="dark"] .episode-option.selected {
  background: #00ff00;
  color: #000000;
}

/* Buttons */
/* Button Group */
.button-group {
  display: flex;
  gap: 10px;
  width: 100%;
  grid-column: 1 / -1;
  /* Ensure it spans the grid */
  align-items: stretch;
  /* Force equal height */
}

.btn-skip {
  background: var(--win-button-face);
  color: var(--win-text);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  padding: 0 16px;
  /* Horizontal padding only, let flex handle height */
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 1px 1px 0 #000;
  width: 100px;
  /* Slightly wider for better proportion */
  flex-shrink: 0;
  font-size: 14px;
  /* Matched font size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-skip:active {
  border-color: var(--win-chrome-darker) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-darker);
  transform: translate(1px, 1px);
  box-shadow: none;
}

html[data-theme="dark"] .btn-skip {
  background: #000000;
  color: #00ff00;
  border: 1px solid #00ff00;
  box-shadow: none;
}

html[data-theme="dark"] .btn-skip:active {
  background: #003300;
}

.btn-submit {
  flex-grow: 1;
  /* Take remaining space */
  /* Remove grid-column as it is now inside the group */
  padding: 16px;
  background: var(--win-button-face);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  color: var(--win-text);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  text-transform: uppercase;
  display: flex;
  /* Ensure flex behavior */
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background: var(--win-chrome-light);
}

.btn-submit:active {
  border-color: var(--win-chrome-darker) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-darker);
}

.btn-submit:disabled {
  color: var(--win-text-secondary);
  cursor: not-allowed;
}

html[data-theme="dark"] .btn-submit {
  background: #1a1a1a;
  border: 1px solid #00ff00;
  color: #00ff00;
}

html[data-theme="dark"] .btn-submit:hover {
  background: #003300;
}

.btn-primary,
.btn-secondary {
  padding: 10px 16px;
  background: var(--win-button-face);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  color: var(--win-text);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  min-width: 90px;
}

.btn-primary:active,
.btn-secondary:active {
  border-color: var(--win-chrome-darker) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-darker);
}

.btn-primary:focus,
.btn-secondary:focus {
  outline: 1px dotted var(--win-text);
  outline-offset: -4px;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-secondary {
  background: #1a1a1a;
  border: 1px solid #00ff00;
  color: #00ff00;
}

/* Attempts Display */
/* Attempts Display / Progress Bar */
.attempts-display {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  padding: 0;
  background: var(--win-content-bg);
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  position: relative;
  height: 24px;
  line-height: 24px;
}

.attempts-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(0, 128, 0, 0.3);
  width: 0%;
  transition: width 0.3s ease;
  z-index: 1;
}

html[data-theme="dark"] .attempts-progress {
  background: rgba(0, 255, 0, 0.3);
}

.attempts-text {
  position: relative;
  z-index: 2;
}

/* Feedback Area */
.feedback-area {
  /* Removed min-height to fix gap issue */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}


.feedback-message {
  padding: 16px;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  border: 2px solid var(--win-chrome-darker);
}

.feedback-message.success {
  background: #c8e6c9;
  color: var(--win-text);
}

.feedback-message.error {
  background: #ffcdd2;
  color: var(--win-text);
}

.feedback-message.partial {
  background: #fff9c4;
  color: var(--win-text);
}

html[data-theme="dark"] .feedback-message.success {
  background: #003300;
  color: #00ff00;
}

html[data-theme="dark"] .feedback-message.error {
  background: #330000;
  color: #ff6666;
}

html[data-theme="dark"] .feedback-message.partial {
  background: #333300;
  color: #ffff66;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-content {
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-wide {
  max-width: 1100px;
}

.modal-header {
  background: var(--win-titlebar);
  color: var(--win-titlebar-text);
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
}

.modal-body {
  padding: 20px;
}

.close-btn {
  background: var(--win-button-face);
  border: 1px solid var(--win-chrome-darker);
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 14px;
  font-size: 10px;
  color: var(--win-text);
}

/* Score Display */
.score-display {
  text-align: center;
  padding: 10px 0;
  border-bottom: 2px solid var(--win-chrome-dark);
  margin-bottom: 20px;
}

.score-label {
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
}

.score-value {
  font-size: 56px;
  font-weight: bold;
  color: var(--win-chrome-darker);
  font-family: 'Comic Sans MS', cursive;
}

html[data-theme="dark"] .score-value {
  color: #00ff00;
}

.score-subtitle {
  font-size: 13px;
  margin-top: 6px;
}

/* Episode Info */
.episode-info {
  margin-bottom: 20px;
}

.episode-info h3 {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}

.episode-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

.episode-description {
  font-size: 13px;
  line-height: 1.6;
}

/* Attempts Breakdown */
.attempts-breakdown {
  background: var(--win-content-bg);
  border: 2px solid;
  border-color: var(--win-chrome-dark) var(--win-chrome-light) var(--win-chrome-light) var(--win-chrome-dark);
  padding: 16px;
  margin-bottom: 20px;
}

.attempts-breakdown h4 {
  font-size: 13px;
  margin-bottom: 10px;
  font-weight: bold;
}

.attempt-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--win-chrome-dark);
}

.attempt-item:last-child {
  border-bottom: none;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Screenshots Grid */
.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.screenshot-item {
  background: var(--win-chrome);
  border: 2px solid;
  border-color: var(--win-chrome-light) var(--win-chrome-darker) var(--win-chrome-darker) var(--win-chrome-light);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.screenshot-item img {
  width: 100%;
  height: auto;
  display: block;
}

.screenshot-item .caption {
  background: var(--win-titlebar);
  color: var(--win-titlebar-text);
  padding: 6px;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
}

/* Quiz Container */
.quiz-container {
  margin-bottom: 20px;
}

/* Responsive for Quiz */
@media (max-width: 768px) {
  .guess-form {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .screenshots-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   STATS & SOCIAL UI
   ========================================== */

/* Stats Container */
.stats-container {
  padding: 12px;
  margin: 12px 0;
  border: 1px solid var(--win-chrome-dark);
  background: var(--win-content-bg);
}

.stats-container h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--win-text);
  border-bottom: 1px solid var(--win-chrome-dark);
  padding-bottom: 4px;
}

.percentile-text {
  font-size: 14px;
  text-align: center;
  margin-bottom: 12px;
  font-weight: bold;
}

/* Bar Chart */
.stats-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Center the bars */
  height: 120px;
  background: transparent;
  border-bottom: 2px solid var(--win-border-inner);
  margin-top: 10px;
  padding: 0 2px 0 2px;
  gap: 1px;
  /* Small gap between detailed bars */
}

/* Container for a single bar and its tooltip/label */
.stats-bar-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  /* Distribute available width equally */
  height: 100%;
  position: relative;
  min-width: 4px;
  /* Ensure very thin bars are still visible */
}

.stats-bar {
  width: 100%;
  background: var(--win-text-secondary);
  /* Default gray */
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  transition: height 0.5s ease;
  min-height: 2px;
  /* Always show at least a sliver */
  opacity: 1;
  /* Solid bars requested */
  position: relative;
  z-index: 5;
}

.stats-bar-group.active {
  background: rgba(135, 206, 250, 0.5);
  /* More obvious Light Sky Blue */
  border-radius: 4px;
}

.stats-bar.active {
  background: var(--win-text-secondary) !important;
  /* Match other bars */
  opacity: 1;
  /* Match standard solid opacity */
  box-shadow: none;
}

/* Tooltip on hover */
.stats-bar-group:hover .stats-bar-tooltip {
  display: block;
}

.stats-bar-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  border: 1px solid var(--win-border);
}

.stats-bar-label,
.stats-bar-count {
  display: none;
}

/* Share Button */
.btn-share {
  background: #4caf50;
  color: white;
  font-weight: bold;
  border: 2px solid;
  border-color: #81c784 #003300 #003300 #81c784;
  padding: 0 16px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.btn-share:hover {
  background: #43a047;
}

.btn-share:active {
  border-color: #003300 #81c784 #81c784 #003300;
}

html[data-theme="dark"] .btn-share {
  background: #006600;
  color: #00ff00;
  border-color: #00ff00 #003300 #003300 #00ff00;
}

html[data-theme="dark"] .btn-share:hover {
  background: #00aa00;
  color: black;
}

.centered-header {
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.centered-header:hover {
  background: var(--header-hover-bg);
  color: var(--header-hover-text);
}

.centered-header .terminal-title::before {
  display: none;
}

.centered-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.terminal-window.minimized .terminal-content {
  display: none;
}