:root {
  --cyan: #29f3ff;
  --magenta: #ff2bd6;
  --violet: #b44dff;
  --yellow: #ffe94a;
  --red: #ff3d6b;
  --bg: #05010d;
  --panel: rgba(9, 4, 24, 0.72);
  --font: "Bahnschrift", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #e9f6ff;
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  outline: none;
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------------------ HUD */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  font-size: clamp(11px, 1.6vh, 22px);
}

#vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(41, 243, 255, 0.22) 78%, rgba(255, 43, 214, 0.42) 100%);
}

#top-bar {
  position: absolute;
  top: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

.stat {
  min-width: 8.5em;
  padding: 0.45em 1.1em 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel);
  border: 1px solid rgba(41, 243, 255, 0.45);
  border-radius: 0.7em;
  box-shadow: 0 0 1.1em rgba(41, 243, 255, 0.22), inset 0 0 1em rgba(41, 243, 255, 0.08);
}

.stat-label {
  font-size: 0.72em;
  letter-spacing: 0.28em;
  color: rgba(190, 235, 255, 0.75);
}

.stat-value {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-shadow: 0 0 0.45em rgba(41, 243, 255, 0.9);
}

.stat-main {
  min-width: 10.5em;
  border-color: rgba(255, 43, 214, 0.6);
  box-shadow: 0 0 1.3em rgba(255, 43, 214, 0.3), inset 0 0 1em rgba(255, 43, 214, 0.1);
}

.stat-main .stat-value {
  font-size: 2.5em;
  text-shadow: 0 0 0.45em rgba(255, 43, 214, 0.95);
}

#time-box.low {
  border-color: var(--red);
  animation: pulse 0.55s ease-in-out infinite;
}

#time-box.low .stat-value {
  color: #ffd0da;
  text-shadow: 0 0 0.5em var(--red);
}

#nav {
  position: absolute;
  top: 7.4em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
}

#nav-arrow {
  width: 3.2em;
  height: 3.2em;
  filter: drop-shadow(0 0 0.5em var(--yellow));
}

#nav-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

#nav-arrow path {
  fill: var(--yellow);
}

#nav-dist {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--yellow);
  text-shadow: 0 0 0.5em rgba(255, 233, 74, 0.8);
  font-variant-numeric: tabular-nums;
}

#minimap-wrap {
  position: absolute;
  top: 1.2em;
  left: 1.2em;
  width: 13.2em;
  height: 13.2em;
  padding: 0.3em;
  background: var(--panel);
  border: 1px solid rgba(41, 243, 255, 0.5);
  border-radius: 0.9em;
  box-shadow: 0 0 1.2em rgba(41, 243, 255, 0.25);
}

#minimap {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.6em;
}

#speedo {
  position: absolute;
  right: 1.6em;
  bottom: 1.4em;
  width: 15em;
  height: 15em;
}

#speedo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 0.5em rgba(180, 77, 255, 0.8));
}

.arc-track {
  fill: rgba(9, 4, 24, 0.6);
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 405.27 540.35;
}

.arc-value {
  fill: none;
  stroke: url(#arc-grad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 0 540.35;
}

#hud-speed {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: 4em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-shadow: 0 0 0.3em rgba(41, 243, 255, 0.95);
}

#speed-unit {
  position: absolute;
  left: 0;
  right: 0;
  top: 57%;
  text-align: center;
  font-size: 0.95em;
  letter-spacing: 0.3em;
  color: rgba(190, 235, 255, 0.8);
}

#nitro-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 69%;
  text-align: center;
  font-size: 0.7em;
  letter-spacing: 0.3em;
  color: rgba(41, 243, 255, 0.9);
}

#nitro {
  position: absolute;
  left: 26%;
  right: 26%;
  top: 77%;
  height: 0.6em;
  border: 1px solid rgba(41, 243, 255, 0.7);
  border-radius: 0.4em;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}

#nitro-fill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #1b6bff, var(--cyan));
  box-shadow: 0 0 0.8em var(--cyan);
}

#nitro.active {
  border-color: #ffffff;
  box-shadow: 0 0 1em var(--cyan);
}

#drift {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%) skewX(-8deg);
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-shadow: 0 0 0.4em var(--magenta), 0 0 1em var(--magenta);
}

#drift-pts {
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

#toasts {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

.toast {
  font-size: 1.9em;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 0 0.4em var(--cyan), 0 0 1em var(--cyan);
  animation: toast 1.9s ease-out forwards;
}

