/* ===================== SETTINGS / HALL OF FAME PANELS ===================== */
/* Both are sub-screens of the menu, not separate top-level overlays: they
   live inside #start-screen and swap places with .logo-wrap/.menu-box via
   the .settings-open/.hof-open modifiers, so they share the same
   background/fade, can never appear during actual gameplay, and their
   trigger icons (which live in the same stacking context) stay visible and
   clickable on top of them - see settingsBtn/hofBtn in client.js. Only one
   modifier is ever applied at a time, so only one panel shows.
   flex:1 fills the rest of #start-screen's column (which is already inset by
   its own top/bottom padding, matching the fixed nav buttons' clearance) -
   the header stays pinned at the top via flex:0 0 auto below, while the
   list (.settings-list / .hof-list) is the only part that scrolls and stays
   top-aligned instead of the whole panel being vertically centered. */
.settings-panel, .hof-panel, .tank-studio-panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: calc(100% - 24px);
  position: relative;
  z-index: 2;
}
#start-screen.settings-open .logo-wrap,
#start-screen.settings-open .menu-box,
#start-screen.hof-open .logo-wrap,
#start-screen.hof-open .menu-box,
#start-screen.studio-open .logo-wrap,
#start-screen.studio-open .menu-box {
  display: none;
}
#start-screen.settings-open .settings-panel,
#start-screen.hof-open .hof-panel,
#start-screen.studio-open .tank-studio-panel {
  display: flex;
}

.settings-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--ink);
}
.settings-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.icon-btn-inline {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 14, 30, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn-inline .icon { width: 18px; height: 18px; }

.settings-list {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: rgba(var(--ink-rgb), 0.08);
  border-radius: 4px;
  padding: 4px 14px;
  box-shadow: inset 0 0 0 2px rgba(var(--ink-rgb), 0.12);
  width: min(92vw, 340px);
  align-self: center;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-column { flex-direction: column; align-items: stretch; gap: 9px; }
.settings-row-label { display: flex; align-items: center; gap: 8px; }
.settings-row-label .icon { width: 16px; height: 16px; opacity: 0.85; flex: 0 0 auto; }

/* Toggle switch: a small pill track + sliding knob, driven by aria-checked
   (also the source of truth read back by the click handler) rather than a
   separate JS-side boolean. */
.toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(var(--ink-rgb), 0.22);
  transition: background 0.18s ease;
}
.toggle-switch[aria-checked="true"] { background: #3ddc55; }
.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.18s ease;
}
.toggle-switch[aria-checked="true"] .toggle-knob { transform: translateX(20px); }

/* Tank Design Studio's 3D viewport - fills the space between the panel
   header and the swatch row below it. Canvas fades in via the same
   opacity/.ready trick as .tank-stage canvas so it doesn't flash blank while
   the GLB loads (see public/tank-studio.js). */
.tank-studio-stage {
  flex: 1 1 auto;
  min-height: 220px;
  width: 100%;
  touch-action: none;
}
.tank-studio-stage canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tank-studio-stage canvas.ready { opacity: 1; }
.tank-studio-panel .color-swatches {
  justify-content: center;
  margin: 14px 0 4px;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.color-swatch {
  width: 27px;
  height: 27px;
  border-radius: 4px;
  border: 2px solid rgba(var(--ink-rgb), 0.3);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--swatch-color, rgba(var(--ink-rgb), 0.14));
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.color-swatch.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(var(--ink-rgb), 0.4);
  transform: scale(1.08);
}
.color-swatch .icon {
  width: 13px;
  height: 13px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.color-swatch .check-badge { display: none; }
.color-swatch.selected .check-badge { display: block; }
.color-swatch.random .check-badge { display: none !important; }
.color-swatch.random .shuffle-badge { display: block; opacity: 0.9; }

/* ===================== HALL OF FAME LIST ===================== */
/* .hof-panel itself is laid out by the shared "SETTINGS / HALL OF FAME
   PANELS" rule above - this is the scrollable part of it. Same transparent
   box + fine border as .settings-list / .hof-preview, so all three read as
   one system; the medal/score badges below carry the "plaque" look instead. */
.hof-list {
  list-style: none;
  margin: 0;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px;
  background: rgba(var(--ink-rgb), 0.08);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(var(--ink-rgb), 0.12);
  width: min(92vw, 340px);
  align-self: center;
}
.hof-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.hof-list li:last-child { border-bottom: none; }
.icon.hof-medal { width: 12px; height: 12px; }
.hof-list .hof-rank { flex: 0 0 22px; opacity: 0.55; font-size: 12px; }
.hof-list .hof-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-list .hof-score { color: #fff; }
.hof-list .hof-empty { justify-content: center; opacity: 0.6; font-weight: 400; border-bottom: none; color: rgba(var(--ink-rgb), 0.8); }

/* Custom scrollbar for the two scrollable panel lists (.settings-list,
   .hof-list) - a slim floating pill instead of the browser-default bar, in
   the same translucent --ink-rgb tone as the panel chrome around it.
   scrollbar-color covers Firefox; the ::-webkit-scrollbar-* rules cover
   Chrome/Safari/Edge. The thumb's transparent border + background-clip trick
   insets it slightly off the track edges rather than spanning it edge to
   edge, so it reads as a rounded pill even at this width. */
.settings-list, .hof-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), 0.35) transparent;
}
.settings-list::-webkit-scrollbar, .hof-list::-webkit-scrollbar { width: 10px; }
.settings-list::-webkit-scrollbar-track, .hof-list::-webkit-scrollbar-track { background: transparent; }
.settings-list::-webkit-scrollbar-thumb, .hof-list::-webkit-scrollbar-thumb {
  background-color: rgba(var(--ink-rgb), 0.35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.settings-list::-webkit-scrollbar-thumb:hover, .hof-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--ink-rgb), 0.55);
}

/* Medal ranks (top 3, both the menu preview and the full list): the pill's
   background carries the gold/silver/bronze color instead of the trophy
   icon, with a diagonal gloss highlight for an enamel-badge look. Trophy +
   score number both stay white so they read clearly against any of the
   three metal tones - placed after the plain-white/.hof-score green rules
   above so these equal-specificity overrides win regardless of source
   order elsewhere in the file. */
.hof-score-badge.gold, .hof-score-badge.silver, .hof-score-badge.bronze {
  color: rgba(var(--ink-rgb), 1);
}
.hof-score-badge.gold {
  box-shadow: inset 0 0 0 2px rgba(212,175,55, 1);
  background-color: rgba(212,175,55, .5);
}
.hof-score-badge.silver {
  box-shadow: inset 0 0 0 2px rgba(192,192,192, 1);
  background-color: rgba(192,192,192, .5);
}
.hof-score-badge.bronze {
  box-shadow: inset 0 0 0 2px rgba(199,155,86, 1);
  background-color: rgba(199,155,86, .5);
}