/* ===================================================
   Global Styles
=================================================== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /* Use a dark gradient as the global background */
  background: linear-gradient(270deg, #1e1e2e, #2e2e3e, #3a3a4f);
  background-size: 600% 600%;
  /* animation: GradientShift 15s ease infinite; */
  color: #f0f0f0;
}

@keyframes GradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.info-wrapper {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.info-icon {
  font-size: 0.85rem;
  background: #555;
  color: white;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: bold;
  margin-left: -0.5rem;
}

.tooltip {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateX(-100%) translateY(-50%);
  background-color: #2c2c2c;
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.4rem;
  white-space: normal;
  max-width: 240px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  width: max-content;
}

.info-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.lore-tooltip {
  position: absolute;
  top: 125%;
  left: 1rem;
  right: 1rem;
  transform: none;
  background-color: #2c2c2c;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  white-space: normal;
  max-width: 300px;        /* ⬅️ wider tooltip */
  min-width: 220px;        /* ⬅️ ensures it doesn’t get too narrow */
  font-size: 0.9rem;
  line-height: 1.4;        /* ⬅️ adds breathing room between lines */
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  text-align: left;
  word-break: break-word;
}

.info-wrapper:hover .lore-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Adjust position if tooltip overflows the right edge */
@media (max-width: 600px) {
  .tooltip {
    left: auto;
    right: 0;
    transform: none;
  }
}

.bp-to-level-container {
  display: flex;
  align-items: center;
  gap: 0.4em; /* spacing between icon and text */
  margin-top: 0.5em;
}

.bp-to-level-container .info-icon {
  font-size: 1rem;
  cursor: pointer;
}

.bp-to-level-container .tooltip {
  bottom: auto;
  top: 125%; /* show below the icon instead of above */
}

#global-bp-summary {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-bottom: 1em;
}

.bp-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1rem;
}

.with-tooltip {
  position: relative;
}

.with-tooltip .info-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.with-tooltip .info-icon {
  font-size: 0.9rem;
  vertical-align: middle;
}

.with-tooltip .tooltip {
  visibility: hidden;
  opacity: 0;
  width: 280px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 0.75em;
  position: absolute;
  z-index: 10;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
  font-size: 0.85rem;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.with-tooltip .info-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}


/* ===================================================
   Morph Modal Styles
=================================================== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  overflow: auto;             /* allow scrolling */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: all;
}

.modal.hidden {
  display: none;
}

.modal-content {
  position: relative;
  overflow: visible;
  background: #1e1e1e;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 700px;
  width: 95%;
  color: #fff;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  text-align: center;
}

/* Import Character button */
.import-label .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #444;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.import-label .btn:hover {
  background: #666;
}

/* Stat choice buttons inside modal */
.button-group {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin: 1.5rem 0;
}

#stat-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-choice button {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Match Lore styling for consistency */
#proficiency-modal .trait-card {
  background-color: #2e2e3e;
  color: white;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
}

#ability-select-modal .trait-card {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background-color: #2e2e3e;
  color: white;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* whenever .no-anim is on the list, kill any card animations */
#ability-select-list.no-anim .ability-item {
  animation: none !important;
  transition: none !important;
}

#ability-select-modal .trait-card:hover {
  border-color: #888;
}

#ability-select-modal .trait-card.selected {
  border-color: #66ccff;
  background-color: #1f3f4f;
}

#ability-select-modal .trait-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}

#ability-select-modal .trait-header {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: nowrap;
  align-items: center;
}

#ability-select-modal .trait-name {
  font-size: 1.1rem;
  font-weight: bold;
}

#ability-select-modal .trait-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-family: monospace;
  color: #ccc;
}

#ability-select-modal .trait-cost {
  color: #8be38b;
}

#ability-select-modal .info-icon {
  background-color: #555;
  color: white;
  border-radius: 50%;
  padding: 0.1rem 0.5rem;
  font-size: 0.9rem;
  margin-left: 0.6rem;
}

#ability-select-modal .tooltip {
  max-width: 280px;
  white-space: normal;
  z-index: 999;
  margin-left: 10rem;
}

#proficiency-modal .trait-card:hover {
  border-color: #888;
}

#proficiency-modal .trait-card.selected {
  border-color: #66ccff;
  background-color: #1f3f4f;
}

#proficiency-modal .trait-card.disabled {
  opacity: 0.5;
  pointer-events: none;
  border-color: #444;
  background-color: #333;
}

#proficiency-modal .lore-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#proficiency-modal .lore-name {
  margin: 0 auto;
}

#proficiency-modal .left-hint {
  position: absolute;
  left: 0;
}

#proficiency-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Ensure we don’t break responsiveness */
#proficiency-modal .modal-content {
  max-width: 600px;
  width: 90%;
}

/* Button styling is inherited via .btn-cancel and .btn-continue */

