/* =====================================================================
   SIDEBAR V3 — Compact obsidian rail con panel contextual
   2026-05-25 · ElDoria-only (char_id=7)
   Estética Obsidian Codex: rail compacto + panel flotante a la derecha.
   ===================================================================== */

/* El game-shell con V3 activo usa columna estrecha de 76px (en vez de 240px).
   2026-05-25: usamos minmax(0, 1fr) en la fila de contenido para que NO se
   expanda si el sidebar es más alto que el viewport. Sin esto, en pantallas
   < 800px el sidebar V3 (~780px de contenido) empuja la fila 1fr a su tamaño
   intrínseco, haciendo overflow del main-area abajo del viewport (clipped por
   .game-shell { overflow:hidden }) y cortando 100-150px del contenido. */
.game-shell.sv3-active {
  grid-template-columns: 76px 1fr 320px;
  grid-template-rows: 64px minmax(0, 1fr);
}
@media (max-width: 1100px) {
  .game-shell.sv3-active {
    grid-template-columns: 1fr;
  }
}

.nav-sidebar-v3 {
  /* Variables — escalan con el viewport (override en media queries abajo).
     2026-05-26: el rail y los iconos se ajustan al tamaño del monitor. */
  --sv3-w: 76px;
  --sv3-icon-size: 42px;
  --sv3-icon-font: 19px;
  --sv3-icon-gap: 5px;
  --sv3-orb: 48px;
  --sv3-text-size: 11px;
  --sv3-tag-size: 9px;
  --sv3-gold: #d4af37;
  --sv3-gold-light: #f3d775;
  --sv3-gold-deep: #8a6d1c;
  --sv3-arcane: #a78bfa;
  --sv3-text: #f5edd6;
  --sv3-text-dim: rgba(245,237,214,0.65);
  --sv3-text-faint: rgba(245,237,214,0.35);
  --sv3-border: rgba(212,175,55,0.22);
  --sv3-border-strong: rgba(212,175,55,0.45);
  /* 2026-05-25: color base sólido + efecto SUTIL — un sheen vertical apenas
     perceptible (top con un toque más claro, bottom un poco más oscuro) más
     un inner highlight de 1px en la izquierda. Sin glows fuertes. */
  --sv3-bg: #0d0620;
  --sv3-ease: cubic-bezier(0.16, 1, 0.3, 1);

  width: var(--sv3-w);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.025) 0%,
      transparent 28%,
      transparent 72%,
      rgba(0,0,0,0.18) 100%),
    var(--sv3-bg);
  border-right: 1px solid var(--sv3-border);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  z-index: 50;
  /* 2026-05-26: ocupa desde la fila 1 (sobre el header) hasta el final. Así
     el logo circular del top puede pegarse arriba sin el header empujándolo. */
  grid-row: 1 / -1;
  /* 2026-05-25: overflow visible para que los .sv3-panel (left: 100%; width:
     820px) puedan extenderse hacia la derecha sobre el main-area. Si el nav
     tuviera overflow:auto los panels quedarían clipeados Y aparecería un
     scrollbar horizontal. Si el contenido del nav excede la altura, el
     .game-shell.sv3-active { overflow: hidden } lo clipea silenciosamente. */
  overflow: visible;
  border-radius: 0;
  box-shadow:
    inset 28px 0 32px -6px rgba(0,0,0,0.6),
    inset -1px 0 0 rgba(0,0,0,0.3);
}

/* Pseudo top: un sutil halo dorado MUY tenue al inicio del rail.
   Apenas se nota pero da sensación de "luz del logo". */
.nav-sidebar-v3::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(212,175,55,0.07),
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.nav-sidebar-v3 > * { position: relative; z-index: 1; }

/* ─── LOGO superior — favicon circular + texto compacto ───────────────── */
/* 2026-05-26: el sidebar V3 ahora ocupa grid-row 1/-1 (arriba del header). El
   logo arranca arriba pero con un breathing room moderado. */
