/* ══════════════════════════════════════════════════════════════════════
   Character Builder Wizard — Stat Assignment & Guided Creation
   Uses shared tokens (--clr-*, --font-*, --ease-*) from tokens.css.
   Dark fantasy glassmorphic UI with premium micro-interactions.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Page Base ─────────────────────────────────────────────────────── */
body {
  background: var(--clr-bg-deep);
  color: var(--clr-text);
  min-height: 100vh;
}

/* Subtle ambient radial glow behind the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(223, 184, 88, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(91, 181, 166, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}


/* ─── Navbar Overrides (opaque, same as lore page) ──────────────────── */
.navbar {
  background-color: rgba(10, 12, 20, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--clr-border);
}

.nav-links li a.active-link {
  color: var(--clr-text-bright);
  background-color: rgba(223, 184, 88, 0.1);
}


/* ══════════════════════════════════════════════════════════════════════
   STEP PROGRESS BAR
   Sticky horizontal progress indicator below nav.
   ══════════════════════════════════════════════════════════════════════ */
.step-progress {
  position: relative;
  flex-shrink: 0;
  z-index: 50;
  background: rgba(13, 15, 26, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--clr-border);
  padding: 18px 24px 14px;
}

.builder-music-controls {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.builder-music-controls:hover {
  opacity: 1;
}

.music-mute-btn {
  background: none;
  border: none;
  color: var(--clr-gold, #dfb858);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.music-mute-btn:hover {
  transform: scale(1.15);
  color: var(--clr-cream, #f0e6d2);
}

.music-mute-btn.muted {
  color: #888888;
}

.music-slider-wrapper {
  display: flex;
  align-items: center;
  width: 64px;
}

.music-volume-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(223, 184, 88, 0.25);
  outline: none;
  cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--clr-gold, #dfb858);
  cursor: pointer;
  margin-top: -3.5px;
  box-shadow: 0 0 5px rgba(223, 184, 88, 0.6);
  transition: transform 0.15s ease;
}

.music-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

.music-volume-slider::-moz-range-thumb {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--clr-gold, #dfb858);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 5px rgba(223, 184, 88, 0.6);
  transition: transform 0.15s ease;
}

.music-volume-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
}



.step-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
}

/* ─── Step Pip (circle + label) ─────────────────────────────────────── */
.step-pip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
  flex-shrink: 0;
  position: relative;
}

.pip-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s var(--ease-out-expo);
}

.pip-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--clr-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease-out-expo);
  white-space: nowrap;
}

/* Active step */
.step-pip.active .pip-num {
  color: var(--clr-bg-deep);
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-soft));
  border-color: var(--clr-gold);
  box-shadow:
    0 0 16px var(--clr-gold-glow),
    0 0 40px rgba(223, 184, 88, 0.15);
}

.step-pip.active .pip-label {
  color: var(--clr-gold);
}

/* Completed step */
.step-pip.completed .pip-num {
  color: var(--clr-bg-deep);
  background: linear-gradient(135deg, var(--clr-teal), #4a9e90);
  border-color: var(--clr-teal);
  box-shadow: 0 0 12px var(--clr-teal-glow);
}

.step-pip.completed .pip-label {
  color: var(--clr-teal);
}

/* ─── Step Connector ────────────────────────────────────────────────── */
.step-connector {
  flex: 1;
  height: 2px;
  min-width: 20px;
  max-width: 60px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin: 0 4px;
  margin-bottom: 18px; /* align with pip circles, not labels */
  position: relative;
  overflow: hidden;
}

.step-connector::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clr-teal), var(--clr-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}

/* Completed connector fills in */
.step-connector.completed::after {
  transform: scaleX(1);
}


/* ══════════════════════════════════════════════════════════════════════
   FULL-SCREEN VN SCENE
   Matches the lore system aesthetic — background, sprite, dialogue.
   ══════════════════════════════════════════════════════════════════════ */
.builder-scene {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.builder-scene-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(223, 184, 88, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(91, 181, 166, 0.04) 0%, transparent 40%),
    linear-gradient(180deg, #050608 0%, #0a0c14 30%, #0e1020 100%);
  z-index: 0;
}

/* ─── Phase Header (fixed title above scroll area) ────────────────── */
.phase-header {
  flex-shrink: 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 24px 10px;
  z-index: 5;
  position: relative;
}

.phase-header .phase-title {
  margin: 0;
}

.phase-header-extras:empty {
  display: none;
}

.phase-header-extras {
  margin-top: 12px;
}

.builder-scene-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  padding: 20px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 184, 88, 0.25) transparent;
}

.builder-scene-content::-webkit-scrollbar {
  width: 6px;
}
.builder-scene-content::-webkit-scrollbar-track {
  background: transparent;
}
.builder-scene-content::-webkit-scrollbar-thumb {
  background: rgba(223, 184, 88, 0.25);
  border-radius: 3px;
}
.builder-scene-content::-webkit-scrollbar-thumb:hover {
  background: rgba(223, 184, 88, 0.4);
}

/* ─── Bottom Bar (dialogue + actions, pinned below scroll) ─────────── */
.builder-bottom-bar {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px 16px;
}

/* Gradient fade above the bottom bar */
.builder-bottom-bar::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(5, 6, 8, 0.9));
  pointer-events: none;
  z-index: 21;
}

/* ─── Sprite (behind content, like lore system) ─────────────────────── */
.builder-sprite-container {
  position: fixed;
  bottom: -280px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.2;
}

.builder-sprite {
  height: 900px;
  width: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.6));
  animation: spriteBreath 4s ease-in-out infinite;
}

@keyframes spriteBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ─── Phase Containers ──────────────────────────────────────────────── */
.builder-phase {
  width: 100%;
  position: relative;
  z-index: 3;
}

.builder-phase.hidden {
  display: none;
}

.phase-ui {
  width: 100%;
}

/* Titles are now shown in the fixed phase-header above the scroll area */
.phase-ui > .phase-title {
  display: none;
}

.phase-enter {
  animation: phaseSlideIn 0.45s var(--ease-out-expo) forwards;
}

.phase-exit {
  animation: phaseSlideOut 0.35s ease forwards;
}

@keyframes phaseSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes phaseSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

.phase-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  text-shadow: 0 0 24px rgba(223, 184, 88, 0.12);
}

/* ─── VN Dialogue Box ───────────────────────────────────────────────── */
.builder-dialogue-box {
  width: 100%;
  background: rgba(10, 12, 20, 0.92);
  border: 2px solid rgba(91, 155, 213, 0.25);
  border-radius: 16px;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(91, 155, 213, 0.15);
  overflow: hidden;
  margin-bottom: 20px;
  user-select: none;
}

/* Flash animation — draws attention to Aniela's message */
.builder-dialogue-box.aniela-flash {
  animation: anielaFlash 0.6s ease-in-out;
}

@keyframes anielaFlash {
  0%   { border-color: rgba(91, 155, 213, 0.25); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
  15%  { border-color: rgba(223, 184, 88, 0.8);  box-shadow: 0 0 20px rgba(223, 184, 88, 0.4), 0 8px 40px rgba(0, 0, 0, 0.5); }
  35%  { border-color: rgba(91, 155, 213, 0.25); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
  50%  { border-color: rgba(223, 184, 88, 0.8);  box-shadow: 0 0 20px rgba(223, 184, 88, 0.4), 0 8px 40px rgba(0, 0, 0, 0.5); }
  70%  { border-color: rgba(91, 155, 213, 0.25); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
  85%  { border-color: rgba(223, 184, 88, 0.6);  box-shadow: 0 0 14px rgba(223, 184, 88, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5); }
  100% { border-color: rgba(91, 155, 213, 0.25); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
}

.builder-speaker-plate {
  background: linear-gradient(135deg, rgba(91, 155, 213, 0.35), rgba(91, 155, 213, 0.15));
  padding: 8px 24px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border-radius: 0 0 12px 0;
}

.builder-speaker-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-cream, #f0e6d2);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ─── Voice Controls (mute + slider in speaker plate) ──────────────── */
.builder-voice-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.builder-voice-controls:hover {
  opacity: 1;
}

.builder-voice-mute-btn {
  background: none;
  border: none;
  color: var(--clr-cream, #f0e6d2);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: transform 0.2s ease;
  line-height: 1;
}

.builder-voice-mute-btn:hover {
  transform: scale(1.15);
}

.builder-voice-slider-wrapper {
  display: flex;
  align-items: center;
  width: 64px;
}

.builder-voice-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(240, 230, 210, 0.25);
  outline: none;
  cursor: pointer;
}

.builder-voice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--clr-cream, #f0e6d2);
  cursor: pointer;
  margin-top: -3.5px;
  box-shadow: 0 0 5px rgba(240, 230, 210, 0.6);
  transition: transform 0.15s ease;
}

.builder-voice-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

.builder-voice-slider::-moz-range-thumb {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--clr-cream, #f0e6d2);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 5px rgba(240, 230, 210, 0.6);
  transition: transform 0.15s ease;
}

.builder-voice-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
}


.builder-text-area {
  padding: 18px 28px 22px;
  min-height: 70px;
  position: relative;
}

.builder-text {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--clr-cream, #f0e6d2);
  line-height: 1.8;
  min-height: 1.5em;
  margin: 0;
}

.builder-next-indicator {
  position: absolute;
  bottom: 12px;
  right: 20px;
  color: rgba(91, 155, 213, 0.7);
  font-size: 1rem;
  animation: vnBounce 1s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.builder-next-indicator.visible {
  opacity: 1;
}

@keyframes vnBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ─── Action Buttons (VN scene-btn style) ───────────────────────────── */
.builder-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 5;
  margin-top: 4px;
}

.builder-btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.4s var(--ease-spring);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.builder-btn-icon {
  font-size: 1.1rem;
}

.builder-btn-next {
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.2), rgba(223, 184, 88, 0.1));
  color: var(--clr-gold);
  border: 2px solid rgba(223, 184, 88, 0.3);
  box-shadow: 0 4px 24px rgba(223, 184, 88, 0.1);
}

.builder-btn-next:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 40px rgba(223, 184, 88, 0.2);
  border-color: rgba(223, 184, 88, 0.5);
}

.builder-btn-reset {
  background: transparent;
  color: var(--clr-text-muted);
  border: 2px solid var(--clr-border-hover, rgba(255,255,255,0.12));
  padding: 12px 28px;
  font-size: 0.9rem;
}

.builder-btn-reset:hover {
  color: var(--clr-text-bright, #f0e6d2);
  border-color: var(--clr-border-hover);
  background: rgba(255, 255, 255, 0.05);
}

.builder-btn-back {
  background: transparent;
  color: rgba(91, 155, 213, 0.8);
  border: 2px solid rgba(91, 155, 213, 0.2);
  padding: 12px 28px;
  font-size: 0.9rem;
  margin-right: auto; /* push it to the left */
}

.builder-btn-back:hover {
  color: rgba(91, 155, 213, 1);
  border-color: rgba(91, 155, 213, 0.4);
  background: rgba(91, 155, 213, 0.06);
}


/* ══════════════════════════════════════════════════════════════════════
   RACE / SUBRACE CARDS
   Grid of selectable cards with race art, name, attributes.
   ══════════════════════════════════════════════════════════════════════ */
.race-grid,
.subrace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.race-card {
  position: relative;
  background: var(--clr-bg-card);
  border: 2px solid var(--clr-border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    transform 0.3s var(--ease-spring);
}

.race-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 20, 0.95) 100%);
  z-index: 1;
  pointer-events: none;
}

.race-card:hover {
  border-color: var(--clr-border-hover);
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(223, 184, 88, 0.1);
}

.race-card:active {
  transform: translateY(-1px) scale(0.99);
}

/* Selected state */
.race-card.selected {
  border-color: var(--clr-gold);
  box-shadow:
    0 0 24px var(--clr-gold-glow),
    0 8px 32px rgba(223, 184, 88, 0.15),
    inset 0 0 40px rgba(223, 184, 88, 0.05);
}

.race-card.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-soft));
  color: var(--clr-bg-deep);
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(223, 184, 88, 0.4);
}

/* Card image */
.race-card-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.race-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s var(--ease-out-expo);
}

.race-card:hover .race-card-img {
  transform: scale(1.08);
}

/* Card body */
.race-card-body {
  position: relative;
  z-index: 2;
  padding: 16px 18px 18px;
  margin-top: -40px;
}

.race-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-text-bright, #f0e6d2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.race-card-attrs {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--clr-teal);
  line-height: 1.5;
  margin-bottom: 8px;
  font-weight: 500;
}

.race-card-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin: 0;
  /* API descriptions carry paragraph breaks (converted to blank lines by
     descToText); preserve them so multi-paragraph text isn't a wall ([EJAYZ4pK]). */
  white-space: pre-wrap;
}

/* Subrace "Read more" toggle (Hel-F1) */
.race-card-more {
  margin-top: 8px;
  padding: 2px 0;
  background: none;
  border: none;
  color: var(--clr-gold, #d8bc74);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.85;
}
.race-card-more:hover { opacity: 1; text-decoration: underline; }
.race-card.desc-expanded { align-self: flex-start; }

.race-card-subrace-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background: rgba(91, 181, 166, 0.12);
  border: 1px solid rgba(91, 181, 166, 0.25);
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--clr-teal);
  font-weight: 500;
}

/* Subrace card tweaks */
.subrace-card .race-card-img-wrap {
  height: 180px;
}


/* ══════════════════════════════════════════════════════════════════════
   DEMON HOUSE CARDS
   List-style cards with house name, ability, and description.
   ══════════════════════════════════════════════════════════════════════ */
.house-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.house-card {
  position: relative;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    transform 0.3s var(--ease-spring),
    background 0.3s ease;
}

.house-card:hover {
  border-color: var(--clr-border-hover);
  transform: translateY(-2px);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(223, 184, 88, 0.08);
}

.house-card:active {
  transform: translateY(0) scale(0.99);
}

.house-card.selected {
  border-color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.04);
  box-shadow:
    0 0 20px var(--clr-gold-glow),
    0 6px 24px rgba(223, 184, 88, 0.1),
    inset 0 0 30px rgba(223, 184, 88, 0.03);
}

.house-card.selected::after {
  content: '✓';
  position: absolute;
  top: 14px;
  right: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-soft));
  color: var(--clr-bg-deep);
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 5;
}

.house-card-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.house-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text-bright, #f0e6d2);
  letter-spacing: 0.02em;
}

.house-card-ability {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-teal);
  padding: 2px 8px;
  background: rgba(91, 181, 166, 0.1);
  border: 1px solid rgba(91, 181, 166, 0.2);
  border-radius: 12px;
}

.house-card-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin: 0;
  /* Preserve paragraph breaks from descToText ([EJAYZ4pK]). */
  white-space: pre-wrap;
}


/* ══════════════════════════════════════════════════════════════════════
   HUMAN BONUS PICKS + PHASE LABELS
   ══════════════════════════════════════════════════════════════════════ */
.phase-subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  margin-bottom: 20px;
}

.bonus-highlight {
  color: #5bcc6e;
  font-weight: 700;
}

.bonus-group-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  margin-top: 16px;
}

/* Bonus pick slots — reuse stat-slot styles but add selected state */
.bonus-pick-slots {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.bonus-pick {
  padding: 14px;
}

.bonus-pick .slot-value {
  display: none;
}

.bonus-pick .slot-desc {
  display: none;
}

.bonus-pick.selected {
  border-color: #5bcc6e !important;
  background: rgba(91, 204, 110, 0.08) !important;
  box-shadow:
    0 0 20px rgba(91, 204, 110, 0.15),
    inset 0 0 30px rgba(91, 204, 110, 0.04);
}

.bonus-pick.selected::after {
  content: '+1';
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #5bcc6e;
}

.bonus-pick.selected .slot-name {
  color: #5bcc6e;
}

/* ══════════════════════════════════════════════════════════════════════
   STAT SUMMARY ROW (Derived page — shows base + race bonus)
   ══════════════════════════════════════════════════════════════════════ */
.stat-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.stat-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px;
  background: var(--clr-bg-glass, rgba(255,255,255,0.03));
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat-summary-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-summary-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.stat-summary-total {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-bright, #f0e6d2);
}

.stat-bonus {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #5bcc6e;
  text-shadow: 0 0 8px rgba(91, 204, 110, 0.4);
}

.stat-summary-breakdown {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--clr-text-dim);
  opacity: 0.7;
}




/* ══════════════════════════════════════════════════════════════════════
   STAT TOKENS
   Horizontal row of clickable value pills (5, 4, 4, 3).
   ══════════════════════════════════════════════════════════════════════ */
.stat-tokens {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.stat-token {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.06);
  border: 2px solid rgba(223, 184, 88, 0.25);
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-spring),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
  position: relative;
}