.modal-content.proficiency-modal {
  border: 1px solid #444;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

#proficiency-list.trait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

#proficiency-select-list.no-anim .proficiency-item {
  animation: none !important;
  transition: none !important;
}

.trait-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

#ability-list.trait-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.trait-card {
  background: #333;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border 0.2s;
  position: relative;
}

.trait-card.selected {
  border-color: #00c896;
  background: #2b3c2b;
}

.trait-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.trait-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  color: #fff;
}

.trait-meta {
  font-size: 0.9rem;
  color: #ccc;
  display: flex;
  justify-content: space-between;
  font-family: monospace;
}

.info-wrapper.left-hint {
  position: relative;
  display: inline-block;
}

.trait-cost {
  color: #9be09b;
}

.trait-uses {
  color: #c9c9ff;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  text-align: right;
  margin-top: 1.5rem;
}

.modal-actions button {
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
}

#ability-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding-top: 1rem;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 1rem;
}


/* ===================================================
   Splash Page Styles
=================================================== */
.splash-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}

.splash-header {
  text-align: center;
  margin-bottom: 40px;
  color: #f8f8f8;
}

.splash-header h1,
.splash-header p {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInUp 1.5s forwards;
}

.splash-header h1 {
  animation-delay: 0.5s;
}

.splash-header p {
  animation-delay: 1s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.racial-tag {
  font-size: 0.8em;
  color: #888;
  font-style: italic;
  margin-left: 6px;
}

.racial-proficiency {
  background-color: #f5f5f5;
  border-left: 4px solid #ccc;
}

.race-selection {
  width: 80%;
  max-width: 1000px;
  margin: auto;
}

.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.race-card {
  background-color: #2e2e3e;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.race-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.race-card.selected {
  border: 2px solid #4a90e2;
  box-shadow: 0 0 20px #4a90e2;
}

#start-button-container {
  margin-top: 30px;
}

.hidden {
  display: none;
}

#start-btn {
  padding: 12px 24px;
  font-size: 1.2rem;
  background-color: #4a90e2;
  border: none;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  animation: pulse 2s infinite;
}

#start-btn:hover {
  background-color: #3c78c0;
}

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

/* ===================================================
   Main Planner Styles
=================================================== */

/* Planner Container: The main planner section */
#planner-container {
  animation: fadeIn 1s ease;
  background-color: rgba(20, 20, 26, 0.95);
  padding: 20px;
}

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

#bp-add-feedback {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#bp-add-feedback.show {
  opacity: 1;
}

/* Sticky header for the planner (reapplied for consistency) */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(46,46,62,0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 2px solid #444;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Card layout for planner sections */
.card {
  background-color: #202028;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}

.badge {
  background-color: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
}

.collapse-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 1rem;
}

  font-style: italic;
  font-size: 1rem;
  margin-left: 2rem;
  margin-bottom: 0.25rem;
}

  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left-align the whole row */
  gap: 0.5rem;
  padding: 0.3rem 0;
  margin-left: 2rem;
  text-align: left;
}

}

  display: flex;
  gap: 0.3rem;
}

  padding: 2px 6px;
  font-size: 0.85rem;
  background-color: #334155;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

  background-color: #475569;
}

  background-color: #1e293b;
  cursor: not-allowed;
  opacity: 0.6;
}

  font-size: 0.95rem;
  flex-grow: 1; /* ensures label stretches to fill space */
}

.card:hover {
  transform: scale(1.005);
}

/* Core Stat Categories and Grids */
.core-stat-category h3 {
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
  margin-top: 20px;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

/* Stat Line Styling */
.stat-line {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #2e2e3e;
  padding: 10px;
  border-radius: 6px;
  flex: 1 1 280px;
  transition: background-color 0.3s ease;
}

.stat-line button {
  padding: 6px 12px;
  background-color: #4a90e2;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.stat-line button:hover {
  background-color: #3c78c0;
}

/* Derived Stats for Body */
.derived-stats {
  margin-top: 8px;
  font-size: 0.9rem;
}
.derived-stats p {
  margin: 4px 0;
}

.stat-increase,
.stat-decrease {
  background-color: #444;
  border: 1px solid #888;
  color: #fff;
  padding: 0.4em 0.75em;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

/* Only apply hover styles when button is enabled */
.stat-increase:hover:not(:disabled),
.stat-decrease:hover:not(:disabled) {
  background-color: #666;
  border-color: #aaa;
}

/* Disabled buttons stay quiet on hover */
.stat-increase:disabled,
.stat-decrease:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #ccc;
  border: 1px solid #999;
  color: #666;
  pointer-events: all; /* keep tooltip working */
}

/* General Shop Layout */
.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Adjust spacing as desired */
}

/* Ability Shop Layout */