.sv3-logo {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 10px;
  width: 100%;
  transition: transform 0.18s var(--sv3-ease);
}
.sv3-logo:hover {
  transform: scale(1.03);
}
.sv3-logo-orb {
  width: var(--sv3-orb); height: var(--sv3-orb);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,4,18,0.95);
  border: 2px solid var(--sv3-gold);
  box-shadow:
    0 0 18px rgba(212,175,55,0.55),
    inset 0 0 8px rgba(212,175,55,0.25);
  position: relative;
  overflow: hidden;
}
.sv3-logo-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.sv3-logo-orb::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--sv3-gold-deep), var(--sv3-gold-light),
    var(--sv3-gold-deep), var(--sv3-gold-light),
    var(--sv3-gold-deep));
  z-index: -1;
  filter: blur(4px);
  opacity: 0.55;
}
.sv3-logo-text {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  background: linear-gradient(180deg, #f3d775 0%, #d4af37 60%, #8a6d1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.sv3-logo-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: var(--sv3-text-faint);
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}

/* ─── DIVIDER decorativo ──────────────────────────────────────────────── */
.sv3-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sv3-border-strong), transparent);
  position: relative;
  margin: 6px 0 4px;
}
.sv3-divider::before,
.sv3-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  background: var(--sv3-gold);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(212,175,55,0.7);
}
.sv3-divider::before { left: -2px; }
.sv3-divider::after  { right: -2px; }

/* ─── ICONOS de categoría — grandes, ligeramente desbordando el rail ───
   Cada icono es un "tile" con padding y un glow del color de la cat.
   Sobresalen ligeramente hacia la derecha para sensación de profundidad. */
.sv3-icons {
  display: flex;
  flex-direction: column;
  gap: var(--sv3-icon-gap);
  align-items: center;
  width: 100%;
  padding: 4px 0;
}
.sv3-icon {
  --sv3-acc: var(--sv3-gold);
  appearance: none;
  border: 0;
  background: transparent;
  width: var(--sv3-icon-size); height: var(--sv3-icon-size);
  border-radius: 11px;
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--sv3-text-dim);
  transition: color 0.18s var(--sv3-ease),
              transform 0.18s var(--sv3-ease),
              filter 0.18s var(--sv3-ease);
}
.sv3-icon i {
  font-size: var(--sv3-icon-font);
  line-height: 1;
  transition: filter 0.18s var(--sv3-ease);
}
.sv3-icon:hover,
.sv3-icon.is-current,
.sv3-icon.is-active {
  color: var(--sv3-acc);
  transform: translateX(2px);
}
.sv3-icon:hover i,
.sv3-icon.is-current i,
.sv3-icon.is-active i {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sv3-acc) 70%, transparent))
          drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.sv3-icon.is-active {
  transform: translateX(3px);
}
.sv3-icon.is-active i {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sv3-acc) 85%, transparent))
          drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
/* Indicador izquierdo (barrita) cuando es la categoría actual o tiene panel abierto */
.sv3-icon.is-current::before,
.sv3-icon.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--sv3-acc);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--sv3-acc) 65%, transparent);
}
/* is-active (panel abierto) tiene barrita un poco más alta */
.sv3-icon.is-active::before {
  height: 28px;
  width: 4px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--sv3-acc) 80%, transparent);
}
/* Dot pequeño para notificaciones (futuro) */
.sv3-icon-dot {
  position: absolute;
  top: 9px; right: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sv3-gold);
  box-shadow: 0 0 6px rgba(212,175,55,0.6);
  opacity: 0;
}
.sv3-icon[data-has-notif] .sv3-icon-dot { opacity: 1; }

/* Spacer (push avatar al fondo) */
.sv3-spacer { flex: 1; min-height: 12px; }
.sv3-spacer-bottom { flex: 1; min-height: 12px; }