.stat-token:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: var(--clr-gold);
  box-shadow: 0 4px 20px var(--clr-gold-glow);
  background: rgba(223, 184, 88, 0.12);
}

.stat-token:active {
  transform: translateY(0) scale(0.97);
}

/* Selected token */
.stat-token.selected {
  color: var(--clr-bg-deep);
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-soft));
  border-color: var(--clr-gold);
  box-shadow:
    0 0 20px var(--clr-gold-glow),
    0 6px 24px rgba(223, 184, 88, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-4px) scale(1.12);
}

.stat-token.selected:hover {
  transform: translateY(-5px) scale(1.14);
}

/* Used token (already assigned, dimmed) */
.stat-token.used {
  color: var(--clr-text-dim);
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.4;
  transform: scale(0.92);
}

/* Draggable cursor */
.stat-token:not(.used) {
  cursor: grab;
}
.stat-token:not(.used):active {
  cursor: grabbing;
}

/* Dragging state */
.stat-token.dragging {
  opacity: 0.45;
  transform: scale(0.9);
  box-shadow: 0 0 30px var(--clr-gold-glow);
}


/* ══════════════════════════════════════════════════════════════════════
   STAT SLOTS
   Grid of stat cards — icon, name, value, description.
   ══════════════════════════════════════════════════════════════════════ */
.stat-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.stat-slot {
  position: relative;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    transform 0.3s var(--ease-spring),
    background 0.3s ease;
}

/* Inner shimmer layer */
.stat-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.stat-slot:hover {
  border-color: var(--clr-border-hover);
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(223, 184, 88, 0.08);
}

.stat-slot:hover::before {
  opacity: 1;
}

.stat-slot:active {
  transform: translateY(-1px) scale(0.98);
}

/* Slot sub-elements */
.slot-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s var(--ease-spring);
}

.stat-slot:hover .slot-icon {
  transform: scale(1.15);
}

.slot-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.slot-value {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-text-dim);
  margin-bottom: 8px;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.slot-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  line-height: 1.4;
}

/* ─── Highlight state: token selected, slot is assignable ───────────── */
.stat-slot.highlight {
  border-color: var(--clr-border-hover);
  box-shadow:
    0 0 16px var(--clr-gold-glow),
    inset 0 0 30px rgba(223, 184, 88, 0.04);
  animation: slotPulseReady 2s ease-in-out infinite;
}

.stat-slot.highlight::before {
  opacity: 1;
}

@keyframes slotPulseReady {
  0%, 100% { box-shadow: 0 0 16px var(--clr-gold-glow), inset 0 0 30px rgba(223, 184, 88, 0.04); }
  50%      { box-shadow: 0 0 24px var(--clr-gold-glow), inset 0 0 40px rgba(223, 184, 88, 0.08); }
}

/* ─── Assigned state: slot has a value ──────────────────────────────── */
.stat-slot.assigned {
  border-color: rgba(91, 181, 166, 0.3);
  background: rgba(91, 181, 166, 0.05);
}

.stat-slot.assigned::before {
  background: linear-gradient(135deg, rgba(91, 181, 166, 0.06), transparent 60%);
  opacity: 1;
}

.stat-slot.assigned .slot-value {
  color: var(--clr-gold);
  text-shadow: 0 0 20px var(--clr-gold-glow);
}

.stat-slot.assigned:hover {
  border-color: rgba(204, 91, 91, 0.35);
  box-shadow: 0 4px 20px rgba(204, 91, 91, 0.12);
}

.stat-slot.assigned:hover::before {
  background: linear-gradient(135deg, rgba(204, 91, 91, 0.06), transparent 60%);
}

/* Drop target — slot being hovered with a dragged token */
.stat-slot.drop-target {
  border-color: var(--clr-teal) !important;
  box-shadow:
    0 0 20px rgba(91, 181, 166, 0.3),
    0 0 40px rgba(91, 181, 166, 0.1),
    inset 0 0 20px rgba(91, 181, 166, 0.05) !important;
  transform: scale(1.03);
  transition: all 0.15s ease;
}

.stat-slot.drop-target::before {
  border-color: var(--clr-teal) !important;
  box-shadow: 0 0 12px rgba(91, 181, 166, 0.4) !important;
}

/* ─── Race Bonus Badge: green +1 indicator in corner ───────────────── */
.race-bonus-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(91, 204, 110, 0.12);
  border: 1px solid rgba(91, 204, 110, 0.3);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: #5bcc6e;
  letter-spacing: 0.03em;
  z-index: 3;
  text-shadow: 0 0 6px rgba(91, 204, 110, 0.3);
}


/* ══════════════════════════════════════════════════════════════════════
   DERIVED STATS
   Grid of stat readouts: HP, Mana, RP, Evasion, etc.
   ══════════════════════════════════════════════════════════════════════ */
.derived-stats {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--clr-border);
}

.derived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.derived-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--clr-bg-glass);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-spring);
}

.derived-item:hover {
  border-color: var(--clr-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.derived-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.derived-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  line-height: 1;
  min-height: 1.6rem;
  transition: color 0.3s ease;
}

/* Pulsing highlight when value changes */
.derived-value.pulse {
  animation: statPulse 0.6s var(--ease-spring);
}

.derived-formula {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--clr-text-dim);
  opacity: 0.7;
}


/* ══════════════════════════════════════════════════════════════════════
   STEP ACTIONS
   Bottom action bar — Reset + Confirm buttons.
   ══════════════════════════════════════════════════════════════════════ */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--clr-border);
}

.wizard-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

.wizard-btn:active {
  transform: translateY(0) scale(0.97);
}

/* Primary — gold gradient, prominent */
.wizard-btn-primary {
  color: var(--clr-bg-deep);
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-soft));
  box-shadow:
    0 4px 20px var(--clr-gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
}

.wizard-btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 6px 30px var(--clr-gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, var(--clr-gold), #edd78f);
}

.wizard-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Secondary — subtle outline */
.wizard-btn-secondary {
  color: var(--clr-text-muted);
  background: transparent;
  border: 1px solid var(--clr-border);
}

.wizard-btn-secondary:hover {
  color: var(--clr-text-bright);
  border-color: var(--clr-border-hover);
  background: rgba(223, 184, 88, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.wizard-btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   Minimal, matching the test page pattern.
   ══════════════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 2;
  background: rgba(10, 12, 20, 0.95);
  border-top: 1px solid var(--clr-border);
  padding: 40px 24px;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-brand {
  margin-bottom: 0;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--clr-gold);
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--clr-text-dim);
  margin-top: 4px;
}

.footer-bottom {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--clr-text-dim);
}


/* ══════════════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

/* Stat value pulse — plays when a derived value updates */
@keyframes statPulse {
  0%   { transform: scale(1);   color: var(--clr-text-bright); }
  30%  { transform: scale(1.25); color: var(--clr-gold); text-shadow: 0 0 16px var(--clr-gold-glow); }
  100% { transform: scale(1);   color: var(--clr-text-bright); text-shadow: none; }
}

/* Applied by JS when a stat value changes */
.stat-pop {
  animation: statPulse 0.45s var(--ease-spring);
}

/* Slot ready pulse (defined above with stat-slot.highlight) */

/* Token pop-in */
@keyframes tokenPopIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Gentle float for the Aniela dialogue box entry */
@keyframes dialogueFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BREAKTHROUGHS PHASE
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Budget Bar ───────────────────────────────────────────────────── */
.bt-budget-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  margin-bottom: 10px;
}

.bt-budget-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--clr-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bt-budget-meter {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.bt-budget-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--clr-teal), var(--clr-gold));
  transition: width 0.4s var(--ease-out-expo);
}

.bt-budget-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  white-space: nowrap;
  min-width: 75px;
  text-align: right;
  transition: color 0.3s ease;
}

.bt-budget-value.over-budget {
  color: #e05252;
}

/* ─── Override Mode Toggle ─────────────────────────────────────────── */
.bt-override-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text-dim);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.bt-override-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text);
}

.bt-override-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Active state */
.bt-override-btn.active {
  border-color: rgba(224, 82, 82, 0.5);
  background: rgba(224, 82, 82, 0.12);
  color: #e05252;
}

.bt-override-btn.active .bt-override-indicator {
  background: #e05252;
  border-color: #e05252;
  box-shadow: 0 0 8px rgba(224, 82, 82, 0.6), 0 0 20px rgba(224, 82, 82, 0.3);
  animation: overridePulse 1.5s ease-in-out infinite;
}

@keyframes overridePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(224, 82, 82, 0.5), 0 0 16px rgba(224, 82, 82, 0.2); }
  50% { box-shadow: 0 0 10px rgba(224, 82, 82, 0.8), 0 0 28px rgba(224, 82, 82, 0.4); }
}

/* ─── Search Bar ───────────────────────────────────────────────────── */
.bt-search-wrap {
  position: relative;
}

.bt-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.5;
  pointer-events: none;
}

.bt-search-input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--clr-text-bright);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bt-search-input::placeholder {
  color: var(--clr-text-dim);
}

.bt-search-input:focus {
  border-color: var(--clr-gold);
  box-shadow: 0 0 16px var(--clr-gold-glow);
}

/* ─── Two-column Layout (cards + cart) ─────────────────────────────── */
.bt-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: start;
}

/* ─── Card Grid ────────────────────────────────────────────────────── */
.bt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.bt-card {
  position: relative;
  padding: 14px 14px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease,
    background 0.3s ease;
}

.bt-card:hover {
  border-color: rgba(223, 184, 88, 0.3);
  box-shadow: 0 4px 20px rgba(223, 184, 88, 0.08);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.05);
}

.bt-card.selected {
  border-color: var(--clr-teal);
  background: rgba(91, 181, 166, 0.08);
  box-shadow: 0 0 16px rgba(91, 181, 166, 0.12);
}

.bt-card.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clr-teal);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

.bt-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.bt-card.bt-locked {
  opacity: 0.5;
  border-color: rgba(255, 180, 60, 0.2);
  cursor: not-allowed;
}

.bt-card.bt-locked:hover {
  transform: none;
  box-shadow: none;
}

.bt-card-lock-reason {
  font-size: 0.7rem;
  color: #e6a23c;
  font-style: italic;
  margin-bottom: 4px;
  line-height: 1.3;
}

.bt-card.mirane-banned {
  display: none;
}

.bt-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.bt-card-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-bright);
  line-height: 1.3;
}

.bt-card-cost {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(223, 184, 88, 0.1);
  border: 1px solid rgba(223, 184, 88, 0.25);
  color: var(--clr-gold);
}

.bt-card-cost.free {
  background: rgba(91, 181, 166, 0.1);
  border-color: rgba(91, 181, 166, 0.25);
  color: var(--clr-teal);
}

.bt-card-req {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--clr-text-dim);
  margin-bottom: 4px;
  font-style: italic;
}

.bt-card-desc {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--clr-text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Expand button */
.bt-card-expand {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-dim);
  font-size: 0.65rem;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

.bt-card-expand:hover {
  background: rgba(223, 184, 88, 0.12);
  border-color: rgba(223, 184, 88, 0.3);
  color: var(--clr-gold);
}

.bt-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--clr-text-dim);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* ─── Cart Sidebar ─────────────────────────────────────────────────── */
.bt-cart {
  position: sticky;
  top: 0;
  background: rgba(13, 15, 26, 0.6);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bt-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--clr-border);
}

.bt-cart-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bt-cart-count {
  background: rgba(91, 181, 166, 0.15);
  border: 1px solid rgba(91, 181, 166, 0.3);
  color: var(--clr-teal);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
}

.bt-cart-items {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 184, 88, 0.2) transparent;
  padding: 6px 0;
}

.bt-cart-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--clr-text-dim);
  font-size: 0.72rem;
  font-family: var(--font-body);
  font-style: italic;
}

.bt-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  gap: 8px;
  transition: background 0.2s ease;
}

.bt-cart-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.bt-cart-item-name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.bt-cart-item-cost {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--clr-gold);
  white-space: nowrap;
  flex-shrink: 0;
}

.bt-cart-item-remove {
  background: none;
  border: none;
  color: var(--clr-text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.bt-cart-item:hover .bt-cart-item-remove {
  opacity: 1;
}

.bt-cart-item-remove:hover {
  color: #e05252;
}

.bt-cart-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--clr-border);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-bright);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#bt-cart-total-cost {
  color: var(--clr-gold);
  font-family: var(--font-mono);
}

/* ─── Detail Modal ─────────────────────────────────────────────────── */
.bt-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.bt-detail-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.bt-detail-modal {
  position: relative;
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgb(18, 20, 35);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 16px;
  padding: 28px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(223, 184, 88, 0.08);
  animation: modalSlideIn 0.3s var(--ease-out-expo);
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bt-detail-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.bt-detail-close:hover {
  background: rgba(224, 82, 82, 0.15);
  border-color: rgba(224, 82, 82, 0.3);
  color: #e05252;
}

.bt-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.bt-detail-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  margin: 0;
  line-height: 1.3;
}

.bt-detail-cost {
  flex-shrink: 0;
  padding: 4px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(223, 184, 88, 0.1);
  border: 1px solid rgba(223, 184, 88, 0.25);
  color: var(--clr-gold);
}

.bt-detail-cost.free {
  background: rgba(91, 181, 166, 0.1);
  border-color: rgba(91, 181, 166, 0.25);
  color: var(--clr-teal);
}

.bt-detail-req {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--clr-text-dim);
  margin-bottom: 14px;
  font-style: italic;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid rgba(223, 184, 88, 0.3);
  border-radius: 0 6px 6px 0;
}

.bt-detail-req:empty {
  display: none;
}

.bt-detail-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text);
  line-height: 1.7;
  margin-bottom: 20px;
}

.bt-detail-toggle-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(91, 181, 166, 0.3);
  background: rgba(91, 181, 166, 0.1);
  color: var(--clr-teal);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.bt-detail-toggle-btn:hover {
  background: rgba(91, 181, 166, 0.2);
  box-shadow: 0 0 16px rgba(91, 181, 166, 0.15);
}

.bt-detail-toggle-btn.is-selected {
  border-color: rgba(224, 82, 82, 0.3);
  background: rgba(224, 82, 82, 0.1);
  color: #e05252;
}

/* ── Sheet-mode BT Card Styles ──────────────────────────────────────── */
.bt-card-actions {
  position: absolute;
  bottom: 10px;
  right: 12px;
}