.property-badges {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.property-badge.granted {
  background-color: #ddd;
  color: #444;
  border: 1px dashed #888;
}

.property-badge {
  background-color: #444;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px 0 10px 10px;
  position: relative;
  line-height: 1;
  cursor: help;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.property-badge::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #222;
  border-radius: 50%;
  z-index: 1;
}

/* Owned property (player has it) */
.property-badge.owned {
  background-color: #2ecc71;
}

.property-badge.owned::before {
  background-color: #2ecc71;
}

/* Missing property */
.property-badge.missing {
  background-color: #888;
}

.property-badge.missing::before {
  background-color: #888;
}

.racial-ability {
  border-left: 4px solid gold;
  background-color: #fdf6e3;
}

#ability-shop {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0;
}

.ability-entry.derived {
  background: #eef6ff;
  border-left: 3px solid #2980b9;
  opacity: 0.9;
}

.ability-item {
  background-color: #1e293b;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition:
  opacity 0.2s ease,
  transform 0.2s ease;
  /* run the animation on creation */
  animation: fadeInPop 0.25s ease forwards;
}

.ability-item-no-anim {
  background-color: #1e293b;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition:
  opacity 0.2s ease,
  transform 0.2s ease;
}

/* stagger by --i (1,2,3,…) at 50ms intervals */
#ability-select-list .ability-item {
  animation-delay: calc(var(--i) * 50ms);
}

.ability-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ability-name {
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}

.ability-cost {
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.original-cost {
  text-decoration: line-through;
  color: #999;
}

.discounted-cost {
  color: #4df04d;
  font-weight: bold;
}

.discount-tag {
  font-size: 0.7em;
  color: #aaa;
  font-style: italic;
}

.ability-description {
  font-size: 0.875rem;
  color: #cbd5e1;
}

.ability-badge {
  background-color: #4ade80;
  color: #1e293b;
  padding: 2px 6px;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  font-weight: bold;
}

.ability-badge.muted {
  background-color: #94a3b8;
  color: #1e293b;
}

.ability-actions {
  display: flex;
  justify-content: flex-end;
}

.ability-actions button {
  padding: 4px 10px;
  font-size: 0.85rem;
  background-color: #334155;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.ability-actions button:hover {
  background-color: #475569;
}

.ability-actions button:disabled {
  background-color: #1e293b;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Level History Styling */
.revert-button {
  margin-top: 0.5em;
  padding: 0.3em 0.6em;
  background: #333;
  color: #fff;
  border: 1px solid #666;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: 0.9em;
}

.revert-button:hover {
  background-color: #555;
}

#layer-history div {
  margin-bottom: 6px;
}

/* Current Level Purchases Styling */
#current-layer {
  margin-top: 20px;
}

#current-layer-display {
  font-size: 0.9rem;
  color: #aad;
}

/* Lore Modal Hierarchy Styles */
#lore-selection-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
}

.lore-card {
  background-color: #2e2e3e;
  color: white;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.lore-card:hover {
  border-color: #888;
}

.lore-card.selected {
  border-color: #66ccff;
  background-color: #1f3f4f;
}

.lore-card.child-lore {
  margin-left: 1.5rem;
  background-color: #252532;
}

.lore-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.25rem 1rem;

}

.lore-header .lore-name {
  flex-grow: 1
  text-align: center;
  margin: 0 auto;
}

.lore-header .info-wrapper {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.info-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  cursor: pointer;
}

.left-hint {
  position: absolute;
  left: 0;
}

.lore-card.non-selectable {
  background-color: #2a2a2a;
  opacity: 0.8;
  cursor: default;
  pointer-events: none;
  border-left: 4px solid #4a90e2;
}

.lore-description {
  font-size: 0.85rem;
  color: #bbb;
}

#level-up-btn {
  padding: 8px 16px;              /* Smaller padding for a smaller button */
  font-size: 1rem;                /* Slightly smaller font size */
  background: linear-gradient(45deg, #00cc99, #00b386);
  border: none;
  color: #fff;
  border-radius: 6px;             /* Slightly less rounded */
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#level-up-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* Keyframes for a subtle pulsing effect */
@keyframes buttonPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
#start-over-btn {
  padding: 6px 12px;
  font-size: 1rem;
  background-color: #e05555;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

#start-over-btn:hover {
  background-color: #c04444;
}

{
  font-size: 1.2rem;
  margin-top: 15px;
}

ul ul {
  margin-top: 5px;
  margin-left: 20px;
}

{
  padding: 4px 8px;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #4a90e2;
  color: #fff;
  margin-left: 4px;
}

{
  background-color: #3c78c0;
}

{
/* Ensure button container is correctly styled */
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

{
  background-color: #ccc; /* Light gray */
  color: #666; /* Slightly darker text */
  cursor: not-allowed;
}

/* Styles for Proficiency Shop */
#proficiency-shop {
  margin-top: 20px;
}

