:root {
  --bg-color: #f4f7f6;
  /* Light gray background */
  --text-color: #333;
  --text-color-muted: #666;
  --accent-color: #5867f0;
  --header-bg: rgba(255, 255, 255, 0.3);
  --header-text: #fff;
  --header-button-bg: rgba(255, 255, 255, 0.2);
  --header-button-border: rgba(255, 255, 255, 0.5);
  --header-button-hover-bg: rgba(255, 255, 255, 0.4);
  --header-button-hover-border: rgba(255, 255, 255, 0.8);
  --header-button-active-bg: rgba(255, 255, 255, 0.9);
  --header-button-active-text: var(--accent-color);
  --showcase-bg: rgba(255, 255, 255, 0.3);
  --showcase-heading: var(--accent-color);
  --card-bg: #fff;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-hover-shadow: rgba(0, 0, 0, 0.15);
  --card-image-bg: #eee;
  --badge-bg: #f0f0f0;
  --badge-text: #555;
  --tooltip-bg: rgba(0, 0, 0, 0.85);
  --tooltip-text: #fff;
  --footer-bg: rgba(255, 255, 255, 0.3);
  --footer-text: #ccc;
  --slider-track-bg: rgba(255, 255, 255, 0.3);
  --slider-track-hover-bg: rgba(255, 255, 255, 0.5);
  --slider-thumb-bg: #fff;
  --version-text: rgba(0, 0, 0, 0.4);

  /* Add smooth transitions for color changes */
  --color-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Dark Theme Overrides */
html.dark-theme {
  /* Target the html tag */
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --text-color-muted: #a0a0a0;
  --accent-color: #7e8bff;
  /* Slightly lighter accent for dark bg */
  --header-bg: rgba(30, 30, 30, 0.5);
  /* Darker, semi-transparent header */
  --header-text: #e0e0e0;
  --header-button-bg: rgba(60, 60, 60, 0.5);
  --header-button-border: rgba(100, 100, 100, 0.7);
  --header-button-hover-bg: rgba(80, 80, 80, 0.7);
  --header-button-hover-border: rgba(120, 120, 120, 0.9);
  --header-button-active-bg: rgba(200, 200, 200, 0.9);
  --header-button-active-text: #1e1e1e;
  --showcase-bg: rgba(30, 30, 30, 0.5);
  --showcase-heading: var(--accent-color);
  --card-bg: #1e1e1e;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --card-hover-shadow: rgba(0, 0, 0, 0.5);
  --card-image-bg: #333;
  --badge-bg: #333;
  --badge-text: #bbb;
  --tooltip-bg: rgba(240, 240, 240, 0.9);
  /* Light tooltip on dark bg */
  --tooltip-text: #111;
  --footer-bg: rgba(30, 30, 30, 0.5);
  --footer-text: #888;
  --slider-track-bg: rgba(80, 80, 80, 0.7);
  --slider-track-hover-bg: rgba(100, 100, 100, 0.9);
  --slider-thumb-bg: #ccc;
  --version-text: rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar {
  width: 10px;
  /* Ширина вертикального скроллбара */
  height: 10px;
  /* Высота горизонтального скроллбара */
}

::-webkit-scrollbar-track {
  background: var(--badge-bg);
  /* Цвет фона трека (дорожки) */
  border-radius: 5px;
  /* Скругление углов трека */
  /* Можно добавить тень для глубины, если хотите */
  /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); */
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
  /* Основной цвет ползунка */
  border-radius: 5px;
  /* Скругление углов ползунка */
  border: 2px solid var(--badge-bg);
  /* Рамка вокруг ползунка, создающая эффект отступа от трека */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-color);
  /* Цвет ползунка при наведении */
}

/* Уголок скроллбара (где пересекаются вертикальный и горизонтальный скроллбары) */
::-webkit-scrollbar-corner {
  background: var(--badge-bg);
  /* Обычно совпадает с цветом трека */
}

html,
textarea,
div[style*="overflow"],
div[style*="overflow-y"],
div[style*="overflow-x"] {
  scrollbar-width: thin;
  /* 'auto', 'thin', или 'none' */
  scrollbar-color: var(--accent-color) var(--badge-bg);
  /* цвет ползунка, цвет трека */
}

