* {
    -webkit-tap-highlight-color: transparent;
  }  

/* Position the settings menu to cover the entire area below the header */
.settings-menu {
  position: fixed;
  top: 53.5px; /* Adjust this value to match the height of your header */
  left: 0;
  width: 100%;
  height: calc(100vh - 53.5px); /* Adjust to match header height */
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px); /* Apply a 10px blur effect */
  -webkit-backdrop-filter: blur(5px); /* Ensure iOS compatibility */
  overflow-y: auto;
  z-index: 10; /* Ensure it stays above other content */
  display: none; /* Initially hidden */
  padding: 20px;
}

.cap-native .settings-menu {
  top: calc(53.5px + var(--safe-top));
  height: calc(100vh - (53.5px + var(--safe-top)));
}

/* Fallback for unsupported devices */
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  .settings-menu {
    background-color: rgba(255, 255, 255, 0.8); /* Less transparency if blur is not supported */
  }
}

/* Show the settings menu when not hidden */
.settings-menu:not(.hidden) {
    display: block;
}

/* Optional styling for content inside the settings menu */
.settings-content {
    max-width: 800px; /* Restrict max width for better readability */
    margin: auto;
    padding-bottom: 3em;
}
    
  .hidden {
    display: none;
  }
  
  body.settings-active {
    overflow: hidden;
  }
  
  .font-size-control {
    margin: 20px 0;
    text-align: center;
  }
  
/* Center the font size control with an offset to the left */
.slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Adjust spacing as needed */
  margin-left: -40px; /* Offset to the left; adjust value as needed */
  margin-bottom: 20px;
  color: black;
}
  
  .slider-label {
    font-size: inherit;
  }
    
  /* Style for preview container to separate it from the controls */
.preview-container {
  margin-top: 10px;
  text-align: center;
}

/* Optional: Style for the preview text */
#previewText {
  font-size: inherit; /* Adjusts dynamically based on the slider input */
}

/* Display mode toggle styling */
.display-mode-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.display-mode-toggle h3 {
  margin-bottom: 10px;
}

/* Container for side-by-side display of radio buttons */
.mode-options-container {
  display: flex;
  gap: 20px; /* Adjust spacing between buttons as needed */
}

/* Display mode options arranged side by side */
.display-mode-options {
  display: flex;
  gap: 20px; /* Space between the two mode options */
  align-items: center; /* Align radio buttons and text vertically centered */
  justify-content: center;
  margin-left: -40px;
}

/* Style for each option */
.mode-option {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between radio button and text */
}

/* Stacked text styling for the second option */
.stacked-text {
  display: flex;
  flex-direction: column; /* Stack abc elements vertically */
  align-items: center;
}

.divider {
  width: 100%;
  border-top: 1px solid black;
  margin: 2px 0;
}

.language-dropdown-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* Add spacing below the dropdown if necessary */
  margin-left: -50px;
  margin-top: 25px;
  justify-content: center;
}

.ui-language-dropdown {
  font-size: 1em;
}

.game-settings-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -40px; /* align with other controls */
}

.game-mode-section {
  text-align: center;
  width: 100%;
}

.game-mode-section hr {
  width: 100vw; /* force across full viewport */
  margin-left: calc(-50vw + 50%);
}

.standard-label {
  display: block;
  margin-top: 10px;
  font-size: 1em;
}

.standard-select {
  width: 60%;
  max-width: 300px;
  padding: 6px;
  font-size: 1em;
  margin: 6px 0 12px 0;
}

#startGameBtn {
  padding: 8px 16px;
  font-size: 1em;
  width: auto;
  cursor: pointer;
}

.game-mode-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.game-mode-section hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20px 0;
}

.dark-mode-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 30px;
}

/* Theme-neutral base */
.light-circle,
.dark-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid;
  margin-top: 5px;
}

/* Default (light mode) */
body:not(.dark-mode) .light-circle {
  background-color: white;
  border-color: black;
}

body:not(.dark-mode) .dark-circle {
  background-color: black;
  border-color: white;
}

/* Inverted (dark mode) */
body.dark-mode .light-circle {
  background-color: white;
  border-color: black;
}

body.dark-mode .dark-circle {
  background-color: black;
  border-color: white;
}

/* Switch container */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-top: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider track */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.2s;
}

/* Slider knob */
.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

/* Move knob to right when checked */
.switch input:checked + .slider::before {
  transform: translateX(26px);
}

/* Dark background when checked */
.switch input:checked + .slider {
  background-color: #666;
}

.gameModeText {
  color: black;
}