#proficiency-content li {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#proficiency-content button {
  padding: 4px 8px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#proficiency-content button:hover {
  background-color: #3c78c0;
}

/* styles.css - Styling for character planner UI */

/* Essence Slot Shop */
#essence-slots {
  margin-top: 1rem;
}

.slot-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slot-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  background-color: #1d1f27;
  border-radius: 8px;
  border: 1px solid #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.slot-entry span:first-child {
  flex-grow: 1;
  font-weight: bold;
}

.slot-count {
  margin: 0 0.5rem;
  color: #bbb;
}

.slot-entry button {
  background-color: #2e7d32;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.slot-entry button:hover:not(:disabled) {
  background-color: #388e3c;
}

.slot-entry button:disabled {
  background-color: #555;
  cursor: not-allowed;
}
/* ============================================
   Enhanced Character Info Modal Styling
============================================ */

.modal-content.character-info-modal {
  background-color: #1e1e2e;
  padding: 2rem;
  border-radius: 12px;
  color: #fff;
  text-align: left;
  max-width: 520px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  border: 1px solid #444;
}

.character-info-modal h2 {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.character-info-modal .form-group {
  margin-bottom: 1.25rem;
}

.character-info-modal label {
  display: block;
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.character-info-modal input,
.character-info-modal textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  border: 1px solid #444;
  background-color: #2a2a3e;
  color: #f0f0f0;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.character-info-modal input:focus,
.character-info-modal textarea:focus {
  outline: none;
  border-color: #4a90e2;
}

.character-info-modal textarea {
  resize: vertical;
  min-height: 80px;
}

.character-info-modal .button-group {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.character-info-modal .button-group button {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-cancel {
  background-color: #444;
  color: #ddd;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-cancel:hover {
  background-color: #555;
}

.btn-continue {
  background-color: #4a90e2;
  color: white;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-continue:hover {
  background-color: #3c78c0;
}

.summary-line {
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
  text-align: center;
}

#confirm-modal .button-group {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

#confirm-modal .btn-cancel,
#confirm-modal .btn-continue {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#confirm-modal .btn-cancel {
  background-color: #444;
  color: #ddd;
}

#confirm-modal .btn-cancel:hover {
  background-color: #555;
}

#confirm-modal .btn-continue {
  background-color: #4a90e2;
  color: white;
}

#confirm-modal .btn-continue:hover {
  background-color: #3c78c0;
}

.confirm-character-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.confirm-character-modal .modal-actions .btn-cancel {
  background-color: #444;
  color: #ddd;
}

.confirm-character-modal .modal-actions .btn-cancel:hover {
  background-color: #555;
}

.confirm-character-modal .modal-actions .btn-continue {
  background-color: #4a90e2;
  color: white;
}

.confirm-character-modal .modal-actions .btn-continue:hover {
  background-color: #3c78c0;
}

#confirmation-summary {
  margin: 1rem 0 2rem;
  font-size: 1.05rem;
  line-height: 1.0;
}

.modal-actions {
  border-top: 1px solid #444;
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.race-note {
  font-size: 0.95rem;
  color: #aaa;
  margin-top: 0.5rem;
}

.race-preview {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #ccc;
  line-height: 1.4;
}

.race-preview div {
  margin-bottom: 0.4rem;
}

.race-preview .stat-label {
  text-transform: capitalize;
  font-weight: bold;
  color: #9be09b;
}

.trait-header .info-wrapper {
  margin-left: 0rem;
}

.original-cost {
  text-decoration: line-through;
  color: #888;
  margin-right: 0.3em;
}

.discounted-cost {
  color: #4df04d;
  font-weight: bold;
}

/* Stat Modal overrides */
.modal-content.stat-modal {
  max-width: 520px;
  text-align: center;
}

/* same 2-col—or auto-fit—card grid you use elsewhere */
#stat-modal .trait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* reuse your trait-card style */
#stat-modal .trait-card {
  background-color: #2e2e3e;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

/* highlight when user has used points on this stat */
#stat-modal .trait-card.selected {
  border-color: #66ccff;
  background-color: #1f3f4f;
}

#stat-modal .trait-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* center your plus/minus */
#stat-modal .stat-choice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
/* Morph Modal tweaks */
.modal-content.morph-modal {
  max-width: 600px;
  text-align: center;
}

/* same grid as #ability-list */
#morph-modal .trait-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* reuse your existing trait-card styling */
#morph-modal .trait-card {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background-color: #2e2e3e;
  color: white;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

#morph-modal .tooltip {
  /* position tooltip to the right of the icon instead of centering under it */
  left: 100% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateX(8px) translateY(-50%) !important;
  white-space: nowrap;      /* keep the text on one line */
}

/* 2) Tweak info-icon spacing so it doesn’t shove the title */
#morph-modal .trait-header .info-icon {
  margin-left: 0.25rem !important;  /* a little gap, but not too much */
  vertical-align: middle;           /* ensure it sits inline with the text */
}