/* ─── WIDGET de Misiones — rectángulo grande tipo card-button ─── */
.sv3-missions {
  appearance: none;
  border: 1px solid rgba(255,200,87,0.32);
  background:
    linear-gradient(135deg,
      rgba(255,200,87,0.18) 0%,
      rgba(255,170,40,0.08) 50%,
      rgba(255,200,87,0.18) 100%);
  width: 64px;
  height: 78px;
  margin: 0;
  padding: 10px 6px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #ffc857;
  position: relative;
  transition: all 0.18s var(--sv3-ease);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.45);
  overflow: hidden;
}
/* Pequeño glow corner top-right que insinúa "abrir card" */
.sv3-missions::before {
  content: "";
  position: absolute;
  top: -10px; right: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,87,0.35), transparent 70%);
  pointer-events: none;
}
.sv3-missions-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,200,87,0.5));
  z-index: 1;
}
.sv3-missions-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(180deg, #ffd56a, #f5b342 50%, #b88826);
  color: #1a1028;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.1;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 2px 4px rgba(0,0,0,0.55);
  min-width: 22px;
  text-align: center;
  z-index: 1;
}
.sv3-missions:hover {
  border-color: rgba(255,200,87,0.7);
  background: linear-gradient(180deg,
    rgba(255,200,87,0.22),
    rgba(255,170,40,0.12));
  transform: translateX(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 14px rgba(0,0,0,0.55),
    0 0 18px rgba(255,200,87,0.4);
}
.sv3-missions.is-active {
  border-color: #ffc857;
  background: linear-gradient(180deg,
    rgba(255,200,87,0.32),
    rgba(255,170,40,0.18));
  transform: translateX(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 24px rgba(255,200,87,0.55),
    inset 0 0 14px rgba(255,200,87,0.22);
}
.sv3-missions.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 30px;
  background: #ffc857;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px rgba(255,200,87,0.75);
}

/* ─── PANEL misiones — rectángulo HORIZONTAL (más ancho que alto)
   2026-05-25: usamos `.sv3-panel.sv3-panel-missions` (2 clases) para superar
   la especificidad de la regla base `.sv3-panel { width: 280px }` que se
   define más abajo en el archivo. */
.sv3-panel.sv3-panel-missions {
  width: min(820px, calc(100vw - 120px));
  max-width: none;
  padding: 16px 14px 12px;
  /* el top se setea dinámicamente desde JS para anclar al botón de misiones */
}
.sv3-missions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: min(60vh, 320px);
  overflow-y: auto;
  padding: 4px;
}
.sv3-missions-list .sv3-missions-loading,
.sv3-missions-list .sv3-missions-empty {
  grid-column: 1 / -1;
}
.sv3-missions-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 10px;
  color: var(--sv3-text-dim);
  font-size: 13px;
  justify-content: center;
}
.sv3-missions-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--sv3-text-faint);
}
.sv3-missions-empty i {
  font-size: 32px;
  color: rgba(255,200,87,0.5);
  margin-bottom: 8px;
  display: block;
}
.sv3-missions-empty-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  margin-top: 4px;
}

/* ─── CARDS de misión — height auto, grid igualará dentro de cada fila
   2026-05-25: removí aspect-ratio 1/1. Ahora cada card crece según contenido
   (objetivos). Las cards en la MISMA fila se igualan automáticamente al alto
   de la más larga (comportamiento default del grid). Filas con menos contenido
   serán más bajitas. */
.sv3-mc {
  --mc-color: #d4af37;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28,16,52,0.72), rgba(8,4,18,0.9));
  border: 1px solid color-mix(in srgb, var(--mc-color) 30%, var(--sv3-border));
  border-left: 3px solid var(--mc-color);
  transition: all 0.16s var(--sv3-ease);
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 10px rgba(0,0,0,0.45);
  min-height: 120px;
}
.sv3-mc:hover {
  border-color: var(--mc-color);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mc-color) 10%, rgba(28,16,52,0.72)),
    rgba(10,5,22,0.92));
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 18px rgba(0,0,0,0.6),
    0 0 18px color-mix(in srgb, var(--mc-color) 30%, transparent);
}

