@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;500;700&display=swap');

:root {
  --bg: #0B0B0F;
  --ink: #F2F2F5;
  --ink-muted: #9A9AA8;
  --panel: #16161C;
  --panel-border: rgba(255, 255, 255, 0.08);
  --accent: #F5C542;
  --danger: #FF5B5B;
  --ok: #53FC18;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at top, #1A1A22, var(--bg) 60%);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

.rpg-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 18px 60px;
}

h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px;
}

h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink);
}

.hidden { display: none !important; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

.step + .step { margin-top: 18px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.field input[type="text"],
.field select {
  background: #0E0E12;
  border: 1px solid var(--panel-border);
  color: var(--ink);
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 15px;
}

.hint {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

.error-msg {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin-top: 10px;
}

.btn {
  background: var(--accent);
  color: #1a1200;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.4; cursor: default; filter: none; }
.btn.secondary {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink-muted);
  width: auto;
  flex: 1;
}

.btn-row {
  display: flex;
  gap: 10px;
}
.btn-row .btn:not(.secondary) { flex: 2; }

/* ---------- Selección de raza/clase ---------- */
.choice-group { margin-bottom: 18px; }
.choice-group-label {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.choice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.choice-card {
  background: #0E0E12;
  border: 1.5px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.choice-card:hover { border-color: rgba(245, 197, 66, 0.4); }
.choice-card.selected {
  border-color: var(--accent);
  background: rgba(245, 197, 66, 0.08);
}
.choice-card .cc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  display: block;
}
.choice-card .cc-desc {
  font-size: 11.5px;
  color: var(--ink-muted);
  display: block;
  margin-top: 3px;
  line-height: 1.3;
}

/* ---------- Reparto de puntos ---------- */
.stats-allocate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.stat-allocate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0E0E12;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.stat-allocate-row .stat-label {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
}
.stat-allocate-row .stat-base {
  font-size: 12px;
  color: var(--ink-muted);
  min-width: 58px;
}
.stat-allocate-row .stat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stat-allocate-row button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.stat-allocate-row button:disabled { opacity: 0.3; cursor: default; }
.stat-allocate-row .stat-bonus {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  min-width: 18px;
  text-align: center;
  color: var(--ok);
}
.stat-allocate-row .stat-total {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  min-width: 28px;
  text-align: right;
}

.points-remaining {
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}
.points-remaining span { color: var(--accent); }

/* ---------- Hoja de personaje ---------- */
.character-sheet {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.character-sheet .cs-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.character-sheet .cs-subtitle {
  color: var(--ink-muted);
  font-size: 14px;
  margin-bottom: 14px;
}
.character-sheet .cs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.character-sheet .cs-stat {
  background: #0E0E12;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.character-sheet .cs-stat b {
  font-family: 'Rajdhani', sans-serif;
  color: var(--accent);
}

/* ---------- Nivel / experiencia ---------- */
.cs-level-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cs-level-badge {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.cs-xp-text {
  font-size: 12px;
  color: var(--ink-muted);
}

.xp-bar-track {
  width: 100%;
  height: 10px;
  background: #0E0E12;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ffe08a);
  border-radius: 999px;
}

.level-points-banner {
  background: rgba(245, 197, 66, 0.1);
  border: 1px solid rgba(245, 197, 66, 0.4);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}
.level-points-banner .lp-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

/* ---------- Inventario ---------- */
.inventory-section { margin-top: 18px; }
.inventory-section h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inventory-item {
  background: #0E0E12;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inventory-item.equipped { border-color: var(--ok); }

.inv-info { flex: 1; }
.inv-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.inv-name .rarity-comun { color: var(--ink-muted); }
.inv-name .rarity-poco_comun { color: #6FE0FF; }
.inv-name .rarity-raro { color: #B98CFF; }
.inv-name .rarity-epico { color: var(--accent); }
.inv-class-tag {
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

.inv-desc { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.inv-bonuses { font-size: 11.5px; color: var(--ok); margin-top: 2px; }
.inv-slot-tag {
  font-size: 10.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inv-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-transfer-btn,
.inv-delete-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink-muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.inv-delete-btn:hover { border-color: var(--danger); color: var(--danger); }
.inv-transfer-btn:hover { border-color: var(--accent); color: var(--accent); }
.inv-transfer-btn:disabled,
.inv-delete-btn:disabled { opacity: 0.4; cursor: default; }

.inv-transfer-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 8px;
}
.inv-transfer-form select,
.inv-transfer-form input[type="text"] {
  background: #16161C;
  border: 1px solid var(--panel-border);
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
}
.inv-transfer-form .error-msg { width: 100%; margin: 0; min-height: 0; }

.inv-equip-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink-muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-equip-btn.is-equipped { border-color: var(--ok); color: var(--ok); }

.empty-hint { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }

/* ---------- Mazmorra ---------- */
.dungeon-section { margin-top: 18px; }
.dungeon-section h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.room-card {
  background: #0E0E12;
  border: 1.5px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.room-card.type-entrada { border-color: var(--ok); }
.room-card.type-npc { border-color: var(--danger); }
.room-card.type-cofre { border-color: var(--accent); }

.room-card .room-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.room-card .room-desc {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.room-card .room-coords {
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.7;
}

.hex-directions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.hex-dir-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink);
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}
.hex-dir-btn:hover { border-color: var(--accent); }
.hex-dir-btn:disabled { opacity: 0.4; cursor: default; }

.rooms-visited-count {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 10px;
}

.character-abilities{margin:24px 0;text-align:left}.character-abilities>h3{font-size:22px;margin-bottom:16px}.character-ability{padding:18px;margin:12px 0;background:#121a13;border:1px solid #edc36e40;border-radius:8px}.character-ability h4{color:#edc36e;font-size:17px;margin:0 0 13px}.ability-commands{display:flex;flex-wrap:wrap;gap:8px}.ability-commands code{background:#edc36e15;color:#f5d696;padding:7px 10px;border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;user-select:all}.character-ability p{font-size:13px;line-height:1.7}.character-ability .ability-cooldown{color:#edc36e;margin-bottom:0}

.portrait-editor,.equipment-section{margin:24px 0;padding:20px;border:1px solid #68552e;border-radius:12px;background:#151c19}.portrait-layout{display:grid;grid-template-columns:180px 1fr;gap:22px}.portrait-preview{width:180px;height:220px;object-fit:cover;border:2px solid #a78a4c;border-radius:10px}.portrait-editor label{display:block;margin-bottom:12px}.portrait-editor select,.portrait-editor input{display:block;width:100%;margin-top:6px}.equipment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.equipment-slot{display:flex;flex-direction:column;gap:10px;background:#20281e;padding:14px;border:1px solid #655837;border-radius:8px}.equipment-slot strong{color:#edc36e}.equipment-slot select{width:100%;min-width:0}.equipment-slot small{color:#b5bba9}@media(max-width:520px){.portrait-layout{grid-template-columns:1fr}.portrait-preview{margin:auto}}

.inv-transfer-form label{display:block;width:100%}.inv-transfer-search{width:100%;box-sizing:border-box}.inv-transfer-results{width:100%;max-height:220px;overflow:auto;border:1px solid #a4884e;background:#161e18;border-radius:6px}.inv-transfer-results button{display:block;width:100%;padding:12px;text-align:left;border:0;border-bottom:1px solid #414532;background:transparent;color:#eee2ca;cursor:pointer}.inv-transfer-results button:hover,.inv-transfer-results button:focus,.inv-transfer-results button[aria-selected="true"]{background:#455038}.inv-transfer-status{width:100%;font-size:13px;color:#c9c3ab}