/* 3) Give the Morph modal a bit more breathing room */
.modal-content.morph-modal {
  max-width: 720px;  /* up from 600px */
  width: 85%;        /* fill more of the viewport */
}

/* 1) Lay out the header exactly like AbilitySelectModal */
#morph-modal .modal-content .trait-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;      /* small gap between icon & title */
}

/* 2) Remove that extra left-push on the info-icon */
#morph-modal .trait-header .info-icon {
  margin-left: 0 !important;
  vertical-align: middle;
}

/* 3) Center the tooltip beneath the icon, with plenty of z-index */
#morph-modal .tooltip {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 6px) !important;    /* just below the header */
  transform: translateX(-50%) !important;
  background-color: #333;
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.4rem;
  white-space: normal;
  max-width: 240px;
  z-index: 10000;
}

/* 4) Make sure cards let the tooltip spill out */
#morph-modal .trait-card {
  overflow: visible;
}

/* Ensure Morph modal headers line up icon + name */
#morph-modal .trait-header {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Make sure the info-wrapper only takes up the space it needs */
#morph-modal .trait-header .info-wrapper {
  display: inline-flex !important;
  width: auto !important;
  margin-left: 0 !important;
}
/* Tighten cost + uses into two flex items */
#morph-modal .trait-meta {
  display: flex;
  justify-content: space-between;  /* cost-group left, uses-group right */
  align-items: center;
  font-family: monospace;
  font-size: 0.9rem;
  gap: 0;                          /* no extra gap between items */
}

/* If you still want a tiny gap inside cost-group: */
#morph-modal .cost-group {
  margin-right: 0.5rem;
}

/* And make sure the container still shows overflow */
#morph-modal .trait-card {
  overflow: visible !important;
}

/* Ensure every tooltip in the Morph modal opens to the right and slightly down */
#morph-modal .info-wrapper {
  position: relative !important;  /* anchor point for tooltip */
}

#morph-modal .tooltip {
  position: absolute !important;
  top: 100% !important;                 /* right below the icon */
  left: 100% !important;                /* flush to the right edge */
  transform: translate(8px, 4px) !important;  /* nudge right & down */
  white-space: normal;
  max-width: 240px;
  z-index: 10000;
}

/* Show tooltip only on hover */
#morph-modal .info-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Morph‐modal: clearly highlight selected cards */
#morph-modal .trait-card.selected {
  border-color: #66ccff !important;       /* bright blue border */
  background-color: #1f3f4f !important;   /* darker panel fill */
  box-shadow: 0 0 8px rgba(102,204,255,0.6); /* subtle glow */
}
/* ----------------------------------------------
   Lore Shop Styles
---------------------------------------------- */
#lore-content .lore-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2e2e3e;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.2s, border-color 0.2s;
}

#lore-content .lore-entry.child {
  margin-left: 1.5rem;  /* indent for child lores */
}

.lore-entry .lore-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: #f0f0f0;
}

.lore-entry .lore-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lore-entry button {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #444;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.lore-entry button:disabled {
  background-color: #555;
  cursor: not-allowed;
}

.lore-entry button:not(:disabled):hover {
  background-color: #666;
}

.lore-entry .lore-count {
  min-width: 1.5rem;
  text-align: center;
  color: #aad;
  font-family: monospace;
  font-size: 1rem;
}
/* Add-Lore Modal tweaks */
.modal-content.add-lore-modal {
  max-width: 480px;
  text-align: left;
}

/* Form spacing */
.add-lore-modal .form-group {
  margin-bottom: 1rem;
}
.add-lore-modal label {
  display: block;
  margin-bottom: 0.25rem;
  color: #ccc;
}
.add-lore-modal input,
.add-lore-modal textarea,
.add-lore-modal select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  background: #2e2e3e;
  color: #f0f0f0;
}
.add-lore-modal textarea {
  resize: vertical;
  min-height: 80px;
}