.toast.gold {
  text-shadow: 0 0 0.4em var(--yellow), 0 0 1em #ff9d1a;
}

.toast.pink {
  text-shadow: 0 0 0.4em var(--magenta), 0 0 1em var(--magenta);
}

.toast.red {
  text-shadow: 0 0 0.4em var(--red), 0 0 1em var(--red);
}

.toast.big {
  font-size: 3.2em;
}

#hint {
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  transform: translateX(-50%);
  padding: 0.5em 1.2em;
  font-size: 0.82em;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(220, 240, 255, 0.9);
  background: var(--panel);
  border-radius: 2em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: opacity 1.2s ease;
}

#hint.fade {
  opacity: 0;
}

#fps {
  position: absolute;
  top: 1.2em;
  right: 1.2em;
  padding: 0.25em 0.7em;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  background: var(--panel);
  border-radius: 0.5em;
}

/* ------------------------------------------------------------- Overlays */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5em;
  padding: 2em;
  font-size: clamp(11px, 1.6vh, 22px);
  background: radial-gradient(ellipse at center, rgba(5, 1, 13, 0.25) 0%, rgba(5, 1, 13, 0.78) 100%);
}

#loading {
  background: var(--bg);
}

#pause,
#gameover,
#fatal {
  background: rgba(5, 1, 13, 0.72);
}

.menu-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 5.6em;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.14em;
  font-style: italic;
}

.title .t1 {
  color: #eaffff;
  text-shadow: 0 0 0.12em #ffffff, 0 0 0.35em var(--cyan), 0 0 0.9em var(--cyan), 0 0 1.6em rgba(41, 243, 255, 0.6);
  animation: flicker 5s linear infinite;
}

.title .t2 {
  color: #ffeafb;
  text-shadow: 0 0 0.12em #ffffff, 0 0 0.35em var(--magenta), 0 0 0.9em var(--magenta), 0 0 1.6em rgba(255, 43, 214, 0.6);
}

.subtitle {
  margin: 1.1em 0 1.6em;
  font-size: 1em;
  letter-spacing: 0.42em;
  color: rgba(210, 235, 255, 0.85);
  text-align: center;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6em;
  width: 21em;
}

.btn {
  pointer-events: auto;
  padding: 0.7em 1em;
  font-family: var(--font);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #e9fbff;
  background: rgba(9, 4, 24, 0.7);
  border: 1px solid rgba(41, 243, 255, 0.6);
  border-radius: 0.5em;
  cursor: pointer;
  outline: none;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease, color 0.12s ease;
}

.btn:hover,
.btn:focus-visible {
  color: #04121a;
  background: var(--cyan);
  box-shadow: 0 0 1.4em rgba(41, 243, 255, 0.8);
  transform: scale(1.03);
}

.btn.primary {
  border-color: var(--magenta);
  box-shadow: 0 0 1em rgba(255, 43, 214, 0.35);
}

.btn.primary:hover,
.btn.primary:focus-visible {
  color: #ffffff;
  background: var(--magenta);
  box-shadow: 0 0 1.6em rgba(255, 43, 214, 0.9);
}

.btn.small {
  padding: 0.5em 1em;
  font-size: 0.95em;
  border-color: rgba(180, 200, 255, 0.35);
}

.btn.danger:hover,
.btn.danger:focus-visible {
  color: #ffffff;
  background: var(--red);
  box-shadow: 0 0 1.4em rgba(255, 61, 107, 0.8);
}

.best {
  margin-top: 1.5em;
  font-size: 1em;
  letter-spacing: 0.3em;
  color: rgba(210, 235, 255, 0.8);
}

.best span {
  margin-left: 0.5em;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 0.5em rgba(255, 233, 74, 0.8);
}

.menu-side {
  width: 25em;
  padding: 1.4em 1.6em;
  background: var(--panel);
  border: 1px solid rgba(180, 77, 255, 0.5);
  border-radius: 1em;
  box-shadow: 0 0 1.6em rgba(180, 77, 255, 0.25);
}

.menu-side h2 {
  margin: 0 0 0.8em;
  font-size: 1.15em;
  letter-spacing: 0.35em;
  color: var(--violet);
  text-shadow: 0 0 0.6em rgba(180, 77, 255, 0.9);
}

.keys {
  margin: 0;
  padding: 0;
  list-style: none;
}

.keys li {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0;
  font-size: 0.95em;
}

.keys li span {
  margin-left: auto;
  color: rgba(225, 240, 255, 0.92);
}