body {
  font-family: "M PLUS Rounded 1c", "Calibri", sans-serif;
  /* Poppins first */
  margin: 0;
  padding: 0;
  color: var(--text-color);
  line-height: 1.6;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: var(--color-transition);
  background-color: var(--bg-color);

}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.15;
  background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.15) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.15) 1px, transparent 0),
    linear-gradient(var(--accent-color) 1px, transparent 0),
    linear-gradient(90deg, var(--accent-color) 1px, transparent 0);
  animation: gradientBG 40s ease infinite;
}

@keyframes gradientBG {
  25% {
    background-position: 25% 50%;
  }

  50% {
    background-position: 50% 100%;
  }

  75% {
    background-position: 75% 50%;
  }

  0%,
  100% {
    background-position: 50% 0;
  }
}

#background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  transition: var(--color-transition);
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 1rem;
}

#site-logo {
  height: 80px;
  /* Adjust desired height */
  width: auto;
  /* Maintain aspect ratio */
  margin-right: 0.8rem;
  /* Space between logo and text */
  flex-shrink: 0;
  /* Prevent logo from shrinking too much */
}

/* NEW: Styles for the title/subtitle wrapper */
.title-subtitle-wrapper {
  /* No specific styles needed unless you want to control internal spacing */
  display: flex;
  flex-direction: column;
  /* Stack title and subtitle */
}

/* Adjust margins for h1 and p inside the wrapper */
.title-subtitle-wrapper h1 {
  margin: 0 0 0.1rem 0;
  /* Adjust bottom margin slightly */
  line-height: 1.2;
  /* Adjust line height if needed */
  /* Keep other h1 styles (font-size, weight, color, text-shadow) */
  font-size: 2.8rem;
  /* Example, keep your original size */
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
  /* Make sure color is set */
}

.title-subtitle-wrapper p {
  margin: 0;
  /* Remove default margin */
  line-height: 1.3;
  /* Adjust line height if needed */
  /* Keep other p styles (font-size, weight, opacity, text-shadow, color) */
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  /* Make sure color is set */
}

.header-content {
  display: flex;
  /* Use Flexbox */
  align-items: center;
  /* Vertically align logo and text block */
  flex-grow: 1;
}

header h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  /* Adjusted weight */
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: var(--header-text);
  transition: var(--color-transition);
}

header p {
  margin-top: 0.3rem;
  font-size: 1rem;
  font-weight: 400;
  /* Adjusted weight */
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--header-text);
  opacity: 0.9;
  transition: var(--color-transition);
}

.controls-container {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping on small screens */
  gap: 1rem;
  /* Space between lang switcher and screensaver button */
  align-items: center;
  /* Center items vertically in the container */
  margin-left: 1rem;
  /* Keep margin from title */
}

.volume-control {
  display: inline-flex;
  align-items: center;
  position: relative;
}

#volume-icon {
  /* Inherit from .control-icon or define explicitly */
  font-size: 1rem;
  /* Adjust icon size if needed */
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  /* Ensure it behaves like a block for padding/sizing */
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  /* Adjust padding for icon size */
  border-radius: 5px;
  line-height: 1;
  /* Prevent extra vertical space */
  min-width: 30px;
  /* Give it a minimum width */
  text-align: center;
}

.control-button {
  background-color: var(--header-button-bg);
  border: 1px solid var(--header-button-border);
  color: var(--header-text);
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  /* Prevent button text wrapping */
}

.control-button:hover {
  background-color: var(--header-button-hover-bg);
  border-color: var(--header-button-hover-border);
}

.control-icon {
  font-size: 1.2rem;
  /* Adjust icon size */
  cursor: pointer;
  user-select: none;
  /* Prevent text selection on icon */
  transition: opacity 0.2s ease;
}

.control-icon:hover {
  opacity: 0.8;
}

#volume-slider {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.6rem;
  z-index: 10;
  width: 100px;
  height: 5px;
  cursor: pointer;
  appearance: none;
  background: var(--slider-thumb-bg);
  transition: background-color 0.3s ease;
  border-radius: 3px;
  outline: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out 0.15s,
    visibility 0s linear 0.4s,
    margin-top 0.25s ease-in-out 0.15s;
}