/* Button styles already covered by .btn-cancel/.btn-continue */
/* Inline delete button on custom lores */
.lore-entry .lore-delete {
  background: none;
  border: none;
  color: #f55;
  font-size: 1.2rem;
  line-height: 1;
  margin-left: 0.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lore-entry .lore-delete:disabled {
  color: #555;
  cursor: not-allowed;
  opacity: 0.4;
}

.lore-entry .lore-delete:not(:disabled):hover {
  opacity: 1;
}
/* Place delete × snug beside the info-icon */
.lore-name .lore-delete {
  background: none;
  border: none;
  color: #f55;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 0.4rem;   /* small gap from info icon */
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.lore-name .lore-delete:disabled {
  color: #555;
  cursor: not-allowed;
  opacity: 0.4;
}
.lore-name .lore-delete:not(:disabled):hover {
  opacity: 1;
}
/* Make disabled delete-buttons still show the “×”, just greyed out */
.lore-name .lore-delete:disabled {
  color: #888 !important;      /* light grey so you can still see it */
  opacity: 0.6 !important;     /* semi-transparent but not gone */
  cursor: not-allowed;         /* maintain the no-click pointer */
}
/* ===== Layout Grid ===== */
.app-container {
  display: grid;
  grid-template-rows: auto 1fr auto;      /* header / main / footer */
  grid-template-columns: auto 1fr;        /* sidebar / content */
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
  /* allow the page to grow taller than the viewport */
  min-height: 100vh;
  overflow: visible;    /* let the footer expand downward */
}

.app-header {
  grid-area: header;
}

.sidebar {
  position: sticky;
  /* top: 0; */                     /* sticks to the top of its container */ 
  align-self: start;           /* prevents stretching in the grid */
  /* height: 71vh; */              /* fill the viewport vertically */
  overflow-y: auto;            /* scroll internally if its content grows */
  width: 150px;
  /* pin it just under your header: */
  top: 165px;                   /* ← replace 136px with the actual total height of your three header rows */
  /* then fill the rest of the viewport underneath that header: */
  height: calc(89vh - 136px);  /* ← same 136px here */
}

main        { grid-area: main; overflow-y: auto; padding: 1rem; background: #1e1e2e; }
.app-footer { grid-area: footer; padding: 0.5rem 1rem; background: #202028; }

main#main-content {
  /* Replace 120px with the combined height of your header rows */
  max-height: calc(69vh - 32px);
  overflow-y: auto;
}

/* ===== Sidebar Styles ===== */
.sidebar.collapsed { width: 50px; }

/* Hide labels when collapsed */
.sidebar .label { margin-left: 0.5rem; }
.sidebar.collapsed .label { display: none; }

/* Sidebar list */
.sidebar ul { list-style: none; padding: 1rem 0; margin: 0; }
.sidebar li {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.sidebar li:hover,
.sidebar li.active {
  background: #2e2e3e;
}
.sidebar .icon { font-size: 1.2rem; }

/* ===== Helper Classes ===== */
.hidden { display: none; }
.content-section { display: none; }
.content-section:not(.hidden) { display: block; }

/* Toggle button in header */
.toggle-sidebar {
  margin-left: auto;
  font-size: 1.4rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
/* make each card a positioned context */
#lore-modal .lore-card {
  position: relative;
  z-index: 0;
}
/* on hover, lift this card (and its tooltip) above siblings */
#lore-modal .lore-card:hover {
  z-index: 10;
}
/* ensure the tooltip itself is on top */
#lore-modal .lore-card .lore-tooltip {
  z-index: 20 !important;
}
/* ─── Proficiency Modal: keep tooltips on top ─── */
#proficiency-modal .trait-card {
  /* ensure every card can create its own stacking context */
  position: relative;
  z-index: 0;
  overflow: visible;    /* let the tooltip spill outside */
}

#proficiency-modal .trait-card:hover {
  /* bring the hovered card (and its tooltip) above all siblings */
  z-index: 1000;
}

#proficiency-modal .trait-card .lore-tooltip {
  /* make sure the tooltip is above even the hovered card’s background */
  z-index: 1001 !important;
}

.header-left h1 {
  margin: 0;
  font-size: 1.6rem;
}

.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header zones */
.header-left h1 {
  margin: 0;
  font-size: 1.6rem;
}
.header-center.level-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── BP summary pills ── */
.bp-summary {
  display: flex;
  gap: 0.5rem;
}

/* Make every pill a neat little inline-flex container */
.pill {
  display: inline-flex;
  align-items: center;
  position: relative;             /* for absolutely-positioned bar */
  padding: 0.3em 0.8em;
  margin-right: 0.5em;
  border-radius: 4px;
  background: #333;
  color: #eee;
  font-size: 0.9rem;
  overflow: visible;
}

/* === Tweak the “To Next” pill === */
.pill--highlight {
  display: inline-flex;          /* turn it into a flex box */
  align-items: center;           /* vertically center text & icon */
  gap: 0.5rem;                   /* space between text, number, icon */
  padding: 0.4em 1rem;           /* a bit more horizontal padding */
  border-radius: 4px;
  background: linear-gradient(90deg, #4e54c8, #8f94fb);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  position: relative;            /* for your progress bar */
}

/* make the number itself stand out */
.pill--highlight #to-level-bp {
  font-weight: bold;
  margin: 0;                     /* reset any browser default */
}

/* Tuck the info icon in and center it */
.pill .info-wrapper {
  margin-left: 0.5em;
  position: relative;
}
.pill .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-style: normal;  /* prevents odd fallback styling */
  cursor: help;
  line-height: 1;
}