/* Head: tipo + porcentaje */
.sv3-mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.sv3-mc-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-color);
  line-height: 1;
}
.sv3-mc-type i { font-size: 11px; }
.sv3-mc-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  color: var(--sv3-text);
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--mc-color) 32%, transparent);
  line-height: 1.1;
}

/* Nombre */
.sv3-mc-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--sv3-text);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lista de objetivos — qué hay que hacer + cuánto voy */
.sv3-mc-objs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  padding-top: 2px;
}
.sv3-mc-obj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--sv3-text-dim);
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.sv3-mc-obj:last-child { border-bottom: 0; }
.sv3-mc-obj-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv3-mc-obj-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sv3-text);
  background: rgba(0,0,0,0.4);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sv3-mc-obj.is-done .sv3-mc-obj-text {
  text-decoration: line-through;
  text-decoration-color: rgba(245,237,214,0.3);
  opacity: 0.7;
}
.sv3-mc-obj.is-done .sv3-mc-obj-count {
  color: #5cf28a;
  border: 1px solid rgba(92,242,138,0.3);
}

/* Barra de progreso total al final */
.sv3-mc-bar {
  height: 5px;
  background: rgba(0,0,0,0.55);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  margin-top: auto;
}
.sv3-mc-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--mc-color),
    color-mix(in srgb, var(--mc-color) 70%, white));
  box-shadow: 0 0 6px color-mix(in srgb, var(--mc-color) 55%, transparent);
  transition: width 0.4s var(--sv3-ease);
}

/* CTA "Ver todas" al final */
.sv3-missions-cta {
  appearance: none;
  border: 1px solid rgba(255,200,87,0.4);
  background: linear-gradient(180deg, rgba(255,200,87,0.12), rgba(255,170,40,0.06));
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #ffc857;
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 100%;
  transition: all 0.16s var(--sv3-ease);
}
.sv3-missions-cta:hover {
  border-color: #ffc857;
  background: linear-gradient(180deg, rgba(255,200,87,0.25), rgba(255,170,40,0.12));
  box-shadow: 0 0 14px rgba(255,200,87,0.4);
}
.sv3-missions-cta i { font-size: 14px; }

