/* src/class-select.css — CLASS-SELECT-SCREEN-01
 * Full-screen class picker overlay. Dark sci-fi salvage aesthetic with the
 * binding cyan accent (project_cyan_visual_language) on interactive/selected
 * state. Hidden by default; shown via the .cls--visible class.
 */

#class-select-overlay {
  position: fixed;
  inset: 0;
  /* Above the character-select manager (8850) and the name-only creation form
   * (8900) — the picker replaces them in the create flow. Below guest-save-nudge
   * (9000) / callsign-modal (10000). */
  z-index: 8950;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #11202b 0%, #070b10 70%, #04060a 100%);
  color: #e6eef5;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
#class-select-overlay.cls--visible { display: flex; }

.cls-screen {
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 32px;
}

.cls-header { text-align: center; }
.cls-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cls-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: #93a6b5;
}

.cls-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  min-height: 0;
  flex: 1;
}

/* ── Class card row (left) ───────────────────────────────────────── */
.cls-row {
  display: flex;
  gap: 18px;
  align-items: stretch;
  justify-content: center;
}
.cls-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 2px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, filter 120ms ease;
  filter: brightness(0.82);
}
.cls-card:hover,
.cls-card:focus-visible {
  filter: brightness(1.08);
  border-color: rgba(56, 217, 232, 0.55);
  outline: none;
  transform: translateY(-2px);
}
.cls-card--active {
  filter: brightness(1.12);
  border-color: #38d9e8;           /* binding cyan accent on selection */
  background: linear-gradient(180deg, rgba(56,217,232,0.16), rgba(56,217,232,0.04));
  box-shadow: 0 0 0 1px rgba(56,217,232,0.4), 0 8px 28px rgba(56,217,232,0.18);
}
.cls-card-emblem { font-size: 56px; line-height: 1; }
.cls-card-name { font-size: 20px; font-weight: 700; letter-spacing: 0.03em; }

/* ── Identity panel (right) ──────────────────────────────────────── */
.cls-panel {
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.cls-panel-hint { color: #7f93a3; font-size: 14px; }
.cls-panel-head { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.cls-panel-tagline { margin: 0; font-size: 14px; line-height: 1.5; color: #b9c8d4; }

.cls-panel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cls-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}
.cls-stat-label { font-size: 11px; color: #8aa0b0; letter-spacing: 0.06em; }
.cls-stat-val { font-size: 18px; font-weight: 700; }

.cls-panel-skill {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(56,217,232,0.06);
  border: 1px solid rgba(56,217,232,0.18);
}
.cls-skill-title { font-size: 14px; font-weight: 700; color: #6fe3ef; }
.cls-skill-desc { margin-top: 4px; font-size: 13px; line-height: 1.45; color: #c2d0db; }

.cls-panel-adv {
  font-size: 12px;
  color: #7f93a3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Footer (name + buttons) ─────────────────────────────────────── */
.cls-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cls-name-wrap { display: flex; align-items: center; gap: 10px; }
.cls-name-label { font-size: 13px; color: #93a6b5; }
.cls-name-input {
  width: 260px;
  max-width: 50vw;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e6eef5;
  font-size: 14px;
}
.cls-name-input:focus { outline: none; border-color: #38d9e8; }
.cls-error { color: #f87171; font-size: 13px; margin: 0; flex-basis: 100%; min-height: 16px; }

.cls-btns { display: flex; gap: 12px; }
.cls-cancel-btn,
.cls-choose-btn {
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 120ms ease, background 120ms ease;
}
.cls-cancel-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #c2d0db;
}
.cls-cancel-btn:hover { filter: brightness(1.2); }
.cls-choose-btn {
  background: linear-gradient(180deg, #38d9e8, #1ba9bd);
  color: #04222a;
}
.cls-choose-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cls-choose-btn:disabled { opacity: 0.45; cursor: default; }

/* Class accent tints on the panel head + card emblem glow. */
.cls-vanguard .cls-card-emblem { text-shadow: 0 0 18px rgba(255,150,90,0.45); }
.cls-medic .cls-card-emblem    { text-shadow: 0 0 18px rgba(90,230,180,0.45); }
.cls-panel-head.cls-vanguard { color: #ffb083; }
.cls-panel-head.cls-medic    { color: #6fe9c2; }

/* ── Skill bar (glowing icon slots, like a hotbar) ───────────────── */
.cls-skillbar {
  display: flex;
  gap: 10px;
  margin: 2px 0 2px;
}
.cls-skill-slot {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 13px;
  transition: transform 120ms ease, filter 120ms ease;
}
.cls-skill-slot:hover { transform: translateY(-2px); filter: brightness(1.12); }
.cls-skill-slot .cls-skill-icon,
.cls-skill-svg { width: 100%; height: 100%; display: block; }
/* The starting skill reads as "active": brighter + a cyan ready-ring. */
.cls-skill-slot--starter {
  filter: drop-shadow(0 0 9px rgba(56, 217, 232, 0.45));
}
.cls-skill-slot--starter::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 15px;
  border: 2px solid rgba(56, 217, 232, 0.85);
  pointer-events: none;
}
/* Slot number badge (bottom-left, like the reference). */
.cls-skill-num {
  position: absolute;
  left: 4px;
  bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.cls-skill-kitnote {
  font-size: 11px;
  color: #7f93a3;
  margin-top: -4px;
}