/* Tooltip positioning */
.pill .tooltip {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: normal;
  background: #2c2c2c;
  padding: 0.5em;
  border-radius: 4px;
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}
.pill .info-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* reposition your progress-bar under the pill */
.pill--highlight .progress {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
}

/* The fill — width set dynamically via JS */
.pill--highlight .progress-fill {
  height: 100%;
  background: #00ff99;
  width: 0;
  transition: width 0.3s ease;
}

/* clean up the info-icon wrapper */
.pill--highlight .info-wrapper {
  margin: 0;                     /* remove old spacing hacks */
  padding: 0;                    /* ditto */
  display: inline-flex;
  align-items: center;
  cursor: help;
}

/* style the ℹ️ itself */
.pill--highlight .info-icon {
  width: 1.2em;
  height: 1.2em;
  font-size: 0.9em;              /* scale down if needed */
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* tooltip is already styled by your existing .info-wrapper/.tooltip rules */

/* ── Earn-BP form ── */
.bp-earn {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.bp-earn input {
  width: 4ch;
  padding: 0.25em;
  border-radius: 4px;
  border: 1px solid #555;
  background: #1e1e2e;
  color: #f0f0f0;
}

/* ── Export button ── */
.btn-export {
  padding: 0.5em 1em;
  border-radius: 4px;
  background: #444;
  color: #f0f0f0;
  border: none;
  cursor: pointer;
}
.btn-export:hover {
  background: #555;
}

/* Optional: if you want the pills to wrap neatly when they overflow */
.bp-summary {
  flex-wrap: wrap;
}

/* Make sure form elements line up */
.earn-bp-form form {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
/* =========================================
   Snazzy “Earned BP” input + button
========================================= */

/* Make sure box-sizing includes the border in the width/height */
.earn-bp-form input,
.earn-bp-form button {
  box-sizing: border-box;
}

/* Uniform height & pill shape */
.earn-bp-form input,
.earn-bp-form button {
  height: 2.5rem;                 /* lock the height */
  line-height: 2.5rem;            /* vertically center the text */
  border-radius: 1.25rem;         /* pill shape */
  border: 1px solid #555;         /* consistent 1px border */
  background: rgba(255,255,255,0.1);
  color: #f0f0f0;
  font-size: 0.9rem;
  transition: 
    background 0.2s ease, 
    border-color 0.2s ease, 
    transform 0.1s ease;
}

/* Fix the input width so it never jumps */
.earn-bp-form input {
  width: 14ch;                     /* enough for a small number */
  height: 3ch;                     /* enough for a small number */
  padding: 0 0.5rem;
}

/* Button padding & gradient */
.earn-bp-form button {
  padding: 0 1rem;
  border: none; 
  background: linear-gradient(90deg, #66ccff, #0066ff);
  cursor: pointer;
}

/* Hover & active states */
.earn-bp-form button:hover {
  background: linear-gradient(90deg, #58b8e6, #005ecc);
  transform: translateY(-1px);
}
.earn-bp-form button:active {
  transform: translateY(1px);
}

/* Focus style on the input */
.earn-bp-form input:focus {
  outline: none;
  border-color: #4a90e2;
  background: rgba(255,255,255,0.15);
}
/* Ensure bp-warning always takes up the same space */
#bp-warning {
  display: block !important;      /* override hidden’s display:none */
  min-height: 1.2em;               /* reserve vertical space */
}

/* Hide it by making it invisible, not removing it */
#bp-warning.hidden {
  visibility: hidden !important;
}

.feedback-message {
  display: block;          /* reserve a line in the layout */
  min-height: 1.2em;       /* enough room for one line of text */
  font-size: 0.85rem;
  margin-top: 0.25rem;
  transition: visibility 0s linear 0.2s; /* delay hiding until after fade */
}
.feedback-message.hidden {
  visibility: hidden;      /* text is invisible, but the box stays */
}

/* color will be set in JS per message type */

/* Override the global .hidden for bp-add-feedback */
#bp-add-feedback.hidden {
  display: block !important;   /* force it to keep its box */
  visibility: hidden;          /* make the text invisible */
}

/* Stack the two “rows” inside the same cell */
.earn-bp-form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;       /* space between control & feedback */
}

.error-tooltip {
  position: absolute;
  top: -2.5em;
  right: 0;
  background: rgba(255,69,58,0.9);
  color: #fff;
  padding: 0.4em 0.6em;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
}
.error-tooltip.show {
  opacity: 1;
}

/* Base styling */
.bp-tooltip {
  position: absolute;
  /* … your positioning… */
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* When JS adds “show” */
.bp-tooltip.show {
  opacity: 1;
  visibility: visible;
}

/* Error state (red) */
.bp-tooltip.error {
  background-color: #f56260;
  color: white;
}

/* Success state (green) */
.bp-tooltip.success {
  background-color: #2ecc71;
  color: white;
}

/* collapse the body when #main-footer has .collapsed */
#main-footer.collapsed .footer-body {
  display: none;
}

/* optional smooth height collapse instead of display none:
#main-footer .footer-body {
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 1000px;  // large enough for content
}

#main-footer.collapsed .footer-body {
  max-height: 0;
}
*/

/* Style the header row to stay visible and align chevron */
.app-footer .footer-header {
  padding: 0.1rem 0.5rem;
  margin: 0;
  min-height: 0;
  line-height: 1.2;
  font-size: 0.875rem;
  border-top: 1px solid #ddd;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
/* 2. Zero out the <h2> margins and inherit the line-height */
#main-footer .footer-header h3 {
  margin: 0;                /* remove top/bottom margins */
  font-size: 1rem;          /* adjust as needed */
  line-height: inherit;     /* match the parent’s tight line-height */
}
/* 3. Make the toggle button compact */
#toggle-footer {
  padding: 0;               /* no extra hit-area padding */
  margin: 0;                /* no external margins */
  line-height: inherit;     /* so the chevron aligns vertically */
  border: none;
  font-size: 1rem;          /* keep it same size as the text */
  cursor: pointer;
}


