@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&family=Montserrat:wght@400;700&display=swap');

:root {
  /* Based on common dark Neovim themes / your screenshot */
  --background-color: #1e1e2e; /* Editor/main area background (dark charcoal) */
  --surface-color: #282a36;    /* Sidebar, Header, Status bar background (slightly lighter dark gray/purple tint) */
  --primary-color: #8be9fd;     /* Primary accent - Cyan (for icons, highlights) */
  --secondary-color: #bd93f9;   /* Secondary accent - Purple (maybe for chapter titles) */
  --text-color: #f8f8f2;        /* Main text - Off-white */
  --text-color-muted: #6272a4;  /* Muted text - Grayish blue */
  --green: #50fa7b;           /* Green accent */
  --yellow: #f1fa8c;          /* Yellow accent */
  --red: #ff5555;             /* Red accent */
  --border-color: #44475a;     /* Borders - Dark gray/blue */
  --selection-bg: #44475a;     /* Selection background in explorer - Same as border */
  --focus-border: #8be9fd;     /* Focus outline/border - Cyan */
  
  --font-ui: 'Segoe UI', 'Roboto', sans-serif; /* Cleaner UI font */
  --font-code: 'Fira Code', monospace;
  --sidebar-width: 280px;
  --explorer-font-size: 0.85rem; /* Smaller font for explorer */
  --explorer-item-padding: 0.2rem 0.4rem; /* Reduced padding for density */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.5; /* Adjust line height for denser text */
  padding-bottom: 35px; /* Space for status bar */
}

header {
  background-color: var(--surface-color);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
}

#app-logo {
  height: 32px;
  width: 32px;
  margin-right: 10px;
  border-radius: 50%;
}

/* Commenting out old H1 style */
/*
.header-left h1 {
  font-size: 1.8rem;
  color: var(--primary-color);
  letter-spacing: 1px;
  margin: 0;
}
*/

/* New style for the anchor tag acting as H1 */
.header-left .main-title-as-link {
  font-size: 1.8rem;
  color: var(--primary-color);
  letter-spacing: 1px;
  margin: 0;
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Typically H1s are bold */
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

#player-name-display {
  font-size: 1rem;
  color: var(--secondary-color);
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#player-name-display .fa-user {
  font-size: 0.9em;
}

#player-name-display:hover {
  background-color: var(--border-color);
  color: var(--text-color);
}

/* New styles for player profile layout */
.player-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align items to the start (left) */
  gap: 0.5rem; /* Space between name, progress bar, and badges */
}

#progress-bar-container.hidden,
#badges-container.hidden {
    display: none;
}

#progress-bar {
  width: 150px;
  height: 10px;
  background: var(--border-color);
  border-radius: 5px;
  overflow: hidden;
}
#progress-bar .bar {
  height: 100%;
  /* background: linear-gradient(90deg, var(--green) 0%, var(--secondary-color) 100%); */
  background: var(--green); /* Changed to solid green */
  border-radius: 5px; /* Apply border-radius to the bar itself for a complete rounded look */
  transition: width 0.4s ease-out;
}

#badges {
  display: flex;
  gap: 0.3rem;
}
.badge {
  background: var(--primary-color);
  color: var(--surface-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#levels-sidebar {
  width: var(--sidebar-width);
  background-color: #181825; /* sidebar even darker, according to Neovim */
  padding: 0.5rem 0.2rem;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
}

#levels-sidebar h2 {
  font-size: 1rem; /* Smaller heading */
  color: var(--text-color-muted); /* Muted heading */
  margin-bottom: 0.5rem;
  padding-left: 0.4rem; /* Align with items */
  font-weight: normal; /* Less prominent */
}

.shortcut-hint {
  font-size: 0.75rem; /* Smaller font size */
  font-weight: normal; /* Not bold */
  color: var(--text-color-muted); /* Can use a muted color */
  margin-left: 0.5rem; /* Some space from the main title */
}

#levels-list { /* Root for chapters */
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap between items */
}