.bt-card-purchase-btn {
  background: rgba(223, 184, 88, 0.12);
  border: 1px solid rgba(223, 184, 88, 0.35);
  color: var(--clr-gold-soft, #dfb858);
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.bt-card-purchase-btn:hover {
  background: rgba(223, 184, 88, 0.25);
  border-color: rgba(223, 184, 88, 0.6);
  box-shadow: 0 0 12px rgba(223, 184, 88, 0.15);
  transform: translateY(-1px);
}

.bt-card-owned-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(80, 200, 120, 0.15);
  color: #50c878;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(80, 200, 120, 0.25);
}

.bt-card.bt-multi-owned {
  border-color: rgba(80, 200, 120, 0.2);
}

/* ── Sheet-mode Detail Footer ───────────────────────────────────────── */
.bt-detail-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.bt-detail-cost {
  font-weight: 600;
  color: var(--clr-gold-soft, #dfb858);
  font-size: 0.85rem;
}

.bt-detail-owned {
  color: #50c878;
  font-weight: 600;
  font-size: 0.82rem;
}

.bt-detail-locked {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.82rem;
}

.bt-detail-purchase-btn,
.bt-detail-remove-btn {
  padding: 6px 18px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
}

.bt-detail-purchase-btn {
  background: rgba(223, 184, 88, 0.15);
  border-color: rgba(223, 184, 88, 0.35);
  color: var(--clr-gold-soft, #dfb858);
}

.bt-detail-purchase-btn:hover {
  background: rgba(223, 184, 88, 0.3);
  border-color: rgba(223, 184, 88, 0.6);
  box-shadow: 0 0 14px rgba(223, 184, 88, 0.15);
}

.bt-detail-remove-btn {
  background: rgba(224, 82, 82, 0.1);
  border-color: rgba(224, 82, 82, 0.25);
  color: #e05252;
}

.bt-detail-remove-btn:hover {
  background: rgba(224, 82, 82, 0.25);
  border-color: rgba(224, 82, 82, 0.5);
}

/* ── Multi-take Choice Picker ───────────────────────────────────────── */
.bt-detail-multi-info {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.bt-detail-own-count {
  font-size: 0.78rem;
  color: #50c878;
  margin-bottom: 8px;
}

.bt-choice-label {
  font-size: 0.78rem;
  color: var(--clr-text-dim, #999);
  margin-bottom: 6px;
}

.bt-choice-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bt-choice-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--clr-text-dim, #ccc);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bt-choice-btn:hover {
  border-color: rgba(223, 184, 88, 0.3);
  background: rgba(223, 184, 88, 0.08);
}

.bt-choice-btn.selected {
  border-color: rgba(223, 184, 88, 0.5);
  background: rgba(223, 184, 88, 0.15);
  color: var(--clr-gold-soft, #dfb858);
}

.bt-choice-input {
  width: 100%;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--clr-text, #e8e8e8);
  font-size: 0.82rem;
  outline: none;
}

.bt-choice-input:focus {
  border-color: rgba(223, 184, 88, 0.4);
}

.bt-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--clr-text-dim, #888);
  font-size: 0.85rem;
  font-style: italic;
}

.bt-detail-req-label {
  color: var(--clr-text-dim, #999);
  font-size: 0.78rem;
  margin-right: 6px;
}

.bt-detail-req-text {
  font-size: 0.78rem;
  color: var(--clr-text, #ccc);
}


/* ══════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(13, 15, 26, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(223, 184, 88, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(223, 184, 88, 0.35);
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .step-progress {
    padding: 14px 16px 10px;
    overflow-x: auto;
  }

  .step-track {
    min-width: 520px;
  }

  .pip-num {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .pip-label {
    font-size: 0.58rem;
  }

  .step-connector {
    min-width: 14px;
  }

  .builder-scene-content {
    padding: 16px 16px 20px;
  }

  .stat-slots {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }

  .derived-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }

  .builder-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .builder-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .stat-token {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .stat-slots {
    grid-template-columns: 1fr;
  }

  .stat-slot {
    padding: 16px;
  }

  .slot-value {
    font-size: 1.5rem;
  }

  .derived-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .derived-value {
    font-size: 1.3rem;
  }

}

/* ─── Large screens ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .stat-slots {
    grid-template-columns: repeat(4, 1fr);
  }

  #sub-stat-slots {
    grid-template-columns: repeat(5, 1fr);
  }

  .derived-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ─── Short viewports (height-constrained) ──────────────────────────────
   Bug 1 — Trello n7woq7Mr ("Character creator UI overflows top and bottom").
   The builder scene is a fixed flex column (nav-height → bottom) whose chrome
   — .step-progress, .phase-header, and the .builder-bottom-bar (tall VN
   dialogue box) — is all flex-shrink:0 and totals ~309px. The middle
   .builder-scene-content (flex:1, scrolls) collapses first on short screens;
   once it hits its content floor the bottom bar spills past the scene's
   bottom edge where .builder-scene's overflow:hidden CLIPS the dialogue box —
   so Aniela's message and the click-to-advance affordance become unreachable,
   while phase content is squeezed against the header (the "top and bottom"
   overflow). These height media queries compact the fixed chrome so the
   dialogue bar stays fully visible and content keeps usable room. Normal
   (tall) viewports are untouched.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-height: 700px) {
  .step-progress { padding: 10px 24px 8px; }
  .phase-header { padding: 10px 24px 6px; }
  .phase-title { margin-bottom: 8px; }
  .builder-scene-content { padding-top: 12px; padding-bottom: 16px; }
  .builder-text-area { padding: 12px 28px 14px; min-height: 54px; }
  .builder-dialogue-box { margin-bottom: 10px; }
  .builder-bottom-bar { padding-bottom: 10px; }
}

@media (max-height: 560px) {
  .step-progress { padding: 6px 24px 4px; }
  .pip-num { width: 28px; height: 28px; font-size: 0.75rem; }
  .pip-label { display: none; }
  .step-connector { margin-bottom: 0; } /* labels hidden: re-center connectors on the pips */
  .phase-header { padding: 6px 24px 4px; }
  .phase-title { margin-bottom: 4px; }
  .builder-scene-content { padding: 8px 16px 12px; }
  .builder-speaker-plate { padding: 4px 18px; }
  .builder-text { font-size: 0.98rem; line-height: 1.45; }
  .builder-text-area { padding: 8px 24px 10px; min-height: 40px; }
  .builder-dialogue-box { margin-bottom: 6px; }
  .builder-bottom-bar { padding-bottom: 6px; }
}


/* ══════════════════════════════════════════════════════════════════════
   CLASSES PHASE
   Card grid, badges, filters, detail modal, progression table.
   Reuses .bt-layout / .bt-cart shell; all new classes prefixed cls-.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Class Grid & Cards ────────────────────────────────────────── */
.cls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.cls-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease,
    background 0.3s ease,
    opacity 0.3s ease,
    filter 0.3s ease;
}

.cls-card:hover {
  border-color: rgba(223, 184, 88, 0.3);
  box-shadow: 0 4px 20px rgba(223, 184, 88, 0.08);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Selected state — gold border glow ── */
.cls-card.selected {
  border-color: var(--clr-gold);
  box-shadow:
    0 0 20px var(--clr-gold-glow),
    0 6px 28px rgba(223, 184, 88, 0.15),
    inset 0 0 30px rgba(223, 184, 88, 0.04);
}

.cls-card.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-soft));
  color: var(--clr-bg-deep);
  font-size: 0.65rem;
  font-weight: 700;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(223, 184, 88, 0.4);
}

/* ── Locked state ── */
.cls-card.locked {
  opacity: 0.5;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Mirane-banned state — red tint overlay + strikethrough ── */
.cls-card.mirane-banned {
  pointer-events: auto;
  cursor: not-allowed;
}

.cls-card.mirane-banned::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(224, 82, 82, 0.12);
  z-index: 4;
  pointer-events: none;
  border-radius: 12px;
}

.cls-card.mirane-banned .cls-card-name {
  text-decoration: line-through;
  text-decoration-color: rgba(224, 82, 82, 0.6);
  color: var(--clr-text-dim);
}

/* ── Card thumbnail ── */
.cls-card-img-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}

.cls-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portraits are tall (2:3) full-body art but the card window is a short
     letterbox (~120px in a ~400px card ≈ top 20% of the image), so it can't
     fit a whole face — the goal is keeping EYES visible. Most characters' eyes
     sit ~12-20% down, so bias the window there. Classes whose art puts the face
     lower (bowed head, action/masked pose, distant figure, close-up eye art)
     get a per-class override inline via class-browser.js PORTRAIT_FOCUS. */
  object-position: center 15%;
  transition: transform 0.5s var(--ease-out-expo);
}

.cls-card:hover .cls-card-img {
  transform: scale(1.06);
}

/* Gradient fade over bottom of image */
.cls-card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(18, 20, 35, 0.95));
  pointer-events: none;
}

/* ── Card body ── */
.cls-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 40px;
  flex: 1;
}

.cls-card-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text-bright, #f0e6d2);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.cls-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cls-card-req {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--clr-text-dim);
  font-style: italic;
}

.cls-card-desc {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--clr-text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Expand button (same pattern as .bt-card-expand) */
.cls-card-expand {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-dim);
  font-size: 0.65rem;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

.cls-card-expand:hover {
  background: rgba(223, 184, 88, 0.12);
  border-color: rgba(223, 184, 88, 0.3);
  color: var(--clr-gold);
}

.cls-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--clr-text-dim);
  font-family: var(--font-body);
  font-size: 0.9rem;
}


/* ─── 2. Tier Badges ──────────────────────────────────────────────── */
.cls-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.cls-tier-badge.tier-1 {
  background: rgba(74, 158, 255, 0.12);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: #4a9eff;
}

.cls-tier-badge.tier-2 {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
}

.cls-tier-badge.tier-3 {
  background: rgba(223, 184, 88, 0.12);
  border: 1px solid rgba(223, 184, 88, 0.3);
  color: var(--clr-gold, #dfb858);
}


/* ─── 3. Difficulty Badge (filled/empty dots) ─────────────────────── */
.cls-diff-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--clr-gold, #dfb858);
  letter-spacing: 1px;
}

/* Filled dot */
.cls-diff-badge .dot-filled {
  color: var(--clr-gold, #dfb858);
  text-shadow: 0 0 6px rgba(223, 184, 88, 0.4);
}

/* Empty dot */
.cls-diff-badge .dot-empty {
  color: rgba(255, 255, 255, 0.15);
  text-shadow: none;
}


/* ─── 4. Role Tags ────────────────────────────────────────────────── */
.cls-role-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.4;
}

.cls-role-tag.role-striker {
  background: rgba(224, 82, 82, 0.12);
  color: #e05252;
  border: 1px solid rgba(224, 82, 82, 0.25);
}

.cls-role-tag.role-defender {
  background: rgba(74, 158, 255, 0.12);
  color: #4a9eff;
  border: 1px solid rgba(74, 158, 255, 0.25);
}

.cls-role-tag.role-healer {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.cls-role-tag.role-support {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.cls-role-tag.role-controller {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.cls-role-tag.role-utility {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.25);
}

.cls-role-tag.role-specialist {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.25);
}

.cls-role-tag.role-artisan {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.cls-role-tag.role-gatherer {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}


/* ─── 5. Filter Bar ───────────────────────────────────────────────── */
.cls-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cls-filter-bar select {
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--clr-text-bright);
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 10px 6px;
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cls-filter-bar select:focus {
  border-color: var(--clr-gold);
  box-shadow: 0 0 12px var(--clr-gold-glow);
}

.cls-filter-bar select option {
  background: rgb(18, 20, 35);
  color: var(--clr-text-bright);
}

/* Mirane toggle — base state: OFF (red = permissive, banned classes allowed) */
.cls-mirane-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(224, 82, 82, 0.3);
  background: rgba(224, 82, 82, 0.08);
  color: #e05252;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.cls-mirane-btn:hover {
  background: rgba(224, 82, 82, 0.14);
  border-color: rgba(224, 82, 82, 0.5);
}

.cls-mirane-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e05252;
  border: 1px solid #e05252;
  box-shadow: 0 0 6px rgba(224, 82, 82, 0.5);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Active = Mirane rules enforced (green = safe, banned classes blocked) */
.cls-mirane-btn.active {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}

.cls-mirane-btn.active .cls-mirane-indicator {
  background: #4ade80;
  border-color: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6), 0 0 20px rgba(74, 222, 128, 0.3);
}


/* ─── 6. Class Detail Modal ───────────────────────────────────────── */
.cls-detail-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgb(14, 16, 28);
  align-items: center;
  justify-content: center;
}

.cls-detail-overlay.open {
  display: flex;
  animation: clsFadeIn 0.15s ease;
}

@keyframes clsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cls-detail-modal {
  position: relative;
  width: 94%;
  max-width: 740px;
  max-height: 82vh;
  overflow-y: auto;
  background: rgb(20, 22, 38);
  border: 1px solid rgba(223, 184, 88, 0.3);
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(223, 184, 88, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: modalSlideIn 0.3s var(--ease-out-expo);
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 184, 88, 0.2) transparent;
}

.cls-detail-modal::-webkit-scrollbar { width: 6px; }
.cls-detail-modal::-webkit-scrollbar-track { background: transparent; }
.cls-detail-modal::-webkit-scrollbar-thumb {
  background: rgba(223, 184, 88, 0.2);
  border-radius: 3px;
}

/* Close button — reuse bt pattern */
.cls-detail-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 5;
}

.cls-detail-close:hover {
  background: rgba(224, 82, 82, 0.15);
  border-color: rgba(224, 82, 82, 0.3);
  color: #e05252;
}

/* ── Top area: image + info column ── */
.cls-detail-top {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.cls-detail-img {
  width: 200px;
  height: auto;
  min-height: 140px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.cls-detail-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cls-detail-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  margin: 0;
  line-height: 1.3;
}

/* ── Meta badges row ── */
.cls-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── Requirements box — gold left-border, same as bt-detail-req ── */
.cls-detail-req {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--clr-text-dim);
  margin-bottom: 14px;
  font-style: italic;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid rgba(223, 184, 88, 0.3);
  border-radius: 0 6px 6px 0;
}

.cls-detail-req:empty {
  display: none;
}

/* ── Scrollable description ── */
.cls-detail-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text);
  line-height: 1.7;
  margin-bottom: 20px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 184, 88, 0.15) transparent;
}

.cls-detail-desc::-webkit-scrollbar { width: 4px; }
.cls-detail-desc::-webkit-scrollbar-track { background: transparent; }
.cls-detail-desc::-webkit-scrollbar-thumb {
  background: rgba(223, 184, 88, 0.15);
  border-radius: 2px;
}

/* ── Progression Section ── */
.cls-progression {
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.015);
}

.cls-progression-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cls-progression-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cls-prog-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
}

.cls-prog-label {
  width: 140px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-dim);
  letter-spacing: 0.03em;
  padding-top: 1px;
}

.cls-prog-content {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--clr-text);
  line-height: 1.5;
}

/* Unlocked row — green accent */
.cls-prog-row.unlocked {
  border-left-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.03);
}

.cls-prog-row.unlocked .cls-prog-label {
  color: #4ade80;
}

/* Locked row — dimmed */
.cls-prog-row.locked {
  opacity: 0.4;
}

/* Current level — pulsing gold left border */
.cls-prog-row.current {
  border-left-color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.04);
  animation: clsProgPulse 2s ease-in-out infinite;
}

.cls-prog-row.current .cls-prog-label {
  color: var(--clr-gold);
}

@keyframes clsProgPulse {
  0%, 100% { border-left-color: var(--clr-gold, #dfb858); box-shadow: inset 3px 0 8px rgba(223, 184, 88, 0.08); }
  50%      { border-left-color: rgba(223, 184, 88, 0.4); box-shadow: inset 3px 0 16px rgba(223, 184, 88, 0.15); }
}

/* ── Clickable ability rows in progression ── */
.cls-prog-ability-link {
  cursor: pointer;
  transition: color 0.15s;
}
.cls-prog-row:hover .cls-prog-ability-link {
  color: var(--clr-gold);
}
.cls-prog-expand-icon {
  font-size: 0.65rem;
  opacity: 0.4;
  margin-left: 4px;
  transition: opacity 0.15s;
}
.cls-prog-row:hover .cls-prog-expand-icon {
  opacity: 0.8;
}

/* ── Ability detail in tooltip ── */
.cls-ability-benefit {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--clr-text);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cls-ability-benefit:last-child {
  border-bottom: none;
}
.cls-ability-assoc {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cls-ability-assoc-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--clr-gold);
  margin-bottom: 8px;
}
.cls-ability-tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 4px 6px 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: var(--clr-text-dim);
  font-weight: 600;
}
.cls-ability-req {
  font-size: 0.72rem;
  color: #ef9a9a;
  margin-bottom: 6px;
  font-style: italic;
}
.cls-ability-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--clr-text);
  margin-top: 6px;
}
.cls-ability-desc p {
  margin: 0 0 8px;
}

/* ── Strategy Guide (collapsible) ── */
.cls-detail-guide {
  margin-bottom: 18px;
}

.cls-detail-guide summary {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.2s ease;
  list-style: none;
}

.cls-detail-guide summary::-webkit-details-marker {
  display: none;
}

.cls-detail-guide summary::before {
  content: '▸ ';
  color: var(--clr-gold);
  transition: transform 0.2s ease;
  display: inline-block;
}

.cls-detail-guide[open] summary::before {
  content: '▾ ';
}

.cls-detail-guide summary:hover {
  color: var(--clr-text-bright);
}

.cls-detail-guide-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--clr-text);
  line-height: 1.7;
  padding: 10px 0 0 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.06);
}

/* ── Action Buttons ── */
.cls-detail-actions {
  display: flex;
  gap: 10px;
}

/* Unlock button — mirrors .bt-detail-toggle-btn */
.cls-detail-unlock-btn {
  flex: 1;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(91, 181, 166, 0.3);
  background: rgba(91, 181, 166, 0.1);
  color: var(--clr-teal);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cls-detail-unlock-btn:hover {
  background: rgba(91, 181, 166, 0.2);
  box-shadow: 0 0 16px rgba(91, 181, 166, 0.15);
}

.cls-detail-unlock-btn.is-selected {
  border-color: rgba(224, 82, 82, 0.3);
  background: rgba(224, 82, 82, 0.1);
  color: #e05252;
}

.cls-detail-unlock-btn.is-selected:hover {
  background: rgba(224, 82, 82, 0.18);
  box-shadow: 0 0 14px rgba(224, 82, 82, 0.12);
}

/* Level button — gold accent */
.cls-detail-level-btn {
  flex: 1;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(223, 184, 88, 0.3);
  background: rgba(223, 184, 88, 0.1);
  color: var(--clr-gold);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cls-detail-level-btn:hover {
  background: rgba(223, 184, 88, 0.2);
  box-shadow: 0 0 16px var(--clr-gold-glow);
  border-color: rgba(223, 184, 88, 0.5);
}

.cls-detail-level-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}


/* ─── 7. Class Cart Extras ────────────────────────────────────────── */
.cls-cart-ip {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--clr-border);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-bright);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cls-cart-ip-value {
  color: var(--clr-gold);
  font-family: var(--font-mono);
}