.app-footer .footer-body {
  padding: 1rem;
  background: #fafafa;
}

@media (max-width: 600px) {
  #main-footer {
    /* start collapsed on mobile */
    /* you could add this class via JS too on load */
  }
  /* or in JS: if (window.innerWidth < 600) footer.classList.add('collapsed'); */
}


/* Make the footer itself full-width and transparent */
#main-footer {
  box-shadow: none        !important;
  border-radius: 0        !important;
  margin: 0               !important;
  padding: 0
  background: none
  border: none
  width: 100%             !important;
}

/* Only hide the body, leave the header row styling intact */
#main-footer.collapsed .footer-body {
  display: none;
}

/* (Optional) If you want the footer-body to blend in even when expanded: */
#main-footer .footer-body {
  background: transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);;
}

/* Reset any default margins/padding */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ─── Ability Filter Bar ───────────────────────────────────────────────── */
#ability-shop h2 {
  margin: 0;                                  /* kill default top/bottom margin */
  padding: 0.25rem 0.5rem;                   /* slimmer padding */
  font-size: 1rem;                            /* shrink the text a bit */
  line-height: 1.2;                           /* less vertical space */
}

#ability-filter-bar {
  padding: 0.25rem 0.5rem !important;  /* tighter top/bottom padding */
  gap: 0.25rem !important;            /* narrower spacing between chips */
}

.ability-how-many {
  margin: 0 0.5rem !important;         /* tuck the count in neatly */
  font-size: 0.75rem !important;       /* shrink the “Displaying X/Y” text */
}

#ability-filter-bar span {
  padding: 0.2rem 0.5rem !important;   /* smaller “chip” hit area */
  font-size: 0.75rem !important;       /* smaller label text */
}

.filter-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.filter-bar label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.filter-bar input {
  /* hide the native box */
}

.filter-bar span {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--tag-bg-muted);
  font-size: 0.875rem;
  transition: background 0.2s, color 0.2s;
}

/* checked chips “light up” */
.filter-bar input:checked + span {
  background: var(--tag-bg-active);
  color: var(--tag-text-active);
}

/* ─── Card Entrance Animation ──────────────────────────────────────────── */
@keyframes fadeInPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0)     scale(1);
  }
}

/* ─── Count Flash Animation ──────────────────────────────────────────── */
@keyframes flashCount {
  0%   { opacity: 0.5; transform: scale(0.9); }
  50%  { opacity: 1;   transform: scale(1.1); }
  100% { opacity: 1;   transform: scale(1); }
}

.ability-how-many {
  display: inline-block;                 /* make transform work cleanly */
  transition: transform 0.2s ease;        /* in case you want a simple scale */
}

.ability-how-many.flash {
  animation: flashCount 0.3s ease forwards;
}

/* ─── Unspent‑Lore “Dot” Indicator ─────────────────────────────────── */

/* 1) Make the lores nav item a positioning context */
.sidebar li[data-target="lores"] {
  position: relative;
}

/* 2) Base styling for the unspent badge */
.unspent-indicator {
  position: absolute;
  top: 0.4rem;              /* tweak vertical offset to line up */
  right: 0.8rem;            /* tweak horizontal offset to line up */
  background-color: #e53e3e;/* red dot */
  color: white;             
  font-size: 0.75rem;       
  line-height: 1;
  border-radius: 999px;     /* pill shape by default */
  padding: 0 0.4em;         /* space for a number */
  display: inline-flex;     
  align-items: center;
  justify-content: center;
}

/* 3) “Dot” variant (no number inside) */
.unspent-indicator.dot {
  width: 0.6em;              /* make it a perfect circle */
  height: 0.6em;             
  padding: 0;                /* remove the pill padding */
  border-radius: 50%;        
}