#volume-slider:hover {
  background: rgba(255, 255, 255, 0.5);
}

.volume-control:hover #volume-slider {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-top: 0.6rem;
  transition-delay: 0s;
}

#volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--slider-thumb-bg);
  transition: background-color 0.3s ease;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-top: -4.5px;
}

/* Firefox */
#volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--slider-thumb-bg);
  transition: background-color 0.3s ease;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.volume-control:hover #volume-slider::before {
  opacity: 1;
  transition-delay: 0s;
}

/* Remove dotted outline on focus in Firefox */
#volume-slider::-moz-focus-outer {
  border: 0;
}

/* Hide default audio player if it ever appears (shouldn't without 'controls') */
#background-audio {
  display: none;
}

/* NEW: Utility class to hide elements during screensaver */
.hidden-by-screensaver {
  display: none !important;
  /* Force hide */
  opacity: 0;
  /* Add opacity for transition if needed, but display:none is primary */
  pointer-events: none;
}

.lang-button {
  background-color: var(--header-button-bg);
  border: 1px solid var(--header-button-border);
  color: var(--header-text);
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.lang-button:hover {
  background-color: var(--header-button-hover-bg);
  border-color: var(--header-button-hover-border);
}

.lang-button.active {
  background-color: var(--header-button-active-bg);
  color: var(--header-button-active-text);
  border-color: var(--header-button-active-bg);
  cursor: default;
}

main {
  /*max-width: 1200px;*/
  margin: 2rem auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
  flex-grow: 1;
}

.games-showcase {
  text-align: center;
  padding: 2rem;
  background-color: var(--showcase-bg);
  /* Slightly more opaque */
  border-radius: 15px;
  box-shadow: 0 5px 15px var(--card-shadow);
  transition: var(--color-transition);
}

.games-showcase h1 {
  font-size: 2.5rem;
  /* Adjusted size */
  margin-bottom: 2rem;
  /* Increased margin */
  color: var(--showcase-heading);
  font-weight: 700;
  /* Adjusted weight */
  transition: var(--color-transition);
}

.game-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  /* Gap between cards */
}

.game-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  /* Ensure link takes up card space */
  width: 300px;
  /* Give the link a width so cards align nicely */
}

.game-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.game-card {
  background-color: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 4px 8px var(--card-shadow);
  /* width: 300px; -- Set width on game-link instead */
  text-align: left;
  display: flex;
  flex-direction: column;
  /* Stack img, text, icons */
  height: 100%;
  /* Make card fill the height of the link container */
  /* <<< ADD THIS */
  position: relative;
  transition: var(--color-transition), box-shadow 0.3s ease;
}

.game-card img {
  display: block;
  width: 100%;
  height: 200px;
  /* Fixed height for images */
  object-fit: cover;
  /* Cover the area, cropping if needed */
  background-color: var(--card-image-bg);
  border-top-left-radius: 10px;
  /* Match card radius */
  border-top-right-radius: 10px;
  transition: background-color 0.3s ease;
}

/* --- Styles for the text content block --- */
.game-card-text-content {
  padding: 1rem;
  /* Padding around text */
  flex-grow: 1;
  /* Allows this block to push icons down */
  /* No flex needed here unless aligning h3/p specifically */
}

.game-card-text-content h3 {
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
  font-weight: 700;
  /* Adjusted weight */
  transition: var(--color-transition);
}

.game-card-text-content p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--text-color-muted);
  /* Use variable */
  transition: var(--color-transition);
}

/* --- Styles for the icons wrapper block --- */
.game-card-icons-wrapper {
  padding: 0 1rem 1rem 1rem;
  /* Padding L/R/B for the whole icon area */
  margin-top: auto;
  /* Ensures it stays at the bottom IF text content doesn't grow */
  /* Combined with flex-grow on text-content, this is robust */
}

/* --- Styles for EACH group of icons (status, maintainer) --- */
.game-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Space between badges */
  align-content: flex-start;
  /* Stack wrapped lines from top */
}