/* ─── AVATAR al fondo ─────────────────────────────────────────────────── */
.sv3-avatar-wrap {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}
.sv3-avatar {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: visible;
  isolation: isolate;
}
.sv3-avatar > .race-portrait-img,
.sv3-avatar > .race-portrait {
  width: 100%; height: 100%;
  border-radius: 50%;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid var(--sv3-gold);
  box-shadow:
    0 0 14px rgba(212,175,55,0.4),
    inset 0 0 0 1px rgba(0,0,0,0.4);
}
.sv3-avatar::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--sv3-gold-deep), var(--sv3-gold-light),
    var(--sv3-gold-deep), var(--sv3-gold-light),
    var(--sv3-gold-deep));
  z-index: -1;
  filter: blur(3px);
  opacity: 0.55;
}
.sv3-vip {
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--sv3-gold-light);
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.8));
}
.sv3-lv {
  position: absolute;
  bottom: -4px; right: -2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 800;
  color: #1a1028;
  background: linear-gradient(180deg, #f3d775, #d4af37 50%, #8a6d1c);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  line-height: 1.2;
}

/* Logout sutil */
.sv3-logout {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: var(--sv3-text-faint);
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
  margin-top: 2px;
}
.sv3-logout i { font-size: 14px; }
.sv3-logout:hover {
  color: #ff7a8c;
  background: rgba(255,90,106,0.1);
}

.sv3-close-hidden { display: none !important; }

/* ─── PANEL contextual flotante ───────────────────────────────────────── */
.sv3-panels-host {
  position: absolute;
  top: 0; left: 100%;
  height: 100%;
  width: 0;
  pointer-events: none;
}
.sv3-panel {
  --sv3-acc: var(--sv3-gold);
  position: absolute;
  /* top se setea dinámicamente desde JS para anclar el panel a la altura
     del icono que disparó la apertura. */
  top: 12px;
  left: 8px;
  width: 280px;
  max-height: calc(100vh - 100px);
  overflow: hidden auto;
  pointer-events: auto;

  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--sv3-acc) 12%, transparent), transparent 50%),
    linear-gradient(165deg, rgba(26,15,48,0.97) 0%, rgba(12,6,24,0.98) 60%, rgba(8,4,18,1) 100%);
  border: 1px solid var(--sv3-border-strong);
  border-radius: 16px;
  padding: 14px 12px 12px;
  box-shadow:
    0 22px 50px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,235,180,0.06),
    0 0 28px color-mix(in srgb, var(--sv3-acc) 22%, transparent);

  opacity: 0;
  transform: translateX(-8px) scale(0.98);
  transition: opacity 0.22s var(--sv3-ease), transform 0.22s var(--sv3-ease);
}
.sv3-panel.is-open {
  opacity: 1;
  transform: translateX(0) scale(1);
}
/* Corner brackets dorados */
.sv3-panel::before,
.sv3-panel::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--sv3-acc);
  opacity: 0.6;
  pointer-events: none;
}
.sv3-panel::before {
  top: 8px; left: 8px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 4px;
}
.sv3-panel::after {
  bottom: 8px; right: 8px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: 4px;
}

.sv3-panel-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: 1px solid var(--sv3-border);
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  color: var(--sv3-text-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.16s;
  z-index: 2;
}
.sv3-panel-close:hover {
  color: var(--sv3-acc);
  border-color: var(--sv3-acc);
}
.sv3-panel-close i { font-size: 14px; }

.sv3-panel-head {
  padding: 4px 36px 8px 6px;
}
.sv3-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sv3-text);
}
.sv3-panel-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--sv3-text-dim);
  margin-top: 2px;
}
.sv3-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sv3-border-strong), transparent);
  margin: 4px 0 8px;
}
.sv3-panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Items del panel */
.sv3-item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--sv3-text-dim);
  text-align: left;
  position: relative;
  transition: background 0.16s, color 0.16s, transform 0.16s;
}
.sv3-item:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sv3-acc) 14%, transparent),
    rgba(0,0,0,0.2));
  color: var(--sv3-text);
}
.sv3-item.active,
.sv3-item.is-current {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sv3-acc) 22%, transparent),
    rgba(0,0,0,0.25));
  color: var(--sv3-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv3-acc) 55%, transparent);
}
.sv3-item-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--sv3-border);
  display: grid; place-items: center;
  color: var(--sv3-acc);
  font-size: 16px;
  flex-shrink: 0;
}
.sv3-item-icon i { font-size: 16px; }
.sv3-item:hover .sv3-item-icon {
  border-color: var(--sv3-acc);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sv3-acc) 18%, transparent),
    rgba(0,0,0,0.4));
}
.sv3-item-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.sv3-item-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: inherit;
}
.sv3-item-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--sv3-text-faint);
  line-height: 1.2;
  margin-top: 2px;
}

/* 2026-05-25: game.js (_checkGuildHallVisibility) inyecta dinámicamente un
   `.nv2-active-pill` con la clase de V2 al item, pero V3 ya tiene su propio
   badge nativo. Lo ocultamos para evitar el "ACTIVO" duplicado. */
.sv3-item .nv2-active-pill,
.sv3-item .nv2-badge { display: none !important; }