/* ─── 8. Mastered Badge ───────────────────────────────────────────── */
.cls-mastered {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 2px 10px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-bg-deep);
  background: linear-gradient(
    135deg,
    var(--clr-gold) 0%,
    var(--clr-gold-soft, #edd78f) 40%,
    var(--clr-gold) 60%,
    #f5e6a3 80%,
    var(--clr-gold) 100%
  );
  background-size: 200% 100%;
  z-index: 5;
  box-shadow:
    0 2px 8px rgba(223, 184, 88, 0.4),
    0 0 16px rgba(223, 184, 88, 0.15);
  animation: clsMasteredShimmer 3s linear infinite;
}

@keyframes clsMasteredShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ─── Classes Phase — Responsive ──────────────────────────────────── */
@media (max-width: 768px) {

  .cls-detail-top {
    flex-direction: column;
    align-items: center;
  }

  .cls-detail-img {
    width: 100%;
    max-width: 280px;
    height: 180px;
  }

  .cls-prog-row {
    flex-direction: column;
    gap: 4px;
  }

  .cls-prog-label {
    width: auto;
  }

  .cls-detail-actions {
    flex-direction: column;
  }

  .cls-filter-bar {
    gap: 6px;
  }

  .cls-filter-bar select {
    font-size: 0.72rem;
    padding: 6px 26px 6px 10px;
  }
}

@media (max-width: 480px) {

  .cls-grid {
    grid-template-columns: 1fr;
  }

  .cls-card-img-wrap {
    height: 100px;
  }

  .cls-detail-modal {
    width: 96%;
    padding: 20px 16px;
  }
}

/* ─── Additional Class Card Badges ─────────────────────────────────── */
.cls-mastered-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1520;
  background: linear-gradient(
    135deg,
    var(--clr-gold) 0%,
    #edd78f 40%,
    var(--clr-gold) 60%,
    #f5e6a3 80%,
    var(--clr-gold) 100%
  );
  background-size: 200% 100%;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(223, 184, 88, 0.4), 0 0 16px rgba(223, 184, 88, 0.15);
  animation: clsMasteredShimmer 3s linear infinite;
}

.cls-level-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(74, 158, 255, 0.85);
  z-index: 5;
  box-shadow: 0 2px 6px rgba(74, 158, 255, 0.3);
}

/* IP display in header bar */
.cls-ip-display {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--clr-text-dim);
  padding: 0 8px;
  white-space: nowrap;
}
.cls-ip-display strong {
  color: var(--clr-gold);
}

/* Cart level label */
.cls-cart-level {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--clr-gold);
  margin-top: 2px;
}

/* Filter select styling */
.cls-filter-select {
  padding: 6px 30px 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s ease;
}
.cls-filter-select:focus {
  outline: none;
  border-color: var(--clr-gold);
}
.cls-filter-select option {
  background: #1a1520;
  color: var(--clr-text);
}

/* Requirement unmet card state */
.cls-card.req-unmet {
  opacity: 0.55;
  border-color: rgba(245, 158, 11, 0.3);
}
.cls-card.req-unmet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 158, 11, 0.05);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Remove button variant */
.cls-detail-unlock-btn.is-remove {
  background: rgba(224, 82, 82, 0.15);
  border-color: rgba(224, 82, 82, 0.4);
  color: #e05252;
}
.cls-detail-unlock-btn.is-remove:hover {
  background: rgba(224, 82, 82, 0.25);
}

/* Mastered state for level button */
.cls-detail-level-btn.mastered {
  background: linear-gradient(
    135deg,
    var(--clr-gold) 0%,
    #edd78f 50%,
    var(--clr-gold) 100%
  );
  color: #1a1520;
  font-weight: 700;
  border: none;
  cursor: default;
  opacity: 0.9;
}


/* ─── Elemental Affinity Picker ────────────────────────────────────── */

.elemental-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 5, 12, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.elemental-picker-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.elemental-picker-modal {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border-hover);
  border-top: 3px solid var(--clr-gold);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 480px;
  width: 100%;
  box-shadow:
    0 0 0 1px rgba(223, 184, 88, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
  opacity: 0;
}
.elemental-picker-overlay.open .elemental-picker-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.elemental-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.elemental-picker-header h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--clr-gold);
  margin: 0;
}
.elemental-picker-close {
  background: none;
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.elemental-picker-close:hover {
  border-color: var(--clr-gold-soft);
  color: var(--clr-gold);
}

.elemental-picker-desc {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin: 0 0 16px;
}

.elemental-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.elemental-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.elemental-picker-btn:hover:not([disabled]) {
  border-color: var(--clr-border-hover);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}
.elemental-picker-icon {
  font-size: 1.3rem;
}
.elemental-picker-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--clr-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Element-specific hover colors */
.elemental-picker-btn[data-element="fire"]:hover:not([disabled]) {
  border-color: #ef5350; background: rgba(239, 83, 80, 0.12);
}
.elemental-picker-btn[data-element="water"]:hover:not([disabled]) {
  border-color: #42a5f5; background: rgba(66, 165, 245, 0.12);
}
.elemental-picker-btn[data-element="wind"]:hover:not([disabled]) {
  border-color: #66bb6a; background: rgba(102, 187, 106, 0.12);
}
.elemental-picker-btn[data-element="earth"]:hover:not([disabled]) {
  border-color: #a1887f; background: rgba(161, 136, 127, 0.12);
}
.elemental-picker-btn[data-element="lightning"]:hover:not([disabled]) {
  border-color: #ffee58; background: rgba(255, 238, 88, 0.12);
}
.elemental-picker-btn[data-element="ice"]:hover:not([disabled]) {
  border-color: #80deea; background: rgba(128, 222, 234, 0.12);
}
.elemental-picker-btn[data-element="dark"]:hover:not([disabled]) {
  border-color: #ab47bc; background: rgba(171, 71, 188, 0.12);
}
.elemental-picker-btn[data-element="holy"]:hover:not([disabled]) {
  border-color: #fff176;
  background: rgba(255, 241, 118, 0.15);
  box-shadow: 0 4px 16px rgba(255, 241, 118, 0.2);
}

/* Already picked state */
.elemental-picker-btn.picked {
  opacity: 0.6;
  cursor: pointer;
  border-color: rgba(76, 175, 80, 0.4);
  background: rgba(76, 175, 80, 0.08);
}
.elemental-picker-btn.picked:hover {
  opacity: 1;
  border-color: #ef5350;
  background: rgba(239, 83, 80, 0.12);
  box-shadow: 0 4px 12px rgba(239, 83, 80, 0.2);
}
.elemental-picker-btn.picked:hover .elemental-picker-check {
  color: #ef5350;
}
.elemental-picker-btn.picked:hover .elemental-picker-check::after {
  content: " ✕";
}
.elemental-picker-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.7rem;
  color: #4caf50;
}

.elemental-picker-current {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #888;
  font-size: 0.8rem;
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════
   SKILLS PHASE
   Skill allocation UI — source box, grid, expertise, summary.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Skill Source Resolution Box ───────────────────────────────── */
.skill-source-box {
  position: relative;
  text-align: center;
  padding: 20px 28px;
  margin-bottom: 28px;
  background: rgba(20, 22, 36, 0.75);
  border: 2px solid rgba(223, 184, 88, 0.3);
  border-radius: 14px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(223, 184, 88, 0.06);
}

.skill-source-box::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.skill-source-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  text-shadow: 0 0 12px rgba(223, 184, 88, 0.25);
}

.skill-source-subtitle {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin: 0;
}




/* ─── 1.5. Skill Layout (grid + sidebar) ────────────────────────── */
.skill-layout {
  display: grid;
  grid-template-columns: 1fr 240px;   /* grid + "Skill Allocation" sidebar */
  gap: 18px;
  align-items: start;
}

@media (max-width: 768px) {
  .skill-layout {
    grid-template-columns: 1fr;
  }
}

/* The Spend-EXP skill picker reuses .skill-layout but renders NO sidebar
   (skill-picker-modal.js appends only the grid), so the reserved 240px sat
   empty and squeezed the grid into ~412px of a 720px modal — skill names
   collapsed to "Ath…", "Ma…". Give the modal its own single-column track;
   the builder's skills phase keeps the sidebar (owner report 2026-07-18). */
.skill-picker-modal .skill-layout {
  grid-template-columns: 1fr;
}

/* ─── Source Navigation Buttons ─────────────────────────────────── */
.skill-source-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.skill-source-prev,
.skill-source-next {
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.skill-source-prev:hover:not([disabled]),
.skill-source-next:hover:not([disabled]) {
  border-color: var(--clr-gold, #d4a843);
  color: var(--clr-gold, #d4a843);
  background: rgba(212, 168, 67, 0.1);
}
.skill-source-prev:disabled,
.skill-source-next:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ─── 2. Skills Grid (container for all categories) ────────────────── */
.skill-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ─── 3. Skill Category ───────────────────────────────────────────── */
.skill-category {
  margin-top: 18px;
  margin-bottom: 4px;
}

.skill-category:first-child {
  margin-top: 0;
}

.skill-category-header {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--clr-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(223, 184, 88, 0.12);
}

/* Sub-grid: the actual skill buttons */
.skill-category-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 900px) {
  .skill-category-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .skill-category-items {
    grid-template-columns: 1fr;
  }
}


/* ─── 4. Skill Button ──────────────────────────────────────────────── */
.skill-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 6px 8px;
  cursor: default;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
  overflow: visible;
}

.skill-btn:hover {
  border-color: var(--clr-border-hover);
  background: rgba(20, 22, 36, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Greyed-out / disabled when skill is not in the allowed list */
.skill-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.6);
}

/* Subtle glow when points are allocated */
.skill-btn.has-points {
  border-color: rgba(223, 184, 88, 0.3);
  box-shadow:
    0 0 14px rgba(223, 184, 88, 0.08),
    inset 0 0 20px rgba(223, 184, 88, 0.03);
}

.skill-btn.has-points .skill-value {
  color: var(--clr-gold);
  text-shadow: 0 0 8px rgba(223, 184, 88, 0.3);
}

/* ── Minus / Plus controls ── */
.skill-minus,
.skill-plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text-muted);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  user-select: none;
}

.skill-minus:hover,
.skill-plus:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--clr-text-bright);
  border-color: rgba(255, 255, 255, 0.2);
}

.skill-minus:active,
.skill-plus:active {
  transform: scale(0.9);
}

.skill-plus:hover {
  border-color: rgba(223, 184, 88, 0.35);
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.1);
}

.skill-minus:hover {
  border-color: rgba(239, 83, 80, 0.35);
  color: #ef5350;
  background: rgba(239, 83, 80, 0.1);
}

/* Disabled state for controls */
.skill-minus.disabled,
.skill-plus.disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* ── Name & Value (centre area) ──
   NOTE: the JS renders class="skill-center" (builder.js + skill-picker-
   modal.js); ".skill-info" was never emitted — the unstyled centre div
   caused the overflowing text / dead space (QA 2026-07-16). */
.skill-info,
.skill-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 6px;
  gap: 1px;
}

.skill-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

.skill-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-dim);
  transition: color 0.2s ease, text-shadow 0.2s ease;
  line-height: 1.2;
}


/* ─── 5. Expertise Arrow ──────────────────────────────────────────── */
.skill-expertise-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  font-size: 0.7rem;
  color: var(--clr-gold);
  background: rgba(20, 22, 36, 0.95);
  border: 1px solid rgba(223, 184, 88, 0.3);
  border-radius: 5px 5px 3px 3px;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--ease-out-expo);
  z-index: 10;
}

.skill-btn:hover .skill-expertise-arrow,
.skill-btn.has-points:hover .skill-expertise-arrow {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.skill-expertise-arrow:hover {
  background: rgba(223, 184, 88, 0.15);
  border-color: rgba(223, 184, 88, 0.5);
  color: var(--clr-text-bright);
  box-shadow: 0 2px 10px rgba(223, 184, 88, 0.2);
}

.skill-expertise-arrow::after {
  content: '▲';
}


/* ─── 6. Expertise Popup ──────────────────────────────────────────── */
.expertise-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.expertise-popup-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}

@keyframes skillFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.expertise-popup {
  position: relative;
  width: 90%;
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgb(18, 20, 35);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 16px;
  padding: 28px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(223, 184, 88, 0.08);
  animation: modalSlideIn 0.3s var(--ease-out-expo);
}

.expertise-popup::-webkit-scrollbar { width: 6px; }
.expertise-popup::-webkit-scrollbar-track { background: transparent; }
.expertise-popup::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* ── Popup header ── */
.expertise-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.expertise-popup-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  margin: 0;
}

.expertise-popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.expertise-popup-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--clr-text-bright);
}

/* ── Name input ── */
.expertise-name-input {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--clr-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.expertise-name-input::placeholder {
  color: var(--clr-text-dim);
}

.expertise-name-input:focus {
  border-color: rgba(223, 184, 88, 0.4);
  box-shadow: 0 0 12px rgba(223, 184, 88, 0.1);
}

/* ── Point allocation row ── */
.expertise-points-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.expertise-points-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}

.expertise-points-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-bright);
  min-width: 24px;
  text-align: center;
}

.expertise-points-cost {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  font-style: italic;
}

/* ── +/- buttons reuse skill-minus/skill-plus styles ── */
.expertise-minus,
.expertise-plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text-muted);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  user-select: none;
}

.expertise-minus:hover { border-color: rgba(239, 83, 80, 0.35); color: #ef5350; background: rgba(239, 83, 80, 0.1); }
.expertise-plus:hover  { border-color: rgba(223, 184, 88, 0.35); color: var(--clr-gold); background: rgba(223, 184, 88, 0.1); }
.expertise-minus:active,
.expertise-plus:active { transform: scale(0.9); }
.expertise-minus.disabled,
.expertise-plus.disabled { opacity: 0.25; pointer-events: none; }

/* ── Add button ── */
.expertise-add-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.08);
  border: 1px solid rgba(223, 184, 88, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.expertise-add-btn:hover {
  background: rgba(223, 184, 88, 0.15);
  border-color: rgba(223, 184, 88, 0.4);
  box-shadow: 0 4px 16px rgba(223, 184, 88, 0.1);
}

.expertise-add-btn:active {
  transform: scale(0.98);
}

.expertise-add-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Existing expertise entries list ── */
.expertise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.expertise-list-header {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.expertise-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.15s ease;
}

/* Item detail description (fetched from /item/{id}) */
.item-detail-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--clr-text-muted);
  margin: 10px 0 4px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 6px;
}
.item-detail-desc p { margin: 0 0 8px; }

/* Interlude actions explainer line */
.cls-interlude-hint {
  display: block;
  color: var(--clr-text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  margin: 4px 0 8px;
}

/* Cards the remaining EXP budget can't cover (QA 2026-07-16) */
.bt-card.bt-unaffordable,
.cls-card.cls-unaffordable {
  opacity: 0.45;
  filter: grayscale(0.6);
}

/* Racial trait expertise — free, locked (no +/−/remove controls) */
.expertise-entry.expertise-racial {
  background: rgba(200, 170, 90, 0.08);
  border-color: rgba(200, 170, 90, 0.35);
}
.expertise-entry.expertise-racial .expertise-entry-name {
  color: #d8bc74;
}

.expertise-entry:hover {
  background: rgba(255, 255, 255, 0.06);
}

.expertise-entry-name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text);
}

.expertise-entry-pts {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clr-gold);
  margin-left: 8px;
}

.expertise-entry-remove {
  margin-left: auto;
  padding-left: 12px;
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  cursor: pointer;
  transition: color 0.15s ease;
}

.expertise-entry-remove:hover {
  color: #ef5350;
}


/* ─── 7. Skill Summary ────────────────────────────────────────────── */
.skill-summary {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.skill-summary-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.skill-summary-group {
  margin-bottom: 12px;
}

.skill-summary-group:last-child {
  margin-bottom: 0;
}

.skill-summary-source {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.skill-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.skill-summary-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--clr-text);
}

.skill-summary-pts {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--clr-gold);
}

.skill-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(223, 184, 88, 0.15);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-bright);
}

.skill-summary-total-value {
  font-family: var(--font-mono);
  color: var(--clr-gold);
}


/* ─── 8. Skill Points Remaining ────────────────────────────────────── */
.skill-points-remaining {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

/* Has points left — green */
.skill-points-remaining.has-points {
  color: #7b9f6e;
  text-shadow: 0 0 8px rgba(123, 159, 110, 0.25);
}

/* Empty — red */
.skill-points-remaining.empty {
  color: #ef5350;
  text-shadow: 0 0 8px rgba(239, 83, 80, 0.25);
}

.skill-points-remaining-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clr-text-muted);
}