.maintainers-section {
  /* This div wraps the heading and maintainer icons */
  margin-top: 1rem;
  /* Add space ABOVE the whole maintainer section */
}

.developers-heading {
  font-size: 0.9rem;
  /* Smaller than game title */
  font-weight: 600;
  color: #777;
  /* Subdued color */
  margin: 0 0 0.4rem 0;
  /* Remove top/left/right margin, add bottom margin */
  /* The margin-top is handled by .maintainers-section */
  padding: 0;
  /* Remove any default padding */
}

/* Remove bottom margin from the very last icon group in the wrapper */
.game-card-icons-wrapper .game-statuses:last-child {
  margin-bottom: 0;
}

/* --- Styles for individual icon badges --- */
.game-status-badge {
  position: relative;
  /* Needed for tooltip positioning */
  display: inline-flex;
  /* Use inline-flex for better alignment */
  align-items: center;
  /* Vertically center content in badge */
  background-color: var(--badge-bg);
  /* Use variable */
  color: var(--badge-text);
  /* Use variable */
  padding: 0.3rem 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: help;
  line-height: 1;
  /* Prevent extra space from line height */
  transition: var(--color-transition);
}

.status-icon {
  line-height: 1;
  /* Ensure icon itself doesn't have weird spacing */
  /* No margin needed by default if only icon is present */
}

/* If an icon needs text next to it (not current case), add margin: */
/* .game-status-badge .status-icon + .status-text { margin-left: 0.3rem; } */

/* --- CSS Tooltip Implementation (using ::before and ::after) --- */
.game-status-badge::before,
.game-status-badge::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: var(--color-transition), opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 10;
  /* Ensure tooltip is above other elements */
  pointer-events: none;
  /* Tooltip shouldn't block interaction */
}

.game-status-badge::before {
  /* Tooltip content */
  content: attr(data-tooltip);
  /* Get text from data-tooltip attribute */
  bottom: 135%;
  /* Position above the badge */
  background-color: var(--tooltip-bg);
  /* Use variable */
  color: var(--tooltip-text);
  text-align: center;
  padding: 6px 10px;
  /* Padding inside tooltip */
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  /* Prevent tooltip text wrapping */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Subtle shadow */
}

.game-status-badge::after {
  /* Tooltip arrow */
  content: "";
  bottom: calc(135% - 5px);
  /* Position below the content, adjusted for border */
  border-width: 5px;
  border-style: solid;
  border-color: var(--tooltip-bg) transparent transparent transparent;
  /* Adjust transform slightly if arrow isn't centered */
  transform: translateX(-50%);
  transition: border-color 0.3s ease, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  transition-delay: 0.3s, 0.3s;
}

.game-status-badge:hover::before,
.game-status-badge:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.3s;
  /* Slight delay before showing */
}

footer {
  background-color: var(--footer-bg);
  /* Use variable */
  color: var(--footer-text);
  text-align: center;
  padding: 1.5rem 1rem;
  /* Increased padding */
  margin-top: 3rem;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
  transition: var(--color-transition);
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 1rem;
}

footer a:link,
footer a:visited {
  color: var(--accent-color);
  text-decoration: none;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
  }

  .header-content {
    text-align: center;
    width: 100%;
  }

  .lang-switcher {
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }

  header h1 {
    font-size: 2.2rem;
    /* Adjust size */
  }

  header p {
    font-size: 0.95rem;
    /* Adjust size */
  }

  .games-showcase h1 {
    font-size: 2rem;
    /* Adjust size */
  }

  /* Adjust card width for smaller screens */
  .game-link {
    width: calc(50% - 1rem);
    /* Two cards per row, accounting for gap */
  }

  .controls-container {
    justify-content: center;
    /* Center controls horizontally */
    width: 100%;
    margin-left: 0;
  }
}