kbd {
  min-width: 2em;
  padding: 0.12em 0.5em;
  font-family: var(--font);
  font-size: 0.88em;
  font-weight: 700;
  text-align: center;
  color: var(--cyan);
  background: rgba(41, 243, 255, 0.08);
  border: 1px solid rgba(41, 243, 255, 0.5);
  border-radius: 0.35em;
}

.goal {
  margin: 1em 0 0;
  font-size: 0.9em;
  line-height: 1.45;
  color: rgba(255, 233, 74, 0.92);
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 27em;
  max-width: 44em;
  padding: 2em 2.6em;
  background: var(--panel);
  border: 1px solid rgba(255, 43, 214, 0.55);
  border-radius: 1.1em;
  box-shadow: 0 0 2.2em rgba(255, 43, 214, 0.3);
}

.panel-title {
  margin: 0 0 1em;
  font-size: 2.4em;
  letter-spacing: 0.22em;
  font-style: italic;
  color: #ffeafb;
  text-shadow: 0 0 0.3em var(--magenta), 0 0 0.9em var(--magenta);
}

.record {
  margin: -0.4em 0 0.9em;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--yellow);
  text-shadow: 0 0 0.5em rgba(255, 233, 74, 0.9);
  animation: pulse 0.7s ease-in-out infinite;
}

.results {
  width: 100%;
  margin-bottom: 1.5em;
}

.results div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results span {
  font-size: 0.9em;
  letter-spacing: 0.25em;
  color: rgba(200, 225, 255, 0.8);
}

.results b {
  font-size: 1.7em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-shadow: 0 0 0.45em rgba(41, 243, 255, 0.9);
}

#fatal-text {
  max-width: 38em;
  margin: 0 0 1.4em;
  font-size: 0.95em;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 220, 228, 0.95);
  -webkit-user-select: text;
  user-select: text;
  overflow-wrap: anywhere;
}

.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader {
  width: 22em;
  height: 0.5em;
  margin-top: 2.4em;
  overflow: hidden;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.08);
}

.loader-bar {
  width: 40%;
  height: 100%;
  border-radius: 0.4em;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 1em var(--cyan);
  animation: loader 1.1s ease-in-out infinite;
}

/* ----------------------------------------------------------- Animations */

@keyframes toast {
  0% {
    opacity: 0;
    transform: translateY(0.6em) scale(0.85);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  22% {
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-1.2em) scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41% {
    opacity: 1;
  }
  42% {
    opacity: 0.55;
  }
  43% {
    opacity: 1;
  }
  47% {
    opacity: 0.7;
  }
  48% {
    opacity: 1;
  }
}

@keyframes loader {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(260%);
  }
}

#street {
  position: absolute;
  top: 15em;
  left: 1.2em;
  width: 13.2em;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--cyan);
  text-shadow: 0 0 0.5em rgba(41, 243, 255, 0.8);
}

.credit {
  margin-top: 1.2em;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  color: rgba(200, 220, 255, 0.6);
}

/* --------------------------------------------- realistic theme overrides */

:root {
  --cyan: #8fd3ff;
  --magenta: #ffb347;
  --violet: #d7dde8;
  --panel: rgba(14, 18, 24, 0.74);
}

#vignette {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(120, 190, 255, 0.18) 85%, rgba(255, 255, 255, 0.3) 100%);
}

.title .t1,
.title .t2 {
  animation: none;
  color: #ffffff;
  text-shadow: 0 0.04em 0.25em rgba(0, 0, 0, 0.75);
}

.title .t2 {
  color: #ffb347;
}

.subtitle {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.best span {
  margin-left: 0.3em;
}

#nav-label {
  max-width: 28em;
  padding: 0.2em 0.8em;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #ffffff;
  background: var(--panel);
  border-radius: 0.5em;
}

#nav-label:empty {
  display: none;
}

#clock {
  position: absolute;
  top: 16.6em;
  left: 1.2em;
  width: 13.2em;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
}

#street {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* touch controls: only on touch screens */

#touch {
  display: none;
}

body.touch #touch {
  display: block;
}

body.touch #hint,
body.touch .menu-side {
  display: none;
}

body.touch #speedo {
  right: auto;
  left: 50%;
  bottom: 0.4em;
  transform: translateX(-50%) scale(0.6);
  transform-origin: bottom center;
}