.skill-points-remaining-count {
  font-size: 1.15rem;
}


/* ─── Skills Responsive Tweaks ─────────────────────────────────────── */
@media (max-width: 768px) {
  .skill-source-box {
    padding: 16px 18px;
    margin-bottom: 20px;
  }

  .skill-source-title {
    font-size: 1.1rem;
  }

  .skill-btn {
    min-height: 40px;
    padding: 6px 10px;
  }

  .skill-btn.expanded .skill-minus,
  .skill-btn.expanded .skill-plus {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }

  .skill-summary {
    padding: 16px;
  }

  .expertise-popup {
    width: 95%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .skill-source-title {
    font-size: 0.95rem;
  }

  .skill-category-label {
    font-size: 0.8rem;
  }

  .skill-name {
    font-size: 0.72rem;
  }

  .expertise-popup {
    padding: 16px;
    border-radius: 12px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   ITEMS / EQUIPMENT PHASE
   Shopping UI — budget header, category tabs, item grid, cart, modals.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Budget Header ─────────────────────────────────────────────── */
.item-budget-box {
  position: relative;
  text-align: center;
  padding: 20px 28px;
  margin-bottom: 28px;
  background: rgba(20, 22, 36, 0.75);
  border: 2px solid rgba(223, 184, 88, 0.3);
  border-radius: 14px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(223, 184, 88, 0.06);
}

.item-budget-box::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.item-budget-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  text-shadow: 0 0 12px rgba(223, 184, 88, 0.25);
}

.item-budget-amount {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-gold);
  text-shadow: 0 0 18px rgba(223, 184, 88, 0.35);
  line-height: 1.2;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.item-budget-amount.over-budget {
  color: #ef5350;
  text-shadow: 0 0 18px rgba(239, 83, 80, 0.35);
}

.item-budget-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin: 2px 0 0;
}


/* ─── Game Mode Selection ──────────────────────────────────────────── */
.game-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}
.game-mode-card {
  background: rgba(10, 12, 24, 0.8);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.game-mode-card:hover {
  border-color: rgba(223, 184, 88, 0.6);
  transform: translateY(-3px);
}
.game-mode-card.selected {
  border-color: var(--clr-gold, #dfb858);
  box-shadow: 0 0 24px rgba(223, 184, 88, 0.25);
  background: rgba(223, 184, 88, 0.08);
}
.game-mode-card.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.game-mode-card.locked:hover {
  transform: none;
  border-color: rgba(223, 184, 88, 0.35);
}
.game-mode-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.game-mode-name {
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
  color: var(--clr-gold, #dfb858);
  margin-bottom: 6px;
}
.game-mode-desc {
  font-size: 0.82rem;
  color: var(--clr-text-muted, #8a87a0);
}
.game-mode-soon {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(223, 184, 88, 0.4);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--clr-gold, #dfb858);
}

/* ─── Mod hover tooltip (shared: builder shop + sheet shop) ────────── */
.mod-tip {
  display: none;
  position: fixed;
  z-index: 100001;
  max-width: 320px;
  background: rgb(14, 16, 30);
  border: 1px solid rgba(223, 184, 88, 0.4);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  font-family: var(--font-body);
}
.mod-tip-title {
  color: var(--clr-gold, #dfb858);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.mod-tip-tier {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted, #8a87a0);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.mod-tip-meta {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--clr-gold, #dfb858);
  margin-bottom: 8px;
}
.mod-tip-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--clr-text, #e8e6f0);
}
.mod-tip-none {
  color: var(--clr-text-muted, #8a87a0);
  font-style: italic;
}

/* Mod group headers in the sheet shop detail */
.shop-detail-mod-group {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-gold, #dfb858);
  margin: 12px 0 6px;
  opacity: 0.85;
}

/* ─── 1a. Aerial Staff Builder ─────────────────────────────────────── */
.staff-builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 32px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.staff-builder-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.staff-builder-modal {
  width: 92%;
  max-width: 640px;
  margin-bottom: 32px;
  background: rgb(18, 20, 35);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 16px;
  padding: 22px 26px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(223, 184, 88, 0.08);
}
.staff-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.staff-builder-header h2 {
  font-family: var(--font-display, serif);
  font-size: 1.25rem;
  color: var(--clr-gold, #dfb858);
  margin: 0;
}
.staff-builder-close {
  background: none;
  border: none;
  color: var(--clr-text-muted, #8a87a0);
  font-size: 1.1rem;
  cursor: pointer;
}
.staff-builder-sub {
  font-size: 0.85rem;
  color: var(--clr-text-muted, #8a87a0);
  margin: 0 0 18px;
  line-height: 1.5;
}
.staff-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.staff-model-card {
  background: rgba(10, 12, 24, 0.8);
  border: 1px solid rgba(223, 184, 88, 0.2);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.staff-model-card:hover {
  border-color: rgba(223, 184, 88, 0.6);
  transform: translateY(-2px);
}
.staff-model-name {
  font-family: var(--font-display, serif);
  color: var(--clr-text, #e8e6f0);
  margin-bottom: 4px;
}
.staff-model-cost {
  color: var(--clr-gold, #dfb858);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.staff-model-slots {
  font-size: 0.75rem;
  color: var(--clr-text-muted, #8a87a0);
  line-height: 1.5;
}
.staff-slot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.staff-slot-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 12px;
  align-items: center;
}
.staff-slot-label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--clr-gold, #dfb858);
  text-transform: uppercase;
}
.staff-slot-select {
  background: rgba(10, 12, 24, 0.9);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 8px;
  color: var(--clr-text, #e8e6f0);
  padding: 8px 10px;
  font-size: 0.85rem;
  outline: none;
}
.staff-slot-desc {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--clr-text-muted, #8a87a0);
  line-height: 1.45;
  min-height: 0;
}
.staff-builder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(223, 184, 88, 0.15);
  padding-top: 16px;
}
.staff-builder-back {
  background: none;
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 8px;
  color: var(--clr-text-muted, #8a87a0);
  padding: 8px 14px;
  cursor: pointer;
}
.staff-builder-total {
  font-family: var(--font-mono, monospace);
  color: var(--clr-text, #e8e6f0);
}
.staff-builder-budget {
  font-size: 0.75rem;
  color: var(--clr-text-muted, #8a87a0);
}
.staff-builder-budget.over {
  color: #e05c5c;
}
.staff-builder-confirm {
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.9), rgba(190, 150, 60, 0.9));
  border: none;
  border-radius: 8px;
  color: #14121f;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
}
.staff-builder-confirm:hover {
  filter: brightness(1.1);
}

/* ─── 1b. Item Search ──────────────────────────────────────────────── */
.item-search-wrap {
  margin-bottom: 14px;
}
.item-search-input {
  width: 100%;
  padding: 12px 18px;
  background: rgba(10, 12, 24, 0.8);
  border: 1px solid rgba(223, 184, 88, 0.2);
  border-radius: 10px;
  color: var(--clr-text, #e8e6f0);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.item-search-input::placeholder {
  color: var(--clr-text-muted, #8a87a0);
}
.item-search-input:focus {
  border-color: rgba(223, 184, 88, 0.55);
  box-shadow: 0 0 12px rgba(223, 184, 88, 0.12);
}

/* ─── 2. Category Tabs ─────────────────────────────────────────────── */
.item-category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.item-category-tabs::-webkit-scrollbar {
  display: none;
}

.item-tab {
  flex-shrink: 0;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.item-tab:hover {
  color: var(--clr-text-bright);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.item-tab.active {
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.1);
  border-color: rgba(223, 184, 88, 0.4);
  box-shadow:
    0 0 16px rgba(223, 184, 88, 0.12),
    inset 0 0 20px rgba(223, 184, 88, 0.04);
}


/* ─── 3. Items Layout (grid + cart sidebar) ────────────────────────── */
.item-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: start;
}


/* ─── 4. Item Grid ─────────────────────────────────────────────────── */
.item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}


/* ─── 5. Item Card ─────────────────────────────────────────────────── */
.item-card {
  position: relative;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s var(--ease-spring);
}

.item-card:hover {
  border-color: var(--clr-border-hover);
  transform: translateY(-3px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(223, 184, 88, 0.08);
}

.item-card:active {
  transform: translateY(-1px) scale(0.99);
}

/* Purchased state */
.item-card.in-cart {
  border-color: rgba(123, 159, 110, 0.5);
  box-shadow:
    0 0 16px rgba(123, 159, 110, 0.1),
    inset 0 0 24px rgba(123, 159, 110, 0.03);
}

.item-card.in-cart::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-green), var(--clr-green-deep));
  color: var(--clr-text-bright);
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(123, 159, 110, 0.4);
}

/* Card image container */
.item-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.item-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out-expo);
}

.item-card:hover .item-card-img img {
  transform: scale(1.06);
}

.item-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 12, 20, 0.85) 100%);
  pointer-events: none;
}

/* Card body */
.item-card-body {
  padding: 12px 14px 14px;
}

.item-card-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  line-height: 1.3;
}

.item-card-type {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--clr-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 8px;
}

.item-card-cost {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-gold);
  text-shadow: 0 0 8px rgba(223, 184, 88, 0.2);
}


/* ─── 6. Shopping Cart (sidebar) ───────────────────────────────────── */
.item-cart {
  position: sticky;
  top: 20px;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

.item-cart-header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.item-cart-header h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  margin: 0;
}

.item-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 184, 88, 0.2) transparent;
  /* Cap the list so a full cart scrolls internally instead of growing tall
     enough to push the Total below the fold. The cart starts partway down the
     page, so .item-cart's max-height alone wasn't enough (QA 2026-07-17). */
  max-height: 34vh;
}

.item-cart-items::-webkit-scrollbar {
  width: 5px;
}

.item-cart-items::-webkit-scrollbar-track {
  background: transparent;
}

.item-cart-items::-webkit-scrollbar-thumb {
  background: rgba(223, 184, 88, 0.2);
  border-radius: 3px;
}

.item-cart-items::-webkit-scrollbar-thumb:hover {
  background: rgba(223, 184, 88, 0.35);
}

/* Individual cart entry */
.item-cart-entry {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.item-cart-entry:hover {
  background: rgba(255, 255, 255, 0.06);
}

.item-cart-entry:last-child {
  margin-bottom: 0;
}

.item-cart-entry-info {
  flex: 1;
  min-width: 0;
}

.item-cart-entry-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-cart-entry-mods {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--clr-text-dim);
  margin-top: 3px;
  line-height: 1.4;
}

.item-cart-entry-cost {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clr-gold);
}

.item-cart-entry-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--clr-text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.item-cart-entry-remove:hover {
  background: rgba(239, 83, 80, 0.12);
  border-color: rgba(239, 83, 80, 0.3);
  color: #ef5350;
}

/* Cart total bar */
.item-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid rgba(223, 184, 88, 0.15);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-bright);
  /* Pin the running total to the bottom of the cart so a long list can never
     push it out of reach (QA 2026-07-17: "total gets obscured, you have to
     scroll the entire item list to find it"). */
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--clr-bg-card);
  z-index: 1;
}

.item-cart-total-value {
  font-family: var(--font-mono);
  color: var(--clr-gold);
}

/* Empty state */
.item-cart-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--clr-text-dim);
  font-style: italic;
}


/* ─── 7. Item Detail Modal ─────────────────────────────────────────── */
.item-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Above the navbar (1000/1001) and step bar — same layer as
     .bt-detail-overlay/.cls-detail-overlay so the modal isn't cut off */
  z-index: 4000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 32px;
  overflow-y: auto;
}

.item-detail-overlay.open {
  display: flex;
  animation: itemOverlayFadeIn 0.2s ease;
}

/* When item overlay is open, elevate scene-content above bottom-bar so the
   fixed-position overlay escapes the lower stacking context (z-index: 2),
   and set overflow: visible so the fixed overlay isn't clipped */
.builder-scene-content:has(.item-detail-overlay.open) {
  z-index: 30;
  overflow: visible;
}
.builder-scene:has(.item-detail-overlay.open) {
  overflow: visible;
}

/* Trello AKYJ9Mq9: the item-detail overlay is reparented to <body> when opened
   (builder.js openItemDetail) so it sits at z-index 4000 in the ROOT stacking
   context — a sibling of #builder-scene (position: fixed; z-index: 10). Because
   Aniela's dialogue bar is trapped inside #builder-scene's stacking context, NO
   z-index on .builder-bottom-bar can rise above the overlay; only #builder-scene
   itself competes with the overlay at the root. So, ONLY while a dismissable
   Aniela message is actually showing (body.aniela-blocking, toggled in aniela.js)
   AND an item overlay is open, lift the whole scene above the overlay so the
   "can't afford" rejection is readable and clickable-to-dismiss. The modal stays
   open underneath (mods preserved) and reappears the instant the message is
   dismissed. Scoped to a live message only, so during normal tall-modal browsing
   the overlay stays on top and the modal's sticky Add-to-Cart footer is never
   obstructed. */
body.aniela-blocking:has(.item-detail-overlay.open) #builder-scene {
  z-index: 4001;
}

@keyframes itemOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.item-detail-modal {
  position: relative;
  width: 90%;
  max-width: 520px;
  margin-bottom: 32px;
  flex-shrink: 0;
  /* Keep the modal inside the viewport and scroll its own body, so the
     Add to Cart bar (sticky, below) is always reachable. Tall items —
     Armor (Light) has 59 mod chips — used to push the button hundreds of
     px past the fold, which read as "blocked" and drove a zoom-out
     workaround (Trello 5H3vefdN). 64px = overlay padding-top + margin-bottom. */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: rgb(18, 20, 35);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 16px;
  padding: 0;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(223, 184, 88, 0.08);
  animation: itemModalSlideIn 0.3s var(--ease-out-expo);
}

@keyframes itemModalSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.item-detail-modal::-webkit-scrollbar {
  width: 6px;
}

.item-detail-modal::-webkit-scrollbar-track {
  background: transparent;
}

.item-detail-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* Modal header */
.item-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.item-detail-header h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  margin: 0;
  font-variant: small-caps;
}

.item-detail-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.item-detail-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--clr-text-bright);
}

/* Image zone / drop zone for mods */
.item-detail-img-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.item-detail-img-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drag-over state */
.item-detail-img-zone.drag-over {
  border-color: var(--clr-gold);
  border-style: dashed;
  border-width: 2px;
  box-shadow:
    inset 0 0 40px rgba(223, 184, 88, 0.1),
    0 0 20px rgba(223, 184, 88, 0.15);
}

.item-detail-img-zone.drag-over::after {
  content: 'Drop mod here';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 20, 0.6);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Info row (cost, type, subtype) */
.item-detail-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.item-detail-info-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.item-detail-info-tag.cost {
  color: var(--clr-gold);
  border-color: rgba(223, 184, 88, 0.2);
  background: rgba(223, 184, 88, 0.06);
  font-family: var(--font-mono);
  font-weight: 600;
}


/* Mods section */
.item-detail-mods-section {
  padding: 18px 24px;
}

.item-detail-mods-section h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}

.item-detail-mods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Actions bar (Add to Cart button) — pinned to the bottom of the modal's
   scroll viewport so it stays on screen no matter how many mod chips render */
.item-detail-actions {
  padding: 16px 24px 20px;
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: rgb(18, 20, 35);
  border-top: 1px solid rgba(223, 184, 88, 0.12);
  border-radius: 0 0 16px 16px;
}

.item-detail-add-btn {
  padding: 12px 32px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-gold);
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.15), rgba(223, 184, 88, 0.08));
  border: 2px solid rgba(223, 184, 88, 0.3);
  border-radius: 50px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s var(--ease-spring);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.item-detail-add-btn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(223, 184, 88, 0.5);
  box-shadow: 0 6px 28px rgba(223, 184, 88, 0.15);
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.22), rgba(223, 184, 88, 0.12));
}

.item-detail-add-btn:active {
  transform: translateY(0) scale(0.98);
}

.item-detail-add-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}


/* ─── 8. Mod Chips (draggable pills) ──────────────────────────────── */
.mod-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--clr-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  cursor: grab;
  user-select: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s var(--ease-spring);
}

.mod-chip:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.mod-chip:active {
  cursor: grabbing;
}

.mod-chip-cost {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-dim);
}

/* Applied state */
.mod-chip.applied {
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.1);
  border-color: rgba(223, 184, 88, 0.35);
  box-shadow: 0 0 12px rgba(223, 184, 88, 0.08);
}

.mod-chip.applied .mod-chip-cost {
  color: var(--clr-gold);
}

.mod-chip.tier-taken {
  opacity: 0.45;
  border-style: dashed;
}

.mod-chip.tier-taken:hover {
  opacity: 0.8;
}