@media (hover: none) and (pointer: coarse),
(max-width: 768px) {

  /* Adjust container for static slider */
  .volume-control {
    position: static;
    /* No longer need relative for absolute child */
    gap: 0.5rem;
    /* Add gap between icon and static slider */
  }

  /* Make slider always visible and static */
  #volume-slider {
    display: none;
    position: static;
    /* Back to normal flow */
    transform: none;
    /* Reset transform */
    margin-top: 0;
    /* Reset margin-top */
    opacity: 1;
    /* Always visible */
    visibility: none;
    /* Always visible */
    pointer-events: none;
    /* Always interactive */
    width: 0px;
    /* Slightly smaller width for mobile? */
    /* No transition needed */
    transition: none;
  }

  /* Hide the arrow on mobile */
  #volume-slider::before {
    display: none;
  }

  #volume-slider::after {
    display: none;
  }
}

#modal-languages {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem;
  }

  .lang-switcher {
    margin-top: 0.5rem;
    gap: 0.3rem;
    /* Reduce gap */
  }

  .lang-button {
    padding: 0.3rem 0.6rem;
    /* Smaller buttons */
  }

  .games-showcase {
    padding: 1rem;
    /* Less padding */
  }

  .games-showcase h1 {
    font-size: 1.8rem;
    /* Adjust size */
  }

  .game-links {
    gap: 1rem;
    /* Reduce gap between cards */
  }

  /* Single card per row on small screens */
  .game-link {
    width: 90%;
    /* Almost full width */
  }

  .game-card-text-content h3 {
    font-size: 1.1rem;
  }

  .game-card-text-content p {
    font-size: 0.9rem;
  }

  .game-status-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
  }

  footer {
    padding: 1rem;
    margin-top: 2rem;

  }
}

.game-card-image-container {
  position: relative;
  /* Needed for absolute positioning of the watermark */
  width: 100%;
  /* Take full width of the card */
  height: 200px;
  /* Match image height */
  overflow: hidden;
  /* Hide parts of watermark that might go outside */
  background-color: var(--card-image-bg);
  /* Fallback bg if image fails */
  border-top-left-radius: 10px;
  /* Match card radius */
  border-top-right-radius: 10px;
}

.game-card-image-container img {
  display: block;
  width: 100%;
  height: 100%;
  /* Make image fill the container height */
  object-fit: cover;
  /* Cover the area */
  /* Remove border-radius from img itself if applied before */
  /* border-top-left-radius: 0; */
  /* border-top-right-radius: 0; */
}

/* NEW: Watermark styles */
.watermark {
  position: absolute;
  /* === ADJUST POSITIONING FOR FIXED WIDTH === */
  top: 40px;
  /* Example: Adjust slightly based on fixed width */
  left: -55px;
  /* Example: Adjust slightly based on fixed width */
  /* ======================================= */
  transform: rotate(-45deg);

  /* === ADD FIXED WIDTH === */
  width: 250px;
  /* Example: Adjust based on your longest text + padding */
  /* ====================== */

  background-color: rgba(255, 82, 82, 0.75);
  color: white;
  padding: 6px 10px;
  /* Adjust horizontal padding if needed with fixed width */
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  /* This now centers text within the fixed width */
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  /* Include padding in the width calculation */
}

.game-version {
  position: absolute;
  bottom: 0.5rem;
  /* Adjust spacing from bottom */
  right: 0.8rem;
  /* Adjust spacing from right */
  font-size: 0.75rem;
  /* Smaller font size */
  color: var(--version-text);
  /* Subtle dark grey color */
  /* Or use a light color if your card background is dark: */
  /* color: rgba(255, 255, 255, 0.5); */
  font-style: italic;
  /* Optional: Italicize */
  z-index: 2;
  /* Ensure it's above most card content if needed */
  pointer-events: none;
  /* Prevent interaction */
  /* Start hidden, will be shown by JS if version is loaded */
  display: none;
}

@media (max-width: 768px) {
  header {
    /* Keep flex-direction: column if you had it */
    align-items: center;
    /* Center items when stacked */
    justify-content: center;
  }

  .header-content {
    justify-content: center;
    /* Center logo + text when stacked */
    /* text-align: center; /* Might be needed if text doesn't center automatically */
    width: 100%;
    /* Take full width */
    margin-bottom: 1rem;
    /* Add space below when stacked */
  }

  #site-logo {
    height: 60px;
    /* Slightly smaller */
    margin-right: 0.6rem;
  }

  .title-subtitle-wrapper h1 {
    font-size: 2rem;
    /* Adjust */
  }

  .title-subtitle-wrapper p {
    font-size: 0.9rem;
    /* Adjust */
  }

  .controls-container {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  #site-logo {
    height: 50px;
    margin-right: 0.5rem;
  }

  .title-subtitle-wrapper h1 {
    font-size: 1.8rem;
  }

  .title-subtitle-wrapper p {
    font-size: 0.85rem;
  }
}