.chapter-item {
  background-color: #181825 !important;
  margin-bottom: 4px;
  border-radius: 6px;
  border: none;
  box-shadow: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.chapter-header {
  display: flex;
  align-items: center;
  padding: var(--explorer-item-padding);
  cursor: pointer;
  font-weight: normal; /* Normal weight for chapters */
  color: var(--text-color); /* Chapters are regular text color */
  border-radius: 0; /* No radius */
  font-size: var(--explorer-font-size);
  transition: background-color 0.1s ease;
  border: 1px solid transparent; /* Border for focus */
  background: none;
  font-family: 'Fira Code', monospace !important;
}

.chapter-header:hover {
  background-color: transparent; /* No hover background */
}

.chapter-header:focus {
  outline: none; /* Remove default outline */
  background-color: var(--selection-bg); /* Use selection background */
  border: 1px solid var(--focus-border); /* Use accent for focus border */
  color: var(--text-color); /* Ensure text is visible */
}

.chapter-toggle-icon {
  margin-right: 0.4em;
  width: 1em; 
  display: inline-block;
  text-align: center;
  color: var(--text-color-muted); /* Muted icon color */
}

.levels-under-chapter {
  list-style: none;
  padding-left: 1em; /* Reduced indent */
  margin: 0;
  overflow: hidden; 
  max-height: 0; 
  transition: max-height 0.2s ease-out; /* Faster transition */
}

.chapter-item.open > .levels-under-chapter {
  max-height: 1000px; 
}

/* Individual Level Item in Explorer */
#levels-list .level-btn { 
  background-color: transparent !important;
  color: var(--text-color);
  border: 1px solid transparent;
  border-radius: 0;
  padding: var(--explorer-item-padding);
  font-size: var(--explorer-font-size);
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  text-align: left;
  font-family: 'Fira Code', monospace !important;
  display: flex; 
  align-items: center;
  width: 100%;
  font-weight: normal;
}

#levels-list .level-btn:hover {
  background-color: #232336 !important;
  color: var(--text-color);
}

#levels-list .level-btn:focus {
  background-color: #232336 !important;
  color: var(--text-color);
  outline: none;
  border-left: 3px solid var(--primary-color);
}

#levels-list .level-btn.active-level-item {
  background-color: #232336 !important;
  color: var(--text-color) !important;
  font-weight: normal;
  border-left: 3px solid var(--primary-color);
  border-radius: 0;
  box-shadow: none;
}

#levels-list .level-btn .level-icon {
  margin-right: 0.5em;
  width: 1em; 
  display: inline-block;
  text-align: center;
  color: var(--primary-color); /* Default icon color (cyan) */
  font-style: normal; /* Ensure icons aren't italic */
}

#levels-list .level-btn.completed .level-icon::before {
  content: "✓"; 
  color: var(--green);
}

#levels-list .level-btn.locked {
  color: var(--text-color-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

#levels-list .level-btn.locked .level-icon::before {
  content: "🔒"; 
  color: var(--text-color-muted);
  opacity: 0.6;
}

#levels-list .level-btn:not(.completed):not(.locked) .level-icon::before {
  content: "•"; /* Use a dot for pending files */
  color: var(--secondary-color); /* Purple dot */
  opacity: 0.9;
}

/* Shortcut hint styling */
#levels-sidebar h2 .shortcut-hint {
  font-size: 0.7rem; /* Even smaller */
  font-weight: normal; 
  color: var(--text-color-muted); 
  margin-left: 0.5rem; 
}

#main-content-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
}

#welcome-screen {
  text-align: center;
  margin: auto;
}

#welcome-screen h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

#welcome-screen p {
  margin-bottom: 1rem;
  color: var(--text-color-muted);
}

#welcome-screen.hidden {
  display: none;
}

/* New Neovim Splash Screen Styles */
.neovim-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  background-color: var(--background-color); /* Should match editor bg */
}

.splash-title-container {
  margin-bottom: 2.5rem;
}

#splash-title-art {
  font-family: 'Fira Code', 'JetBrains Mono', monospace; /* Monospaced font for ASCII art */
  font-size: 1.5rem; /* Adjust size as needed */
  line-height: 1.1;
  color: var(--primary-color); /* Use primary accent for the title */
  text-shadow: 1px 1px 0px var(--surface-color), /* Outer shadow */
               2px 2px 0px var(--border-color); /* Deeper shadow for block effect */
  margin-bottom: 0.5rem;
  white-space: pre;
}

.splash-subtitle {
  font-size: 1.1rem;
  color: var(--text-color-muted);
  margin-top: 0.5rem;
}