/* ─── 9. Applied Mod Badge (on item image) ─────────────────────────── */
.item-mod-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--clr-gold);
  background: rgba(10, 12, 20, 0.85);
  border: 1px solid rgba(223, 184, 88, 0.3);
  border-radius: 20px;
  z-index: 4;
  text-shadow: 0 0 6px rgba(223, 184, 88, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.item-mod-badge + .item-mod-badge {
  left: auto;
  right: 8px;
}


/* ─── 10. Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .item-layout {
    grid-template-columns: 1fr;
  }

  .item-cart {
    position: static;
    max-height: none;
  }

  /* Stacked under the grid at this width, so cap the list height — otherwise
     a full cart grows unbounded and buries the total (QA 2026-07-17). */
  .item-cart-items {
    max-height: 45vh;
  }

  .item-budget-box {
    padding: 16px 18px;
    margin-bottom: 20px;
  }

  .item-budget-title {
    font-size: 1.1rem;
  }

  .item-budget-amount {
    font-size: 1.6rem;
  }

  .item-detail-modal {
    width: 95%;
    max-height: 90vh;
  }
}

@media (max-width: 480px) {
  .item-grid {
    grid-template-columns: 1fr;
  }

  .item-tab {
    padding: 6px 14px;
    font-size: 0.75rem;
  }

  .item-card-name {
    font-size: 0.8rem;
  }

  .item-detail-modal {
    border-radius: 12px;
    padding: 0;
  }

  .item-detail-header {
    padding: 16px 18px 12px;
  }

  .item-detail-mods-section {
    padding: 14px 18px;
  }

  .item-detail-actions {
    padding: 12px 18px 16px;
    /* match the modal's smaller corner radius at this breakpoint */
    border-radius: 0 0 12px 12px;
  }
}

/* ─── Short-viewport equipment phase ──────────────────────────────────
   On <=800px-tall screens the fixed scene chrome (navbar, Aniela dialogue,
   step bar) leaves only ~280px of scrollable content. The budget box,
   search field and category tabs alone consumed ~274px of that, pushing the
   item grid AND the cart entirely below the fold — the cart total was only
   reachable by scrolling to the very bottom (QA 2026-07-18, follow-up to the
   34vh cart cap). Compact that chrome so the cart is in view immediately. */
@media (max-height: 800px) {
  .item-budget-box {
    padding: 10px 20px;
    margin-bottom: 12px;
  }

  .item-budget-title {
    font-size: 1rem;
    margin: 0 0 2px;
  }

  .item-budget-amount {
    font-size: 1.4rem;
  }

  .item-budget-label {
    font-size: 0.75rem;
    margin: 0;
  }

  .item-search-wrap {
    margin-bottom: 8px;
  }

  .item-search-input {
    padding: 8px 14px;
  }

  .item-category-tabs {
    margin-bottom: 10px;
  }

  .item-tab {
    padding: 5px 14px;
  }

  /* the cart list also gets less room to play with here */
  .item-cart-items {
    max-height: 26vh;
  }

  .item-cart-header {
    padding: 10px 16px 8px;
  }
}

/* ─── Missing detail classes ──────────────────────────────────────── */
.item-detail-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  margin: 0;
  transition: color 0.2s ease;
}

.item-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.item-detail-sidebar {
  display: flex;
  flex-direction: column;
}

.item-detail-mods-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.mod-chip-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
}

.item-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}

.item-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--clr-text-muted);
  font-style: italic;
  padding: 40px 0;
}

.item-cart-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .item-detail-body {
    grid-template-columns: 1fr;
  }
}

.item-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
}

/* ─── Mod Group Headers ────────────────────────────────────────────── */
.mod-group-header {
  width: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,215,0,0.7);
  margin: 12px 0 4px 0;
  padding: 0 4px 4px;
  border-bottom: 1px solid rgba(255,215,0,0.15);
}

.mod-group-header:first-child {
  margin-top: 0;
}

/* ─── Sub-item purchases (materials/herbs/seeds inside catalog items) ──
   Shared by the builder equipment modal and the sheet Item Shop — see
   js/sub-items.js */
.subitem-section {
  margin-top: 12px;
}
.subitem-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-accent, #ffd700);
  margin-bottom: 4px;
}
.subitem-section-hint {
  font-weight: normal;
  font-size: 0.7rem;
  opacity: 0.7;
}
.subitem-note {
  font-size: 0.75rem;
  color: var(--clr-text-dim, rgba(255,255,255,0.6));
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  line-height: 1.4;
}
.subitem-note.subitem-blocked {
  color: #ff9d9d;
  background: rgba(255,80,80,0.08);
  border-color: rgba(255,80,80,0.25);
}
.subitem-group {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,215,0,0.7);
  margin: 12px 0 4px 0;
  padding: 0 4px 4px;
  border-bottom: 1px solid rgba(255,215,0,0.15);
}
.subitem-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.8rem;
}
.subitem-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.subitem-name {
  color: var(--clr-text, #eee);
  font-weight: 600;
  cursor: help;
}
.subitem-unit {
  font-size: 0.68rem;
  color: var(--clr-text-dim, rgba(255,255,255,0.5));
}
.subitem-cost {
  color: var(--clr-accent, #ffd700);
  font-weight: 600;
  white-space: nowrap;
}
.subitem-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}
.subitem-qty-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--clr-text, #eee);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.subitem-qty-btn:hover {
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.4);
}
.subitem-qty-val {
  min-width: 18px;
  text-align: center;
  font-weight: 600;
}
.subitem-buy {
  border: 1px solid rgba(255,215,0,0.45);
  background: rgba(255,215,0,0.1);
  color: var(--clr-accent, #ffd700);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.subitem-buy:hover {
  background: rgba(255,215,0,0.22);
}

/* ─── Raw material units widget (js/sub-items.js rawSectionHTML) ───────
   Freeform-name bulk purchase at the flat 2u/Clim rate. Shown under the
   individual-items list on every material catalog in both shops. */
.rawunit-section {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,215,0,0.2);
}
.rawunit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 4px;
}
.rawunit-cat {
  flex: 0 0 auto;
  min-width: 96px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--clr-text, #eee);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 0.78rem;
}
.rawunit-name {
  flex: 1 1 120px;
  min-width: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--clr-text, #eee);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.78rem;
}
.rawunit-name:focus,
.rawunit-cat:focus {
  outline: none;
  border-color: rgba(255,215,0,0.5);
}
.rawunit-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rawunit-qty-val,
.item-detail-qty-val,
.shop-detail-qty-val {
  width: 54px;
  text-align: center;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--clr-text, #eee);
  border-radius: 4px;
  padding: 3px 4px;
  font-size: 0.78rem;
  -moz-appearance: textfield;
}
.rawunit-cost {
  color: var(--clr-accent, #ffd700);
  font-weight: 700;
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}
.rawunit-buy { /* inherits .subitem-buy look */ }

/* ─── Quantity stepper for stackable consumables (both shops) ──────── */
.item-detail-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
.shop-detail-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.shop-detail-qty-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-dim, rgba(255,255,255,0.6));
}

/* ─── Material bonus allocation picker (js/material-bonus.js) ──────────
   Shown at purchase time in both shops when a material's stat bonus
   placement is the buyer's choice (weapon +1 / +2/+1, armor picks, …) */
.matbonus-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000; /* above both shops' modals, below .mod-tip (100001) */
}
.matbonus-box {
  background: var(--clr-bg-panel, #16131f);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 10px;
  padding: 18px 20px;
  width: min(440px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.matbonus-title {
  font-weight: 700;
  color: var(--clr-accent, #ffd700);
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.matbonus-item {
  font-size: 0.75rem;
  color: var(--clr-text-dim, rgba(255,255,255,0.6));
  margin-bottom: 12px;
}
.matbonus-side-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,215,0,0.7);
  margin: 10px 0 4px;
}
.matbonus-group {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.matbonus-opt {
  flex: 1;
  min-width: 150px;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  color: var(--clr-text, #eee);
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
}
.matbonus-opt:hover {
  border-color: rgba(255,215,0,0.5);
}
.matbonus-opt.selected {
  border-color: var(--clr-accent, #ffd700);
  background: rgba(255,215,0,0.14);
  color: var(--clr-accent, #ffd700);
  font-weight: 600;
}
.matbonus-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.matbonus-cancel,
.matbonus-confirm {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.matbonus-cancel {
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: var(--clr-text-dim, rgba(255,255,255,0.6));
}
.matbonus-confirm {
  border: 1px solid rgba(120,220,120,0.5);
  background: rgba(120,220,120,0.12);
  color: #9ee89e;
}
.matbonus-confirm:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── Mod Chip Tier Badge ──────────────────────────────────────────── */
.mod-chip-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 4px;
}
.mod-chip-tier.tier-a {
  background: rgba(100,200,100,0.25);
  color: #8f8;
  border: 1px solid rgba(100,200,100,0.4);
}
.mod-chip-tier.tier-b {
  background: rgba(100,150,255,0.25);
  color: #88f;
  border: 1px solid rgba(100,150,255,0.4);
}
.mod-chip-tier.tier-f {
  background: rgba(255,160,60,0.25);
  color: #fc8;
  border: 1px solid rgba(255,160,60,0.4);
}
.mod-chip-tier.tier-c {
  background: rgba(200,100,255,0.25);
  color: #d9f;
  border: 1px solid rgba(200,100,255,0.4);
}
.mod-chip-tier.tier-m {
  background: rgba(223,184,88,0.25);
  color: var(--clr-gold, #dfb858);
  border: 1px solid rgba(223,184,88,0.5);
}

/* Blocked mod chips in the sheet shop (tier/slot limit reached) */
.shop-detail-mod.blocked {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* ─── Mod Chip Polarity Indicator ──────────────────────────────────── */
.mod-chip-polarity {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ─── Item Card Mod Count Badge ────────────────────────────────────── */
.item-card-mod-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.7);
  color: #ffd700;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(255,215,0,0.3);
}

/* ══════════════════════════════════════════════════════════════════════
   CHARACTER SHEET — Review Phase
   Premium dark-fantasy character sheet with glassmorphic panels,
   shield-shaped stat blocks, ornamental portrait frame, and
   responsive grid layouts.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Sheet Container ───────────────────────────────────────────────── */
.cs-sheet {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  animation: csSheetFadeIn 0.6s var(--ease-out-expo) both;
}

@keyframes csSheetFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ─── Top Row: Portrait + Identity + Stats ──────────────────────────── */
.cs-top-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}


/* ─── Portrait Frame ────────────────────────────────────────────────── */
.cs-portrait-frame {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-portrait-area {
  position: relative;
  width: 220px;
  height: 280px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  background: var(--clr-bg-deep);
  border: 2px solid var(--clr-gold-soft);
  box-shadow:
    0 0 0 1px rgba(223, 184, 88, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 8px 32px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-portrait-area:hover {
  border-color: var(--clr-gold);
  box-shadow:
    0 0 0 1px rgba(223, 184, 88, 0.15),
    0 0 24px rgba(223, 184, 88, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Ornamental corner accents on the portrait */
.cs-portrait-area::before,
.cs-portrait-area::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--clr-gold);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.cs-portrait-area::before {
  top: 4px;
  left: 4px;
  border-width: 2px 0 0 2px;
  border-radius: 2px 0 0 0;
}

.cs-portrait-area::after {
  bottom: 4px;
  right: 4px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 2px 0;
}

.cs-portrait-area:hover::before,
.cs-portrait-area:hover::after {
  opacity: 1;
}

#cs-portrait-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--clr-text-muted);
  z-index: 2;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cs-portrait-area:hover .cs-portrait-placeholder {
  color: var(--clr-gold-soft);
}

.cs-portrait-icon {
  font-size: 2rem;
  opacity: 0.7;
}

.cs-portrait-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ─── Portrait Controls ─────────────────────────────────────────────── */
.cs-portrait-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.cs-portrait-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--clr-border-hover);
  background: var(--clr-bg-dark);
  color: var(--clr-text);
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.cs-portrait-btn:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.08);
  box-shadow: 0 0 10px rgba(223, 184, 88, 0.15);
}

.cs-portrait-btn:active {
  transform: scale(0.92);
}

.cs-portrait-btn-change {
  border-color: var(--clr-gold-soft);
}


/* ─── Identity + Stats Panel ────────────────────────────────────────── */
.cs-identity-stats {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-name-input {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--clr-gold);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--clr-border);
  padding: 6px 2px 8px;
  width: 100%;
  outline: none;
  transition: border-color 0.3s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}

.cs-name-input::placeholder {
  color: var(--clr-text-dim);
  font-style: italic;
}

.cs-name-input:focus {
  border-bottom-color: var(--clr-gold);
  color: var(--clr-text-bright);
}

.cs-race-line {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.03em;
  min-height: 1.2em;
}

.cs-identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cs-gender-select {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cs-gender-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-dim);
}

.cs-gender-options {
  display: flex;
  gap: 4px;
}

.cs-gender-btn {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-gender-btn:hover {
  border-color: var(--clr-border-hover);
  color: var(--clr-text);
}

.cs-gender-btn.active {
  background: rgba(223, 184, 88, 0.12);
  border-color: var(--clr-gold-soft);
  color: var(--clr-gold);
  font-weight: 600;
}

/* ─── Gender Collapse ───────────────────────────────────────────────── */
.cs-gender-chosen {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-gold);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.cs-gender-chosen:hover {
  background: rgba(223, 184, 88, 0.1);
  text-decoration: underline;
}

.cs-gender-options.collapsed {
  display: none;
}

/* ─── Stat Groups ───────────────────────────────────────────────────── */
.cs-stat-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-stat-group-title {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--clr-gold-soft);
  opacity: 0.7;
}

.cs-stat-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ─── Shield-Shaped Stat Block ──────────────────────────────────────── */
.cs-stat-block {
  width: 70px;
  height: 80px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  cursor: help;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Shield background layer — simulates a gold border via nested clip-path */
.cs-stat-block::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, var(--clr-gold-soft) 0%, rgba(223, 184, 88, 0.3) 100%);
  z-index: 0;
}

/* Inner fill */
.cs-stat-block::after {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(170deg, rgba(25, 28, 50, 0.95) 0%, var(--clr-bg-deep) 100%);
  z-index: 1;
}

.cs-stat-block:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.1);
}

.cs-stat-value {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-text-bright);
  line-height: 1;
  position: relative;
  z-index: 2;
}

.cs-stat-label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

/* Race bonus highlight */
.cs-stat-block.has-bonus .cs-stat-value {
  color: var(--clr-gold);
  text-shadow: 0 0 8px rgba(223, 184, 88, 0.35);
}

.cs-stat-block.has-bonus::before {
  background: linear-gradient(160deg, var(--clr-gold) 0%, rgba(223, 184, 88, 0.5) 100%);
}


/* ─── Derived Stats Bar ─────────────────────────────────────────────── */
.cs-derived-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  background: var(--clr-bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.cs-derived-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cs-derived-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: transform 0.2s ease;
}

.cs-derived-stat:hover {
  transform: translateY(-1px);
  background: rgba(223, 184, 88, 0.06);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(223, 184, 88, 0.08);
}

.cs-derived-icon {
  font-size: 0.95rem;
  opacity: 0.8;
  flex-shrink: 0;
}

.cs-derived-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-bright);
  min-width: 1.4em;
}

.cs-derived-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Thin separator between derived stats */
.cs-derived-stat + .cs-derived-stat {
  padding-left: 18px;
  border-left: 1px solid var(--clr-border);
}


/* ─── Soul Core + EXP Bar ──────────────────────────────────────────── */
.cs-sc-exp-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  background: var(--clr-bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.cs-sc-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 18px;
  border-right: 1px solid var(--clr-border);
  min-width: 80px;
}

.cs-sc-icon {
  font-size: 1.2rem;
  color: var(--clr-gold);
  text-shadow: 0 0 8px rgba(223, 184, 88, 0.4);
}

.cs-sc-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-gold);
  line-height: 1;
  text-shadow: 0 0 12px rgba(223, 184, 88, 0.3);
}

.cs-sc-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-gold-soft);
}

.cs-exp-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cs-exp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.cs-exp-item-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
}

.cs-exp-item-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-text-dim);
}

.cs-exp-editable {
  cursor: pointer;
  border-bottom: 1px dashed rgba(223, 184, 88, 0.3);
  padding-bottom: 1px;
  transition: all 0.15s ease;
}
.cs-exp-editable:hover {
  color: var(--clr-gold);
  border-bottom-color: var(--clr-gold);
}

.cs-exp-divider {
  color: var(--clr-text-muted);
  opacity: 0.3;
  font-size: 0.7rem;
}

.cs-exp-adjust {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}

.cs-exp-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text-dim);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.cs-exp-btn:hover {
  border-color: var(--clr-gold-soft);
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.08);
}
.cs-exp-btn:active {
  transform: scale(0.92);
}