/* --- START: Modal Styles --- */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Dark semi-transparent background */
  z-index: 1000;
  /* Below modal, above everything else */
  opacity: 0;
  visibility: hidden;
  /* Animate opacity (0.3s duration, ease timing),
     delay visibility change until *after* opacity transition completes on hide */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

#modal-description {
  font: small-caption;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.game-details-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 90%;
  max-width: 640px;
  /* Max width of modal */
  max-height: 90vh;
  /* Max height */
  background-color: var(--card-bg);
  /* Use theme variable */
  color: var(--text-color);
  /* Use theme variable */
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  /* Above overlay */
  display: flex;
  /* Use flex for layout */
  flex-direction: column;
  /* Stack gif container and content */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  /* Animate opacity and transform (scale),
     delay visibility change until *after* transitions complete on hide */
  transition: opacity 0.3s ease-out,
    /* Пробуем стандартную ease-out */
    transform 0.3s ease-out,
    visibility 0s linear 0.3s;
}

.game-details-modal.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  /* Scale to normal size */
  transition-delay: 0s;
}

.modal-close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: var(--text-color-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  z-index: 10;
  /* Above content */
  transition: color 0.2s ease;
}

.modal-close-button:hover {
  color: var(--accent-color);
}

.modal-gif-container {
  width: 100%;
  /* Adjust aspect ratio or height as needed */
  /* Example: Maintain a 16:9 aspect ratio */
  /* padding-top: 56.25%; /* 9 / 16 * 100% */
  /* position: relative; */
  /* Or set a fixed max-height */
  height: 360px;
  position: relative;
  overflow: hidden;
  /* Ensure gif stays contained */
  flex-shrink: 0;
  /* Prevent shrinking if content is long */
  border-top-left-radius: 15px;
  /* Должно совпадать с .game-details-modal */
  border-top-right-radius: 15px;
  /* Должно совпадать с .game-details-modal */
  background-color: var(--card-image-bg);
  /* Фон, пока картинка грузится */
  background-size: cover;
  /* Масштабирует фон, чтобы покрыть контейнер */
  background-position: center center;
  /* Центрирует фон */
  background-repeat: no-repeat;/
}



.modal-content {
  padding: 1.5rem 2rem 2rem 2rem;
  /* Padding for text content */
  overflow-y: auto;
  /* Allow content to scroll if modal is too short */
  flex-grow: 1;
  /* Allow content area to take remaining space */
}

.modal-content h2 {
  margin: 0 0 0.8rem 0;
  font-size: 1.8rem;
  color: var(--accent-color);
  font-weight: 700;
}

.modal-content p {
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
}

.modal-section {
  margin-bottom: 1.5rem;
}

.modal-section:last-child {
  margin-bottom: 2rem;
  /* More space before play button */
}


.modal-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 0.8rem 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--badge-bg);
  /* Subtle separator */
}

#modal-statuses,
#modal-developers {
  display: grid;
  /* Use grid for alignment */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Responsive columns */
  gap: 0.8rem;
  /* Gap between items */
}

.modal-feature-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Space between icon and text */
  font-size: 0.95rem;
  color: var(--text-color-muted);
}

.modal-icon {
  font-size: 1.2em;
  /* Slightly larger icon */
  line-height: 1;
  display: inline-block;
  /* Ensure proper alignment */
}

.modal-text {
  line-height: 1.4;

}

.modal-text-link {
  color: var(--accent-color);
  text-decoration: none;
}

.modal-play-button {
  position: absolute;
  bottom: 1rem;
  /* Отступ снизу */
  right: 1.5rem;
  /* Отступ справа */
  z-index: 5;
  /* Убедимся, что кнопка поверх GIF/фона */
  display: inline-block;
  background-color: var(--accent-color);
  color: white;
  padding: 0.8rem 4rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;
  margin-top: 1rem;
  /* Space above button */
}