.splash-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 500px; /* Limit width of the menu */
}

.splash-menu li {
  display: flex;
  align-items: center;
  font-size: 1rem; /* Slightly larger than explorer */
  color: var(--text-color);
  padding: 0.6rem 1rem;
  margin-bottom: 0.3rem;
  border-radius: 4px;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.splash-menu li:hover {
  background-color: var(--surface-color); /* Use surface for hover */
}

.splash-menu li i {
  margin-right: 1.5rem; /* More space for icon */
  color: var(--secondary-color); /* Accent for icons */
  width: 20px; /* Align text nicely */
  text-align: center;
}

.splash-menu li .keybind {
  margin-left: auto;
  color: var(--yellow); /* Yellow for keybinds, like Neovim */
  padding: 0.2rem 0.5rem;
  background-color: rgba(241, 250, 140, 0.1); /* Subtle background for keybind */
  border-radius: 3px;
}

.splash-footer {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--text-color-muted);
}

.splash-footer i {
  color: var(--primary-color);
  margin-right: 0.3rem;
}

#game-area {
  background-color: #232336;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#game-area.hidden {
  display: none !important;
}

#game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

#level-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 0;
  background: var(--surface-color);
  border-radius: 0;
  padding: 0.7rem 1.5rem 0.7rem 1.5rem;
  box-shadow: none;
  width: 100%;
}
#level-header-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#level-header-right {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
#level-title {
  font-size: 1.5rem;
  color: var(--secondary-color);
  font-weight: bold;
  margin-bottom: 0.1rem;
  padding-bottom: 0.1rem;
}
#level-description {
  font-size: 1rem;
  color: var(--text-color-muted);
  padding-left: 0.1rem;
  margin-bottom: 0;
}
#hint-controls-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
#hint-controls-row #show-hint {
  margin-right: 0.5rem;
}
#hint-controls-row #hint {
  flex: 1;
  margin: 0;
  min-width: 0;
}
#hint-controls-row #level-controls {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

#terminal-container {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  height: 100%;
  background-color: transparent !important;
  border-radius: 0;
  padding: 15px;
  box-shadow: none;
  overflow: hidden;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

.xterm .xterm-viewport {
  background-color: #232336 !important;
  border-radius: 8px;
}
.xterm .xterm-rows > div {
  font-family: var(--font-code) !important;
  font-size: 15px !important;
}

kbd {
  background-color: var(--border-color);
  color: var(--text-color);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: var(--font-code);
  font-size: 0.9em;
  border: 1px solid var(--surface-color);
}

#hint {
  background-color: var(--surface-color);
  color: var(--yellow);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  font-size: 0.95rem;
}
#hint.hidden {
  display: none;
}

#level-controls {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

button {
  background-color: var(--border-color); /* Darker default buttons */
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-weight: bold;
}

button:hover {
  background-color: #53576e; /* Slightly lighter gray on hover */
  border-color: #53576e;
}

button:focus {
   outline: 1px solid var(--focus-border);
   outline-offset: 1px;
}

button#show-hint {
  background-color: var(--surface-color);
  color: var(--yellow);
  border: 1px solid var(--border-color);
}
button#show-hint:hover {
   background-color: var(--border-color);
   border-color: var(--focus-border);
}

button.hidden {
  display: none;
}

footer {
  display: none !important;
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 220px;
  }
  .main-container {
    flex-direction: column;
  }
  #levels-sidebar {
    width: 100%;
    max-height: 250px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  #main-content-area {
    padding: 1rem;
  }
  header {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
  }
  .header-left .main-title-as-link {
    font-size: 1.5rem;
  }
  #progress-bar {
    width: 150px;
  }
}

/* Level Selection Modal (Command Palette) Styles */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */
  z-index: 1000; /* Ensure it's on top */
  display: flex;
  align-items: flex-start; /* Align modal to the top */
  justify-content: center;
  padding-top: 10vh; /* Push it down from the very top */
}

.modal.hidden {
  display: none;
}

.modal-content {
  background-color: var(--surface-color);
  padding: 15px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border: 1px solid var(--border-color);
}

#level-palette-filter {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color); /* Use darkest for input bg */
  color: var(--text-color);
  font-family: var(--font-ui);
  font-size: 1rem;
}

#level-palette-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}

