/* ============================================================
   ARCANUM CSS — INDICE DE SECCIONES
   Ctrl+G (VSCode) o Ctrl+L (editor) para ir directo a la línea
   ============================================================
   L.1     DESIGN TOKENS / THEMES (:root, dark, light, cyber, sepia, forest)
   L.100   BASE (reset, body, app shell)
   L.188   LAYOUT (main, header, content-area, right-panel)
   L.376   VIEW TABS + SIDEBAR (sb-profile, sb-bars, hero avatar)
   L.682   BOSS BANNER (.boss-banner, .bcard-*)
   L.893   QUESTS VIEW (.quest-item, .quest-check, filters)
   L.1120  STATS VIEW (stat-block, heatmap, charts)
   L.1190  ACHIEVEMENTS / HISTORY
   L.1264  RIGHT PANEL + SPELLS + QUICK ADD
   L.1537  MODALS (todos los modals: reward, level-up, boss, etc.)
   L.1906  FOCUS MODE
   L.2059  RESPONSIVE TABLET ≤900px
   L.2072  MOBILE ≤600px + MOBILE NAV
   L.2393  TEMAS: OLED, PERGAMINO, CYBER
   L.2436  COMPONENTS: badge, guild, XP bar, HP crítico, skeleton, toast
   L.2672  MISC: D20, FAB, CMD+K, banners, subtasks
   L.2864  SHOP + INVENTORY + SMITHY + PETS + WEAPONS
   L.3640+ CHARACTER SHEET PREMIUM (.csp-*)
   L.5340+ DUNGEON GROWS / WORLD MAP / ZONES / SALA PERSONAL
   L.6693  PREMIUM EFFECTS: shiny text, boss glow, plasma, dot field
   ============================================================ */

/* ============================================================
   DESIGN TOKENS / THEMES
   ============================================================ */
:root {
  --font-head: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow: 0 8px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --transition-spring: .22s cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"] {
  --bg: #0f1117;
  --bg2: #161b25;
  --bg3: #1e2030;
  --bg4: #252840;
  --card: #161b25;
  --card2: #1e2535;
  --border: rgba(137,180,250,.1);
  --border2: rgba(203,166,247,.45);
  --text: #cdd6f4;
  /* Texto auxiliar con contraste real sobre fondos oscuros. */
  --text2: #b2b8d0;
  --text3: #858da9;
  --accent: #89b4fa;
  --accent2: #cba6f7;
  --gold: #f9e2af;
  --green: #a6e3a1;
  --red: #f38ba8;
  --orange: #fab387;
  --blue: #89dceb;
  --glow: 0 0 24px rgba(137,180,250,.35);
  --glow2: 0 0 24px rgba(203,166,247,.25);
  --aurora1: rgba(137,180,250,.07);
  --aurora2: rgba(203,166,247,.05);
  --aurora3: rgba(166,227,161,.04);
  --glass: rgba(137,180,250,.06);
  --glass-border: rgba(137,180,250,.12);
}

[data-theme="light"] {
  --bg: #f0ecff;
  --bg2: #faf8ff;
  --bg3: #ede8ff;
  --bg4: #ddd6fe;
  --card: rgba(255,255,255,.82);
  --card2: rgba(250,248,255,.9);
  --border: rgba(139,92,246,.15);
  --border2: rgba(124,58,237,.4);
  --text: #1e1b4b;
  --text2: #4c1d95;
  --text3: #7c3aed;
  --accent: #7c3aed;
  --accent2: #0891b2;
  --gold: #059669;
  --green: #16a34a;
  --red: #e11d48;
  --orange: #a21caf;
  --blue: #0284c7;
  --glow: 0 0 30px rgba(124,58,237,.25);
  --glow2: 0 0 20px rgba(8,145,178,.2);
  --aurora1: rgba(124,58,237,.05);
  --aurora2: rgba(8,145,178,.04);
  --aurora3: rgba(5,150,105,.03);
  --glass: rgba(124,58,237,.05);
  --glass-border: rgba(124,58,237,.12);
}

[data-theme="cyber"] {
  --bg: #000510;
  --bg2: #00091e;
  --bg3: #000d28;
  --bg4: #001235;
  --card: rgba(0,16,44,.85);
  --card2: rgba(0,20,52,.9);
  --border: rgba(56,189,248,.12);
  --border2: rgba(56,189,248,.35);
  --text: #e0f2fe;
  --text2: #7dd3fc;
  --text3: #0ea5e9;
  --accent: #38bdf8;
  --accent2: #e879f9;
  --gold: #34d399;
  --green: #4ade80;
  --red: #f43f5e;
  --orange: #c084fc;
  --blue: #60a5fa;
  --glow: 0 0 30px rgba(56,189,248,.4);
  --glow2: 0 0 30px rgba(232,121,249,.3);
  --aurora1: rgba(56,189,248,.05);
  --aurora2: rgba(232,121,249,.04);
  --aurora3: rgba(52,211,153,.03);
  --glass: rgba(56,189,248,.05);
  --glass-border: rgba(56,189,248,.12);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Ambient gradient background — static, no animation */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 10%, var(--aurora1), transparent 55%),
    radial-gradient(ellipse 55% 45% at 90% 90%, var(--aurora2), transparent 55%),
    radial-gradient(ellipse 50% 60% at 60% 0%,  var(--aurora3), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Static ambient orbs — no animation for performance */
.orb-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; }
.orb-purple {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(137,180,250,.13) 0%, transparent 70%);
  top: -150px; right: -100px;
}
.orb-cyan {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(203,166,247,.09) 0%, transparent 70%);
  bottom: -120px; left: -80px;
}
.orb-green {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(166,227,161,.06) 0%, transparent 70%);
  top: 45%; left: 35%;
}
.orb-indigo {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(137,180,250,.06) 0%, transparent 70%);
  top: 5%; left: 55%;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
  transition: var(--transition);
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: inherit;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  outline: none;
  transition: var(--transition);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(137,180,250,.15), var(--glow);
  background: var(--card2);
}

input::placeholder, textarea::placeholder { color: var(--text3); }

/* ============================================================
   LAYOUT
   ============================================================ */
.header {
  background: #0d1117;
  border-bottom: 1px solid rgba(137,180,250,.1);
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(137,180,250,.06), 0 2px 16px rgba(0,0,0,.5);
}

.header-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

[data-theme="light"] .header { background: rgba(250,248,255,.98); }

.header-logo {
  font-family: var(--font-head);
  font-size: 19px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.header-logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
}

.header-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.hero-avatar-btn {
  font-size: 22px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg3), var(--bg3)) padding-box,
              linear-gradient(135deg, var(--accent), var(--accent2)) border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-spring);
  position: relative;
}

.hero-avatar-btn .hero-avatar-img,
.hero-avatar-btn .hero-avatar-emoji { border-radius: 7px; }
.hero-avatar-btn[class*="frame-"]::after {
  /* El retrato no lleva una ilustración superpuesta: tapaba la silueta. */
  display: none;
}

.hero-avatar-btn:hover { transform: scale(1.08); }

/* ── Marcos de avatar cosméticos (compra única en tienda) ─── */
.hero-avatar-btn.frame-bronce {
  background: linear-gradient(var(--bg3), var(--bg3)) padding-box,
              linear-gradient(135deg, #b87333, #8a5a2b) border-box;
}
.hero-avatar-btn.frame-plata {
  background: linear-gradient(var(--bg3), var(--bg3)) padding-box,
              linear-gradient(135deg, #d1d5db, #9ca3af) border-box;
  box-shadow: 0 0 10px rgba(209,213,219,.35);
}
.hero-avatar-btn.frame-oro {
  background: linear-gradient(var(--bg3), var(--bg3)) padding-box,
              linear-gradient(135deg, #facc15, #f59e0b) border-box;
  box-shadow: 0 0 14px rgba(250,204,21,.45);
}
.hero-avatar-btn.frame-arcano {
  background: linear-gradient(var(--bg3), var(--bg3)) padding-box,
              linear-gradient(135deg, #c084fc, #60a5fa, #f472b6) border-box;
  box-shadow: 0 0 16px rgba(192,132,252,.5);
  animation: _anim-frameArcanoGlow 3s ease-in-out infinite;
}
@keyframes _anim-frameArcanoGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(192,132,252,.5); }
  50%      { box-shadow: 0 0 22px rgba(96,165,250,.6); }
}

.hero-info { display: flex; flex-direction: column; }

.hero-name {
  font-family: var(--font-head);
  font-size: 13px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.hero-title { font-size: 11px; color: var(--text3); }

.xp-bar-wrap {
  flex: 1;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xp-bar-label { font-size: 10px; color: var(--text2); display: flex; justify-content: space-between; }

.xp-bar {
  height: 7px;
  background: rgba(137,180,250,.1);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  position: relative;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius: 6px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
  position: relative;
}

.xp-bar-fill::after { display: none; }

.hp-bar-wrap {
  max-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-bar-label { font-size: 10px; color: var(--text2); display: flex; justify-content: space-between; }

.hp-bar {
  height: 7px;
  background: rgba(251,113,133,.1);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(251,113,133,.15);
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, var(--red), #ff6b8a);
  border-radius: 6px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
  position: relative;
}

.hp-bar-fill::after { display: none; }

.header-stats { display: flex; gap: 8px; align-items: center; }

.stat-chip {
  background: rgba(137,180,250,.07);
  border: 1px solid rgba(137,180,250,.15);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
  transition: var(--transition);
}

.stat-chip:hover { border-color: var(--border2); box-shadow: var(--glow); }
.stat-chip span { color: var(--gold); font-weight: 600; }

.header-actions { display: flex; gap: 2px; align-items: center; }
.header-tools { display: flex; gap: 2px; align-items: center; margin-left: auto; }

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(137,180,250,.07);
  border: 1px solid rgba(137,180,250,.12);
  color: var(--text2);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-spring);
}

.icon-btn:hover { border-color: var(--border2); color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); }
.icon-btn:active { transform: scale(.92) translateY(0); }

.main {
  display: grid;
  grid-template-columns: 195px 1fr 290px;
  grid-template-rows: 1fr;
  gap: 0;
  height: calc(100vh - 48px);
  overflow: hidden;
}

.content-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   VIEW TABS
   ============================================================ */
/* view-tabs hidden on desktop — sidebar handles nav */
.view-tabs { display: none; }

/* ============================================================
   SIDEBAR — 200px with hero profile
   ============================================================ */
.sidebar {
  background: #161b25;
  border-right: 1px solid rgba(137,180,250,.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* ── Hero profile — Opción A ──────────────────────────────────── */
.sb-profile {
  padding: 16px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(137,180,250,.08);
  flex-shrink: 0;
  background: var(--sb-tod-gradient, linear-gradient(170deg, rgba(127,90,240,.16) 0%, transparent 68%));
  transition: background 3s ease;
}

.sb-avatar-ring {
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: var(--accent, #7f5af0);
  margin-bottom: 4px;
  box-shadow: 0 0 14px rgba(127,90,240,.45);
}

.sb-profile .hero-avatar-btn {
  width: 90px !important;
  height: 90px !important;
  font-size: 48px !important;
  border-radius: 50% !important;
  border: 3px solid #161b25 !important;
  background: var(--bg3) !important;
  box-shadow: none !important;
}
.sb-avatar-ring.has-cosmetic-frame {
  padding: 2px;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
}
.sb-avatar-ring.has-cosmetic-frame .daily-ring-svg { display: none; }
.sb-avatar-ring.has-cosmetic-frame .hero-avatar-btn {
  border: 2px solid var(--frame-color, #a855f7) !important;
  border-radius: 11px !important;
  background: rgba(12,7,22,.6) !important;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 0 14px color-mix(in srgb, var(--frame-color, #a855f7) 35%, transparent) !important;
}
.sb-avatar-ring.has-cosmetic-frame .hero-avatar-img {
  position: relative;
  z-index: 1;
  border-radius: 8px !important;
}
.sb-avatar-ring.has-cosmetic-frame .hero-avatar-btn.frame-bronce { --frame-color:#c98248; }
.sb-avatar-ring.has-cosmetic-frame .hero-avatar-btn.frame-plata { --frame-color:#cbd5e1; }
.sb-avatar-ring.has-cosmetic-frame .hero-avatar-btn.frame-oro { --frame-color:#fbbf24; }
.sb-avatar-ring.has-cosmetic-frame .hero-avatar-btn.frame-arcano { --frame-color:#c084fc; }
.sb-avatar-ring.has-cosmetic-frame .avatar-level-badge { z-index: 4; }

.sb-profile .hero-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  box-sizing: border-box;
}
.sb-profile .hero-title {
  font-size: 10px;
  color: var(--accent);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  box-sizing: border-box;
}

/* Nav section separators — línea full-ancho en grid */
.sb-nav-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(137,180,250,.12);
  margin: 4px 0;
}

/* XP / HP / Mana bars — icon + bar inline */
.sb-bars {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid rgba(137,180,250,.08);
  flex-shrink: 0;
}
.sb-bar-block  { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; }
.sb-bar-header { display: contents; }
.sb-bar-lbl    { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; order: 1; }
.sb-bars .sb-bar { flex: 1; height: 8px; border-radius: 4px; overflow: hidden; order: 2; min-width: 0; }
.sb-bar-val    { display: block; order: 3; width: 100%; font-size: 9px; color: var(--text3); padding-left: 21px; margin-top: 2px; white-space: nowrap; }

/* Mini stat cards — 3 en fila con color */
.sb-stats {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  border-bottom: 1px solid rgba(137,180,250,.08);
  flex-shrink: 0;
}
.sb-stat-card {
  background: rgba(137,180,250,.07);
  border: 1px solid rgba(137,180,250,.14);
  border-radius: 7px;
  padding: 6px 2px;
  text-align: center;
  transition: var(--transition);
}
.sb-stat-card:hover { border-color: rgba(137,180,250,.3); background: rgba(137,180,250,.14); }
.sb-stat-val { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-head); line-height: 1.2; }
.sb-stat-art,.sb-resource-art,.char-tab-art,.nav-art,.view-tab-art { width:16px; height:16px; object-fit:contain; image-rendering:pixelated; vertical-align:middle; }
.sb-resource-art { width:13px; height:13px; margin-right:3px; }
.sb-stat-art { width:14px; height:14px; margin-right:3px; }
.char-tab-art { width:17px; height:17px; margin-right:5px; }
.weather-art,.clock-art { width:16px; height:16px; object-fit:contain; image-rendering:pixelated; vertical-align:middle; }
.weather-detail-icon.weather-art { width:34px; height:34px; }
.chr-qs-v img { width:15px; height:15px; object-fit:contain; image-rendering:pixelated; vertical-align:-2px; margin-right:3px; }
.sb-stat-lbl { font-size: 8px; color: var(--text3); margin-top: 2px; display: block; }

.sb-divider { height: 1px; background: rgba(137,180,250,.08); flex-shrink: 0; }

/* Navigation — grid 3 columnas */
.sb-nav {
  flex: 1;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: start;
}

.sidebar-item {
  height: 52px;
  padding: 6px 2px 5px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #9aa3c0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}
.sidebar-item:hover  { background: rgba(137,180,250,.12); color: #e3e8ff; z-index: 5; }
.sidebar-item.active {
  background: linear-gradient(145deg, rgba(126,66,183,.38), rgba(72,35,112,.22));
  border-color: rgba(216,180,254,.66);
  color: #f2e6ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 13px rgba(168,85,247,.18);
}

/* Inline label below icon — uses data-label attribute */
.sidebar-item::after {
  content: attr(data-label);
  display: block;
  font-size: 9px;
  font-family: var(--font-body);
  color: currentColor;
  opacity: .96;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
  line-height: 1;
}

.si-icon  { font-size: 18px; line-height: 1; }
.si-icon-img { width: 20px; height: 20px; object-fit: contain; }
.si-label { display: none; }

/* Action buttons grid at the bottom */
.sb-actions {
  border-top: 1px solid rgba(137,180,250,.08);
  padding: 10px 14px 14px;
  flex-shrink: 0;
}
.sb-actions-label {
  font-size: 9px;
  color: #aeb6d2;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-bottom: 8px;
  font-family: var(--font-head);
}
.sb-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sb-action-btn {
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(137,180,250,.07);
  border: 1px solid rgba(137,180,250,.1);
  color: var(--text2);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.sb-action-btn:hover {
  background: rgba(137,180,250,.16);
  border-color: rgba(137,180,250,.3);
  color: var(--accent);
  transform: translateY(-1px);
}
.sb-action-btn:active { transform: scale(.93); }
.sb-more { position: relative; }
.more-menu-up { bottom: calc(100% + 6px) !important; top: auto !important; left: 0 !important; right: auto !important; }

/* ── WEATHER CHIP (header) ───────────────────────────────── */
.weather-wrap { position: relative; }
.weather-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; padding: 5px 10px; border-radius: 8px;
  background: rgba(137,180,250,.07); border: 1px solid rgba(137,180,250,.12);
  color: var(--text2); white-space: nowrap; cursor: pointer; transition: var(--transition);
}
.weather-chip:hover { background: rgba(137,180,250,.14); border-color: rgba(137,180,250,.25); }

.weather-detail-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 220px; background: var(--card); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 14px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.weather-detail-panel.open { display: block; }
.weather-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.weather-detail-icon { font-size: 32px; }
.weather-detail-temp { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
.weather-detail-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }
.weather-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.weather-detail-item {
  display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--text3);
  background: rgba(137,180,250,.05); border-radius: 8px; padding: 6px 8px;
}
.weather-detail-item strong { font-size: 13px; color: var(--text); font-family: var(--font-head); }

/* Keep .view-tab for mobile bottom nav */
.view-tab {
  padding: 8px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  bottom: -1px;
}
.view-tab.active { color: var(--accent); font-weight: 500; }

.views { flex: 1; overflow: hidden; }

.view { display: none; height: 100%; overflow-y: auto; padding: 20px; }
@media (min-width: 641px) { .view { padding-bottom: 96px; } }

.view.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: view-enter .25s ease;
}

@keyframes view-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   DAILY BOSS BANNER
   ============================================================ */
.boss-banner {
  background: linear-gradient(135deg, #1a0520 0%, #0d0720 50%, #0a0d1f 100%);
  border: 1px solid rgba(251,113,133,.28);
  border-left: 3px solid #fb7185;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(251,113,133,.1);
}

.boss-icon { font-size: 40px; flex-shrink: 0; line-height: 1; }

.boss-info { flex: 1; min-width: 0; }

.boss-label {
  font-size: 9px;
  color: #fb7185;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-head);
  margin-bottom: 4px;
}

.boss-name { font-family: var(--font-head); font-size: 16px; color: var(--text); font-weight: 700; margin-bottom: 8px; }

.boss-meta { font-size: 11px; color: var(--text2); }

/* Boss-defeated state */
.boss-defeated { font-family: var(--font-head); font-size: 13px; color: var(--green); }

/* ── MULTI-BOSS CARDS (v72) ──────────────────────────────────── */
.boss-layout {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.boss-scroll {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.boss-scroll::-webkit-scrollbar { display: none; }
.boss-scroll .boss-grid {
  flex-wrap: nowrap;
  margin-bottom: 0;
  min-width: min-content;
  justify-content: flex-start;
}
.boss-info-panel {
  width: 280px;
  min-height: 0;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(12,3,22,.82) 0%, rgba(4,4,14,.97) 100%);
  border: 1px solid rgba(99,102,241,.2);
  border-top: 2px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.bip-title {
  font-family: var(--font-head);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text3);
  margin-bottom: 8px;
}
.boss-info-panel .effects-bar {
  margin-bottom: 0;
}
.boss-info-panel .daily-goal-bar {
  margin: 0 0 10px;
}
.boss-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.bcard {
  width: 280px;
  height: auto;
  background: linear-gradient(180deg, rgba(12,3,22,.45) 0%, rgba(6,6,18,.65) 55%, rgba(4,4,14,.88) 100%), var(--bcard-bg, none);
  border: 1px solid rgba(251,113,133,.2);
  border-top: 2px solid var(--rc, #fb7185);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px;
  gap: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.bcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(251,113,133,.08) 0%, transparent 60%);
  pointer-events: none;
}
.bcard-urgent { animation: bcardPulse 1.6s infinite alternate; }
@keyframes bcardPulse { to { box-shadow: 0 0 22px rgba(251,113,133,.35), 0 4px 32px rgba(0,0,0,.4); } }
.bcard-defeated { border-top-color: #4ade80; }
.bcard-empty    { opacity: .35; }

.bcard-cycle {
  font-family: var(--font-head);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--rc, #9ca3af);
  margin-bottom: 2px;
  align-self: flex-start;
}
.bcard-portrait-wrap {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.bcard-img {
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 160px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
}
.bcard-emoji   { font-size: 72px; line-height: 1; }
.bcard-no-boss { text-align: center; font-size: 36px; color: var(--text3); line-height: 1.6; }
.bcard-no-boss span { font-size: 11px; display: block; }
.bcard-name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}
.bcard-rarity  { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 8px currentColor; }
.bcard-hp-bar  { width: 100%; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bcard-hp-fill { height: 100%; border-radius: 4px; transition: width .5s; }
.bcard-bottom  { display: flex; justify-content: space-between; width: 100%; }
.bcard-hp-txt  { font-size: 11px; font-weight: 700; color: var(--text2); }
.bcard-time    { font-size: 11px; color: var(--text3); }

/* ── EFFECTS BAR (v69) ──────────────────────────────────────── */
.effects-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .18s;
}
.effects-bar:hover { background: rgba(255,255,255,.07); }
.efx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(168,85,247,.1);
  border: 1px solid rgba(168,85,247,.22);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}
.efx-chip-icon { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.efx-chip-name { font-weight: 600; color: var(--text); }
.efx-chip-val  { color: var(--efx-clr, #a855f7); font-weight: 700; font-size: 10px; }
.efx-more      { color: var(--text3); font-size: 10px; }
.efx-expand    { margin-left: auto; color: var(--text3); font-size: 10px; flex-shrink: 0; }
/* Effects modal rows */
.efx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid var(--efx-clr, #a855f7);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.efx-row-icon { font-size: 20px; flex-shrink: 0; }
img.efx-row-icon { width: 24px; height: 24px; object-fit: contain; }
.efx-row-name { font-size: 13px; font-weight: 700; color: var(--text); }
.efx-row-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* ============================================================
   QUESTS VIEW
   ============================================================ */
.quest-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.add-quest-trigger-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.add-quest-trigger-btn:hover { opacity: .85; }

.search-box {
  flex: 1;
  min-width: 120px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.filter-tabs {
  display: flex;
  gap: 3px;
  background: var(--glass);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
}

.filter-tab {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text2);
  cursor: pointer;
  transition: var(--transition);
}

.filter-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  box-shadow: 0 2px 12px rgba(137,180,250,.4);
}

.sort-select { font-size: 14px; padding: 6px 10px; }

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

.quest-item {
  background: var(--card);
  border: 1px solid rgba(137,180,250,.1);
  border-radius: 12px;
  padding: 13px 14px 13px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.quest-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
}

/* Type bars */
.quest-item[data-type="main"]::before   { background: linear-gradient(180deg, #fbbf24, #34d399); }
.quest-item[data-type="daily"]::before  { background: linear-gradient(180deg, #4ade80, #22d3ee); }
.quest-item[data-type="weekly"]::before { background: linear-gradient(180deg, #60a5fa, #a78bfa); }

/* Rarity bars — override type */
.quest-item[data-priority="mitico"]::before     { background: linear-gradient(180deg, #ef4444, #fca5a5); }
.quest-item[data-priority="legendario"]::before { background: linear-gradient(180deg, #f59e0b, #fde68a); }
.quest-item[data-priority="epico"]::before      { background: linear-gradient(180deg, #a855f7, #d8b4fe); }
.quest-item[data-priority="normal"]::before     { background: linear-gradient(180deg, #60a5fa, #93c5fd); }
.quest-item[data-priority="comun"]::before      { background: rgba(137,180,250,.2); }
.quest-item[data-priority="urgente"]::before    { background: linear-gradient(180deg, var(--red), #fda4af); }

/* Rarity card backgrounds */
.quest-item[data-priority="mitico"]     { background: linear-gradient(100deg, rgba(239,68,68,.1) 0%, var(--card) 55%); border-color: rgba(239,68,68,.22); }
.quest-item[data-priority="legendario"] { background: linear-gradient(100deg, rgba(245,158,11,.08) 0%, var(--card) 55%); border-color: rgba(245,158,11,.18); }
.quest-item[data-priority="epico"]      { background: linear-gradient(100deg, rgba(137,180,250,.1) 0%, var(--card) 55%); border-color: rgba(137,180,250,.22); }

/* Hover — slide right instead of lift */
.quest-item:hover {
  border-color: rgba(137,180,250,.4);
  transform: translateX(3px);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  background: var(--card2);
}
.quest-item[data-priority="mitico"]:hover     { background: linear-gradient(100deg, rgba(239,68,68,.14) 0%, var(--card2) 55%); border-color: rgba(239,68,68,.4); }
.quest-item[data-priority="legendario"]:hover { background: linear-gradient(100deg, rgba(245,158,11,.11) 0%, var(--card2) 55%); border-color: rgba(245,158,11,.35); }
.quest-item[data-priority="epico"]:hover      { background: linear-gradient(100deg, rgba(137,180,250,.14) 0%, var(--card2) 55%); border-color: rgba(137,180,250,.5); }

.quest-item:active { transform: translateX(0) scale(.998); }

.quest-item.done { opacity: .38; }
.quest-item.done .quest-name { text-decoration: line-through; color: var(--text3); }
.quest-item.done:hover { transform: none; box-shadow: none; }

.quest-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  transition: var(--transition-spring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  background: var(--glass);
}

.quest-check:hover { border-color: var(--accent); transform: scale(1.15); box-shadow: 0 0 12px rgba(137,180,250,.4); }

.quest-item.done .quest-check {
  background: linear-gradient(135deg, var(--green), #86efac);
  border-color: transparent;
  color: white;
  box-shadow: 0 0 12px rgba(74,222,128,.4);
}

.quest-body { flex: 1; min-width: 0; }

.quest-name { font-size: 14px; color: var(--text); line-height: 1.4; font-weight: 500; }

.quest-meta {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  /* backdrop-filter removed for perf */
}

.badge-type-main    { background: rgba(16,185,129,.12);  color: var(--gold);    border: 1px solid rgba(16,185,129,.25); }
.badge-type-side    { background: rgba(129,140,248,.12); color: var(--accent2); border: 1px solid rgba(129,140,248,.25); }
.badge-type-daily   { background: rgba(52,211,153,.12);  color: var(--green);   border: 1px solid rgba(52,211,153,.25); }
.badge-type-weekly  { background: rgba(96,165,250,.12);  color: var(--blue);    border: 1px solid rgba(96,165,250,.25); }

/* legacy — keep so old saved quests don't break */
.badge-priority-urgente { background: rgba(248,113,113,.12); color: var(--red);   border: 1px solid rgba(248,113,133,.3); }
.badge-priority-baja    { background: rgba(96,165,250,.07);  color: var(--text3); border: 1px solid var(--border); }

/* rarity badges */
.badge-rarity-mitico    { background: rgba(239,68,68,.15);   color: #f87171; border: 1px solid rgba(239,68,68,.4);   font-weight:700; letter-spacing:.3px; }
.badge-rarity-legendario{ background: rgba(245,158,11,.15);  color: var(--gold); border: 1px solid rgba(245,158,11,.4); font-weight:700; }
.badge-rarity-epico     { background: rgba(137,180,250,.15);  color: #c084fc; border: 1px solid rgba(137,180,250,.4);  font-weight:600; }
.badge-rarity-normal    { background: rgba(96,165,250,.12);  color: var(--blue); border: 1px solid rgba(96,165,250,.3); }
.badge-rarity-comun     { background: rgba(148,163,184,.08); color: var(--text3); border: 1px solid var(--border); }

.deadline-badge { font-size: 11px; color: var(--text3); }
.deadline-badge.overdue { color: var(--red); font-weight: 600; }

.xp-reward {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.18);
  border-radius: 20px;
  padding: 1px 7px;
}

.quest-notes { font-size: 12px; color: var(--text2); margin-top: 5px; font-style: italic; line-height: 1.5; }

.quest-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 1;
}

.quest-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(137,180,250,.1);
  background: rgba(137,180,250,.06);
  color: var(--text3);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-spring);
}

.quest-action-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.15); box-shadow: 0 0 10px rgba(137,180,250,.3); }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text3);
}

.empty-state-icon { font-size: 52px; margin-bottom: 14px; }

.empty-state h3 { font-family: var(--font-head); font-size: 18px; color: var(--text2); margin-bottom: 8px; }


/* ============================================================
   STATS VIEW
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stats-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: var(--transition);
}

.stats-card:hover { border-color: var(--border2); box-shadow: var(--glow); }

.stats-card-title {
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.mini-bar-chart { display: flex; gap: 4px; align-items: flex-end; height: 80px; }

.mini-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.mini-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -4px 12px rgba(137,180,250,.3);
}

.mini-bar-label { font-size: 9px; color: var(--text3); }

.type-distribution { display: flex; flex-direction: column; gap: 10px; }

.dist-row { display: flex; align-items: center; gap: 8px; }

.dist-label { font-size: 11px; color: var(--text2); width: 60px; }

.dist-bar-bg { flex: 1; height: 6px; background: rgba(137,180,250,.08); border-radius: 4px; overflow: hidden; }

.dist-bar { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1); }

.dist-count { font-size: 11px; color: var(--text3); width: 20px; text-align: right; }

.streak-display { display: flex; align-items: center; gap: 14px; }

.streak-fire { font-size: 36px; }

.streak-number {
  font-family: var(--font-head);
  font-size: 36px;
  background: linear-gradient(135deg, var(--orange), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.streak-label { font-size: 11px; color: var(--text2); }

/* ============================================================
   ACHIEVEMENTS VIEW
   ============================================================ */
.achievements-grid {
  display: block;
}

.achievement-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: var(--transition);
}

.achievement-card.unlocked {
  border-color: rgba(16,185,129,.3);
  box-shadow: 0 0 20px rgba(16,185,129,.15);
  background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(203,166,247,.04));
}

.achievement-card.unlocked:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(16,185,129,.2); }

.achievement-card.locked { opacity: .45; }

.achievement-icon { font-size: 30px; }
.achievement-icon-img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.ach-cat-grid .achievement-icon-img { width: 32px; height: 32px; }

.achievement-info { flex: 1; }

.achievement-name { font-size: 13px; font-weight: 600; color: var(--text); }

.achievement-desc { font-size: 11px; color: var(--text2); margin-top: 3px; line-height: 1.4; }

/* ============================================================
   HISTORY VIEW
   ============================================================ */
.history-group { margin-bottom: 18px; }

.history-date {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.history-item {
  padding: 9px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
}

.history-item:hover { border-color: var(--border2); }

.history-item-icon { font-size: 15px; }

.history-item-name { flex: 1; font-size: 15px; color: var(--text2); text-decoration: line-through; }

.history-item-xp { font-size: 13px; color: var(--gold); font-weight: 500; }

/* ============================================================
   RIGHT PANEL — Glass sidebar
   ============================================================ */
.right-panel {
  background: #161b25;
  border-left: 1px solid rgba(137,180,250,.12);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.right-panel > * { position: relative; z-index: 1; }

[data-theme="light"] .right-panel { background: rgba(250,248,255,.98); border-left-color: rgba(139,92,246,.12); }

.panel-section {
  border-bottom: 1px solid var(--border);
  padding: 18px;
}

.panel-title {
  font-family: var(--font-head);
  font-size: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pomodoro-timer { text-align: center; }

.timer-ring {
  position: relative;
  width: 164px;
  height: 164px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 18px rgba(137,180,250,.35));
}

.timer-ring svg { transform: rotate(-90deg); }

.timer-ring-bg { fill: none; stroke: rgba(137,180,250,.12); stroke-width: 9; }

.timer-ring-fill {
  fill: none;
  stroke: url(#timerGrad);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s linear;
}

.timer-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer-time {
  font-family: var(--font-head);
  font-size: 34px;
  background: linear-gradient(135deg, #c6d9ff, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -.5px;
}

.timer-phase {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-head);
}

.timer-controls { display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 14px; }

.timer-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(137,180,250,.08);
  border: 1px solid rgba(137,180,250,.18);
  color: var(--text2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-spring);
}

.timer-btn.primary {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: white;
  font-size: 22px;
  box-shadow: 0 4px 24px rgba(137,180,250,.45), 0 0 0 4px rgba(137,180,250,.1);
}

.timer-btn:hover { transform: scale(1.1); border-color: rgba(137,180,250,.4); color: var(--accent); }
.timer-btn.primary:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(137,180,250,.65), 0 0 0 6px rgba(137,180,250,.15); }
.timer-btn:active { transform: scale(.92); }

.timer-duration-select { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; }

.dur-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(137,180,250,.06);
  border: 1px solid rgba(137,180,250,.14);
  color: var(--text2);
  cursor: pointer;
  transition: var(--transition);
}

.dur-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 14px rgba(137,180,250,.45);
}

.dur-btn:hover:not(.active) { border-color: rgba(137,180,250,.3); color: var(--accent); }

.pom-count { display: flex; gap: 7px; justify-content: center; margin-bottom: 14px; }

.pom-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(137,180,250,.2);
  background: rgba(137,180,250,.05);
  transition: var(--transition-spring);
}

.pom-dot.done {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  box-shadow: 0 0 10px rgba(137,180,250,.6);
  transform: scale(1.2);
}

.pom-task-label {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  background: rgba(137,180,250,.06);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  border: 1px solid rgba(137,180,250,.12);
  line-height: 1.4;
  margin-bottom: 10px;
  cursor: pointer;
}
.pom-task-label:hover { border-color: rgba(137,180,250,.3); color: var(--text); }

/* ============================================================
   SPELLS PANEL — orb grid
   ============================================================ */
.spells-list { display: block; }

.spell-orbs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.spell-orb {
  --spell-clr: #a855f7;
  background: rgba(0,0,0,.25);
  border: 1px solid color-mix(in srgb, var(--spell-clr) 25%, transparent);
  border-radius: 14px;
  padding: 14px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: var(--transition-spring);
  position: relative;
  overflow: hidden;
}
.spell-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--spell-clr) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.spell-orb:hover:not(.cd) {
  border-color: color-mix(in srgb, var(--spell-clr) 60%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--spell-clr) 30%, transparent);
  transform: translateY(-2px);
}
.spell-orb:active:not(.cd) { transform: scale(.95); }
.spell-orb.cd { opacity: .5; cursor: not-allowed; }

.spell-orb-icon  { font-size: 20px; line-height: 1; }
.spell-orb-img   { width: 44px; height: 44px; object-fit: contain; image-rendering: crisp-edges; }
.spell-orb-name  { font-size: 10px; font-weight: 600; color: var(--text); font-family: var(--font-head); text-align: center; letter-spacing: .02em; margin-top: 2px; }
.spell-orb-frags { font-size: 11px; font-weight: 700; text-align: center; margin-top: 1px; }
.spell-orb-ready { color: color-mix(in srgb, var(--spell-clr) 90%, white); }
.spell-orb-cd    { color: var(--text3); }
.spell-orb-mana  { font-size: 10px; font-weight: 600; color: #60a5fa; text-align: center; margin-top: 1px; }
.spell-mana-low  { color: #f87171; }

/* Loot popup */
.loot-popup {
  position: fixed; bottom: 80px; right: 20px; z-index: 8000;
  background: linear-gradient(135deg, var(--card2), var(--card));
  min-width: 220px;
  border: 1px solid var(--border2);
  border-radius: 14px; padding: 12px 16px;
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none; max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.loot-popup.visible { opacity: 1; transform: translateY(0) scale(1); }
.loot-popup-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.loot-popup-row   { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.loot-popup-row + .loot-popup-row { border-top: 1px solid var(--border); }
.loot-popup-img        { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.loot-popup-gold-icon  { width: 36px; height: 36px; font-size: 24px; line-height: 36px; text-align: center; flex-shrink: 0; }
.loot-popup-name  { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
.loot-popup-qty   { font-size: 16px; font-weight: 800; color: var(--accent); font-family: var(--font-head); }

/* ============================================================
   QUICK ADD PANEL
   ============================================================ */
.quick-add-form { display: flex; flex-direction: column; gap: 9px; }

.quick-input { width: 100%; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.add-btn {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: white;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .6px;
  transition: var(--transition-spring);
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 20px rgba(137,180,250,.35);
  position: relative;
  overflow: hidden;
}

.add-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(137,180,250,.55); }
.add-btn:active { transform: scale(.97); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

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

.modal {
  background: #0f0f28;
  border: 1px solid rgba(137,180,250,.18);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 490px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(.93) translateY(8px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}

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

.modal-title {
  font-family: var(--font-head);
  font-size: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header .modal-title { margin-bottom: 0; }

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.modal-close:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }

.modal-body { display: flex; flex-direction: column; gap: 14px; }

.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-label { font-size: 13px; color: var(--text3); text-transform: uppercase; letter-spacing: .7px; font-weight: 500; }

.form-input { width: 100%; }

.modal-footer { display: flex; gap: 8px; margin-top: 22px; justify-content: flex-end; }

/* Formularios de misión: el contenido puede crecer sin perder sus acciones. */
.quest-editor-modal {
  max-width: 560px;
  max-height: min(90vh, 820px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.quest-editor-modal .modal-header { margin: 0; padding: 24px 28px 16px; flex-shrink: 0; }
.quest-editor-modal .modal-body { padding: 0 28px 20px; overflow-y: auto; min-height: 0; }
.quest-modal-footer {
  margin: 0;
  padding: 16px 28px 24px;
  border-top: 1px solid rgba(192,132,252,.18);
  background: linear-gradient(180deg, rgba(15,15,40,.86), rgba(15,15,40,.98));
  flex-shrink: 0;
  align-items: center;
}
.quest-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quest-modal-actions-primary { margin-left: auto; }
.quest-inline-fields { display: flex; gap: 8px; align-items: center; }
.quest-inline-fields > :first-child { flex: 2; }
.quest-inline-fields input[type="number"] { flex: 1; min-width: 64px; }
.quest-inline-fields .btn { white-space: nowrap; flex-shrink: 0; }
.form-hint { font-size: 10px; color: var(--text2); margin-top: 4px; }
@media (max-width: 600px) {
  .quest-editor-modal .modal-header { padding: 20px 18px 14px; }
  .quest-editor-modal .modal-body { padding: 0 18px 16px; }
  .quest-modal-footer { padding: 14px 18px max(18px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .quest-modal-actions { width: 100%; }
  .quest-modal-actions-primary { margin-left: 0; justify-content: flex-end; }
  .quest-inline-fields { flex-wrap: wrap; }
  .quest-inline-fields > :first-child { flex: 1 1 100%; }
}

.btn { padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: var(--transition-spring); border: none; font-weight: 500; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  box-shadow: 0 4px 16px rgba(137,180,250,.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(137,180,250,.5); }
.btn-primary:active { transform: scale(.96); }

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text2);
  /* backdrop-filter removed for perf */
}
.btn-ghost:hover { border-color: var(--border2); color: var(--accent); transform: translateY(-1px); }

.btn-danger {
  background: linear-gradient(135deg, var(--red), #e11d48);
  color: white;
  box-shadow: 0 4px 16px rgba(251,113,133,.3);
}

/* Level Up Modal */
.levelup-modal .modal {
  text-align: center;
  background: linear-gradient(135deg, rgba(12,12,40,.95), rgba(26,26,69,.95));
  border-color: rgba(137,180,250,.4);
  box-shadow: 0 0 80px rgba(137,180,250,.4), 0 30px 60px rgba(0,0,0,.7);
}

.levelup-icon {
  font-size: 72px;
  animation: levelup-bounce .8s cubic-bezier(.34,1.56,.64,1) infinite alternate;
}

@keyframes levelup-bounce {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.12) translateY(-6px); }
}

.levelup-level {
  font-family: var(--font-head);
  font-size: 56px;
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.levelup-title {
  font-family: var(--font-head);
  font-size: 24px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 10px 0;
}

.levelup-desc { color: var(--text2); }

.levelup-perks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 4px;
  text-align: left;
}
.levelup-perk {
  background: rgba(127,90,240,.12);
  border: 1px solid rgba(127,90,240,.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text2);
  animation: lu-perk-in .35s ease backwards;
}
@keyframes lu-perk-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.levelup-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.levelup-star {
  position: absolute;
  font-size: 18px;
  animation: star-float 1.6s ease-out forwards;
}
@keyframes star-float {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-90px) scale(.3) rotate(30deg); }
}

/* ── Habit Heatmap ──────────────────────────────────── */
.hh-day-labels { display: flex; flex-direction: column; gap: 3px; float: left; margin-right: 6px; padding-top: 1px; }
.hh-day-labels span { font-size: 9px; color: var(--text3); height: 12px; line-height: 12px; }
.hh-grid {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-columns: 12px;
  grid-auto-flow: column;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.hh-cell { width: 12px; height: 12px; border-radius: 2px; }
.hh-done { background: #4ade80; }
.hh-miss { background: rgba(137,180,250,.1); border: 1px solid rgba(137,180,250,.07); }
.hh-future { background: transparent; border: 1px dashed rgba(137,180,250,.06); }
.hh-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.habit-heat-btn { background: transparent; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; opacity: .7; }
.habit-heat-btn:hover { opacity: 1; }

/* ── Inventory Grid (RPG) ────────────────────────────── */
#inventoryView { padding: 4px 16px 20px; }
.inv-summary { font-size: 12px; color: var(--text3); margin-bottom: 14px; }

.inv-cat-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text2); margin: 22px 0 10px;
}
.inv-cat-header::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(137,180,250,.2), transparent);
}
.inv-cat-header--offense { color: #fb923c; }
.inv-cat-header--offense::after { background: linear-gradient(to right, rgba(251,146,60,.3), transparent); }
.inv-cat-header--defense { color: #60a5fa; }
.inv-cat-header--defense::after { background: linear-gradient(to right, rgba(96,165,250,.3), transparent); }
.inv-cat-header--potion { color: #4ade80; }
.inv-cat-header--potion::after { background: linear-gradient(to right, rgba(74,222,128,.25), transparent); }
.inv-cat-header--egg  { color: #fbbf24; }
.inv-cat-header--egg::after  { background: linear-gradient(to right, rgba(251,191,36,.25), transparent); }
.inv-cat-header--food { color: #f97316; }
.inv-cat-header--food::after { background: linear-gradient(to right, rgba(249,115,22,.25), transparent); }
.inv-cat-header--misc { color: #a78bfa; }
.inv-cat-header--misc::after { background: linear-gradient(to right, rgba(167,139,250,.25), transparent); }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.inv-slot {
  background: color-mix(in srgb, var(--inv-color, #89b4fa) 6%, rgba(15,14,26,.96));
  border: 1px solid color-mix(in srgb, var(--inv-color, #89b4fa) 18%, transparent);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: transform .15s ease-out, border-color .15s, box-shadow .15s, background .15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.inv-slot:hover {
  border-color: color-mix(in srgb, var(--inv-color, var(--accent)) 60%, transparent);
  background: color-mix(in srgb, var(--inv-color, var(--accent)) 14%, rgba(15,14,26,.92));
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(0,0,0,.4),
              0 0 14px color-mix(in srgb, var(--inv-color, var(--accent)) 40%, transparent);
}
.inv-slot:active { transform: scale(0.97); }
.inv-slot-inner {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px;
}
.inv-slot-img { width: 62%; height: 62%; object-fit: contain; }
.inv-slot-emoji { font-size: 22px; display: flex; align-items: center; justify-content: center; width: 62%; height: 62%; }
.inv-slot-qty {
  position: absolute; bottom: 3px; right: 4px;
  font-size: 9px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.72); border-radius: 3px; padding: 1px 3px; line-height: 1.4;
}
.inv-slot-name {
  font-size: 8px; color: var(--text3); text-align: center;
  padding: 0 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; box-sizing: border-box;
}
.inv-slot-badge {
  position: absolute; top: 3px; left: 3px; z-index: 1; pointer-events: none;
  font-size: 6px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 3px; border-radius: 2px; line-height: 1.5;
}
.inv-slot-badge--atk { background: rgba(239,68,68,.2); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.inv-slot-badge--def { background: rgba(96,165,250,.18); color: #93c5fd; border: 1px solid rgba(96,165,250,.22); }
.inv-empty {
  border: 1px dashed rgba(137,180,250,.07);
  background: transparent;
  pointer-events: none;
  opacity: .22;
}
.inv-detail-img-wrap { margin: 0 auto 4px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }

/* Toast */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--card2);
  /* backdrop-filter removed for perf */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  animation: toast-in .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: all;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(60px) scale(.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast-icon { font-size: 20px; }
.toast-msg { font-size: 13px; color: var(--text); }

/* Particles */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent2);
  text-shadow: 0 0 12px rgba(203,166,247,.9);
  animation: float-up .9s ease forwards;
}

@keyframes float-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-90px) scale(1.6); }
}

/* Random event banner */
.event-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card2);
  /* backdrop-filter removed for perf */
  border: 1px solid rgba(16,185,129,.35);
  border-radius: var(--radius);
  padding: 14px 22px;
  z-index: 500;
  text-align: center;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 30px rgba(16,185,129,.2);
  animation: event-drop .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes event-drop {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.event-banner-title { font-family: var(--font-head); font-size: 13px; color: var(--gold); margin-bottom: 4px; }

.event-banner-text { font-size: 13px; color: var(--text); }

/* Import/Export */
.import-area { width: 100%; min-height: 120px; resize: vertical; font-size: 12px; }

/* Compact mode */
[data-compact="true"] .quest-item { padding: 8px 14px; }
[data-compact="true"] .quest-notes { display: none; }

/* ============================================================
   FOCUS MODE — Premium immersive
   ============================================================ */
.focus-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(12,12,40,.97), var(--bg));
  /* backdrop-filter removed for perf */
  z-index: 800;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.focus-overlay.active { display: flex; animation: view-enter .3s ease; }

.focus-timer-big {
  font-family: var(--font-head);
  font-size: 88px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.focus-phase-big { font-size: 15px; color: var(--text2); letter-spacing: 3px; text-transform: uppercase; }

.focus-task-big {
  font-size: 18px;
  color: var(--text);
  max-width: 440px;
  text-align: center;
  line-height: 1.5;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 20px;
  /* backdrop-filter removed for perf */
}

.focus-controls { display: flex; gap: 16px; }

.focus-exit-btn {
  position: absolute; top: 22px; right: 22px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  background: var(--card2);
  border: 1px solid var(--glass-border);
  color: var(--text2); cursor: pointer; font-size: 13px;
  transition: var(--transition);
}
.focus-exit-btn:hover { border-color: var(--border2); color: var(--accent); }

/* Active spell badge */
.spell-active-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  /* pulse-badge removed for perf */
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(137,180,250,.4);
}

/* Streak danger banner */
.streak-danger {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card2);
  /* backdrop-filter removed for perf */
  border: 1px solid rgba(251,113,133,.35);
  border-radius: var(--radius);
  padding: 14px 22px;
  z-index: 400;
  max-width: 400px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 20px rgba(251,113,133,.15);
  animation: event-drop .4s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.streak-danger-icon { font-size: 26px; }
.streak-danger-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.streak-danger-close { margin-left: auto; color: var(--text3); cursor: pointer; font-size: 20px; transition: var(--transition); }
.streak-danger-close:hover { color: var(--accent); transform: scale(1.2); }

/* Heatmap */
.heatmap-grid { display: flex; flex-wrap: wrap; gap: 3px; }
.heatmap-day {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: rgba(137,180,250,.06);
  cursor: pointer;
  transition: var(--transition);
}
.heatmap-day:hover { transform: scale(1.4); box-shadow: 0 0 8px rgba(137,180,250,.5); }
.heatmap-day[data-level="1"] { background: rgba(137,180,250,.25); }
.heatmap-day[data-level="2"] { background: rgba(137,180,250,.5); }
.heatmap-day[data-level="3"] { background: rgba(137,180,250,.75); }
.heatmap-day[data-level="4"] { background: var(--accent); box-shadow: 0 0 8px rgba(137,180,250,.6); }
.heatmap-months { display: flex; gap: 3px; margin-bottom: 4px; }
.heatmap-month { font-size: 9px; color: var(--text3); }
.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; color: var(--text3); }
.heatmap-legend-box { width: 10px; height: 10px; border-radius: 2px; }

/* Confetti */
.confetti-piece {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confetti-fall var(--fall-dur, 1.2s) ease forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(var(--fall-dist, 300px)) rotate(var(--rot, 360deg)) scale(.3); }
}

/* Subtasks */
.subtask-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.subtask-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); cursor: pointer; padding: 3px 0; }
.subtask-check { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; transition: var(--transition); }
.subtask-row:hover .subtask-check { border-color: var(--accent); }
.subtask-done .subtask-check { background: linear-gradient(135deg, var(--green), #86efac); border-color: transparent; color: white; }
.subtask-done .subtask-text { text-decoration: line-through; opacity: .55; }

/* Drag handle */
.drag-handle {
  color: var(--text3);
  font-size: 14px;
  cursor: grab;
  padding: 0 4px;
  flex-shrink: 0;
  user-select: none;
  transition: var(--transition);
}
.drag-handle:hover { color: var(--accent); }
.drag-handle:active { cursor: grabbing; }
.quest-item.dragging { opacity: .35; border-style: dashed; border-color: var(--accent); }
.quest-item.drag-over { border-color: var(--accent); background: rgba(137,180,250,.08); }

/* Scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(137,180,250,.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(137,180,250,.5); }

/* ============================================================
   RESPONSIVE — TABLET ≤ 900px
   ============================================================ */
@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .right-panel { display: none; }
  .mobile-fab { display: flex; }
  .view-tabs { display: flex; }
  /* restore header bars on mobile since sidebar hidden */
  .header { height: auto; padding: 8px 14px; flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   MOBILE — PHONE ≤ 600px  (full overhaul)
   ============================================================ */
@media (max-width: 600px) {

  /* ── HEADER ─────────────────────────────────────────────── */
  .header {
    padding: 8px 12px;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Hide logo/guild block (first child div) */
  .header > div:first-child { display: none; }
  .conn-dot { display: none; }
  /* Compact avatar */
  .hero-avatar-btn {
    width: 38px !important; height: 38px !important;
    font-size: 20px !important; flex-shrink: 0;
  }
  .avatar-level-badge { width: 16px; height: 16px; font-size: 8px; top: -4px; right: -4px; }
  .hero-name  { font-size: 13px; }
  .hero-title { font-size: 10px; }
  .header-tools { flex-shrink: 0; }
  .icon-btn { width: 32px !important; height: 32px !important; font-size: 15px !important; }
  /* Hide non-essential buttons */
  #d20Btn, #focusBtn, #helpBtn { display: none !important; }
  /* XP bar — full width second row */
  .xp-bar-wrap {
    order: 10; flex: 0 0 100%; max-width: 100%;
    display: flex !important; flex-direction: column; gap: 2px;
  }
  .xp-bar-label { font-size: 10px; }
  .hp-bar-wrap { display: none; }
  /* Mini stat chips row */
  .header-stats {
    display: flex !important; order: 11; flex: 0 0 100%;
    gap: 4px; overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: 2px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .header-stats::-webkit-scrollbar { display: none; }
  .stat-chip { font-size: 10px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; }
  .spell-active-badge { font-size: 9px; padding: 2px 6px; }

  /* ── BOTTOM NAVIGATION ──────────────────────────────────── */
  .view-tabs {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    flex-direction: row !important;
    background: var(--card) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    padding: 4px 4px env(safe-area-inset-bottom, 6px) !important;
    z-index: 90 !important;
    gap: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab {
    flex: 1 !important; flex-direction: column !important;
    justify-content: center !important; align-items: center !important;
    gap: 1px !important; padding: 6px 2px 4px !important;
    font-size: 9px !important; min-width: 50px !important;
    border: none !important; border-radius: 10px !important;
    white-space: nowrap !important; line-height: 1.3 !important;
  }
  .view-tab.active { background: rgba(137,180,250,.12) !important; color: var(--accent) !important; }

  /* ── CONTENT AREA ───────────────────────────────────────── */
  .main { padding: 8px !important; }
  .content-area { padding-bottom: 76px; }

  /* ── FAB above bottom nav ───────────────────────────────── */
  .mobile-fab {
    display: flex !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 52px !important; height: 52px !important;
    font-size: 24px !important;
    z-index: 95 !important;
  }

  /* ── QUEST ITEMS — bigger touch targets ─────────────────── */
  .quest-check {
    width: 34px !important; height: 34px !important;
    min-width: 34px; font-size: 16px !important;
  }
  .quest-item  { padding: 10px 6px 10px 4px !important; gap: 8px !important; }
  .quest-action-btn { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  .quest-name  { font-size: 13px; }
  .subtask-row { padding: 6px 0 !important; }
  .subtask-check { width: 20px !important; height: 20px !important; }

  /* ── QUEST FILTERS — scrollable row ─────────────────────── */
  .filter-tabs { display: flex !important; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-chips { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }

  /* ── BOSS BANNER ─────────────────────────────────────────── */
  .boss-icon  { font-size: 22px !important; }
  .boss-label { font-size: 9px !important; }
  .boss-name  { font-size: 13px !important; }

  /* ── MODALS → BOTTOM SHEETS ─────────────────────────────── */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    width: 100% !important; margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  /* ── GRIDS ──────────────────────────────────────────────── */
  .stats-grid   { grid-template-columns: 1fr; }
  .achievements-grid { grid-template-columns: 1fr 1fr; }

  /* ── OLD TAB BAR — replaced by #mobileNav ───────────────── */
  .view-tabs { display: none !important; }

  /* ── MOBILE NAV BAR ──────────────────────────────────────── */
  .mobile-nav {
    display: flex !important;
  }
  .content-area { padding-bottom: 72px !important; }
  .mobile-fab   { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── QUEST CARDS — compact meta row ─────────────────────── */
  .drag-handle { display: none !important; }
  .quest-item { padding: 10px 8px 10px 12px !important; }
  .quest-body { min-width: 0; flex: 1; }
  /* Name: single line with ellipsis */
  .quest-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Meta: single horizontally-scrollable row */
  .quest-meta {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;
    margin-top: 3px !important;
    padding-bottom: 1px;
  }
  .quest-meta::-webkit-scrollbar { display: none; }
  .quest-meta .badge {
    font-size: 10px !important; padding: 1px 5px !important;
    white-space: nowrap; flex-shrink: 0;
  }
  .quest-meta .xp-reward {
    font-size: 10px !important; padding: 1px 5px !important;
    white-space: nowrap; flex-shrink: 0;
  }
  .quest-meta .deadline-badge { white-space: nowrap; flex-shrink: 0; font-size: 10px !important; }
  .quest-meta .tag-badge, .quest-meta .esttime-badge,
  .quest-meta .repeat-badge, .quest-meta .wager-badge,
  .quest-meta .scheduled-badge, .quest-meta .locked-badge { white-space: nowrap; flex-shrink: 0; font-size: 9px !important; }
  .quest-meta select { flex-shrink: 0; font-size: 9px !important; height: 16px !important; padding: 0 2px !important; }
  /* Always show action buttons on touch */
  .quest-actions { opacity: 1 !important; }
  .quest-action-btn { width: 28px !important; height: 28px !important; font-size: 13px !important; }
}

/* ============================================================
   MOBILE NAV — premium 4-tab bar + Más sheet
   ============================================================ */
.mobile-nav {
  display: none; /* shown via @media override */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 90;
  padding: 0 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  gap: 2px;
  align-items: stretch;
}

.mobile-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  border-radius: 12px;
  transition: color .15s ease, background .15s ease;
  padding: 6px 4px 5px;
  position: relative;
}
.mobile-nav-btn.active,
.mobile-nav-btn.mobile-nav-more-active {
  color: var(--accent);
}
.mobile-nav-btn.active::before,
.mobile-nav-btn.mobile-nav-more-active::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%; transform: translateX(-50%);
  width: 28px; height: 32px;
  background: rgba(137,180,250,.12);
  border-radius: 10px;
  z-index: 0;
}
.mobile-nav-icon { font-size: 22px; line-height: 1; position: relative; z-index: 1; }
.mobile-nav-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  font-family: var(--font-body);
}

/* ── MÁS OVERLAY ── */
.mobile-nav-more-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 305;
  backdrop-filter: blur(3px);
}
.mobile-nav-more-overlay.open { display: block; }

/* ── MÁS SHEET ── */
.mobile-nav-more-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  z-index: 310;
  padding: 12px 16px calc(72px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.33,1,.68,1);
  border-top: 1px solid var(--border2);
  box-shadow: 0 -12px 48px rgba(0,0,0,.5);
}
.mobile-nav-more-sheet.open { transform: translateY(0); }

.mobile-nav-more-handle {
  width: 40px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.mobile-nav-more-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 12px 2px;
  font-family: var(--font-head);
}
.mobile-nav-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mobile-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text2);
  cursor: pointer;
  transition: var(--transition-spring);
}
.mobile-more-item:active { transform: scale(.94); }
.mobile-more-item.active {
  background: rgba(137,180,250,.12);
  color: var(--accent);
  border-color: rgba(137,180,250,.3);
}
.mobile-more-item > span:first-child { font-size: 26px; }
.mobile-more-item > span:last-child  { font-size: 10px; font-weight: 600; font-family: var(--font-body); }

/* ── MOBILE ADD SHEET (all sizes) ───────────────────────────── */
.mobile-add-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 149; display: none; backdrop-filter: blur(2px);
}
.mobile-add-overlay.open { display: block; }
.mobile-add-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 48px rgba(0,0,0,.6);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  display: block;
  pointer-events: none;
}
.mobile-add-sheet.open {
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.33,1,.68,1);
  pointer-events: all;
}

/* ============================================================
   TEMA OLED — negro puro para pantallas OLED
   ============================================================ */
[data-theme="oled"] {
  --bg: #000000; --bg2: #030303; --bg3: #060606; --bg4: #0a0a0a;
  --card: rgba(8,8,8,.95); --card2: rgba(12,12,12,.98);
  --border: rgba(120,100,220,.15); --border2: rgba(137,180,250,.3);
  --text: #ffffff; --text2: #a0a0c0; --text3: #404060;
  --accent: #a855f7; --accent2: #22d3ee; --gold: #10b981;
  --green: #4ade80; --red: #fb7185; --orange: #f0abfc; --blue: #38bdf8;
  --glow: 0 0 30px rgba(137,180,250,.5); --glow2: 0 0 30px rgba(203,166,247,.3);
  --aurora1: rgba(137,180,250,.04); --aurora2: rgba(203,166,247,.03); --aurora3: rgba(16,185,129,.02);
  --glass: rgba(137,180,250,.04); --glass-border: rgba(137,180,250,.12);
}
[data-theme="oled"] .header { background: rgba(0,0,0,.9); }
[data-theme="oled"] .right-panel { background: rgba(0,0,0,.95); }
[data-theme="oled"] .view-tabs { background: rgba(0,0,0,.95); }

/* ============================================================
   TEMA PERGAMINO — medieval beige/sepia
   ============================================================ */
[data-theme="parchment"] {
  --bg: #f4e4c1; --bg2: #fdf3e3; --bg3: #ede0bc; --bg4: #d4c4a0;
  --card: rgba(244,228,193,.92); --card2: rgba(253,243,227,.95);
  --border: rgba(139,69,19,.15); --border2: rgba(139,69,19,.4);
  --text: #3d2b1f; --text2: #6b4c2a; --text3: #a07850;
  --accent: #8b4513; --accent2: #b8860b; --gold: #8b6914;
  --green: #2d7a3a; --red: #c0392b; --orange: #d2691e; --blue: #1a5276;
  --glow: 0 0 20px rgba(139,69,19,.25); --glow2: 0 0 20px rgba(184,134,11,.2);
  --aurora1: rgba(139,69,19,.04); --aurora2: rgba(184,134,11,.03); --aurora3: rgba(45,122,58,.02);
  --glass: rgba(139,69,19,.05); --glass-border: rgba(139,69,19,.15);
}
[data-theme="parchment"] .header { background: rgba(244,228,193,.96); border-bottom-color: rgba(139,69,19,.2); }
[data-theme="parchment"] .right-panel { background: rgba(253,243,227,.95); border-left-color: rgba(139,69,19,.15); }
[data-theme="parchment"] .view-tabs { background: rgba(244,228,193,.85); }
[data-theme="parchment"] .header-logo { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="parchment"] input, [data-theme="parchment"] textarea, [data-theme="parchment"] select { background: rgba(253,243,227,.8); color: var(--text); }
[data-theme="parchment"] .xp-bar { background: rgba(139,69,19,.1); }

/* ============================================================
   CYBER THEME — grid lines neon
   ============================================================ */

/* ============================================================
   AVATAR LEVEL BADGE
   ============================================================ */
.avatar-level-badge {
  position: absolute;
  top: -5px; right: -5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg);
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   GUILD NAME
   ============================================================ */
.guild-name {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ============================================================
   XP BAR — más grande
   ============================================================ */
.xp-bar { height: 10px; }
.xp-bar-fill { height: 100%; position: relative; }
.xp-bar-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  pointer-events: none;
}

/* ============================================================
   HP CRÍTICO
   ============================================================ */
.hp-bar-fill.hp-critical {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  /* hp-pulse removed for perf */
}
.hp-bar-fill.hp-warning {
  background: linear-gradient(90deg, #ea580c, #f97316);
}
.hp-danger-text {
  font-size: 9px;
  color: var(--red);
  font-weight: 700;
  /* hp-pulse removed for perf */
}

/* ============================================================
   AVATAR RING POR CLASE
   ============================================================ */
.avatar-class-guerrero { background: linear-gradient(var(--bg3),var(--bg3)) padding-box, linear-gradient(135deg,#ef4444,#f97316) border-box !important; }
.avatar-class-mago     { background: linear-gradient(var(--bg3),var(--bg3)) padding-box, linear-gradient(135deg,#a855f7,#7c3aed) border-box !important; }
.avatar-class-picaro   { background: linear-gradient(var(--bg3),var(--bg3)) padding-box, linear-gradient(135deg,#f97316,#eab308) border-box !important; }
.avatar-class-clerigo  { background: linear-gradient(var(--bg3),var(--bg3)) padding-box, linear-gradient(135deg,#10b981,#06b6d4) border-box !important; }
.avatar-class-fundador { background: linear-gradient(var(--bg3),var(--bg3)) padding-box, linear-gradient(135deg,#a855f7,#22d3ee) border-box !important; }
.avatar-class-arquero  { background: linear-gradient(var(--bg3),var(--bg3)) padding-box, linear-gradient(135deg,#4ade80,#22d3ee) border-box !important; }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
@keyframes skeleton-shimmer {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(300%); }
}
.skeleton-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  position: relative;
}
.skeleton-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-check { width: 22px; height: 22px; border-radius: 50%; background: var(--bg4); flex-shrink: 0; }
.skeleton-body  { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line  { height: 12px; background: var(--bg4); border-radius: 6px; width: 70%; }
.skeleton-line.short { width: 40%; height: 9px; }

/* ============================================================
   TYPE SEPARATORS
   ============================================================ */
.type-separator {
  font-family: var(--font-head);
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 14px 0 7px;
  margin: 4px 0 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.type-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(137,180,250,.2), transparent);
}
.type-separator span {
  background: rgba(137,180,250,.1);
  border: 1px solid rgba(137,180,250,.2);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 9px;
  color: var(--text3);
}
.type-sep-help-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 2px; line-height: 1;
  color: var(--text3); opacity: .85;
}
.type-sep-help-btn:hover { opacity: 1; color: var(--accent); }

.beta-feedback-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  z-index: 90;
  transition: var(--transition-spring);
}
.beta-feedback-fab:hover { transform: scale(1.08); color: var(--accent); border-color: var(--accent); }
/* .mobile-nav es una barra fija de 60px pegada abajo con el mismo z-index, así
   que en móvil el FAB quedaba encima de ella. Se levanta por arriba de la barra
   (queda a la izquierda; .mobile-fab ocupa la derecha, no chocan). */
@media (max-width: 900px) {
  .beta-feedback-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 14px; width: 38px; height: 38px; font-size: 16px; }
}
.type-sep-done { opacity: .55; }

/* ============================================================
   TAGS en quests
   ============================================================ */
.tag-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(56,189,248,.1);
  color: var(--blue);
  border: 1px solid rgba(56,189,248,.2);
  cursor: pointer;
  transition: var(--transition);
}
.tag-badge:hover { background: rgba(56,189,248,.2); border-color: var(--blue); }

/* ============================================================
   TIEMPO ESTIMADO
   ============================================================ */
.esttime-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(137,180,250,.06);
  color: var(--text3);
  border: 1px solid var(--border);
}

/* ============================================================
   DAILY PROGRESS BAR
   ============================================================ */
.daily-progress-wrap {
  background: rgba(74,222,128,.04);
  border: 1px solid rgba(74,222,128,.16);
  border-left: 3px solid #4ade80;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.daily-progress-label { font-size: 11px; color: var(--text2); white-space: nowrap; font-weight: 500; min-width: 120px; }
.daily-progress-bar { flex: 1; height: 7px; background: rgba(74,222,128,.1); border-radius: 6px; overflow: hidden; }
.daily-progress-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #22d3ee); border-radius: 6px; transition: width .6s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 8px rgba(74,222,128,.35); }

/* ============================================================
   WELCOME SCREEN
   ============================================================ */
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(ellipse at center, rgba(16,12,56,.99), #04040e);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  pointer-events: none;
}
.welcome-screen.hiding {
  animation: welcome-exit .6s ease forwards;
}
@keyframes welcome-exit {
  to { opacity: 0; transform: scale(1.04); }
}
.welcome-logo {
  font-family: var(--font-head);
  font-size: 42px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: welcome-logo-in .6s cubic-bezier(.34,1.56,.64,1);
}
.welcome-logo-img {
  height: 220px;
  width: auto;
  object-fit: contain;
  animation: welcome-logo-in .6s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 0 40px rgba(137,180,250,.5));
}
@keyframes welcome-logo-in {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-phrase {
  font-size: 17px;
  color: var(--text2);
  text-align: center;
  max-width: 400px;
  line-height: 1.6;
  font-style: italic;
  animation: welcome-logo-in .6s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.welcome-dots { display: flex; gap: 8px; animation: welcome-logo-in .6s ease .3s both; }
.welcome-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: welcome-dot-pulse 1.2s ease-in-out infinite; }
.welcome-dot:nth-child(2) { animation-delay: .2s; }
.welcome-dot:nth-child(3) { animation-delay: .4s; }
@keyframes welcome-dot-pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ============================================================
   D20 DADO
   ============================================================ */
@keyframes d20-spin {
  from { transform: rotate(-360deg) scale(.4); opacity: 0; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}
.d20-rolling { animation: d20-spin .55s cubic-bezier(.34,1.56,.64,1); }

/* ============================================================
   MOBILE FAB
   ============================================================ */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-size: 28px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(137,180,250,.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
  transition: var(--transition-spring);
}
.mobile-fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(137,180,250,.65); }
@media (max-width: 900px) { .mobile-fab { display: flex; } }

/* ============================================================
   CMD+K SEARCH MODAL
   ============================================================ */
.cmdk-modal .modal {
  padding: 0;
  max-width: 520px;
}
.cmdk-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cmdk-search-icon { font-size: 18px; color: var(--text3); }
.cmdk-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  outline: none;
}
.cmdk-results { max-height: 340px; overflow-y: auto; padding: 8px; }
.cmdk-result-item {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
}
.cmdk-result-item:hover { background: var(--glass); border: 1px solid var(--glass-border); }
.cmdk-result-name { font-size: 13px; color: var(--text); flex: 1; }
.cmdk-result-type { font-size: 10px; color: var(--text3); }
.cmdk-empty { text-align: center; padding: 30px; color: var(--text3); font-size: 13px; }
.cmdk-hint { font-size: 10px; color: var(--text3); padding: 8px 16px; border-top: 1px solid var(--border); }

/* ============================================================
   SEASONAL EVENT BANNER
   ============================================================ */
.seasonal-banner {
  --sb-clr: #a855f7;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sb-clr) 12%, transparent), color-mix(in srgb, var(--sb-clr) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--sb-clr) 30%, transparent);
  animation: seasonal-pulse 4s ease-in-out infinite;
}
@keyframes seasonal-pulse {
  0%, 100% { box-shadow: 0 0 0px color-mix(in srgb, var(--sb-clr) 0%, transparent); }
  50%       { box-shadow: 0 0 12px color-mix(in srgb, var(--sb-clr) 25%, transparent); }
}
.sb-icon { font-size: 22px; flex-shrink: 0; }
.sb-text { font-size: 12px; color: var(--text); line-height: 1.4; }
.sb-bonus { font-weight: 700; color: color-mix(in srgb, var(--sb-clr) 90%, white); font-size: 12px; }

/* ============================================================
   WEEKLY MISSION BANNER
   ============================================================ */
.weekly-banner {
  background: linear-gradient(135deg, rgba(56,189,248,.07), rgba(137,180,250,.06));
  border: 1px solid rgba(56,189,248,.18);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.weekly-banner-title { font-size: 9px; color: var(--blue); text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-head); margin-bottom: 2px; }
.weekly-banner-name { font-size: 13px; color: var(--text); font-weight: 500; }
.weekly-boss-bar { flex: 1; }
.weekly-boss-bg { height: 6px; background: rgba(56,189,248,.1); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.weekly-boss-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--accent)); border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 8px rgba(56,189,248,.4); }

/* ============================================================
   CONNECTION DOT
   ============================================================ */
.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
  transition: background .4s;
}
.conn-dot.ok  { background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,.5); }
.conn-dot.err { background: var(--red); }

/* ============================================================
   TOAST UNDO BUTTON
   ============================================================ */
.toast-undo-btn {
  font-size: 12px;
  color: var(--accent2);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  margin-left: 8px;
  flex-shrink: 0;
}
.toast-undo-btn:hover { color: var(--accent); }

.toast-action { align-items: center; gap: 8px; }
.toast-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.toast-btn:hover { opacity: 0.85; }

/* ============================================================
   SUBTASK PROGRESS
   ============================================================ */
.subtask-progress {
  font-size: 10px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.subtask-mini-bar { width: 30px; height: 4px; background: rgba(137,180,250,.1); border-radius: 2px; overflow: hidden; }
.subtask-mini-fill { height: 100%; background: var(--green); border-radius: 2px; }

/* ============================================================
   COMPAÑERO DEL GREMIO
   ============================================================ */
.companion-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.companion-msg-box {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.5;
  min-height: 50px;
}
.companion-input-row { display: flex; gap: 6px; }
.companion-input { flex: 1; font-size: 12px; }

/* ============================================================
   ORÁCULO
   ============================================================ */
.oraculo-text {
  font-size: 13px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.65;
  padding: 8px 0;
}

/* ============================================================
   NOTAS EXPANDIBLES
   ============================================================ */
.expand-notes-btn {
  font-size: 10px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-family: var(--font-body);
}

/* ============================================================
   RARITY — fondos y glow
   ============================================================ */
/* Rarity overrides handled in main quest-item block above */
.quest-item[data-priority="urgente"] {
  background: linear-gradient(100deg, rgba(251,113,133,.08) 0%, var(--card) 55%);
  border-color: rgba(251,113,133,.2);
}


/* ============================================================
   MAP VIEW
   ============================================================ */
#view-map { padding: 20px; }
.map-svg-wrap { width: 100%; overflow: auto; }

/* ============================================================
   DRAG FEEDBACK MEJORADO
   ============================================================ */
.quest-item.dragging {
  opacity: .25;
  border-style: dashed;
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(137,180,250,.3);
}
.quest-item.drag-over {
  border-color: var(--accent2);
  background: rgba(203,166,247,.05);
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════
   NEW FEATURES — appended
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar collapse ─────────────────────────────────── */
.main { position:relative; }
.right-panel { transition:width .25s, min-width .25s, padding .25s; }
.sidebar-toggle-btn { display:none; }
.sidebar-collapsed .right-panel { width:0 !important; min-width:0 !important; padding:0 !important; overflow:hidden !important; }
#sidebarReopenBtn { display:none !important; }

/* ── Contrato de Gremio ───────────────────────────────── */
.contrato-banner {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(40px);
  background:var(--card); border:1px solid var(--gold); border-radius:var(--radius);
  padding:10px 20px; font-size:13px; color:var(--text1); text-align:center;
  z-index:9000; box-shadow:0 4px 20px rgba(0,0,0,.5); pointer-events:none;
  animation:contrato-in .3s ease forwards;
}
@keyframes contrato-in { to { transform:translateX(-50%) translateY(0); } }

/* ── Bulk actions bar ─────────────────────────────────── */
.bulk-bar {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--card); border:1px solid var(--accent); border-radius:var(--radius-sm);
  margin-bottom:8px; flex-wrap:wrap;
}
.bulk-bar span { font-size:12px; color:var(--text2); font-weight:600; }
.bulk-check { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.quest-locked { opacity:.65; }

/* ── Load more button ─────────────────────────────────── */
.load-more-btn {
  display:block; width:100%; padding:10px; margin-top:8px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text2); font-size:12px; cursor:pointer; text-align:center;
}
.load-more-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── Hourly chart ─────────────────────────────────────── */
.hourly-bars { display:flex; align-items:flex-end; gap:2px; height:68px; padding-bottom:18px; }
.hourly-col { display:flex; flex-direction:column; align-items:center; flex:1; min-width:0; }
.hourly-bar { width:100%; min-height:2px; border-radius:2px 2px 0 0; transition:height .3s; }
.hourly-label { font-size:8px; color:var(--text3); margin-top:2px; white-space:nowrap; }

/* ── Achievement categories ───────────────────────────── */
.ach-cat-section { margin-bottom:20px; }
.ach-cat-header {
  font-family:var(--font-head); font-size:12px; color:var(--accent);
  padding:5px 0 6px; border-bottom:1px solid var(--border); margin-bottom:10px; letter-spacing:.5px;
}
.ach-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }

/* ── Quest extra badges ───────────────────────────────── */
.repeat-badge, .scheduled-badge, .locked-badge {
  font-size:9px; padding:1px 5px; border-radius:10px; display:inline-flex; align-items:center; gap:2px;
}
.repeat-badge    { background:rgba(56,189,248,.15); color:var(--blue); }
.scheduled-badge { background:rgba(250,204,21,.15); color:var(--gold); }
.locked-badge    { background:rgba(248,113,113,.15); color:var(--red); }

/* ── Quest overdue highlight ──────────────────────────── */
.quest-item.quest-overdue:not(.done) { border-left:3px solid var(--red); background:rgba(251,113,133,.06); }

/* ── Volume slider ────────────────────────────────────── */
.vol-slider { width:60px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }

/* ── Pom goal & break selector ───────────────────────── */
.pom-extras { margin-top:10px; display:flex; flex-direction:column; gap:6px; padding-top:8px; border-top:1px solid var(--border); }
.pom-extra-row { display:flex; align-items:center; gap:4px; }
.pom-mini-select, .pom-mini-input {
  font-size:11px; padding:2px 4px; background:var(--bg3); border:1px solid var(--border);
  color:var(--text1); border-radius:4px; cursor:pointer;
}
.pom-mini-input { width:38px; text-align:center; }
.pom-goal-wrap { display:flex; align-items:center; gap:8px; }
.pom-goal-label { font-size:11px; color:var(--text2); white-space:nowrap; }
.pom-goal-bar { flex:1; height:5px; background:rgba(137,180,250,.1); border-radius:3px; overflow:hidden; }
.pom-goal-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }

/* ── Shortcuts modal ──────────────────────────────────── */
.shortcuts-grid { display:flex; flex-direction:column; gap:7px; }
.shortcut-row { display:flex; align-items:center; gap:12px; font-size:13px; }
.shortcut-row kbd {
  background:var(--bg3); border:1px solid var(--border2); border-radius:4px;
  padding:2px 8px; font-size:11px; font-family:monospace; min-width:58px;
  text-align:center; color:var(--text1); flex-shrink:0;
}
.shortcut-row span { color:var(--text2); }

/* ── Date Filter Tabs ─────────────────────────── */
.date-filter-tabs { display:flex; gap:3px; flex-wrap:wrap; }
.date-filter-btn { padding:3px 10px; border-radius:6px; font-size:11px; color:var(--text2); background:var(--glass); border:1px solid var(--glass-border); cursor:pointer; transition:var(--transition); }
.date-filter-btn:hover { border-color:var(--border2); color:var(--accent); }
.date-filter-btn.active { background:rgba(137,180,250,.18); color:var(--accent); border-color:var(--accent); }

/* ── Quick Notes ──────────────────────────────── */
.quick-notes-area { width:100%; min-height:88px; max-height:200px; resize:vertical; font-size:12px; line-height:1.6; padding:10px 12px; }

/* ── Auto-break button ───────────────────────── */
.pom-mini-btn { font-size:10px; padding:2px 10px; background:var(--accent); color:white; border-radius:4px; border:none; cursor:pointer; transition:var(--transition); font-family:var(--font-body); font-weight:600; }
.pom-mini-btn.off { background:var(--bg4); color:var(--text3); }

/* ── Pin badge & pinned quest ────────────────── */
.quest-item.pinned { border-color:rgba(250,204,21,.45) !important; }
.quest-item.pinned::before { background:linear-gradient(180deg,var(--gold),#34d399) !important; }
.pin-indicator { font-size:9px; color:var(--gold); margin-left:2px; }

/* ── More menu (header overflow) ─────────────── */
.more-menu-wrap { position:relative; }
.more-menu {
  display:none; position:absolute; top:calc(100% + 6px); right:0;
  background:var(--card); border:1px solid var(--glass-border); border-radius:10px;
  padding:6px; min-width:180px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.4);
  flex-direction:column; gap:2px;
}
.more-menu.open { display:flex; }
.more-menu-item {
  display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:7px;
  background:none; border:none; color:var(--text1); font-size:13px;
  font-family:var(--font-body); cursor:pointer; text-align:left;
  transition:var(--transition); white-space:nowrap;
}
.more-menu-item:hover { background:var(--glass); color:var(--accent); }
.more-menu-sep { border:none; border-top:1px solid var(--border); margin:4px 0; }
.more-menu-cfg { color:var(--text3); font-size:11px; }
.more-menu-cfg:hover { color:var(--text2); }

/* Dock duplicates — hidden when dock is visible (≥641px) */
@media (min-width: 641px) { .header-dock-dup { display:none !important; } }

/* ── 30-day missions chart ───────────────────── */
.bc30-wrap { overflow-x:auto; scrollbar-width:none; }
.bc30-wrap::-webkit-scrollbar { display:none; }
.bc30-inner {
  display:flex; align-items:flex-end; gap:4px;
  height:100px; padding-bottom:20px; min-width:0;
}
.bc30-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex-shrink:0; }
.bc30-bar {
  width:13px; border-radius:3px 3px 0 0;
  background:var(--accent); min-height:3px; transition:height .2s;
}
.bc30-bar.today { background:var(--gold); }
.bc30-lbl { font-size:9px; color:var(--text3); margin-top:3px; white-space:nowrap; }

/* ── Weekly retro modal ──────────────────────── */
.retro-stat {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:10px; padding:12px 8px;
}
.retro-stat-num { font-family:var(--font-head); font-size:22px; font-weight:700; line-height:1.1; }
.retro-stat-lbl { font-size:11px; color:var(--text3); margin-top:3px; }

/* ── Mobile responsive improvements ─────────── */
@media (max-width: 900px) {
  .view-tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .view-tabs::-webkit-scrollbar { display:none; }
  .view-tab { white-space:nowrap; flex-shrink:0; }
  .header-actions { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .header-actions::-webkit-scrollbar { display:none; }
  .header-tools { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .header-tools::-webkit-scrollbar { display:none; }
}

@media (max-width: 600px) {
  .header { padding:10px 12px 8px; gap:8px; }
  .header-logo { font-size:14px; }
  .header-hero { gap:6px; }
  .hero-name { font-size:13px; }
  .hero-title { font-size:10px; }
  .xp-bar-wrap { max-width:90px; }
  .xp-bar-label { font-size:9px; }
  .icon-btn { width:32px; height:32px; font-size:15px; }
  .vol-slider { width:55px; }
  .quest-item { padding:10px 10px 10px 8px; }
  .quest-name { font-size:13px; }
  .quest-action-btn { width:28px; height:28px; font-size:13px; }
  .filter-tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .filter-tabs::-webkit-scrollbar { display:none; }
  .filter-tab { white-space:nowrap; flex-shrink:0; }
  .date-filter-row { overflow-x:auto; scrollbar-width:none; }
  .date-filter-row::-webkit-scrollbar { display:none; }
  .date-filter-btn { white-space:nowrap; flex-shrink:0; }
  .modal { margin:8px; max-height:92vh; overflow-y:auto; }
}

/* ============================================================
   BOSS HP BAR
   ============================================================ */
.boss-hp-wrap { display:flex; align-items:center; gap:10px; margin-top:6px; }
.boss-hp-bar  { flex:1; height:14px; background:rgba(255,255,255,.15); border-radius:7px; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.boss-hp-fill { height:100%; border-radius:7px; transition:width .6s ease; }
.boss-hp-text { font-size:12px; color:var(--text); font-weight:700; white-space:nowrap; min-width:70px; text-align:right; }
.boss-defeated { color:var(--gold); font-weight:700; font-size:13px; padding:4px 0; }

/* ============================================================
   FAMILIAR WIDGET
   ============================================================ */
.familiar-widget {
  display:flex; align-items:center; gap:12px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px;
}
.familiar-pet  { font-size:32px; line-height:1; }
.familiar-body { display:flex; flex-direction:column; gap:2px; }
.familiar-name { font-size:13px; font-weight:600; color:var(--text1); }
.familiar-mood { font-size:12px; font-weight:600; }
.familiar-bonus{ font-size:11px; color:var(--green); }

/* ============================================================
   CLASS SKILL BUTTON
   ============================================================ */
.class-skill-btn {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; border:none; border-radius:8px; padding:9px 14px;
  font-size:13px; font-weight:700; cursor:pointer; width:100%;
  transition:opacity .2s, transform .1s;
}
.class-skill-btn:hover:not(:disabled) { opacity:.88; transform:translateY(-1px); }
.class-skill-btn:disabled { opacity:.45; cursor:not-allowed; }

/* ============================================================
   GOLD + WEATHER CHIPS
   ============================================================ */
.gold-display  { color:var(--gold) !important; font-weight:700; }
.weather-chip  { font-size:16px; cursor:default; }

/* ============================================================
   SHOP MODAL
   ============================================================ */
.shop-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.shop-tab  {
  padding:5px 12px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg3); color:var(--text2); font-size:12px; cursor:pointer;
  transition:all .15s;
}
.shop-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.shop-rows { display:flex; flex-direction:column; gap:8px; }
.shop-item {
  display:flex; align-items:center; gap:12px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px;
}
.shop-item-visual { position:relative; flex-shrink:0; width:48px; text-align:center; }
.shop-item-img   { width:48px; height:48px; object-fit:contain; display:block; }
.shop-item-qty   {
  position:absolute; bottom:-4px; right:-4px;
  background:var(--accent); color:#fff; font-size:9px; font-weight:700;
  border-radius:8px; padding:1px 5px;
}
.shop-icon  { font-size:26px; }
.shop-info  { flex:1; min-width:0; }
.shop-name  { font-size:13px; font-weight:600; color:var(--text); }
.shop-desc  { font-size:11px; color:var(--text2); margin-top:2px; line-height:1.4; }
.shop-buy-btn {
  background:var(--gold); color:#000; border:none; border-radius:7px;
  padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap; flex-shrink:0; transition:opacity .2s;
}
.shop-buy-btn:hover:not(:disabled) { opacity:.82; }
.shop-buy-disabled { background:var(--bg2) !important; color:var(--text3) !important; cursor:not-allowed !important; }

/* ============================================================
   EVENT MODAL
   ============================================================ */
.event-modal-icon { font-size:52px; margin-bottom:8px; }
.event-modal-icon-img { width:72px; height:72px; object-fit:contain; margin:0 auto 8px; }

/* ============================================================
   DIARY ENTRIES
   ============================================================ */
.diary-entry {
  background:var(--bg3); border:1px solid var(--border);
  border-left:3px solid var(--gold); border-radius:8px; padding:12px 14px;
}
.diary-meta { font-size:11px; color:var(--text3); margin-bottom:6px; }
.diary-text { font-size:13px; color:var(--text2); line-height:1.65; font-style:italic; }

/* ============================================================
   PROPHECY
   ============================================================ */
.prophecy-text { font-size:12px; color:var(--text2); font-style:italic; line-height:1.55; margin:0; }

/* ============================================================
   BOSS IMAGE
   ============================================================ */
.boss-icon-wrap { flex-shrink:0; width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
.boss-img { width:52px; height:52px; object-fit:contain; border-radius:8px; image-rendering:pixelated; }

/* Skill node pixel art image overlay */
.skill-node-img { width:100%; height:40px; object-fit:contain; image-rendering:pixelated; margin-bottom:4px; opacity:.85; }

/* ============================================================
   HERO AVATAR IMAGE
   ============================================================ */
.hero-avatar-img {
  width:100%; height:100%; object-fit:cover;
  border-radius:7px; display:block;
}
.hero-avatar-emoji { font-size:22px; line-height:1; }

/* ============================================================
   VIEW BACKGROUNDS — un único #dungeon-bg controlado por JS
   ============================================================ */
#dungeon-bg {
  position: fixed;
  inset: 0;
  background: none center / cover no-repeat;
  opacity: .11;
  pointer-events: none;
  z-index: 0;
}
.view { position: relative; }
.view > * { position: relative; z-index: 1; }

/* ============================================================
   ACTIVE PET DISPLAY (sidebar)
   ============================================================ */
.active-pet-display {
  display:flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 10px;
  margin:6px 12px 0;
}
.active-pet-img { width:36px; height:36px; object-fit:contain; border-radius:6px; flex-shrink:0; }
.active-pet-info { display:flex; flex-direction:column; min-width:0; }
.active-pet-name { font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.active-pet-stage { font-size:10px; margin-top:1px; }
.stage-mount { color:var(--gold); }
.stage-baby  { color:var(--green); }

/* ============================================================
   PETS VIEW
   ============================================================ */
.pets-section-title {
  font-family:var(--font-head); font-size:13px; font-weight:600;
  color:var(--accent); letter-spacing:.5px; margin-bottom:12px;
}
.pets-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:14px;
}
.pet-card {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:var(--transition);
}
.pet-card:hover { border-color:var(--accent); box-shadow:var(--glow); }
.pet-card-active { border-color:var(--accent2) !important; box-shadow:var(--glow2) !important; }
.pet-card-visual {
  position:relative; width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
}
.pet-card-img  { width:80px; height:80px; object-fit:contain; }
.pet-card-emoji { font-size:44px; line-height:1; }
.pet-qty-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  border-radius:8px; padding:1px 6px;
}
.pet-mount-crown { position:absolute; top:-6px; right:-6px; font-size:16px; }
.pet-card-name  { font-size:12px; font-weight:700; color:var(--text); text-align:center; }
.pet-card-rarity { font-size:10px; color:var(--text2); text-transform:capitalize; }
.pet-card-meta  { font-size:10px; color:var(--text3); text-align:center; line-height:1.4; }
.pet-evo-wrap   { width:100%; display:flex; align-items:center; gap:6px; }
.pet-evo-bar    { flex:1; height:6px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.pet-evo-fill   { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:3px; transition:width .4s; }
.pet-xp-fill    { background:linear-gradient(90deg, var(--gold), #ffb347) !important; }
.pet-evo-label  { font-size:9px; color:var(--text3); white-space:nowrap; }
.pet-level-badge {
  display:inline-block; font-size:11px; font-weight:700;
  background:linear-gradient(135deg, var(--gold), #ffb347);
  color:#1a1a2e; border-radius:20px; padding:2px 10px; margin-bottom:4px;
}
.pet-resting-badge {
  display:block; font-size:10px; font-weight:600; text-align:center;
  background:rgba(148,163,184,.15); color:var(--text2);
  border-radius:20px; padding:3px 10px; margin:4px 0;
}
.pet-card-shiny { box-shadow:0 0 0 1px rgba(250,204,21,.5), 0 0 14px rgba(250,204,21,.35); }
.pet-shiny-badge {
  position:absolute; top:-6px; left:-6px; font-size:15px;
  animation:pet-shiny-sparkle 1.6s ease-in-out infinite;
}
.pet-rpanel-shiny .pet-rpanel-img { filter:saturate(1.4) drop-shadow(0 0 10px rgba(250,204,21,.6)); }
@keyframes pet-shiny-sparkle {
  0%, 100% { opacity:1; transform:scale(1) rotate(0deg); }
  50%      { opacity:.6; transform:scale(1.15) rotate(15deg); }
}
.pet-stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4px; width:100%; margin:6px 0;
}
.pet-stat-cell {
  background:rgba(137,180,250,.07); border:1px solid rgba(137,180,250,.12);
  border-radius:8px; padding:4px 6px; font-size:10px; color:var(--text2);
  text-align:center;
}
.pet-stats-mini { font-size:9px; color:var(--text3); text-align:center; margin:3px 0; }
.pet-action-btn {
  width:100%; background:var(--accent); color:#fff; border:none;
  border-radius:var(--radius-xs); padding:6px 8px; font-size:11px;
  font-weight:600; cursor:pointer; transition:opacity .2s;
}
.pet-action-btn:hover:not(:disabled) { opacity:.8; }
.pet-btn-disabled { background:var(--bg4) !important; color:var(--text3) !important; cursor:not-allowed !important; }
.pet-btn-active   { background:var(--accent2) !important; }
.pets-empty {
  text-align:center; padding:48px 20px;
  color:var(--text2);
}

@media (max-width:480px) {
  .pets-grid { grid-template-columns: repeat(2, 1fr); }
  .boss-img  { width:36px; height:36px; }
  .boss-icon-wrap { width:36px; height:36px; }
}

/* ============================================================
   ACTIVE PET — RIGHT PANEL
   ============================================================ */
.active-pet-panel-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.active-pet-panel-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--bg4);
}
.active-pet-panel-emoji {
  width: 72px; height: 72px;
  font-size: 44px; line-height: 72px;
  text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.active-pet-panel-info { flex: 1; min-width: 0; }
.active-pet-panel-name {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
.active-pet-panel-rarity {
  font-size: 10px; color: var(--text2);
  text-transform: capitalize; margin-top: 2px;
}
.pet-ability-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 3px 7px;
  background: var(--bg4); border: 1px solid var(--accent);
  border-radius: 6px; font-size: 10px; color: var(--accent);
  line-height: 1.3;
}

/* ── REWARD MODAL ─────────────────────────────────────────── */
#rewardModal { backdrop-filter: blur(6px); background: rgba(0,0,0,.75); }

.reward-modal {
  position: relative;
  background: linear-gradient(160deg, #180e2a 0%, #0d0d1a 55%, #1a0a08 100%);
  border: 1.5px solid var(--accent);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 400px;
  width: 92%;
  overflow: hidden;
  animation: rmIn .5s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 50px rgba(138,43,226,.35), 0 24px 60px rgba(0,0,0,.8);
}
@keyframes rmIn {
  from { transform: scale(.55) translateY(48px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* shimmer sweep */
.rm-shimmer {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(255,220,120,.10) 50%, transparent 65%);
  animation: rmShimmer 1.4s ease .15s forwards;
}
@keyframes rmShimmer {
  from { transform: translateX(-110%); }
  to   { transform: translateX(200%); }
}

/* header */
.rm-header { text-align: center; margin-bottom: 22px; position: relative; z-index: 2; }
.rm-victory {
  font-family: var(--font-head); font-size: 20px; font-weight: 900;
  letter-spacing: 2px; color: var(--gold);
  animation: rmGlow 2s ease-in-out infinite alternate;
}
@keyframes rmGlow {
  from { text-shadow: 0 0 8px rgba(255,215,0,.4), 0 0 16px rgba(255,215,0,.15); }
  to   { text-shadow: 0 0 18px rgba(255,215,0,.9), 0 0 36px rgba(255,215,0,.5), 0 0 60px rgba(255,215,0,.2); }
}
.rm-quest-name {
  font-size: 13px; color: var(--text); font-weight: 600;
  margin-top: 8px; opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.rm-quest-type {
  display: inline-block; margin-top: 6px; padding: 2px 12px;
  border-radius: 20px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: #fff; letter-spacing: .5px;
}

/* divider */
.rm-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: 3px;
  color: var(--text3); margin-bottom: 12px; position: relative; z-index: 2;
}
.rm-divider::before, .rm-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* reward rows */
.rm-rewards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; position: relative; z-index: 2; }

.rm-reward-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  opacity: 0; transform: translateX(-18px);
  animation: rmRowIn .38s ease forwards;
}
@keyframes rmRowIn { to { opacity: 1; transform: translateX(0); } }

.rm-icon { font-size: 28px; width: 36px; text-align: center; flex-shrink: 0; }
.rm-item-img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,.05); }
.rm-label   { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; }
.rm-qty-wrap { display: flex; align-items: baseline; gap: 4px; }
.rm-qty {
  font-family: var(--font-head); font-size: 24px; font-weight: 800;
  color: var(--gold); min-width: 36px; text-align: right; line-height: 1;
}
.rm-unit { font-size: 10px; color: var(--text3); font-weight: 700; letter-spacing: 1px; }

/* continue button */
.rm-continue {
  width: 100%; padding: 14px; font-size: 14px;
  font-family: var(--font-head); letter-spacing: 1.5px;
  border-radius: 12px; position: relative; z-index: 2;
}

/* sparkle particles */
.rm-sparkle {
  position: absolute; bottom: 10px; border-radius: 50%;
  background: var(--gold); pointer-events: none; z-index: 0;
  box-shadow: 0 0 6px var(--gold), 0 0 12px rgba(255,215,0,.4);
  animation: rmSparkleUp linear forwards;
}
@keyframes rmSparkleUp {
  0%   { transform: translateY(0)     scale(1); opacity: 1; }
  60%  { opacity: .8; }
  100% { transform: translateY(-160px) scale(0); opacity: 0; }
}

/* ── PET RIGHT PANEL ─────────────────────────────────────── */
.pet-rpanel {
  border-radius: 14px; overflow: hidden; position: relative;
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
}
.pet-rpanel-imgwrap {
  position: relative; width: 100%; aspect-ratio: 16 / 11;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.pet-rpanel-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.pet-rpanel-img {
  position: relative; z-index: 1;
  width: 52%; height: 78%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.pet-rpanel-emoji {
  position: relative; z-index: 1; font-size: 56px;
  display: none; align-items: center; justify-content: center;
}
.pet-rpanel-body {
  position: relative; padding: 12px 14px;
}
.pet-rpanel-info { min-width: 0; }
.pet-rpanel-name {
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  color: var(--text); letter-spacing: .5px;
}
.pet-rpanel-rarity { font-size: 10px; color: var(--gold); margin-bottom: 4px; }
.pet-bond-card { margin:8px 0 4px; padding:7px 8px; border:1px solid rgba(168,85,247,.32); border-radius:8px; background:rgba(76,29,149,.13); font-size:10px; color:var(--text2); }
.pet-bond-card > div:first-child { display:flex; justify-content:space-between; gap:8px; color:#dbc5ff; }
.pet-bond-card b { color:var(--gold); font-size:10px; }
.pet-bond-card small { display:block; margin-top:4px; color:var(--text3); font-size:9px; }
.pet-bond-bar { height:4px; margin-top:5px; overflow:hidden; border-radius:99px; background:rgba(0,0,0,.34); }
.pet-bond-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8b5cf6,#e879f9); box-shadow:0 0 7px rgba(216,180,254,.55); }
.faction-focus-btn { width:100%; margin-top:8px; padding:7px 9px; border:1px solid rgba(168,85,247,.32); border-radius:8px; background:rgba(76,29,149,.12); color:#d8c4ff; font:700 10px var(--font-head); cursor:pointer; }
.faction-focus-btn:hover { background:rgba(124,58,237,.26); border-color:rgba(196,132,252,.68); }
.faction-focus-active { color:#fff; background:linear-gradient(135deg,rgba(109,40,217,.65),rgba(147,51,234,.35)); box-shadow:0 0 12px rgba(168,85,247,.2); }

.pet-power-btn {
  display: block; width: 100%; margin-top: 6px;
  padding: 7px 10px; border-radius: 9px; font-size: 11px;
  font-family: var(--font-head); font-weight: 700; letter-spacing: .5px;
  cursor: pointer; border: none; transition: opacity .15s;
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
}
.pet-power-btn:hover:not(:disabled) { opacity: .85; }
.pet-power-btn.pet-power-used {
  background: rgba(255,255,255,.07); color: var(--text3); cursor: not-allowed;
}

.class-skill-btn {
  width: 100%; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(168,85,247,.35); cursor: pointer;
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(168,85,247,.1));
  transition: opacity .15s, transform .1s;
}
.class-skill-btn:hover:not(:disabled) { opacity: .9; }
.class-skill-btn:active:not(:disabled) { transform: scale(.97); }
.class-skill-btn:disabled { cursor: not-allowed; opacity: .45; }
.class-skill-icon-img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.class-skill-emoji { font-size: 22px; flex-shrink: 0; }
.class-skill-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.class-skill-name { font-size: 11px; font-weight: 700; color: var(--text); }
.class-skill-mana { font-size: 9px; color: var(--text3); }

/* ── INVENTORY VIEW ─────────────────────────────────────── */
.inv-gold-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.06));
  border: 1px solid rgba(245,158,11,.35); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 20px;
}
.inv-gold-amt {
  font-family: var(--font-head); font-size: 30px; font-weight: 800;
  color: var(--gold); line-height: 1;
}
.inv-gold-lbl { font-size: 11px; color: var(--text3); letter-spacing: 1px; margin-top: 2px; }

.inv-section { margin-bottom: 22px; }
.inv-section-title {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 1.5px;
  color: var(--text3); text-transform: uppercase; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.inv-weapons-list { display: flex; flex-direction: column; gap: 10px; }
.inv-weapon-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--wc, var(--border));
  border-radius: 12px; padding: 12px 14px; transition: background .2s;
}
.inv-weapon-card.inv-weapon-equipped { background: color-mix(in srgb, var(--wc,#60a5fa) 8%, transparent); }
.inv-weapon-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.04); flex-shrink:0; }
.inv-weapon-emoji { width: 48px; height: 48px; font-size: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inv-weapon-info { flex: 1; min-width: 0; }
.inv-weapon-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.inv-weapon-stats { font-size: 11px; color: var(--text2); margin-top: 3px; }
.inv-weapon-slot { font-size: 10px; color: var(--text3); margin-top: 2px; }
.inv-rune-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--text3); }
.inv-rune-slot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--rc, #4b5563); font-size: 13px; background: color-mix(in srgb, var(--rc, #4b5563) 15%, transparent); }
.inv-rune-slot.inv-rune-filled { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 25%, transparent); }
.smithy-rune-slots { font-size: 10px; color: #a78bfa; margin-top: 3px; letter-spacing: .02em; }
.inv-tier-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 6px; border: 1px solid; margin-right: 4px;
}
.inv-eq-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text2);
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.inv-eq-btn:hover { background: rgba(255,255,255,.12); }
.inv-eq-btn.inv-eq-active { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #f87171; }
.inv-eq-btn:disabled { opacity: .5; cursor: not-allowed; }
.inv-weapon-card.inv-weapon-forging { opacity: .75; }
.inv-items-grid { display: flex; flex-direction: column; gap: 6px; }
.inv-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.inv-item-img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.inv-item-name { flex: 1; font-size: 13px; color: var(--text); }
.inv-item-qty { font-family: var(--font-head); font-size: 15px; color: var(--gold); font-weight: 700; }
.inv-empty { font-size: 13px; color: var(--text3); padding: 10px 0; text-align: center; }

/* ── SMITHY VIEW ─────────────────────────────────────────── */
.smithy-header { margin-bottom: 20px; }
.smithy-desc { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 12px; }
.smithy-recipes { display: flex; flex-direction: column; gap: 10px; }
.smithy-recipe {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,.03); transition: background .2s;
}
.smithy-recipe.smithy-ready { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
.smithy-recipe.smithy-locked { opacity: .6; }
.smithy-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; flex-shrink: 0; background: rgba(255,255,255,.04); }
.smithy-emoji { width: 48px; height: 48px; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smithy-info { flex: 1; min-width: 0; }
.smithy-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smithy-req { font-size: 12px; display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.smithy-have { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; }
.smithy-have-ok { background: rgba(34,197,94,.15); color: #4ade80; }
.smithy-have-no { background: rgba(239,68,68,.12); color: #f87171; }
.smithy-stats { font-size: 11px; color: var(--text2); margin-top: 4px; }
.smithy-btn {
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  font-family: var(--font-head); letter-spacing: .5px; cursor: pointer;
  white-space: nowrap; transition: background .15s;
  background: linear-gradient(135deg,#b45309,#d97706); color: #fff; border: none;
}
.smithy-btn:hover { background: linear-gradient(135deg,#d97706,#f59e0b); }
.smithy-btn.smithy-btn-locked { background: rgba(255,255,255,.06); color: var(--text3); border: 1px solid var(--border); cursor: not-allowed; }

/* ── SHOP VIEW ───────────────────────────────────────────── */
#view-shop .shop-tabs { margin-bottom: 0; }
#view-shop .shop-rows { max-height: none; }

/* ── CHARACTER SHEET ─────────────────────────────────────── */
.char-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .char-grid { grid-template-columns: 1fr; } }

.char-portrait-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px 20px; text-align: center;
}
.char-portrait-ring {
  width: 220px; height: 220px; border-radius: 50%; margin: 0 auto;
  border: 4px solid transparent; padding: 4px;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, var(--accent), var(--accent2)) border-box;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.char-portrait-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.char-portrait-emoji { font-size: 96px; line-height: 1; }
.char-name  { font-family: var(--font-head); font-size: 22px; font-weight: 700; margin-top: 18px; color: var(--text); }
.char-title { font-size: 13px; color: var(--text2); margin-top: 3px; }
.char-badges { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.char-badge {
  font-size: 11px; padding: 4px 10px; border-radius: 20px;
  background: rgba(137,180,250,.1); border: 1px solid rgba(137,180,250,.2); color: var(--text2);
}
.char-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.char-stat-card {
  background: rgba(137,180,250,.05); border: 1px solid rgba(137,180,250,.1);
  border-radius: 10px; padding: 10px;
}
.char-stat-val { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); }
.char-stat-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.char-bar-wrap { margin-top: 14px; text-align: left; }
.char-bar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-bottom: 3px; }

.char-section { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 18px; }
.char-section-title {
  font-family: var(--font-head); font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text2); margin-bottom: 14px;
}

.char-equip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 480px; }
@media (max-width: 600px) { .char-equip-grid { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.char-slot {
  aspect-ratio: 1; border-radius: 10px; background: rgba(137,180,250,.05);
  border: 1px solid rgba(137,180,250,.12); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 5px;
  text-align: center; cursor: pointer; transition: var(--transition); position: relative;
}
.char-slot:hover { background: rgba(137,180,250,.1); border-color: rgba(137,180,250,.3); }
.char-slot-icon { font-size: 18px; }
.char-slot-img { width: 26px; height: 26px; object-fit: contain; }
.char-slot-label { font-size: 7px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.char-slot-name {
  font-size: 8px; color: var(--text2); font-weight: 600; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.char-slot-locked { opacity: .4; cursor: not-allowed; }
.char-slot-locked:hover { background: rgba(137,180,250,.05); border-color: rgba(137,180,250,.12); }

.char-inv-mini { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }

.char-attr-grid { display: flex; flex-direction: column; gap: 6px; }
.char-hist-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.char-hist-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: rgba(137,180,250,.06); border-radius: 6px; font-size: 12px; }
.char-hist-lvl { font-weight: 700; color: var(--accent); }
.char-hist-date { color: var(--text3); }
.char-attr-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(137,180,250,.05); border: 1px solid rgba(137,180,250,.1);
  border-radius: 10px; padding: 8px 12px;
}
.char-attr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.char-attr-label { font-size: 12px; font-weight: 600; color: var(--text); }
.char-attr-effect { font-size: 10px; color: var(--text3); }
.char-attr-val { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--accent); min-width: 22px; text-align: center; }
.char-attr-btn {
  width: 26px; height: 26px; border-radius: 8px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.char-attr-btn:hover:not(:disabled) { filter: brightness(1.15); }
.char-attr-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── ANIMACIONES ─────────────────────────────────────────── */
@keyframes animFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.anim-float { animation: animFloat 3s ease-in-out infinite; }

@keyframes animBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.anim-bounce { animation: animBounce 1.3s ease-in-out infinite; }

@keyframes animShake {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-3deg); }
  40%     { transform: rotate(3deg); }
  60%     { transform: rotate(-2deg); }
  80%     { transform: rotate(2deg); }
}
.anim-shake { animation: animShake 3.2s ease-in-out infinite; }

@keyframes animPulseGlow {
  0%,100% { box-shadow: 0 0 4px 0 var(--wc, #fff); }
  50%     { box-shadow: 0 0 14px 2px var(--wc, #fff); }
}
.anim-pulse-glow { animation: animPulseGlow 1.8s ease-in-out infinite; }

@keyframes animPulseBtn { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.anim-pulse-btn { animation: animPulseBtn 1.6s ease-in-out infinite; }

@keyframes animPulseDanger {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  50%     { box-shadow: 0 0 18px 4px rgba(239,68,68,.55); }
}
.anim-pulse-danger { animation: animPulseDanger 1.1s ease-in-out infinite; }

/* ── ÍNDICE DE HÉROE ─────────────────────────────────────── */
.hero-index-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.hero-index-num { font-family: var(--font-head); font-size: 48px; font-weight: 800; line-height: 1; }
.hero-index-label { font-size: 15px; font-weight: 700; }
.hero-index-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.hero-index-bars { display: flex; flex-direction: column; gap: 8px; }
.hero-index-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text2); }
.hero-index-row span { width: 130px; flex-shrink: 0; }
.hero-index-bar-bg { flex: 1; height: 8px; background: rgba(137,180,250,.1); border-radius: 4px; overflow: hidden; }
.hero-index-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; transition: width .3s ease; }

/* ── METAS A LARGO PLAZO ─────────────────────────────────── */
.goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.goal-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; cursor: pointer; transition: var(--transition);
}
.goal-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.goal-card.goal-done { opacity: .6; }
.goal-card-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.goal-card-date { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
.goal-card-date.goal-overdue { color: var(--red); }
.goal-progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.goal-progress-bg { flex: 1; height: 10px; background: rgba(137,180,250,.1); border-radius: 5px; overflow: hidden; }
.goal-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 5px; transition: width .3s ease; }
.goal-progress-label { font-size: 11px; font-weight: 700; color: var(--accent); min-width: 32px; text-align: right; }
.goal-card-meta { font-size: 11px; color: var(--text3); }
.goal-card-notes { font-size: 11px; color: var(--text2); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.pattern-line { font-size: 13px; color: var(--text2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.pattern-line:last-child { border-bottom: none; }

.wager-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 700;
  background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.35); color: var(--gold);
}

/* ================================================================
   BLOQUE D — ATMÓSFERA VISUAL
   ================================================================ */

/* ── TEMAS POR CLASE ─────────────────────────────────────────── */
[data-hero-class="guerrero"] { --accent:#ef4444; --accent2:#f97316; }
[data-hero-class="mago"]     { --accent:#a855f7; --accent2:#818cf8; }
[data-hero-class="picaro"]   { --accent:#22c55e; --accent2:#10b981; }
[data-hero-class="clerigo"]  { --accent:#fbbf24; --accent2:#f59e0b; }
[data-hero-class="arquero"]  { --accent:#4ade80; --accent2:#86efac; }
[data-hero-class="fundador"] { --accent:#38bdf8; --accent2:#818cf8; }

/* ── RELOJ DEL DUNGEON ──────────────────────────────────────── */
#dungeonClockChip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px; cursor: default;
  transition: var(--transition);
}
#dungeonClockChip.clock-bonus {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.clock-name { font-size: 11px; }

[data-tod="dawn"]    .orb-purple { opacity:.3; filter:hue-rotate(-40deg); }
[data-tod="dusk"]    .orb-purple { opacity:.3; filter:hue-rotate(20deg); }
[data-tod="evening"] .orb-purple { opacity:.2; filter:hue-rotate(200deg); }
[data-tod="midnight"] .orb-purple { opacity:.15; filter:hue-rotate(230deg); }

/* ── PARTÍCULAS HP / GOLD ───────────────────────────────────── */
.particle-hp   { font-weight: 700; font-size: 13px; }
.particle-dmg  { color: #ef4444 !important; text-shadow: 0 0 8px rgba(239,68,68,.6); }
.particle-heal { color: #22c55e !important; text-shadow: 0 0 8px rgba(34,197,94,.6); }
.particle-gold { color: #f59e0b !important; text-shadow: 0 0 8px rgba(245,158,11,.6); font-weight:700; }

/* ================================================================
   BLOQUE E — ÁRBOL DE HABILIDADES
   ================================================================ */
.skill-pts-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--card2); border-radius: 10px;
  font-size: 13px; margin-bottom: 16px;
}
.skill-tier { margin-bottom: 20px; }
.skill-tier-label {
  font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 10px;
}
.skill-tier-row { display: flex; gap: 12px; flex-wrap: wrap; }
.skill-card {
  flex: 1; min-width: 150px; max-width: 220px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; position: relative;
  transition: var(--transition);
}
.skill-card.skill-available { cursor: pointer; border-color: var(--accent); }
.skill-card.skill-available:hover { background: color-mix(in srgb,var(--accent) 10%,var(--card)); transform: translateY(-2px); }
.skill-card.skill-learned   { border-color: #22c55e; }
.skill-card.skill-locked    { opacity: .4; }
.skill-icon { font-size: 24px; margin-bottom: 6px; }
.skill-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.skill-desc { font-size: 11px; color: var(--text2); line-height: 1.4; }
.skill-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3);
}
.skill-badge.skill-badge-learn {
  background: color-mix(in srgb,var(--accent) 15%,transparent);
  color: var(--accent); border-color: color-mix(in srgb,var(--accent) 40%,transparent);
}

/* ================================================================
   BLOQUE E — BESTIARIO
   ================================================================ */
.bestiary-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; font-size:13px; font-weight:600; }
.bestiary-prog-bar { flex:1; height:8px; background:rgba(137,180,250,.1); border-radius:4px; overflow:hidden; }
.bestiary-prog-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:4px; transition:width .4s ease; }
.bestiary-group-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text3); margin:16px 0 8px; }
.bestiary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:4px; }
.bestiary-card {
  background:var(--card); border:1px solid rgba(156,163,175,.15);
  border-radius:12px; padding:12px 8px; text-align:center; transition:var(--transition); --bc:#9ca3af;
}
.bestiary-known:hover { transform:translateY(-2px); border-color:var(--bc); box-shadow:0 0 12px rgba(0,0,0,.3); }
.bestiary-unknown { opacity:.6; }
.bestiary-img-wrap { position:relative; width:80px; height:80px; margin:0 auto 8px; }
.bestiary-img   { width:80px; height:80px; object-fit:contain; image-rendering:pixelated; }
.bestiary-locked { filter:brightness(0) contrast(1.2); opacity:.55; }
.bestiary-lock-icon { position:absolute; bottom:0; right:0; font-size:16px; line-height:1; }
.bestiary-fallback { width:80px; height:80px; font-size:44px; display:flex; align-items:center; justify-content:center; }
.bestiary-name  { font-family:var(--font-head); font-size:12px; font-weight:700; margin-bottom:4px; }
.bestiary-rarity { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; display:block; }

/* ================================================================
   BLOQUE E — EL DUNGEON CRECE CONTIGO
   ================================================================ */
/* ── Week progress panel ─────────────────────────────────── */
.dg-week-panel {
  background:color-mix(in srgb,var(--accent) 6%,var(--card2));
  border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:18px;
  transition:border-color .3s;
}
.dg-week-panel.dg-week-all-ok { border-color:#22c55e; background:color-mix(in srgb,#22c55e 6%,var(--card2)); }
.dg-week-title { font-size:12px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
.dg-title-art,.dg-meter-art { width:16px; height:16px; object-fit:contain; image-rendering:pixelated; vertical-align:middle; margin-right:5px; }
.dg-week-row   { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dg-week-cond  { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--text3); }
.dg-week-cond.ok  { color:var(--text); }
.dg-week-cond.fail{ color:#f87171; }
.dg-week-bar   { height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.dg-week-fill  { height:100%; background:var(--accent); border-radius:3px; transition:width .4s cubic-bezier(.23,1,.32,1); }
.dg-week-cond.ok .dg-week-fill { background:#22c55e; }
.dg-week-footer{ display:flex; justify-content:space-between; font-size:11px; margin-top:10px; color:var(--text2); flex-wrap:wrap; gap:4px; }

/* ── Room grid ───────────────────────────────────────────── */
.dg-rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.dg-effects { margin:14px 0; padding:13px; border:1px solid rgba(216,180,254,.30); border-radius:12px; background:linear-gradient(135deg,rgba(43,21,67,.14),rgba(8,5,18,.05)); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.dg-effects>header { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:10px; }.dg-effects header span,.dg-effects-empty span { display:block; color:#c99bf0; font:700 9px var(--font-head); letter-spacing:.14em; }.dg-effects header b,.dg-effects-empty b { display:block; margin-top:3px; color:#eee5f7; font:700 13px var(--font-head); }.dg-effects header small { color:var(--text3); font-size:9px; }.dg-effects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:7px; }.dg-effect { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:48px; padding:7px; border:1px solid color-mix(in srgb,var(--effect) 34%,transparent); border-radius:8px; background:color-mix(in srgb,var(--effect) 7%,rgba(10,6,21,.08)); }.dg-effect img { width:30px; height:30px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--effect) 46%,transparent)); }.dg-effect div { min-width:0; }.dg-effect b,.dg-effect small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dg-effect b { color:#eee4f7; font-size:10px; }.dg-effect small { margin-top:2px; color:var(--text3); font-size:8px; }.dg-effect strong { color:var(--effect); font:700 11px var(--font-head); white-space:nowrap; }.dg-effects-empty { display:grid; min-height:78px; place-items:center; text-align:center; }.dg-effects-empty small { display:block; max-width:500px; margin-top:5px; color:var(--text3); font-size:9px; }
@media (max-width:600px) { .dg-effects>header { align-items:start; flex-direction:column; }.dg-effects-grid { grid-template-columns:1fr; } }
.dg-room {
  position:relative; overflow:hidden; border-radius:18px; min-height:200px;
  border:1px solid color-mix(in srgb,var(--rc,#7c3aed) 25%,var(--border));
  --rc:#7c3aed; display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transform:translateY(16px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.23,1,.32,1), border-color .2s, box-shadow .2s;
}
.dg-room.dg-room-in { opacity:1; transform:translateY(0); }
.dg-room-open { cursor:pointer; }
.dg-room-open:hover { border-color:var(--rc); box-shadow:0 4px 24px color-mix(in srgb,var(--rc) 25%,transparent); transform:translateY(-3px) !important; }
.dg-room-open:active { transform:translateY(-1px) !important; }

/* Sala bloqueada */
.dg-room-locked { opacity:.9; }
.dg-room-locked-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(.2) brightness(.25); z-index:0;
}
.dg-room-locked .dg-room-body { position:relative; z-index:1; background:rgba(0,0,0,.55); padding:18px 16px; }

/* Sala próxima a desbloquear — glow pulsante */
.dg-room-next {
  border-color:color-mix(in srgb,var(--rc) 50%,var(--border)) !important;
  animation:dg-next-pulse 2.5s ease-in-out infinite;
}
@keyframes dg-next-pulse {
  0%,100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--rc) 0%,transparent); }
  50%      { box-shadow:0 0 16px 4px color-mix(in srgb,var(--rc) 30%,transparent); }
}

/* Glow radial en sala abierta */
.dg-room-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--rc) 30%,transparent) 0%,transparent 65%);
}

/* Contenido de la sala */
.dg-room-body   { padding:16px; position:relative; z-index:2; background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.1) 100%); }
.dg-room-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.dg-room-art { width:30px; height:30px; object-fit:cover; object-position:center; border:1px solid color-mix(in srgb,var(--rc) 65%,#fff); border-radius:8px; image-rendering:pixelated; flex-shrink:0; }
.dg-room-rank,.dg-room-lock { margin-left:auto; color:#f5e9ff; border:1px solid color-mix(in srgb,var(--rc) 65%,#fff); background:rgba(8,5,17,.7); padding:3px 6px; border-radius:999px; font-size:9px; font-weight:800; }
.dg-room-icon   { font-size:22px; flex-shrink:0; }
.dg-room-name   { font-family:var(--font-head); font-size:13px; font-weight:700; color:#fff; line-height:1.2; }
.dg-room-badge  { margin-left:auto; font-size:16px; }
.dg-room-desc   { font-size:10px; color:rgba(255,255,255,.7); line-height:1.5; margin-bottom:6px; }
.dg-room-stat   { font-size:10px; color:color-mix(in srgb,var(--rc) 90%,#fff); font-weight:600; }
.dg-room-perk   { margin-top:5px; font-size:10px; color:#f5e9ff; line-height:1.35; }
.dg-upgrade-btn { width:100%; margin-top:9px; min-height:29px; border:1px solid color-mix(in srgb,var(--rc) 72%,#fff); border-radius:8px; background:color-mix(in srgb,var(--rc) 20%,rgba(8,5,17,.7)); color:#fff; font:700 10px var(--font-head); cursor:pointer; }
.dg-upgrade-btn:hover:not(:disabled) { background:color-mix(in srgb,var(--rc) 40%,rgba(8,5,17,.7)); }
.dg-upgrade-btn:disabled { opacity:.58; cursor:default; }
.dg-room-enter  { font-size:10px; color:rgba(255,255,255,.45); margin-top:4px; }
.dg-room-bonus-preview { font-size:10px; color:rgba(255,255,255,.5); margin-top:4px; }
.dg-room-unlock-req { margin-top:8px; }

/* ── Partículas y efectos ambient ────────────────────────── */
.dg-particles { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }

/* Brasas — La Entrada, Sala de Misiones */
.dg-ember {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:color-mix(in srgb,var(--rc) 80%,#fbbf24);
  left:calc(15% + var(--i,0) * 13%); bottom:-6px;
  animation:dg-rise calc(2.5s + var(--i,0) * .4s) ease-in infinite;
  animation-delay:calc(var(--i,0) * .45s);
  opacity:.7;
}
@keyframes dg-rise {
  0%   { transform:translateY(0) scale(1); opacity:.7; }
  70%  { opacity:.4; }
  100% { transform:translateY(-180px) translateX(calc(var(--i,0) * 6px - 15px)) scale(.3); opacity:0; }
}

/* Chispas de fragua — La Forja */
.dg-spark {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fbbf24;
  left:calc(10% + var(--i,0) * 11%); bottom:20px;
  animation:dg-spark calc(1.2s + var(--i,0) * .2s) ease-out infinite;
  animation-delay:calc(var(--i,0) * .18s);
}
@keyframes dg-spark {
  0%   { transform:translateY(0) translateX(0) scale(1.5); opacity:1; }
  100% { transform:translateY(calc(-80px - var(--i,0)*10px)) translateX(calc(var(--i,0)*14px - 40px)) scale(.2); opacity:0; }
}

/* Destellos mágicos — Biblioteca */
.dg-sparkle {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#c4b5fd;
  left:calc(10% + var(--i,0) * 12%); top:calc(10% + var(--i,0) * 8%);
  animation:dg-twinkle calc(1.8s + var(--i,0) * .25s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .3s);
}
@keyframes dg-twinkle {
  0%,100% { opacity:0; transform:scale(.5); }
  50%     { opacity:.8; transform:scale(1.3); }
}

/* Bruma — El Jardín */
.dg-mist { position:absolute; inset:0; pointer-events:none; z-index:1; }
.dg-mist span {
  position:absolute; bottom:0; width:100%; height:60px;
  background:linear-gradient(0deg,color-mix(in srgb,#15803d 20%,transparent),transparent);
  animation:dg-mist-float 4s ease-in-out infinite;
}
.dg-mist span:nth-child(2) { animation-delay:-2s; opacity:.6; }
@keyframes dg-mist-float {
  0%,100% { transform:translateX(0) scaleX(1); opacity:.4; }
  50%     { transform:translateX(6px) scaleX(1.05); opacity:.7; }
}

/* Brillo dorado — Cámara del Tesoro */
.dg-glitter {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:color-mix(in srgb,#fbbf24 85%,#fff);
  left:calc(8% + var(--i,0) * 11%); top:calc(8% + var(--i,0) * 9%);
  animation:dg-glitter calc(2s + var(--i,0) * .3s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .4s);
}
@keyframes dg-glitter {
  0%,100% { opacity:0; transform:scale(.6) rotate(0deg); }
  50%     { opacity:1; transform:scale(1.4) rotate(45deg); }
}

/* Estrellas — El Observatorio */
.dg-star {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#bfdbfe;
  left:calc(5% + var(--i,0) * 9%); top:calc(5% + var(--i,0) * 7%);
  animation:dg-star-pulse calc(1.5s + var(--i,0) * .3s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .22s);
  box-shadow:0 0 4px 1px rgba(191,219,254,.5);
}
@keyframes dg-star-pulse {
  0%,100% { opacity:.2; transform:scale(.8); }
  50%     { opacity:1;  transform:scale(1.5); }
}

/* Relámpago — Arena del Boss */
.dg-lightning {
  position:absolute; top:8px; left:50%; width:2px; height:0;
  background:linear-gradient(180deg,rgba(250,204,21,0),#fde68a,rgba(250,204,21,0));
  animation:dg-bolt 3s ease-in-out infinite;
  transform:translateX(-50%) skewX(-10deg);
}
@keyframes dg-bolt {
  0%,85%,100% { height:0; opacity:0; }
  87%          { height:60px; opacity:1; }
  90%          { height:0; opacity:0; }
  92%          { height:40px; opacity:.6; }
  95%          { height:0; opacity:0; }
}

/* Partículas cósmicas — Santuario */
.dg-cosmic {
  position:absolute; width:2px; height:2px; border-radius:50%;
  left:calc(4% + var(--i,0) * 8.5%); top:calc(4% + var(--i,0) * 7%);
  animation:dg-cosmic-drift calc(3s + var(--i,0) * .25s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .28s);
}
.dg-cosmic:nth-child(3n)   { background:#a78bfa; }
.dg-cosmic:nth-child(3n+1) { background:#fbbf24; }
.dg-cosmic:nth-child(3n+2) { background:#67e8f9; }
@keyframes dg-cosmic-drift {
  0%,100% { opacity:0; transform:scale(.5) translate(0,0); }
  30%     { opacity:1; transform:scale(1.4) translate(3px,-6px); }
  70%     { opacity:.6; transform:scale(1) translate(-3px,-12px); }
}

/* ── Modal de sala nueva ─────────────────────────────────── */
.room-unlock-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.room-unlock-overlay.room-unlock-visible { opacity:1; }
.room-unlock-card {
  position:relative; width:min(420px,90vw); border-radius:24px; overflow:hidden;
  border:2px solid color-mix(in srgb,var(--rc,#7c3aed) 50%,transparent);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:dg-card-in .45s cubic-bezier(.23,1,.32,1) both;
}
@keyframes dg-card-in {
  from { transform:scale(.85) translateY(24px); opacity:0; }
  to   { transform:scale(1)   translateY(0);    opacity:1; }
}
.room-unlock-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.45);
}
.room-unlock-content {
  position:relative; z-index:1; padding:36px 28px; text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.75) 100%);
}
.room-unlock-label  { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb,var(--rc) 85%,#fff); margin-bottom:10px; }
.room-unlock-icon   { font-size:56px; margin-bottom:8px; animation:dg-icon-bounce .6s cubic-bezier(.34,1.56,.64,1) .2s both; }
.room-unlock-art { width:76px; height:76px; object-fit:cover; border-radius:16px; border:1px solid color-mix(in srgb,var(--rc) 70%,#fff); image-rendering:pixelated; margin-bottom:10px; animation:dg-icon-bounce .6s cubic-bezier(.34,1.56,.64,1) .2s both; }
@keyframes dg-icon-bounce {
  from { transform:scale(0) rotate(-10deg); } to { transform:scale(1) rotate(0); }
}
.room-unlock-name   { font-family:var(--font-head); font-size:22px; font-weight:800; color:#fff; margin-bottom:8px; }
.room-unlock-flavor { font-size:12px; color:rgba(255,255,255,.65); font-style:italic; margin-bottom:14px; }
.room-unlock-bonus  { display:inline-block; font-size:12px; font-weight:700; padding:5px 14px;
                      background:color-mix(in srgb,var(--rc) 20%,rgba(0,0,0,.4));
                      border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);
                      border-radius:20px; color:#fff; margin-bottom:20px; }
.room-unlock-btn    { padding:11px 32px; font-size:14px; font-weight:700;
                      background:color-mix(in srgb,var(--rc) 70%,var(--accent));
                      border:none; border-radius:50px; color:#fff; cursor:pointer;
                      transition:transform .15s; }
.room-unlock-btn:hover  { transform:scale(1.04); }
.room-unlock-btn:active { transform:scale(.97); }
.prestige-choice-overlay { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:20px; background:rgba(6,3,15,.72); backdrop-filter:blur(9px); }
.prestige-choice-card { width:min(680px,100%); padding:28px; border:1px solid rgba(216,180,254,.6); border-radius:20px; background:linear-gradient(145deg,rgba(49,22,76,.95),rgba(13,8,27,.96)); box-shadow:0 30px 80px rgba(0,0,0,.55); text-align:center; }
.prestige-choice-card > span { color:#d8b4fe; font:800 10px var(--font-head); letter-spacing:.16em; }.prestige-choice-card h2 { margin:8px 0; font-family:var(--font-head); }.prestige-choice-card p { margin:0 0 20px; color:var(--text2); }
.prestige-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.prestige-choice-grid button { min-height:130px; padding:14px; border:1px solid rgba(216,180,254,.28); border-radius:13px; background:rgba(10,6,22,.55); color:#fff; cursor:pointer; text-align:left; }.prestige-choice-grid button:hover { border-color:#d8b4fe; background:rgba(126,34,206,.25); transform:translateY(-2px); }.prestige-choice-grid b { display:block; margin-bottom:8px; font-family:var(--font-head); }.prestige-choice-grid small { color:#d8cce4; line-height:1.45; }
@media(max-width:600px){.prestige-choice-grid{grid-template-columns:1fr}.prestige-choice-grid button{min-height:76px}}
.progression-confirm { text-align:left; }.progression-confirm h2 { color:#f5eddb; }.progression-confirm p b { color:#f5c95c; }.progression-race-grid button { text-align:center; min-height:118px; }.progression-race-grid img,.progression-identity-grid img { display:block; width:46px; height:46px; margin:0 auto 7px; object-fit:contain; image-rendering:pixelated; }.progression-race-grid .progression-picked,.progression-identity-grid .progression-picked { border-color:#f5c95c; background:rgba(126,34,206,.34); box-shadow:0 0 0 1px rgba(245,201,92,.35),0 0 22px rgba(168,85,247,.22); }.progression-identity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.progression-identity-grid button { min-height:82px; padding:8px; border:1px solid rgba(216,180,254,.28); border-radius:11px; background:rgba(10,6,22,.55); color:#fff; cursor:pointer; text-align:center; }.progression-identity-grid button:hover { border-color:#d8b4fe; background:rgba(126,34,206,.2); }.progression-subhead { margin:14px 0 7px; color:#d8b4fe; font:800 10px var(--font-head); letter-spacing:.1em; text-transform:uppercase; }.progression-summary { display:grid; gap:6px; margin:14px 0; padding:10px; border-left:2px solid rgba(245,201,92,.65); border-radius:8px; background:rgba(8,5,18,.4); color:var(--text2); font-size:11px; line-height:1.45; }.progression-summary span::before { content:'✦ '; color:#c084fc; }.progression-confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }.progression-confirm-actions .btn { min-height:38px; }.chr-race-lock { grid-column:1/-1; color:#d8cce4; font:700 9px var(--font-head); letter-spacing:.05em; }.chr-race-lock.chr-race-open { color:#8ee6ba; }.chr-race-pill.chr-locked { cursor:not-allowed; opacity:.58; }.chr-race-pill.chr-locked:hover { border-color:rgba(216,180,254,.18); }
@media(max-width:600px){.progression-identity-grid{grid-template-columns:repeat(2,1fr)}}

/* ================================================================
   BLOQUE E — RUNAS
   ================================================================ */
.rune-section-title { font-size:12px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
.rune-weapon-row { background:var(--card2); border-radius:10px; padding:12px; margin-bottom:10px; }
.rune-weapon-name { font-size:13px; font-weight:700; margin-bottom:8px; }
.rune-slots-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rune-slot {
  width:36px; height:36px; border-radius:8px;
  border:2px dashed var(--border2); display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:default; transition:var(--transition);
}
.rune-slot-filled { border-style:solid; border-color:var(--rc,var(--accent)); background:color-mix(in srgb,var(--rc,var(--accent)) 15%,transparent); cursor:pointer; }
.rune-slot-filled:hover { background:color-mix(in srgb,var(--rc,var(--accent)) 25%,transparent); }
.rune-empty { font-size:12px; color:var(--text3); padding:8px 0; }
.rune-inv-grid { display:flex; flex-wrap:wrap; gap:10px; }
.rune-inv-card {
  background:color-mix(in srgb,var(--rc,#9ca3af) 10%,var(--card));
  border:1px solid color-mix(in srgb,var(--rc,#9ca3af) 30%,var(--border));
  border-radius:12px; padding:12px; width:150px; text-align:center; --rc:#9ca3af;
}
.rune-inv-icon { font-size:24px; margin-bottom:6px; display:flex; align-items:center; justify-content:center; height:36px; }
.rune-img { width:36px; height:36px; object-fit:contain; image-rendering:pixelated; }
.rune-inv-name { font-size:12px; font-weight:700; color:var(--rc); margin-bottom:4px; }
.rune-inv-desc { font-size:10px; color:var(--text2); margin-bottom:8px; }
.rune-equip-sel { font-size:10px; width:100%; background:var(--card2); border:1px solid var(--border); border-radius:6px; padding:3px 6px; color:var(--text); }
.rune-frags-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; margin-top:8px; }
.rune-frag-card {
  background:color-mix(in srgb,var(--rc,#9ca3af) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--rc,#9ca3af) 25%,var(--border));
  border-radius:10px; padding:8px 4px; text-align:center; --rc:#9ca3af; transition:border-color .15s;
}
.rune-frag-card.rune-frag-ready { border-color:var(--rc); box-shadow:0 0 8px color-mix(in srgb,var(--rc) 35%,transparent); }
.rune-frag-img { width:40px; height:40px; object-fit:contain; display:block; margin:0 auto 4px; }
.rune-frag-fallback { font-size:28px; display:block; line-height:1; margin-bottom:4px; }
.rune-frag-count { font-size:11px; font-weight:700; color:var(--text3); }
.rune-frag-count-ok { color:var(--rc); }
.rune-frag-name { font-size:9px; color:var(--text3); margin-top:2px; }

/* ================================================================
   BLOQUE F — INTEGRACIONES
   ================================================================ */
.integrations-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px) { .integrations-grid { grid-template-columns:1fr; } }
.integration-connect { text-align:center; padding:24px 16px; }
.integration-icon  { font-size:40px; margin-bottom:10px; }
.integration-title { font-family:var(--font-head); font-size:16px; font-weight:700; margin-bottom:8px; }
.integration-desc  { font-size:12px; color:var(--text2); margin-bottom:16px; max-width:300px; margin-inline:auto; }
.integration-card  { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; }

.fit-connected   { text-align:center; padding:12px 0; }
.fit-steps-num   { font-family:var(--font-head); font-size:40px; font-weight:800; }
.fit-steps-label { font-size:12px; color:var(--text2); margin-bottom:12px; }
.fit-bar-wrap    { position:relative; height:10px; background:rgba(137,180,250,.1); border-radius:5px; overflow:hidden; margin-bottom:10px; }
.fit-bar-fill    { height:100%; background:linear-gradient(90deg,#22c55e,#4ade80); border-radius:5px; transition:width .4s ease; }
.fit-bar-goal    { position:absolute; right:4px; top:-18px; font-size:10px; color:var(--text3); }
.fit-milestones  { display:flex; justify-content:space-around; font-size:10px; gap:4px; }
.fit-ms          { color:var(--text3); padding:2px 6px; border-radius:4px; border:1px solid var(--border); }
.fit-ms-done     { background:rgba(34,197,94,.15); color:#22c55e; border-color:rgba(34,197,94,.3); }

.cal-header     { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cal-event-list { display:flex; flex-direction:column; gap:8px; }
.cal-event-row  { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--card2); border-radius:8px; }
.cal-event-info { flex:1; min-width:0; }
.cal-event-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-event-date { font-size:11px; color:var(--text3); }
/* ================================================================
   CHARACTER HUB — tabs de Personaje / Habilidades / Runas / etc.
   ================================================================ */
.char-hub-tabs {
  display: none; /* mostrado via JS cuando character view está activa */
  gap: 0;
  padding: 0 8px;
  border-bottom: 2px solid var(--border2, rgba(137,180,250,.25));
  background: var(--bg2, var(--card));
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.char-hub-tabs::-webkit-scrollbar { display: none; }

.char-tab {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.char-tab:hover  { color: var(--text); }
.char-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.char-tab-panel        { display: none; position: relative; }
.char-tab-panel.active { display: block; }
.char-tab-panel > * { position: relative; z-index: 1; }


/* ── ÍNDICE DEL HÉROE ───────────────────────────────────────── */
.hero-score-widget { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0 4px; }
.hs-wrap   { position:relative; width:80px; height:80px; }
.hs-ring   { width:80px; height:80px; transform:rotate(-90deg); }
.hs-ring-bg   { fill:none; stroke:rgba(255,255,255,.07); stroke-width:8; }
.hs-ring-fill { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dasharray .5s; }
.hs-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hs-num    { font-size:20px; font-weight:700; color:var(--text); line-height:1; }
.hs-icon   { font-size:12px; line-height:1; }
.hs-label  { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.hs-breakdown { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hs-breakdown span { font-size:10px; color:var(--text2); background:rgba(255,255,255,.05); border-radius:6px; padding:2px 7px; }

/* ── LOGIN OVERLAY ──────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(137,180,250,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(168,85,247,.06) 0%, transparent 55%),
    linear-gradient(135deg, #050810 0%, #090e1c 60%, #050810 100%);
}
.login-card {
  position: relative;
  background: rgba(12,17,30,.93);
  border: 1px solid rgba(137,180,250,.18);
  border-radius: 24px;
  padding: 48px 40px 36px;
  width: min(420px, calc(100vw - 40px));
  box-shadow: 0 0 0 1px rgba(137,180,250,.04), 0 8px 40px rgba(0,0,0,.7), 0 0 80px rgba(137,180,250,.05);
  backdrop-filter: blur(24px);
  text-align: center;
}
.login-logo-wrap {
  width: 72px; height: 72px; margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(137,180,250,.12), rgba(168,85,247,.12));
  border: 1px solid rgba(137,180,250,.25);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.login-logo-img   { width: 48px; height: 48px; object-fit: contain; }
.login-logo-emoji { font-size: 32px; line-height: 1; }
.login-title {
  font-family: var(--font-head); font-size: 28px; font-weight: 700;
  color: var(--text); letter-spacing: .08em; margin: 0 0 4px;
}
.login-subtitle {
  font-size: 11px; color: var(--text2); letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 28px;
}
.login-field {
  display: flex; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(137,180,250,.14);
  border-radius: 10px; margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.login-field:focus-within {
  border-color: rgba(137,180,250,.45);
  box-shadow: 0 0 0 3px rgba(137,180,250,.07);
}
.login-field-icon { padding: 0 12px; font-size: 16px; flex-shrink: 0; opacity: .55; }
.login-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 14px; padding: 14px 0; font-family: inherit;
}
.login-input::placeholder { color: var(--text2); opacity: .6; }
.login-toggle-pw {
  background: transparent; border: none; cursor: pointer;
  padding: 0 12px; font-size: 15px; opacity: .55; transition: opacity .2s;
}
.login-toggle-pw:hover { opacity: 1; }
.login-error { font-size: 12px; color: #f38ba8; min-height: 18px; margin: -4px 0 8px; text-align: left; }
.login-btn {
  width: 100%; padding: 14px;
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(168,85,247,.85) 100%);
  border: none; border-radius: 10px; color: #fff; cursor: pointer;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(137,180,250,.2);
  font-family: inherit;
}
.login-btn:hover:not(:disabled) { opacity: .88; box-shadow: 0 6px 28px rgba(137,180,250,.3); }
.login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-btn:disabled { opacity: .55; cursor: not-allowed; }
.login-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: loginSpin .7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-footer { font-size: 11px; color: var(--text2); opacity: .4; margin-top: 22px; letter-spacing: .04em; }
.login-shake  { animation: loginShake .4s ease; }
@keyframes loginShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(3px); }
}
.login-fade-out { animation: loginFadeOut .4s ease forwards; }
@keyframes loginFadeOut { to { opacity: 0; transform: scale(.97); } }

/* Logout en sidebar — icono centrado */
.sidebar-logout {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 8px 4px; background: transparent; border: none;
  color: var(--text3); font-size: 18px; cursor: pointer;
  border-radius: 8px; transition: color .2s, background .2s; font-family: inherit;
  position: relative;
}
.sidebar-logout:hover { color: #f38ba8; background: rgba(243,139,168,.06); }
.sidebar-logout::after {
  content: 'Cerrar sesión';
  position: absolute;
  left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: var(--bg4); color: var(--text);
  font-size: 12px; white-space: nowrap;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  pointer-events: none; opacity: 0;
  transition: opacity .15s; z-index: 200;
}
.sidebar-logout:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   SISTEMA DE COMBOS
   ═══════════════════════════════════════════════════════════ */
.combo-chip {
  display: none; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  animation: combo-pop .35s cubic-bezier(.34,1.56,.64,1);
}
.combo-chip[data-tier="2"] { background: rgba(251,113,133,.15); color: #fb7185; border: 1px solid rgba(251,113,133,.3); }
.combo-chip[data-tier="3"] { background: rgba(251,146,60,.18);  color: #fb923c; border: 1px solid rgba(251,146,60,.35); }
.combo-chip[data-tier="4"] { background: rgba(250,204,21,.18);  color: #facc15; border: 1px solid rgba(250,204,21,.35);
                              animation: combo-pulse 1.2s ease-in-out infinite; }
@keyframes combo-pop   { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes combo-pulse { 0%,100% { box-shadow: 0 0 0 rgba(250,204,21,0); } 50% { box-shadow: 0 0 12px rgba(250,204,21,.45); } }

/* ═══════════════════════════════════════════════════════════
   MODO FURIA — HP < 20%
   ═══════════════════════════════════════════════════════════ */
.fury-mode .hp-bar-fill  { background: #ef4444 !important; animation: fury-bar 1.2s ease-in-out infinite; }
.fury-mode #hpLabel      { color: #ef4444 !important; font-weight: 700; }
.fury-mode .sb-bars      { animation: fury-bar 1.2s ease-in-out infinite; }
@keyframes fury-bar { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 12px rgba(239,68,68,.4); } }
/* Fury indicator banner */
.fury-banner {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4);
  color: #ef4444; padding: 4px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 700; pointer-events: none; z-index: 200;
  animation: fury-bar 1.2s ease-in-out infinite;
  display: none;
}
.fury-mode .fury-banner { display: block; }

/* ═══════════════════════════════════════════════════════════
   HÁBITOS BIDIRECCIONALES
   ═══════════════════════════════════════════════════════════ */
.habit-item       { border-left: 3px solid transparent; }
.habit-pos        { border-left-color: #4ade80; }
.habit-neg        { border-left-color: #f87171; }
.habit-icon       { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.habit-badge-pos  { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.habit-badge-neg  { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.habit-btn-pos    { background: rgba(74,222,128,.18) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.4) !important; }
.habit-btn-neg    { background: rgba(248,113,113,.18) !important; color: #f87171 !important; border: 1px solid rgba(248,113,113,.4) !important; }
.habit-done-mark  { font-size: 16px; opacity: .6; }

/* ═══════════════════════════════════════════════════════════
   MISIONES BLOQUEADAS (depends_on no satisfecho)
   ═══════════════════════════════════════════════════════════ */
.quest-blocked { opacity: .45; pointer-events: none; filter: grayscale(.5); }
.quest-blocked .quest-check,
.quest-blocked .complete-btn { pointer-events: none; cursor: not-allowed !important; }

/* ═══════════════════════════════════════════════════════════
   RULETA DEL DUNGEON
   ═══════════════════════════════════════════════════════════ */
.ruleta-wrap     { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 0; }
.ruleta-canvas   { border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 24px rgba(137,180,250,.2); }
.ruleta-pointer  { font-size: 28px; transform: rotate(180deg); }
.ruleta-result   { min-height: 64px; display: flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   MAPA DE CALOR — POMODOROS
   ═══════════════════════════════════════════════════════════ */
.pom-hm-wrap     { overflow-x: auto; }
.pom-hm-row      { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.pom-hm-head     { margin-bottom: 4px; }
.pom-hm-day-lbl  { font-size: 10px; color: var(--text2); width: 32px; flex-shrink: 0; }
.pom-hm-h-lbl    { font-size: 9px; color: var(--text3); flex: 1; }
.pom-hm-cell     {
  flex: 1; height: 10px; border-radius: 2px;
  background: var(--bg4);
  transition: background .2s;
}
.pom-hm-cell[data-pct="0"]   { background: var(--bg4); }
.pom-hm-cell[data-pct^="1"],
.pom-hm-cell[data-pct^="2"],
.pom-hm-cell[data-pct^="3"]  { background: rgba(137,180,250,.25); }
.pom-hm-cell[data-pct^="4"],
.pom-hm-cell[data-pct^="5"],
.pom-hm-cell[data-pct^="6"]  { background: rgba(137,180,250,.55); }
.pom-hm-cell[data-pct^="7"],
.pom-hm-cell[data-pct^="8"],
.pom-hm-cell[data-pct^="9"],
.pom-hm-cell[data-pct="100"] { background: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   REVISIÓN EXPRÉS MATUTINA
   ═══════════════════════════════════════════════════════════ */
.mr-energy-row  { display: flex; gap: 8px; margin: 8px 0; }
.mr-energy-btn  {
  flex: 1; padding: 10px 0; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text2); cursor: pointer;
  font-size: 18px; transition: all .2s; font-family: inherit;
}
.mr-energy-btn.active { border-color: var(--accent); background: rgba(137,180,250,.15); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   MODO PESADILLA TOGGLE
   ═══════════════════════════════════════════════════════════ */
.nightmare-active {
  color: #f87171 !important;
  background: rgba(248,113,113,.12) !important;
  border-color: rgba(248,113,113,.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   CREACIÓN ULTRARRÁPIDA
   ═══════════════════════════════════════════════════════════ */
.quick-create-hint {
  font-size: 10px; color: var(--text3); margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.quick-create-hint code {
  background: var(--bg4); padding: 2px 6px; border-radius: 4px;
  font-family: monospace; font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════
   DUOLINGO WIDGET
   ═══════════════════════════════════════════════════════════ */
.duo-widget     { display: flex; flex-direction: column; gap: 10px; }
.duo-header     { display: flex; align-items: center; gap: 8px; }
.duo-logo       { font-size: 22px; }
.duo-title      { font-family: var(--font-head); font-size: 14px; color: var(--text); }
.duo-synced-badge { margin-left: auto; font-size: 10px; color: var(--green); }
.duo-field-row  { display: flex; gap: 8px; }
.duo-input      { flex: 1; }
.duo-stats      { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.duo-stat       { display: flex; flex-direction: column; align-items: center; gap: 2px;
                  background: var(--bg3); border-radius: 8px; padding: 8px; }
.duo-stat-val   { font-family: var(--font-head); font-size: 18px; color: var(--gold); }
.duo-stat-lbl   { font-size: 10px; color: var(--text2); text-align: center; }

/* ═══════════════════════════════════════════════════════════
   QUICK CREATE MODAL (Ctrl+N)
   ═══════════════════════════════════════════════════════════ */
.quick-create-modal .modal { max-width: 480px; }
.quick-create-input-big {
  font-size: 16px; padding: 14px 16px;
  border: 2px solid var(--accent); border-radius: 12px;
  background: var(--bg3); color: var(--text); width: 100%;
  font-family: inherit; outline: none; transition: border-color .2s;
}

/* ============================================================
   LOGIN PREMIUM REDESIGN
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #04070f;
  overflow: hidden;
}
.login-bg {
  position: absolute; inset: 0; z-index: 0;
}
.login-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: loginOrbFloat 10s ease-in-out infinite alternate;
}
.lob-1 { width: 500px; height: 500px; left: -150px; top: -100px; background: rgba(137,180,250,.08); animation-delay: 0s; }
.lob-2 { width: 400px; height: 400px; right: -120px; bottom: -80px; background: rgba(168,85,247,.07); animation-delay: -3s; }
.lob-3 { width: 300px; height: 300px; left: 40%; top: 30%; background: rgba(94,234,212,.05); animation-delay: -6s; }
@keyframes loginOrbFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px,20px) scale(1.15); } }

.login-runes {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.lrune {
  position: absolute; font-size: 24px; opacity: 0;
  animation: loginRuneFloat 8s ease-in-out infinite;
  filter: grayscale(.3);
}
.lr1 { left:8%;  top:15%; animation-delay:0s;    animation-duration:9s;  }
.lr2 { left:88%; top:25%; animation-delay:-2s;   animation-duration:11s; }
.lr3 { left:15%; top:70%; animation-delay:-4s;   animation-duration:10s; }
.lr4 { left:80%; top:65%; animation-delay:-1s;   animation-duration:8s;  }
.lr5 { left:50%; top:10%; animation-delay:-5s;   animation-duration:12s; }
.lr6 { left:40%; top:85%; animation-delay:-3.5s; animation-duration:9.5s;}
@keyframes loginRuneFloat {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20%,80% { opacity: .18; }
  50% { transform: translateY(-25px) rotate(15deg); opacity: .22; }
}

.login-card {
  position: relative; z-index: 1;
  background: rgba(8,12,26,.92);
  border-radius: 28px;
  padding: 48px 40px 36px;
  width: min(440px, calc(100vw - 32px));
  box-shadow:
    0 0 0 1px rgba(137,180,250,.12),
    0 0 80px rgba(137,180,250,.06),
    0 0 160px rgba(168,85,247,.04),
    0 30px 80px rgba(0,0,0,.85);
  text-align: center;
  overflow: hidden;
  backdrop-filter: blur(32px);
  animation: loginCardIn .5s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg,
    rgba(137,180,250,.06) 0%,
    transparent 40%,
    rgba(168,85,247,.04) 100%);
}

.login-emblem {
  position: relative;
  width: 88px; height: 88px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(137,180,250,.15), rgba(168,85,247,.15));
  border: 1.5px solid rgba(137,180,250,.25);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.login-emblem-glow {
  position: absolute; inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(137,180,250,.15) 0%, transparent 70%);
  animation: loginEmblemPulse 3s ease-in-out infinite;
}
@keyframes loginEmblemPulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.15); opacity: 1; }
}
.login-logo-img  { width: 52px; height: 52px; object-fit: contain; position: relative; z-index: 1; }
.login-logo-emoji { font-size: 36px; line-height: 1; position: relative; z-index: 1; }

.login-title {
  font-family: var(--font-head); font-size: 32px; font-weight: 700;
  color: var(--text); letter-spacing: .14em; margin: 0 0 6px;
  background: linear-gradient(135deg, #e2e8f0 0%, var(--accent) 50%, #c4b5fd 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-subtitle {
  font-size: 11px; color: var(--text2); letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 28px;
}
.login-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; color: var(--text3); font-size: 11px; letter-spacing: .06em;
}
.login-sep::before, .login-sep::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(137,180,250,.15), transparent);
}
.login-field {
  display: flex; align-items: center;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(137,180,250,.12);
  border-radius: 12px; margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-field:focus-within {
  border-color: rgba(137,180,250,.4);
  background: rgba(137,180,250,.05);
  box-shadow: 0 0 0 3px rgba(137,180,250,.08), 0 2px 12px rgba(137,180,250,.1);
}
.login-field-icon { padding: 0 14px; font-size: 16px; flex-shrink: 0; opacity: .45; }
.login-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 14px; padding: 15px 0; font-family: inherit;
}
.login-input::placeholder { color: var(--text2); opacity: .5; }
.login-toggle-pw {
  background: transparent; border: none; cursor: pointer;
  padding: 0 14px; font-size: 15px; opacity: .45; transition: opacity .2s;
}
.login-toggle-pw:hover { opacity: 1; }
.login-error { font-size: 12px; color: #f38ba8; min-height: 18px; margin: -4px 0 10px; text-align: left; }
.login-btn {
  position: relative; overflow: hidden;
  width: 100%; padding: 15px;
  font-size: 15px; font-weight: 600; letter-spacing: .05em;
  background: linear-gradient(135deg, #5b9cf6 0%, #7c3aed 100%);
  border: none; border-radius: 12px; color: #fff; cursor: pointer;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(91,156,246,.3), 0 1px 0 rgba(255,255,255,.1) inset;
  font-family: inherit; margin-top: 4px;
}
.login-btn:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(91,156,246,.45);
  transform: translateY(-1px);
}
.login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-btn:disabled { opacity: .55; cursor: not-allowed; }
.login-btn-shine {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  animation: loginBtnShine 4s ease-in-out infinite;
}
@keyframes loginBtnShine {
  0%,100% { left: -100%; }
  60% { left: 150%; }
}
.login-footer {
  margin-top: 20px; font-size: 11px; color: var(--text3);
  letter-spacing: .04em;
}
.login-recovery { display:block; margin:12px auto 0; border:0; background:transparent; color:var(--text2); font:500 12px var(--font-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.login-recovery:hover { color:var(--gold); }
.login-recovery-panel { display:grid; gap:10px; margin-top:14px; text-align:left; }
.login-recovery-panel p { margin:0; color:var(--text2); font-size:12px; line-height:1.45; }
.login-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}

/* ============================================================
   MOBILE HERO BUTTON (header, <=600px only)
   ============================================================ */
.mobile-hero-btn {
  display: none;
  align-items: center; gap: 10px;
  background: rgba(137,180,250,.06);
  border: 1px solid rgba(137,180,250,.14);
  border-radius: 12px;
  padding: 6px 10px 6px 6px;
  cursor: pointer; color: var(--text);
  transition: background .2s, border-color .2s;
  text-align: left; min-width: 0;
}
.mobile-hero-btn:active { background: rgba(137,180,250,.12); }
.mhb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(137,180,250,.15), rgba(168,85,247,.15));
  border: 1.5px solid rgba(137,180,250,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.mhb-info { min-width: 0; flex: 1; }
.mhb-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhb-bars { margin-top: 3px; }
.mhb-hp-wrap { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; width: 80px; }
.mhb-hp-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #22d3ee); border-radius: 2px; transition: width .5s; }
.mhb-level {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: rgba(137,180,250,.1); border-radius: 6px;
  padding: 2px 6px; flex-shrink: 0; font-family: var(--font-head);
}
@media (max-width: 600px) {
  .header-logo-img, .guild-name { display: none !important; }
  .mobile-hero-btn { display: flex !important; }
  .header-brand { flex: 1 !important; min-width: 0; }
}

/* ============================================================
   DAILY GOAL BAR
   ============================================================ */
.daily-goal-bar {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(137,180,250,.1);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 8px 0;
}
.dgb-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text2); margin-bottom: 5px;
}
.dgb-track {
  height: 5px; background: rgba(255,255,255,.07);
  border-radius: 3px; overflow: hidden;
}
.dgb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #c4b5fd);
  border-radius: 3px;
  transition: width .6s cubic-bezier(.22,.68,0,1.2);
}

/* ============================================================
   LOOT DROP ANIMATION
   ============================================================ */
.loot-drop {
  position: absolute;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: lootFloat 2.2s cubic-bezier(.22,.68,0,1) forwards;
  z-index: 9001;
}
.loot-drop-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(255,200,60,.6));
}
.loot-drop-label {
  font-size: 11px; font-weight: 700;
  color: #fbbf24;
  background: rgba(0,0,0,.6);
  border-radius: 6px; padding: 1px 6px;
  white-space: nowrap;
}
.loot-drop-xp {
  font-size: 18px; font-weight: 800;
  font-family: var(--font-head);
  color: #a5f3fc;
  text-shadow: 0 0 12px rgba(165,243,252,.5);
}
@keyframes lootFloat {
  0%   { opacity:0; transform: translateY(0) scale(.7); }
  15%  { opacity:1; transform: translateY(-10px) scale(1.1); }
  70%  { opacity:1; transform: translateY(-60px) scale(1); }
  100% { opacity:0; transform: translateY(-90px) scale(.9); }
}
.quick-create-input-big:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(137,180,250,.15); }


/* ================================================================
   v40 — Challenges, Focus improvements, Habits pom btn, Smithy
   ================================================================ */

/* ── Challenges ───────────────────────────────────────────────── */
.ch-section-title {
  font-size: 12px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 10px; padding: 0 2px;
}
.ch-card {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px;
  transition: var(--transition);
}
.ch-card.ch-done { border-color: var(--green); background: rgba(166,227,161,.06); }
.ch-card.ch-available { opacity: .85; }
.ch-header { display: flex; align-items: flex-start; gap: 12px; }
.ch-icon { display:grid; place-items:center; width:32px; height:32px; font-size:24px; line-height:1; flex-shrink:0; }
.ch-icon img { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; }
.bb-pet-chip-art { width:22px; height:22px; object-fit:contain; image-rendering:pixelated; vertical-align:middle; }
.bb-prep-panel,.bb-prep-active { margin:8px 0; padding:8px; border:1px solid rgba(216,180,254,.28); border-radius:9px; background:rgba(55,27,85,.14); color:#d9cbe7; font-size:10px; }.bb-prep-panel>span { display:block; margin-bottom:6px; color:#c084fc; font:700 9px var(--font-head); text-transform:uppercase; }.bb-prep-panel>div { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.bb-prep-panel button { padding:6px; border:1px solid rgba(216,180,254,.2); border-radius:6px; background:rgba(8,6,18,.18); color:#eee5f6; cursor:pointer; text-align:left; }.bb-prep-panel button:hover { border-color:#c084fc; background:rgba(124,58,237,.18); }.bb-prep-panel b,.bb-prep-panel small,.bb-prep-active b,.bb-prep-active span { display:block; }.bb-prep-panel b,.bb-prep-active b { font-size:9px; }.bb-prep-panel small,.bb-prep-active span { margin-top:2px; color:var(--text3); font-size:8px; }.bb-prep-active { border-color:rgba(110,231,183,.42); }.bb-prep-active b { color:#a7f3d0; }
.ch-info { flex: 1; min-width: 0; }
.ch-name { font-weight: 600; font-size: 14px; color: var(--text); }
.ch-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }
.ch-days { font-size: 11px; color: var(--text3); white-space: nowrap; }
.ch-reward-badge {
  font-size: 11px; color: var(--gold); font-weight: 600;
  background: rgba(249,226,175,.12); border-radius: 6px; padding: 2px 8px;
  white-space: nowrap;
}
.ch-progress-bar {
  height: 6px; background: var(--bg4); border-radius: 3px;
  margin: 10px 0 6px; overflow: hidden;
}
.ch-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 3px; transition: width .4s ease;
}
.ch-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-progress-text { font-size: 11px; color: var(--text2); flex: 1; }
.ch-reward { font-size: 11px; color: var(--gold); }
.ch-claim-btn { padding: 4px 12px !important; font-size: 12px !important; }
.ch-abandon-btn { padding: 4px 8px !important; font-size: 12px !important; color: var(--text3) !important; }
.ch-claimed { font-size: 11px; color: var(--green); }
.ch-start-btn { width: 100%; margin-top: 10px; padding: 8px !important; font-size: 13px !important; }

/* ── Focus overlay extras ─────────────────────────────────────── */
.focus-stats-row {
  display: flex; gap: 20px; justify-content: center;
  margin-top: 8px;
}
.focus-hp-mini {
  width: 180px; height: 4px; background: rgba(255,255,255,.15);
  border-radius: 2px; margin: 6px auto 0; overflow: hidden;
}
.focus-hp-fill {
  height: 100%; border-radius: 2px; transition: width .4s ease;
}

/* ── Habit pom button ─────────────────────────────────────────── */
.habit-pom-btn {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 4px 8px; cursor: pointer;
  font-size: 14px; color: var(--text2); transition: var(--transition);
  line-height: 1;
}
.habit-pom-btn:hover { background: var(--bg4); color: var(--text); }
.habit-reminder-badge {
  font-size: 10px; color: var(--accent); background: rgba(137,180,250,.12);
  border-radius: 4px; padding: 1px 6px; margin-left: 4px;
}
.habit-reminder-btn {
  border: none; cursor: pointer; transition: background .15s;
}
.habit-reminder-btn:hover { background: rgba(137,180,250,.22); }
.habit-reminder-unset { color: var(--text3); background: rgba(137,180,250,.06); }

/* ── Smithy forging queue ─────────────────────────────────────── */
.smithy-forging-queue {
  background: rgba(249,226,175,.06); border: 1px solid rgba(249,226,175,.2);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px;
}
.smithy-forging-title {
  font-size: 12px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.smithy-forging-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 4px 0;
}
.smithy-forging-name { font-weight: 600; }
.smithy-forging-timer { font-size: 11px; color: var(--gold); }

/* ── Habit reminder group in edit modal ──────────────────────── */
#habitReminderGroup { animation: fadeIn .2s ease; }

/* ── Mana bar ─────────────────────────────────────────────────── */
.mana-bar { background: var(--bg4); border-radius: 4px; height: 6px; overflow: hidden; }
.mana-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width .4s ease;
}

/* ── Mobile header chips (streak + XP today) ─────────────────── */
.mhb-chips { display: flex; gap: 4px; margin-top: 2px; }
.mhb-chip {
  font-size: 10px; color: var(--text2);
  background: rgba(255,255,255,.07); border-radius: 4px;
  padding: 1px 5px; line-height: 1.4;
}

/* ── Deadline urgent badge ────────────────────────────────────── */
.quest-type-badge.urgent {
  background: rgba(239,68,68,.18) !important;
  color: #f87171 !important;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ── Achievement date ─────────────────────────────────────────── */
.achievement-date { font-size: 10px; color: var(--green); margin-top: 4px; }

/* ── Diary tab bar ────────────────────────────────────────────── */
.diary-tab-bar {
  display: flex; gap: 4px; padding: 0 16px 12px;
  border-bottom: 1px solid var(--border);
}
.diary-tab-btn {
  flex: 1; padding: 7px; border: none; border-radius: var(--radius-sm);
  background: var(--bg4); color: var(--text2); font-size: 12px;
  cursor: pointer; transition: background .2s, color .2s;
}
.diary-tab-btn.active { background: var(--accent); color: #fff; }

/* ── Diary stats grid ─────────────────────────────────────────── */
.diary-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.diary-stat-card {
  background: var(--bg4); border-radius: var(--radius-sm);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
}
.diary-stat-num { font-size: 22px; font-weight: 800; color: var(--accent); }
.diary-stat-lbl { font-size: 11px; color: var(--text3); }

/* ── Diary calendar heatmap ───────────────────────────────────── */
.diary-cal {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 3px; margin-bottom: 14px;
}
.diary-cal-cell {
  aspect-ratio: 1; border-radius: 2px; background: var(--bg4);
  transition: background .2s;
}
.diary-cal-cell[data-level="1"] { background: rgba(168,85,247,.25); }
.diary-cal-cell[data-level="2"] { background: rgba(168,85,247,.50); }
.diary-cal-cell[data-level="3"] { background: rgba(168,85,247,.75); }
.diary-cal-cell[data-level="4"] { background: var(--accent); }

/* ── Diary XP bar chart ───────────────────────────────────────── */
.diary-xp-chart {
  display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-bottom: 6px;
}
.diary-xp-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.diary-xp-bar {
  width: 100%; background: var(--accent); border-radius: 2px 2px 0 0;
  min-height: 2px; transition: height .3s;
}
.diary-xp-day-lbl { font-size: 8px; color: var(--text3); }

/* ── Morning review suggestions ──────────────────────────────── */
.mr-suggestions-title {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.mr-suggestions-list { display: flex; flex-direction: column; gap: 6px; }
.mr-suggestion-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--bg4); cursor: pointer; font-size: 13px;
  transition: background .15s;
}
.mr-suggestion-item:hover, .mr-suggestion-item.selected {
  background: rgba(168,85,247,.18);
}
.mr-suggestion-name { flex: 1; }
.mr-suggestion-deadline { font-size: 10px; color: var(--red); font-weight: 700; }

/* ── Mission templates modal ──────────────────────────────────── */
.template-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.template-item:last-child { border-bottom: none; }
.template-icon { font-size: 18px; }
.template-name { flex: 1; font-size: 13px; font-weight: 600; }
.template-actions { display: flex; gap: 6px; }
.btn-small {
  padding: 4px 10px; border-radius: 6px; font-size: 11px;
  border: none; cursor: pointer; font-weight: 600;
}
.btn-small.btn-primary { background: var(--accent); color: #fff; }
.btn-small.btn-danger  { background: rgba(239,68,68,.2); color: #f87171; }

/* ── ZONAS DEL DUNGEON ──────────────────────────────────────────── */
.zones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 4px 16px 24px;
}
@media (max-width: 600px) { .zones-grid { grid-template-columns: 1fr; } }

.zone-card {
  background: rgba(137,180,250,.04);
  border: 1px solid rgba(137,180,250,.12);
  border-radius: 14px;
  padding: 14px;
  transition: border-color .2s, transform .15s;
  border-color: color-mix(in srgb, var(--zc) 25%, transparent);
}
.zone-card:hover {
  border-color: color-mix(in srgb, var(--zc) 50%, transparent);
  transform: translateY(-1px);
}
.zone-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.zone-icon  { font-size: 26px; line-height: 1; flex-shrink: 0; }
.zone-icon-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.zone-name  { font-size: 13px; font-weight: 700; color: var(--text); }
.zone-desc  { font-size: 10px; color: var(--text3); margin-top: 2px; }
.zone-rank-lbl { font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.zone-xp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.zone-bonus-chip {
  font-size: 10px; font-weight: 700;
  background: rgba(250,204,21,.15); color: #facc15;
  border-radius: 20px; padding: 2px 8px;
}
.zone-bar-bg   { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.zone-bar-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.zone-next-msg { font-size: 10px; color: var(--text3); margin-top: 4px; }

/* ── LOGROS OCULTOS ──────────────────────────────────────────────── */
.ach-mystery {
  background: rgba(127,90,240,.06);
  border-color: rgba(127,90,240,.2);
  opacity: .75;
  filter: saturate(0.2);
  transition: all .25s;
}
.ach-mystery:hover {
  opacity: 1;
  filter: saturate(1);
  border-color: rgba(127,90,240,.55);
}
.ach-mystery .achievement-icon { font-size: 18px; }
.ach-mystery .achievement-name { color: var(--text3); letter-spacing: .08em; }
.ach-mystery .achievement-desc { color: var(--text3); font-style: italic; }

.ach-cat-header { display:flex; align-items:center; gap:8px; }
.ach-secret-meter { display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:3px 7px; border:1px solid rgba(167,139,250,.38); border-radius:99px; background:rgba(127,90,240,.13); color:#cdb5f5; font:700 9px var(--font-head); letter-spacing:0; }
.ach-secret-meter b { color:#f0ddff; }.ach-secret-meter i { color:#a995bb; font-size:8px; font-style:normal; font-weight:600; }

/* ── HEATMAP HORARIO 7x24 ────────────────────────────────────────── */
.hourly-heatmap { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.hh-hour-labels,
.hh-row         { display: flex; align-items: center; gap: 3px; }
.hh-day-lbl     { width: 26px; font-size: 9px; color: var(--text3); flex-shrink: 0; text-align: right; }
.hh-hl          { width: 14px; font-size: 8px; color: var(--text3); text-align: center; flex-shrink: 0; }
.hh-cell2       { width: 14px; height: 14px; border-radius: 3px; background: var(--bg4); flex-shrink: 0; transition: opacity .15s; cursor: default; }
.hh-cell2:hover { opacity: .75; }

/* ============================================================
   MAPA DEL MUNDO INTERACTIVO
   ============================================================ */
.wm-wrap        { display: flex; flex-direction: column; gap: 16px; }
.wm-container   { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
                  background: #0a0814; border: 1px solid rgba(255,255,255,.08); }
.wm-img         { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: crisp-edges; }
.wm-bg-fallback { position: absolute; inset: 0;
                  background: radial-gradient(ellipse at 30% 50%, #1a1040 0%, #0a0814 60%); }
.wm-hotspot     { position: absolute; transform: translate(-50%, -50%); background: none; border: none;
                  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
                  padding: 0; z-index: 2; transition: transform .2s; }
.wm-hotspot:hover, .wm-hs-active { transform: translate(-50%, -50%) scale(1.25); }
.wm-hs-icon     { font-size: 20px; filter: drop-shadow(0 0 6px var(--z-clr)); display:flex; align-items:center; justify-content:center; }
.wm-hs-img      { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px var(--z-clr)); }
.wm-hs-label    { font-size: 9px; font-weight: 700; background: rgba(0,0,0,.7); padding: 1px 4px;
                  border-radius: 4px; white-space: nowrap; letter-spacing: .03em; }
.wm-legend      { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.wm-legend-row  { display: flex; align-items: center; gap: 8px; background: var(--card2);
                  border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.wm-legend-icon { font-size: 18px; filter: drop-shadow(0 0 4px var(--z-clr)); display:flex; align-items:center; }
.wm-legend-img  { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 4px var(--z-clr)); }
.wm-legend-name { flex: 1; color: var(--text); font-weight: 500; }
.wm-legend-rank { font-size: 11px; font-weight: 600; }
.wm-legend-xp   { font-size: 10px; color: var(--text3); }
.wm-detail-panel { background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 0; overflow: hidden; }
.wm-detail-inner { --z-clr: #a855f7; padding: 20px; text-align: center; position: relative;
                   background: linear-gradient(135deg, color-mix(in srgb, var(--z-clr) 10%, transparent), transparent); }
.wm-detail-close { position: absolute; top: 10px; right: 12px; background: none; border: none;
                   color: var(--text3); cursor: pointer; font-size: 16px; padding: 4px 8px; }
.wm-detail-icon  { font-size: 36px; filter: drop-shadow(0 0 12px var(--z-clr)); margin-bottom: 6px; display:flex; align-items:center; justify-content:center; }
.wm-detail-img   { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 12px var(--z-clr)); }
.wm-detail-name  { font-size: 18px; font-weight: 700; color: var(--text); font-family: var(--font-head); }
.wm-detail-desc  { font-size: 12px; color: var(--text2); margin: 4px 0 10px; }
.wm-detail-rank  { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.wm-detail-xp    { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
.wm-bar-bg       { height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.wm-bar-fill     { height: 100%; border-radius: 4px; transition: width .4s ease; }
.wm-detail-bonus { font-size: 12px; color: var(--text2); font-weight: 600; }
.wm-ap-btn    { margin-top: 10px; width: 100%; padding: 8px 12px; border-radius: 8px;
                background: rgba(137,180,250,.12); border: 1px solid rgba(137,180,250,.25);
                color: #89b4fa; font-size: 12px; cursor: pointer; transition: background .2s; }
.wm-ap-btn:hover:not(:disabled) { background: rgba(137,180,250,.22); }
.wm-ap-btn:disabled { opacity: .4; cursor: not-allowed; }
.wm-ap-count  { font-size: 10px; color: var(--text3); margin-top: 4px; }
.wm-route-title { margin-top:10px; color:var(--text2); font-size:11px; font-weight:700; }
.wm-route-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:6px; }
.wm-route-grid .wm-ap-btn { margin:0; padding:7px 3px; font-size:10px; line-height:1.25; }
.wm-route-grid .wm-ap-btn small { color:var(--text3); font-size:8px; }
.wm-ap-active { margin-top: 10px; font-size: 12px; color: #4ade80; font-weight: 600;
                background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25);
                border-radius: 8px; padding: 6px 10px; }
.pivot-btn    { background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.3);
                color: #a78bfa; border-radius: 6px; padding: 2px 8px; font-size: 11px;
                cursor: pointer; margin-left: 4px; transition: background .2s; }
.pivot-btn:hover { background: rgba(167,139,250,.25); }

/* ============================================================
   SISTEMA DE ARMADURAS v68
   ============================================================ */
.char-armor-grid { grid-template-columns: repeat(5, 1fr) !important; }
.char-slot-stat  { font-size: 10px; color: var(--accent); font-weight: 600; }
.smithy-section-title { font-size: 13px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .06em; padding: 6px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 10px; }

/* ============================================================
   CLASES SECRETAS v68
   ============================================================ */
.secret-classes-grid { display: flex; flex-direction: column; gap: 10px; }
.secret-class-card   { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius);
  background: var(--card2); border: 1px solid rgba(255,255,255,.07); align-items: flex-start; }
.secret-class-card.secret-unlocked { border-color: rgba(167,139,250,.4);
  background: linear-gradient(135deg, rgba(167,139,250,.08), var(--card2)); }
.secret-class-portrait { width: 60px; height: 60px; flex-shrink: 0; border-radius: 10px;
  overflow: hidden; background: var(--bg4); display: flex; align-items: center; justify-content: center; }
.secret-portrait-img    { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.secret-portrait-emoji  { font-size: 28px; }
.secret-portrait-mystery{ font-size: 32px; font-weight: 900; color: var(--text3);
  font-family: var(--font-head); }
.secret-class-info   { flex: 1; min-width: 0; }
.secret-class-name   { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.secret-class-bonus  { font-size: 12px; color: #a78bfa; margin-bottom: 2px; }
.secret-class-cond   { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.secret-class-prog-bar { height: 5px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.secret-class-prog-fill{ height: 100%; background: linear-gradient(90deg,#7c3aed,#a78bfa);
  border-radius: 3px; transition: width .4s ease; }
.secret-class-prog-txt { font-size: 11px; color: var(--text3); }


/* ================================================================
   SALA PERSONAL
   ================================================================ */
#ctab-sala-personal { padding: 0; overflow: hidden; min-height: calc(100dvh - 178px); }
.sala-layout {
  display: flex;
  flex-direction: row;
  height: calc(100dvh - 178px);
  min-height: 620px;
  background: #080812;
  border: 1px solid rgba(167,139,250,.16);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

/* ── Cuarto CSS puro — sin imagen de fondo ── */
.sala-room {
  flex: 1;
  position: relative;
  cursor: crosshair;
  overflow: hidden;
  isolation: isolate;
  /* Fondo ilustrado + gradientes de iluminación encima */
  background:
    radial-gradient(ellipse 75% 40% at 50% 0%,  rgba(110,65,220,.18) 0%, transparent 65%),
    radial-gradient(ellipse 110% 50% at 50% 100%, rgba(70,35,8,.35)   0%, transparent 60%),
    url('../images/fondo_sala_santuario.webp') center / cover no-repeat,
    linear-gradient(to bottom,
      #0d0720 0%,
      #130b2a 38%,
      #110920 54%,
      #0f0910 55.5%,
      #0d0808 100%
    );
}
/* Tablones del suelo */
.sala-room::before {
  content: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 37px,
      rgba(0,0,0,.18) 37px, rgba(0,0,0,.18) 39px
    ),
    linear-gradient(to bottom, rgba(45,22,6,.2) 0%, rgba(30,12,3,.55) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Zócalo pared/suelo */
.sala-room::after {
  content: none;
  position: absolute;
  left: 0; right: 0;
  top: 54%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(90,55,18,.5) 10%,
    rgba(140,85,28,.65) 50%,
    rgba(90,55,18,.5) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

.sala-room-header {
  position: absolute; top: 16px; left: 18px; right: 18px; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
.sala-room-header > div {
  padding: 8px 12px; border: 1px solid rgba(216,180,254,.28); border-radius: 9px;
  background: linear-gradient(135deg,rgba(12,8,28,.88),rgba(35,15,62,.68));
  box-shadow: 0 8px 22px rgba(0,0,0,.25); backdrop-filter: blur(8px);
}
.sala-room-kicker { display: block; color: #c4b5fd; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.sala-room-header strong { display:block; margin-top:2px; color:#fff; font-family:var(--font-head); font-size:16px; }
.sala-room-count { color:#d8b4fe; font-size:10px; font-weight:700; padding:6px 9px; border-radius:999px; background:rgba(9,7,21,.72); border:1px solid rgba(255,255,255,.1); }
.sala-placement-grid {
  position: absolute; left: 6%; right: 6%; top: 30%; bottom: 7%; z-index: 2;
  opacity: .24; pointer-events:none;
  background-image: linear-gradient(rgba(196,181,253,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(196,181,253,.25) 1px, transparent 1px);
  background-size: 42px 32px; transform: perspective(380px) rotateX(52deg); transform-origin: bottom;
  mask-image: linear-gradient(to bottom, transparent, #000 32%, #000);
}

/* ── Items colocados ── */
.sala-item {
  position: absolute;
  width: var(--item-size, 90px);
  height: var(--item-size, 90px);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--s, 1));
  cursor: grab;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.75));
  transition: filter .12s;
  user-select: none;
  will-change: transform;
}
.sala-item:hover {
  filter: drop-shadow(0 0 14px rgba(99,102,241,.65)) drop-shadow(0 4px 10px rgba(0,0,0,.7));
}
.sala-item.sala-item-selected {
  filter: drop-shadow(0 0 18px rgba(165,130,255,.9)) drop-shadow(0 0 6px rgba(255,255,255,.25));
}
.sala-item.sala-item-selected::after {
  content:''; position:absolute; inset:10px; border:1px solid #d8b4fe; border-radius:5px;
  box-shadow:0 0 0 2px rgba(139,92,246,.24),0 0 18px rgba(139,92,246,.8); pointer-events:none;
}
.sala-resize-handle {
  position:absolute; right:-6px; bottom:-6px; z-index:4; width:17px; height:17px;
  padding:0; border:2px solid #f3e8ff; border-radius:4px; background:#7c3aed;
  box-shadow:0 0 0 2px rgba(10,6,24,.78),0 0 12px rgba(167,139,250,.95);
  cursor:nwse-resize; touch-action:none;
}
.sala-resize-handle::before { content:''; display:block; width:5px; height:5px; margin:3px; border-right:1px solid #fff; border-bottom:1px solid #fff; }
.sala-item.sala-item-focus { animation: salaItemFocus .55s ease-out; }
.sala-item.sala-dragging { cursor: grabbing; opacity: .82; z-index: 200 !important; transition: none; }
.sala-item img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }

/* Sombra elipse bajo cada mueble */
.sala-shadow {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 68px; height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,.55) 0%, transparent 70%);
  pointer-events: none;
}

.sala-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: rgba(255,255,255,.7); pointer-events: none;
  background: rgba(6,5,16,.76); border:1px solid rgba(255,255,255,.1); padding: 6px 14px; border-radius: 20px;
  white-space: nowrap; z-index: 300;
}
.sala-toolbar { position:absolute; z-index:30; bottom:52px; left:50%; transform:translateX(-50%); display:flex; overflow:hidden; border:1px solid rgba(216,180,254,.22); border-radius:12px; background:rgba(8,7,19,.88); box-shadow:0 12px 24px rgba(0,0,0,.35); backdrop-filter:blur(10px); }
.sala-tool-btn { min-width:76px; padding:9px 12px; color:#ded6f7; background:transparent; border:0; border-right:1px solid rgba(255,255,255,.09); cursor:pointer; font-size:18px; transition:.15s; }
.sala-tool-btn:last-child { border-right:0; }
.sala-tool-btn span { display:block; margin-top:3px; font-size:9px; font-weight:700; }
.sala-tool-btn:hover { color:#fff; background:rgba(139,92,246,.2); }
.sala-tool-save { color:#e9d5ff; }

/* ── Panel lateral ── */
.sala-picker {
  width: 266px;
  flex-shrink: 0;
  background: rgba(6,4,18,.97);
  border-left: 1px solid rgba(255,255,255,.07);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.sala-picker-top { display:flex; justify-content:space-between; align-items:center; }
.sala-picker-kicker { font-size:10px; font-weight:800; color:#c4b5fd; letter-spacing:.12em; }
.sala-close-btn { width:25px; height:25px; border:1px solid rgba(255,255,255,.12); border-radius:7px; background:rgba(255,255,255,.03); color:#fca5a5; font-size:19px; line-height:1; cursor:pointer; }
.sala-close-btn:hover { background:rgba(248,113,113,.12); }
.sala-category-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.sala-category { padding:5px 9px; border:1px solid rgba(255,255,255,.11); border-radius:7px; color:var(--text3); background:rgba(255,255,255,.025); font-size:10px; cursor:pointer; transition:.15s; }
.sala-category:hover,.sala-category-active { color:#f3e8ff; border-color:#8b5cf6; background:rgba(139,92,246,.22); box-shadow:0 0 12px rgba(124,58,237,.15); }
.sala-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sala-picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; padding: 8px 4px; cursor: pointer; font:inherit;
  transition: all .15s;
}
.sala-picker-item:hover { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); }
.sala-picker-item.sala-selected { border-color: var(--accent); background: rgba(99,102,241,.18); box-shadow: 0 0 0 1px var(--accent); }
.sala-picker-item img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.sala-picker-label { font-size: 9px; color: var(--text2); text-align: center; line-height: 1.2; }
.sala-picker-item.sala-locked { border-color:rgba(212,175,55,.34); background:rgba(45,31,12,.18); }
.sala-picker-item.sala-locked:hover { border-color:#d4af37; background:rgba(212,175,55,.13); transform:translateY(-1px); }
.sala-price,.sala-owned-mark { display:block; font-size:8px; font-weight:800; letter-spacing:.02em; }
.sala-price { color:#f5c95c; }.sala-owned-mark { color:#7ee7a2; }
.weekly-blueprint { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:10px; align-items:center; margin:10px 0; padding:9px; border:1px solid rgba(245,201,92,.38); border-radius:10px; background:linear-gradient(135deg,rgba(93,57,12,.16),rgba(36,15,55,.15)); }.weekly-blueprint img { width:54px; height:54px; object-fit:contain; image-rendering:pixelated; }.weekly-blueprint span,.weekly-blueprint b,.weekly-blueprint small { display:block; }.weekly-blueprint span { color:#f5c95c; font:700 8px var(--font-head); letter-spacing:.08em; }.weekly-blueprint b { margin:2px 0; color:#f5eddb; font-size:12px; }.weekly-blueprint small { color:var(--text3); font-size:9px; }.weekly-blueprint button,.weekly-blueprint em { padding:7px 9px; border:1px solid rgba(245,201,92,.5); border-radius:7px; background:rgba(212,175,55,.15); color:#f5d56d; font:700 10px var(--font-head); font-style:normal; }.weekly-blueprint button { cursor:pointer; }.weekly-blueprint button:disabled { opacity:.45; cursor:not-allowed; }
.prestige-choice img { width:42px; height:42px; object-fit:contain; image-rendering:pixelated; }
.pet-specialization { display:flex; align-items:center; gap:7px; width:100%; margin-top:7px; padding:7px 9px; border:1px solid rgba(192,132,252,.35); border-radius:9px; background:rgba(62,31,94,.22); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.pet-specialization:hover { border-color:#c084fc; background:rgba(109,40,217,.18); }.pet-specialization img { width:26px; height:26px; object-fit:contain; image-rendering:pixelated; }.pet-specialization small { display:block; color:var(--text3); font-size:9px; margin-top:2px; }
.sala-empty-category { grid-column:1/-1; padding:12px; color:var(--text3); font-size:11px; text-align:center; }
.sala-help { font-size: 10px; color: var(--text3); text-align: center; line-height: 1.6; margin-top: auto; padding-top: 8px; }

/* ── Panel de propiedades de item seleccionado ── */
.sala-props-panel { display: flex; flex-direction: column; gap: 10px; animation: fadeIn .15s ease; padding:11px; border:1px solid rgba(167,139,250,.26); background:linear-gradient(135deg,rgba(72,31,130,.2),rgba(12,8,26,.6)); border-radius:11px; }
.sala-detail-head { display:flex; align-items:center; gap:9px; }
.sala-props-name {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.sala-props-preview {
  width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated;
  display: block; filter: drop-shadow(0 0 10px rgba(99,102,241,.4));
}
.sala-rarity { display:block; margin-top:3px; color:#d8b4fe; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.sala-props-bonus { margin:0; color:var(--text2); font-size:10px; line-height:1.45; }
.sala-attune-btn { width:100%; padding:8px; border:1px solid rgba(196,139,242,.55); border-radius:7px; background:linear-gradient(135deg,rgba(94,41,137,.4),rgba(31,13,50,.74)); color:#ead6ff; font:700 10px var(--font-head); cursor:pointer; }.sala-attune-btn:hover,.sala-attune-btn.sala-attuned { border-color:#e0b4ff; background:linear-gradient(135deg,rgba(143,66,190,.7),rgba(56,21,87,.88)); box-shadow:0 0 14px rgba(168,85,247,.28); }
.sala-props-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
.sala-size-slider { width: 100%; accent-color: var(--accent); cursor: pointer; }
.sala-props-pct { font-size: 12px; color: var(--text3); text-align: center; font-variant-numeric: tabular-nums; }
.sala-delete-btn { width: 100%; color: #f87171 !important; border-color: rgba(248,113,113,.25) !important; margin-top: 4px; }
.sala-delete-btn:hover { background: rgba(248,113,113,.1) !important; }
.sala-deselect-btn { width: 100%; font-size: 11px; }
.sala-place-card { margin-top:auto; display:grid; grid-template-columns:54px 1fr; gap:9px; padding:11px; border:1px solid rgba(167,139,250,.35); border-radius:11px; background:linear-gradient(145deg,rgba(85,34,145,.28),rgba(12,8,27,.92)); }
.sala-place-card img { width:54px; height:54px; object-fit:contain; image-rendering:pixelated; grid-row:span 2; }
.sala-place-card strong { display:block; color:#fff; font-size:12px; }
.sala-place-card p { margin:5px 0 0; color:var(--text2); font-size:10px; line-height:1.3; }
.sala-place-btn { grid-column:1/-1; margin-top:3px; padding:8px; color:#fff; border:1px solid #a855f7; border-radius:7px; background:linear-gradient(90deg,#6d28d9,#9333ea); font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.sala-place-btn:hover { filter:brightness(1.12); }

@keyframes salaItemFocus { 50% { filter:drop-shadow(0 0 25px #e9d5ff) drop-shadow(0 0 42px #8b5cf6); } }

@media (max-width: 720px) {
  #ctab-sala-personal { min-height:0; }
  .sala-layout { height:auto; min-height:0; flex-direction:column; }
  .sala-room { flex:none; height:440px; min-height:440px; }
  .sala-picker { width:auto; max-height:none; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .sala-picker-grid { grid-template-columns:repeat(5,1fr); }
  .sala-toolbar { bottom:48px; }
  .sala-tool-btn { min-width:68px; }
}

/* ============================================================
   JARDÍN DE MASCOTAS v104
   ============================================================ */

/* Pets tabs */
.pets-tabs         { display: flex; gap: 8px; margin-bottom: 16px; }
.pets-tab-btn      { flex: 1; padding: 7px 12px; border-radius: 10px;
                     background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
                     color: var(--text2); font-size: 13px; cursor: pointer; transition: all .2s; }
.pets-tab-btn:hover { background: rgba(255,255,255,.1); }
.pets-tab-active   { background: rgba(167,139,250,.15); border-color: #a78bfa;
                     color: #a78bfa; font-weight: 600; }

/* Garden container */
.garden-wrap       { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
                     border-radius: 12px; background: #0a0a15; user-select: none; cursor: default; }
.garden-bg-img     { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.garden-tod-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.garden-tod-dawn      { background: rgba(251,146,60,.12); }
.garden-tod-morning   { background: rgba(250,204,21,.04); }
.garden-tod-afternoon { background: transparent; }
.garden-tod-dusk      { background: rgba(249,115,22,.16); }
.garden-tod-evening   { background: rgba(127,90,240,.20); }
.garden-tod-midnight  { background: rgba(10,5,30,.50); }

/* Pets layer */
.garden-pets-layer { position: absolute; inset: 0; z-index: 3; }
.garden-pet        { position: absolute; cursor: pointer; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
                     transition: transform .2s ease; z-index: 4; }
.garden-pet:hover  { transform: scale(1.12) !important; z-index: 10; }
.garden-pet-img    { width: 100%; height: 100%; object-fit: contain;
                     animation: g-float 3s ease-in-out infinite; }
.garden-pet-mount .garden-pet-img  { animation: g-float-slow 4s ease-in-out infinite; }
.garden-pet-egg .garden-pet-img    { animation: none; }
.garden-egg-near-hatch .garden-pet-img { animation: g-wobble .6s ease-in-out infinite; }
.garden-pet-active .garden-pet-img { filter: brightness(1.2); }
.garden-pet-rey    { z-index: 8; }
.garden-pet-rey .garden-pet-img { animation: g-float-slow 5s ease-in-out infinite;
                                   filter: drop-shadow(0 0 16px rgba(147,51,234,.7)); }

/* Active glow */
.garden-pet-active::before { content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(250,204,21,.35) 0%, transparent 70%);
  animation: g-glow 2s ease-in-out infinite; pointer-events: none; }

/* Crown & mood */
.garden-pet-crown  { position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
                     font-size: 14px; animation: g-float 2s ease-in-out infinite; }
.garden-pet-mood   { position: absolute; bottom: -14px; right: -2px; font-size: 13px; line-height: 1; }

/* Controls */
.garden-controls   { position: absolute; top: 8px; right: 8px; z-index: 20; }
.garden-hud { position:absolute; top:10px; left:10px; z-index:20; display:flex; gap:7px; align-items:center; color:#fff; font-size:10px; text-shadow:0 1px 3px #000; }
.garden-harmony { min-width:134px; padding:7px 9px; border:1px solid rgba(216,180,254,.52); border-radius:9px; background:rgba(20,9,38,.78); backdrop-filter:blur(5px); }
.garden-harmony span { color:#e9d5ff; font-weight:700; }.garden-harmony b { float:right; color:#fef08a; }.garden-harmony i { display:block; height:4px; overflow:hidden; margin-top:5px; border-radius:8px; background:rgba(0,0,0,.45); }.garden-harmony em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a855f7,#f0abfc,#facc15); box-shadow:0 0 9px #d8b4fe; }
.garden-essence { padding:7px 9px; border:1px solid rgba(196,132,252,.42); border-radius:9px; background:rgba(20,9,38,.78); font-weight:700; }
.garden-command-deck { display:grid; grid-template-columns:1.1fr 1.1fr 1.5fr; gap:8px; margin-top:9px; }
.garden-command-card { min-width:0; padding:10px; border:1px solid rgba(168,85,247,.3); border-radius:11px; background:linear-gradient(135deg,rgba(27,12,48,.92),rgba(13,16,36,.92)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.garden-command-title { margin-bottom:5px; color:#d8b4fe; font:700 10px var(--font-head); letter-spacing:.5px; text-transform:uppercase; }.garden-command-card b { display:block; color:var(--text); font-size:11px; }.garden-command-card p { margin:3px 0 8px; color:var(--text3); font-size:10px; line-height:1.35; }
.garden-mini-btn { width:100%; border:1px solid rgba(196,132,252,.5); border-radius:7px; padding:6px 8px; color:#f5f3ff; background:rgba(109,40,217,.36); font-size:10px; font-weight:700; cursor:pointer; }.garden-mini-btn:hover:not(:disabled) { background:rgba(126,34,206,.65); }.garden-mini-btn:disabled { opacity:.45; cursor:default; }
.garden-upgrades-list { display:grid; gap:4px; }.garden-upgrade { display:flex; width:100%; gap:7px; align-items:center; padding:5px; text-align:left; color:var(--text2); border:1px solid rgba(255,255,255,.08); border-radius:7px; background:rgba(255,255,255,.035); cursor:pointer; }.garden-upgrade:hover:not(:disabled) { border-color:rgba(196,132,252,.6); background:rgba(126,34,206,.14); }.garden-upgrade:disabled { opacity:.52; cursor:default; }.garden-upgrade > span:first-child { font-size:16px; }.garden-upgrade b,.garden-upgrade small { display:block; }.garden-upgrade small { margin-top:1px; color:var(--text3); font-size:8px; line-height:1.2; }
.garden-portal-card { border-color:rgba(167,139,250,.55); background:linear-gradient(135deg,rgba(37,16,70,.96),rgba(15,19,55,.94)); }

/* Revisión de dirección visual: constelación, altar y códice. */
.skt3-shell { max-width:1180px; margin:0 auto; padding:20px; overflow:hidden; border:1px solid rgba(168,85,247,.33); border-radius:18px; background:radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--skt3) 20%,transparent),transparent 42%),linear-gradient(180deg,#111026,#080d1b); }.skt3-header { display:flex; justify-content:space-between; gap:20px; padding:4px 4px 16px; border-bottom:1px solid rgba(216,180,254,.18); }.skt3-header span,.skt3-race span { color:var(--skt3); font:700 10px var(--font-head); letter-spacing:.15em; text-transform:uppercase; }.skt3-header h3 { margin:5px 0; color:#f5f3ff; font:700 24px var(--font-head); }.skt3-header p,.skt3-race p { margin:0; color:var(--text3); font-size:11px; }.skt3-points { align-self:center; display:grid; gap:3px; padding:9px 12px; border:1px solid rgba(250,204,21,.45); border-radius:12px; color:#fde68a; background:rgba(120,53,15,.15); text-align:center; }.skt3-points small { color:var(--text3); font-size:8px; }.skt3-board { position:relative; min-height:535px; margin:16px 0 12px; background:radial-gradient(circle at center,rgba(124,58,237,.12),transparent 48%),linear-gradient(rgba(196,132,252,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(196,132,252,.045) 1px,transparent 1px); background-size:auto,26px 26px,26px 26px; border:1px solid rgba(168,85,247,.15); border-radius:15px; }.skt3-lines { position:absolute; inset:35px 7% 42px; width:86%; height:420px; }.skt3-lines path { fill:none; stroke:color-mix(in srgb,var(--skt3) 58%,transparent); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 4px var(--skt3)); }.skt3-tier { position:absolute; left:6%; right:6%; display:flex; justify-content:center; gap:clamp(12px,4vw,65px); z-index:1; }.skt3-apex { top:14px; }.skt3-mid { top:174px; }.skt3-root { bottom:18px; }.skt3-node { width:155px; min-height:116px; padding:8px; display:grid; justify-items:center; align-content:start; gap:3px; border:1px solid rgba(148,163,184,.22); border-radius:12px; color:var(--text2); background:rgba(7,10,24,.82); text-align:center; }.skt3-node:disabled { cursor:default; }.skt3-orb { display:grid; place-items:center; width:43px; height:43px; border:2px solid rgba(148,163,184,.24); border-radius:50%; background:#11142b; font-size:20px; }.skt3-node b { font:700 10px var(--font-head); }.skt3-node small,.skt3-node em { color:var(--text3); font-size:8px; line-height:1.25; font-style:normal; }.skt3-node.is-ready { cursor:pointer; border-color:color-mix(in srgb,var(--skt3) 75%,transparent); background:color-mix(in srgb,var(--skt3) 12%,#090b1b); box-shadow:0 0 18px color-mix(in srgb,var(--skt3) 24%,transparent); }.skt3-node.is-ready:hover { transform:translateY(-3px) scale(1.03); }.skt3-node.is-ready .skt3-orb { border-color:var(--skt3); box-shadow:0 0 13px var(--skt3); }.skt3-node.is-learned { border-color:rgba(250,204,21,.7); background:linear-gradient(145deg,rgba(91,55,12,.38),rgba(18,16,27,.88)); color:#fde68a; }.skt3-node.is-learned .skt3-orb { border-color:#fde68a; box-shadow:0 0 16px rgba(250,204,21,.55); }.skt3-race { display:flex; align-items:center; gap:18px; padding:12px; border:1px solid rgba(94,234,212,.23); border-radius:13px; background:rgba(8,35,42,.33); }.skt3-race > div:first-child { width:180px; }.skt3-race-nodes { display:flex; flex:1; gap:9px; }.skt3-race .skt3-node { width:170px; min-height:80px; grid-template-columns:43px 1fr; justify-items:start; text-align:left; }.skt3-race .skt3-node .skt3-state { display:none; }.skt3-key { display:flex; justify-content:center; gap:18px; color:var(--text3); font-size:9px; }
.bstd-shell { max-width:1160px; margin:0 auto; overflow:hidden; border:1px solid rgba(168,85,247,.24); border-radius:18px; background:#11111e; box-shadow:0 14px 42px rgba(0,0,0,.28); }.bstd-header { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; background:linear-gradient(100deg,#241343,#111829); border-bottom:1px solid rgba(216,180,254,.18); }.bstd-header span { color:#d8b4fe; font:700 9px var(--font-head); letter-spacing:.16em; }.bstd-header h3 { margin:4px 0 0; color:#fff; font:700 22px var(--font-head); }.bstd-progress { display:grid; grid-template-columns:auto 150px; gap:5px 9px; align-items:center; color:#f5e6ad; }.bstd-progress b { font-size:13px; }.bstd-progress i { height:5px; overflow:hidden; border-radius:8px; background:rgba(0,0,0,.4); }.bstd-progress em { display:block; height:100%; background:linear-gradient(90deg,#a855f7,#facc15); }.bstd-progress small { grid-column:2; color:var(--text3); font-size:8px; }.bstd-layout { display:grid; grid-template-columns:285px minmax(0,1fr); min-height:520px; }.bstd-shelf { display:grid; align-content:start; gap:5px; max-height:590px; padding:10px; overflow-y:auto; background:linear-gradient(180deg,rgba(35,26,55,.72),rgba(12,16,28,.86)); border-right:1px solid rgba(216,180,254,.14); }.bstd-spine { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:7px; min-height:44px; padding:6px; border:1px solid transparent; border-left:3px solid var(--bstd); border-radius:7px; color:var(--text3); background:rgba(255,255,255,.025); text-align:left; }.bstd-spine.is-known { cursor:pointer; color:#e8e5f0; }.bstd-spine.is-known:hover,.bstd-spine.is-current { border-color:color-mix(in srgb,var(--bstd) 60%,transparent); background:color-mix(in srgb,var(--bstd) 14%,transparent); }.bstd-spine > span { font-size:19px; text-align:center; }.bstd-spine b { font-size:10px; }.bstd-spine small { color:var(--bstd); font-size:8px; text-transform:uppercase; }.bstd-detail { display:grid; grid-template-columns:330px minmax(0,1fr); min-height:520px; background:radial-gradient(circle at 15% 15%,rgba(147,51,234,.16),transparent 40%),#171322; }.bstd-art { display:grid; place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--bstd) 20%,#121426),#0b0f1c); }.bstd-art img { width:245px; height:245px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 25px var(--bstd)); }.bstd-art > span { font-size:96px; }.bstd-page { padding:48px 38px; background:linear-gradient(120deg,rgba(246,230,183,.98),rgba(214,194,148,.97)); color:#382a25; box-shadow:inset 12px 0 28px rgba(72,43,23,.2); }.bstd-rarity { font:700 10px var(--font-head); letter-spacing:.15em; text-transform:uppercase; }.bstd-page h3 { margin:7px 0 12px; font:700 25px Georgia,serif; }.bstd-seal { display:flex; gap:6px; }.bstd-seal span { padding:3px 7px; border:1px solid rgba(56,42,37,.38); border-radius:99px; font-size:9px; }.bstd-page > p { margin:19px 0; font:15px/1.65 Georgia,serif; }.bstd-tactics { display:grid; gap:5px; padding:11px; border-left:3px solid var(--bstd); background:rgba(96,65,37,.1); font-size:10px; }.bstd-tactics b { text-transform:uppercase; letter-spacing:.1em; }.bstd-empty { display:grid; place-content:center; gap:7px; padding:40px; color:var(--text3); text-align:center; }.bstd-empty span { font-size:42px; }
.rns-shell { max-width:1120px; margin:0 auto; padding:20px; overflow:hidden; border:1px solid rgba(96,165,250,.3); border-radius:18px; background:radial-gradient(circle at 50% 0,rgba(37,99,235,.14),transparent 35%),linear-gradient(145deg,#0b1429,#110b24); }.rns-header { display:flex; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid rgba(147,197,253,.17); }.rns-header span,.rns-library h4 { color:#93c5fd; font:700 10px var(--font-head); letter-spacing:.14em; }.rns-header h3 { margin:4px 0; color:#eff6ff; font:700 23px var(--font-head); }.rns-header p { margin:0; color:var(--text3); font-size:11px; }.rns-count { display:grid; place-content:center; min-width:72px; border:1px solid rgba(96,165,250,.42); border-radius:12px; color:#bfdbfe; text-align:center; }.rns-count small { color:var(--text3); font-size:8px; }.rns-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:18px; margin:18px 0; }.rns-layout h4 { margin:0 0 9px; color:#cbd5e1; font-size:11px; }.rns-weapon { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:8px; padding:11px; border:1px solid color-mix(in srgb,var(--rns) 35%,transparent); border-radius:12px; background:linear-gradient(90deg,color-mix(in srgb,var(--rns) 12%,transparent),rgba(255,255,255,.025)); }.rns-weapon-head { display:flex; gap:8px; align-items:center; }.rns-weapon-head > span { font-size:22px; }.rns-weapon-head b,.rns-weapon-head small { display:block; }.rns-weapon-head b { color:#e7e5e4; font-size:12px; }.rns-weapon-head small { color:var(--text3); font-size:9px; }.rns-sockets { display:flex; gap:7px; }.rns-socket { display:grid; place-items:center; width:42px; height:42px; border:2px dashed rgba(147,197,253,.23); border-radius:50%; color:#4b6389; background:rgba(0,0,0,.16); font-size:18px; }.rns-socket.is-filled { border-style:solid; border-color:var(--rune); color:#fff; background:color-mix(in srgb,var(--rune) 23%,transparent); box-shadow:0 0 13px color-mix(in srgb,var(--rune) 52%,transparent); cursor:pointer; }.rns-no-socket { color:var(--text3); font-size:10px; }.rns-altar { display:grid; place-items:center; align-content:center; min-height:200px; border:1px solid rgba(125,211,252,.22); border-radius:15px; background:radial-gradient(circle,rgba(59,130,246,.17),transparent 60%); text-align:center; }.rns-circle { position:relative; display:grid; place-items:center; width:104px; height:104px; margin-bottom:8px; border:1px solid #60a5fa; border-radius:50%; color:#dbeafe; font-size:26px; box-shadow:0 0 20px rgba(59,130,246,.34),inset 0 0 20px rgba(59,130,246,.16); }.rns-circle i { position:absolute; width:8px; height:8px; border-radius:50%; background:#93c5fd; box-shadow:0 0 12px #93c5fd; }.rns-circle i:nth-child(2){top:8px}.rns-circle i:nth-child(3){bottom:14px;left:10px}.rns-circle i:nth-child(4){bottom:14px;right:10px}.rns-altar b { color:#dbeafe; font-size:11px; }.rns-altar p { margin:4px; color:var(--text3); font-size:9px; }.rns-library { padding-top:13px; border-top:1px solid rgba(147,197,253,.15); }.rns-library > div { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:8px; }.rns-rune { padding:10px; border:1px solid color-mix(in srgb,var(--rns) 44%,transparent); border-radius:12px; background:rgba(5,10,24,.62); }.rns-gem { font-size:25px; filter:drop-shadow(0 0 8px var(--rns)); }.rns-rune b { display:block; margin-top:4px; color:var(--rns); font-size:11px; }.rns-rune p { min-height:30px; margin:4px 0 8px; color:var(--text3); font-size:9px; }.rns-rune select { width:100%; padding:5px; border:1px solid rgba(147,197,253,.23); border-radius:6px; color:#dbeafe; background:#10182d; font-size:9px; }
@media (max-width:760px) { .skt3-board { min-height:820px; }.skt3-tier { flex-wrap:wrap; }.skt3-apex{top:10px}.skt3-mid{top:220px}.skt3-root{bottom:10px}.skt3-lines{display:none}.skt3-race,.rns-layout,.bstd-layout,.bstd-detail { grid-template-columns:1fr; }.skt3-race { display:grid; }.skt3-race-nodes { flex-wrap:wrap; }.bstd-shelf { max-height:210px; grid-template-columns:1fr 1fr; }.bstd-detail { min-height:auto; }.bstd-art { min-height:210px; }.bstd-page { padding:25px; }.rns-altar { min-height:160px; } }
.garden-fs-btn     { background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2);
                     color: #fff; font-size: 16px; padding: 4px 9px; border-radius: 6px;
                     cursor: pointer; transition: background .2s; line-height: 1.4; }
.garden-fs-btn:hover { background: rgba(255,255,255,.15); }

/* Fullscreen */
.garden-fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important;
                     height: 100vh !important; aspect-ratio: auto !important;
                     z-index: 9000 !important; border-radius: 0 !important; }

/* Empty state */
.garden-empty      { text-align: center; padding: 40px 20px; color: var(--text3); font-size: 14px; }

/* Pet click modal */
.garden-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6);
                        display: flex; align-items: center; justify-content: center; }
.garden-modal      { background: #1a1a2e; border: 1px solid rgba(255,255,255,.15);
                     border-radius: 16px; padding: 22px 20px; min-width: 220px; max-width: 300px;
                     text-align: center; display: flex; flex-direction: column; gap: 10px;
                     box-shadow: 0 8px 32px rgba(0,0,0,.8); }
.gm-pet-img        { width: 96px; height: 96px; object-fit: contain; margin: 0 auto; }
.gm-name           { font-size: 16px; font-weight: 700; color: var(--text); }
.gm-stage          { font-size: 12px; color: var(--text2); }
.gm-xp-bar-wrap    { display: flex; flex-direction: column; gap: 3px; }
.gm-xp-bar         { background: rgba(255,255,255,.1); border-radius: 4px; height: 6px; overflow: hidden; }
.gm-xp-fill        { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.gm-xp-label       { font-size: 10px; color: var(--text3); }
.gm-meta           { font-size: 11px; color: var(--text3); }
.gm-garden-meta { padding:6px; border-radius:7px; color:#d8b4fe; background:rgba(124,58,237,.12); font-size:10px; }
.gm-expedition-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.gm-expedition-actions button { padding:7px 4px; border:1px solid rgba(167,139,250,.35); border-radius:7px; background:rgba(76,29,149,.22); color:var(--text2); font-size:9px; cursor:pointer; }.gm-expedition-actions button:hover { background:rgba(124,58,237,.48); color:#fff; }.gm-expedition-actions .gm-portal-action { grid-column:1 / -1; border-color:rgba(216,180,254,.7); color:#f5d0fe; }
.gm-close-btn      { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
                     border-radius: 8px; color: var(--text2); padding: 6px 14px;
                     cursor: pointer; font-size: 12px; margin-top: 2px; }
.gm-close-btn:hover { background: rgba(255,255,255,.13); }

/* Rey de la Tempestad sanctuary */
.rey-sanctuary       { position: fixed; inset: 0; z-index: 11000;
                        background: radial-gradient(ellipse at center, rgba(50,10,90,.96) 0%, rgba(3,3,18,.98) 100%);
                        display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rey-sanctuary-inner { position: relative; text-align: center; cursor: default;
                        max-width: 380px; width: 90%; }
.rey-sanctuary-bg    { position: absolute; inset: -80px; border-radius: 50%;
                        background: radial-gradient(ellipse at center, rgba(147,51,234,.28) 0%, transparent 70%);
                        animation: rey-pulse 3.5s ease-in-out infinite; }
.rey-close-btn       { position: absolute; top: -44px; right: 0; background: rgba(255,255,255,.15);
                        border: none; color: #fff; font-size: 18px; width: 32px; height: 32px;
                        border-radius: 50%; cursor: pointer; line-height: 32px; }
.rey-pet-wrap        { position: relative; z-index: 2; display: flex; flex-direction: column;
                        align-items: center; gap: 14px; }
.rey-pet-img         { width: 200px; height: 200px; object-fit: contain;
                        animation: rey-float 4s ease-in-out infinite;
                        filter: drop-shadow(0 0 30px rgba(147,51,234,.75)); }
.rey-pet-name        { font-size: 22px; font-weight: 700; color: #fff;
                        text-shadow: 0 0 24px rgba(147,51,234,.9); }
.rey-pet-stage       { font-size: 14px; color: rgba(255,255,255,.7); }
.rey-pet-maxed       { font-size: 13px; font-weight: 700; color: #a855f7;
                        background: rgba(147,51,234,.2); border: 1px solid rgba(147,51,234,.4);
                        border-radius: 8px; padding: 6px 14px; }

/* Garden keyframes */
@keyframes g-float      { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-4px)} }
@keyframes g-float-slow { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-7px)} }
@keyframes g-wobble     { 0%,100%{transform:rotate(-8deg)}  50%{transform:rotate(8deg)} }
@keyframes g-glow       { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes rey-pulse    { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.12);opacity:.9} }
@keyframes rey-float    { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-14px) scale(1.03)} }

/* Mobile: garden smaller aspect */
@media (max-width: 600px) {
  .garden-wrap { aspect-ratio: 4/3; }
  .pets-tab-btn { font-size: 12px; padding: 6px 10px; }
  .garden-command-deck { grid-template-columns:1fr; }
  .garden-hud { transform:scale(.84); transform-origin:top left; }
}

/* ════════════════════════════════════════════════════════════
   ZONA DE ANIMACIONES Y TRANSICIONES
   ─────────────────────────────────────────────────────────
   REGLAS:
   1. TODO CSS nuevo de motion va AQUÍ — nunca disperso arriba.
   2. Prefijo obligatorio: .anim-  (ej: .anim-fade-in, .anim-slide-up)
   3. Nuevas clases de componente usan BEM-lite:
        .{modulo}-{elemento}  y  .{modulo}-{elemento}--{mod}
        ej: .quest-item--completing, .boss-banner--urgent
   4. NUNCA uses !important en esta sección — resuelve con
      especificidad de selector.
   ════════════════════════════════════════════════════════════ */

/* ── Utilidades de entrada/salida ──────────────────────────── */
.anim-fade-in  { animation: _anim-fadeIn  0.28s ease-out both; }
.anim-slide-up { animation: _anim-slideUp 0.28s ease-out both; }
.anim-pop-in   { animation: _anim-popIn   0.32s cubic-bezier(0.34,1.56,0.64,1) both; }

@keyframes _anim-fadeIn  { from { opacity:0; }              to { opacity:1; } }
@keyframes _anim-slideUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes _anim-popIn   { from { opacity:0; transform:scale(0.88); }      to { opacity:1; transform:none; } }

/* ── Modificadores de estado (BEM-lite, sin !important) ────── */
/* Ejemplo: añadir .quest-item--completing en JS antes de remover el elemento */
.quest-item--completing { pointer-events: none; }

/* ── Nuevas animaciones y transiciones — agregar aquí abajo ── */

/* ============================================================
   CHARACTER SHEET PREMIUM — prefijo csp-
   ============================================================ */

/* Layout contenedor */
.csp-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 660px;
  margin: 0 auto;
  padding-bottom: 48px;
}

/* ── Identity card ─────────────────────────────────────────── */
.csp-identity {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.csp-identity::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, var(--aurora1) 0%, transparent 65%),
              radial-gradient(ellipse at bottom right, var(--aurora2) 0%, transparent 65%);
  pointer-events: none;
}
.csp-identity-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  position: relative;
}
.csp-portrait-wrap { flex-shrink: 0; }
.csp-identity .char-portrait-ring {
  width: 108px;
  height: 108px;
  margin: 0;
}
.csp-identity .char-portrait-emoji { font-size: 56px; }
.csp-identity-info { flex: 1; min-width: 0; padding-top: 2px; }
.csp-hero-name {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csp-hero-title { font-size: 12px; color: var(--text2); margin-bottom: 10px; }
.csp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.csp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
.csp-badge--class {
  border-color: rgba(203,166,247,.3);
  background: rgba(203,166,247,.1);
  color: var(--accent2);
}
.csp-badge--race {
  border-color: rgba(249,226,175,.3);
  background: rgba(249,226,175,.07);
  color: var(--gold);
}
.csp-bars { display: flex; flex-direction: column; gap: 7px; }
.csp-bar-row {
  display: grid;
  grid-template-columns: 22px 1fr 70px;
  align-items: center;
  gap: 8px;
}
.csp-bar-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
}
.csp-bar-track {
  height: 5px;
  background: rgba(137,180,250,.1);
  border-radius: 99px;
  overflow: hidden;
}
.csp-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.23,1,.32,1);
}
.csp-bar-fill--xp { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.csp-bar-fill--hp { background: linear-gradient(90deg, #f38ba8, #fab387); }
.csp-bar-val { font-size: 10px; color: var(--text2); text-align: right; font-variant-numeric: tabular-nums; }
.csp-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  position: relative;
}
.csp-qstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  background: rgba(137,180,250,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.csp-qstat-val { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); }
.csp-qstat-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }

/* ── Section chrome ────────────────────────────────────────── */
.csp-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.csp-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
}
.csp-section-hd-icon { font-size: 15px; }

/* ── Class picker ──────────────────────────────────────────── */
.csp-class-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 18px;
  scrollbar-width: none;
}
.csp-class-picker::-webkit-scrollbar { display: none; }
.csp-class-card {
  flex: 0 0 auto;
  width: 100px;
  padding: 13px 8px 11px;
  background: rgba(137,180,250,.04);
  border: 1.5px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease-out, background .18s ease-out, transform .12s ease-out;
  user-select: none;
}
.csp-class-card:hover { background: rgba(137,180,250,.09); border-color: rgba(137,180,250,.3); }
.csp-class-card:active { transform: scale(.97); }
.csp-class-card.csp-selected {
  border-color: var(--gold);
  background: rgba(249,226,175,.09);
  box-shadow: 0 0 18px rgba(249,226,175,.14);
}
.csp-class-icon { font-size: 26px; margin-bottom: 6px; line-height: 1; }
.csp-class-name {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.3;
}
.csp-class-bonus { font-size: 8px; color: var(--text3); margin-top: 3px; line-height: 1.3; }

/* ── Race picker ───────────────────────────────────────────── */
.csp-race-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 18px;
}
@media (max-width: 420px) { .csp-race-picker { grid-template-columns: repeat(2, 1fr); } }
.csp-race-card {
  padding: 12px 6px 10px;
  background: rgba(137,180,250,.04);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease-out, background .18s ease-out, transform .12s ease-out;
  user-select: none;
}
.csp-race-card:hover { background: rgba(137,180,250,.09); border-color: rgba(137,180,250,.3); }
.csp-race-card:active { transform: scale(.97); }
.csp-race-card.csp-selected {
  border-color: var(--accent2);
  background: rgba(203,166,247,.09);
  box-shadow: 0 0 14px rgba(203,166,247,.12);
}
.csp-race-icon { font-size: 20px; margin-bottom: 4px; line-height: 1; }
.csp-race-name {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text);
  text-transform: uppercase;
}
.csp-race-bonus { font-size: 8px; color: var(--text3); margin-top: 2px; line-height: 1.3; }

/* ── Attributes ────────────────────────────────────────────── */
.csp-attr-hd-pts {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(249,226,175,.1);
  border: 1px solid rgba(249,226,175,.22);
  border-radius: 20px;
  padding: 2px 10px;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
.csp-attr-list { display: flex; flex-direction: column; }
.csp-attr-item {
  display: grid;
  grid-template-columns: 34px 1fr 30px 32px;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.csp-attr-item:last-child { border-bottom: none; }
.csp-attr-emoji { font-size: 17px; text-align: center; }
.csp-attr-mid { min-width: 0; }
.csp-attr-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; gap: 6px; }
.csp-attr-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.csp-attr-eff { font-size: 9px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csp-attr-track {
  height: 4px;
  background: rgba(137,180,250,.1);
  border-radius: 99px;
  overflow: hidden;
}
.csp-attr-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .5s cubic-bezier(.23,1,.32,1);
}
.csp-attr-num {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.csp-attr-plus {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid rgba(137,180,250,.28);
  background: rgba(137,180,250,.07);
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s, border-color .14s, transform .1s;
  line-height: 1;
  padding: 0;
}
.csp-attr-plus:hover:not(:disabled) { background: rgba(137,180,250,.18); border-color: var(--accent); }
.csp-attr-plus:active:not(:disabled) { transform: scale(.9); }
.csp-attr-plus:disabled { opacity: .3; cursor: not-allowed; }

/* ── Equipment slots ───────────────────────────────────────── */
.csp-equip-body { padding: 14px 18px; }
.csp-equip-sublbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text3);
  margin-bottom: 9px;
}
.csp-weapon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.csp-armor-row  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
@media (max-width: 440px) {
  .csp-weapon-row { grid-template-columns: 1fr; }
  .csp-armor-row  { grid-template-columns: repeat(3, 1fr); }
}
.csp-eq-slot {
  background: rgba(137,180,250,.04);
  border: 1.5px dashed rgba(137,180,250,.18);
  border-radius: 11px;
  padding: 11px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .2s;
  text-align: center;
  min-height: 72px;
  justify-content: center;
}
.csp-eq-slot:hover { border-color: rgba(137,180,250,.45); background: rgba(137,180,250,.09); }
.csp-eq-slot.csp-equipped {
  border-style: solid;
  border-color: var(--wc, #9ca3af);
  background: rgba(from var(--wc, #9ca3af) r g b / .07);
}
.csp-eq-slot-img { width: 34px; height: 34px; object-fit: contain; }
.csp-eq-slot-icon { font-size: 20px; line-height: 1; }
.csp-eq-slot-name { font-size: 10px; font-weight: 600; color: var(--text); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csp-eq-slot-tier { font-size: 9px; font-weight: 600; }
.csp-eq-slot-label { font-size: 8px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.csp-eq-slot-hint { font-size: 9px; color: var(--text3); }

/* ── Inventory grid ────────────────────────────────────────── */
.csp-inv-wrap { padding: 13px 18px 15px; }
.csp-inv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
@media (max-width: 440px) { .csp-inv-grid { grid-template-columns: repeat(4, 1fr); } }
.csp-inv-cell {
  aspect-ratio: 1;
  background: rgba(137,180,250,.04);
  border: 1px solid rgba(137,180,250,.11);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .1s ease-out;
  position: relative;
  overflow: hidden;
}
.csp-inv-cell:hover { border-color: rgba(137,180,250,.38); background: rgba(137,180,250,.1); transform: scale(1.05); }
.csp-inv-cell.csp-empty { opacity: .18; cursor: default; pointer-events: none; }
.csp-inv-cell.csp-weapon-cell { border-color: var(--wc, var(--border)); background: rgba(from var(--wc, #9ca3af) r g b / .07); }
.csp-inv-cell-img { width: 55%; height: 55%; object-fit: contain; }
.csp-inv-cell-icon { font-size: 20px; line-height: 1; }
.csp-inv-cell-qty { position: absolute; bottom: 2px; right: 4px; font-size: 8px; font-weight: 700; color: var(--text2); }
.csp-inv-cell-lbl { font-size: 7px; color: var(--text3); text-align: center; padding: 0 2px; line-height: 1.2; }

/* ── Config / form ─────────────────────────────────────────── */
.csp-config-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 13px; }
.csp-form-field { display: flex; flex-direction: column; gap: 5px; }
.csp-form-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text3);
}
.csp-form-input {
  background: rgba(137,180,250,.05);
  border: 1px solid rgba(137,180,250,.18);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color .14s;
  width: 100%;
  box-sizing: border-box;
}
.csp-form-input:focus { outline: none; border-color: var(--accent); }
.csp-nightmare-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: rgba(243,139,168,.05);
  border: 1px solid rgba(243,139,168,.18);
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s;
}
.csp-nightmare-row:hover { background: rgba(243,139,168,.09); }
.csp-nightmare-text { flex: 1; font-size: 12px; color: var(--text2); line-height: 1.45; }
.csp-toggle {
  width: 36px;
  height: 21px;
  border-radius: 11px;
  background: rgba(137,180,250,.18);
  position: relative;
  flex-shrink: 0;
  transition: background .2s ease-out;
}
.csp-toggle.csp-on { background: var(--red); }
.csp-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.csp-toggle.csp-on::after { transform: translateX(15px); }
.csp-save-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #1e1b4b;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .14s, transform .1s;
  width: 100%;
}
.csp-save-btn:hover { filter: brightness(1.1); }
.csp-save-btn:active { transform: scale(.97); }

/* ── Level history ─────────────────────────────────────────── */
.csp-hist-body { padding: 10px 18px 14px; }
.csp-hist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 12px;
}
.csp-hist-row:nth-child(odd) { background: rgba(137,180,250,.04); }
.csp-hist-lvl { font-weight: 700; color: var(--accent); }
.csp-hist-date { color: var(--text3); font-variant-numeric: tabular-nums; }
.csp-prestige-badge {
  margin: 0 18px 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(168,85,247,.1));
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 8px;
  font-size: 12px;
  color: var(--gold);
}
.csp-prestige-btn {
  display: block;
  margin: 10px 18px 4px;
  width: calc(100% - 36px);
  background: linear-gradient(90deg, #f59e0b, #a855f7);
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  transition: filter .14s, transform .1s;
}
.csp-prestige-btn:hover { filter: brightness(1.12); }
.csp-prestige-btn:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════════════
   CHRONICLE B — prefijo chr-
   Hoja de personaje: 3 columnas (retrato | stats | equipo)
   ══════════════════════════════════════════════════════════ */

/* Layout principal */
.chr-layout {
  display: grid;
  grid-template-columns: 210px 1fr 190px;
  gap: 14px;
  padding: 14px;
  align-items: start;
}
@media (max-width: 820px) {
  .chr-layout { grid-template-columns: 1fr; }
}
@media (min-width: 821px) and (max-width: 1024px) {
  .chr-layout { grid-template-columns: 180px 1fr 170px; gap: 10px; padding: 10px; }
}

/* Sección genérica */
.chr-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.chr-section:last-child { margin-bottom: 0; }
.chr-section-hd {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Columna izquierda ────────────────────────────── */
.chr-portrait-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--card);
}
.chr-portrait-card .char-portrait-ring {
  position: relative;
  width: 100%;
  height: 230px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.chr-portrait-badge {
  position: absolute;
  bottom: 8px;
  width: 36px;
  height: 36px;
  object-fit: contain;
  padding: 3px;
  border-radius: 8px;
  background: rgba(10,10,16,.55);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(2px);
}
.chr-badge-weapon { left: 8px; }
.chr-badge-armor  { right: 8px; }
.chr-portrait-card .char-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  display: block;
}
.chr-portrait-card .char-portrait-emoji {
  width: 100%;
  height: 230px;
  font-size: 72px;
  border-radius: 0;
}
.chr-portrait-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 36px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%);
  pointer-events: none;
}
.chr-hero-name {
  font-family: var(--font-head);
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}
.chr-hero-sub {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.chr-prestige-pill {
  color: var(--gold);
  font-size: 11px;
}

/* Vitals */
.chr-vitals {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chr-bar-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chr-bar-lbl {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  width: 20px;
  flex-shrink: 0;
}
.chr-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
}
.chr-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s cubic-bezier(.23,1,.32,1);
}
.chr-bar-hp  { background: var(--accent); }
.chr-bar-xp  { background: var(--gold); }
.chr-bar-val {
  font-size: 10px;
  color: var(--text2);
  min-width: 46px;
  text-align: right;
}

/* Quick stats */
.chr-quickstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.chr-qs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chr-qs-v { font-size: 12px; color: var(--text); font-weight: 600; }
.chr-qs-l { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }

/* ── Columna central ──────────────────────────────── */

/* Attribute cards */
.chr-attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px;
}
.chr-attr-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 28px;
  position: relative;
}
.chr-attr-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.chr-attr-val {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 1;
  color: var(--text);
}
.chr-attr-ico { font-size: 18px; line-height: 1; }
.chr-attr-ico-img { width: 20px; height: 20px; object-fit: contain; }
.chr-attr-name {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 4px;
}
.chr-attr-eff { font-size: 10px; color: var(--text3); margin-top: 2px; }
.chr-attr-plus {
  position: absolute;
  bottom: 7px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--accent2);
  background: none;
  color: var(--accent2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background .12s;
}
.chr-attr-plus:hover { background: var(--accent2); color: #1a1a2e; }
.chr-attr-plus:disabled {
  border-color: var(--border);
  color: var(--text3);
  cursor: default;
}
.chr-attr-plus:disabled:hover { background: none; color: var(--text3); }
.chr-pts-badge {
  font-size: 10px;
  background: var(--accent2);
  color: #1a1a2e;
  border-radius: 12px;
  padding: 2px 8px;
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
}

/* Class picker */
.chr-class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
}
.chr-class-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: border-color .15s, background .15s;
}
.chr-class-pill:hover { border-color: rgba(255,255,255,.25); }
.chr-class-pill.chr-selected {
  border-color: var(--gold);
  background: rgba(249,226,175,.07);
}
.chr-pill-icon { font-size: 22px; line-height: 1; }
.chr-pill-icon-img { width: 26px; height: 26px; object-fit: contain; }
.chr-pill-name {
  font-size: 10px;
  color: var(--text2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.chr-pill-bonus {
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  line-height: 1.3;
}

/* Secret class silhouettes */
.chr-secret-section { padding: 10px; }
.chr-secret-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.chr-secret-card {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  background: rgba(0,0,0,.3);
}
.chr-secret-locked {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chr-secret-mystery {
  font-size: 18px;
  color: var(--text3);
  opacity: .4;
  user-select: none;
}
.chr-secret-unlocked { cursor: pointer; }
.chr-secret-unlocked img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.chr-secret-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 55%);
}
.chr-secret-name {
  font-size: 8px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.chr-secret-adopt {
  position: absolute;
  top: 3px; right: 3px;
  background: var(--accent2);
  color: #1a1a2e;
  border: none;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1.2;
}

/* ── Columna derecha ──────────────────────────────── */

/* Equipment list */
.chr-eq-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chr-eq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: border-color .12s;
  min-width: 0;
}
.chr-eq-row:hover { border-color: rgba(255,255,255,.2); }
.chr-eq-row.chr-eq-filled { border-color: rgba(255,255,255,.1); }
.chr-eq-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.chr-eq-slot-img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.chr-eq-item-img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.quest-art { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; }
.type-separator .quest-art { width: 18px; height: 18px; }
.filter-tab { display: inline-flex; align-items: center; gap: 4px; }
.filter-art { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; }
.chr-eq-info { flex: 1; min-width: 0; }
.chr-eq-name {
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chr-eq-tier  { font-size: 10px; }
.chr-eq-slot-lbl { font-size: 9px; color: var(--text3); }
.chr-eq-vacant { font-size: 11px; color: var(--text3); font-style: italic; }

/* Race picker — columna única para caber en 190px */
.chr-race-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 8px 10px;
}
.chr-race-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: border-color .15s, background .15s;
}
.chr-race-pill:hover { border-color: rgba(255,255,255,.25); }
.chr-race-pill.chr-selected {
  border-color: var(--accent2);
  background: rgba(137,180,250,.07);
}
.chr-race-pill .chr-pill-name { font-size: 11px; color: var(--text2); }

/* Hero score widget card */
.chr-col-left .hero-score-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px 8px;
  margin-top: 8px;
}

/* Level history */
.chr-hist-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chr-hist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chr-hist-lv { font-size: 11px; color: var(--text); font-weight: 600; }
.chr-hist-dt { font-size: 10px; color: var(--text3); }
.chr-prestige-btn {
  margin: 8px 12px;
  padding: 7px;
  background: rgba(249,226,175,.08);
  border: 1px solid rgba(249,226,175,.25);
  color: var(--gold);
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  width: calc(100% - 24px);
  font-family: var(--font-head);
  letter-spacing: .05em;
}
.chr-mastery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 0 12px 10px;
}
.chr-mastery-node {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.chr-mastery-node.chr-mastery-maxed { border-color: rgba(249,226,175,.35); }
.chr-mastery-icon { font-size: 20px; margin-bottom: 2px; }
.chr-mastery-icon img, .rpg-item-art { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.bb-move-art { width: 25px; height: 25px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.pet-ability-art { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.skt-art { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.skt3-doctrine-options .skt-art { width: 24px; height: 24px; }
.chr-mastery-name { font-size: 11px; font-weight: 600; color: var(--text); }
.chr-mastery-rank { color: var(--text3); font-weight: 400; }
.chr-mastery-desc { font-size: 10px; color: var(--text3); margin: 4px 0 6px; min-height: 26px; }
.chr-mastery-btn {
  width: 100%; padding: 5px; font-size: 10px; border-radius: 6px;
  background: rgba(249,226,175,.08); border: 1px solid rgba(249,226,175,.25);
  color: var(--gold); cursor: pointer;
}
.chr-mastery-btn:disabled { opacity: .4; cursor: default; }

.chr-dl-btn {
  margin: 10px 12px;
  padding: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  display: block;
  width: calc(100% - 24px);
  font-family: var(--font-body, sans-serif);
  transition: border-color .12s, color .12s;
}
.chr-dl-btn:hover { border-color: rgba(255,255,255,.2); color: var(--text); }

/* ── Vista de Configuración ───────────────────────── */
.chr-config-view {
  padding: 20px;
  max-width: 560px;
}
.chr-config-hd {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--text);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: .04em;
}
.chr-config-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.chr-config-field {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.chr-config-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  margin-bottom: 6px;
  display: block;
}
.chr-config-input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 9px 12px;
  font-family: var(--font-body, sans-serif);
  box-sizing: border-box;
  outline: none;
  transition: border-color .12s;
}
.chr-config-input:focus { border-color: var(--accent2); }
.chr-nightmare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.chr-nightmare-row:hover { background: rgba(255,255,255,.03); }
.chr-nightmare-text {
  flex: 1;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.chr-config-save {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: filter .14s;
}
.chr-config-save:hover { filter: brightness(1.1); }
.chr-config-section-hd {
  font-family: var(--font-head);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3); padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.chr-config-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.chr-config-row:last-child { border-bottom: none; }
.chr-config-row:hover { background: var(--glass); }
.chr-config-row-icon { font-size: 16px; flex-shrink: 0; }
.chr-config-row-lbl { font-size: 13px; color: var(--text); font-weight: 500; flex: 1; }
.chr-config-row-hint { font-size: 11px; color: var(--text3); }

/* ═══════════════════════════════════════════════════════════
   SKILL TREE v2 — AC Odyssey style (skt-*)
═══════════════════════════════════════════════════════════ */
.skt-wrap { max-width: 340px; margin: 0 auto; padding: 4px 0 16px; }
.skt-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.skt-class-badge { display: flex; align-items: center; gap: 8px; }
.skt-class-icon { font-size: 24px; filter: drop-shadow(0 0 8px var(--skt-c,var(--gold))); }
.skt-class-name { font-family: var(--font-head); font-size: 17px; color: var(--skt-c,var(--gold)); letter-spacing: .04em; }
.skt-pts { font-size: 12px; color: var(--text2); background: rgba(137,180,250,.07); border: 1px solid rgba(137,180,250,.15); border-radius: 20px; padding: 4px 12px; }
.skt-pts.skt-pts-glow { color: var(--gold); border-color: rgba(249,168,37,.4); background: rgba(249,168,37,.08); animation: skt-pts-pulse 2s ease-in-out infinite; }
@keyframes skt-pts-pulse { 0%,100%{box-shadow:0 0 0 transparent} 50%{box-shadow:0 0 10px rgba(249,168,37,.25)} }

.skt-tree { display: flex; flex-direction: column; align-items: center; }
.skt-row { display: flex; gap: 48px; justify-content: center; width: 228px; }
.skt-row-apex { margin-bottom: 0; }

/* SVG connector */
.skt-conn-merge, .skt-conn-straight { display: flex; justify-content: center; }
.skt-svg { width: 228px; display: block; overflow: visible; }

/* Node */
.skt-node { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 90px; cursor: default; user-select: none; }
.skt-node.skt-available { cursor: pointer; }
.skt-ring {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(137,180,250,.15);
  background: rgba(5,5,20,.7);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.skt-apex .skt-ring { width: 82px; height: 82px; }

/* Locked */
.skt-locked .skt-ring { border-color: rgba(137,180,250,.1); background: rgba(0,0,0,.6); }
.skt-locked .skt-icon { opacity: .18; filter: grayscale(1); }
.skt-padlock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 2; }

/* Available */
.skt-available .skt-ring { border-color: rgba(137,180,250,.55); background: rgba(137,180,250,.08); animation: skt-avail 2.4s ease-in-out infinite; }
.skt-available:hover .skt-ring { animation: none; transform: scale(1.1); box-shadow: 0 0 22px rgba(137,180,250,.4); border-color: var(--accent); }
@keyframes skt-avail { 0%,100%{box-shadow:0 0 0 transparent} 50%{box-shadow:0 0 14px rgba(137,180,250,.3)} }

/* Learned */
.skt-learned .skt-ring { border-color: var(--gold); background: rgba(249,168,37,.12); box-shadow: 0 0 18px rgba(249,168,37,.22), inset 0 1px 0 rgba(255,255,255,.08); }
.skt-check { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; background: var(--gold); border-radius: 50%; font-size: 10px; font-weight: 700; color: #000; display: flex; align-items: center; justify-content: center; }

.skt-icon { font-size: 26px; line-height: 1; position: relative; z-index: 2; }
.skt-apex .skt-icon { font-size: 32px; }

.skt-name { font-family: var(--font-head); font-size: 10px; color: var(--text2); text-align: center; line-height: 1.3; letter-spacing: .02em; }
.skt-learned .skt-name { color: var(--gold); }
.skt-available .skt-name { color: var(--text); }

.skt-eff { font-size: 9px; color: var(--text3); text-align: center; line-height: 1.3; padding: 0 4px; }
.skt-learned .skt-eff { color: rgba(249,168,37,.7); }

.skt-cta { font-size: 9px; color: var(--accent); background: rgba(137,180,250,.12); border: 1px solid rgba(137,180,250,.25); border-radius: 8px; padding: 2px 8px; letter-spacing: .02em; }

/* Legend */
.skt-legend { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.skt-leg { font-size: 10px; color: var(--text3); padding: 3px 8px; border-radius: 8px; border: 1px solid transparent; }
.skt-leg-learned { color: var(--gold); border-color: rgba(249,168,37,.3); background: rgba(249,168,37,.07); }
.skt-leg-avail   { color: var(--accent); border-color: rgba(137,180,250,.25); background: rgba(137,180,250,.07); }
.skt-leg-locked  { border-color: rgba(137,180,250,.12); }

/* ═══════════════════════════════════════════════════════════
   BESTIARY v2 (bst-*)
═══════════════════════════════════════════════════════════ */
.bst-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 14px; background: var(--card); border-radius: 10px; border: 1px solid var(--border); }
.bst-count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bst-prog-bar { flex: 1; height: 6px; background: rgba(137,180,250,.1); border-radius: 3px; overflow: hidden; }
.bst-prog-fill { height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent2)); border-radius: 3px; transition: width .5s ease; }
.bst-pct { font-size: 12px; color: var(--text2); font-weight: 600; white-space: nowrap; }

.bst-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text3); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.bst-group-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.bst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 4px; }

.bst-card {
  border-radius: 12px; overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(137,180,250,.1);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.bst-known { border-color: color-mix(in srgb,var(--bc) 35%,transparent); }
.bst-known:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb,var(--bc) 25%,transparent); }
.bst-unknown { opacity: .65; }

.bst-rarity-bar { width: 100%; padding: 4px 8px; display: flex; justify-content: center; }
.bst-rarity-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

.bst-img-wrap { position: relative; width: 90px; height: 90px; margin: 8px auto 6px; display: flex; align-items: center; justify-content: center; }
.bst-img { width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; }
.bst-silhouette { filter: brightness(0) contrast(1) sepia(1) hue-rotate(200deg) saturate(2); opacity: .45; }
.bst-img-fallback { width: 90px; height: 90px; font-size: 48px; display: flex; align-items: center; justify-content: center; }
.bst-unknown-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bst-q { font-family: var(--font-head); font-size: 42px; color: rgba(137,180,250,.35); font-weight: 700; line-height: 1; }
.bst-name { font-family: var(--font-head); font-size: 11px; font-weight: 700; text-align: center; padding: 0 6px 10px; line-height: 1.3; }

/* Compendio y doctrinas: sustituyen paneles planos por piezas de mundo. */
.sktx-shell { max-width:1120px; margin:0 auto; padding:18px; border:1px solid rgba(168,85,247,.26); border-radius:18px; background:radial-gradient(circle at 20% 0,rgba(124,58,237,.18),transparent 34%),linear-gradient(145deg,rgba(17,12,31,.94),rgba(8,14,29,.96)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 36px rgba(0,0,0,.25); }
.sktx-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding-bottom:15px; border-bottom:1px solid rgba(196,132,252,.2); }.sktx-header span,.sktx-section-title { color:var(--skt-c); font:700 11px var(--font-head); text-transform:uppercase; letter-spacing:.12em; }.sktx-header h3 { margin:4px 0; color:#f5f3ff; font:700 23px var(--font-head); }.sktx-header p,.sktx-race p { margin:0; color:var(--text3); font-size:11px; }.sktx-points { display:grid; place-items:center; min-width:82px; padding:9px; border:1px solid rgba(250,204,21,.4); border-radius:12px; color:#fde68a; background:rgba(120,53,15,.2); font-size:16px; }.sktx-points small { color:var(--text3); font-size:8px; }
.sktx-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:14px; margin-top:16px; }.sktx-main { display:grid; gap:10px; }.sktx-tier { display:grid; grid-template-columns:62px 1fr; gap:9px; align-items:stretch; }.sktx-tier-label { padding-top:10px; color:var(--text3); font:700 9px var(--font-head); text-transform:uppercase; }.sktx-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.sktx-card { display:flex; min-width:0; gap:8px; align-items:center; padding:9px; text-align:left; border:1px solid rgba(148,163,184,.15); border-radius:11px; color:var(--text2); background:rgba(255,255,255,.03); }.sktx-card:disabled { cursor:default; }.sktx-icon { font-size:20px; }.sktx-copy { min-width:0; display:grid; gap:2px; }.sktx-copy b { color:inherit; font-size:10px; }.sktx-copy small,.sktx-copy em { color:var(--text3); font-size:8px; line-height:1.25; font-style:normal; }.sktx-state { margin-left:auto; color:var(--text3); font-weight:700; }.sktx-available { cursor:pointer; border-color:color-mix(in srgb,var(--skt-c) 60%,transparent); background:color-mix(in srgb,var(--skt-c) 13%,transparent); animation:skt-avail 2s ease-in-out infinite; }.sktx-available:hover { transform:translateY(-2px); }.sktx-learned { border-color:rgba(250,204,21,.55); background:rgba(120,53,15,.18); color:#fde68a; }.sktx-race { padding:11px; border:1px solid rgba(94,234,212,.2); border-radius:13px; background:linear-gradient(155deg,rgba(13,40,47,.38),rgba(38,12,64,.33)); }.sktx-race .sktx-card { width:100%; margin-top:8px; }.sktx-footer { display:flex; gap:12px; margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); color:var(--text3); font-size:9px; }
.bst-card { cursor:default; font:inherit; color:inherit; text-align:inherit; padding:0; }.bst-known { cursor:pointer; }.bst-entry-overlay { position:fixed; inset:0; z-index:11020; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(3,5,14,.78); backdrop-filter:blur(6px); }.bst-entry { position:relative; display:grid; grid-template-columns:200px minmax(0,1fr); max-width:650px; overflow:hidden; border:1px solid color-mix(in srgb,var(--bst-c) 60%,transparent); border-radius:18px; background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--bst-c) 22%,transparent),transparent 55%),#101326; box-shadow:0 25px 70px #000; }.bst-entry-art { display:grid; place-items:center; min-height:260px; background:linear-gradient(135deg,rgba(0,0,0,.28),color-mix(in srgb,var(--bst-c) 13%,transparent)); }.bst-entry-art img { width:180px; height:180px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 20px color-mix(in srgb,var(--bst-c) 70%,transparent)); }.bst-entry-art span { font-size:80px; }.bst-entry-copy { padding:25px 26px 22px; }.bst-entry-rarity { color:var(--bst-c); font:700 10px var(--font-head); letter-spacing:.13em; text-transform:uppercase; }.bst-entry h3 { margin:6px 0 8px; color:#f8fafc; font:700 22px var(--font-head); }.bst-entry-tags { display:flex; gap:6px; }.bst-entry-tags span { padding:3px 7px; border:1px solid rgba(255,255,255,.14); border-radius:99px; color:var(--text2); font-size:9px; }.bst-entry-copy > p { color:#c4c7d5; font-size:12px; line-height:1.6; }.bst-entry-tactics { display:grid; gap:4px; padding:9px; border-left:2px solid var(--bst-c); background:rgba(0,0,0,.18); color:var(--text3); font-size:10px; }.bst-entry-tactics b { color:var(--bst-c); }.bst-entry-close { position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; background:rgba(0,0,0,.4); cursor:pointer; font-size:18px; }
@media (max-width:700px) { .sktx-layout { grid-template-columns:1fr; }.sktx-grid { grid-template-columns:1fr 1fr; }.sktx-tier { grid-template-columns:1fr; }.sktx-tier-label { padding-top:0; }.bst-entry { grid-template-columns:1fr; max-width:360px; }.bst-entry-art { min-height:150px; }.bst-entry-art img { width:135px; height:135px; } }

/* ═══════════════════════════════════════════════════════════
   RUNE PANEL v2 (rp-*)
═══════════════════════════════════════════════════════════ */
.rp-section-hd { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rp-section-hd::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.rp-weapon-row { background: var(--card2); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); }
.rp-weapon-name { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rp-weapon-tier { font-size: 10px; border: 1px solid; border-radius: 6px; padding: 1px 6px; font-weight: 700; border-color: currentColor; opacity: .7; }
.rp-slots-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rp-no-slots { font-size: 11px; color: var(--text3); }

.rp-socket {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px dashed rgba(137,180,250,.25);
  background: rgba(137,180,250,.04);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: all .2s;
}
.rp-socket-filled {
  border-style: solid;
  border-color: var(--rc,var(--accent));
  background: color-mix(in srgb,var(--rc,var(--accent)) 18%,transparent);
  box-shadow: 0 0 12px color-mix(in srgb,var(--rc,var(--accent)) 35%,transparent);
  cursor: pointer;
}
.rp-socket-filled:hover { background: color-mix(in srgb,var(--rc,var(--accent)) 30%,transparent); transform: scale(1.1); }
.rp-socket-gem { font-size: 20px; line-height: 1; }
.rp-socket-empty-icon { color: rgba(137,180,250,.2); font-size: 18px; }

.rp-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 4px; }
.rp-rune-card {
  background: var(--card2);
  border: 1px solid color-mix(in srgb,var(--rc) 30%,transparent);
  border-radius: 12px; padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  box-shadow: 0 0 16px color-mix(in srgb,var(--rc) 12%,transparent);
}
.rp-rune-gem { font-size: 28px; height: 36px; display: flex; align-items: center; justify-content: center; }
.rp-rune-gem img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.rp-rune-name { font-size: 11px; font-weight: 700; color: var(--rc); }
.rp-rune-eff { font-size: 9px; color: var(--text2); line-height: 1.4; }
.rp-equip-sel { font-size: 10px; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; color: var(--text); }

.rp-frags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.rp-frag-card {
  background: var(--card2); border: 1px solid rgba(137,180,250,.1);
  border-radius: 10px; padding: 10px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; transition: border-color .2s;
}
.rp-frag-card.rp-frag-ready {
  border-color: var(--rc);
  box-shadow: 0 0 10px color-mix(in srgb,var(--rc) 30%,transparent);
  animation: skt-pts-pulse 2s ease-in-out infinite;
}
.rp-frag-bar { width: 100%; height: 4px; background: rgba(137,180,250,.1); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.rp-frag-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.rp-frag-count { font-size: 11px; font-weight: 700; color: var(--text3); }
.rp-frag-ok { color: var(--rc); }
.rp-frag-name { font-size: 9px; color: var(--text3); }

/* Runas y herrero: mesas de trabajo, no listas administrativas. */
#runePanelContent { max-width:1120px; margin:0 auto; padding:16px; border:1px solid rgba(96,165,250,.2); border-radius:17px; background:radial-gradient(circle at 85% 0,rgba(37,99,235,.14),transparent 31%),linear-gradient(145deg,rgba(9,18,39,.94),rgba(13,10,29,.96)); }
#runePanelContent .rp-section-hd { margin-top:0; padding:10px 0; color:#bfdbfe; font-family:var(--font-head); font-size:11px; letter-spacing:.12em; }#runePanelContent .rp-section-hd:not(:first-child) { margin-top:15px; border-top:1px solid rgba(255,255,255,.07); }
.rp-weapon-row { display:grid; grid-template-columns:minmax(170px,1fr) auto; align-items:center; gap:14px; min-height:76px; border-color:rgba(96,165,250,.22); background:linear-gradient(90deg,rgba(30,41,70,.76),rgba(10,14,30,.7)); }.rp-weapon-name { margin:0; }.rp-slots-row { justify-content:flex-end; }.rp-socket { width:48px; height:48px; }.rp-inv-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }.rp-rune-card { min-height:180px; background:linear-gradient(155deg,rgba(18,24,51,.92),rgba(10,12,26,.92)); }.rp-rune-gem { margin-top:4px; }.rp-frags-grid { grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); }.rp-frag-card { background:rgba(13,19,38,.88); }
#smithyView { max-width:1120px; margin:0 auto; padding:16px; border:1px solid rgba(249,115,22,.22); border-radius:17px; background:radial-gradient(circle at 80% 10%,rgba(234,88,12,.18),transparent 32%),linear-gradient(145deg,rgba(34,16,18,.92),rgba(11,14,25,.96)); }.smithy-header { padding:12px 14px; border:1px solid rgba(251,146,60,.18); border-radius:12px; background:rgba(20,12,19,.54); }.smithy-desc { color:#d6c3bb; }.smithy-section-title { position:sticky; top:0; z-index:2; padding:9px 0; color:#fed7aa; background:linear-gradient(90deg,rgba(34,16,18,.98),rgba(34,16,18,.78),transparent); font-family:var(--font-head); letter-spacing:.1em; }.smithy-recipes { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:9px; }.smithy-recipe { min-height:112px; border-color:rgba(251,146,60,.18); background:linear-gradient(135deg,rgba(46,24,27,.84),rgba(15,17,31,.9)); }.smithy-recipe:hover { border-color:rgba(251,146,60,.58); transform:translateY(-2px); }.smithy-btn { min-width:74px; border-radius:10px; }.smithy-forging-queue { border:1px solid rgba(251,191,36,.28); border-radius:12px; background:rgba(120,53,15,.16); }

/* Liquid glass global para los talleres: deja respirar el arte de fondo. */
#runePanelContent,#smithyView,.rns-shell { background:linear-gradient(135deg,rgba(11,10,24,.48),rgba(19,12,34,.25)) !important; border-color:rgba(216,180,254,.28) !important; backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12); box-shadow:inset 0 1px rgba(255,255,255,.15),0 16px 42px rgba(2,2,12,.28); }
#runePanelContent::before,#smithyView::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 28%,transparent 70%,rgba(196,132,252,.05)); }
#runePanelContent,#smithyView { position:relative; isolation:isolate; }
#runePanelContent .rp-weapon-row,.rp-weapon-row,.rns-weapon,.rns-rune { background:linear-gradient(135deg,rgba(16,14,32,.38),rgba(8,12,25,.18)) !important; border-color:rgba(216,180,254,.2) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px rgba(255,255,255,.09); }
#runePanelContent .rp-rune-card,.rp-rune-card,.rp-frag-card { background:linear-gradient(145deg,rgba(18,14,35,.44),rgba(8,12,24,.2)) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#runePanelContent .rp-section-hd { color:#e9d5ff; background:transparent; }
.smithy-header,.smithy-forging-queue { background:linear-gradient(135deg,rgba(20,14,30,.38),rgba(8,12,24,.18)) !important; border-color:rgba(216,180,254,.2) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }.smithy-desc { color:#ddd6e9; }.smithy-section-title { color:#e9d5ff; background:linear-gradient(90deg,rgba(10,8,20,.68),rgba(10,8,20,.3),transparent) !important; }.smithy-recipe { background:linear-gradient(135deg,rgba(21,14,33,.42),rgba(8,12,24,.2)) !important; border-color:rgba(216,180,254,.18) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px rgba(255,255,255,.07); }.smithy-recipe:hover { border-color:rgba(216,180,254,.6) !important; box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.14); }

/* Lenguaje único: liquid glass en todas las vistas intervenidas. */
.vault-shell,.sala-room-shell,.sala-inventory,.garden-command-card,.skt3-shell,.bstd-shell,.rns-shell,.wm-detail-inner,.faction-card,.ach-cat,.merchant-ledger,.bb-command-panel,.bb-unit-card,.chr-portrait-card,.chr-vitals,.chr-stat-panel,.chr-class-panel,.chr-equip-panel { background:linear-gradient(135deg,rgba(12,10,25,.50),rgba(26,17,43,.22)) !important; border-color:rgba(216,180,254,.24) !important; backdrop-filter:blur(14px) saturate(1.08); -webkit-backdrop-filter:blur(14px) saturate(1.08); box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.18); }
.vault-header,.vault-tabs,.vault-section,.sala-props,.sala-toolbar,.garden-hud,.garden-command-deck,.skt3-board,.skt3-race,.bstd-header,.bstd-shelf,.bstd-detail,.rns-altar,.wm-legend,.faction-focus-btn,.ach-secret-meter { background:linear-gradient(135deg,rgba(15,12,29,.42),rgba(37,22,57,.16)) !important; border-color:rgba(216,180,254,.20) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.vault-gear,.vault-item-card,.garden-upgrade,.skt3-node,.bstd-spine,.rns-weapon,.rns-rune,.wm-ap-btn,.faction-claim-btn,.faction-focus-btn { background:linear-gradient(135deg,rgba(16,12,31,.40),rgba(8,12,24,.16)) !important; border-color:rgba(216,180,254,.18) !important; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.vault-gear:hover,.vault-item-card:hover,.garden-upgrade:hover,.skt3-node.is-ready:hover,.bstd-spine.is-known:hover,.rns-weapon:hover,.rns-rune:hover,.wm-ap-btn:hover:not(:disabled),.faction-card:hover { border-color:rgba(216,180,254,.58) !important; background:linear-gradient(135deg,rgba(55,29,86,.38),rgba(12,16,32,.24)) !important; }
/* Los muebles son arte recortado, no tarjetas. La transparencia del WebP debe
   revelar la sala completa: sin panel, blur ni borde cuadrado alrededor. */
.sala-room .sala-item,.sala-room .sala-item:hover { background:transparent !important; border-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; }
.bstd-page { background:linear-gradient(135deg,rgba(18,13,31,.74),rgba(35,22,48,.52)) !important; color:#e9e3f2 !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px rgba(255,255,255,.13); }.bstd-page h3 { color:#fff !important; }.bstd-page > p { font-family:var(--font-body,inherit); }.bstd-tactics { background:rgba(0,0,0,.17) !important; }

/* Cristal ligero: el escenario es protagonista, el panel sólo ordena. */
#smithyView,#runePanelContent,.rns-shell,.vault-shell,.sala-room-shell,.skt3-shell,.bstd-shell { background:rgba(8,6,18,.10) !important; backdrop-filter:blur(5px) saturate(1.04) !important; -webkit-backdrop-filter:blur(5px) saturate(1.04) !important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.10) !important; }
.smithy-header,.smithy-forging-queue,.smithy-recipe,#smithyView .inv-empty,#runePanelContent .rp-weapon-row,#runePanelContent .rp-rune-card,#runePanelContent .rp-frag-card,.rns-weapon,.rns-rune { background:rgba(10,8,22,.13) !important; backdrop-filter:blur(4px) !important; -webkit-backdrop-filter:blur(4px) !important; box-shadow:inset 0 1px rgba(255,255,255,.09) !important; }
.smithy-section-title { background:linear-gradient(90deg,rgba(8,6,18,.38),rgba(8,6,18,.12),transparent) !important; }.smithy-recipe:hover { background:rgba(55,29,86,.20) !important; }

/* Transparencia extrema en las tres vistas señaladas. */
#characterSheet .chr-section,#characterSheet .chr-portrait-card,#characterSheet .chr-vitals,#characterSheet .chr-attr-card,#characterSheet .chr-class-pill,#characterSheet .chr-race-pill,#characterSheet .chr-eq-row,#characterSheet .chr-mastery-node,#characterSheet .chr-secret-card { background:rgba(9,7,20,.07) !important; backdrop-filter:blur(3px) saturate(1.02) !important; -webkit-backdrop-filter:blur(3px) saturate(1.02) !important; border-color:rgba(216,180,254,.18) !important; box-shadow:inset 0 1px rgba(255,255,255,.09) !important; }
#characterSheet .chr-section-hd { background:rgba(10,8,22,.10); border-color:rgba(216,180,254,.14); }
#runePanelContent { background:rgba(6,5,16,.035) !important; backdrop-filter:blur(2px) !important; -webkit-backdrop-filter:blur(2px) !important; }#runePanelContent::before { background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 35%,transparent) !important; }#runePanelContent .rp-weapon-row,#runePanelContent .rp-rune-card,#runePanelContent .rp-frag-card,#runePanelContent .rune-empty { background:rgba(8,6,18,.075) !important; backdrop-filter:blur(2px) !important; -webkit-backdrop-filter:blur(2px) !important; }
#bestiaryContent .bst-header,#bestiaryContent .bst-card,#bestiaryContent .bstd-shell,#bestiaryContent .bstd-header,#bestiaryContent .bstd-shelf,#bestiaryContent .bstd-detail,#bestiaryContent .bstd-spine { background:rgba(8,6,18,.065) !important; backdrop-filter:blur(3px) saturate(1.02) !important; -webkit-backdrop-filter:blur(3px) saturate(1.02) !important; border-color:rgba(216,180,254,.16) !important; }
#bestiaryContent .bstd-page { background:rgba(12,9,24,.16) !important; backdrop-filter:blur(5px) !important; -webkit-backdrop-filter:blur(5px) !important; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Batch 1 / 2 / 3
   ═══════════════════════════════════════════════════════════ */

/* ── BATCH 1: Shiny Text ───────────────────────────────────── */
.shiny-text {
  background: linear-gradient(
    105deg,
    var(--shiny-c, #f8fafc) 0%,
    var(--shiny-c, #f8fafc) 28%,
    rgba(255,255,255,.95) 50%,
    var(--shiny-c, #f8fafc) 72%,
    var(--shiny-c, #f8fafc) 100%
  );
  background-size: 250% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 2.8s linear infinite;
  display: inline-block;
}
@keyframes shiny-sweep {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}

/* ── BATCH 1: Boss Card Electric Glow ────────────────────── */
.bcard:not(.bcard-empty):not(.bcard-defeated) {
  animation: boss-glow 3s ease-in-out infinite;
}
@keyframes boss-glow {
  0%, 100% {
    box-shadow:
      0 4px 32px rgba(0,0,0,.4),
      0 0 8px  color-mix(in srgb, var(--rc, #a855f7) 30%, transparent);
  }
  50% {
    box-shadow:
      0 4px 32px rgba(0,0,0,.4),
      0 0 20px color-mix(in srgb, var(--rc, #a855f7) 65%, transparent),
      0 0 45px color-mix(in srgb, var(--rc, #a855f7) 25%, transparent);
  }
}

/* Override urgent pulse with stronger version */
.bcard-urgent { animation: boss-glow-urgent 1.3s ease-in-out infinite !important; }
@keyframes boss-glow-urgent {
  0%, 100% { box-shadow: 0 4px 32px rgba(0,0,0,.4), 0 0 14px rgba(251,113,133,.45); }
  50%       { box-shadow: 0 4px 32px rgba(0,0,0,.4), 0 0 32px rgba(251,113,133,.85), 0 0 55px rgba(251,113,133,.28); }
}

/* Boss plasma canvas layer */
.bcard-plasma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  opacity: .38;
  z-index: 0;
}
/* All bcard direct content sits above the plasma canvas */
.bcard-cycle, .bcard-portrait-wrap, .bcard-name,
.bcard-rarity, .bcard-hp-bar, .bcard-bottom {
  position: relative;
  z-index: 1;
}
.bcard::before { z-index: 2; } /* keep the radial top-glow on top too */

/* ── BATCH 2: Glare Hover on inventory slots ─────────────── */
.inv-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.04) 45%,
    transparent 70%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.inv-slot[data-glare='1']::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Batch 4 (catalog effects)
   ═══════════════════════════════════════════════════════════ */

/* ── Aurora Text ───────────────────────────────────────────── */
.aurora-text {
  background: linear-gradient(135deg,
    #a855f7 0%, #818cf8 25%, #60a5fa 50%, #34d399 75%, #a855f7 100%
  );
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-flow 4s linear infinite;
  display: inline-block;
}
@keyframes aurora-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ── Border Beam (sliding light on card edge) ──────────────── */
.border-beam { position: relative; overflow: hidden; }
.border-beam::before {
  content: '';
  position: absolute;
  width: 60px; height: 100%;
  top: 0; left: -60px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.75), transparent);
  animation: beam-slide 3s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes beam-slide { to { left: calc(100% + 60px); } }

/* ── Shine Border (rotating gradient frame) ────────────────── */
.shine-border {
  position: relative;
  isolation: isolate;
}
.shine-border::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, transparent 280deg, #a855f7 310deg, #818cf8 340deg, transparent 360deg
  );
  animation: shine-spin 3s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes shine-spin { to { transform: rotate(360deg); } }

/* ── Neon Gradient Card hover border ───────────────────────── */
.neon-card { position: relative; }
.neon-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--nc1, #a855f7), var(--nc2, #60a5fa));
  z-index: -1;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.neon-card:hover::before { opacity: 1; }

/* ── Concentric Ripples (boss-active indicator) ────────────── */
.ripple-rings { position: relative; }
.ripple-rings::before,
.ripple-rings::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: ripple-out 2s ease-out infinite;
  pointer-events: none;
}
.ripple-rings::after { animation-delay: 1s; }
@keyframes ripple-out {
  0%   { transform: scale(.85); opacity: .55; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Blur Vignette (edge darkness for immersion) ───────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.32) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Badge Ping (notification pulse) ───────────────────────── */
.badge-ping { position: relative; }
.badge-ping::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  animation: badge-ping 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes badge-ping {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Stagger List (sequential entrance) ────────────────────── */
.stagger-list > * {
  animation: stagger-in .32s ease-out both;
}
.stagger-list > *:nth-child(1)  { animation-delay: .03s; }
.stagger-list > *:nth-child(2)  { animation-delay: .07s; }
.stagger-list > *:nth-child(3)  { animation-delay: .11s; }
.stagger-list > *:nth-child(4)  { animation-delay: .15s; }
.stagger-list > *:nth-child(5)  { animation-delay: .19s; }
.stagger-list > *:nth-child(6)  { animation-delay: .23s; }
.stagger-list > *:nth-child(7)  { animation-delay: .27s; }
.stagger-list > *:nth-child(8)  { animation-delay: .31s; }
.stagger-list > *:nth-child(n+9){ animation-delay: .34s; }
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Word Pull Up (text entrance word by word) ─────────────── */
.word-pull-up span { display: inline-block; overflow: hidden; }
.word-pull-up span em {
  display: inline-block;
  font-style: normal;
  animation: word-up .45s cubic-bezier(.23,1,.32,1) both;
}
.word-pull-up span:nth-child(2) em { animation-delay: .06s; }
.word-pull-up span:nth-child(3) em { animation-delay: .12s; }
.word-pull-up span:nth-child(4) em { animation-delay: .18s; }
.word-pull-up span:nth-child(5) em { animation-delay: .24s; }
.word-pull-up span:nth-child(n+6) em { animation-delay: .30s; }
@keyframes word-up {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Gradient Reveal (clip-path wipe) ──────────────────────── */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  animation: reveal-right .65s cubic-bezier(.23,1,.32,1) forwards;
}
@keyframes reveal-right { to { clip-path: inset(0 0% 0 0); } }

/* ── Text Reveal Blur ───────────────────────────────────────── */
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  animation: reveal-blur-in .55s ease-out forwards;
}
@keyframes reveal-blur-in { to { opacity: 1; filter: blur(0); } }

/* ── Wave Text (letter sine wave) ──────────────────────────── */
.wave-text span { display: inline-block; animation: wave-letter 1.5s ease-in-out infinite; }
.wave-text span:nth-child(2n)   { animation-delay: .08s; }
.wave-text span:nth-child(3n)   { animation-delay: .16s; }
.wave-text span:nth-child(4n)   { animation-delay: .24s; }
.wave-text span:nth-child(5n)   { animation-delay: .32s; }
.wave-text span:nth-child(6n)   { animation-delay: .40s; }
.wave-text span:nth-child(7n)   { animation-delay: .48s; }
@keyframes wave-letter {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ── Skeleton Loader ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 300% 100%;
  border-radius: 6px;
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Flip Card ──────────────────────────────────────────────── */
.flip-card { perspective: 800px; cursor: pointer; }
.flip-card-inner {
  transform-style: preserve-3d;
  transition: transform .48s cubic-bezier(.23,1,.32,1);
  position: relative;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); position: absolute; inset: 0; }

/* ── Hover 3D Tilt ──────────────────────────────────────────── */
.tilt-card {
  transition: transform .14s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Tooltip Reveal ─────────────────────────────────────────── */
.has-tooltip { position: relative; }
.has-tooltip .tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(.9) translateY(4px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s, transform .14s cubic-bezier(.23,1,.32,1);
  z-index: 200;
}
.has-tooltip:hover .tip { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }

/* ── Material Ripple ────────────────────────────────────────── */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  transform: scale(0);
  animation: ripple-expand .5s linear;
  pointer-events: none;
}
@keyframes ripple-expand { to { transform: scale(4); opacity: 0; } }

/* ── Orbiting Circles ───────────────────────────────────────── */
.orbit-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.orbit-ring .orb {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: orbit-spin 3s linear infinite;
  transform-origin: 0 0;
  top: 50%; left: 50%;
  margin: -3.5px 0 0 -3.5px;
}
.orbit-ring .orb:nth-child(2) { animation-delay: -1s; background: #60a5fa; }
.orbit-ring .orb:nth-child(3) { animation-delay: -2s; background: #34d399; }
@keyframes orbit-spin {
  0%   { transform: rotate(0deg)   translateX(20px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

/* ── Expanding Cards ────────────────────────────────────────── */
.expand-card { overflow: hidden; transition: max-height .35s cubic-bezier(.23,1,.32,1); max-height: 72px; }
.expand-card.open { max-height: 600px; }

/* ── Animated Gradient Background ──────────────────────────── */
.animated-bg {
  background: linear-gradient(135deg, #1e1b4b, #312e81, #1e1b4b, #0f172a);
  background-size: 400% 400%;
  animation: bg-flow 8s ease infinite;
}
@keyframes bg-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Spotlight Hero (cursor radial light on container) ─────── */
.spotlight-hero {
  background-image: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 50%),
    rgba(168,85,247,.10) 0%, transparent 55%
  );
  transition: background-image .05s;
}

/* ── Typewriter cursor ──────────────────────────────────────── */
.typewriter-cursor::after {
  content: '|';
  animation: cursor-blink .75s step-end infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* ── Number Ticker ──────────────────────────────────────────── */
.number-ticker {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  vertical-align: bottom;
  position: relative;
}
.number-ticker span {
  display: block;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}

/* ── Cursor Trail canvas ────────────────────────────────────── */
#_cursor-trail {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
}

/* ── HyperText Scramble char states ────────────────────────── */
.hyper-text span { display: inline-block; transition: color .06s; }
.hyper-text span.scrambling { color: var(--accent); }

/* ── Magnetic Button (visual) ───────────────────────────────── */
.magnetic { transition: transform .2s cubic-bezier(.23,1,.32,1); }

/* ── Glitch Text ────────────────────────────────────────────── */
.glitch-text { position: relative; display: inline-block; }
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-text.glitch-active::before {
  color: #fb7185;
  transform: translate(-2px, 0);
  opacity: .8;
  animation: glitch-a .14s steps(1) 3;
}
.glitch-text.glitch-active::after {
  color: #34d399;
  transform: translate(2px, 0);
  opacity: .8;
  animation: glitch-b .14s steps(1) 3;
}
@keyframes glitch-a {
  0%   { clip-path: polygon(0 0%,100% 0%,100% 30%,0 30%); }
  50%  { clip-path: polygon(0 50%,100% 50%,100% 70%,0 70%); }
  100% { clip-path: polygon(0 10%,100% 10%,100% 40%,0 40%); }
}
@keyframes glitch-b {
  0%   { clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); }
  50%  { clip-path: polygon(0 30%,100% 30%,100% 50%,0 50%); }
  100% { clip-path: polygon(0 70%,100% 70%,100% 90%,0 90%); }
}

/* ── Radial Progress SVG ────────────────────────────────────── */
.radial-progress {
  --rp: 0;
  --rp-size: 60px;
  --rp-stroke: 5px;
  --rp-color: var(--accent);
  width: var(--rp-size);
  height: var(--rp-size);
  position: relative;
  display: inline-grid;
  place-items: center;
}
.radial-progress svg { transform: rotate(-90deg); position: absolute; inset: 0; }
.radial-progress circle.track { fill: none; stroke: var(--border); stroke-width: var(--rp-stroke); }
.radial-progress circle.fill {
  fill: none; stroke: var(--rp-color); stroke-width: var(--rp-stroke);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--rp));
  transition: stroke-dashoffset .55s cubic-bezier(.23,1,.32,1);
}
.radial-progress .rp-label {
  font-size: 11px; font-weight: 700; color: var(--text); z-index: 1;
}

/* ── Confetti / Particle burst canvas ──────────────────────── */
.confetti-canvas {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
}

/* ═══════════════════════════════════════════════════════════
   BATCH 4b — Dock · FAB Speed-Dial · Quest Drawer · Progress Steps
   ═══════════════════════════════════════════════════════════ */

/* ── Desktop Dock (Magnify) ─────────────────────────────────── */
.dungeon-dock {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(15,12,30,.80);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 480;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
@media (max-width: 640px) { .dungeon-dock { display: none; } }

.dock-item {
  background: none;
  border: none;
  padding: 4px 5px;
  cursor: pointer;
  position: relative;
  transform-origin: bottom center;
  transition: transform .01s;
}
.dock-icon, .dock-icon-img {
  font-size: 24px;
  display: block;
  transition: transform .18s cubic-bezier(.23,1,.32,1), filter .18s;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 0 transparent);
  line-height: 1;
}
.dock-icon-img { width: 24px; height: 24px; object-fit: contain; }
.dock-item:hover .dock-icon, .dock-item:hover .dock-icon-img {
  transform: scale(1.55) translateY(-6px);
  filter: drop-shadow(0 4px 10px rgba(168,85,247,.55));
}
/* Neighbour magnification via JS (class added by dock JS) */
.dock-item.dock-near .dock-icon, .dock-item.dock-near .dock-icon-img  { transform: scale(1.28) translateY(-3px); }
.dock-item.dock-far  .dock-icon, .dock-item.dock-far  .dock-icon-img  { transform: scale(1.12) translateY(-1px); }

.dock-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(.88);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s, transform .14s cubic-bezier(.23,1,.32,1);
}
.dock-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── FAB Speed-Dial ─────────────────────────────────────────── */
.fab-dial {
  position: fixed;
  bottom: 88px;
  right: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 600;
}
@media (min-width: 641px) { .fab-dial { display: none; } }

.fab-action {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  opacity: 0;
  transform: translateY(16px) scale(.85);
  transition: opacity .2s, transform .2s cubic-bezier(.23,1,.32,1);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.fab-action::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .15s .1s;
  pointer-events: none;
}
.fab-dial.open .fab-action {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-dial.open .fab-action::before { opacity: 1; }
.fab-dial.open .fab-action:nth-child(1) { transition-delay: .04s; }
.fab-dial.open .fab-action:nth-child(2) { transition-delay: .08s; }
.fab-dial.open .fab-action:nth-child(3) { transition-delay: .12s; }
.mobile-fab { transition: transform .25s cubic-bezier(.23,1,.32,1); }
.mobile-fab.open { transform: rotate(45deg); }

/* ── Quest Detail Drawer ────────────────────────────────────── */
.quest-drawer {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
  visibility: hidden;
}
.quest-drawer.open {
  pointer-events: all;
  visibility: visible;
}
.quest-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .25s;
}
.quest-drawer.open::before { opacity: 1; }
.quest-drawer-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(380px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 20px 18px 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quest-drawer.open .quest-drawer-panel { transform: translateX(0); }
.quest-drawer-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none;
  color: var(--text2); font-size: 18px; cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: background .12s;
}
.quest-drawer-close:hover { background: var(--card); }
.quest-drawer-content { padding-top: 6px; }

/* ── Boss Progress Steps ────────────────────────────────────── */
.boss-steps {
  display: flex;
  align-items: center;
  margin: 4px 0 8px;
  font-size: 10px;
}
.boss-step {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text3);
  flex-shrink: 0;
}
.boss-step.active { color: var(--rc, #a855f7); font-weight: 700; }
.boss-step.done   { color: var(--text2); }
.boss-step-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}
.boss-step.active .boss-step-dot { background: currentColor; box-shadow: 0 0 5px currentColor; }
.boss-step.done   .boss-step-dot { background: var(--text2); border-color: var(--text2); }
.boss-step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 12px;
  max-width: 28px;
  margin: 0 3px;
}
.boss-step.done + .boss-step-line { background: var(--text2); }

/* ============================================================
   RPG SHOP — GRID DE CARDS CON RAREZA
   ============================================================ */
#view-shop .view-header,
#view-inventory .view-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#view-shop .view-title,
#view-inventory .view-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .06em;
}
.rpg-shop-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rpg-shop-tab {
  padding: 5px 11px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition);
}
.rpg-shop-tab:hover { border-color: var(--gold); color: var(--gold); }
.rpg-shop-tab.active {
  background: rgba(249,226,175,.1);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}
.merchant-ledger { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 13px; padding:17px 19px; border:1px solid rgba(182,116,228,.5); border-radius:9px; background:radial-gradient(circle at 90% 0,rgba(168,85,247,.26),transparent 38%),linear-gradient(135deg,rgba(43,20,64,.96),rgba(15,8,27,.98)); box-shadow:inset 0 0 0 1px rgba(234,209,255,.06); }
.merchant-ledger span { color:#ca9cf1; font:800 9px var(--font-head); letter-spacing:.15em; }.merchant-ledger h3 { margin:4px 0; color:#f1ddff; font:700 23px var(--font-head); }.merchant-ledger p { margin:0; color:#b7a0c6; font-size:11px; }.merchant-ledger-gold { display:flex; flex-direction:column; align-items:flex-end; gap:3px; padding-left:16px; border-left:1px solid rgba(205,151,240,.32); white-space:nowrap; }.merchant-ledger-gold b { color:#ffd66e; font:800 19px var(--font-head); }.merchant-ledger-gold small { color:#bf9d5d; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.merchant-owned { margin:7px 0 2px; color:#c5add7; font-size:10px; }
.rpg-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.rpg-shop-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 8px;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
  position: relative;
}
.rpg-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.rpg-rarity-common    { border-top-color: #6e7280 !important; }
.rpg-rarity-uncommon  { border-top-color: #4ade80 !important; }
.rpg-rarity-rare      { border-top-color: #60a5fa !important; }
.rpg-rarity-epic      { border-top-color: #c084fc !important; }
.rpg-rarity-legendary {
  border-top-color: var(--gold) !important;
  background: linear-gradient(180deg, rgba(249,226,175,.06) 0%, var(--card) 40%);
}
.rpg-rarity-tag {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .75;
}
.rpg-item-visual {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg4);
  border-radius: 8px;
  position: relative;
  flex-shrink: 0;
  margin: 2px 0;
}
.rpg-item-visual img { width: 46px; height: 46px; object-fit: contain; }
.rpg-item-emoji { font-size: 28px; line-height: 1; }
.rpg-item-qty-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  background: var(--accent);
  color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 6px; padding: 1px 5px;
}
.rpg-shop-item-name {
  font-size: 12px; font-weight: 600;
  color: var(--text); text-align: center; line-height: 1.3;
}
.rpg-shop-item-desc {
  font-size: 10px; color: var(--text2);
  text-align: center; line-height: 1.4; flex: 1;
}
.rpg-buy-btn {
  width: 100%;
  background: rgba(249,226,175,.1);
  border: 1px solid rgba(249,226,175,.28);
  border-radius: 5px;
  padding: 6px 0;
  font-size: 12px; font-weight: 700;
  color: var(--gold);
  cursor: pointer;
  transition: var(--transition);
  margin-top: 2px;
}
.rpg-buy-btn:hover:not(:disabled) {
  background: rgba(249,226,175,.18);
  border-color: var(--gold);
}
.rpg-buy-btn:disabled {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text3);
  cursor: not-allowed;
}

/* ============================================================
   DIABLO VAULT — INVENTORY (full redesign)
   Stone inset slots, rarity glow, GSAP-driven hover/entrance
   ============================================================ */

/* Vault container */
#inventoryView {
  background: #080910;
  border: 1px solid #1e2038;
  border-radius: 3px;
  padding: 14px 12px 20px;
  min-height: 120px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.65);
}

/* Empty state */
.rpg-inv-empty-state {
  text-align: center;
  padding: 48px 16px;
  color: #3a3c55;
  font-size: 13px;
  font-style: italic;
  letter-spacing: .02em;
}

/* Section label — two-sided metallic rule with center text */
.rpg-inv-section-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #4a4d6e;
  margin: 18px 0 10px;
}
.rpg-inv-section-label::before,
.rpg-inv-section-label::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, #2e3150 35%, #2e3150 65%, transparent);
}

/* Grid */
.rpg-inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
@media (max-width: 500px) { .rpg-inv-grid { grid-template-columns: repeat(5, 1fr); } }

/* Stone slot — deep inset with Diablo bevel */
.rpg-inv-slot {
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(145deg, #0e101c 0%, #090b14 100%);
  border: 1px solid #252845;
  /* Engraved stone bevel — top/left highlight, bottom/right shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset -1px 0 0 rgba(0,0,0,.45),
    0 2px 5px rgba(0,0,0,.5);
  /* GSAP owns hover glow; only border-color transitions via CSS */
  transition: border-color .12s;
  will-change: box-shadow;
}

/* Item images */
.rpg-inv-slot img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
  pointer-events: none;
}
.rpg-inv-slot-emoji {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.8));
  pointer-events: none;
}

/* Quantity badge — amber gold, monospaced */
.rpg-inv-qty {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #d4a540;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
  font-family: var(--font-body);
  line-height: 1;
}

/* Empty slots */
.rpg-inv-slot.rpg-inv-empty {
  background: #07080f;
  border-color: #181a2e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    inset 0 -1px 0 rgba(0,0,0,.4);
  cursor: default;
  pointer-events: none;
}
.rpg-inv-empty-inner {
  width: 52%;
  height: 52%;
  border: 1px solid #20223a;
  border-radius: 1px;
}

/* Rarity border tint (GSAP adds full glow on hover) */
.rpg-inv-type-spell  { border-color: #2e1f4a; }
.rpg-inv-type-potion { border-color: #112e1e; }

/* ── Detail Modal — Diablo item popup ──────────────── */
#invDetailModal .modal {
  background: linear-gradient(155deg, #0e101e 0%, #080a13 100%);
  border: 1px solid #252845;
  border-radius: 3px;
  box-shadow: 0 14px 52px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}
#invDetailModal .modal-title {
  font-family: var(--font-head, 'Cinzel', serif);
  letter-spacing: .04em;
  transition: color .2s;
}
#invDetailModal[data-rarity="spell"] .modal {
  border-color: #3d205a;
  box-shadow: 0 14px 52px rgba(0,0,0,.8), 0 0 32px rgba(192,132,252,.13);
}
#invDetailModal[data-rarity="spell"] .modal-title { color: #c084fc; }
#invDetailModal[data-rarity="pet_potion"] .modal {
  border-color: #163b22;
  box-shadow: 0 14px 52px rgba(0,0,0,.8), 0 0 28px rgba(74,222,128,.11);
}
#invDetailModal[data-rarity="pet_potion"] .modal-title { color: #4ade80; }

/* Item display case inside modal */
.inv-detail-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 6px auto 10px;
  background: linear-gradient(145deg, #0c0e1a, #070810);
  border: 1px solid #252845;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 4px 14px rgba(0,0,0,.55);
}
.inv-detail-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #2a2d4a 30%, #2a2d4a 70%, transparent);
  margin: 10px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .rpg-inv-slot { transition: none !important; will-change: auto; }
}

/* ============================================================
   RPG REDESIGN — STATS (tablero del reino)
   ============================================================ */
.stats-card {
  border-radius: 8px;
  border-top: 3px solid rgba(249,226,175,.12);
}
.stats-card:hover {
  border-top-color: rgba(249,226,175,.3);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.mini-bar {
  background: linear-gradient(180deg, var(--gold), rgba(249,226,175,.5));
  box-shadow: 0 -4px 10px rgba(249,226,175,.2);
}
.dist-bar-bg { background: rgba(249,226,175,.06); }
.oraculo-text {
  font-style: italic;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  border-left: 2px solid rgba(249,226,175,.25);
  padding-left: 12px;
}

/* ============================================================
   RPG REDESIGN — CHARACTER SHEET (ficha D&D)
   ============================================================ */
.chr-section {
  border-top: 3px solid rgba(249,226,175,.12);
  border-radius: 8px;
}
.chr-section:hover { border-top-color: rgba(249,226,175,.25); }
.chr-attr-card {
  border-top: 2px solid rgba(80,80,100,.4);
  border-radius: 8px;
}
.chr-attr-val { color: var(--gold); }
.chr-class-pill.chr-selected {
  border-top: 2px solid var(--gold);
  box-shadow: 0 2px 12px rgba(249,226,175,.12);
}
.chr-race-pill.chr-selected {
  border-top: 2px solid var(--gold);
  box-shadow: 0 2px 12px rgba(249,226,175,.12);
}

/* ============================================================
   RPG REDESIGN — LOGIN (puerta del dungeon: oro arcano)
   ============================================================ */

/* Orbs: primer orbe azul → ámbar, tercer orbe teal → naranja */
.lob-1 { background: rgba(249,200,100,.08); }
.lob-2 { background: rgba(140,60,200,.07); }
.lob-3 { background: rgba(220,120,40,.06); }

/* Emblem: borde dorado */
.login-emblem {
  background: linear-gradient(135deg, rgba(249,226,175,.12), rgba(168,85,247,.12));
  border-color: rgba(249,226,175,.3);
}
.login-emblem-glow {
  background: radial-gradient(circle, rgba(249,226,175,.12) 0%, transparent 70%);
}

/* Título: degradado dorado */
.login-title {
  background: linear-gradient(135deg, #e2e8f0 0%, var(--gold) 50%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Input focus: glow dorado */
.login-field:focus-within {
  border-color: rgba(249,226,175,.4);
  background: rgba(249,226,175,.04);
  box-shadow: 0 0 0 3px rgba(249,226,175,.07), 0 2px 12px rgba(249,226,175,.1);
}

/* Separador: tinte dorado */
.login-sep::before, .login-sep::after {
  background: linear-gradient(90deg, transparent, rgba(249,226,175,.15), transparent);
}

/* Botón principal: arcano oscuro con borde dorado */
.login-btn {
  background: linear-gradient(135deg, rgba(249,226,175,.18) 0%, rgba(180,140,60,.14) 100%);
  border: 1px solid rgba(249,226,175,.35);
  color: var(--gold);
  box-shadow: 0 4px 24px rgba(249,226,175,.12), 0 1px 0 rgba(255,255,255,.06) inset;
}
.login-btn:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(249,226,175,.2);
  border-color: rgba(249,226,175,.55);
}

/* ============================================================
   RPG REDESIGN — ACHIEVEMENTS (trofeos dorados, no verde)
   ============================================================ */
.ach-cat-section .ach-cat-header {
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.ach-cat-grid { gap: 6px; }
.ach-cat-grid .achievement-card {
  border-radius: 8px;
  border-top: 3px solid rgba(80,80,100,.4);
  padding: 14px 10px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.ach-cat-grid .achievement-card.unlocked {
  border-top-color: var(--gold);
  border-color: rgba(249,226,175,.2);
  background: linear-gradient(180deg, rgba(249,226,175,.07) 0%, var(--card) 45%);
  box-shadow: 0 4px 20px rgba(249,226,175,.1);
}
.ach-cat-grid .achievement-card.unlocked:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(249,226,175,.2);
}
.ach-cat-grid .achievement-card.locked {
  opacity: .3;
  filter: saturate(0);
}
.ach-cat-grid .achievement-icon { font-size: 28px; line-height: 1; }
.ach-cat-grid .achievement-name {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .04em;
}
.ach-cat-grid .achievement-desc { font-size: 10px; line-height: 1.4; }

/* ============================================================
   RPG REDESIGN — PETS (bestiario, entradas de criatura)
   ============================================================ */
#petsView .pets-section-title {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin: 20px 0 12px;
}
#petsView .pet-card {
  border-radius: 8px;
  border-top: 3px solid rgba(80,80,100,.4);
}
#petsView .pet-card:hover {
  border-top-color: var(--gold);
  box-shadow: 0 4px 24px rgba(249,226,175,.12);
}
#petsView .pet-card.pet-card-active {
  border-top-color: var(--accent2);
  box-shadow: 0 4px 24px rgba(203,166,247,.2);
}
#petsView .pet-card-name {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .04em;
}

/* ============================================================
   RPG REDESIGN — GOALS (tablero de campaña, barras áureas)
   ============================================================ */
.goals-grid .goal-card {
  border-radius: 8px;
  border-top: 3px solid rgba(249,226,175,.25);
}
.goals-grid .goal-card:not(.goal-done):hover {
  border-top-color: var(--gold);
}
.goals-grid .goal-card.goal-done {
  border-top-color: rgba(74,222,128,.4);
}
.goals-grid .goal-progress-bg   { background: rgba(249,226,175,.08); }
.goals-grid .goal-progress-fill { background: linear-gradient(90deg, var(--gold), rgba(249,226,175,.65)); }
.goals-grid .goal-progress-label { color: var(--gold); }
.goals-grid .goal-card-date.goal-overdue { font-weight: 700; }

/* ============================================================
   RPG REDESIGN — ZONES (mapa de territorios, sin franjas)
   ============================================================ */
.zones-grid .zone-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--zc);
  border-radius: 8px;
}
.zones-grid .zone-card:hover {
  border-top-color: var(--zc);
  border-color: color-mix(in srgb, var(--zc) 25%, var(--border));
  box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 12px color-mix(in srgb, var(--zc) 15%, transparent);
  transform: translateY(-2px);
}
.zones-grid .zone-name {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .04em;
}
.zones-grid .zone-bar-fill {
  background: var(--zc);
  box-shadow: 0 0 6px color-mix(in srgb, var(--zc) 60%, transparent);
}
.zones-grid .zone-rank-lbl {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: .04em;
}
.zones-grid .zone-bonus-chip {
  border: 1px solid color-mix(in srgb, var(--zc) 50%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   BOSS BATTLE — Sistema de combate tipo Pokémon
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay base ─────────────────────────────────────────── */
.bb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
}
.bb-overlay.bb-open { display: flex; }

.bb-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  filter: blur(6px) brightness(.35) saturate(.7);
  z-index: 0;
  pointer-events: none;
}

/* ── Arena ────────────────────────────────────────────────── */
.bb-arena {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────── */
.bb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  flex-shrink: 0;
}
.bb-close {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text2);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.bb-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.bb-speed-btn { min-width:38px; height:27px; padding:0 7px; border:1px solid rgba(188,122,232,.58); border-radius:4px; background:rgba(57,25,80,.86); color:#ead8fa; font-family:var(--font-head); font-size:10px; font-weight:700; cursor:pointer; }
.bb-speed-btn:hover { border-color:#d5a3ff; background:rgba(100,47,137,.92); }
.bb-cycle-badge {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid transparent;
}

/* ── Campo de batalla (grid 2x2 estilo Pokemon) ───────────── */
.bb-field {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "boss-info boss-sprite"
    "pet-sprite pet-info";
  padding: 0 10px;
  gap: 6px;
  min-height: 0;
}

/* Info boxes: glass cards compactos, pegados a los bordes exteriores */
.bb-boss-info {
  grid-area: boss-info;
  align-self: start;        /* solo ocupa el espacio de su contenido */
  display: flex;
  flex-direction: column;
  padding: 10px 12px 11px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  margin: 10px 0 0 0;
}
.bb-boss-sprite {
  grid-area: boss-sprite;
  display: flex;
  align-items: flex-end;    /* sprite sentado en el suelo de su celda */
  justify-content: center;
  padding-bottom: 4px;
}
.bb-pet-sprite {
  grid-area: pet-sprite;
  display: flex;
  align-items: flex-end;    /* emoji sentado en el suelo de su celda */
  justify-content: center;
  padding-bottom: 4px;
}
.bb-pet-info {
  grid-area: pet-info;
  align-self: end;          /* solo ocupa el espacio de su contenido, pegado abajo */
  display: flex;
  flex-direction: column;
  padding: 10px 12px 11px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  margin: 0 0 10px 0;
}

/* Nombres y chips */
.bb-entity-name {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-rarity-chip, .bb-level-chip {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  margin-bottom: 7px;
  opacity: .9;
  width: fit-content;
}
.bb-level-chip {
  border-color: rgba(255,255,255,.2);
  color: var(--text2);
}

/* Barras de HP */
.bb-hp-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.bb-hp-lbl {
  font-size: 8px;
  font-weight: 900;
  color: var(--text3);
  letter-spacing: .1em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.bb-hp-track {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,.22);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.bb-hp-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .55s cubic-bezier(.4,0,.2,1);
}
.bb-hp-val { font-size: 9px; color: var(--text3); flex-shrink: 0; min-width: 44px; text-align: right; }
.bb-stat-row { font-size: 9px; color: var(--text3); margin-top: 5px; letter-spacing: .02em; }
.bb-status-row { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.bb-status-tag {
  font-size: 9px; font-weight:600; padding:2px 7px; border-radius:10px;
  background: rgba(148,163,184,.15); color: var(--text2);
}
.bb-status-burn { background: rgba(248,113,113,.18); color:#f87171; }
.bb-status-para { background: rgba(250,204,21,.18); color:#facc15; }
.bb-move-pp { position:absolute; bottom:6px; left:8px; font-size:9px; color:var(--text3); }

/* Sprites */
.bb-boss-img {
  width: auto;
  max-height: 230px;
  max-width: 230px;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.8));
  display: block;
}
.bb-pet-img {
  width: auto;
  max-height: 210px;
  max-width: 210px;
  object-fit: contain;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.75));
  display: block;
  image-rendering: pixelated;
}
/* Emoji fallback: oculto por defecto, JS lo muestra vía onerror */
.bb-sprite-emoji {
  font-size: 110px;
  line-height: 1;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
.bb-pet-emoji {
  font-size: 155px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.7));
  transition: transform .15s cubic-bezier(.4,0,.2,1);
  position: relative;
}
/* Sombra de plataforma bajo la mascota */
.bb-pet-emoji::after {
  content: '';
  display: block;
  width: 80px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, transparent 70%);
  margin: -4px auto 0;
  border-radius: 50%;
}

/* Boss hit shake */
@keyframes bb-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px) rotate(-2deg); }
  40%      { transform: translateX(8px) rotate(2deg); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
.bb-boss-sprite.bb-hit { animation: bb-shake .35s cubic-bezier(.4,0,.2,1) both; }

/* ── Panel de movimientos ──────────────────────────────────── */
.bb-move-panel {
  flex-shrink: 0;
  background: rgba(6,6,18,.88);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px 12px;
}

/* Selector de mascotas */
.bb-pet-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bb-pet-chips::-webkit-scrollbar { display: none; }
.bb-pet-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.bb-pet-chip:hover  { background: rgba(255,255,255,.1); }
.bb-pet-chip.active { background: rgba(137,180,250,.15); border-color: rgba(137,180,250,.4); color: var(--accent); }
.bb-pet-chip.bb-pet-chip-resting { opacity: .45; cursor: default; }

/* Grid de movimientos (2x2) */
.bb-moves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bb-move-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, transform .1s;
  position: relative;
  align-items: center;
}
.bb-move-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.bb-move-btn:active:not(:disabled) { transform: scale(.97); }
.bb-move-btn:disabled { opacity: .45; cursor: default; }
.bb-move-btn.bb-move-locked {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  color: var(--text3);
}
.bb-move-btn.bb-move-exhausted {
  background: rgba(248,113,113,.06);
  border-color: rgba(248,113,113,.2);
}
.bb-move-icon {
  font-size: 22px;
  line-height: 1;
  grid-row: 1 / 3;
}
.bb-move-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  grid-row: 1 / 3;
}
.bb-move-name { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.2; }
.bb-move-type {
  font-size: 9px;
  letter-spacing: .04em;
  font-weight: 600;
  opacity: .85;
}
.bb-move-dmg {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  color: #fca5a5;
  font-weight: 700;
  opacity: .8;
}

/* Colores por tipo */
.bb-type-elemental  { color: #60a5fa; }
.bb-type-especial   { color: var(--gold); }
.bb-type-oscuro     { color: #c084fc; }
.bb-type-fuego      { color: #fb923c; }
.bb-type-electrico  { color: #facc15; }
.bb-type-magico     { color: #a78bfa; }
.bb-type-aereo      { color: #67e8f9; }
.bb-type-cataclismo { color: #f43f5e; }

/* Contador de ataques */
.bb-attacks-counter {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text3);
  text-align: center;
}
.bb-attacks-counter.exhausted { color: #f87171; }
.bb-attacks-counter span { opacity: .6; }

/* Mensaje sin mascota */
.bb-no-pet-msg {
  text-align: center;
  padding: 16px;
  color: var(--text3);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Flotador de dano ─────────────────────────────────────── */
.bb-dmg-float {
  position: fixed;
  z-index: 9010;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: #f87171;
  text-shadow: 0 0 12px rgba(248,113,113,.5), 0 2px 4px rgba(0,0,0,.8);
  pointer-events: none;
  opacity: 0;
  width: 60px;
  text-align: center;
}
@keyframes bb-float-up {
  0%   { opacity: 1;   transform: translateY(0) scale(1.2); }
  30%  { opacity: 1;   transform: translateY(-18px) scale(1); }
  100% { opacity: 0;   transform: translateY(-48px) scale(.8); }
}
.bb-dmg-float.bb-dmg-active { animation: bb-float-up .85s cubic-bezier(.4,0,.2,1) both; }
.bb-dmg-float.bb-heal-float { color: #4ade80; text-shadow: 0 0 12px rgba(74,222,128,.5), 0 2px 4px rgba(0,0,0,.8); }

.bb-move-btn.bb-hero-skill {
  border-color: rgba(250,204,21,.35);
  background: linear-gradient(135deg, rgba(250,204,21,.08), rgba(250,204,21,.02));
}
.bb-move-btn.bb-battle-potion {
  border-color: rgba(74,222,128,.35);
  background: linear-gradient(135deg, rgba(74,222,128,.08), rgba(74,222,128,.02));
}

/* Battle arena v2: visual rhythm, readable turns and tactical cards */
.bb-overlay { background:#05030b; }
.bb-bg { filter:blur(1px) brightness(.52) saturate(1.15); transform:scale(1.025); }
.bb-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%,transparent 12%,rgba(4,2,12,.15) 48%,rgba(2,1,7,.74) 100%),linear-gradient(180deg,rgba(17,5,37,.22),transparent 45%); }
.bb-arena { max-width:1040px; padding:10px 14px 16px; box-sizing:border-box; }
.bb-arena::before { content:''; position:absolute; z-index:-1; left:50%; top:47%; width:70%; height:31%; transform:translate(-50%,-50%) perspective(420px) rotateX(58deg); border:1px solid rgba(196,181,253,.2); border-radius:50%; background:radial-gradient(ellipse,rgba(139,92,246,.2),transparent 65%); box-shadow:0 0 90px rgba(124,58,237,.28),inset 0 0 60px rgba(168,85,247,.15); }
.bb-arena-enraged::before { border-color:rgba(251,113,133,.45); background:radial-gradient(ellipse,rgba(244,63,94,.23),transparent 68%); box-shadow:0 0 100px rgba(244,63,94,.33); animation:bbArenaPulse 1.3s ease-in-out infinite; }
.bb-header { position:relative; z-index:2; padding:0 2px 6px; }
.bb-turn-banner { position:relative; z-index:3; align-self:center; display:flex; align-items:center; gap:9px; min-height:30px; padding:0 13px; border-radius:999px; background:rgba(7,5,17,.76); border:1px solid rgba(255,255,255,.14); box-shadow:0 7px 22px rgba(0,0,0,.32); font-size:10px; color:var(--text2); backdrop-filter:blur(12px); }
.bb-turn-banner strong { font-size:10px; letter-spacing:.09em; color:#f5f3ff; }
.bb-turn-pip { width:7px; height:7px; border-radius:50%; background:#7dd3fc; box-shadow:0 0 12px #7dd3fc; }
.bb-turn-boss .bb-turn-pip { background:#fb7185; box-shadow:0 0 12px #fb7185; }
.bb-field { position:relative; z-index:1; grid-template-columns:1fr 1.1fr; grid-template-rows:1fr 1fr; gap:0 34px; padding:0 30px; }
.bb-boss-info,.bb-pet-info { max-width:330px; border-color:rgba(216,180,254,.24); box-shadow:0 12px 30px rgba(0,0,0,.34); background:linear-gradient(135deg,rgba(13,8,29,.9),rgba(5,4,13,.72)); }
.bb-boss-info { align-self:start; margin-top:16px; }
.bb-pet-info { justify-self:end; align-self:end; margin-bottom:12px; }
.bb-boss-sprite,.bb-pet-sprite { position:relative; isolation:isolate; }
.bb-boss-sprite::after,.bb-pet-sprite::after { content:''; position:absolute; z-index:-1; bottom:4px; width:76%; height:24px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 70%); }
.bb-boss-img { max-width:300px; max-height:280px; animation:bbEnemyIdle 3.4s ease-in-out infinite; }
.bb-pet-img,.bb-pet-emoji { max-width:270px; max-height:245px; animation:bbPetIdle 2.8s ease-in-out infinite; }
.bb-hp-track { height:12px; border:1px solid rgba(255,255,255,.12); }
.bb-hp-fill { box-shadow:0 0 14px currentColor; }
.bb-move-panel { position:relative; z-index:4; width:min(760px,100%); align-self:center; margin-top:auto; border:1px solid rgba(196,181,253,.2); border-radius:16px; background:linear-gradient(145deg,rgba(12,8,28,.94),rgba(4,4,13,.92)); box-shadow:0 18px 46px rgba(0,0,0,.48); padding:12px; }
.bb-moves-grid { gap:9px; }
.bb-actions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.bb-actions-grid .bb-move-btn { width:100%; min-width:0; }
.bb-move-btn { min-height:68px; border-radius:12px; border-color:rgba(255,255,255,.12); background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.025)); }
.bb-move-btn:hover:not(:disabled) { transform:translateY(-3px) scale(1.015); border-color:rgba(216,180,254,.65); box-shadow:0 10px 22px rgba(0,0,0,.24),0 0 18px rgba(139,92,246,.15); }
.bb-move-super { border-color:rgba(74,222,128,.46); background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.03)); }
.bb-move-weak { opacity:.72; }
.bb-move-name { font-size:12px; }.bb-move-type { font-size:10px; }.bb-move-pp,.bb-move-dmg { font-size:10px; }
.bb-pet-info { position:absolute; right:5%; bottom:18px; z-index:3; width:min(340px,38%); margin:0; justify-self:auto; align-self:auto; }
.bb-pet-info .bb-hp-row { margin-top:7px; }.bb-pet-info .bb-stat-row { margin-top:7px; }
.bb-combat-vfx { position:fixed; inset:0; z-index:9008; pointer-events:none; overflow:hidden; }
.bb-vfx-burst { position:fixed; width:30px; height:30px; margin:-15px; border-radius:50%; border:3px solid #d8b4fe; box-shadow:0 0 26px 8px rgba(196,181,253,.72); animation:bbVfxBurst .62s ease-out both; }
.bb-vfx-fuego,.bb-vfx-especial { border-color:#fb923c; box-shadow:0 0 30px 10px rgba(251,146,60,.7); }.bb-vfx-elemental { border-color:#4ade80; box-shadow:0 0 30px 10px rgba(74,222,128,.7); }.bb-vfx-electrico { border-color:#fde047; box-shadow:0 0 30px 10px rgba(253,224,71,.7); }.bb-vfx-enemy { border-color:#fb7185; box-shadow:0 0 30px 10px rgba(251,113,133,.7); }
@keyframes bbEnemyIdle { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px) scale(1.015)} }
@keyframes bbPetIdle { 0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1deg)} }
@keyframes bbVfxBurst { 0%{opacity:1;transform:scale(.15)}70%{opacity:.85}100%{opacity:0;transform:scale(5)} }
@keyframes bbArenaPulse { 50%{filter:brightness(1.22)} }

/* Piel de grimorio: la batalla pertenece a ArcANUM, no a una consola sci-fi. */
.bb-overlay { background:#120d08; }
.bb-bg { filter:blur(.7px) brightness(.48) saturate(.88) sepia(.12); }
.bb-bg::after { background:radial-gradient(ellipse at 50% 58%,transparent 8%,rgba(17,10,5,.2) 42%,rgba(8,5,3,.78) 100%),linear-gradient(180deg,rgba(91,53,19,.18),transparent 48%); }
.bb-arena::before { width:62%; height:42%; border:1px solid rgba(191,138,62,.34); border-radius:8px; background:repeating-radial-gradient(ellipse,rgba(113,68,26,.11) 0 1px,transparent 2px 26px),radial-gradient(ellipse,rgba(84,40,102,.22),transparent 67%); box-shadow:inset 0 0 65px rgba(31,14,5,.72),0 0 44px rgba(91,45,16,.28); }
.bb-arena-enraged::before { border-color:rgba(183,64,35,.58); background:repeating-radial-gradient(ellipse,rgba(151,48,26,.14) 0 1px,transparent 2px 26px),radial-gradient(ellipse,rgba(120,29,24,.27),transparent 67%); box-shadow:inset 0 0 65px rgba(47,10,6,.78),0 0 44px rgba(151,48,26,.25); }
.bb-turn-banner { min-height:28px; border-radius:4px; border-color:rgba(193,145,71,.54); background:linear-gradient(90deg,rgba(28,16,8,.94),rgba(73,42,18,.88),rgba(28,16,8,.94)); box-shadow:inset 0 1px rgba(255,227,160,.12),0 4px 14px rgba(0,0,0,.48); font-family:var(--font-head); text-transform:uppercase; }
.bb-turn-banner::before,.bb-turn-banner::after { content:'✦'; color:#c89344; font-size:8px; }
.bb-turn-banner strong { color:#f2d49a; }
.bb-turn-pip { background:#d8a449; box-shadow:0 0 8px rgba(216,164,73,.7); }
.bb-turn-boss .bb-turn-pip { background:#bd5638; box-shadow:0 0 8px rgba(189,86,56,.7); }
.bb-boss-info,.bb-pet-info { border:1px solid rgba(183,133,64,.52); border-radius:5px; background:linear-gradient(135deg,rgba(37,24,14,.96),rgba(13,9,7,.94)); box-shadow:inset 0 0 0 1px rgba(255,218,140,.06),0 9px 20px rgba(0,0,0,.48); }
.bb-entity-name { color:#f1d6a3; font-family:var(--font-head); letter-spacing:.045em; text-shadow:1px 1px 0 #170c05,0 0 8px rgba(201,145,67,.15); }
.bb-rarity-chip,.bb-level-chip { border-radius:2px; border-color:rgba(203,157,84,.58); background:rgba(95,56,22,.26); color:#ddbd7c; }
.bb-hp-track { border-color:rgba(171,123,56,.45); border-radius:2px; background:#24170d; box-shadow:inset 0 1px 3px rgba(0,0,0,.72); }
.bb-hp-fill { border-radius:1px; box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 7px currentColor; }
.bb-move-panel { border:2px solid rgba(160,111,51,.74); border-radius:6px; background:linear-gradient(135deg,rgba(50,31,17,.98),rgba(20,13,9,.98)); box-shadow:inset 0 0 0 1px rgba(245,210,138,.1),0 16px 34px rgba(0,0,0,.55); padding:11px; }
.bb-pet-chips { padding-bottom:7px; border-bottom:1px solid rgba(174,126,62,.28); }
.bb-pet-chip { border-radius:3px; border-color:rgba(164,118,58,.38); background:linear-gradient(180deg,rgba(86,52,24,.72),rgba(32,20,12,.82)); color:#d6bd90; font-family:var(--font-head); }
.bb-pet-chip.active { background:linear-gradient(180deg,rgba(119,72,28,.9),rgba(57,31,14,.95)); border-color:#d0a052; color:#ffe0a0; box-shadow:inset 0 1px rgba(255,234,171,.18); }
.bb-move-btn { border-radius:4px; border-color:rgba(153,106,50,.5); background:linear-gradient(135deg,rgba(77,47,23,.76),rgba(29,18,12,.94)); box-shadow:inset 0 1px rgba(255,224,160,.07); }
.bb-move-btn:hover:not(:disabled) { border-color:#d1a355; background:linear-gradient(135deg,rgba(115,70,30,.9),rgba(45,27,14,.97)); box-shadow:inset 0 1px rgba(255,231,166,.16),0 5px 13px rgba(0,0,0,.34); }
.bb-move-name { color:#f2d8a6; font-family:var(--font-head); letter-spacing:.025em; }.bb-move-type,.bb-move-pp { color:#c2a878; }.bb-move-dmg { color:#df9878; }
.bb-move-btn.bb-hero-skill { border-color:rgba(205,160,55,.7); background:linear-gradient(135deg,rgba(108,74,20,.82),rgba(45,27,9,.96)); }
.bb-move-btn.bb-battle-potion { border-color:rgba(77,137,79,.67); background:linear-gradient(135deg,rgba(37,77,40,.78),rgba(13,35,18,.96)); }

/* Combate vivo: intención, crónica, impacto y fases legibles. */
.bb-boss-intent { display:flex; align-items:center; gap:6px; margin:0 0 7px; padding:4px 6px; border-left:2px solid rgba(192,132,252,.8); background:rgba(78,34,109,.28); color:#d9c0ef; font-size:9px; line-height:1.25; }
.bb-arena[data-phase="final"] .bb-boss-sprite { filter:drop-shadow(0 0 14px rgba(239,68,68,.55)); }
.bb-arena[data-phase="final"] .bb-boss-info { border-color:rgba(239,68,68,.68); }
.bb-battle-log { position:fixed; left:calc(50% + 355px); top:300px; z-index:9005; width:min(230px,calc(50vw - 370px)); padding:8px 9px; border:1px solid rgba(165,91,211,.44); border-radius:5px; background:linear-gradient(135deg,rgba(28,13,43,.88),rgba(14,8,23,.9)); box-shadow:inset 0 0 0 1px rgba(232,202,255,.05),0 8px 20px rgba(0,0,0,.34); color:#cdb8dd; pointer-events:none; }
.bb-log-title { margin-bottom:5px; color:#e8d7f8; font-family:var(--font-head); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.bb-log-entry { display:grid; grid-template-columns:16px 1fr; gap:4px; padding:3px 0; border-top:1px solid rgba(202,160,235,.12); font-size:9px; line-height:1.25; }
.bb-log-entry.critical { color:#ffd782; }.bb-log-entry.heal { color:#95e8b0; }.bb-log-entry.enemy { color:#f7a0a0; }
.bb-combat-callout { position:fixed; z-index:9012; top:30%; left:50%; min-width:150px; padding:8px 14px; border:1px solid rgba(205,157,255,.75); background:linear-gradient(135deg,rgba(66,28,94,.95),rgba(26,11,42,.96)); color:#f0ddff; font-family:var(--font-head); font-size:14px; font-weight:800; letter-spacing:.08em; text-align:center; text-shadow:0 2px 0 rgba(0,0,0,.7); box-shadow:0 0 24px rgba(168,85,247,.34); opacity:0; transform:translate(-50%,-8px) scale(.92); pointer-events:none; transition:opacity .15s,transform .15s; }
.bb-combat-callout.bb-callout-show { opacity:1; transform:translate(-50%,0) scale(1); }
.bb-combat-callout.critical { border-color:#ffd16a; color:#ffe3a0; background:linear-gradient(135deg,rgba(117,70,20,.96),rgba(57,25,57,.96)); }.bb-combat-callout.super { border-color:#81e2a0; color:#c4ffd4; }.bb-combat-callout.weak { border-color:#ce9191; color:#ffc0c0; }.bb-combat-callout.heal { border-color:#70c98c; color:#c7ffdc; }.bb-combat-callout.enemy { border-color:#d46d74; color:#ffd0d2; }
.bb-victory-chest { font-size:52px; line-height:1; filter:drop-shadow(0 8px 10px rgba(0,0,0,.58)); animation:bbChestPulse 1.5s ease-in-out infinite; }
.bb-victory-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:310px; color:#d9c2e9; font-size:10px; }
.bb-victory-summary span { padding:4px 6px; border:1px solid rgba(191,125,232,.35); background:rgba(84,38,112,.3); }
.bb-vfx-fuego::after,.bb-vfx-electrico::after,.bb-vfx-oscuro::after,.bb-vfx-elemental::after,.bb-vfx-especial::after { content:'✦'; position:absolute; inset:-22px; display:grid; place-items:center; font-size:42px; color:inherit; opacity:.82; animation:bbVfxGlyph .62s ease-out both; }
.bb-vfx-fuego::after { content:'🔥'; }.bb-vfx-electrico::after { content:'⚡'; }.bb-vfx-oscuro::after { content:'☾'; }.bb-vfx-elemental::after { content:'✿'; }.bb-vfx-especial::after { content:'✦'; }
@keyframes bbVfxGlyph { from { transform:scale(.25) rotate(-18deg); opacity:1; } to { transform:scale(1.8) rotate(18deg); opacity:0; } }
@media (max-width: 1180px) { .bb-battle-log { display:none; } }
@media (max-width: 680px) { .bb-combat-callout { top:25%; font-size:12px; } }
@keyframes bbChestPulse { 50% { transform:translateY(-4px) scale(1.04); filter:drop-shadow(0 0 12px rgba(250,204,21,.42)); } }

/* Amatista ArcANUM: magia morada, con piedra y bronce como marco. */
.bb-bg::after { background:radial-gradient(ellipse at 50% 58%,rgba(92,39,126,.2),transparent 40%,rgba(8,5,3,.78) 100%),linear-gradient(180deg,rgba(104,45,135,.22),transparent 48%); }
.bb-arena::before { border-color:rgba(178,104,224,.5); background:repeating-radial-gradient(ellipse,rgba(195,119,243,.2) 0 1px,transparent 2px 26px),radial-gradient(ellipse,rgba(103,42,142,.36),transparent 67%); box-shadow:inset 0 0 65px rgba(31,14,54,.7),0 0 48px rgba(147,51,234,.34); }
.bb-turn-banner { border-color:rgba(187,123,239,.68); background:linear-gradient(90deg,rgba(28,13,43,.96),rgba(83,37,108,.9),rgba(28,13,43,.96)); }
.bb-turn-banner::before,.bb-turn-banner::after,.bb-turn-pip { color:#d8a4ff; background:#c084fc; box-shadow:0 0 9px rgba(192,132,252,.78); }
.bb-turn-banner::before,.bb-turn-banner::after { background:transparent; }
.bb-turn-banner strong { color:#ead5ff; }
.bb-boss-info,.bb-pet-info { border-color:rgba(178,104,224,.56); background:linear-gradient(135deg,rgba(43,22,62,.96),rgba(15,8,25,.95)); box-shadow:inset 0 0 0 1px rgba(227,194,255,.08),0 9px 20px rgba(0,0,0,.48); }
.bb-entity-name { color:#edd9ff; text-shadow:1px 1px 0 #170c24,0 0 9px rgba(192,132,252,.28); }
.bb-rarity-chip,.bb-level-chip { border-color:rgba(190,129,235,.62); background:rgba(112,53,146,.3); color:#dfc1ff; }
.bb-hp-track { border-color:rgba(159,88,207,.5); background:#24122f; }
.bb-move-panel { border-color:rgba(165,91,211,.78); background:linear-gradient(135deg,rgba(47,23,67,.98),rgba(19,10,30,.98)); box-shadow:inset 0 0 0 1px rgba(231,201,255,.1),0 16px 34px rgba(0,0,0,.55),0 0 22px rgba(126,34,206,.14); }
.bb-pet-chips { border-bottom-color:rgba(172,102,217,.34); }
.bb-pet-chip { border-color:rgba(165,96,209,.48); background:linear-gradient(180deg,rgba(82,41,111,.78),rgba(30,15,45,.9)); color:#dac0ef; }
.bb-pet-chip.active { background:linear-gradient(180deg,rgba(130,62,172,.94),rgba(55,25,80,.98)); border-color:#d19aff; color:#f3e4ff; box-shadow:inset 0 1px rgba(255,235,255,.2),0 0 11px rgba(192,132,252,.24); }
.bb-move-btn { border-color:rgba(150,82,193,.58); background:linear-gradient(135deg,rgba(72,36,96,.83),rgba(26,13,40,.95)); }
.bb-move-btn:hover:not(:disabled) { border-color:#d29aff; background:linear-gradient(135deg,rgba(112,54,146,.94),rgba(43,21,64,.98)); box-shadow:inset 0 1px rgba(255,225,255,.15),0 5px 13px rgba(0,0,0,.34),0 0 14px rgba(168,85,247,.2); }
.bb-move-name { color:#eedcff; }.bb-move-type,.bb-move-pp { color:#cdb2e5; }

/* ── Responsive mobile ────────────────────────────────────── */
@media (max-width: 480px) {
  .bb-boss-img     { max-height: 175px; max-width: 175px; }
  .bb-sprite-emoji { font-size: 100px; }
  .bb-pet-emoji    { font-size: 120px; }
  .bb-entity-name  { font-size: 12px; }
  .bb-boss-info, .bb-pet-info { padding: 8px 10px 9px; border-radius: 10px; margin-top: 8px; margin-bottom: 8px; }
  .bb-hp-track     { height: 9px; }
  .bb-moves-grid   { gap: 5px; }
  .bb-move-btn     { padding: 7px 8px; }
  .bb-move-name    { font-size: 10px; }
  .bb-field        { padding: 0 8px; gap: 5px; }
  .bb-pet-info { position:relative; right:auto; bottom:auto; width:auto; margin:0 0 8px; }
  .bb-actions-grid { gap:6px; }
}

/* ── Badge de ataques en boss cards ───────────────────────── */
.bcard-attacks {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .02em;
}
.bcard-attacks.low      { color: #facc15; }
.bcard-attacks.exhausted { color: #f87171; }

/* ── Animaciones de entrada al abrir batalla ─────────────── */
@keyframes bb-slide-in-right {
  from { transform: translateX(48px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes bb-slide-in-left {
  from { transform: translateX(-48px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes bb-fade-in-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.anim-bb-entering .bb-boss-sprite {
  animation: bb-slide-in-right 0.40s cubic-bezier(0.23,1,0.32,1) both;
}
.anim-bb-entering .bb-boss-info {
  animation: bb-slide-in-left 0.38s cubic-bezier(0.23,1,0.32,1) 0.06s both;
}
.anim-bb-entering .bb-pet-sprite {
  animation: bb-slide-in-left 0.40s cubic-bezier(0.23,1,0.32,1) 0.12s both;
}
.anim-bb-entering .bb-pet-info {
  animation: bb-slide-in-right 0.38s cubic-bezier(0.23,1,0.32,1) 0.18s both;
}
.anim-bb-entering .bb-move-panel {
  animation: bb-fade-in-up 0.32s cubic-bezier(0.23,1,0.32,1) 0.22s both;
}
@media (prefers-reduced-motion: reduce) {
  .anim-bb-entering .bb-boss-sprite,
  .anim-bb-entering .bb-boss-info,
  .anim-bb-entering .bb-pet-sprite,
  .anim-bb-entering .bb-pet-info,
  .anim-bb-entering .bb-move-panel { animation: none; }
}

/* ── Pantalla de Victoria ──────────────────────────────────── */
.bb-victory-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(250,204,21,.18) 0%, rgba(6,6,18,.97) 70%);
  backdrop-filter: blur(8px);
}
.bb-victory-content {
  position: relative;
  text-align: center;
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  width: 90%;
}
.bb-victory-sparks {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
}
.bb-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: bb-spark-fly 1.4s ease-out both infinite;
}
@keyframes bb-spark-fly {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  60%  { opacity: .8; }
  100% { transform: translateY(-55px) scale(.3); opacity: 0; }
}
.bb-victory-title {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #facc15;
  text-shadow: 0 0 32px rgba(250,204,21,.7), 0 2px 8px rgba(0,0,0,.8);
  line-height: 1;
}
.bb-victory-boss-name {
  font-size: 15px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .02em;
}
.bb-victory-rewards {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 0 4px;
  width: 100%;
}
.bb-vr-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.bb-vr-gold { color: #facc15; border-color: rgba(250,204,21,.25); background: rgba(250,204,21,.08); }
.bb-vr-xp   { color: #60a5fa; border-color: rgba(96,165,250,.25); background: rgba(96,165,250,.08); }
.bb-vr-rune { color: #c084fc; border-color: rgba(192,132,252,.25); background: rgba(192,132,252,.08); }
.bb-victory-btn {
  margin-top: 6px;
  padding: 12px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #facc15, #fb923c);
  color: #0c0c18;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(250,204,21,.35);
}
.bb-victory-btn:active { transform: scale(.97); }
.bb-victory-btn:hover  { box-shadow: 0 6px 28px rgba(250,204,21,.5); }

/* Bóveda del aventurero — inventario unificado. */
.vault-shell { max-width:1120px; margin:0 auto; padding:4px 0 34px; }
.vault-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; border:1px solid rgba(172,103,217,.55); border-radius:10px; background:radial-gradient(circle at 87% 18%,rgba(155,77,216,.25),transparent 32%),linear-gradient(135deg,rgba(46,21,67,.97),rgba(15,8,26,.98)); box-shadow:inset 0 0 0 1px rgba(232,205,255,.06),0 14px 32px rgba(0,0,0,.32); }
.vault-kicker { margin:0 0 5px; color:#ca9df1; font:700 10px var(--font-head); letter-spacing:.15em; text-transform:uppercase; }
.vault-header h3 { margin:0; color:#f2ddff; font:700 26px var(--font-head); letter-spacing:.025em; }
.vault-header > div > span { display:block; margin-top:5px; color:#b9a2c8; font-size:11px; }
.vault-resonance { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; width:max-content; max-width:100%; margin-top:10px; padding:5px 8px; border:1px solid color-mix(in srgb,var(--res) 55%,transparent); border-radius:7px; background:color-mix(in srgb,var(--res) 10%,transparent); color:#e9dcf4; font-size:10px; }.vault-resonance b { color:var(--res); font:700 10px var(--font-head); text-transform:uppercase; }.vault-resonance span { margin:0!important; color:#c9b8d5!important; font-size:9px!important; }.vault-resonance.is-dormant { --res:#89749e; }
.vault-gold { display:grid; grid-template-columns:auto auto; grid-template-rows:1fr 1fr; column-gap:8px; align-items:center; min-width:130px; padding:8px 12px; border-left:1px solid rgba(203,145,240,.34); }
.vault-gold > span { grid-row:1 / 3; font-size:28px; }.vault-gold strong { color:#ffd66e; font:800 21px var(--font-head); }.vault-gold small { color:#c6a96d; text-transform:uppercase; font-size:9px; letter-spacing:.12em; }
.vault-tabs { display:flex; gap:7px; overflow-x:auto; padding:14px 2px; scrollbar-width:none; }.vault-tabs::-webkit-scrollbar { display:none; }
.vault-tab { display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:8px 11px; border:1px solid rgba(143,83,187,.35); border-radius:5px; background:rgba(31,15,46,.72); color:#bdaccb; font:700 11px var(--font-head); cursor:pointer; transition:.16s ease; }
.vault-tab b { display:grid; place-items:center; min-width:17px; height:17px; border-radius:9px; background:rgba(255,255,255,.09); color:#e8d8f4; font-size:9px; }.vault-tab:hover,.vault-tab.active { border-color:#d59aff; color:#f3e4ff; background:linear-gradient(135deg,rgba(125,57,164,.72),rgba(54,23,80,.92)); box-shadow:0 0 13px rgba(168,85,247,.18); }
.vault-section { margin-top:8px; padding:16px; border:1px solid rgba(144,83,187,.28); border-radius:8px; background:linear-gradient(145deg,rgba(25,12,39,.9),rgba(12,7,21,.94)); }.vault-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }.vault-section-head > div { display:flex; align-items:center; gap:7px; }.vault-section-head > div > span { color:#cf98ff; }.vault-section h4 { margin:0; color:#ead8f6; font:700 14px var(--font-head); letter-spacing:.04em; }.vault-link { border:0; background:transparent; color:#c99bf0; font-size:11px; cursor:pointer; }.vault-link:hover { color:#f0d9ff; text-decoration:underline; }
.vault-gear-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:10px; }.vault-gear-card { display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; min-height:86px; padding:10px; border:1px solid rgba(255,255,255,.08); border-left:3px solid var(--vault-tier); border-radius:6px; background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(0,0,0,.13)); }.vault-gear-card.is-equipped { background:linear-gradient(135deg,color-mix(in srgb,var(--vault-tier) 18%,rgba(40,18,59,.92)),rgba(17,8,27,.96)); box-shadow:inset 0 0 18px color-mix(in srgb,var(--vault-tier) 10%,transparent); }.vault-gear-card.is-forging { opacity:.62; }
.vault-gear-art { display:grid; place-items:center; width:52px; height:58px; border:1px solid color-mix(in srgb,var(--vault-tier) 40%,transparent); border-radius:4px; background:rgba(0,0,0,.22); }.vault-gear-art img { width:80%; height:80%; object-fit:contain; }.vault-gear-art span { place-items:center; font-size:25px; }.vault-gear-info { min-width:0; }.vault-gear-top { display:flex; gap:6px; align-items:center; }.vault-gear-name { overflow:hidden; color:#f0e1fa; font:700 12px var(--font-head); text-overflow:ellipsis; white-space:nowrap; }.vault-tier { flex:0 0 auto; padding:2px 5px; border:1px solid color-mix(in srgb,var(--vault-tier) 55%,transparent); color:var(--vault-tier); font-size:8px; text-transform:uppercase; }.vault-gear-meta,.vault-gear-effect { margin-top:3px; color:#a996b9; font-size:10px; }.vault-gear-effect { color:#c9b0de; }.vault-sockets { display:flex; gap:3px; margin-top:5px; }.vault-sockets span { display:grid; place-items:center; width:16px; height:16px; border:1px solid #40344d; color:#625271; font-size:10px; }.vault-sockets span.filled { border-color:var(--rune); color:var(--rune); background:color-mix(in srgb,var(--rune) 15%,transparent); }.vault-sockets em { color:#776485; font-size:9px; font-style:normal; }.vault-gear-action { padding:6px 8px; border:1px solid color-mix(in srgb,var(--vault-tier) 52%,transparent); border-radius:4px; background:rgba(0,0,0,.22); color:#e6d1f7; font:700 10px var(--font-head); cursor:pointer; }.vault-gear-action:hover:not(:disabled) { background:color-mix(in srgb,var(--vault-tier) 20%,transparent); }.vault-gear-action:disabled { cursor:default; }
.vault-bag { margin-top:12px; border-top:1px solid rgba(191,127,232,.18); padding-top:10px; }.vault-bag summary { color:#b99acf; font-size:11px; cursor:pointer; }.vault-bag summary b { color:#e1c7f5; }.vault-bag .vault-gear-grid { margin-top:10px; }
.vault-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:9px; }.vault-item-card { position:relative; display:flex; min-height:154px; flex-direction:column; align-items:center; justify-content:center; padding:11px 8px 8px; overflow:hidden; border:1px solid color-mix(in srgb,var(--vault-item) 38%,rgba(255,255,255,.08)); border-radius:6px; background:linear-gradient(145deg,color-mix(in srgb,var(--vault-item) 12%,rgba(30,14,46,.95)),rgba(13,8,23,.96)); color:#e8daf3; cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s; }.vault-item-card:hover { z-index:1; border-color:var(--vault-item); box-shadow:0 8px 18px color-mix(in srgb,var(--vault-item) 18%,transparent); transform:translateY(-3px); }.vault-item-type { position:absolute; top:6px; left:6px; color:color-mix(in srgb,var(--vault-item) 78%,white); font-size:8px; letter-spacing:.07em; text-transform:uppercase; }.vault-item-img,.vault-item-fallback { width:59px; height:59px; object-fit:contain; margin:7px 0; }.vault-item-fallback { align-items:center; justify-content:center; font-size:31px; }.vault-item-qty { position:absolute; right:7px; top:7px; padding:2px 5px; border-radius:3px; background:rgba(6,3,13,.76); color:#fff; font:800 11px var(--font-head); }.vault-item-name { max-width:100%; overflow:hidden; color:#f0dffc; font:700 10px var(--font-head); text-overflow:ellipsis; white-space:nowrap; }.vault-item-hint { display:-webkit-box; min-height:24px; margin-top:4px; overflow:hidden; color:#a995b9; font-size:9px; line-height:1.2; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.vault-empty { display:grid; min-height:105px; place-items:center; padding:15px; border:1px dashed rgba(177,113,219,.35); color:#a994b8; font-size:12px; text-align:center; }
@media (max-width:620px) { .vault-header { padding:16px; }.vault-header h3 { font-size:21px; }.vault-gold { min-width:auto; padding:5px 0 5px 9px; }.vault-gold strong { font-size:17px; }.vault-section { padding:12px; }.vault-gear-grid { grid-template-columns:1fr; }.vault-item-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.vault-item-card { min-height:133px; }.vault-item-img,.vault-item-fallback { width:48px; height:48px; } }

/* Inventario: override final, sin piedra opaca ni gradientes heredados. */
#inventoryView { background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
#inventoryView .vault-shell { background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; }
#inventoryView .vault-header,#inventoryView .vault-section,#inventoryView .vault-tab,#inventoryView .vault-gear-card,#inventoryView .vault-item-card,#inventoryView .vault-gear-art,#inventoryView .vault-gear-action,#inventoryView .vault-empty { background:rgba(8,6,18,.055) !important; border-color:rgba(216,180,254,.18) !important; backdrop-filter:blur(2px) saturate(1.02) !important; -webkit-backdrop-filter:blur(2px) saturate(1.02) !important; box-shadow:inset 0 1px rgba(255,255,255,.08) !important; }
#inventoryView .vault-header { background:linear-gradient(135deg,rgba(20,12,36,.08),rgba(8,6,18,.025)) !important; }
#inventoryView .vault-tab.active,#inventoryView .vault-tab:hover { background:rgba(102,54,145,.16) !important; border-color:rgba(216,180,254,.55) !important; }
#inventoryView .vault-gear-card.is-equipped { background:rgba(40,22,62,.13) !important; }
#inventoryView .vault-item-card { background:linear-gradient(135deg,color-mix(in srgb,var(--vault-item) 8%,transparent),rgba(8,6,18,.045)) !important; }

/* Brújula del día: dirección clara antes de la lista de tareas. */
.adv-cycle { margin:0 0 14px; padding:14px; border:1px solid rgba(216,180,254,.30); border-radius:15px; background:rgba(10,7,22,.08); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-shadow:inset 0 1px rgba(255,255,255,.11); }
.adv-cycle-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.adv-cycle-head span { color:#d8b4fe; font:700 9px var(--font-head); letter-spacing:.14em; }.adv-cycle-head h3 { margin:3px 0 0; color:#f6f1ff; font:700 18px var(--font-head); }.adv-cycle-date { color:var(--text3); font-size:10px; text-transform:capitalize; }
.campaign-panel { display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:11px; align-items:center; margin:11px 0; padding:9px; border:1px solid rgba(192,132,252,.3); border-radius:11px; background:linear-gradient(135deg,rgba(56,27,85,.22),rgba(9,7,18,.05)); }.campaign-panel>img { width:92px; height:76px; object-fit:cover; border:1px solid rgba(216,180,254,.28); border-radius:7px; image-rendering:pixelated; }.campaign-panel p { margin:0 0 7px; color:#d8c6e7; font-size:10px; }.campaign-milestones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.campaign-mark { min-width:0; padding:5px; border:1px solid rgba(216,180,254,.15); border-radius:6px; color:#bba9c9; }.campaign-mark.is-done { border-color:rgba(110,231,183,.48); background:rgba(16,185,129,.08); }.campaign-mark b,.campaign-mark span,.campaign-mark small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.campaign-mark b { color:#e8dffa; font-size:9px; }.campaign-mark span { margin-top:2px; color:#c084fc; font-size:11px; font-weight:800; }.campaign-mark small { margin-top:2px; color:var(--text3); font-size:8px; }.campaign-claim,.campaign-complete,.campaign-bonus { padding:7px 9px; border:1px solid rgba(216,180,254,.45); border-radius:7px; background:rgba(124,58,237,.2); color:#f5f3ff; font:700 9px var(--font-head); text-align:center; }.campaign-claim { cursor:pointer; }.campaign-claim:hover { background:rgba(124,58,237,.38); }.campaign-complete { border-color:rgba(110,231,183,.45); color:#a7f3d0; }.campaign-bonus { color:#f5d56d; }
.adv-cycle-main { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; margin:11px 0 9px; padding:10px; border:1px solid rgba(196,132,252,.25); border-radius:11px; background:rgba(55,28,85,.11); }.adv-main-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(216,180,254,.45); border-radius:50%; background:rgba(124,58,237,.13); font-size:20px; }.adv-cycle-main span,.adv-cycle-main small { display:block; color:var(--text3); font-size:9px; }.adv-cycle-main b { display:block; overflow:hidden; margin:2px 0; color:#eee7f8; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.adv-cycle-main button { padding:7px 11px; border:1px solid rgba(216,180,254,.58); border-radius:8px; background:rgba(124,58,237,.18); color:#f5f3ff; font:700 10px var(--font-head); cursor:pointer; }.adv-cycle-main button:hover { background:rgba(124,58,237,.35); }
.adv-cycle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.adv-cycle-grid button { min-width:0; padding:8px; border:1px solid rgba(216,180,254,.16); border-radius:9px; background:rgba(10,8,22,.05); color:var(--text2); text-align:left; cursor:pointer; }.adv-cycle-grid button:hover { border-color:rgba(216,180,254,.48); background:rgba(82,45,118,.13); }.adv-cycle-grid span { display:block; font-size:15px; }.adv-cycle-grid b,.adv-cycle-grid small { display:block; overflow:hidden; margin-top:2px; text-overflow:ellipsis; white-space:nowrap; }.adv-cycle-grid b { color:#e9e2f4; font-size:10px; }.adv-cycle-grid small { color:var(--text3); font-size:8px; }.adv-quest-focus { outline:2px solid #d8b4fe; outline-offset:3px; animation:advFocus 1.4s ease-in-out; }@keyframes advFocus { 0%,100%{box-shadow:none}50%{box-shadow:0 0 22px rgba(216,180,254,.55)} }
.bstd-research { display:grid; gap:5px; margin-top:18px; padding:10px; border:1px solid rgba(216,180,254,.28); border-radius:10px; background:rgba(80,42,117,.13); color:#eee7f8; font-size:10px; }.bstd-research span,.bstd-research small { color:var(--text3); }.bstd-research i { height:5px; overflow:hidden; border-radius:8px; background:rgba(0,0,0,.26); }.bstd-research em { display:block; height:100%; background:linear-gradient(90deg,#8b5cf6,#e9d5ff); }
.skt3-doctrine { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:14px 0 0; padding:11px; border:1px solid color-mix(in srgb,var(--skt3) 38%,transparent); border-radius:13px; background:rgba(18,10,32,.13); }.skt3-doctrine > div:first-child { display:grid; gap:2px; }.skt3-doctrine span { color:var(--skt3); font:700 9px var(--font-head); letter-spacing:.13em; }.skt3-doctrine > div:first-child b { color:#f5efff; font-size:12px; }.skt3-doctrine small { color:var(--text3); font-size:9px; }.skt3-doctrine-options { display:flex; gap:7px; }.skt3-doctrine-options button { display:grid; grid-template-columns:21px 1fr; align-items:center; gap:1px 5px; min-width:145px; padding:7px; border:1px solid rgba(216,180,254,.24); border-radius:9px; background:rgba(4,4,14,.13); color:#eee7f8; text-align:left; cursor:pointer; }.skt3-doctrine-options button:hover,.skt3-doctrine-options button.selected { border-color:var(--skt3); background:color-mix(in srgb,var(--skt3) 17%,transparent); }.skt3-doctrine-options button:disabled { opacity:1; cursor:default; }.skt3-doctrine-options i { grid-row:span 2; font-size:18px; font-style:normal; }.skt3-doctrine-options b { font-size:10px; }
.vault-gear-actions { display:flex; align-items:center; gap:6px; }.vault-gear-salvage { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(196,132,252,.35); border-radius:8px; background:rgba(62,30,89,.12); color:#d8b4fe; cursor:pointer; }.vault-gear-salvage:hover { border-color:#e9d5ff; background:rgba(126,34,206,.25); }

/* Lenguaje transversal: lectura, foco y acciones consistentes. */
:focus-visible { outline:2px solid #d8b4fe !important; outline-offset:3px; }.btn,.rpg-buy-btn,.vault-gear-action,.smithy-btn,.garden-mini-btn,.wm-ap-btn,.faction-claim-btn,.sala-attune-btn { min-height:36px; font-weight:700; letter-spacing:.01em; }.empty-state,.vault-empty,.garden-empty,.bstd-empty,.rune-empty { border:1px dashed rgba(216,180,254,.34); border-radius:14px; background:rgba(14,9,27,.10); backdrop-filter:blur(3px); }.view-header,.merchant-ledger,.sala-room-header,.bstd-header,.skt3-header { position:relative; }.view-header::after,.merchant-ledger::after,.sala-room-header::after { content:''; position:absolute; right:16px; bottom:0; left:16px; height:1px; background:linear-gradient(90deg,transparent,rgba(216,180,254,.55),transparent); }.sidebar-item { min-height:46px; }.sidebar-item.active { box-shadow:inset 3px 0 #c084fc,0 0 18px rgba(168,85,247,.14); }.sidebar-item[title] { position:relative; }.sala-picker-item,.rpg-shop-card,.vault-item-card,.vault-gear-card,.faction-card,.wm-hotspot { touch-action:manipulation; }.onboarding-overlay { position:fixed; z-index:10050; inset:0; display:grid; place-items:center; padding:20px; background:rgba(4,2,11,.52); backdrop-filter:blur(8px); }.onboarding-card { position:relative; width:min(420px,100%); padding:28px; border:1px solid rgba(216,180,254,.52); border-radius:20px; background:linear-gradient(145deg,rgba(37,18,59,.72),rgba(10,7,22,.48)); box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.16); color:#f5efff; text-align:center; }.onboarding-close { position:absolute; top:10px; right:12px; border:0; background:transparent; color:#d8b4fe; font-size:24px; cursor:pointer; }.onboarding-count { color:#c084fc; font:700 10px var(--font-head); letter-spacing:.14em; }.onboarding-art { display:block; width:72px; height:72px; margin:13px auto 8px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 14px rgba(192,132,252,.55)); }.onboarding-card h2 { margin:0; font:700 23px var(--font-head); }.onboarding-card p { color:#cbc1d6; line-height:1.55; }.onboarding-progress { display:flex; justify-content:center; gap:5px; margin:19px 0; }.onboarding-progress i { width:25px; height:4px; border-radius:6px; background:rgba(216,180,254,.18); }.onboarding-progress i.active { background:#c084fc; box-shadow:0 0 8px #c084fc; }.onboarding-actions { display:flex; justify-content:center; gap:8px; }
@media (max-width:600px) { .onboarding-card { padding:24px 18px; }.onboarding-card h2 { font-size:20px; }.sidebar { display:none; }.topbar,.header-bar { overflow-x:auto; }.view-header { padding:13px 12px; }.rpg-shop-tabs,.sala-category-tabs,.char-tabs { overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }.rpg-shop-tab,.sala-category,.char-tab { flex:0 0 auto; min-height:39px; }.btn,.rpg-buy-btn,.vault-gear-action,.smithy-btn,.garden-mini-btn,.wm-ap-btn { min-height:42px; }.skt3-doctrine { display:grid; }.skt3-doctrine-options { width:100%; }.skt3-doctrine-options button { min-width:0; flex:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
html.performance-lite *,html.performance-lite *::before,html.performance-lite *::after { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; animation:none !important; transition:none !important; }html.is-offline::before { content:'Sin conexión: se muestra la última versión disponible'; position:fixed; z-index:20000; right:12px; bottom:12px; padding:8px 11px; border:1px solid rgba(251,191,36,.55); border-radius:9px; background:rgba(36,24,7,.84); color:#fde68a; font-size:11px; }
@media (max-width:600px) { .adv-cycle-main { grid-template-columns:38px minmax(0,1fr); }.adv-cycle-main button { grid-column:1/-1; }.adv-cycle-grid { grid-template-columns:1fr; } }

/* Páginas legales y arte mínimo para el acceso: sin emojis de sistema. */
.legal-page { width:min(760px,calc(100% - 32px)); margin:32px auto; padding:28px; color:var(--text); background:rgba(11,7,22,.72); border:1px solid rgba(216,180,254,.28); border-radius:18px; backdrop-filter:blur(8px); line-height:1.65; }
.legal-page h1,.legal-page h2 { font-family:var(--font-head); color:#f0d9ff; }.legal-page h1 { margin:22px 0 4px; }.legal-page h2 { margin-top:24px; font-size:17px; }.legal-page p { color:#c9bdd6; }.legal-updated { font-size:12px; color:#a88fbd !important; }
.login-art-email,.login-art-lock { width:14px; height:14px; display:inline-block; border:1px solid #c084fc; border-radius:3px; position:relative; opacity:.9; }
.login-art-email::after { content:''; position:absolute; left:2px; right:2px; top:4px; height:5px; border-bottom:1px solid #c084fc; transform:skewY(-25deg); }.login-art-lock { border-radius:2px; margin-top:4px; }.login-art-lock::before { content:''; position:absolute; width:7px; height:7px; left:2px; top:-6px; border:1px solid #c084fc; border-bottom:0; border-radius:6px 6px 0 0; }

/* Auditoría final de subcapas: ningún panel de vista queda opaco. */
.garden-command-card,.garden-portal-card,.garden-harmony,.garden-essence,.garden-modal,.skt3-board,.skt3-node,.skt3-node.is-learned,.skt3-node.is-ready,.skt3-race,.bstd-art,.bstd-detail,.bstd-header,.bstd-shelf,.rns-altar,.rns-socket,.wm-legend-row,.wm-detail-panel,.wm-detail-inner,.sala-toolbar,.sala-props-panel,.sala-place-card,.faction-card,.faction-focus-active,.bb-command-panel,.bb-unit-card,.bb-boss-info,.bb-pet-info,.bb-move-panel { background:rgba(9,7,20,.08) !important; backdrop-filter:blur(3px) saturate(1.03) !important; -webkit-backdrop-filter:blur(3px) saturate(1.03) !important; border-color:rgba(216,180,254,.20) !important; box-shadow:inset 0 1px rgba(255,255,255,.09),0 6px 16px rgba(0,0,0,.09) !important; }
.skt3-orb,.rns-socket,.garden-harmony i { background:rgba(4,3,12,.14) !important; }.skt3-node.is-ready:hover,.skt3-node.is-learned,.garden-upgrade:hover,.faction-focus-active { background:rgba(96,48,142,.16) !important; }
.bb-overlay { background:rgba(3,2,8,.18) !important; }.bb-bg::after { opacity:.45; }.bb-move-btn,.bb-pet-chip,.bb-turn-banner { background:rgba(9,7,20,.14) !important; backdrop-filter:blur(3px); }

/* Altar de runas: ritual en tres pasos y arte del juego, sin emojis de UI. */
.rns-shell { max-width:1120px; padding:22px; }
.rns-header { align-items:center; gap:18px; }.rns-header p { max-width:620px; color:#b7bed5; }
.rns-count { grid-template-columns:34px auto; gap:0 5px; min-width:104px; padding:8px; }.rns-count-art { grid-row:1 / 3; width:31px; height:31px; object-fit:contain; image-rendering:pixelated; }.rns-count b { font-size:16px; text-align:left; }.rns-count small { text-align:left; color:#aeb7d0; }
.rns-steps { display:flex; gap:8px; margin:15px 0 0; padding:0; list-style:none; }.rns-steps li { display:flex; align-items:center; gap:6px; flex:1; padding:7px 9px; border:1px solid rgba(168,125,222,.24); border-radius:8px; color:#aeb7d0; background:rgba(22,13,37,.18); font-size:10px; }.rns-steps b { display:grid; place-items:center; width:17px; height:17px; border:1px solid rgba(216,180,254,.48); border-radius:50%; color:#eadcff; font-size:9px; }.rns-steps .is-ready,.rns-steps .is-done { color:#f0e4ff; border-color:rgba(192,132,252,.65); background:rgba(95,45,132,.2); }.rns-steps .is-done b { background:#8b5cf6; }
.rns-layout { grid-template-columns:minmax(0,1fr) 250px; align-items:start; margin:14px 0; }.rns-layout h4 { margin-bottom:3px; color:#e9def8; font-family:var(--font-head); }.rns-section-help,.rns-locked-note { margin:0 0 9px; color:#aeb7d0; font-size:10px; }.rns-locked-note { padding:7px 9px; border-left:2px solid rgba(250,204,21,.6); background:rgba(120,79,14,.12); color:#dbc694; }
.rns-weapon { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; padding:10px 11px; }.rns-weapon-head { min-width:0; }.rns-weapon-art { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; flex-shrink:0; }.rns-weapon-head b { color:#f4efff; }.rns-weapon-head small { color:#aeb7d0; }.rns-sockets { align-self:center; }.rns-socket { width:36px; height:36px; }.rns-socket-art { width:27px; height:27px; object-fit:contain; image-rendering:pixelated; }.rns-weapon-action { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; min-height:25px; color:#aeb7d0; font-size:9px; }.rns-weapon-action button { border:1px solid rgba(192,132,252,.7); border-radius:6px; padding:5px 8px; color:#f4eaff; background:linear-gradient(135deg,rgba(111,54,151,.64),rgba(55,24,83,.68)); font:700 9px var(--font-body); cursor:pointer; }.rns-weapon-action button:hover { border-color:#e9d5ff; box-shadow:0 0 12px rgba(168,85,247,.26); }
.rns-altar { min-height:226px; padding:14px; }.rns-altar-art { width:96px; height:96px; margin-bottom:7px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 16px rgba(192,132,252,.55)); }.rns-altar-art.is-idle { opacity:.46; filter:grayscale(.45) drop-shadow(0 0 11px rgba(147,197,253,.35)); }.rns-altar b { color:#f1e7ff; }.rns-altar p { color:#b9b0cb; }
.rns-library { padding-top:15px; }.rns-library h4 { color:#d9c8f0; }.rns-library > div { grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:9px; }.rns-rune { display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 9px; width:100%; min-height:83px; padding:10px; color:inherit; text-align:left; cursor:pointer; }.rns-rune:hover,.rns-rune.is-selected { border-color:var(--rns) !important; background:color-mix(in srgb,var(--rns) 16%,rgba(13,8,27,.2)) !important; box-shadow:0 0 16px color-mix(in srgb,var(--rns) 18%,transparent) !important; }.rns-rune-art { grid-row:1 / 3; width:42px; height:42px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 0 9px var(--rns)); }.rns-rune span { min-width:0; }.rns-rune b { margin:1px 0 0; color:#f2e9ff; font-size:11px; }.rns-rune p { min-height:0; margin:3px 0 0; color:#b4bdd3; font-size:9px; line-height:1.3; }.rns-rune em { grid-column:2; color:var(--rns); font-size:8px; font-style:normal; font-weight:700; }.rns-rune.is-selected em { color:#f2ddff; }
@media (max-width:760px) { .rns-shell { padding:14px; }.rns-header { align-items:flex-start; }.rns-steps { flex-direction:column; }.rns-layout { grid-template-columns:1fr; }.rns-altar { min-height:150px; }.rns-library > div { grid-template-columns:1fr; }.rns-count { min-width:86px; } }

/* Combate compacto: la arena y la ficha de la mascota tienen prioridad.
   Las seis acciones caben en dos filas cortas, no en un bloque que cubra el
   campo. La ficha vuelve a participar en el grid para que el panel no la
   tape al reducir el alto disponible. */
.bb-move-panel { width:min(690px,calc(100% - 28px)); padding:8px 9px; margin-top:4px; }
.bb-actions-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.bb-move-btn { min-height:50px; padding:5px 7px; grid-template-columns:20px minmax(0,1fr); }
.bb-move-icon,.bb-move-icon-img { width:20px; height:20px; font-size:18px; }
.bb-move-name { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-move-type,.bb-move-pp,.bb-move-dmg { font-size:8px; }
.bb-move-pp { left:6px; bottom:4px; }.bb-move-dmg { right:6px; bottom:4px; }
.bb-prep-panel,.bb-prep-active { margin:5px 0; padding:5px 6px; }
.bb-prep-panel>span { margin-bottom:3px; font-size:8px; }
.bb-prep-panel>div { gap:4px; }.bb-prep-panel button { min-height:30px; padding:4px 5px; }
.bb-prep-panel b,.bb-prep-active b { font-size:8px; }.bb-prep-panel small,.bb-prep-active span { font-size:7px; line-height:1.1; }
.bb-attacks-counter { margin-top:5px; font-size:9px; }
.bb-pet-info { position:static; right:auto; bottom:auto; justify-self:end; align-self:end; z-index:3; width:min(285px,92%); margin:0 0 7px; padding:8px 10px 9px; }
.bb-pet-info .bb-entity-name { font-size:13px; overflow:visible; text-overflow:clip; }
.bb-pet-info .bb-hp-row,.bb-pet-info .bb-stat-row { margin-top:5px; }
@media (max-width:680px) { .bb-move-panel { width:calc(100% - 16px); padding:7px; }.bb-actions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }.bb-move-btn { min-height:46px; }.bb-prep-panel>div { grid-template-columns:1fr; }.bb-prep-panel small { display:none; }.bb-pet-info { width:min(255px,94%); } }

@media (max-width:430px) {
  .prestige-choice-overlay { padding:8px; align-items:start; overflow:auto; }
  .prestige-choice-card { width:100%; max-height:calc(100dvh - 16px); overflow:auto; padding:16px 12px; border-radius:14px; }
  .prestige-choice-card h2 { font-size:20px; }.prestige-choice-card p { font-size:12px; margin-bottom:12px; }
  .progression-identity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .progression-identity-grid button { min-height:76px; padding:7px; }.progression-identity-grid img { width:34px; height:34px; }
  .bb-battle-shell { min-height:100dvh; padding-bottom:8px; }.bb-boss-info,.bb-pet-info { transform:scale(.9); transform-origin:center; }
  .bb-command-panel,.bb-move-panel { width:calc(100% - 12px); margin-inline:6px; border-radius:10px; }
  .bb-move-btn { min-height:42px; padding:7px 6px; font-size:11px; }.bb-move-btn strong { font-size:11px; }.bb-move-btn small { font-size:9px; }
  .bb-actions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* La preparación táctica se elige una vez por jefe y cambia daño/guardia/energía.
     Estaba en display:none bajo 430px, así que en teléfono chico la mecánica era
     inalcanzable — adaptarla, no amputarla. */
  .bb-prep-panel { max-height:34vh; overflow-y:auto; }
  .bb-prep-panel > div { grid-template-columns:1fr; gap:5px; }
  .bb-prep-panel button { min-height:40px; padding:6px 8px; text-align:left; }
  .bb-prep-panel small { display:block; font-size:9px; opacity:.75; }
  #inventoryView { padding:4px 8px 16px; }.vault-shell { padding:8px; }.vault-gear-grid { grid-template-columns:1fr; }.vault-item-grid,.rpg-shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .vault-item-card,.rpg-shop-card { min-height:118px; padding:8px; }.vault-item-img,.vault-item-fallback,.rpg-shop-card img { width:42px; height:42px; }
  .sala-room { height:360px; min-height:360px; }.sala-picker-grid { grid-template-columns:repeat(3,1fr); }.sala-picker-item { min-height:78px; padding:5px; }.sala-picker-item img { width:38px; height:38px; }
  .sala-toolbar { bottom:8px; }.sala-tool-btn { min-width:58px; padding:7px 8px; font-size:15px; }.sala-tool-btn span { font-size:8px; }
  #view-shop .view-header { padding:10px 8px; }.rpg-shop-tabs { gap:4px; }.rpg-shop-tab { padding:7px 8px; font-size:10px; }
}

/* ── Daño flotante en lado de la mascota ─────────────────── */
.bb-dmg-float.bb-pet-side { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
  .bb-spark { animation: none; }
}

/* ── Loot chest opening animation ─────────────────────────── */
.loot-chest {
  position: fixed;
  font-size: 2.2rem;
  transform: translate(-50%, -50%);
  z-index: 9998;
  pointer-events: none;
  animation: lootChestShake 0.75s cubic-bezier(.36,.07,.19,.97) forwards;
}
.loot-chest-rare      { filter: drop-shadow(0 0 8px #60a5fa); }
.loot-chest-epic      { filter: drop-shadow(0 0 10px #a855f7); }
.loot-chest-legendary { filter: drop-shadow(0 0 14px #f59e0b); }
.loot-chest-burst {
  animation: lootChestBurst 0.25s ease-out forwards !important;
}
@keyframes lootChestShake {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.25) rotate(-8deg); opacity: 1; }
  36%  { transform: translate(-50%, -50%) scale(1) rotate(8deg); }
  54%  { transform: translate(-50%, -50%) scale(1.1) rotate(-6deg); }
  72%  { transform: translate(-50%, -50%) scale(1.05) rotate(6deg); }
  100% { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); opacity: 1; }
}
@keyframes lootChestBurst {
  0%   { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loot-chest, .loot-chest-burst { animation: none !important; opacity: 0; }
}

/* ── Daily progress ring around avatar ─────────────────────── */
.sb-avatar-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.daily-ring-svg {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  pointer-events: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.daily-ring-track {
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 3.5;
}
.daily-ring-progress {
  fill: none;
  stroke: var(--accent, #7f5af0);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
.daily-ring-complete .daily-ring-progress {
  stroke: #22c55e;
  filter: drop-shadow(0 0 4px #22c55e88);
}
@media (prefers-reduced-motion: reduce) {
  .daily-ring-progress { transition: none; }
}

/* ── Boss time-urgent chip ──────────────────────────────────── */
.bcard-time-urgent {
  color: #fb7185 !important;
  font-weight: 700;
  animation: bossTimeFlash 1.2s ease-in-out infinite alternate;
}
@keyframes bossTimeFlash {
  from { opacity: 1; }
  to   { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard-time-urgent { animation: none; }
}

/* ── Facciones del Dungeon ─────────────────────────── */
.faction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 4px 16px 24px;
}
@media (max-width: 600px) { .faction-grid { grid-template-columns: 1fr; } }

.faction-card {
  background: color-mix(in srgb, var(--fc) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc) 25%, transparent);
  border-radius: 14px;
  padding: 14px;
  transition: border-color .2s, transform .15s;
}
.faction-card:hover {
  border-color: color-mix(in srgb, var(--fc) 50%, transparent);
  transform: translateY(-1px);
}
.faction-card-hd { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.faction-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.faction-name { font-size: 13px; font-weight: 700; color: var(--text); }
.faction-rank { font-size: 11px; font-weight: 700; color: var(--fc); margin-top: 1px; }
.faction-desc { font-size: 10px; color: var(--text3); margin-bottom: 8px; }
.faction-bar-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 4px; }
.faction-bar-fill { height: 100%; background: var(--fc); border-radius: 4px; transition: width .3s ease-out; }
.faction-bar-lbl { font-size: 10px; color: var(--text3); margin-bottom: 10px; }
.faction-claim-btn {
  width: 100%; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent);
  background: color-mix(in srgb, var(--fc) 15%, transparent);
  color: var(--text); font-size: 11px; font-weight: 700;
  transition: opacity .15s, transform .1s;
}
.faction-claim-btn:hover:not(:disabled) { opacity: .9; }
.faction-claim-btn:active:not(:disabled) { transform: scale(.97); }
.faction-claim-btn:disabled { cursor: not-allowed; opacity: .45; }

/* ─── Beta feedback ────────────────────────────────────────── */
.beta-feedback-modal { display:grid; place-items:center; padding:18px; background:rgba(7,4,15,.62); backdrop-filter:blur(10px); }
.beta-feedback-card { width:min(100%,520px); padding:26px; display:grid; gap:10px; background:rgba(19,12,34,.88); border:1px solid rgba(181,103,255,.42); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.beta-feedback-card .beta-kicker { color:#dcb4ff; font-size:10px; font-weight:800; letter-spacing:.14em; }
.beta-feedback-card h2 { margin:0; font-family:Cinzel,serif; font-size:21px; color:#fff5e7; }
.beta-feedback-card p, .beta-feedback-card label { margin:0; color:var(--text2); font-size:12px; }
.beta-feedback-card select, .beta-feedback-card textarea { width:100%; box-sizing:border-box; border:1px solid rgba(192,146,255,.32); border-radius:10px; background:rgba(8,6,18,.58); color:var(--text); padding:10px; font:inherit; }
.beta-feedback-card textarea { min-height:120px; resize:vertical; }
.beta-feedback-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
/* Error explícito en el primer juramento: nunca dejar un botón sin explicación. */
.progression-error { margin:12px 0 0; padding:9px 11px; border:1px solid rgba(251,113,133,.65); border-radius:8px; background:rgba(127,29,29,.32); color:#fecdd3; font-size:12px; line-height:1.35; }