.modal-play-button:hover {
  background-color: #4a58d0;
  /* Darker shade on hover */
  transform: translateY(-2px);
}

/* Responsive adjustments for modal */
@media (max-width: 600px) {
  .modal-gif-container {
    height: 180px;
  }

  .game-details-modal {
    width: 95%;
    max-height: 80vh;
  }

  .modal-content {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
  }

  .modal-content h2 {
    font-size: 1.5rem;
  }

  .modal-content p {
    font-size: 0.95rem;
  }

  #modal-statuses,
  #modal-developers {
    /* Stack items in a single column on small screens */
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .modal-play-button {
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
  }
}




.warning-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 85%;
  max-width: 400px;
  /* Меньше основного модального окна */
  background-color: var(--card-bg);
  color: var(--text-color);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
  z-index: 1003;
  /* Выше всего остального */
  padding: 1.5rem;
  text-align: center;

  /* Анимации */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition: opacity 0.2s ease-out,
    transform 0.2s ease-out,
    visibility 0s linear 0.2s;
}

.warning-modal.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.warning-modal h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  color: var(--accent-color);
  /* Или другой цвет для предупреждения */
}

.warning-modal p {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.warning-modal-buttons {
  display: flex;
  justify-content: space-around;
  /* Распределяем кнопки */
  gap: 1rem;
}

.warning-button {
  flex-grow: 1;
  /* Кнопки занимают доступное место */
  padding: 0.7rem 1rem;
  border-radius: 6px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.warning-button:active {
  transform: scale(0.98);
  /* Легкое нажатие */
}

.warning-button.continue {
  background-color: var(--accent-color);
  color: white;
}

.warning-button.continue:hover {
  background-color: #4a58d0;
  /* Darker accent */
}

.warning-button.back {
  background-color: var(--badge-bg);
  /* Фоновый цвет для кнопок */
  color: var(--text-color);
  border: 1px solid var(--slider-track-bg);
  /* Легкая граница */
}

.warning-button.back:hover {
  background-color: var(--slider-track-bg);
  /* Чуть темнее */
  /* Для темной темы можно сделать светлее */
  /* html.dark-theme .warning-button.back:hover { background-color: #444; } */
}

/* --- START: Warning Modal Styles (Общие) --- */

#warning-overlay {
  /* Переименовали ID */
  z-index: 1002;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

#warning-overlay.visible {
  /* Переименовали ID */
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.warning-modal {
  /* Переименовали ID класса (если он был привязан к ID) */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 85%;
  max-width: 450px;
  /* Можно немного увеличить для devnotes */
  background-color: var(--card-bg);
  color: var(--text-color);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
  z-index: 1003;
  padding: 1.5rem;
  text-align: center;
  /* Оставляем по центру */

  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition: opacity 0.2s ease-out,
    transform 0.2s ease-out,
    visibility 0s linear 0.2s;
}

.warning-modal.visible {
  /* Переименовали ID класса */
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.warning-modal h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  color: var(--accent-color);
}

.warning-modal p {
  /* Стиль для основного сообщения */
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* --- Стили для блока DevNotes --- */
.warning-devnotes {
  background-color: var(--badge-bg);
  /* Легкий фон для выделения */
  padding: 0.8rem 1rem;
  margin-top: -0.5rem;
  /* Немного приподнять к тексту выше */
  margin-bottom: 1.5rem;
  border-radius: 6px;
  text-align: left;
  /* Текст заметок выровнять по левому краю */
  border: 1px solid var(--slider-track-bg);
  /* Легкая рамка */
}

.warning-devnotes h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-color);
  /* Или акцентный? */
}

.warning-devnotes p {
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-color-muted);
  /* --- ДОБАВЛЕНО --- */
  white-space: pre-line;
  /* Сохраняет переносы строк и пробелы в начале/конце строк, схлопывает множественные пробелы */
}

/* --- Конец стилей DevNotes --- */


.warning-modal-buttons {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
}