#level-palette-list li {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 4px; /* Space between items */
}

#level-palette-list li:last-child {
  border-bottom: none;
}

#level-palette-list li:hover {
  background-color: var(--border-color); /* A bit lighter for hover */
}

#level-palette-list li.selected {
  background-color: var(--primary-color);
  color: var(--surface-color);
  font-weight: bold;
}

#level-palette-list li.locked {
  color: var(--text-color-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
#level-palette-list li.locked:hover {
  background-color: transparent; /* No hover effect for locked items */
}

#level-palette-list li.completed {
  /* Optional: style completed levels differently in palette */
  color: var(--green); 
}

/* Status Bar Styles */
#status-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 32px;
  display: flex;
  align-items: stretch;
  font-family: 'FiraCode Nerd Font', 'Fira Code', monospace;
  font-size: 1em;
  z-index: 100;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.statusbar-left, .statusbar-right {
  display: flex;
  align-items: stretch;
  height: 32px;
  pointer-events: auto;
}
#status-bar .pl-segment, #status-bar .pl-arrow {
  display: flex;
  align-items: center;
  height: 32px;
  font-size: 1em;
  font-family: 'FiraCode Nerd Font', 'JetBrainsMono Nerd Font', 'Hack Nerd Font', 'Nerd Font', 'Fira Code', monospace !important;
  font-weight: 500;
  user-select: none;
  border: none;
  box-shadow: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
#status-bar .pl-segment {
  padding: 0 0.9em 0 0.7em;
  height: 32px;
  display: flex;
  align-items: center;
  font-family: 'FiraCode Nerd Font', 'JetBrainsMono Nerd Font', 'Hack Nerd Font', 'Nerd Font', 'Fira Code', monospace !important;
  font-size: 1em;
  font-weight: 500;
  border: none;
  box-shadow: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
#status-bar .pl-mode {
  background: #4f78c4;
  color: #fff;
  padding-left: 1.1em;
  padding-right: 0.7em;
}
#status-bar .pl-file {
  background: #232336;
  color: #cdd6f4;
}
#status-bar .pl-pos {
  background: #181825;
  color: #8be9fd;
}
#status-bar .pl-time {
  background: #282a36;
  color: #f1fa8c;
  padding-right: 1.2em;
}
#status-bar .pl-copyright {
  background: #232336;
  color: #cdd6f4;
  padding-right: 1.2em;
}
#status-bar .pl-pending-keys {
  background: var(--surface-color); /* Or a slightly different color, e.g., var(--border-color) */
  color: var(--yellow); /* Or var(--text-color) */
  padding: 0 0.7em; /* Consistent padding */
}
#status-bar .pl-pending-keys:empty {
  background: none;
  padding: 0;
}
#status-bar .pl-arrow-svg,
#status-bar .pl-mode-arrow,
#status-bar .pl-file-arrow,
#status-bar .pl-pos-arrow,
#status-bar .pl-time-arrow {
  display: none !important;
}
#status-bar .pl-progress {
  background: var(--border-color);
  color: var(--text-color);
  padding-right: 1.2em;
}

/* Level Explorer (Sidebar) Styles */
#levels-sidebar {
  /* Keep existing width, background, padding, border */
  overflow-y: auto; /* Ensure scrollability */
  /* Remove fixed height if any was set previously by media queries for mobile that might conflict */
}

#levels-sidebar h2 {
  /* Existing styles are mostly fine, ensure no excessive bottom margin if explorer items are dense */
  margin-bottom: 0.8rem;
}

#levels-list { /* This will now be the root for chapters */
  display: flex;
  flex-direction: column;
  gap: 0.1rem; /* Reduced gap for denser look */
}

.chapter-item {
  /* Container for chapter title + its levels */
}

.chapter-header {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  color: var(--secondary-color);
  border-radius: 4px;
}

.chapter-header:hover {
  background-color: var(--border-color);
}

.chapter-header:focus {
  outline: 1px solid var(--yellow); /* For keyboard navigation */
  background-color: var(--border-color);
}

.chapter-toggle-icon {
  margin-right: 0.5em;
  width: 1em; /* Reserve space for icon */
  display: inline-block;
  text-align: center;
}