.cs-exp-inline-input {
  width: 70px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--clr-gold-soft);
  border-radius: 4px;
  color: var(--clr-gold);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 2px 4px;
  outline: none;
}
.cs-exp-inline-input:focus {
  box-shadow: 0 0 8px rgba(223, 184, 88, 0.3);
}

/* Hide spin buttons on number input */
.cs-exp-inline-input::-webkit-outer-spin-button,
.cs-exp-inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cs-exp-inline-input[type=number] {
  -moz-appearance: textfield;
}


/* ─── Two-Column Layout ─────────────────────────────────────────────── */
.cs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}


/* ─── Glassmorphism Section Card ────────────────────────────────────── */
.cs-section {
  background: var(--clr-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-gold-soft);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 6px 24px rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-section:hover {
  border-color: var(--clr-border-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 28px rgba(0, 0, 0, 0.35);
}

.cs-section-full {
  width: 100%;
}

.cs-section-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--clr-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Gold accent dot before section title */
.cs-section-title::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-gold);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(223, 184, 88, 0.4);
}


/* ─── List Items (Classes / Breakthroughs) ──────────────────────────── */
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.cs-list-item:hover {
  background: rgba(223, 184, 88, 0.05);
  border-color: var(--clr-border);
  box-shadow: 0 0 12px rgba(223, 184, 88, 0.06);
}

.cs-list-item:active {
  transform: scale(0.99);
}

/* Subtle left accent on hover */
.cs-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 2px;
  background: var(--clr-gold);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cs-list-item:hover::before {
  opacity: 1;
}

.cs-list-item-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--clr-text-bright);
  letter-spacing: 0.02em;
}

.cs-list-item-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  line-height: 1.4;
}


/* ─── Skills Grid ───────────────────────────────────────────────────── */
.cs-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cs-skill-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  background: rgba(13, 15, 26, 0.3);
}

.cs-skill-cell:hover {
  background: rgba(223, 184, 88, 0.04);
  border-color: var(--clr-border);
}

.cs-skill-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--clr-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs-skill-value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--clr-text-bright);
  font-weight: 600;
  min-width: 2em;
  text-align: right;
}

/* Roll value: skill points + governing sub-stat (Trello K2l3IkzB). The
   points stay the primary editable number; this is the derived total. */
.cs-skill-total {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--clr-gold);
  opacity: 0.85;
  margin-top: 2px;
}

.cs-skill-total-stat {
  color: var(--clr-text-dim, var(--clr-text));
  opacity: 0.75;
}

.cs-skill-expertise {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 10px;
  border-left: 1px solid var(--clr-border);
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
}


/* ─── Equipment List ────────────────────────────────────────────────── */
.cs-equip-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-equip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(223, 184, 88, 0.07);
  transition: background 0.2s ease;
}

.cs-equip-item:last-child {
  border-bottom: none;
}

.cs-equip-item:hover {
  background: rgba(223, 184, 88, 0.03);
}

.cs-equip-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--clr-text-bright);
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 0;
}

.cs-equip-mods {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  flex: 1;
  min-width: 0;
  text-align: center;
}

.cs-equip-cost {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clr-teal);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}


/* ─── Budget Tag ────────────────────────────────────────────────────── */
.cs-budget-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--clr-teal);
  background: rgba(91, 181, 166, 0.1);
  border: 1px solid rgba(91, 181, 166, 0.25);
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
}


/* ─── Tooltip Overlay & Modal ───────────────────────────────────────── */
.cs-tooltip-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 5, 12, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cs-tooltip-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cs-tooltip-modal {
  max-width: 480px;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--clr-bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--clr-border-hover);
  border-top: 2px solid var(--clr-gold);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(223, 184, 88, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(223, 184, 88, 0.05);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
  opacity: 0;
}

.cs-tooltip-overlay.open .cs-tooltip-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Custom scrollbar inside tooltip */
.cs-tooltip-modal::-webkit-scrollbar {
  width: 5px;
}

.cs-tooltip-modal::-webkit-scrollbar-track {
  background: transparent;
}

.cs-tooltip-modal::-webkit-scrollbar-thumb {
  background: var(--clr-border-hover);
  border-radius: 4px;
}

.cs-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: 0;
  background: var(--clr-bg-card);
  z-index: 1;
  border-radius: 12px 12px 0 0;
}

.cs-tooltip-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--clr-gold);
  margin: 0;
  letter-spacing: 0.04em;
}

.cs-tooltip-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cs-tooltip-close:hover {
  border-color: var(--clr-gold-soft);
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.08);
}

.cs-tooltip-body {
  padding: 16px 20px 20px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text);
  line-height: 1.65;
}

.cs-tooltip-body p {
  margin: 0 0 10px;
}

.cs-tooltip-body p:last-child {
  margin-bottom: 0;
}

.cs-tooltip-body strong {
  color: var(--clr-text-bright);
  font-weight: 600;
}

.cs-tooltip-body em {
  color: var(--clr-gold-soft);
  font-style: italic;
}


/* ─── Responsive: Tablet (≤768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  .cs-sheet {
    padding: 16px;
    gap: 16px;
  }

  .cs-top-row {
    flex-direction: column;
    align-items: center;
  }

  .cs-portrait-frame {
    width: 180px;
  }

  .cs-portrait-area {
    width: 180px;
    height: 230px;
  }

  .cs-identity-stats {
    width: 100%;
  }

  .cs-name-input {
    font-size: 1.3rem;
    text-align: center;
  }

  .cs-race-line {
    text-align: center;
  }

  .cs-stat-blocks {
    justify-content: center;
  }

  .cs-stat-block {
    width: 60px;
    height: 70px;
  }

  .cs-stat-value {
    font-size: 1.1rem;
  }

  .cs-stat-label {
    font-size: 0.5rem;
  }

  .cs-two-col {
    grid-template-columns: 1fr;
  }

  .cs-skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Derived stats — remove separators on small screens, wrap freely */
  .cs-derived-stat + .cs-derived-stat {
    border-left: none;
    padding-left: 0;
  }
}


/* ─── Responsive: Mobile (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .cs-sheet {
    padding: 12px;
    gap: 14px;
  }

  .cs-portrait-frame {
    width: 160px;
  }

  .cs-portrait-area {
    width: 160px;
    height: 200px;
  }

  .cs-name-input {
    font-size: 1.1rem;
  }

  .cs-stat-block {
    width: 54px;
    height: 62px;
  }

  .cs-stat-value {
    font-size: 0.95rem;
  }

  .cs-stat-label {
    font-size: 0.45rem;
  }

  .cs-stat-blocks {
    gap: 8px;
  }

  .cs-skills-grid {
    grid-template-columns: 1fr;
  }

  .cs-tooltip-modal {
    max-height: 80vh;
    border-radius: 10px;
  }

  .cs-section {
    padding: 14px 14px;
  }

  .cs-derived-bar {
    padding: 10px 14px;
    gap: 8px 12px;
  }
}

/* ─── CS: Missing Inner Element Styles ─────────────────────────────── */

.cs-mastered-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--clr-gold);
  background: rgba(223, 184, 88, 0.12);
  border: 1px solid rgba(223, 184, 88, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.cs-empty {
  color: var(--clr-text-dim);
  font-style: italic;
  font-size: 0.85rem;
  padding: 8px 0;
}

.cs-equip-name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cs-expertise-tag {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--clr-teal);
  background: rgba(91, 181, 166, 0.08);
  border: 1px solid rgba(91, 181, 166, 0.2);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 4px;
  margin-top: 4px;
}

.cs-skill-expertise {
  margin-top: 2px;
}

/* ─── CS: Tooltip Body Styles ──────────────────────────────────────── */

.cs-tip-row {
  padding: 4px 0;
  font-size: 0.88rem;
  color: var(--clr-text);
  line-height: 1.5;
}

.cs-tip-row strong {
  color: var(--clr-gold-soft);
}

.cs-tip-desc {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(223, 184, 88, 0.25);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}
/* Class/breakthrough/equipment descriptions are injected as raw API HTML whose
   paragraphs are <p> tags; the global `* { margin: 0 }` reset (base.css) would
   otherwise stack them with no gap into a wall of text ([EJAYZ4pK]). Restore
   paragraph spacing, matching .item-detail-desc p. */
.cs-tip-desc p { margin: 0 0 8px; }
.cs-tip-desc p:last-child { margin-bottom: 0; }

.cs-tip-indent {
  padding-left: 12px;
  color: var(--clr-teal);
}

/* ─── Portrait Locked State ────────────────────────────────────────── */

.cs-portrait-locked {
  justify-content: center;
  gap: 8px;
}

.cs-portrait-locked-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-dim);
}

.cs-portrait-btn-commit {
  background: rgba(91, 181, 166, 0.15) !important;
  border-color: var(--clr-teal) !important;
  color: var(--clr-teal) !important;
  font-weight: 700;
}
.cs-portrait-btn-commit:hover {
  background: rgba(91, 181, 166, 0.3) !important;
  box-shadow: 0 0 12px rgba(91, 181, 166, 0.3);
}

/* ─── Rich Tooltip Inner Styles ────────────────────────────────────── */

.cs-tip-loading {
  color: var(--clr-text-muted);
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

.cs-tip-class-img,
.cs-tip-item-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--clr-border);
}

.cs-tip-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cs-tip-diff {
  font-size: 0.75rem;
  color: var(--clr-gold-soft);
  letter-spacing: 0.1em;
}

.cs-tip-req {
  color: #e8a040;
  font-size: 0.82rem;
  padding: 6px 10px;
  background: rgba(232, 160, 64, 0.06);
  border: 1px solid rgba(232, 160, 64, 0.15);
  border-radius: 6px;
  margin: 4px 0;
}

/* ─── Tooltip Progression Table ────────────────────────────────────── */

.cs-tip-prog-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-gold-soft);
  margin-top: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 4px;
}

.cs-tip-prog {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-tip-prog-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  transition: background 0.15s ease;
}

.cs-tip-prog-row.unlocked {
  background: rgba(91, 181, 166, 0.06);
}
.cs-tip-prog-row.locked {
  opacity: 0.5;
}

.cs-tip-prog-lv {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--clr-gold-soft);
  min-width: 32px;
  flex-shrink: 0;
}

.cs-tip-prog-label {
  color: var(--clr-text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.cs-tip-prog-value {
  color: var(--clr-text);
  flex: 1;
}

.cs-tip-prog-row.unlocked .cs-tip-prog-value {
  color: var(--clr-teal);
}

/* ─── Complete Character Button ────────────────────────────────────── */

.cs-complete-section {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.cs-complete-btn {
  font-size: 1.05rem;
  padding: 12px 36px;
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.15), rgba(223, 184, 88, 0.05));
  border: 2px solid var(--clr-gold);
  color: var(--clr-gold);
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cs-complete-btn:hover {
  background: linear-gradient(135deg, rgba(223, 184, 88, 0.25), rgba(223, 184, 88, 0.1));
  box-shadow: 0 0 24px rgba(223, 184, 88, 0.2), 0 0 0 1px rgba(223, 184, 88, 0.15);
  transform: translateY(-1px);
}

.cs-complete-btn-icon {
  margin-right: 8px;
}

/* ─── Completion Banner ────────────────────────────────────────────── */

.cs-complete-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(91, 181, 166, 0.12), rgba(223, 184, 88, 0.08));
  border: 1px solid var(--clr-teal);
  border-radius: 10px;
  animation: csBannerIn 0.5s var(--ease-out-expo) both;
}

.cs-complete-icon {
  font-size: 1.3rem;
  color: var(--clr-gold);
}

.cs-complete-text {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--clr-teal);
  letter-spacing: 0.04em;
}

@keyframes csBannerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Heart/Soul Stat Pick Modal ───────────────────────────────────── */

.stat-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5, 5, 12, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.stat-pick-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.stat-pick-modal {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border-hover);
  border-top: 3px solid var(--clr-gold);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(223, 184, 88, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(223, 184, 88, 0.08);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
  opacity: 0;
}
.stat-pick-overlay.open .stat-pick-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.stat-pick-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--clr-gold);
  margin: 0 0 8px;
  letter-spacing: 0.03em;
}

.stat-pick-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.stat-pick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.stat-pick-btn {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.stat-pick-btn:hover {
  background: rgba(223, 184, 88, 0.12);
  border-color: var(--clr-gold-soft);
  color: var(--clr-gold);
  box-shadow: 0 0 16px rgba(223, 184, 88, 0.12);
  transform: translateY(-1px);
}

.stat-pick-btn:active {
  transform: translateY(0);
}

.stat-pick-btn:disabled,
.stat-pick-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Proficiency pick modal: already-owned options + skip control */
.stat-pick-btn.prof-owned {
  text-decoration: line-through;
  opacity: 0.4;
}
.stat-pick-btn.prof-skip {
  border-style: dashed;
  color: var(--clr-text-mid);
  font-style: italic;
}

/* ── Proficiency display panel (review + sheet + vault) ──────────────── */
.prof-panel {
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.02);
  margin: 12px 0;
}
.prof-panel-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--clr-gold, #dfb858);
  margin: 0 0 10px;
}
.prof-pending-banner {
  font-size: 0.85rem;
  color: #e6b566;
  background: rgba(223, 184, 88, 0.10);
  border: 1px solid rgba(223, 184, 88, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.prof-summary { margin-bottom: 12px; }
.prof-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.prof-chip-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-mid);
  min-width: 68px;
}
.prof-chip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text);
}
.prof-chip-armor   { border-color: rgba(120, 170, 220, 0.5); color: #9dc4ea; }
.prof-chip-weapon  { border-color: rgba(223, 184, 88, 0.5);  color: var(--clr-gold, #dfb858); }
.prof-chip-blanket { border-color: rgba(200, 120, 220, 0.5); color: #cf9fe0; font-style: italic; }
.prof-sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--clr-border);
  padding-top: 10px;
}
.prof-source-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 3px;
}
.prof-source-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
}
.prof-granted { color: var(--clr-text-mid); }
.prof-picked  { color: #7fc98a; }
.prof-pending-pick {
  color: #e6b566;
  font-weight: 600;
}
.prof-source-note {
  font-size: 0.72rem;
  color: var(--clr-text-mid);
  font-style: italic;
  margin-bottom: 2px;
}
.prof-resolve-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e6b566;
  background: rgba(223, 184, 88, 0.10);
  border: 1px solid rgba(223, 184, 88, 0.4);
  border-radius: 6px;
  padding: 2px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.prof-resolve-btn:hover {
  background: rgba(223, 184, 88, 0.2);
  border-color: var(--clr-gold, #dfb858);
}

/* ── Proficiency chooser modal (resolve a pending pick) ──────────────── */
.prof-chooser-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100002;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}
.prof-chooser-overlay.open { display: flex; }
.prof-chooser-box {
  background: var(--clr-bg-panel, #1a1c22);
  border: 1px solid var(--clr-gold-soft, #8a6d2a);
  border-radius: 12px;
  padding: 22px 26px;
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.prof-chooser-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--clr-gold, #dfb858);
  margin-bottom: 4px;
}
.prof-chooser-desc {
  font-size: 0.82rem;
  color: var(--clr-text-mid);
  margin-bottom: 14px;
}
.prof-chooser-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.prof-auto-intro {
  font-size: 0.8rem;
  color: var(--clr-text-mid);
  margin: 0 0 4px;
}

/* ── Skill Point Allocation Picker ───────────────────────────────── */
.skill-pick-header {
  text-align: center;
  margin-bottom: 12px;
}
.skill-pick-remaining {
  font-size: 0.82rem;
  color: var(--clr-text-mid);
}
.skill-pick-remaining strong {
  color: var(--clr-gold);
}
.skill-pick-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.skill-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}
.skill-pick-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.skill-pick-name {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-text);
}
.skill-pick-existing {
  font-size: 0.68rem;
  color: var(--clr-text-dim);
  min-width: 24px;
  text-align: right;
}
.skill-pick-value {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--clr-gold);
}
.skill-pick-minus,
.skill-pick-plus {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  padding: 0;
  line-height: 1;
}
.skill-pick-minus:hover:not(:disabled),
.skill-pick-plus:hover:not(:disabled) {
  border-color: var(--clr-gold-soft);
  background: rgba(223, 184, 88, 0.1);
  color: var(--clr-gold);
}
.skill-pick-minus:disabled,
.skill-pick-plus:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.skill-pick-confirm {
  min-width: 180px;
}

