/* Independent options window; existing speaker controls retain their behavior. */
#gameOptions,
#changelogModal {
  --panel-padding: 24px;
  position: fixed;
  inset: 16px;
  margin: auto;
  padding: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  box-sizing: border-box;
  background-color: #0a0f1e;
  background-image:
    linear-gradient(rgba(0, 87, 205, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 87, 205, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(0, 87, 205, 0.3);
  color: #ccd4e2;
  font: 0.875rem/1.65 "Segoe UI", sans-serif;
  text-align: left;
}
#gameOptions[open] { display: flex; flex-direction: column; }
#gameOptions:not([open]) { display: none; }
#gameOptions::backdrop { background: rgba(0, 0, 0, 0.85); }
#gameOptions .modal-header { flex-shrink: 0; }
#gameOptions .terminal-body { touch-action: pan-y; padding: 12px var(--panel-padding) 16px; }
#gameOptions .terminal-section + .terminal-section { margin-top: 12px; }
#changelogModal[open] { display: flex; flex-direction: column; }
#changelogModal:not([open]) { display: none; }
#changelogModal::backdrop { background: rgba(0, 0, 0, 0.85); }
#changelogModal .modal-header { flex-shrink: 0; }
#changelogModal .terminal-body { touch-action: pan-y; padding: 12px var(--panel-padding) 16px; }
.volume-control + .volume-control { margin-top: 4px; }
.volume-control { display: grid; grid-template-columns: 52px minmax(0, 1fr) 42px; gap: 8px; align-items: center; }
.volume-label { display: contents; }
.volume-label label { grid-column: 1; grid-row: 1; }
.volume-label output { grid-column: 3; grid-row: 1; text-align: right; }
.volume-label label { font-weight: 600; color: #fff; }
.volume-label output { color: #91bcff; font-variant-numeric: tabular-nums; }
#gameOptions input[type="range"] {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: #5da9ff;
  touch-action: pan-y;
}
#gameOptions .options-note { margin: 8px 0 0; color: #9aaabe; font-size: 0.8rem; }
#gameOptions #optionsStatus { min-height: 1.65em; }
#gameOptions .options-arena { border-top: 1px solid rgba(0, 87, 205, 0.3); padding-top: 12px; }
.options-arena-link { gap: 10px; }
.options-arena-link svg { width: 22px; height: 22px; flex-shrink: 0; }
.options-arena-link,
#pauseOptionsBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 2px solid var(--primary-color);
  border-radius: 6px;
  background: #0a0f1e;
  color: #fff;
  font: 600 0.875rem/1.4 "Segoe UI", sans-serif;
  text-decoration: none;
  letter-spacing: 0;
  text-shadow: none;
  cursor: pointer;
}
.options-arena-link:hover,
#pauseOptionsBtn:hover { background: #142440; }
#gameOptions :focus-visible,
#pauseOptionsBtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#pause-overlay { animation: none; }
#pause-overlay .pause-title { display: block; animation: pulseText 1.5s infinite ease-in-out; }
#pauseOptionsBtn { margin-top: 24px; pointer-events: auto; }
/* The arena hides the large pause title so paused scenarios remain visible. */
html[data-test-arena] #pause-overlay[style*="display: block"] { display: block !important; }
html[data-test-arena] #pause-overlay .pause-title { display: none; }
html[data-test-arena] #pauseOptionsBtn { margin-top: 0; }
@media (max-width: 600px) {
  #gameOptions { --panel-padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #pause-overlay .pause-title { animation: none; }
}

.options-volume, .options-reset { border-top: 1px solid rgba(0,87,205,.3); padding-top: 12px; }
.difficulty-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.difficulty-group legend { padding: 0; margin-bottom: 8px; color: var(--accent-color); font: 700 .85rem/1.4 "Orbitron", sans-serif; letter-spacing: 1px; }
.difficulty-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.difficulty-choice { position: relative; cursor: pointer; }
.difficulty-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.difficulty-choice > span { display: grid; grid-template-columns: 24px 44px; align-items: center; justify-content: center; gap: 4px; min-height: 52px; box-sizing: border-box; padding: 6px 2px; border: 2px solid var(--primary-color); border-radius: 6px; color: #ccd4e2; background: #0a0f1e; font-weight: 600; }
.difficulty-choice input:checked + span { background: #153c66; border-color: #70b8ff; color: #fff; box-shadow: 0 0 12px rgba(66,156,255,.25); }
.difficulty-choice input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.difficulty-choice:hover > span { border-color: #70b8ff; }
#resetOptions { width: 100%; }


/* Theme names stay prominent; the familiar difficulty labels remain beneath. */
.difficulty-choice .difficulty-emblem { width: 24px; height: 24px; color: #91bcff; }
.difficulty-choice input:checked + span .difficulty-emblem { color: #fff; }
.difficulty-choice .difficulty-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.difficulty-choice strong { font: inherit; }
.difficulty-choice small { font-size: .7rem; line-height: 1.2; opacity: .8; }