.levels-under-chapter {
  list-style: none;
  padding-left: 1.5em; /* Indent levels under chapter */
  margin: 0;
  overflow: hidden; /* For collapse/expand animation */
  max-height: 0; /* Collapsed by default */
  transition: max-height 0.3s ease-out;
}

.chapter-item.open > .levels-under-chapter {
  max-height: 1000px; /* Large enough to show all levels, adjust if necessary */
  /* Consider a more dynamic max-height if chapters can be very long */
}

/* Individual Level Item in Explorer */
#levels-list .level-btn { /* Re-style existing .level-btn for explorer context */
  background-color: transparent !important;
  color: var(--text-color);
  border: none; /* Remove old borders */
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem; /* Slightly smaller for denser list */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: left;
  font-family: var(--font-ui);
  display: flex; /* For icon alignment */
  align-items: center;
  width: 100%;
}

#levels-list .level-btn:hover {
  background-color: #232336 !important;
  color: var(--text-color);
}

#levels-list .level-btn:focus {
  background-color: #232336 !important;
  color: var(--text-color);
  outline: none;
  border-left: 3px solid var(--primary-color);
}

#levels-list .level-btn.active-level-item {
  background-color: #232336 !important;
  color: var(--text-color) !important;
  font-weight: normal;
  border-left: 3px solid var(--primary-color);
  border-radius: 0;
  box-shadow: none;
}

#levels-list .level-btn .level-icon {
  margin-right: 0.6em;
  width: 1em; /* Reserve space */
  display: inline-block;
  text-align: center;
}

#levels-list .level-btn.completed .level-icon::before {
  content: "✓"; /* Checkmark for completed */
  color: var(--green);
}

#levels-list .level-btn.locked {
  color: var(--text-color-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

#levels-list .level-btn.locked .level-icon::before {
  content: "🔒"; /* Lock icon for locked */
  color: var(--text-color-muted);
  opacity: 0.6;
}

#levels-list .level-btn:not(.completed):not(.locked) .level-icon::before {
  content: "○"; /* Circle for pending/default */
  opacity: 0.7;
}

/* Hide old command palette modal */
#level-palette-modal {
    display: none !important; 
}

/* Help Modal Styles */
#help-modal .modal-content {
  width: 90%;
  max-width: 600px; /* Slightly wider for more content */
  padding: 20px;
  text-align: left;
}

#help-modal h2 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
}

#help-modal h4 {
  color: var(--secondary-color);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.3rem;
}

#help-modal ul {
  list-style: none;
  padding-left: 0.5rem;
}

#help-modal li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

#help-modal kbd {
  /* Style for kbd tags in help, inherits from global kbd but can be tweaked */
  background-color: var(--border-color); /* Ensure consistency */
  margin: 0 0.1em;
  padding: 0.2em 0.5em;
}

#help-modal-content p {
  margin-top: 1.5rem;
  color: var(--text-color-muted);
  font-size: 0.9rem;
  text-align: center;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text-color-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--primary-color);
}

/* Progress Modal Styles */
#progress-modal .modal-content {
  width: 90%;
  max-width: 550px; /* Optimal for this content */
  padding: 25px;
  text-align: center; /* Center align most content */
}

#progress-modal h2 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

#progress-modal-content .fas, /* Targeting Font Awesome icons specifically */
#progress-modal-content .fa {
  display: block; /* Make icon take its own line for centering */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; 
}

#progress-modal-content p {
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 0.75rem;
}

#progress-modal-content p strong {
  color: var(--secondary-color);
  font-weight: bold; /* Ensure strong is actually bold */
}

/* Close button for progress modal will use the general .modal-close-btn style */

/* Ensure kbd styles from help modal apply if used elsewhere, or make them global */
/* #help-modal kbd is specific, general kbd style is already present */

.splash-info-bubble {
  background-color: var(--surface-color); /* Changed from rgba(255, 255, 255, 0.1) */
  border: 1px solid var(--border-color); /* Changed from white */
  border-radius: 8px;
  padding: 15px;
  margin: 20px auto;
  max-width: 70%;
  text-align: center;
  color: var(--text-color-muted); /* Changed from #f0f0f0 */
}

.splash-info-bubble p {
  margin: 0;
  line-height: 1.6;
}

.splash-info-bubble .fas {
  margin-right: 8px;
  color: var(--primary-color); /* Changed from #61afef */
}