.pad {
  pointer-events: auto;
  width: 5.2em;
  height: 5.2em;
  font-family: var(--font);
  font-size: 1.1em;
  font-weight: 700;
  color: #ffffff;
  background: rgba(14, 18, 24, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.pad:active {
  background: rgba(143, 211, 255, 0.5);
}

.pad.big {
  width: 6.4em;
  height: 6.4em;
}

.pad.small {
  width: 4em;
  height: 4em;
  font-size: 0.85em;
}

.pad-group {
  position: absolute;
  bottom: 1.4em;
  display: flex;
  align-items: flex-end;
  gap: 0.8em;
}

.pad-group.left {
  left: 1.4em;
}

.pad-group.right {
  right: 1.4em;
}

#btn-pause-touch {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 3em;
  height: 3em;
}

/* multiplayer */

.mp-note {
  margin: -0.4em 0 1.2em;
  max-width: 30em;
  font-size: 1em;
  line-height: 1.45;
  text-align: center;
  color: rgba(225, 235, 245, 0.85);
  user-select: text;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  width: 26.25em;
  margin-bottom: 0.9em;
  font-size: 0.8em;
  letter-spacing: 0.2em;
  color: rgba(225, 235, 245, 0.75);
}

.field input {
  pointer-events: auto;
  padding: 0.55em 0.8em;
  font-family: var(--font);
  font-size: 1.5em;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.4em;
  outline: none;
}

.field input:focus {
  border-color: #8fd3ff;
}

#mp-status {
  min-height: 1.4em;
  margin: 0 0 0.9em;
  font-size: 1em;
  text-align: center;
  color: #ffd27a;
}

#board {
  position: absolute;
  top: 1.2em;
  right: 1.2em;
  min-width: 13em;
  padding: 0.5em 0.8em;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.6em;
}

body.touch #board {
  top: 4.8em;
}

.board-head {
  margin-bottom: 0.3em;
  font-size: 0.75em;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}

.board-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.12em 0;
  font-size: 1.05em;
  color: rgba(255, 255, 255, 0.9);
}

.board-row.me {
  font-weight: 700;
  color: #ffffff;
}

.board-row .dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
}

.board-row .who {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.board-row .pts {
  font-variant-numeric: tabular-nums;
}

.slot0 .dot { background: #4f8dff; }
.slot1 .dot { background: #ff5a52; }
.slot2 .dot { background: #ffcf3a; }
.slot3 .dot { background: #4fd67f; }

#banner {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.5);
}

#nav.off {
  display: none;
}

/* garage: the car stays visible, the controls sit along the bottom */

#garage {
  align-items: flex-end;
  padding-bottom: 3em;
  background: linear-gradient(to bottom, rgba(5, 8, 12, 0) 55%, rgba(5, 8, 12, 0.7) 100%);
}

.garage-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  padding: 1.2em 2.2em 1.4em;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1em;
}

.garage-title {
  margin: 0;
  font-size: 1em;
  letter-spacing: 0.4em;
  color: rgba(225, 235, 245, 0.75);
}

.car-row {
  display: flex;
  align-items: center;
  gap: 1em;
}

#car-name {
  min-width: 12em;
  font-size: 2em;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.1em;
  text-align: center;
  color: #ffffff;
}

#swatches {
  display: flex;
  gap: 0.7em;
}

.swatch {
  pointer-events: auto;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  transition: transform 0.12s ease;
}

.swatch:hover,
.swatch:focus-visible {
  transform: scale(1.12);
}

.swatch.on {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(143, 211, 255, 0.9);
}

.sw0 { background: #f2f2f0; }
.sw1 { background: #16171a; }
.sw2 { background: #9aa0a8; }
.sw3 { background: #0b4fd6; }
.sw4 { background: #c8201c; }
.sw5 { background: #e2a50c; }
.sw6 { background: #1f9a4c; }
.sw7 { background: #e06a10; }

.garage-buttons {
  display: flex;
  gap: 0.8em;
  align-items: center;
}

.garage-buttons .btn.primary {
  min-width: 12em;
}

/* sound settings */

.volumes {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0.6em 1em;
  background: rgba(14, 18, 24, 0.6);
  border: 1px solid rgba(180, 200, 255, 0.35);
  border-radius: 0.5em;
}

.vol {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #e9fbff;
}

.vol span {
  flex: 0 0 9.5em;
}

.vol input {
  pointer-events: auto;
  flex: 1;
  min-width: 0;
  height: 1.4em;
  margin: 0;
  accent-color: #8fd3ff;
  cursor: pointer;
}