/* Badges */
.sv3-item-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
  align-self: center;
}
.sv3-badge-gold {
  background: linear-gradient(180deg, #f3d775, #d4af37 50%, #8a6d1c);
  color: #1a1028;
}
.sv3-badge-blood {
  background: linear-gradient(180deg, #ff8a8a, #e85a6a 50%, #aa3340);
  color: #fff;
}
.sv3-badge-event {
  background: linear-gradient(180deg, #c3a1ff, #a78bfa 50%, #6e4cc4);
  color: #fff;
}
.sv3-badge-cyan {
  background: linear-gradient(180deg, #8be5ff, #5cc4ff 50%, #2c87b8);
  color: #0a1424;
}

/* 2026-06-04: countdown badge — clock icon + tiempo restante.
   Diferente al kind=event/gold: fondo translucido + outline naranja. */
.sv3-badge-countdown {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 122, 61, 0.16);
  border: 1px solid rgba(255, 122, 61, 0.55);
  color: #ffb37a;
  border-radius: 999px;
  text-transform: none;
  white-space: nowrap;
}
.sv3-badge-countdown i { font-size: 11px; }
.sv3-badge-countdown.is-ended {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
}

/* ─── MOBILE: el sidebar V3 vuelve al estilo drawer del V2 (mobile-only)
   El user pidió esto solo para él / desktop. En mobile dejamos el ancho
   normal y mostramos un único listado plano. ─── */
@media (max-width: 980px) {
  .nav-sidebar-v3 {
    width: 100%;
    max-width: 320px;
    padding: 16px;
    gap: 0;
  }
  .nav-sidebar-v3 .sv3-icons {
    flex-direction: column;
    width: 100%;
  }
  .nav-sidebar-v3 .sv3-icon {
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    padding-left: 12px;
  }
  /* Panel se expande full-width como sub-menu */
  .sv3-panels-host {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 8px;
  }
  .sv3-panel {
    position: static;
    width: 100%;
    max-height: none;
    margin-bottom: 8px;
  }
}

/* =====================================================================
   2026-05-26: Responsive sidebar V3 — iconos y rail escalan con viewport.
   - Pantallas compactas (≤ 1366px): rail más angosto, iconos más pequeños
   - Default (1367–1599px): valores actuales del sidebar
   - Pantallas grandes (1600–1919px): un toque más grande
   - Pantallas 2K/Ultrawide (1920–2559px): notablemente más grande
   - Pantallas 4K/49" (≥ 2560px): rail ancho y iconos prominentes
   También actualizamos la columna del grid en game-shell para que el main-area
   reciba el ancho correcto.
   ===================================================================== */
@media (min-width: 1101px) and (max-width: 1366px) {
  .nav-sidebar-v3 {
    --sv3-w: 66px;
    --sv3-icon-size: 38px;
    --sv3-icon-font: 17px;
    --sv3-icon-gap: 4px;
    --sv3-orb: 42px;
  }
  .game-shell.sv3-active { grid-template-columns: 66px 1fr 320px; }
}
@media (min-width: 1600px) and (max-width: 1919px) {
  .nav-sidebar-v3 {
    --sv3-w: 84px;
    --sv3-icon-size: 46px;
    --sv3-icon-font: 21px;
    --sv3-icon-gap: 6px;
    --sv3-orb: 52px;
  }
  .game-shell.sv3-active { grid-template-columns: 84px 1fr 320px; }
}
@media (min-width: 1920px) and (max-width: 2559px) {
  .nav-sidebar-v3 {
    --sv3-w: 96px;
    --sv3-icon-size: 52px;
    --sv3-icon-font: 24px;
    --sv3-icon-gap: 7px;
    --sv3-orb: 58px;
  }
  .game-shell.sv3-active { grid-template-columns: 96px 1fr 320px; }
}
@media (min-width: 2560px) {
  .nav-sidebar-v3 {
    --sv3-w: 112px;
    --sv3-icon-size: 60px;
    --sv3-icon-font: 28px;
    --sv3-icon-gap: 9px;
    --sv3-orb: 68px;
  }
  .game-shell.sv3-active { grid-template-columns: 112px 1fr 320px; }
}