/* ── Expertise exchange buttons ── */
.skill-pick-exp-sep {
  color: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  margin: 0 2px;
}
.skill-pick-exp-value {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
  font-size: 0.72rem;
  color: #81d4fa;
}
.skill-pick-exp-minus,
.skill-pick-exp-plus {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(129, 212, 250, 0.2);
  background: rgba(129, 212, 250, 0.06);
  color: #81d4fa;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  padding: 0;
  line-height: 1;
}
.skill-pick-exp-minus:hover:not(:disabled),
.skill-pick-exp-plus:hover:not(:disabled) {
  border-color: rgba(129, 212, 250, 0.5);
  background: rgba(129, 212, 250, 0.15);
}
.skill-pick-exp-minus:disabled,
.skill-pick-exp-plus:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ── Skill Picker Modal Overlay ──────────────────────────────────── */
.skill-picker-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.skill-picker-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.skill-picker-modal {
  background: var(--clr-surface, #0f1225);
  border: 1px solid var(--clr-border, rgba(255,255,255,0.06));
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  width: 90vw;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 24px 24px;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.skill-picker-modal-overlay.open .skill-picker-modal {
  transform: translateY(0);
}
.skill-picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.skill-picker-modal-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--clr-gold);
  margin: 0;
}
.skill-picker-modal-close {
  background: none;
  border: none;
  color: var(--clr-text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.skill-picker-modal-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--clr-text);
}
.skill-picker-modal-desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--clr-text-mid);
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.skill-picker-modal .skill-source-box {
  margin-bottom: 14px;
}
.skill-picker-modal .skill-layout {
  margin-bottom: 0;
}
.skill-picker-modal .skill-grid {
  max-height: none;
}

/* ── Ability Hover Tooltip (progression rows) ────────────────────── */
.cls-ability-hover-tip {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  max-width: 380px;
  min-width: 200px;
  padding: 12px 16px;
  background: rgba(12, 14, 30, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(223, 184, 88, 0.2);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(223, 184, 88, 0.06);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--clr-text-mid);
}
.cls-ability-hover-tip.visible {
  opacity: 1;
  transform: translateY(0);
}
.cls-htip-benefit {
  margin-bottom: 6px;
  color: var(--clr-text);
}
.cls-htip-assoc {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cls-htip-assoc-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--clr-gold);
  margin-bottom: 4px;
}
.cls-htip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.cls-htip-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--clr-text-mid);
}
.cls-htip-keywords {
  font-size: 0.7rem;
  color: var(--clr-gold-soft);
  margin-bottom: 4px;
  font-style: italic;
}
.cls-htip-req {
  font-size: 0.7rem;
  color: #e57373;
  margin-bottom: 4px;
}
.cls-htip-desc {
  color: var(--clr-text);
  font-size: 0.74rem;
  line-height: 1.55;
}

/* ─── Stat Source Hover Popup ──────────────────────────────────────── */

.cs-stat-source-popup {
  position: fixed;
  z-index: 3000;
  background: rgba(10, 12, 28, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--clr-gold-soft);
  border-radius: 8px;
  padding: 8px 12px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: statPopIn 0.15s ease both;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(223, 184, 88, 0.06);
}

.cs-stat-source-line {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--clr-text);
  padding: 2px 0;
  white-space: nowrap;
}

.cs-stat-source-line:first-child {
  font-weight: 600;
  color: var(--clr-gold);
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

@keyframes statPopIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Interlude Actions (unused IP spending) ────────────────────────── */
.cls-interlude-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(91, 155, 213, 0.12);
}
.cls-interlude-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: #a0c0e4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cls-interlude-header small {
  font-weight: 400;
  color: rgba(145, 180, 220, 0.5);
  text-transform: none;
  font-size: 0.68rem;
}
.cls-interlude-btns {
  display: flex;
  gap: 8px;
}
.cls-interlude-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(91, 155, 213, 0.2);
  background: rgba(91, 155, 213, 0.06);
  color: #8ab4e0;
  font-size: 0.72rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.cls-interlude-btn:hover {
  background: rgba(91, 155, 213, 0.15);
  border-color: rgba(91, 155, 213, 0.4);
}
.cls-interlude-btn strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 2px;
}
.cls-interlude-btn small {
  color: rgba(145, 180, 220, 0.6);
  font-size: 0.62rem;
}
.cls-cart-il-header {
  border-top: 1px solid rgba(91, 155, 213, 0.1);
  margin-top: 6px;
  padding-top: 6px;
  color: rgba(145, 180, 220, 0.6);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Free Class Grants ─────────────────────────────────────────────── */
.cls-free-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.85), rgba(39, 174, 96, 0.85));
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(46, 204, 113, 0.3);
  z-index: 2;
}
.cls-free-granted {
  border-color: rgba(46, 204, 113, 0.3) !important;
}
.cls-free-granted.selected {
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.cls-cart-free {
  border-left: 2px solid rgba(46, 204, 113, 0.5);
}
.cls-cart-free .bt-cart-item-cost {
  color: #2ecc71;
  font-weight: 700;
}
.cls-cart-free-badge {
  display: inline-block;
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
  font-size: 0.58rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
}
.cls-free-badge-inline {
  display: inline-block;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.25);
  color: #2ecc71;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════════════
   HYBRID / SPECIAL RACE UI
   ══════════════════════════════════════════════════════════════════ */

/* ── Special Race Card ───────────────────────────────────────────── */
.race-card-special {
  border: 2px solid rgba(190, 120, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(30, 20, 50, 0.95), rgba(50, 25, 70, 0.85)) !important;
  box-shadow: 0 0 20px rgba(190, 120, 255, 0.12), inset 0 1px 0 rgba(190, 120, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.race-card-special::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(190, 120, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.race-card-special:hover {
  border-color: rgba(190, 120, 255, 0.55) !important;
  box-shadow: 0 0 28px rgba(190, 120, 255, 0.2), 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}
.race-card-special .race-card-name {
  color: #c88eff;
}
.race-card-special .race-card-attrs {
  color: rgba(190, 140, 255, 0.7);
}

/* ── Hybrid Selection Overlay ────────────────────────────────────── */
.hybrid-select-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}
.hybrid-select-modal {
  background: linear-gradient(160deg, rgba(30, 22, 50, 0.98), rgba(20, 15, 35, 0.98));
  border: 1px solid rgba(190, 120, 255, 0.25);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 600px;
  width: 92%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(190, 120, 255, 0.08);
}
.hybrid-select-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #c88eff;
  text-align: center;
  margin-bottom: 4px;
}
.hybrid-select-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 180, 100, 0.8);
  text-align: center;
  margin-bottom: 18px;
  font-weight: 500;
}
.hybrid-select-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Hybrid Type Card ────────────────────────────────────────────── */
.hybrid-type-card {
  background: rgba(190, 120, 255, 0.06);
  border: 1px solid rgba(190, 120, 255, 0.15);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hybrid-type-card:hover {
  background: rgba(190, 120, 255, 0.12);
  border-color: rgba(190, 120, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.hybrid-type-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #dab6ff;
  margin-bottom: 6px;
}
.hybrid-type-desc {
  font-size: 0.72rem;
  color: rgba(200, 200, 220, 0.75);
  line-height: 1.5;
}
.hybrid-type-desc strong {
  color: rgba(220, 190, 255, 0.9);
}
.hybrid-type-cost {
  font-size: 0.65rem;
  color: rgba(255, 180, 100, 0.7);
  margin-top: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hybrid-select-cancel {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(200, 200, 220, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hybrid-select-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(200, 200, 220, 0.9);
}

/* ── Locked Breakthrough (from race) ─────────────────────────────── */
.bt-card.bt-locked-race {
  border-color: rgba(190, 120, 255, 0.3) !important;
  background: linear-gradient(135deg, rgba(40, 25, 60, 0.6), rgba(30, 18, 45, 0.6)) !important;
  cursor: default;
}
.bt-card.bt-locked-race.selected {
  box-shadow: 0 0 0 2px rgba(190, 120, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.bt-card.bt-locked-race .bt-card-cost {
  color: #c88eff !important;
  font-weight: 700;
}
.bt-cart-locked-badge {
  font-size: 0.6rem;
  color: rgba(190, 120, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: rgba(190, 120, 255, 0.08);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDE MODE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Override toggle button (amber accent, similar to spend-exp-btn) ── */
.override-btn {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border: 1px solid rgba(230, 160, 50, 0.4);
  border-radius: 6px;
  background: rgba(230, 160, 50, 0.08);
  color: #e6a032;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.override-btn:hover {
  background: rgba(230, 160, 50, 0.16);
  border-color: #e6a032;
  box-shadow: 0 0 12px rgba(230, 160, 50, 0.12);
}
.override-btn.active {
  background: rgba(220, 60, 60, 0.25);
  border-color: #e54545;
  color: #ff6b6b;
  box-shadow: 0 0 16px rgba(220, 60, 60, 0.3), inset 0 0 6px rgba(220, 60, 60, 0.12);
  text-shadow: 0 0 6px rgba(220, 60, 60, 0.5);
}

/* ── Editable stat/skill values when override is active ── */
.cs-override-active .cs-stat-value[contenteditable="true"] {
  border: 1px dashed rgba(230, 160, 50, 0.45);
  border-radius: 4px;
  padding: 1px 4px;
  min-width: 1.6em;
  text-align: center;
  outline: none;
  cursor: text;
}
.cs-override-active .cs-stat-value[contenteditable="true"]:focus {
  border-color: #e6a032;
  background: rgba(230, 160, 50, 0.08);
  box-shadow: 0 0 8px rgba(230, 160, 50, 0.15);
}

.cs-override-active .cs-skill-value[contenteditable="true"] {
  border: 1px dashed rgba(230, 160, 50, 0.45);
  border-radius: 4px;
  padding: 1px 6px;
  min-width: 2em;
  outline: none;
  cursor: text;
}
.cs-override-active .cs-skill-value[contenteditable="true"]:focus {
  border-color: #e6a032;
  background: rgba(230, 160, 50, 0.08);
  box-shadow: 0 0 8px rgba(230, 160, 50, 0.15);
}

/* ── Add Skill button ── */
.cs-override-add-skill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px dashed rgba(230, 160, 50, 0.4);
  border-radius: 8px;
  background: rgba(230, 160, 50, 0.06);
  color: #e6a032;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 6px;
}
.cs-override-add-skill-btn:hover {
  background: rgba(230, 160, 50, 0.14);
  border-color: #e6a032;
}

/* ── Add Expertise button (small, per-skill) ── */
.cs-override-add-exp-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px dashed rgba(230, 160, 50, 0.35);
  border-radius: 4px;
  background: rgba(230, 160, 50, 0.05);
  color: rgba(230, 160, 50, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cs-override-add-exp-btn:hover {
  background: rgba(230, 160, 50, 0.14);
  border-color: #e6a032;
  color: #e6a032;
}

/* ── Override inline input (add skill form) ── */
.cs-override-inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  margin-top: 4px;
}
.cs-override-inline-form input {
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 4px 8px;
  border: 1px solid rgba(230, 160, 50, 0.35);
  border-radius: 5px;
  background: rgba(10, 10, 18, 0.7);
  color: var(--clr-text-bright);
  outline: none;
}
.cs-override-inline-form input:focus {
  border-color: #e6a032;
  box-shadow: 0 0 6px rgba(230, 160, 50, 0.15);
}
.cs-override-inline-form input[type="text"] {
  width: 120px;
}
.cs-override-inline-form input[type="number"] {
  width: 50px;
}
.cs-override-inline-form button {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid rgba(230, 160, 50, 0.4);
  border-radius: 5px;
  background: rgba(230, 160, 50, 0.12);
  color: #e6a032;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cs-override-inline-form button:hover {
  background: rgba(230, 160, 50, 0.22);
}

/* ── Override input row (add skill / add expertise form) ── */
.cs-override-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cs-override-text-input,
.cs-override-num-input {
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 4px 8px;
  border: 1px solid rgba(230, 160, 50, 0.35);
  border-radius: 5px;
  background: rgba(10, 10, 18, 0.7);
  color: var(--clr-text-bright);
  outline: none;
}
.cs-override-text-input:focus,
.cs-override-num-input:focus {
  border-color: #e6a032;
  box-shadow: 0 0 6px rgba(230, 160, 50, 0.15);
}
.cs-override-text-input {
  width: 120px;
}
.cs-override-num-input {
  width: 50px;
}
.cs-override-confirm-btn,
.cs-override-cancel-btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid rgba(230, 160, 50, 0.4);
  border-radius: 5px;
  background: rgba(230, 160, 50, 0.12);
  color: #e6a032;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cs-override-confirm-btn:hover {
  background: rgba(230, 160, 50, 0.22);
}
.cs-override-cancel-btn {
  border-color: rgba(255, 100, 100, 0.3);
  color: #e57373;
  background: rgba(255, 100, 100, 0.06);
}
.cs-override-cancel-btn:hover {
  background: rgba(255, 100, 100, 0.15);
}

/* ── Delete skill button (× in header) ── */
.cs-override-del-skill-btn {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255, 80, 80, 0.3);
  border-radius: 4px;
  background: rgba(255, 80, 80, 0.08);
  color: #e57373;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-override-del-skill-btn:hover {
  background: rgba(255, 80, 80, 0.25);
  border-color: #e57373;
  color: #ff8a80;
}

/* ── Delete expertise button (× on tag) ── */
.cs-override-del-exp-btn {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: rgba(255, 80, 80, 0.15);
  color: #e57373;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.cs-override-del-exp-btn:hover {
  background: rgba(255, 80, 80, 0.35);
  color: #ff8a80;
}

/* ── Delete source button in stat tooltip ── */
.cs-override-del-source-btn {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(255, 80, 80, 0.3);
  border-radius: 3px;
  background: rgba(255, 80, 80, 0.08);
  color: #e57373;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.cs-override-del-source-btn:hover {
  background: rgba(255, 80, 80, 0.25);
  border-color: #e57373;
  color: #ff8a80;
}

.cs-tip-custom-source {
  color: #e6a032;
}

/* ─── Named weapons (inventory + equipped) ─────────────────────────── */
.inv-item-rename {
  border: none;
  background: transparent;
  color: var(--clr-text-dim);
  font-size: 0.8rem;
  padding: 1px 4px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
}
.inv-item-rename:hover { color: var(--clr-gold); background: rgba(200, 168, 96, 0.12); }
.inv-item-named { color: var(--clr-gold); font-style: italic; cursor: help; }

/* ═══════════════════════════════════════════════════════════════════════
   TOKEN COOKIE CUTTER (js/token-cutter.js)
   Circular VTT-token cropper opened from the portrait controls. Mirrors the
   monster creator's tool (strategy-room) with an ally-green ring.
   ═══════════════════════════════════════════════════════════════════════ */
.tc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;               /* above the sheet's full-modal (3000) + mod tips */
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tc-overlay.open { opacity: 1; }

.tc-modal {
  width: 100%;
  max-width: 360px;
  max-height: 92vh;
  overflow-y: auto;
  background: #0e0e1a;
  border: 1px solid var(--clr-gold-soft);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(223, 184, 88, 0.06);
  display: flex;
  flex-direction: column;
}

.tc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--clr-gold-soft);
}
.tc-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-gold);
  letter-spacing: 0.02em;
  margin: 0;
}
.tc-close {
  background: none;
  border: none;
  color: var(--clr-gold);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.tc-close:hover { color: #f0d080; background: rgba(223, 184, 88, 0.1); }

.tc-body { padding: 16px 18px; }
.tc-help,
.tc-note {
  font-size: 0.78rem;
  color: var(--clr-text-dim);
  line-height: 1.45;
  margin: 0 0 12px;
  text-align: center;
}
.tc-note { margin: 12px 0 0; }

/* Stage + circular cutout — sizes match the monster tool exactly (280/220). */
.tc-viewport {
  width: 280px;
  height: 280px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #08090d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.tc-stage {
  position: absolute;
  inset: 0;
  cursor: grab;
}
.tc-stage:active { cursor: grabbing; }
.tc-source {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transform-origin: center center;
}
.tc-mask {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
  box-shadow: 0 0 0 9999px rgba(10, 12, 22, 0.75), inset 0 0 8px rgba(0, 0, 0, 0.5);
  border: 2px dashed rgba(74, 224, 110, 0.65);   /* ally green, matches the ring */
}

.tc-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.tc-zoom-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tc-zoom { flex: 1; accent-color: #3ae04f; cursor: pointer; }

.tc-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--clr-border);
}
.tc-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--clr-border-hover);
  background: var(--clr-bg-dark);
  color: var(--clr-text);
  transition: all 0.15s ease;
}
.tc-btn-secondary:hover { border-color: var(--clr-gold); color: var(--clr-gold); }
.tc-btn-primary {
  border-color: #2c9c3f;
  background: linear-gradient(135deg, #3ae04f, #149c2b);
  color: #06210c;
}
.tc-btn-primary:hover {
  box-shadow: 0 0 16px rgba(58, 224, 79, 0.35);
  filter: brightness(1.08);
}

@media (max-width: 400px) {
  .tc-viewport { width: 240px; height: 240px; }
  .tc-mask { width: 190px; height: 190px; }
}