/* ─
   MuVaeryon Website — Main Stylesheet
   Dark Gaming Theme for MU Online Season 20
   ─ */

:root {
  --bg-dark: #111111;
  --bg-card: #1B2026;
  --bg-card-hover: #1F2630;
  --bg-surface: #151B22;
  --bg-input: #161C23;
  --border: #2A3139;
  --border-glow: #1a7fe040;
  --text: #EDF2F7;
  --text-dim: #8A94A0;
  --text-muted: #6E7A88;
  --accent: #3E8FF0;
  --accent-light: #5FA8F5;
  --accent-glow: #1a7fe060;
  --gold: #8FCBFF;
  --gold-glow: #3E8FF040;
  --success: #32CD32;
  --danger: #D32F2F;
  --info: #4FA9FF;
  --gradient-hero: linear-gradient(135deg, #111111 0%, #1B2026 50%, #111111 100%);
  --gradient-card: linear-gradient(145deg, #1B2026, #1F2630);
  --gradient-accent: linear-gradient(135deg, #3E8FF0, #5FA8F5);
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,.7);
  --shadow-glow: 0 0 30px var(--accent-glow);
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --bg-dropdown: #12161B;
  /* Glass del dashboard: capas fijas del panel + superficie translúcida */
  --glass-panel:
    linear-gradient(180deg, rgba(255,255,255,.050) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(118deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 26%),
    radial-gradient(130% 110% at 50% 36%, rgba(8,10,13,.12) 0%, rgba(8,10,13,.34) 100%),
    linear-gradient(180deg, rgba(27,32,38,.74) 0%, rgba(17,17,17,.70) 100%);
  --glass-card:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 32%),
    linear-gradient(135deg, rgba(62,143,240,.10) 0%, rgba(62,143,240,0) 58%),
    linear-gradient(135deg, rgba(27,32,38,.55) 0%, rgba(18,22,27,.45) 100%);
  --glass-blur: blur(12px) saturate(140%);
}

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─
   GLOBAL SIDEBAR LAYOUT (NO TOPBAR)
   ─ */

body {
  background-color: var(--bg-dark);
  background-image: var(--glass-panel);
  background-attachment: fixed;
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─
   HEADER HORIZONTAL
   ─ */
.header-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.header-logo .logo-img { height: 46px; width: auto; display: block; }

/* Stats */
.header-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 22px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.header-stat { display: flex; flex-direction: column; line-height: 1.15; }
.header-stat-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.header-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--gold); font-family: var(--font-display); }
.header-stat-sub { font-size: .6rem; color: var(--text-muted); }

/* Nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: 0 24px;
}
.header-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
  position: relative;
}
.header-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.header-nav .nav-link.active { color: var(--gold); }
.header-nav .nav-link.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--gold);
}
.header-nav .nav-arrow { font-size: .6rem; opacity: .7; }

/* Dropdowns al hacer hover */
.header-nav .nav-group:hover > .nav-group-body { display: block; }
.header-nav .nav-group:hover > .nav-link--group { color: #fff; background: rgba(255,255,255,.05); }
/* Puente invisible: extiende el área de hover del grupo sobre el gap hasta el menú */
.header-nav .nav-group::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0; height: 10px;
}

/* Botón Wiki */
.header-nav .nav-link--wiki {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-left: 8px;
  padding: 8px 16px;
  color: var(--text);
  font-weight: 600;
}
.header-nav .nav-link--wiki:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
}
.header-nav .nav-link--wiki::after { display: none; }

/* Botón Live Streaming */
.header-nav .nav-link--live {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-left: 8px;
  padding: 8px 16px;
  color: var(--text);
  font-weight: 600;
}
.header-nav .nav-link--live:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.header-nav .nav-link--live::after { display: none; }
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--info);
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 8px var(--info);
  animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Acciones derecha */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  justify-content: flex-end;
}
.header-lang-btn, .header-burger {
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.header-lang-btn { padding: 0 10px; gap: 5px; }
.header-burger { width: 38px; }
.header-lang-btn:hover, .header-burger:hover {
  border-color: var(--accent); color: #fff;
}
.header-burger { display: none; }

.header-lang-wrap { position: relative; display: flex; align-items: center; }
.header-lang-btn .lang-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.header-lang-btn .lang-caret { font-size: .55rem; color: var(--text-muted); }
.header-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 170px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 60;
}
.header-lang-dropdown.open { display: block; }

.header-user-wrap { position: relative; display: flex; align-items: center; }
.header-user {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  align-self: stretch;
  justify-content: center;
}
.hu-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  color: var(--text-dim);
}
.hu-welcome b { color: var(--text); font-weight: 600; }
.hu-account {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: .74rem;
  transition: var(--transition);
}
.hu-account:hover { color: var(--gold); }
.hu-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(211,47,47,.12);
  border: 1px solid rgba(211,47,47,.4);
  border-radius: 6px;
  color: var(--danger);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: var(--transition);
}
.hu-logout svg { display: block; width: 15px; height: 15px; }
.hu-logout:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.hu-stats { display: flex; gap: 18px; }
.hu-stat { display: inline-flex; align-items: center; gap: 6px; }
.hu-stat-label { font-size: .78rem; font-weight: 700; color: var(--text); }
.hu-stat-badge {
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: 2px 9px;
  border-radius: 3px 10px 10px 3px;
  min-width: 30px;
  text-align: center;
}

.hu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  color: var(--text-muted);
}
.hu-vip { color: #4dd0e1; font-weight: 600; }
.hu-sep { color: var(--border); }

.header-user-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 190px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 60;
}
.header-user-menu.open { display: block; }
.header-user-menu .user-dd-item {
  display: block; width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none; background: none;
  color: var(--text-dim);
  font-size: .82rem; font-family: inherit;
  border-radius: 7px; cursor: pointer;
  transition: var(--transition);
}
.header-user-menu .user-dd-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.header-user-menu .user-dd-item--logout { color: var(--danger); }
.header-user-menu .user-dd-item--logout:hover { background: rgba(211,47,47,.12); color: var(--danger); }

.site-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.site-main {
  padding-top: 0;
  flex: 1;
}

/* ─”€─”€ Responsive header ─”€─”€ */
@media (max-width: 1100px) {
  .header-stats { display: none; }
}
@media (max-width: 900px) {
  .header-nav {
    position: fixed;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    padding: 12px 18px 18px;
    margin-left: 0;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    display: none;
  }
  .header-nav.open { display: flex; }
  .header-nav .nav-link { padding: 12px 14px; font-size: .92rem; }
  .header-burger { display: flex; }
  .header-actions .btn-auth { display: none; }
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

.sidebar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border-radius: 0;
}

.sidebar-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-toggle:hover {
  border-color: var(--accent);
  color: #fff;
}

/* ─”€─”€ Sidebar profile block ─”€─”€ */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

.sidebar-profile-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gradient-accent);
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.sidebar-profile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sidebar-profile-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-role {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─”€─”€ Gear / settings button inside profile ─”€─”€ */
.sidebar-profile {
  position: relative;
  flex-wrap: wrap;
}

.sidebar-profile-gear {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
  align-self: flex-start;
  margin-top: 4px;
}

.sidebar-profile-gear:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.sidebar-profile-gear.group-open {
  color: var(--accent-light);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Dropdown del engranaje ─€” se despliega debajo del perfil, full width */
.sidebar-profile .sidebar-user-menu {
  width: 100%;
  order: 99;
}

.sidebar-profile .sidebar-user-menu.open {
  max-height: 9999px;
}

.sidebar-profile .sidebar-user-menu .user-dd-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: .82rem;
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}

.sidebar-profile .sidebar-user-menu .user-dd-item:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text);
}

.site-sidebar .main-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  margin-bottom: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb, var(--accent) 35%, transparent) transparent;
}
.site-sidebar .main-nav::-webkit-scrollbar { width: 3px; }
.site-sidebar .main-nav::-webkit-scrollbar-track { background: transparent; }
.site-sidebar .main-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 3px; }

/* ─”€─”€ nav-link base ─”€─”€ */
.site-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  border: none;
  background: transparent;
  font-size: .86rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

/* ::after reservado para tooltips en compact ─€” oculto por defecto */
.site-sidebar .nav-link::after {
  display: none;
  content: '';
}

.site-sidebar .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}

.site-sidebar .nav-link:hover {
  transform: none;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}

.site-sidebar .nav-link.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: none;
}

.site-sidebar .nav-link.active::before {
  opacity: 1;
}

.site-sidebar .nav-link.active .nav-ic {
  background: transparent;
  color: var(--accent-light);
}

.nav-ic {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: color .15s;
}

.site-sidebar .nav-link:hover .nav-ic {
  color: var(--text-dim);
}

.site-sidebar .nav-link.active .nav-ic {
  color: var(--accent-light);
}

.nav-tx {
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

/* ─”€─”€ Arrow inside nav-link--group ─”€─”€ */
.nav-link--group {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
}

.nav-arrow {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: .82rem;
  color: #fff;
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .18s;
  line-height: 1;
}

.nav-link--group.group-open .nav-arrow {
  transform: rotate(180deg);
  color: #fff;
}

.nav-group.open > .nav-link--group,
.nav-link--group.group-open {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

/* ─”€─”€ nav-group container ─”€─”€ */
.nav-group {
  display: flex;
  flex-direction: column;
}

/* En el HEADER, los grupos son dropdowns flotantes */
.header-nav .nav-group { position: relative; flex-direction: row; }
.header-nav .nav-group > .nav-group-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-height: none;
  overflow: visible;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 60;
}
.header-nav .nav-group.open > .nav-group-body { display: block; }
.header-nav .nav-group-body .nav-dd-item { margin: 1px 0; }

/* Group body (collapsible submenu) */
.nav-group-body {
  max-height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 0px;
  padding: 0;
  transition: max-height .35s ease;
  border: 1px solid transparent;
  background: transparent;
}

/* JS sets style.maxHeight on open; CSS handles padding */
.nav-group-body.open {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset;
  margin-bottom: 4px;
  padding: 4px 6px 10px;
}

/* En el header el dropdown mantiene su fondo sólido y bordes redondeados */
.header-nav .nav-group.open > .nav-group-body,
.header-nav .nav-group:hover > .nav-group-body {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 0;
  box-shadow: var(--shadow);
}

/* Inner scroll wrapper ─€” sin scroll propio, el scroll es del main-nav */
.ngb-scroll {
  overflow: visible;
}

/* Items inside nav-group-body */
.nav-group-body .nav-dd-item {
  display: block;
  padding: 7px 10px;
  margin: 1px 5px 1px 3px;
  font-size: .78rem;
  border-radius: 7px;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: background .14s, color .14s;
  box-sizing: border-box;
}

.nav-group-body .nav-dd-item:hover {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.75), 0 0 20px rgba(143,203,255,.45);
}

/* ─”€─”€ Sidebar search ─”€─”€ */
.sidebar-search-wrap {
  margin-bottom: 6px;
  position: relative;
}

.sidebar-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 11px;
  transition: border-color .15s;
}

.sidebar-search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.sidebar-search-icon {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color .15s;
}

.sidebar-search-box:focus-within .sidebar-search-icon {
  color: color-mix(in srgb, var(--accent) 80%, transparent);
}

.sidebar-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: .8rem;
  font-family: var(--font-body);
  min-width: 0;
}

.sidebar-search-input::placeholder { color: var(--text-muted); }

.sidebar-search-input::-webkit-search-cancel-button { opacity: .4; cursor: pointer; }

.sidebar-search-results {
  display: none;
  margin-top: 4px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar-search-results::-webkit-scrollbar { width: 3px; }
.sidebar-search-results::-webkit-scrollbar-track { background: transparent; }
.sidebar-search-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: .8rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
}

/* El texto principal del resultado va en su propio span */
.search-result-item .sri-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-item:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text);
}

.search-result-item .sri-group {
  font-size: .68rem;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.search-result-item mark {
  background: transparent;
  color: var(--accent-light);
  font-weight: 600;
}

.search-no-result {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: .78rem;
  text-align: center;
}

.nav-dd-item.search-highlight {
  animation: searchPulse .9s ease;
}

@keyframes searchPulse {
  0%   { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
  100% { background: transparent; color: var(--text-dim); }
}

/* Guides accordion groups inside nav-group-body */
.nav-group-body .nav-dd-group {
  border: 1px solid transparent;
  border-radius: 8px;
  margin-bottom: 4px;
  overflow: hidden;
  background: transparent;
  transition: border-color .18s, box-shadow .18s;
}

.nav-group-body .nav-dd-group.open {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset;
}

.nav-group-body .nav-dd-group-btn {
  width: 100%;
  background: transparent;
  color: var(--text-dim);
  font-size: .76rem;
  font-weight: 600;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  cursor: pointer;
  transition: background .14s, color .14s;
}

.nav-group-body .nav-dd-group-btn:hover {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.75), 0 0 20px rgba(143,203,255,.45);
}

.nav-group-body .nav-dd-group.open > .nav-dd-group-btn {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.nav-group-body .nav-dd-caret {
  transition: transform .2s ease;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  /* border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35); */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-group-body .nav-dd-caret svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-group-body .nav-dd-group.open .nav-dd-caret {
  transform: rotate(180deg);
}

.nav-group-body .nav-dd-group-body {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height .28s ease;
  background: var(--bg-dark);
}

.nav-group-body .nav-dd-group.open .nav-dd-group-body {
  padding: 3px 3px 6px;
}

.nav-group-body .nav-dd-item-sub {
  padding-left: 16px;
  font-size: .75rem;
}

.nav-group-body .nav-dd-item-sub2 {
  padding-left: 30px;
  font-size: .72rem;
  color: var(--text-muted);
}

/* ─”€─”€ Type-prefix badge (QUEST / GUIDE) ─”€─”€ */
.nav-cat-prefix {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 1px 6px 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  margin-right: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-cat-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flex wrapper para la etiqueta del botón de grupo */
.nav-dd-group-label {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Grupo con prefijo ─†’ mismo estilo que items normales */
.nav-group-body .nav-dd-group.nav-cat--prefixed {
  background: transparent;
}

.nav-group-body .nav-dd-group.nav-cat--prefixed > .nav-dd-group-btn {
  color: var(--text-dim);
}

.nav-group-body .nav-dd-group.nav-cat--prefixed.open > .nav-dd-group-btn {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

/* Enlace standalone con prefijo ─†’ sin borde, estilo normal */
.nav-group-body .nav-dd-item.nav-cat--prefixed {
  border: none;
  background: transparent;
  margin: 2px 5px 2px 3px;
  border-radius: 7px;
  display: flex;
  align-items: center;
}

.nav-group-body .nav-dd-item.nav-cat--prefixed:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

/* ─”€─”€ Sub-grupo plegable (nivel 3: ej. SET ITEMS, WEAPONS) ─”€─”€ */
.nav-dd-subgroup {
  margin: 1px 0;
}

.nav-dd-subgroup-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 6px 16px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: .75rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 6px;
  transition: background .13s, color .13s;
  text-align: left;
}

.nav-dd-subgroup-btn:hover {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.75), 0 0 20px rgba(143,203,255,.45);
}

.nav-dd-subgroup-btn > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-dd-subgroup.open > .nav-dd-subgroup-btn {
  color: var(--accent-light);
  border-color: rgba(0, 217, 255, .34);
  box-shadow: 0 0 0 1px rgba(0, 217, 255, .12) inset;
  background: rgba(0, 217, 255, .08);
}

.nav-dd-subgroup.open > .nav-dd-subgroup-btn > .nav-dd-caret {
  transform: rotate(180deg);
}

.nav-dd-subgroup-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}



/* .sidebar-user-btn inherits .nav-link styles */
.sidebar-user-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─”€─”€ Compact mode ─”€─”€ */
.site-shell.sidebar-compact .nav-group-body {
  max-height: 0 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.site-shell.sidebar-compact .nav-arrow,
.site-shell.sidebar-compact .sidebar-user-menu {
  display: none !important;
}

.site-shell.sidebar-compact .sidebar-user-wrap .user-name,
.site-shell.sidebar-compact .sidebar-user-wrap .btn-logout span {
  display: none;
}

.sidebar-module {
  background: #141b28;
  border: 1px solid #2A3139;
  border-radius: 14px;
  padding: 12px;
}

.sidebar-module-title {
  color: #ecf2ff;
  font-family: var(--font-display);
  font-size: .95rem;
  margin-bottom: 4px;
}

.sidebar-module-desc {
  color: #8e9ab5;
  font-size: .72rem;
  margin-bottom: 10px;
}

.sidebar-module-block {
  border: 1px solid #242f44;
  border-radius: 10px;
  overflow: hidden;
  background: #101827;
  margin-bottom: 8px;
}

.sidebar-module-block.active {
  border-color: rgba(62,143,240,.7);
}

.sidebar-module-toggle {
  width: 100%;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: #182235;
  color: #dbe5ff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}

.sidebar-module-menu {
  display: none;
  padding: 6px;
}

.sidebar-module-menu.open {
  display: block;
}

.sidebar-module .nav-dropdown-menu-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.sidebar-module .nav-dd-item {
  font-size: .74rem;
  padding: 8px 9px;
  border-radius: 8px;
  color: #b2c0de;
}

.sidebar-module .nav-dd-group {
  border: 1px solid #2a3550;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #111a2a;
}

.sidebar-module .nav-dd-group-btn {
  width: 100%;
  border: 0;
  background: #16233a;
  color: #e2ebff;
  font-size: .74rem;
  font-weight: 700;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.sidebar-module .nav-dd-group-body {
  display: none;
  padding: 6px;
}

.sidebar-module .nav-dd-group.open .nav-dd-group-body {
  display: block;
}

.sidebar-module .nav-dd-group.open .nav-dd-group-btn span:last-child {
  transform: rotate(180deg);
}

.sidebar-module .nav-dd-group-btn span:last-child {
  transition: transform .2s ease;
}

.sidebar-module .nav-dd-item-sub {
  padding-left: 16px;
  font-size: .72rem;
}

.sidebar-module .nav-dd-item-sub2 {
  padding-left: 24px;
  font-size: .7rem;
  color: #93a3c7;
}

.sidebar-module .nav-dd-item:hover {
  transform: none;
  background: #1b2740;
  color: #fff;
}

.sidebar-auth-zone {
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 14px 12px;
  flex-shrink: 0;
}

.sidebar-auth-zone .auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-auth-zone .btn-auth {
  width: 100%;
  justify-content: center;
}

/* Logout button ─€” override btn-auth specificity */
.sidebar-auth-zone .btn-logout {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-dim);
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: var(--font-body);
  justify-content: flex-start;
}

.sidebar-auth-zone .btn-logout::before {
  content: '';
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sidebar-auth-zone .btn-logout:hover {
  background: rgba(211,47,47,.12);
  border-color: rgba(211,47,47,.4);
  color: var(--danger);
}

/* Inline user panel ─€” nav-group-body style for user menu */
.sidebar-user-menu {
  margin: 0 0 4px 14px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.sidebar-user-menu .user-dd-item {
  display: block;
  padding: 8px 10px;
  font-size: .8rem;
  border-radius: 7px;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  width: 100%;
  transition: background .14s, color .14s;
}

.sidebar-user-menu .user-dd-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  transform: none;
}

.site-shell.sidebar-compact {
  grid-template-columns: 84px minmax(0, 1fr);
}

.site-shell.sidebar-compact .nav-tx,
.site-shell.sidebar-compact .sidebar-module,
.site-shell.sidebar-compact .sidebar-auth-zone .btn-auth:not(.btn-logout),
.site-shell.sidebar-compact .sidebar-auth-zone .user-name,
.site-shell.sidebar-compact .sidebar-auth-zone .user-dd-arrow,
.site-shell.sidebar-compact .sidebar-logo img,
.site-shell.sidebar-compact .sidebar-profile-info,
.site-shell.sidebar-compact .btn-logout-label,
.site-shell.sidebar-compact .sidebar-search-wrap {
  display: none;
}

/* En compact el btn-logout muestra solo el icono centrado */
.site-shell.sidebar-compact .sidebar-auth-zone .btn-logout {
  width: 42px;
  padding: 11px;
  justify-content: center;
  border-radius: 10px;
  margin: 0 auto;
}

.site-shell.sidebar-compact .sidebar-auth-zone {
  padding: 10px 8px;
  align-items: center;
}

.site-shell.sidebar-compact .sidebar-top {
  justify-content: center;
}

.site-shell.sidebar-compact .site-sidebar {
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
}

.site-shell.sidebar-compact .site-sidebar .main-nav,
.site-shell.sidebar-compact .sidebar-auth-zone,
.site-shell.sidebar-compact .sidebar-auth-zone .auth-buttons {
  width: 100%;
}

.site-shell.sidebar-compact .site-sidebar .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.site-shell.sidebar-compact .nav-ic {
  margin: 0;
  font-size: 1.3rem;
  width: 32px;
  height: 32px;
}

.site-shell.sidebar-compact .sidebar-auth-zone .btn-auth {
  padding: 8px;
  font-size: 0;
}

.site-shell.sidebar-compact .sidebar-auth-zone .btn-auth::after {
  content: '─';
  font-size: .8rem;
}

/* ─”€─”€ Compact mode: ocultar nav-arrow y gear, overflow para tooltips ─”€─”€ */
.site-shell.sidebar-compact .nav-arrow,
.site-shell.sidebar-compact .sidebar-profile-gear {
  display: none;
}

.site-shell.sidebar-compact .site-sidebar {
  overflow: visible;
}

.site-shell.sidebar-compact .site-sidebar .main-nav {
  overflow: visible;
}

/* En compact el profile muestra solo el avatar centrado */
.site-shell.sidebar-compact .sidebar-profile {
  justify-content: center;
  padding: 14px 8px;
}

/* Tooltips en compact: SOLO en plegables (grupos) para poder navegar */
.site-shell.sidebar-compact .site-sidebar .nav-link--group::after {
  display: none; /* reemplazado por flyout JS */
}

/* ─”€─”€ Compact flyout panel ─”€─”€ */
.sidebar-compact-flyout {
  position: fixed;
  z-index: 9999;
  background: var(--bg-dark);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px;
  padding: 6px;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.72), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent;
  animation: scfIn .14s cubic-bezier(.4,0,.2,1);
}

@keyframes scfIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sidebar-compact-flyout .scf-header {
  padding: 7px 12px 5px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(62,143,240,.15);
  margin-bottom: 4px;
}

.sidebar-compact-flyout .scf-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: .82rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
  white-space: nowrap;
}

.sidebar-compact-flyout .scf-item:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text);
}

/* Reduce transparency site-wide and make cards cleaner/futuristic */
.stat-card,
.info-card,
.rank-table,
.pn-item,
.donation-card,
.guide-card,
.auth-box,
.home-rank-card,
.guild-card,
.user-panel,
.profile-card,
.feature-card,
.news-card,
.home-news-item,
.wiki-card,
.home-patch-item,
.class-slide {
  background-color: rgba(27,32,38,.45) !important;
  background-image: var(--glass-card) !important;
  border-color: rgba(42,49,57,.95);
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

/* News carousel card ─€” image visible */
.news-card--carousel {
  background-color: rgba(27,32,38,.45);
  background-image: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.news-card--carousel:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}
.news-card--carousel .news-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}
.news-card--carousel .news-card-body {
  padding: 18px;
}

.site-footer {
  background: #0f141e;
  border-top: 1px solid #2A3139;
}

@media (max-width: 1024px) {
  .site-shell {
    grid-template-columns: 1fr;
  }

  .site-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #2A3139;
  }

  .site-shell.sidebar-compact {
    grid-template-columns: 1fr;
  }

  .site-shell.sidebar-compact .nav-tx,
  .site-shell.sidebar-compact .sidebar-module,
  .site-shell.sidebar-compact .sidebar-auth-zone .btn-auth:not(.btn-logout),
  .site-shell.sidebar-compact .sidebar-auth-zone .user-name,
  .site-shell.sidebar-compact .sidebar-auth-zone .user-dd-arrow,
  .site-shell.sidebar-compact .sidebar-logo img {
    display: initial;
  }
}

/* ─
   THEME SYSTEM ─€” Predefined themes
   ─ */

/* ─”€─”€ Crimson Knight ─”€─”€ Deep red, dark steel ─”€─”€ */
[data-theme="crimson"] {
  --bg-dark: #0c0808;
  --bg-card: #161010;
  --bg-card-hover: #221818;
  --bg-surface: #1a1212;
  --bg-input: #241a1a;
  --border: #3a2222;
  --border-glow: #dc262640;
  --text: #f0e0e0;
  --text-dim: #aa8888;
  --text-muted: #705555;
  --accent: #dc2626;
  --accent-light: #ef4444;
  --accent-glow: #dc262660;
  --gold: #c23a24;
  --gold-glow: #c23a2440;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --gradient-hero: linear-gradient(135deg, #0c0808 0%, #2a0a0a 50%, #0c0808 100%);
  --gradient-card: linear-gradient(145deg, #161010, #221818);
  --gradient-accent: linear-gradient(135deg, #dc2626, #ef4444);
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 4px 20px rgba(0,0,0,.7);
  --shadow-glow: 0 0 25px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.05);
  --bg-dropdown: #161010;
}

/* ─”€─”€ Ocean Abyss ─”€─”€ Deep blue, teal accents ─”€─”€ */
[data-theme="ocean"] {
  --bg-dark: #060a10;
  --bg-card: #121214;
  --bg-card-hover: #171719;
  --bg-surface: #101a28;
  --bg-input: #162030;
  --border: #1e3450;
  --border-glow: #0ea5e940;
  --text: #e0eef8;
  --text-dim: #7aaccc;
  --text-muted: #4a7a9a;
  --accent: #0ea5e9;
  --accent-light: #38bdf8;
  --accent-glow: #0ea5e960;
  --gold: #f5c542;
  --gold-glow: #f5c54240;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --gradient-hero: linear-gradient(135deg, #060a10 0%, #0a1e3a 50%, #060a10 100%);
  --gradient-card: linear-gradient(145deg, #121214, #171719);
  --gradient-accent: linear-gradient(135deg, #0ea5e9, #38bdf8);
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 8px 32px rgba(0,0,0,.3);
  --shadow-glow: 0 0 30px var(--accent-glow), 0 0 60px rgba(14,165,233,.1);
  --bg-dropdown: #121214;
}

/* ─”€─”€ Emerald Forest ─”€─”€ Green tones, nature feel ─”€─”€ */
[data-theme="emerald"] {
  --bg-dark: #060c08;
  --bg-card: #0c1610;
  --bg-card-hover: #142218;
  --bg-surface: #101a14;
  --bg-input: #16241a;
  --border: #1e3a28;
  --border-glow: #10b98140;
  --text: #e0f0e8;
  --text-dim: #7aaa8c;
  --text-muted: #4a7a5c;
  --accent: #10b981;
  --accent-light: #34d399;
  --accent-glow: #10b98160;
  --gold: #f5c542;
  --gold-glow: #f5c54240;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --gradient-hero: linear-gradient(135deg, #060c08 0%, #0a2e18 50%, #060c08 100%);
  --gradient-card: linear-gradient(145deg, #0c1610, #142218);
  --gradient-accent: linear-gradient(135deg, #10b981, #34d399);
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.25);
  --shadow-glow: 0 0 25px var(--accent-glow);
  --bg-dropdown: #0c1610;
}

/* ─”€─”€ Golden Dynasty ─”€─”€ Black & gold, luxurious ─”€─”€ */
[data-theme="golden"] {
  --bg-dark: #0a0a06;
  --bg-card: #14120c;
  --bg-card-hover: #201c12;
  --bg-surface: #181610;
  --bg-input: #221e14;
  --border: #3a3420;
  --border-glow: #d4990040;
  --text: #f0ece0;
  --text-dim: #b0a880;
  --text-muted: #706840;
  --accent: #d49900;
  --accent-light: #f5b800;
  --accent-glow: #d4990060;
  --gold: #f5c542;
  --gold-glow: #f5c54240;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --gradient-hero: linear-gradient(135deg, #0a0a06 0%, #2a2008 50%, #0a0a06 100%);
  --gradient-card: linear-gradient(145deg, #14120c, #201c12);
  --gradient-accent: linear-gradient(135deg, #d49900, #f5b800);
  --radius: 2px;
  --radius-sm: 1px;
  --shadow: 0 2px 16px rgba(0,0,0,.6);
  --shadow-glow: 0 0 20px var(--accent-glow), 0 0 40px rgba(212,153,0,.05);
  --bg-dropdown: #14120c;
}

/* ─”€─”€ Frost ─”€─”€ Cool white/blue, light contrast ─”€─”€ */
[data-theme="frost"] {
  --bg-dark: #0a0e14;
  --bg-card: #141416;
  --bg-card-hover: #18181b;
  --bg-surface: #141c28;
  --bg-input: #1a2438;
  --border: #283848;
  --border-glow: #6cb4ee40;
  --text: #e8f0f8;
  --text-dim: #8aacc8;
  --text-muted: #5a7a98;
  --accent: #6cb4ee;
  --accent-light: #93c5fd;
  --accent-glow: #6cb4ee60;
  --gold: #fbbf24;
  --gold-glow: #fbbf2440;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --gradient-hero: linear-gradient(135deg, #0a0e14 0%, #16161a 50%, #0a0e14 100%);
  --gradient-card: linear-gradient(145deg, #10162e, #18181b);
  --gradient-accent: linear-gradient(135deg, #6cb4ee, #93c5fd);
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 2px 12px rgba(0,0,0,.2);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --bg-dropdown: #141416;
}

/* ─”€─”€ Inferno ─”€─”€ Warm brown/fire tones ─”€─”€ */
[data-theme="inferno"] {
  --bg-dark: #0e0906;
  --bg-card: #1a1008;
  --bg-card-hover: #261a0e;
  --bg-surface: #1e1410;
  --bg-input: #2a1c12;
  --border: #3d2a18;
  --border-glow: #c8651a40;
  --text: #f5e8d8;
  --text-dim: #c89a78;
  --text-muted: #886048;
  --accent: #c8651a;
  --accent-light: #ff8c00;
  --accent-glow: #c8651a60;
  --gold: #fbbf24;
  --gold-glow: #fbbf2440;
  --success: #22c55e;
  --danger: #ef4444;
  --info: #3b82f6;
  --gradient-hero: linear-gradient(135deg, #0e0906 0%, #2a1208 50%, #0e0906 100%);
  --gradient-card: linear-gradient(145deg, #1a1008, #261a0e);
  --gradient-accent: linear-gradient(135deg, #c8651a, #ff8c00);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,.6);
  --shadow-glow: 0 0 35px var(--accent-glow), 0 0 70px rgba(200,101,26,.1);
  --bg-dropdown: #1a1008;
}

/* Smooth theme transitions */
body, .site-header, .site-footer, .auth-box, .stat-card, .news-card,
.info-card, .rank-table, .pn-item, .donation-card, .guide-card,
.nav-link, .sf-btn, .btn-auth, .auth-field input, .rank-tabs,
.section-link, .donation-btn, .btn-auth, .home-rank-card {
  transition: background .4s ease, color .4s ease, border-color .4s ease,
              box-shadow .4s ease, border-radius .4s ease;
}

html { scroll-behavior: smooth; }

/* ─
   TEMPLATE STRUCTURAL STYLES
   ─ */

/* ─”€─”€ Crimson Knight ─€” Gothic / Angular ─”€─”€ */
[data-theme="crimson"] .site-header {
  background: #0c0808;
  border-bottom-width: 2px;
}
[data-theme="crimson"] .stat-card,
[data-theme="crimson"] .news-card,
[data-theme="crimson"] .class-slide,
[data-theme="crimson"] .info-card,
[data-theme="crimson"] .donation-card,
[data-theme="crimson"] .guide-card,
[data-theme="crimson"] .pn-item,
[data-theme="crimson"] .home-rank-card {
  border-top: 2px solid var(--accent);
}
[data-theme="crimson"] .section-title::before {
  width: 3px; border-radius: 0;
}
[data-theme="crimson"] .auth-box {
  border-top: 3px solid var(--accent);
}
[data-theme="crimson"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--bg-dark) 0%, transparent 20%, transparent 80%, var(--bg-dark) 100%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 15%, transparent 85%, var(--bg-dark) 100%);
}

/* ─”€─”€ Ocean Abyss ─€” Glassmorphism ─”€─”€ */
[data-theme="ocean"] .site-header {
  background: #060a10;
}
[data-theme="ocean"] .stat-card,
[data-theme="ocean"] .news-card,
[data-theme="ocean"] .class-slide,
[data-theme="ocean"] .info-card,
[data-theme="ocean"] .donation-card,
[data-theme="ocean"] .guide-card,
[data-theme="ocean"] .pn-item,
[data-theme="ocean"] .home-rank-card,
[data-theme="ocean"] .auth-box {
  background: #121214;
  border-color: rgba(14,165,233,.15);
}
[data-theme="ocean"] .stat-card:hover,
[data-theme="ocean"] .news-card:hover,
[data-theme="ocean"] .class-slide:hover,
[data-theme="ocean"] .donation-card:hover,
[data-theme="ocean"] .guide-card:hover,
[data-theme="ocean"] .home-rank-card:hover {
  background: #171719;
  border-color: rgba(14,165,233,.3);
}
[data-theme="ocean"] .section-title::before {
  background: linear-gradient(180deg, var(--accent), transparent);
}
[data-theme="ocean"] .btn-auth,
[data-theme="ocean"] .section-link,
[data-theme="ocean"] .donation-btn {
  border-radius: 8px;
}
[data-theme="ocean"] .rank-tabs {
  border-radius: 16px;
  background: #121214;
}
[data-theme="ocean"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--bg-dark) 0%, transparent 20%, transparent 80%, var(--bg-dark) 100%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 15%, transparent 85%, var(--bg-dark) 100%);
}

/* ─”€─”€ Emerald Forest ─€” Organic / Soft ─”€─”€ */
[data-theme="emerald"] .site-header {
  background: #060c08;
  border-bottom-color: rgba(16,185,129,.15);
}
[data-theme="emerald"] .stat-card,
[data-theme="emerald"] .news-card,
[data-theme="emerald"] .class-slide,
[data-theme="emerald"] .info-card,
[data-theme="emerald"] .donation-card,
[data-theme="emerald"] .guide-card,
[data-theme="emerald"] .pn-item,
[data-theme="emerald"] .home-rank-card {
  border-color: rgba(16,185,129,.12);
}
[data-theme="emerald"] .section-title::before {
  width: 6px; height: 20px; border-radius: 10px;
}
[data-theme="emerald"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--bg-dark) 0%, transparent 20%, transparent 80%, var(--bg-dark) 100%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 15%, transparent 85%, var(--bg-dark) 100%);
}
[data-theme="emerald"] .btn-auth,
[data-theme="emerald"] .donation-btn {
  border-radius: 8px;
}
[data-theme="emerald"] .auth-box {
  border-color: rgba(16,185,129,.2);
}

/* ─”€─”€ Golden Dynasty ─€” Elegant / Luxury ─”€─”€ */
[data-theme="golden"] .site-header {
  background: #0a0a06;
  border-bottom-color: var(--gold);
}
[data-theme="golden"] .stat-card,
[data-theme="golden"] .news-card,
[data-theme="golden"] .class-slide,
[data-theme="golden"] .info-card,
[data-theme="golden"] .donation-card,
[data-theme="golden"] .guide-card,
[data-theme="golden"] .pn-item,
[data-theme="golden"] .home-rank-card {
  border-left: 3px solid var(--gold);
}
[data-theme="golden"] .section-title::before {
  width: 3px; border-radius: 0;
  background: linear-gradient(180deg, var(--gold), transparent);
}
[data-theme="golden"] .auth-box {
  border-color: rgba(212,153,0,.3);
  border-top: 3px solid var(--gold);
}
[data-theme="golden"] .nav-link.active::after {
  background: var(--gold);
}
[data-theme="golden"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--bg-dark) 0%, transparent 20%, transparent 80%, var(--bg-dark) 100%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 15%, transparent 85%, var(--bg-dark) 100%);
}

/* ─”€─”€ Frost ─€” Clean / Minimal ─”€─”€ */
[data-theme="frost"] .site-header {
  background: #0a0e14;
  border-bottom-color: rgba(108,180,238,.1);
}
[data-theme="frost"] .stat-card,
[data-theme="frost"] .news-card,
[data-theme="frost"] .class-slide,
[data-theme="frost"] .info-card,
[data-theme="frost"] .donation-card,
[data-theme="frost"] .guide-card,
[data-theme="frost"] .pn-item,
[data-theme="frost"] .home-rank-card {
  border-color: rgba(108,180,238,.1);
  box-shadow: none;
}
[data-theme="frost"] .stat-card:hover,
[data-theme="frost"] .news-card:hover,
[data-theme="frost"] .class-slide:hover,
[data-theme="frost"] .donation-card:hover,
[data-theme="frost"] .guide-card:hover,
[data-theme="frost"] .home-rank-card:hover {
  box-shadow: 0 4px 16px rgba(108,180,238,.1);
}
[data-theme="frost"] .section-title::before {
  width: 3px; height: 20px;
}
[data-theme="frost"] .auth-box {
  border-color: rgba(108,180,238,.15);
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
}
[data-theme="frost"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--bg-dark) 0%, transparent 20%, transparent 80%, var(--bg-dark) 100%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 15%, transparent 85%, var(--bg-dark) 100%);
}

/* ─”€─”€ Inferno ─€” Warm / Intense ─”€─”€ */
[data-theme="inferno"] .site-header {
  background: #0e0906;
  border-bottom-color: rgba(200,101,26,.4);
  box-shadow: 0 2px 20px rgba(200,101,26,.08);
}
[data-theme="inferno"] .stat-card,
[data-theme="inferno"] .news-card,
[data-theme="inferno"] .class-slide,
[data-theme="inferno"] .info-card,
[data-theme="inferno"] .donation-card,
[data-theme="inferno"] .guide-card,
[data-theme="inferno"] .pn-item,
[data-theme="inferno"] .home-rank-card {
  border-bottom: 2px solid rgba(200,101,26,.25);
}
[data-theme="inferno"] .stat-card:hover,
[data-theme="inferno"] .news-card:hover,
[data-theme="inferno"] .class-slide:hover,
[data-theme="inferno"] .donation-card:hover,
[data-theme="inferno"] .guide-card:hover,
[data-theme="inferno"] .home-rank-card:hover {
  border-bottom-color: var(--accent);
  box-shadow: 0 6px 24px rgba(200,101,26,.15), 0 0 40px rgba(200,101,26,.06);
}
[data-theme="inferno"] .section-title::before {
  background: linear-gradient(180deg, var(--accent), #ff8c00, transparent);
}
[data-theme="inferno"] .auth-box {
  border-color: rgba(200,101,26,.3);
  box-shadow: var(--shadow), 0 0 60px rgba(200,101,26,.08);
}
[data-theme="inferno"] .hero-section::before {
  background:
    linear-gradient(180deg, var(--bg-dark) 0%, transparent 20%, transparent 80%, var(--bg-dark) 100%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 15%, transparent 85%, var(--bg-dark) 100%);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: default;
  caret-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, select, [contenteditable="true"] {
  caret-color: auto;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

a { color: var(--accent-light); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; }

/* ─”€─”€ Scrollbar ─”€─”€ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }

/* ─
   HEADER
   ─ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
}

/* ── Barra superior fina ── */
.header-topbar {
  background: rgba(26,26,26,.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 34px;
}
.topbar-published {
  font-size: .72rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.topbar-published strong { color: var(--gold); font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-link {
  font-size: .72rem; color: var(--text-dim); text-decoration: none;
  transition: var(--transition);
}
.topbar-link:hover { color: #fff; }
.topbar-btn {
  position: relative;
  overflow: hidden;
  font-size: .72rem; font-weight: 700;
  color: #fff; text-decoration: none;
  padding: 5px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: var(--transition);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 2px 5px rgba(0,0,0,.4);
}
.topbar-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  mix-blend-mode: overlay;
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .6s ease;
}
.topbar-btn:hover {
  border-color: var(--gold); color: var(--gold);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 4px 10px rgba(0,0,0,.5),
    0 0 12px rgba(62,143,240,.25);
}
.topbar-btn:hover::after { left: 130%; }

.header-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center; column-gap: 24px;
  padding: 0 28px; height: 96px;
}
.header-left { display: flex; align-items: center; gap: 18px; min-width: 0; justify-self: start; }
.header-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.header-logo .logo-img { height: 62px; width: auto; display: block; }
.header-nav { margin: 0; justify-self: center; }

.logo {
  display: flex; align-items: center;
  text-decoration: none;
  position: relative;
}
.logo-img {
  height: 40px; width: auto;
  filter: drop-shadow(0 0 8px var(--gold-glow));
  transition: var(--transition);
  position: relative;
  z-index: 1;
}
.logo:hover .logo-img { filter: drop-shadow(0 0 14px var(--gold-glow)); transform: scale(1.03); }

.main-nav { display: flex; gap: 4px; align-items: normal; }
.nav-link {
  padding: 8px 16px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: .9rem; font-weight: 500;
  transition: var(--transition); position: relative;
  display: inline-block;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -1px;
  left: -24px; transform: none;
  width: 24px; height: 2px; background: var(--accent-light); border-radius: 1px;
  opacity: 0;
  transition: left .35s cubic-bezier(.4,0,.2,1), opacity .15s ease;
}
.nav-link:hover {
  color: #fff;
  transform: scale(1.05);
}
.nav-link:hover::after {
  left: calc(50% - 12px);
  opacity: 1;
}
.nav-link.active {
  color: var(--accent-light);
}
.nav-link.active::after {
  left: calc(50% - 12px);
  opacity: 1;
}

/* ─”€─”€ Nav Dropdown Menus ─”€─”€ */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  display: none; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 6px;
  z-index: 1000;
}
.nav-dropdown-menu-inner {
  background: var(--bg-dropdown);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 180px; padding: 6px;
  display: flex; flex-direction: column;
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}
.nav-dd-item {
  display: block; padding: 8px 14px;
  color: var(--text-dim); font-size: .85rem;
  border-radius: 6px; transition: background .2s, color .2s, transform .2s ease;
  white-space: nowrap; text-decoration: none;
}
.nav-dd-item:hover {
  background: transparent; color: #fff;
  transform: none;
  text-shadow: 0 0 10px rgba(255,255,255,.75), 0 0 20px rgba(62,143,240,.45);
}

/* ─”€─”€ Server Clock ─”€─”€ */
.server-clock {
  display: flex; gap: 24px; justify-content: center; margin-bottom: 12px;
}
.clock-col {
  display: flex; flex-direction: column; align-items: center;
}
.clock-time {
  font-family: var(--font-display); font-size: 2.8rem;
  font-weight: 700; color: var(--accent-light); line-height: 1.1;
}
.clock-label {
  font-size: .6rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .3px;
}
.clock-date {
  font-size: .55rem; color: var(--text-muted);
}

.header-right { display: flex; align-items: center; gap: 16px; }
.server-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  font-size: .8rem; font-weight: 600;
  transition: all .4s ease;
}
.server-status.online {
  background: rgba(50,205,50,.15); border-color: rgba(50,205,50,.5);
  box-shadow: 0 0 12px rgba(50,205,50,.2);
}
.server-status.offline {
  background: rgba(255,0,0,.15); border-color: rgba(255,0,0,.5);
  box-shadow: 0 0 12px rgba(255,0,0,.2);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
  transition: all .4s ease;
}
.server-status.offline .status-dot {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.status-text { color: var(--success); transition: color .4s ease; }
.server-status.offline .status-text { color: var(--danger); }

/* ─”€─”€ Server Status Ring (Home) ─”€─”€ */
.home-section--news {
  position: relative;
}
.home-section--news > .server-ring {
  position: absolute; left: 100px; top: -115px;
  transform: translateY(-50%);
}
.server-ring {
  position: relative; width: 80px; height: 80px; flex-shrink: 0;
}
.server-ring svg {
  width: 80px; height: 80px; transform: rotate(-90deg);
}
.server-ring .ring-bg {
  fill: none; stroke: rgba(255,255,255,.07); stroke-width: 8;
}
.server-ring .ring-fill {
  fill: none; stroke: var(--success); stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 314; stroke-dashoffset: 314;
  transition: stroke-dashoffset 1.2s ease, stroke .4s ease;
}
.server-ring.offline .ring-fill {
  stroke: var(--danger); stroke-dashoffset: 314 !important;
}
.server-ring-info {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.server-ring-status {
  font-family: var(--font-display); font-size: .85rem;
  font-weight: 700; color: var(--success); line-height: 1;
}
.server-ring.offline .server-ring-status { color: var(--danger); }
.server-ring-count {
  font-size: .55rem; color: var(--text-dim); margin-top: 2px;
}

/* ─”€─”€ Language Selector ─”€─”€ */
/* ─”€─”€ Footer Language Selector ─”€─”€ */
.footer-lang {
  position: relative; display: inline-flex; align-items: center;
  margin-bottom: 12px;
}
.footer-lang-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.footer-lang-btn:hover {
  border-color: var(--accent); background: var(--accent-glow);
}
.footer-lang-btn .lang-flag { width: 26px; height: 18px; object-fit: cover; border-radius: 2px; display: block; }
.footer-lang-btn .lang-name {
  font-size: .85rem; font-weight: 600; color: var(--accent-light);
  letter-spacing: .5px;
}
.footer-lang-btn .lang-arrow {
  font-size: .7rem; color: var(--text-dim); transition: transform .2s;
}
.footer-lang.open .lang-arrow { transform: rotate(180deg); }
.footer-lang-dropdown {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--bg-dropdown);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 -8px 28px rgba(0,0,0,.6);
  min-width: 180px; padding: 8px;
  display: none; flex-direction: column;
  text-align: center; z-index: 1000;
}
.footer-lang.open .footer-lang-dropdown { display: flex; }
.footer-lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .2s, color .2s;
  width: 100%;
  text-align: left;
}
.footer-lang-option .lang-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; display: block; flex-shrink: 0; }
.footer-lang-option:hover {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 18px rgba(255,255,255,.4);
}
.footer-lang-option:hover .lang-flag {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
}
.footer-lang-option.active {
  color: var(--gold);
  background: rgba(62,143,240,.1);
}

/* ─”€─”€ Countdown / Opening Page ─”€─”€ */
.countdown-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px 24px;
  background: radial-gradient(ellipse at center, rgba(61,165,245,.08) 0%, transparent 70%);
}
.countdown-logo { max-width: 420px; width: 80%; margin-bottom: 32px; filter: drop-shadow(0 0 40px rgba(61,165,245,.4)); }
.countdown-title {
  font-family: var(--font-display); font-size: 2.4rem; color: var(--text);
  margin-bottom: 8px; text-shadow: 0 0 20px rgba(61,165,245,.3);
}
.countdown-sub { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 40px; }
.countdown-timer {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 40px;
}
.countdown-unit {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px; min-width: 90px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.countdown-number {
  display: block; font-family: var(--font-display); font-size: 2.2rem;
  color: var(--primary); line-height: 1;
}
.countdown-label { display: block; font-size: .75rem; color: var(--text-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.countdown-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.btn-preregister {
  padding: 16px 48px; font-size: 1.15rem; font-weight: 700;
  background: linear-gradient(135deg, #A9D9FF, #3E8FF0);
  color: #fff; border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 0 20px rgba(62,143,240,.4), 0 0 40px rgba(143,203,255,.2);
  animation: preregGlow 2s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
  text-transform: uppercase; letter-spacing: 1px;
}
.btn-preregister:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(62,143,240,.6), 0 0 60px rgba(143,203,255,.3);
}
@keyframes preregGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(62,143,240,.4), 0 0 40px rgba(143,203,255,.2); }
  50% { box-shadow: 0 0 30px rgba(62,143,240,.6), 0 0 50px rgba(143,203,255,.35); }
}
.countdown-socials { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cd-social {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 600;
  transition: all .3s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.cd-social svg { width: 24px; height: 24px; flex-shrink: 0; }
.cd-social:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.cd-social.discord:hover { background: #5865F2; border-color: #5865F2; color: #fff; }
.cd-social.facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.cd-social.youtube:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.cd-social.tiktok:hover { background: #111; border-color: #69C9D0; color: #fff; }
.countdown-custom-text {
  color: var(--text-dim); font-size: 1rem; line-height: 1.6;
  max-width: 600px; margin: 0 auto 32px; padding: 16px 24px;
  background: rgba(61,165,245,.06); border: 1px solid rgba(61,165,245,.15);
  border-radius: 12px; white-space: pre-line;
}

@media (max-width: 600px) {
  .countdown-title { font-size: 1.6rem; }
  .countdown-unit { min-width: 70px; padding: 12px 14px; }
  .countdown-number { font-size: 1.6rem; }
}

.mobile-toggle {
  display: none; background: none; border: 1px solid var(--border);
  color: var(--text); font-size: 1.3rem; padding: 6px 10px;
  border-radius: var(--radius-sm); cursor: pointer;
}

/* ─
   MAIN
   ─ */
.site-main {
  padding-top: 130px;
  position: relative;
  flex: 1;
  overflow: hidden;
}
.site-main::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0;
  height: 105vh;
  background: url('../Assent/Porta/main_x.png') center top / cover no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, transparent 8%, black 28%, black 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, transparent 8%, black 28%, black 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
}
.site-main[data-page="home"]::before {
  height: 140vh;
}
.site-main > * { position: relative; z-index: 1; }

.page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; gap: 16px; color: var(--text-dim);
}
.loader {
  width: 40px; height: 40px; border: 3px solid var(--border);
  border-top-color: var(--accent-light); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─
   HOME PAGE
   ─ */
.hero-section {
  background: var(--bg-dark);
  min-height: 460px;
  padding: 0;
  margin-bottom: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('../Assent/Porta/Main.png') center 30% / cover no-repeat;
  pointer-events: none;
}
/* Difuminado en la unión entre la imagen del hero y el fondo de la página */
.hero-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-dark) 100%);
  pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,15,0.7) 0%, rgba(10,10,15,0.35) 40%, rgba(10,10,15,0.85) 100%),
    linear-gradient(90deg, rgba(10,10,15,0.6) 0%, transparent 30%, transparent 70%, rgba(10,10,15,0.6) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 40px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-tag {
  display: inline-block;
  background: var(--gold);
  color: #1a0f00;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.hero-logo {
  display: block;
  max-width: 420px; width: 42%; height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 30px var(--gold-glow));
}
.hero-title {
  font-family: var(--font-display); font-size: 3rem; font-weight: 900;
  margin-bottom: 12px; position: relative;
}
.hero-title .mu { color: var(--gold); text-shadow: 0 0 30px var(--gold-glow); }
.hero-sub { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 26px; max-width: 560px; }

/* ─”€─”€ Hero CTA Buttons ─”€─”€ */
.hero-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
  cursor: pointer;
}
.hero-cta-btn:hover { transform: translateY(-3px); }
.hero-cta-btn--primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--gold)));
  color: #fff;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 50%, transparent);
}
.hero-cta-btn--primary:hover {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 65%, transparent);
}
.hero-cta-btn--secondary {
  background: rgba(255,255,255,.07);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero-cta-btn--secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}

/* Stats Cards */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; max-width: 1000px; margin: 0 auto 40px; position: relative;
}
.stat-card {
  background: var(--gradient-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; text-align: center;
  transition: var(--transition);
}
.stat-card:hover {
  border-color: var(--accent); box-shadow: var(--shadow-glow); transform: translateY(-2px);
}
.stat-number {
  font-family: var(--font-display); font-size: 2rem; font-weight: 900;
  color: var(--gold); display: block;
  text-shadow: 0 0 15px var(--gold-glow);
}
.stat-label { color: var(--text-dim); font-size: .85rem; margin-top: 4px; }

/* Server Info */
.server-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; width: 100%;
}
.info-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.info-card h3 {
  font-family: var(--font-display); color: var(--accent-light);
  font-size: 1.1rem; margin-bottom: 16px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.info-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-dim); }
.info-value { color: var(--text); font-weight: 600; }

/* Recent News on Home */
.home-section {
  max-width: 1400px; margin: 24px auto; padding: 0 40px;
  position: relative; z-index: 2;
}
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.section-title {
  font-family: var(--font-display); font-size: 1.5rem;
  color: var(--text);
}
.section-title::before {
  content: ''; display: inline-block; width: 4px; height: 24px;
  background: var(--gradient-accent); border-radius: 2px;
  margin-right: 12px; vertical-align: middle;
}
.section-link {
  font-size: .85rem; color: var(--accent-light);
  padding: 2px 14px; border: 1px solid var(--accent);
  border-radius: 6px; transition: var(--transition);
}
.section-link:hover { background: var(--accent); color: #fff; }

/* ─
   NEWS / EVENTS CARDS
   ─ */
.news-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.news-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--transition); cursor: pointer;
}
.news-card:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}
.news-card-img {
  width: 100%; height: 180px; object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.news-card-body { padding: 20px; }
.news-card-tag {
  display: inline-block; padding: 3px 10px;
  background: var(--accent-glow); border: 1px solid var(--accent);
  border-radius: 12px; font-size: .7rem; color: var(--accent-light);
  font-weight: 600; text-transform: uppercase; margin-bottom: 10px;
}
.news-card-title {
  font-family: var(--font-display); font-size: 1.1rem;
  margin-bottom: 8px; color: var(--text); line-height: 1.3;
}
.news-card-date { color: var(--text-muted); font-size: .8rem; }

/* News grid cards (page #news) ─€” use <img> not background */
.news-card--grid {
  background-image: none !important;
  background: var(--bg-card);
}
.news-card--grid .news-card-overlay { display: none; }
.news-card--grid .news-card-body {
  position: static; padding: 20px; height: auto; max-width: 100%;
}
.news-card--grid .news-card-title { color: var(--text); text-shadow: none; font-size: 1.1rem; }
.news-card--grid .news-card-date { color: var(--text-muted); }
.news-card--grid .news-card-excerpt { color: var(--text-dim); }
.news-card-excerpt {
  color: var(--text-dim); font-size: .9rem; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─
   CAROUSEL ENGINE
   ─ */
.news-carousel,
.class-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.news-carousel {
  border: 1px solid var(--border);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.news-carousel:hover {
  border-color: rgba(26,127,224,.3);
  box-shadow: none;
  transform: none;
}
.carousel-track {
  display: flex;
  transition: transform .45s ease;
}
.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1px solid var(--border);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  transition: var(--transition); z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.carousel-btn:hover { background: var(--accent); border-color: var(--accent); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  padding: 14px 0 4px;
}
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: var(--transition);
}
.carousel-dot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* News carousel card ─€” full-bleed background image */
.news-carousel .news-card {
  position: relative; height: 300px;
  background-size: cover; background-position: center;
  background-color: var(--bg-card);
  border: none; border-radius: 0; overflow: hidden;
}
.news-carousel .news-card-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.news-carousel .news-card-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 40px 32px 72px; height: 100%; max-width: 55%;
}
.news-carousel .news-card-title { font-size: 1.4rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.news-carousel .news-card-date { color: rgba(255,255,255,.7); }
.news-carousel .news-card-tag { background: var(--accent-glow); border-color: var(--accent); color: #ddd; }
.news-carousel .news-card-excerpt {
  -webkit-line-clamp: 3; line-clamp: 3; font-size: .95rem;
  color: rgba(255,255,255,.8);
}
.news-carousel .carousel-dots {
  position: absolute; bottom: 12px; left: 0; right: 0;
  padding: 0; z-index: 3;
}
.news-carousel .carousel-dot {
  background: rgba(255,255,255,.35);
}
.news-carousel .carousel-dot.active {
  background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6);
}

/* ─
   CLASS CAROUSEL ─€” SEASON 21
   ─ */
.class-slide {
  display: flex; flex-direction: row; align-items: center;
  background: rgba(6, 10, 20, 0.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); overflow: hidden;
  min-height: 340px; transition: var(--transition);
}
.class-slide-img {
  width: 300px; min-width: 300px; height: 340px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  overflow: hidden; padding-left: 20px;
}
.class-slide-img img {
  width: 230px; height: 311px; object-fit: contain;
  border: 1px solid rgba(62,143,240,.45);
  border-radius: 4px;
  background: rgba(6,10,20,.55);
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.5));
  transition: transform .4s ease;
}
.class-slide:hover .class-slide-img img {
  transform: scale(1.05);
}
.class-slide-info {
  flex: 1; padding: 32px 36px;
}
.class-slide-type {
  display: inline-block; padding: 4px 12px;
  background: transparent; border: none;
  border-radius: 14px; font-size: .75rem; color: var(--accent-light);
  font-weight: 600; text-transform: uppercase; margin-bottom: 10px;
}
.class-slide-name {
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--text); margin: 0 0 6px; line-height: 1.2;
}
.class-slide-stats {
  display: inline-block; font-size: .8rem; color: var(--gold);
  font-weight: 600; margin-bottom: 14px;
  text-shadow: 0 0 8px var(--gold-glow);
}
.class-slide-desc {
  color: var(--text-dim); font-size: .95rem; line-height: 1.6;
  margin: 0;
}

/* ─
   HOME RANKINGS
   ─ */
.home-rankings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  justify-content: center;
  gap: 20px;
}
.home-rankings-bottom {
  margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 560px));
  justify-content: center;
}
@media (max-width: 768px) {
  .home-rankings-bottom { grid-template-columns: 1fr; }
}
.cs-home-info {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
}
.cs-guild-mark { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 4px; }
.cs-guild-details { display: flex; flex-direction: column; gap: 2px; }
.cs-guild-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); font-weight: 700; }
.cs-guild-master { font-size: .85rem; color: var(--text-dim); }
.cs-guild-stats { font-size: .8rem; color: var(--text-muted); }
.cs-no-owner { color: var(--text-dim); font-style: italic; }
.home-rank-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--transition);
}
.home-rank-card:hover {
  border-color: var(--accent); box-shadow: var(--shadow-glow);
}
.home-rank-title {
  font-family: var(--font-display); font-size: .95rem; color: var(--text);
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
  margin: 0;
}
.home-rank-body { padding: 0; }
.home-rank-table { font-size: .85rem; }
.home-rank-table th { font-size: .72rem; padding: 8px 12px; }
.home-rank-table td { padding: 8px 12px; }
.home-rank-table tbody tr:last-child td { border-bottom: none; }

/* News Detail Modal — efecto pergamino */
.news-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .35s ease;
}
.news-modal.open { display: flex; opacity: 1; }
.news-modal-box {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.45);
  border-right: 3px solid rgba(62,143,240,.45);
  border-radius: 6px; max-width: 800px; width: 100%;
  overflow: hidden; padding: 0;
  position: relative;
  /* Efecto pergamino: se despliega desde el centro hacia arriba y abajo */
  max-height: 0;
  opacity: 0;
  transform: scaleY(.6);
  transform-origin: center center;
  transition: max-height .5s cubic-bezier(.2,.8,.25,1), opacity .35s ease, transform .5s cubic-bezier(.2,.8,.25,1);
}
.news-modal.open .news-modal-box {
  max-height: 85vh;
  opacity: 1;
  transform: scaleY(1);
}
/* Contenido con scroll interno */
.news-modal-box > .news-modal-content {
  max-height: 85vh; overflow-y: auto; padding: 32px;
}
/* Rodillos del pergamino: eliminados para mantener el marco estándar
   (borde fino arriba/abajo, 3px a los lados). */
.news-modal-box::before,
.news-modal-box::after {
  content: none;
}
.news-modal-close {
  position: sticky; top: 0; float: right;
  background: rgba(0,0,0,.6); border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-dim);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer; transition: var(--transition);
  z-index: 10; margin: -8px -8px 0 auto; flex-shrink: 0;
}
.news-modal-close:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.news-modal-box h2 {
  font-family: var(--font-display); margin-bottom: 16px;
}
.news-modal-box .content-body { color: var(--text-dim); line-height: 1.8; }
.news-modal-box .content-body img { border-radius: var(--radius-sm); margin: 12px 0; max-width: 100%; }

/* Content body rich HTML (guides, events, patchnotes) */
.content-body h2, .content-body h3, .content-body h4 {
  color: var(--accent-light); font-family: var(--font-display);
  margin: 20px 0 10px; line-height: 1.3;
}
.content-body h2 { font-size: 1.4rem; }
.content-body h3 { font-size: 1.2rem; }
.content-body h4 { font-size: 1.05rem; }
.content-body p { margin: 8px 0; }
.content-body ul, .content-body ol { padding-left: 24px; margin: 10px 0; }
.content-body li { margin: 4px 0; }
.content-body a { color: var(--accent-light); text-decoration: underline; }
.content-body hr {
  border: none; border-top: 1px solid var(--border); margin: 24px 0;
}
.content-body blockquote {
  border-left: 3px solid var(--accent); padding: 10px 16px; margin: 14px 0;
  background: rgba(26,127,224,0.06); color: var(--text-dim); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.content-body kbd {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font-size: .85em; font-family: inherit;
}
.content-body strong { color: var(--text); }

/* Tables inside content */
.content-body table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: .9rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.content-body thead { background: var(--bg-surface); }
.content-body th {
  padding: 10px 14px; text-align: left; font-weight: 600;
  color: var(--accent-light); font-size: .85rem; text-transform: uppercase;
  letter-spacing: .03em; border-bottom: 2px solid var(--accent);
}
.content-body td {
  padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim);
}
.content-body tbody tr:hover td { background: var(--accent-glow); }
.content-body tbody tr:last-child td { border-bottom: none; }

/* Tabbed content sections (e.g. monster levels) */
.bc-tabs-bar {
  display: flex; justify-content: center; gap: 0;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin: 20px 0 16px;
}
.bc-tab {
  padding: 10px 20px; cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--text-dim); background: transparent; border: none;
  border-bottom: 2px solid transparent; transition: all .2s; font-family: inherit;
}
.bc-tab:hover { color: var(--accent-light); background: rgba(26,127,224,0.06); }
.bc-tab.active {
  color: var(--accent); border-bottom-color: var(--accent);
  background: rgba(26,127,224,0.08);
}
.bc-panel { display: none; }
.bc-panel.active { display: block; }

/* Monster cards grid */
.bc-monster-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0;
}
@media (max-width: 768px) {
  .bc-monster-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .bc-monster-grid { grid-template-columns: repeat(2, 1fr); }
}
.bc-monster-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; transition: border-color .2s;
}
.bc-monster-card:hover { border-color: var(--accent); }
.bc-monster-card .mc-name {
  font-weight: 700; color: var(--accent-light); font-size: .95rem;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; text-align: center;
}
.bc-monster-card .mc-body { display: flex; gap: 14px; align-items: flex-start; width: 100%; }
.bc-monster-card .mc-img {
  width: 90px; min-width: 90px; text-align: center;
}
.bc-monster-card .mc-img img { max-height: 90px; image-rendering: pixelated; }
.bc-monster-card .mc-level {
  color: var(--accent); font-weight: 700; font-size: .85rem; margin-top: 6px;
}
.bc-monster-card .mc-stats { font-size: .82rem; color: var(--text-dim); line-height: 1.7; }
.bc-monster-card .mc-stats strong { color: var(--text); font-weight: 600; }

/* ─
   PATCH NOTES
   ─ */
.patchnotes-page { max-width: 900px; margin: 0 auto; padding: 40px 24px; }
.pn-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
  transition: var(--transition);
}
.pn-item:hover { border-color: var(--accent); }
.pn-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pn-version {
  font-family: var(--font-display); color: var(--gold);
  font-size: 1.1rem; font-weight: 700;
}
.pn-date { color: var(--text-muted); font-size: .8rem; }
.pn-title { font-weight: 600; margin-bottom: 8px; }
.pn-content { color: var(--text-dim); font-size: .9rem; line-height: 1.7; }
.pn-content ul { padding-left: 20px; }
.pn-content li { margin-bottom: 4px; }

/* ─
   RANKINGS
   ─ */
.rankings-page { max-width: 1400px; margin: 0 auto; padding: 40px 40px; }
.rankings-page .section-title { margin-bottom: 24px; }

.rank-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px;
  background: var(--bg-surface); padding: 6px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.rank-tab {
  padding: 10px 18px; border: none; background: none;
  color: var(--text-dim); font-size: .85rem; font-weight: 500;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: var(--transition); font-family: var(--font-body);
}
.rank-tab:hover { color: var(--text); background: var(--accent-glow); }
.rank-tab.active { color: #fff; background: var(--accent); }

.rank-filter {
  display: flex; gap: 12px; margin-bottom: 20px; align-items: center; flex-wrap: wrap;
}
.rank-filter select, .rank-filter input {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: .85rem; font-family: var(--font-body);
}
.rank-filter select:focus, .rank-filter input:focus {
  outline: none; border-color: var(--accent);
}

/* Filtro de clases — dropdown personalizado */
.rank-select { position: relative; }
.rank-select-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 230px; padding: 9px 14px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: .85rem; font-family: var(--font-body); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.rank-select-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.rank-select-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.rank-select-caret { font-size: .7rem; color: var(--text-dim); transition: transform .2s; }
.rank-select-btn[aria-expanded="true"] .rank-select-caret { transform: rotate(180deg); }
.rank-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px;
  box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
  display: none; z-index: 50;
}
.rank-select-menu.open { display: block; }
.rank-select-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; margin: 1px 0;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-dim); font-size: .82rem; font-family: var(--font-body);
  cursor: pointer; transition: color .15s, text-shadow .15s;
}
.rank-select-opt:hover {
  background: transparent; color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.7), 0 0 18px rgba(62,143,240,.4);
}
.rank-select-opt.active { color: var(--gold); font-weight: 600; }
.rank-select-menu::-webkit-scrollbar { width: 8px; }
.rank-select-menu::-webkit-scrollbar-track { background: transparent; }
.rank-select-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 4px;
}
.rank-select-menu::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.rank-table-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.rank-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
.rank-table th {
  background: var(--bg-surface); color: var(--text-dim);
  padding: 12px 16px; text-align: left; font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
}
.rank-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-table tbody tr {
  transition: transform .2s ease, box-shadow .2s ease;
}
.rank-table tr:hover td { background: var(--accent-glow); }
.rank-table tbody tr:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px var(--accent-glow);
  position: relative; z-index: 1;
}
.rank-table tbody tr:last-child td { border-bottom: none; }

.rank-pos {
  font-family: var(--font-display); font-weight: 700;
  width: 50px; text-align: center;
}
.rank-pos.top1 { color: var(--gold); font-size: 1.1rem; text-shadow: 0 0 8px var(--gold-glow); }
.rank-pos.top2 { color: var(--text); }
.rank-pos.top3 { color: var(--accent-light); }

.rank-name { font-weight: 600; color: var(--text); }
.rank-name .guild-mark {
  width: 24px; height: 24px; margin-right: 8px; vertical-align: middle;
  image-rendering: pixelated; border-radius: 2px;
}
.rank-class-badge {
  display: inline-block;
  font-size: .75rem; font-weight: 600;
  color: var(--accent-light);
  background: none; border: none; padding: 0;
}
.rank-guild { color: var(--gold); font-size: .85rem; }
.rank-map { color: var(--text-dim); font-size: .8rem; white-space: nowrap; }

/* ─”€─”€ Castle Siege ─”€─”€ */
.cs-container { padding: 24px; }
.cs-title {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--text);
  margin-bottom: 16px;
}
.cs-owner-card {
  background: var(--gradient-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 24px;
}
.cs-guild-info {
  display: flex; align-items: center; gap: 20px;
}
.cs-guild-mark {
  width: 48px; height: 48px; image-rendering: pixelated;
  border: 2px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 12px var(--gold-glow);
}
.cs-guild-details {
  display: flex; flex-direction: column; gap: 4px;
}
.cs-guild-name {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--gold); text-shadow: 0 0 8px var(--gold-glow);
}
.cs-guild-master { color: var(--text-dim); font-size: .9rem; }
.cs-guild-master strong { color: var(--text); }
.cs-guild-stats { color: var(--text-dim); font-size: .85rem; }
.cs-no-owner {
  color: var(--text-muted); font-style: italic; padding: 12px 0;
}
.cs-participants { margin-top: 8px; }
.cs-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.cs-info-card {
  background: var(--gradient-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.cs-info-title {
  font-family: var(--font-display); font-size: .95rem; color: var(--text);
  margin: 0 0 12px 0;
}
.cs-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .88rem;
}
.cs-info-row:last-child { border-bottom: none; }
.cs-info-row span { color: var(--text-dim); }
.cs-info-row strong { color: var(--text); }
.cs-home-dates {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 12px 20px; font-size: .82rem; color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.cs-home-dates strong { color: var(--text); margin-left: 4px; }

.rank-pagination {
  display: flex; justify-content: center; gap: 8px; padding: 20px;
}
.rank-page-btn {
  padding: 8px 14px; background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: var(--radius-sm); cursor: pointer;
  transition: var(--transition); font-family: var(--font-body);
}
.rank-page-btn:hover { border-color: var(--accent); color: var(--text); }
.rank-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─
   TERMS & CONDITIONS
   ─ */
.terms-page { max-width: 800px; margin: 0 auto; padding: 40px 24px; }
.terms-main-title {
  font-family: var(--font-display); font-size: 2rem; text-align: center;
  color: var(--gold); text-shadow: 0 0 12px var(--gold-glow); margin-bottom: 32px;
}
.terms-container { display: flex; flex-direction: column; gap: 28px; }
.terms-section {
  background: var(--gradient-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.terms-section-title {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--text);
  margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.terms-list {
  list-style: none; counter-reset: terms; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.terms-list li {
  counter-increment: terms; position: relative; padding-left: 32px;
  color: var(--text-dim); font-size: .9rem; line-height: 1.6;
}
.terms-list li::before {
  content: counter(terms) '.'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; font-size: .9rem;
}

/* ─”€─”€ Auth terms checkbox ─”€─”€ */
.auth-terms { margin-bottom: 12px; }
.terms-check {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: .85rem; color: var(--text-dim); line-height: 1.4;
}
.terms-check input[type="checkbox"] {
  margin-top: 2px; accent-color: var(--accent); flex-shrink: 0;
  width: 16px; height: 16px; cursor: pointer;
}
.terms-check .terms-link { color: var(--accent); text-decoration: underline; }
.terms-check .terms-link:hover { color: var(--gold); }

/* ─”€─”€ Donate terms notice ─”€─”€ */
.donate-terms-notice {
  background: rgba(255,180,0,.06); border: 1px solid rgba(255,180,0,.2);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px;
  text-align: center;
}
.donate-terms-warn {
  color: var(--text-dim); font-size: .82rem; margin: 0 0 6px 0; line-height: 1.5;
}
.donate-terms-link {
  color: var(--accent); font-size: .8rem; text-decoration: underline; cursor: pointer;
}
.donate-terms-link:hover { color: var(--gold); }

/* ─”€─”€ Footer terms link ─”€─”€ */
.footer-terms-link {
  color: var(--text-muted); font-size: .75rem; text-decoration: underline;
  margin-top: 6px; display: inline-block; transition: var(--transition);
}
.footer-terms-link:hover { color: var(--accent); }

/* ─
   DONATIONS
   ─ */
.donations-page { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.donations-header { text-align: center; margin-bottom: 40px; }
.donations-header h1 {
  font-family: var(--font-display); font-size: 2rem; margin-bottom: 8px;
}
.donations-header p { color: var(--text-dim); }

.donation-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.donation-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; text-align: center;
  transition: var(--transition); position: relative;
}
.donation-card:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}
.donation-card.featured {
  border-color: var(--gold); box-shadow: 0 0 20px var(--gold-glow);
}
.donation-card.featured::before {
  content: '─ Popular'; position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%); background: var(--gold); color: #000;
  padding: 4px 16px; border-radius: 12px; font-size: .75rem; font-weight: 700;
}
.donation-name {
  font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 12px;
}
.donation-coins {
  font-size: 2.5rem; font-weight: 900; color: var(--gold);
  text-shadow: 0 0 15px var(--gold-glow);
}
.donation-coins-label { color: var(--text-dim); font-size: .8rem; }
.donation-bonus {
  color: var(--success); font-size: .85rem; font-weight: 600;
  margin: 8px 0;
}
.donation-price {
  font-size: 1.5rem; font-weight: 700; color: var(--text);
  margin: 12px 0;
}
.donation-desc { color: var(--text-dim); font-size: .85rem; margin-bottom: 16px; }
.donation-btn {
  display: inline-block; width: 100%; padding: 12px;
  background: var(--gradient-accent); border: none;
  color: #fff; font-weight: 600; font-size: .9rem;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: var(--transition); font-family: var(--font-body);
}
.donation-btn:hover { opacity: .9; transform: scale(1.02); }
.donation-card.featured .donation-btn {
  background: linear-gradient(135deg, var(--gold), var(--accent));
  color: #000;
}

/* Donation Modal */
.donate-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.donate-modal.open { display: flex; }
.donate-modal-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); max-width: 500px; width: 100%;
  padding: 32px; position: relative;
}
.donate-modal-box h2 {
  font-family: var(--font-display); margin-bottom: 20px;
}
.donate-form-group { margin-bottom: 16px; }
.donate-form-group label {
  display: block; color: var(--text-dim); font-size: .85rem;
  margin-bottom: 6px;
}
.donate-form-group input {
  width: 100%; padding: 10px 14px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: .9rem; font-family: var(--font-body);
}
.donate-form-group input:focus { outline: none; border-color: var(--accent); }

/* ─
   GUIDES
   ─ */
.guides-page {
  max-width: 1340px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: block;
}
.guides-sidebar {
  display: none;
}
.guides-sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guides-sidebar-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 217, 255, .22), rgba(0, 217, 255, .06));
  color: #c8f8ff;
  font-size: 1.2rem;
  box-shadow: 0 10px 20px rgba(0, 217, 255, .12);
}
.guides-sidebar-kicker,
.guides-hero-kicker {
  margin: 0 0 4px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
}
.guides-sidebar-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: #fff;
}
.guides-search {
  display: flex;
}
.guides-search input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: var(--text);
  font-size: .92rem;
  font-family: var(--font-body);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.guides-search input:focus { outline: none; border-color: var(--accent); }
.guides-top-nav {
  display: flex;
  flex: 1;
  min-height: 0;
}
.guides-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.guide-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  transition: var(--transition);
}
.guide-sidebar-section.active {
  border-color: rgba(0, 217, 255, .34);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 217, 255, .14) inset;
  padding: 8px;
}
.guide-top-btn,
.guide-subgroup-toggle,
.guide-top-sub-btn {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.guide-top-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 16px;
  text-align: left;
}
.guide-top-btn-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.guide-top-btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  font-size: 1rem;
  flex-shrink: 0;
}
.guide-top-btn-label {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.guide-top-btn small,
.guide-subgroup-toggle small,
.guide-top-sub-btn small {
  color: var(--gold);
  font-size: .72rem;
  flex-shrink: 0;
}
.guides-top-subs-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
}
.guide-subgroup {
  border: 1px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  transition: var(--transition);
}
.guide-subgroup.expanded {
  border-color: rgba(0, 217, 255, .34);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 217, 255, .14) inset;
}
.guide-subgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.guide-subgroup-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-subgroup-title {
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.guide-subgroup-caret {
  color: #ffffff;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  border-radius: 4px;
  transition: transform .2s ease, color .2s ease;
}
.guide-subgroup-caret svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guide-subgroup.expanded .guide-subgroup-caret { transform: rotate(180deg); }
.guide-subgroup-body {
  display: none;
  padding: 0 8px 8px;
  gap: 8px;
}
.guide-subgroup.expanded .guide-subgroup-body { display: grid; }
.guide-top-sub-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: .78rem;
}
.guide-top-btn:hover,
.guide-subgroup-toggle:hover,
.guide-top-sub-btn:hover {
  color: #fff;
  border-color: rgba(0, 217, 255, .34);
  background: rgba(0, 217, 255, .06);
}
.guide-top-btn.active,
.guide-subgroup-toggle.active,
.guide-top-sub-btn.active,
.guide-sidebar-section.active > .guide-top-btn {
  color: #fff;
  border-color: rgba(0, 217, 255, .40);
  background: rgba(0, 217, 255, .07);
  box-shadow: 0 0 0 1px rgba(0, 217, 255, .14) inset;
}
.guides-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.guides-search-main input {
  width: 100%;
}
.guides-hero {
  padding: 28px 30px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(0, 217, 255, .14), transparent 28%),
    radial-gradient(circle at bottom left, rgba(62,143,240,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: 0 24px 50px rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}
.guides-hero h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2vw, 2.4rem);
}
.guides-hero-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  font-size: 1.25rem;
}
.guides-hero-header {
  display: block;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.guides-hero-text {
  max-width: min(560px, 52%);
}
.guides-hero-text h2 {
  margin: 0 !important;
}
.guides-hero-logo {
  width: clamp(180px, 18vw, 280px);
  height: auto;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 24px rgba(0,217,255,.35));
  pointer-events: none;
  z-index: 1;
}
.guides-hero p:last-child {
  margin: 0;
  max-width: min(640px, 55%);
  color: var(--text-dim);
  line-height: 1.7;
  position: relative;
  z-index: 2;
}
.guides-grid { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ─”€─”€ Category Cards Grid ─”€─”€ */
.guides-categories-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;
}
.guide-cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  cursor: pointer; min-height: 220px; background: var(--bg-card) center/cover no-repeat;
  border: 1px solid var(--border); transition: var(--transition);
}
.guide-cat-card:hover {
  border-color: var(--accent); transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.guide-cat-card-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 24px; gap: 4px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 100%);
}
.guide-cat-card-icon {
  font-size: 2.2rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.guide-cat-card-name {
  font-family: var(--font-display); font-size: 1.3rem; margin: 0; color: #fff;
  text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.guide-cat-card-count {
  color: var(--gold); font-size: .85rem; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ─”€─”€ Back Bar + Category Header ─”€─”€ */
.guides-back-bar {
  display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
}
.guides-back-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border); color: var(--text);
  padding: 4px 12px; border-radius: 12px; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.guides-back-btn::before,
.rank-prev-btn::before,
.btn-back::before {
  content: '─';
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.4);
  color: #fff; font-size: .72rem; line-height: 1;
  flex-shrink: 0;
}
.guides-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.guides-back-btn:hover::before,
.rank-prev-btn:hover::before,
.btn-back:hover::before { background: rgba(0,0,0,.75); }
.rank-prev-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border); color: var(--text);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 9px;
}
.rank-prev-btn:hover { border-color: var(--accent); color: var(--accent); }
.guides-cat-header-inline {
  display: flex; align-items: center; gap: 10px;
}
.guides-cat-header-inline h2 {
  font-family: var(--font-display); color: var(--accent); margin: 0;
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: .5px;
}
.guides-cat-header-icon { font-size: 1.4rem; }
.guides-category-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  background: rgba(62,143,240,.15); color: var(--gold);
  border-radius: 12px; font-size: .75rem; font-weight: 600;
}

/* ─”€─”€ Guide Items Grid ─”€─”€ */
.guides-items-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}
.guide-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--transition); cursor: pointer;
}
.guide-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.guide-card-img {
  width: 100%; height: 180px; object-fit: cover; object-position: center 20%;
}
.guide-card-img-placeholder {
  width: 100%; height: 180px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
}
.guide-card-body { padding: 20px; }
.guide-card-title {
  font-family: var(--font-display); font-size: 1rem; margin-bottom: 6px;
}
.guide-card-excerpt { color: var(--text-dim); font-size: .85rem; line-height: 1.5; }
.guide-card-date { display: block; margin-top: 8px; font-size: .75rem; color: var(--accent); opacity: .75; }

/* ─”€─”€ Wing guide card ─”€─”€ */
.guides-items-grid--wing {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.guide-card--wing {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.guide-card--wing:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.guide-card-wing-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px 16px 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 70%);
  position: relative;
}
.guide-card-wing-img-wrap img {
  max-width: 160px;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent));
  transition: transform .2s, filter .2s;
}
.guide-card--wing:hover .guide-card-wing-img-wrap img {
  transform: scale(1.06) translateY(-3px);
  filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--accent) 50%, transparent));
}
.guide-card-wing-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.guide-card-wing-name {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-light);
  line-height: 1.3;
}
.guide-card-wing-more {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 4px;
  padding: 3px 12px;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .guides-page {
    grid-template-columns: 1fr;
    padding: 20px 16px 32px;
  }
  .guides-sidebar {
    position: static;
    min-height: 0;
  }
  .guides-hero {
    padding: 22px 20px;
    border-radius: 22px;
  }
  .guides-hero-header,
  .guides-hero p:last-child,
  .guides-hero-text {
    max-width: 100%;
  }
  .guides-hero-logo {
    width: clamp(120px, 38vw, 170px);
    opacity: .9;
  }
  .guides-categories-grid { grid-template-columns: 1fr; }
  .guide-cat-card { min-height: 180px; }
  .guides-items-grid { grid-template-columns: 1fr; }
  .guides-back-bar { flex-wrap: wrap; }
}

/* ─”€─”€ Subcategory Grid ─”€─”€ */
.guides-subcategories-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.guide-subcat-card { min-height: 180px; }
.guide-subcat-card .guide-cat-card-icon { font-size: 1.8rem; }
.guide-subcat-card .guide-cat-card-name { font-size: 1.1rem; }

/* ─”€─”€ Wing Detail Content (inside guide modal) ─”€─”€ */
.guide-detail-cover {
  text-align: center; margin: 16px 0;
}
.guide-detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.guide-detail-title {
  margin-top: 10px;
  font-family: var(--font-display);
  color: var(--text);
}
.guide-detail-content {
  color: var(--text-dim);
  line-height: 1.8;
}

/* ─”€─”€ Barra de navegación entre guías hermanas ─”€─”€ */
.guide-siblings-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 16px;
}

.guide-sibling-btn {
  padding: 8px 0;
  width: 160px;
  min-width: 120px;
  max-width: 200px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-sibling-btn:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text);
}

.guide-sibling-btn.active {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: var(--accent);
  color: var(--accent-light);
}
.guide-detail-cover img {
  max-width: 220px; image-rendering: pixelated; border-radius: 8px;
  background: rgba(0,0,0,.3); padding: 12px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
.wing-detail { max-width: 650px; margin: 0 auto; }
.wing-detail img { image-rendering: pixelated; border-radius: 8px; background: rgba(0,0,0,.3); padding: 12px; }
.wing-detail table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.wing-detail th, .wing-detail td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.wing-detail th { color: var(--text-dim); font-weight: 500; width: 45%; }
.wing-detail td { color: var(--text); font-weight: 600; }
.wing-detail h3 { font-family: var(--font-display); color: var(--accent); margin: 20px 0 10px; font-size: 1.05rem; }
.wing-detail ul { padding-left: 20px; margin: 8px 0; }
.wing-detail li { color: var(--text-dim); font-size: .85rem; line-height: 1.8; }
.wing-detail p { color: var(--text-dim); font-size: .9rem; line-height: 1.6; }

/* ─
   HOME BOTTOM BANNER
   ─ */
.home-banner-bottom {
  position: relative;
  width: 100%;
  margin-top: 48px;
  background-color: #060a14;
  background-image: url('../Assent/Porta/bg_main_intro.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  overflow: hidden;
  contain: paint;
}
.home-banner-bottom::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 140px;
  background: linear-gradient(to bottom, var(--bg-dark), transparent);
  z-index: 3; pointer-events: none;
}
.home-banner-bottom::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 140px;
  background: linear-gradient(to top, var(--bg-dark), transparent);
  z-index: 3; pointer-events: none;
}
.home-banner-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 15%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.3) 60%, transparent 85%),
    linear-gradient(90deg, var(--bg-dark) 0%, transparent 18%, transparent 82%, var(--bg-dark) 100%);
  z-index: 1;
}
.home-banner-content {
  position: relative;
  z-index: 2;
  padding: 40px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ─
   FOOTER
   ─ */
.site-footer {
  background: var(--bg-surface); border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1400px; margin: 0 auto; padding: 40px 40px 20px;
}
.footer-brand { margin-bottom: 20px; }
.footer-brand img { filter: drop-shadow(0 0 6px var(--gold-glow)); }
.footer-brand .logo-name { font-family: var(--font-display); font-size: 1.3rem; }
.footer-brand p { color: var(--text-dim); font-size: .85rem; margin-top: 4px; }
.footer-brand-text { color: var(--text-dim); font-size: .8rem; margin-top: 6px; }

.footer-links { display: flex; gap: 60px; margin-bottom: 24px; align-items: flex-start; }
.footer-col h4 {
  font-family: var(--font-display); font-size: .9rem;
  color: var(--text); margin-bottom: 12px;
}
.footer-col a {
  display: block; color: var(--text-dim); font-size: .85rem;
  padding: 4px 0; transition: var(--transition);
}
.footer-col a:hover { color: var(--accent-light); }

.footer-col--center {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.footer-logo {
  height: 120px; filter: drop-shadow(0 0 10px var(--gold-glow));
}

.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 16px;
  text-align: center;
}
.footer-bottom p { color: var(--text-muted); font-size: .75rem; }

/* Clock + Lang inside footer-links */
.footer-col--right {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}
.footer-col--right .server-clock {
  margin-bottom: 0;
}
.footer-col--right .footer-lang {
  margin-bottom: 0;
}

/* ─
   SOCIAL FLOATING
   ─ */
.social-float {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 900;
  display: flex; flex-direction: column; gap: 10px;
}
.sf-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sf-btn:hover { transform: scale(1.15); }
.sf-btn svg { width: 20px; height: 20px; }
.sf-btn.discord:hover { background: #5865F2; border-color: #5865F2; color: #fff; }
.sf-btn.youtube:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.sf-btn.facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.sf-btn.tiktok:hover { background: #000; border-color: #69C9D0; color: #fff; }

.page-jump-nav {
  position: fixed; right: 18px; bottom: 22px; z-index: 910;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.page-jump-nav.hidden-mode { display: none; }
.page-jump-btn {
  width: 50px; height: 50px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 90%, #000 10%), color-mix(in srgb, var(--bg-surface) 92%, #000 8%));
  color: var(--text); font-size: 1.08rem; font-weight: 800;
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
.page-jump-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%);
  pointer-events: none;
}
.page-jump-nav.show-top #pageJumpTop,
.page-jump-nav.show-bottom #pageJumpBottom {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.page-jump-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 16px 32px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (max-width: 768px) {
  .page-jump-nav { right: 14px; bottom: 18px; }
  .page-jump-btn { width: 44px; height: 44px; border-radius: 15px; }
}

/* ─
   UTILITIES
   ─ */
.page-title-bar {
  max-width: 1400px; margin: 0 auto;
  padding: 30px 40px; display: flex; align-items: center; justify-content: space-between;
}
.page-title-bar h1 {
  font-family: var(--font-display);
  font-size: 1.8rem; margin: 0;
}
.page-title-bar h1 .accent { color: var(--gold); }
.btn-admin-panel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold), var(--accent));
  color: #000; font-weight: 700; font-size: .85rem;
  text-decoration: none; transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.btn-admin-panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(218,165,32,.4);
  filter: brightness(1.1);
}

.empty-state {
  text-align: center; padding: 60px 24px; color: var(--text-dim);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; }

/* ─
   AUTH BUTTONS (Header)
   ─ */
.auth-buttons { display: flex; align-items: center; gap: 8px; }
.btn-auth {
  padding: 2px 16px; border-radius: 6px; font-size: .8rem;
  font-weight: 600; cursor: pointer; transition: var(--transition);
  text-decoration: none; border: none; font-family: var(--font-body);
}
.btn-login {
  color: var(--accent-light); background: transparent;
  border: 1px solid var(--accent);
}
.btn-login:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-register {
  color: #fff; background: var(--gradient-accent);
  border: 1px solid transparent;
}
.btn-register:hover { opacity: .9; }
.btn-panel {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dim); background: transparent;
  border: none;
}
.btn-panel:hover { color: var(--accent-light); background: transparent; }
.btn-panel .user-icon { font-size: .9rem; }
.btn-panel .user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-panel .user-dd-arrow {
  font-size: .65rem; color: var(--text-dim); transition: transform .2s;
}

/* ─”€─”€ User Dropdown ─”€─”€ */
.user-dropdown { position: relative; }
.user-dropdown-menu {
  display: none; position: absolute;
  top: calc(100% + 6px); right: 0;
  background: var(--bg-dropdown);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 190px; padding: 6px;
  z-index: 1001;
}
.user-dropdown.open .user-dropdown-menu { display: flex; flex-direction: column; }
.user-dropdown.open .user-dd-arrow { transform: rotate(180deg); }
.user-dd-item {
  display: block; padding: 9px 14px;
  color: var(--text-dim); font-size: .85rem;
  border-radius: 6px; transition: background .2s, color .2s, transform .2s ease;
  cursor: pointer; border: none; background: none;
  text-align: left; font-family: var(--font-body);
  text-decoration: none; white-space: nowrap;
}
.user-dd-item:hover {
  background: transparent; color: #fff;
  transform: scale(1.05);
}

/* ─
   AUTH PAGES (Login / Register)
   ─ */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 64px - 200px); padding: 60px 24px;
  background: var(--gradient-hero);
}
.auth-box {
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.45);
  border-right: 3px solid rgba(62,143,240,.45);
  border-radius: 10px; padding: 40px 32px;
  box-shadow: var(--shadow), 0 0 60px var(--accent-glow);
}
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-header h2 {
  font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 6px;
}
.auth-header h2 .mu { color: var(--gold); text-shadow: 0 0 15px var(--gold-glow); }
.auth-header p { color: var(--text-dim); font-size: .9rem; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field label {
  display: block; color: var(--text-dim); font-size: .8rem;
  font-weight: 500; margin-bottom: 6px;
}
.auth-field input {
  width: 100%; padding: 11px 14px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: .9rem; font-family: var(--font-body);
  transition: var(--transition);
}
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--border-glow); }

.auth-error {
  color: #fff; font-size: .85rem; min-height: 20px; text-align: center;
  border-radius: var(--radius-sm); padding: 0; transition: var(--transition);
}
.auth-error:not(:empty) {
  background: rgba(211,47,47,.15); border: 1px solid rgba(211,47,47,.45);
  padding: 10px 14px;
  animation: authShake .4s ease;
}
.auth-error.auth-success:not(:empty) {
  color: var(--success); background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.4);
  animation: none;
}

/* ─”€─”€ Password Recovery ─”€─”€ */
.recover-desc { color: var(--text-dim); font-size: .88rem; margin-bottom: 16px; line-height: 1.5; }
.recover-success {
  text-align: center; padding: 20px 0;
  color: var(--success); font-size: .95rem;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* ─”€─”€ Password Strength Bar ─”€─”€ */
.pwd-strength-wrap { margin-top: 6px; }
.pwd-strength-bar {
  height: 8px; border-radius: 4px; background: rgba(255,255,255,.08);
  overflow: hidden; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.06);
}
.pwd-strength-fill {
  height: 100%; width: 0; border-radius: 4px;
  transition: width .35s ease, background .35s ease;
}
.pwd-strength-fill[data-level="0"] { width: 0; }
.pwd-strength-fill[data-level="1"] { width: 25%; background: linear-gradient(90deg, #B71C1C, #D32F2F); }
.pwd-strength-fill[data-level="2"] { width: 50%; background: linear-gradient(90deg, #2F6FC4, #4FA9FF); }
.pwd-strength-fill[data-level="3"] { width: 75%; background: linear-gradient(90deg, #123A6E, #3E8FF0); }
.pwd-strength-fill[data-level="4"] { width: 100%; background: linear-gradient(90deg, #1E7A1E, #32CD32); }
.pwd-strength-label {
  font-size: .78rem; color: var(--text-dim); text-align: right;
  font-weight: 600; letter-spacing: .3px;
}
.pwd-strength-label[data-level="1"] { color: var(--danger); }
.pwd-strength-label[data-level="2"] { color: #4FA9FF; }
.pwd-strength-label[data-level="3"] { color: #8FCBFF; }
.pwd-strength-label[data-level="4"] { color: #32CD32; }
.pwd-strength-tips { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.pwd-strength-tips span { font-size: .74rem; color: var(--text-dim); transition: color .2s; }
.pwd-strength-tips span.met { color: #32CD32; }
.pwd-strength-tips span.unmet { color: var(--text-dim); opacity: .5; }

/* ─”€─”€ Field Error Highlight ─”€─”€ */
.auth-field input.field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(211,47,47,.2) !important;
}
.auth-field .field-error-msg {
  color: var(--danger); font-size: .75rem; margin-top: 4px;
  animation: authShake .4s ease;
}

.auth-submit {
  position: relative;
  overflow: hidden;
  width: 100%; padding: 12px; background: var(--gradient-accent);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.5);
  border-right: 3px solid rgba(62,143,240,.5);
  color: #fff; font-weight: 700; font-size: .95rem;
  border-radius: 6px; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, opacity .2s;
  font-family: var(--font-body);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 3px 8px rgba(0,0,0,.4);
}
.auth-submit::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  mix-blend-mode: overlay;
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .6s ease;
}
.auth-submit:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-left-color: rgba(62,143,240,.95);
  border-right-color: rgba(62,143,240,.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 6px 16px rgba(0,0,0,.5),
    0 0 16px rgba(62,143,240,.3);
}
.auth-submit:hover::after { left: 130%; }
.auth-submit:active { transform: translateY(0) scale(.98); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.auth-footer {
  text-align: center; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.auth-footer p { color: var(--text-dim); font-size: .85rem; }
.auth-link { color: var(--accent-light); font-weight: 600; }
.auth-link:hover { color: var(--gold); }

/* ─
   USER PANEL
   ─ */
.userpanel-page { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }

.up-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 28px;
  background: var(--bg-surface); padding: 6px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.45);
  border-right: 3px solid rgba(62,143,240,.45);
}
.up-tab {
  padding: 10px 20px; border: none; background: none;
  color: var(--text-dim); font-size: .85rem; font-weight: 500;
  border-radius: 6px; cursor: pointer;
  transition: var(--transition); font-family: var(--font-body);
}
.up-tab:hover {
  color: #fff; background: transparent;
  text-shadow: 0 0 10px rgba(255,255,255,.75), 0 0 20px rgba(62,143,240,.45);
}
.up-tab.active { color: #fff; background: var(--accent); }

.up-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.up-info-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.45);
  border-right: 3px solid rgba(62,143,240,.45);
  border-radius: 10px; padding: 24px;
}
.up-info-card h3 {
  font-family: var(--font-display); color: var(--accent-light);
  font-size: 1.05rem; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.up-level { color: var(--gold); }

.up-account-details { grid-column: 1 / -1; }
.account-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;
}
@media (max-width: 600px) {
  .account-detail-grid { grid-template-columns: 1fr; }
}

/* Character Cards */
.char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.char-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; text-align: center;
  transition: var(--transition); position: relative;
}
.char-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.char-card.current { border-color: var(--gold); box-shadow: 0 0 20px var(--gold-glow); }
.char-current-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #000; padding: 3px 14px;
  border-radius: 10px; font-size: .7rem; font-weight: 700;
}
.char-name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.char-class {
  color: var(--accent-light); font-size: .85rem; font-weight: 500;
  margin-bottom: 16px;
}
.char-stats-grid {
  display: flex; justify-content: center; gap: 24px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.char-stat { text-align: center; }
.char-stat-val {
  display: block; font-family: var(--font-display); font-size: 1.3rem;
  font-weight: 700; color: var(--gold);
}
.char-stat-lbl { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; }

.char-detail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.char-detail {
  display: flex; justify-content: space-between; padding: 4px 8px;
  background: var(--bg-surface); border-radius: 4px; font-size: .8rem;
}
.char-detail span:first-child { color: var(--text-muted); }
.char-detail span:last-child { color: var(--text); font-weight: 600; }

.char-guild { color: var(--gold); font-size: .85rem; margin-top: 8px; }

/* Currency display */
.up-currency-card { grid-column: 1 / -1; }
.currency-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.currency-item {
  text-align: center; padding: 16px; border-radius: var(--radius);
  background: var(--bg-surface); border: 1px solid var(--border);
}
.currency-icon { display: block; font-size: 2rem; margin-bottom: 6px; }
.currency-val {
  display: block; font-family: var(--font-display); font-size: 1.4rem;
  font-weight: 700; color: var(--gold); margin-bottom: 4px;
}
.currency-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* Unstick button */
.char-unstick-btn {
  margin-top: 12px; width: 100%; padding: 8px 12px;
  background: var(--accent-glow); color: var(--accent-light);
  border: 1px solid var(--accent); border-radius: var(--radius);
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.char-unstick-btn:hover {
  background: var(--accent); color: #fff;
}

/* Stat add grid */
.stat-add-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.stat-add-row {
  display: grid; grid-template-columns: 50px 60px 20px 1fr; gap: 8px; align-items: center;
}
.stat-add-row label { color: var(--accent-light); font-weight: 700; font-size: .9rem; }
.stat-add-row span:nth-child(2) { color: var(--text-muted); text-align: right; font-size: .85rem; }
.stat-add-row span:nth-child(3) { color: var(--gold); text-align: center; font-weight: 700; }
.stat-input {
  width: 100%; padding: 6px 10px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: .9rem; text-align: center;
}
.stat-input:focus { border-color: var(--accent); outline: none; }
.char-unstick-btn:disabled {
  opacity: .5; cursor: not-allowed;
}
/* Downloads page */
.downloads-page { max-width: 700px; margin: 0 auto; padding: 0 16px; }
.downloads-grid { display: flex; flex-direction: column; gap: 14px; }
.download-card {
  display: flex; gap: 16px; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; text-decoration: none;
  color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.download-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.download-card .dl-icon { font-size: 2.2rem; flex-shrink: 0; }
.download-card .dl-info { flex: 1; min-width: 0; }
.download-card .dl-title { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.download-card .dl-desc { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }
.download-card .dl-arrow { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }

/* Exchange form */
.up-info-card .form-row {
  display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end;
}
.up-info-card .form-group { display: flex; flex-direction: column; gap: 4px; }
.up-info-card .form-group label { font-size: .8rem; color: var(--text-dim); }
.up-info-card .form-control,
.up-info-card select.form-control,
.up-info-card input.form-control {
  padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .9rem;
  -webkit-appearance: none; appearance: none;
}
.up-info-card select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px; cursor: pointer;
}
.up-info-card select.form-control option {
  background: var(--bg-card); color: var(--text);
}
.up-info-card .form-control:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.up-info-card input[type="number"]::-webkit-inner-spin-button,
.up-info-card input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Master Level badge */
.mlvl {
  color: var(--danger); font-size: .8em; margin-left: 2px;
  vertical-align: super; font-weight: 700;
}
.char-stat-val .mlvl {
  font-size: .65em;
}

/* Character class image in card */
.char-class-img {
  width: 100px; height: 100px; margin: 0 auto 12px;
}
.char-class-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

/* Clickable rank names */
.rank-clickable {
  cursor: pointer; transition: color .2s;
}
.rank-clickable:hover {
  color: var(--accent-light); text-decoration: underline;
}

/* Character Info Modal Overlay */
.char-info-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.char-info-overlay.open {
  opacity: 1; pointer-events: all;
}
.char-info-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 32px;
  width: 420px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
  text-align: center; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: charInfoIn .3s ease;
}
@keyframes charInfoIn {
  from { transform: scale(0.92) translateY(16px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.char-info-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 1rem;
  transition: var(--transition); display: flex;
  align-items: center; justify-content: center;
}
.char-info-close:hover {
  border-color: var(--danger); color: var(--danger);
  background: rgba(211,47,47,.12);
}
.char-info-img {
  width: 120px; height: 120px; margin: 0 auto 16px;
}
.char-info-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 16px var(--accent-glow));
}
.char-info-name {
  font-family: var(--font-display); font-size: 1.6rem;
  font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.char-info-class {
  color: var(--accent-light); font-size: .9rem; font-weight: 500;
  margin-bottom: 6px;
}
.char-info-guild {
  color: var(--gold); font-size: .85rem; margin-bottom: 16px;
}
.char-info-stats {
  display: flex; justify-content: center; gap: 28px;
  margin: 16px 0; padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.char-info-stat .val {
  display: block; font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; color: var(--gold);
}
.char-info-stat .lbl {
  font-size: .7rem; color: var(--text-muted); text-transform: uppercase;
}
.char-info-details {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 16px 0;
}
.char-info-details > div, .char-info-extra > div {
  display: flex; justify-content: space-between; padding: 6px 10px;
  background: var(--bg-surface); border-radius: 6px; font-size: .85rem;
}
.char-info-details > div span:first-child,
.char-info-extra > div span:first-child { color: var(--text-muted); }
.char-info-details > div span:last-child,
.char-info-extra > div span:last-child { color: var(--text); font-weight: 600; }
.char-info-extra {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}

/* Character Info Tabs */
.char-info-tabs {
  display: flex; justify-content: center; gap: 6px;
  margin-bottom: 18px;
}
.char-tab {
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-muted); padding: 7px 20px; border-radius: 6px;
  cursor: pointer; font-size: .85rem; font-weight: 600;
  transition: var(--transition);
}
.char-tab:hover { border-color: var(--accent); color: var(--text); }
.char-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}

/* ─
   EQUIPMENT / INVENTORY PANEL
   ─ */
.inv-panel {
  display: flex; justify-content: center; padding: 8px 0;
}
.inv-grid {
  position: relative;
  width: 310px; height: 339px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: auto;
}
.inv-slot {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 3px;
}
.inv-slot img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(200,180,120,0.4));
  transition: filter .2s;
}
.inv-has-item { cursor: pointer; }
.inv-has-item:hover img {
  filter: drop-shadow(0 0 10px rgba(200,180,120,0.9));
}
.inv-has-item:hover { z-index: 10; }
.inv-empty span {
  font-size: .55rem; color: rgba(255,255,255,0.15);
  text-transform: uppercase; pointer-events: none;
  text-align: center; line-height: 1.1;
}

/* Slot positions on inv.png (310─339)
   Layout: 5 cols ─ 4 rows
   Row 1: Guardian | Pendant | Helm  |         | Wings
   Row 2: Weapon   | EarA    | Armor | EarB    | Shield
   Row 3: Gloves   | Ring1   | Pants | Ring2   | Boots
   Row 4: Artifact  |         |       |         | Pentagram */

/* Row 1 ─€” y: 36─†’88 */
.inv-pet      { left: 10px;  top: 36px;  width: 50px;  height: 52px; }
.inv-pendant  { left: 64px;  top: 36px;  width: 50px;  height: 52px; }
.inv-helm     { left: 118px; top: 36px;  width: 66px;  height: 52px; }
.inv-wings    { left: 238px; top: 36px;  width: 60px;  height: 52px; }

/* Row 2 ─€” y: 92─†’204 (tall row for weapons/armor) */
.inv-weapon   { left: 10px;  top: 92px;  width: 50px;  height: 112px; }
.inv-earring1 { left: 64px;  top: 118px; width: 50px;  height: 50px; }
.inv-armor    { left: 118px; top: 92px;  width: 66px;  height: 112px; }
.inv-earring2 { left: 188px; top: 118px; width: 46px;  height: 50px; }
.inv-shield   { left: 238px; top: 92px;  width: 60px;  height: 112px; }

/* Row 3 ─€” y: 208─†’262 */
.inv-gloves   { left: 10px;  top: 208px; width: 52px;  height: 54px; }
.inv-ring1    { left: 66px;  top: 212px; width: 44px;  height: 44px; }
.inv-pants    { left: 118px; top: 208px; width: 66px;  height: 54px; }
.inv-ring2    { left: 188px; top: 212px; width: 44px;  height: 44px; }
.inv-boots    { left: 238px; top: 208px; width: 60px;  height: 54px; }

/* Row 4 ─€” y: 268─†’322 */
.inv-artifact { left: 10px;  top: 268px; width: 58px;  height: 54px; }
.inv-pentagram{ left: 238px; top: 268px; width: 60px;  height: 54px; }

/* Item color coding */
.inv-exc img      { filter: drop-shadow(0 0 6px rgba(100,255,100,0.6)); }
.inv-ancient img  { filter: drop-shadow(0 0 6px rgba(80,150,255,0.6)); }

/* Equipment Tooltip */
.inv-tooltip {
  display: none; position: fixed; z-index: 99999;
  background: #0a0814; border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px; pointer-events: none;
  min-width: 220px; max-width: 310px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  font-size: .8rem; line-height: 1.6;
  animation: tooltipSoftIn .18s ease-out;
}
@keyframes tooltipSoftIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tt-name {
  font-weight: 700; font-size: .9rem; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 6px;
}
.tt-normal { color: #c8b478; }
.tt-exc    { color: #55ff55; }
.tt-ancient { color: #47a0ff; }
.tt-stat { color: #ccc; }
.tt-stat span { color: #fff; font-weight: 600; }

/* ─”€─”€ Hidden Profile (VIP) ─”€─”€ */
.char-info-hidden {
  text-align: center; padding: 40px 20px;
}
.char-info-hidden .hidden-icon {
  font-size: 3rem; margin-bottom: 16px; display: block;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}
.char-info-hidden h3 {
  font-family: var(--font-display); color: var(--text);
  margin-bottom: 8px;
}
.char-info-hidden p {
  color: var(--text-muted); font-size: .85rem;
}
/* VIP toggle in user panel */
.vip-toggle-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--accent-glow), var(--gold-glow));
  border: 1px solid var(--border-glow);
  border-radius: var(--radius); padding: 16px 20px;
  margin-top: 16px; cursor: pointer;
  transition: var(--transition);
}
.vip-toggle-card:hover {
  border-color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb, 212,175,55), .3);
  filter: brightness(1.1);
}
.vip-toggle-card .vip-info {
  display: flex; flex-direction: column; gap: 2px;
}
.vip-toggle-card .vip-title {
  font-weight: 600; color: var(--gold); font-size: .95rem;
}
.vip-toggle-card .vip-desc {
  color: var(--text-muted); font-size: .8rem;
}
.vip-toggle-card .toggle { margin-left: 16px; }
.vip-locked {
  opacity: .5; pointer-events: none;
  position: relative;
}
.vip-locked::after {
  content: '─Ÿ”’ Solo VIP'; position: absolute;
  right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .75rem;
  font-weight: 600;
}
.tt-twoh { color: #c8b478; font-style: italic; }
.tt-sep {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 6px 0;
}
.tt-opt-line {
  color: #c8b478; font-size: .78rem; line-height: 1.5;
}
.tt-skill { color: #55bbff; }
.tt-exc-label {
  color: #55ff55; font-weight: 700; margin-bottom: 2px;
  font-size: .78rem;
}
.tt-exc-line { color: #88dd88; font-size: .75rem; padding-left: 8px; line-height: 1.5; }
.tt-anc-label {
  color: #47a0ff; font-weight: 700;
  font-size: .78rem;
}
.tt-sock-label {
  color: #e8a0ff; font-weight: 600; font-size: .78rem;
}
.tt-sock-line { font-size: .75rem; padding-left: 8px; }
.tt-sock-empty { color: #888; }
.tt-sock-filled { color: #ffcc00; }
.tt-req {
  color: #bbb; font-size: .75rem;
}

/* Change Password */
.up-password-box {
  max-width: 450px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
}
.up-password-box h3 {
  font-family: var(--font-display); color: var(--accent-light);
  margin-bottom: 20px; text-align: center;
}

/* ─
   RESPONSIVE
   ─ */
/* Desktop: prevent layout from shrinking below 768px */
@media (min-width: 769px) {
  body { min-width: 768px; }
}

@media (max-width: 768px) {
  .home-section--news > .server-ring {
    position: static; transform: none; margin: 0 auto 12px;
  }
  .main-nav { display: none; }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute;
    top: 64px; left: 0; right: 0; background: var(--bg-dark);
    border-bottom: 1px solid var(--border); padding: 12px;
  }
  .mobile-toggle { display: block; }
  .hero-title { font-size: 2rem; }
  .hero-logo { max-width: 320px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  .news-carousel .news-card { height: 220px; }
  .news-carousel .news-card-overlay { background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.15) 100%); }
  .news-carousel .news-card-body { max-width: 100%; padding: 20px; justify-content: flex-end; }
  .nav-dropdown-menu { left: 0; transform: none; }
  .class-slide { flex-direction: column; min-height: auto; }
  .class-slide-img { width: 100%; min-width: 0; height: 220px; padding-left: 0; }
  .class-slide-info { padding: 20px; }
  .class-slide-name { font-size: 1.3rem; }
  .carousel-btn { width: 34px; height: 34px; font-size: .9rem; }
  .donation-grid { grid-template-columns: 1fr; }
  .footer-links { flex-direction: column; gap: 24px; }
  .footer-col--right { margin-left: 0; align-items: flex-start; }
  .rank-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .rank-table { font-size: .8rem; }
  .rank-table th, .rank-table td { padding: 8px 10px; }
  .auth-buttons { gap: 4px; }
  .btn-auth { padding: 5px 10px; font-size: .75rem; }
  .btn-panel .user-name { max-width: 50px; }
  .auth-box { padding: 28px 20px; }
  .char-grid { grid-template-columns: 1fr; }
  .up-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

@media (max-width: 480px) {
  .header-inner { padding: 0 12px; }
  .stats-grid { grid-template-columns: 1fr; }
  .hero-section { padding: 60px 16px 40px; }
}

/* ─
   GM COMMAND GENERATOR
   ─ */
.gm-generator { width: 100%; }
.gm-grid {
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: 1rem;
}
.gm-panel {
  background: var(--bg-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 1rem;
}
.gm-panel h3 {
  color: var(--accent, #4fc3f7);
  font-size: .95rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.gm-search, .gm-class-select, .gm-input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 5px;
  background: var(--bg-dark, rgba(0,0,0,0.3));
  color: var(--text-primary, #e0e0e0);
  font-size: .85rem;
  margin-bottom: .5rem;
}
.gm-search:focus, .gm-class-select:focus, .gm-input:focus {
  outline: none;
  border-color: var(--accent, #4fc3f7);
}
.gm-class-select option { background: var(--bg-dark, #1a1a2e); color: #fff; }
.gm-sec-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: .5rem;
  max-height: 80px;
  overflow-y: auto;
}
.gm-sec-btn {
  padding: 3px 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 3px;
  background: var(--bg-dark, rgba(0,0,0,0.3));
  color: var(--text-muted, #aaa);
  cursor: pointer;
  font-size: .7rem;
  transition: all .2s;
}
.gm-sec-btn:hover, .gm-sec-btn.active {
  background: var(--accent, #4fc3f7);
  color: #000;
  border-color: var(--accent, #4fc3f7);
}
.gm-item-list {
  height: 380px;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 5px;
  background: rgba(0,0,0,0.15);
}
.gm-item-entry {
  padding: .5rem .6rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .2s;
}
.gm-item-entry:hover { background: rgba(79,195,247,0.12); }
.gm-item-entry.selected {
  background: rgba(79,195,247,0.2);
  border-left: 3px solid var(--accent, #4fc3f7);
}
.gm-item-thumb { width: 28px; height: 28px; object-fit: contain; }
.gm-item-name { font-size: .8rem; flex: 1; }
.gm-item-idx { font-size: .7rem; color: var(--text-muted, #888); }
.gm-empty { padding: 1.5rem; text-align: center; color: var(--text-muted, #888); }

/* Options panel */
.gm-tabs { display: flex; gap: 4px; margin-bottom: .75rem; }
.gm-opt-tab {
  flex: 1;
  padding: .5rem;
  background: var(--bg-dark, rgba(0,0,0,0.3));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 5px 5px 0 0;
  color: var(--text-muted, #888);
  cursor: pointer;
  text-align: center;
  font-size: .75rem;
  transition: all .2s;
}
.gm-opt-tab:hover { background: rgba(79,195,247,0.08); }
.gm-opt-tab.active {
  background: rgba(79,195,247,0.15);
  border-color: var(--accent, #4fc3f7);
  color: var(--accent, #4fc3f7);
}

/* ─”€─”€ Modal close ─ button hover ─”€─”€ */
.modal-x-close:hover {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  transform: scale(1.15);
}

/* ─”€─”€ Account action buttons hover (GM panel) ─”€─”€ */
.gm-usr-btn {
  transition: transform .15s, border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.gm-usr-btn:hover {
  transform: scale(1.08);
  border-color: var(--accent) !important;
  color: var(--accent-light, var(--accent)) !important;
  background: var(--accent-glow, rgba(26,127,224,.08)) !important;
  box-shadow: 0 0 8px var(--accent-glow, rgba(26,127,224,.15));
}

/* ─
   CHARACTERS / CLASSES PAGE
   ─ */

/* ─”€─”€ Detail page ─”€─”€ */
.class-detail-page { max-width: 1320px; margin: 0 auto; padding: 34px 20px; }

.class-detail-header {
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
}
.class-detail-header-overlay {
  display: flex; align-items: center; gap: 12px;
}
.class-detail-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.45rem; color: var(--gold); margin: 0;
}

/* ─”€─”€ Tabs ─”€─”€ */
.class-detail-tabs {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; border-bottom: 1px solid var(--border);
  padding-bottom: .6rem;
}
.class-tab {
  background: none; border: 1px solid transparent;
  color: var(--text-dim, #aaa); padding: .42rem .82rem;
  border-radius: var(--radius, 8px); cursor: pointer;
  font-size: .78rem; font-family: var(--font-body);
  transition: var(--transition, all .2s);
}
.class-tab:hover { color: var(--text, #eee); }
.class-tab.active {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}

/* ─”€─”€ Section boxes ─”€─”€ */
.class-section-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}
.class-section-label {
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--gold); font-size: .84rem; font-weight: 600;
  margin-bottom: .65rem; letter-spacing: .5px;
}

/* ─”€─”€ Info tab ─”€─”€ */
.class-info-main .class-info-row {
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.class-portrait {
  flex-shrink: 0; width: 100px;
}
.class-portrait img {
  width: 100%; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(0,0,0,.3);
}
.class-portrait-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 100px; font-size: 3rem;
  background: rgba(255,255,255,.03); border-radius: 8px; border: 1px solid var(--border);
}
.class-portrait-name {
  text-align: center; font-family: var(--font-display, 'Cinzel', serif);
  font-size: .8rem; color: var(--gold); margin-top: .4rem;
}
.class-description { font-size: .82rem; line-height: 1.55; color: var(--text-dim, #ccc); }
.class-characteristics { margin-top: .8rem; }
.class-info-bottom { display: flex; flex-direction: column; gap: 0; }

/* ─”€─”€ Stats ─”€─”€ */
.class-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .5rem;
}
.stat-item {
  background: rgba(255,255,255,.04); border-radius: 8px;
  padding: .6rem .8rem; text-align: center;
  border: 1px solid rgba(255,255,255,.04);
}
.stat-item .stat-label {
  display: block; font-size: .68rem; color: var(--text-dim, #aaa);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: .2rem;
}
.stat-item .stat-val {
  font-size: 1.15rem; font-weight: 700; color: var(--gold);
}
.class-hp-mana {
  display: flex; gap: 1.5rem; margin-top: .8rem; flex-wrap: wrap;
  font-size: .88rem;
}
.hm-row { display: flex; align-items: center; gap: .3rem; }
.hm-row small { color: var(--text-dim, #999); margin-left: .3rem; }
.hm-icon { font-size: 1rem; }

/* ─”€─”€ Evolutions ─”€─”€ */
.evo-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.evo-row {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.04); border-radius: 8px;
  padding: .45rem .9rem; font-size: .85rem;
}
.evo-order {
  background: var(--accent); color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; font-size: .65rem; font-weight: 700;
  flex-shrink: 0;
}
.evo-name { color: var(--text, #eee); }
.evo-type {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  padding: .15rem .5rem; border-radius: 4px;
}
.evo-type.default { color: var(--text-dim); }
.evo-type.quest { color: var(--gold); background: rgba(212,168,67,.12); }

/* ─”€─”€ Party bonus ─”€─”€ */
.party-list { display: flex; flex-direction: column; gap: .4rem; }
.party-row {
  background: rgba(255,255,255,.04); padding: .5rem .8rem;
  border-radius: 6px; font-size: .85rem; color: var(--text);
}

/* ─”€─”€ Equipment tabs ─”€─”€ */
.eq-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.eq-tab {
  background: rgba(255,255,255,.05); border: 1px solid transparent;
  color: var(--text-dim, #aaa); padding: .3rem .65rem;
  border-radius: 6px; cursor: pointer; font-size: .72rem;
  transition: var(--transition, all .2s);
}
.eq-tab:hover { color: var(--text, #eee); }
.eq-tab.active { background: var(--gold); color: #000; border-color: var(--gold); }

/* ─”€─”€ Equipment sets ─”€─”€ */
.eq-sets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.eq-set-card {
  background: color-mix(in srgb, var(--bg-card, #1a1a1c) 86%, black);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, 10px); padding: .8rem;
}
.eq-sets-grid-special { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eq-set-card-special {
  background: color-mix(in srgb, var(--bg-card, #1a1a1c) 86%, black);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  min-width: 0;
}
.eq-set-name {
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 4px;
  padding: .35rem .5rem;
  margin-bottom: .6rem;
}
.eq-set-name-special {
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 4px;
  padding: .35rem .55rem;
  margin-bottom: .75rem;
}
.eq-set-special-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.eq-set-season {
  margin-top: .5rem; font-size: .7rem; color: var(--accent);
  font-weight: 600; letter-spacing: .5px;
}
.eq-set-season-special {
  margin-top: .85rem;
  color: #f0b83d;
}
.eq-piece {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .76rem;
}
.eq-piece-img { width: 88px; height: 88px; object-fit: contain; border-radius: 4px; background: rgba(0,0,0,.3); }
.eq-piece-info { flex: 1; }
.eq-piece-slot { color: var(--text-dim, #aaa); font-size: .67rem; text-transform: uppercase; letter-spacing: .3px; }
.eq-piece-def { font-size: .73rem; }
.eq-lbl { color: var(--text-dim); }
.eq-val { color: var(--text, #eee); font-weight: 600; }
.eq-val.exc { color: var(--gold); }

/* ─”€─”€ Piece rows for sets ─”€─”€ */
.eq-piece-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  width: 100%;
  box-sizing: border-box;
  padding: .42rem .5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-card-hover) 22%, transparent);
  font-size: .76rem;
  margin-bottom: .45rem;
}
.eq-piece-row:last-child { margin-bottom: 0; }
.eq-piece-row.clickable { cursor: pointer; }
.eq-piece-row.clickable:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card-hover));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset;
}
.eq-piece-thumb { width: 88px; height: 88px; object-fit: contain; border-radius: 4px; background: rgba(0,0,0,.3); }
.eq-piece-meta { min-width: 0; }
.eq-piece-name { color: var(--text-dim); font-size: .67rem; text-transform: uppercase; letter-spacing: .3px; }
.eq-piece-stat { font-size: .73rem; color: var(--text); }
.eq-piece-stat.exc { color: var(--gold); }
.eq-piece-row-special {
  grid-template-columns: 64px minmax(0, 1fr);
  padding: .42rem .5rem;
}
.eq-piece-row-special.clickable:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card-hover));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
.eq-piece-thumb-special {
  width: 64px;
  height: 64px;
  background: transparent;
}
.eq-piece-name-special {
  color: #ffffff;
  font-size: .88rem;
  margin-bottom: .2rem;
}
.eq-set-card-special .eq-piece-stat {
  color: #2ea7ff;
  font-weight: 600;
  font-size: .84rem;
}
.eq-set-special-options-title {
  text-align: center;
  color: #f4bf38;
  font-size: .98rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.eq-set-special-effect-group {
  text-align: center;
  margin-bottom: .95rem;
}
.eq-set-special-effect-title {
  color: var(--gold);
  font-size: .86rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.eq-set-special-effect-line {
  color: #ffffff;
  font-size: .86rem;
  line-height: 1.45;
  text-transform: uppercase;
}
.eq-set-special-meta {
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.eq-set-special-meta-line {
  color: var(--text-dim);
  font-size: .74rem;
  line-height: 1.5;
  text-transform: uppercase;
}
.eq-set-special-meta-line span {
  color: var(--gold);
  font-weight: 700;
}
.eq-set-special-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .45rem;
}
.eq-set-special-class {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .16rem .45rem;
  font-size: .64rem;
  color: var(--text);
}

/* ─”€─”€ Equipment items (weapons/shields/wings) ─”€─”€ */
.eq-items-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem;
}
.eq-item-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 8px; padding: .65rem; text-align: center;
}
.eq-item-img { width: 130px; height: 130px; object-fit: contain; margin-bottom: .3rem; }
.eq-item-name { font-size: .8rem; color: var(--text); margin-bottom: .15rem; }
.eq-item-stat { font-size: .7rem; color: var(--text-dim); }
.eq-item-classes { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; margin-top: .3rem; }
.eq-item-class { font-size: .65rem; background: rgba(255,255,255,.06); border-radius: 3px; padding: .1rem .3rem; color: var(--text-dim); }
.eq-season { color: var(--accent); font-weight: 600; }
.eq-item-card-special {
  background: color-mix(in srgb, var(--bg-card, #1a1a1c) 86%, black);
  border-color: rgba(255,255,255,.12);
  text-align: left;
  min-height: 100%;
}
.eq-item-card-special.clickable-special { cursor: pointer; }
.eq-item-card-special.clickable-special:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, white 15%);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.eq-item-name-special {
  color: #26f0e3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .86rem;
  margin-bottom: .7rem;
}
.eq-item-special-body {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: .8rem;
  align-items: center;
}
.eq-item-special-left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.eq-item-img-special {
  width: 108px;
  height: 108px;
  margin: 0;
  justify-self: center;
}
.eq-item-stat-special {
  color: #2ea7ff;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: .22rem;
}
.eq-item-meta-special {
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 500;
}
.eq-item-classes-special {
  justify-content: flex-start;
  margin-top: .35rem;
}

/* ─”€─”€ Piece modal content ─”€─”€ */
.eq-pi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  margin-bottom: .7rem;
}
.eq-pi-main-col {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem;
}
.eq-pi-main-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: .7rem;
  align-items: start;
}
.eq-pi-img { width: 180px; height: 180px; object-fit: contain; background: rgba(0,0,0,.5); border-radius: 6px; flex-shrink: 0; }
.eq-pi-info { width: 100%; }
.eq-pi-slot { font-family: Cinzel, serif; font-size: .95rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.eq-pi-subcat { color: var(--text-dim); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.eq-pi-stat { font-size: .85rem; color: var(--text); margin: .15rem 0; }
.eq-pi-stat span { color: var(--gold); font-weight: 600; }
.eq-pi-stat.exc span { color: var(--gold); }
.eq-pi-classes { font-size: .72rem; color: var(--text-dim); margin-top: .4rem; line-height: 1.7; }
.eq-pi-classes span { background: rgba(0,210,210,.1); border: 1px solid rgba(0,210,210,.2); border-radius: 3px; padding: .1rem .35rem; }
.eq-pi-stats-section {
  margin: .55rem 0 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
}
.eq-pi-section-hdr { font-size: .72rem; color: var(--text-dim); font-weight: 600; margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }
.eq-pi-opts { margin-top: 0; border-top: 1px solid var(--border); padding-top: .35rem; width: 100%; }
.eq-pi-opts-hdr { display: flex; align-items: center; gap: .3rem; padding: .3rem 0; font-size: .75rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.eq-pi-arrow { margin-left: auto; font-size: .8rem; }
.eq-pi-opts-body { padding: .4rem 0; }
.eq-pi-opts-body.hidden { display: none; }
.eq-pi-opts-inline .eq-pi-opts-hdr {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  padding: .35rem .45rem;
}
.eq-pi-opts-inline .eq-pi-opts-body {
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  margin-top: .35rem;
  padding: .35rem .4rem;
}
.eq-pi-opts-empty .eq-pi-opts-hdr { opacity: .85; }
.eq-eff-group { margin-bottom: .45rem; text-align: center; }
.eq-eff-title { color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .07em; margin: .3rem 0 .12rem; text-transform: uppercase; }
.eq-eff-line { color: #e2e8f0; font-size: .63rem; letter-spacing: .03em; line-height: 1.55; text-transform: uppercase; }

/* ─”€─”€ More Info: botón de trigger ─”€─”€ */
.eq-more-info { margin-top: .5rem; text-align: center; }
.eq-more-info-toggle {
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .7rem; padding: .25rem .7rem;
  border-radius: 4px; cursor: pointer; transition: var(--transition);
}
.eq-more-info-toggle:hover { color: var(--gold); background: rgba(255,255,255,.1); border-color: var(--gold); }

/* ─”€─”€ Floating Modal: overlay ─”€─”€ */
.eq-stats-overlay {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(0,0,0,.78); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.eq-stats-overlay[aria-hidden="true"] { display: none; }

/* ─”€─”€ Floating Modal: panel ─”€─”€ */
.eq-stats-modal {
  background: var(--bg-card, #1a1a1c); border: 1px solid var(--border);
  border-radius: 10px; width: min(92vw, 1320px); max-width: 1320px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 50px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
  animation: eqStatsSlideDown .28s cubic-bezier(.2,.8,.2,1);
}

@keyframes eqStatsSlideDown {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq-stats-modal { animation: none; }
}
.eq-stats-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .95rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.03); flex-shrink: 0;
}
.eq-stats-modal-title {
  font-family: Cinzel, serif; font-size: .9rem; font-weight: 700;
  color: var(--gold); text-transform: uppercase; letter-spacing: .5px;
}
.eq-stats-modal-close {
  background: none; border: none; color: var(--text-dim); font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: .1rem .3rem; border-radius: 4px;
  transition: var(--transition);
}
.eq-stats-modal-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.eq-stats-modal-tabs {
  display: flex; gap: .35rem; padding: .5rem .85rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.eq-stats-modal-body { overflow-y: auto; padding: .65rem .85rem .85rem; flex: 1; }

/* ─”€─”€ Tabs dentro del modal ─”€─”€ */
.eq-stat-tab {
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .75rem; padding: .2rem .55rem;
  border-radius: 4px; cursor: pointer; transition: var(--transition);
}
.eq-stat-tab:hover { color: var(--text); }
.eq-stat-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.eq-stat-pane { display: none; }
.eq-stat-pane.active { display: block; }
.eq-stat-table {
  width: 100%; border-collapse: collapse; font-size: .75rem;
}
.eq-stat-table th, .eq-stat-table td {
  border: 1px solid rgba(255,255,255,.08); padding: .2rem .4rem;
  text-align: center; color: var(--text-dim);
}
.eq-stat-table thead th { color: var(--text); background: rgba(255,255,255,.06); font-weight: 600; }

/* ─”€─”€ Piece modal ─”€─”€ */
.eq-pi-img {
  width: 180px; height: 180px; object-fit: contain;
  background: rgba(0,0,0,.3); border-radius: 6px; flex-shrink: 0;
}
.eq-pi-info { width: 100%; }
.eq-pi-slot {
  font-family: Cinzel, serif; font-size: .95rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem;
}
.eq-pi-stat { font-size: .85rem; color: var(--text); margin: .15rem 0; }
.eq-pi-stat span { color: var(--gold); font-weight: 600; }
.eq-pi-stat.exc { color: var(--gold); }
.eq-pi-stat.exc span { color: var(--gold); }
.eq-pi-classes { font-size: .72rem; color: var(--text-dim); margin-top: .4rem; line-height: 1.6; }
.eq-pi-classes span { background: rgba(0,210,210,.12); border: 1px solid rgba(0,210,210,.2); border-radius: 3px; padding: .1rem .3rem; }
.eq-pi-stats-section { margin: .55rem 0 0; }
.eq-pi-section-hdr {
  font-size: .75rem; color: var(--text-dim); font-weight: 600;
  margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em;
}
.eq-pi-opts { margin-top: 0; border-top: 1px solid var(--border); }
.eq-pi-opts-hdr {
  padding: .5rem 0; font-size: .75rem; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  display: flex; align-items: center; gap: .3rem;
}
.eq-pi-arrow { margin-left: auto; font-size: .8rem; }
.eq-pi-opts-body { padding: .5rem 0; }
.eq-pi-opts-body.hidden { display: none; }

@media (max-width: 900px) {
  .eq-pi-layout { grid-template-columns: 1fr; }
  .eq-pi-main-row { grid-template-columns: 1fr; }
  .eq-pi-img { margin: 0 auto; }
}

/* ─”€─”€ Weapon category filter ─”€─”€ */
.eq-cat-filter { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.eq-cat-btn {
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .75rem; padding: .25rem .6rem;
  border-radius: 4px; cursor: pointer; transition: var(--transition);
}
.eq-cat-btn:hover { color: var(--text); }
.eq-cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─”€─”€ Skills ─”€─”€ */
.skills-filter {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem; font-size: .85rem; color: var(--text-dim);
}
.skills-select {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: .35rem .6rem; border-radius: 6px;
  font-size: .82rem;
}
.skills-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem;
}
.skill-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem;
}
.skill-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.skill-icon { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }
.skill-icon-placeholder {
  width: 40px; height: 40px; display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; background: rgba(255,255,255,.04);
  border-radius: 6px;
}
.skill-card-title h4 { margin: 0; font-size: .88rem; color: var(--text); }
.skill-type-badge {
  font-size: .65rem; color: var(--accent); font-weight: 600;
  letter-spacing: .5px;
}
.skill-desc { font-size: .8rem; color: var(--text-dim); line-height: 1.5; margin: 0; }

/* ─”€─”€ Builds ─”€─”€ */
.builds-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.build-type-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.build-name-tab {
  background: rgba(255,255,255,.05); border: 1px solid transparent;
  color: var(--text-dim); padding: .35rem .8rem; border-radius: 6px;
  cursor: pointer; font-size: .8rem; transition: var(--transition);
}
.build-name-tab:hover { color: var(--text); }
.build-name-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.build-desc { font-size: .85rem; color: var(--text-dim); margin-bottom: .8rem; line-height: 1.5; }
.build-bars { display: flex; flex-direction: column; gap: .4rem; }
.build-bar-row {
  display: flex; align-items: center; gap: .6rem; font-size: .82rem;
}
.build-bar-label { width: 80px; color: var(--text-dim); font-size: .75rem; font-weight: 600; }
.build-bar-track {
  flex: 1; height: 10px; background: rgba(255,255,255,.06);
  border-radius: 5px; overflow: hidden;
}
.build-bar-fill {
  height: 100%; border-radius: 5px; display: flex;
  align-items: center; justify-content: flex-end;
  padding-right: 6px; font-size: .6rem; color: #fff; font-weight: 700;
  min-width: fit-content; transition: width .5s ease;
}
.build-bar-fill[style*="width:0"] span { display: none; }

/* ─”€─”€ Build bar colors ─”€─”€ */
.build-bar-row:nth-child(1) .build-bar-fill { background: linear-gradient(90deg, #2F6FC4, #3E8FF0); }
.build-bar-row:nth-child(2) .build-bar-fill { background: linear-gradient(90deg, #1E7A1E, #32CD32); }
.build-bar-row:nth-child(3) .build-bar-fill { background: linear-gradient(90deg, #8FCBFF, #A9D9FF); }
.build-bar-row:nth-child(4) .build-bar-fill { background: linear-gradient(90deg, #123A6E, #2761B2); }

/* ─”€─”€ Skill tree (3-branch grid) ─”€─”€ */
.st-branches-wrap {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.0rem;
  position: relative;
}
.st-branch {
  background: var(--bg-dark); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.st-branch-header {
  text-align: center; font-family: 'Cinzel', serif; font-weight: 700;
  font-size: .85rem; letter-spacing: .08em; padding: 6px 0;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.st-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px;
}
.st-cell {
  aspect-ratio: 1; border-radius: 4px; display: flex;
  align-items: center; justify-content: center; position: relative;
}
.st-cell-empty {
  background: transparent;
}
.st-cell-active {
  background: transparent; border: none;
  cursor: pointer; transition: all .2s;
}
.st-cell-active:hover {
  background: transparent;
  transform: none; z-index: 2;
  box-shadow: none;
}
.st-cell-active img {
  width: auto; height: 60px; max-width: 85%; max-height: 85%; object-fit: contain;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  /* padding: 2px; */
  transition: transform .2s, box-shadow .2s, border-color .2s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.st-cell-active:hover img {
  border-color: var(--gold);
  transform: scale(1.07);
  box-shadow: 0 0 12px rgba(212,175,55,.3);
}
.st-cell-selected {
  background: transparent !important;
  box-shadow: none;
}
.st-cell-selected img {
  border-color: var(--gold) !important;
  background: rgba(212,175,55,.12) !important;
  box-shadow: 0 0 16px rgba(212,175,55,.4);
}
.st-cell-placeholder { font-size: 1rem; color: var(--gold); }

/* ─”€─”€ Skill tree popup ─€” floating inner sections ─”€─”€ */
.st-node-popup {
  position: fixed; z-index: 1200; pointer-events: auto;
  max-width: 290px; width: min(290px, 92vw);
}
.st-popup-inner {
  background: rgba(8, 10, 16, .97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Flecha decorativa */
.st-popup-arrow {
  position: absolute; left: var(--st-arrow-left, 50%); transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.st-node-popup.arrow-top .st-popup-arrow {
  top: -8px; border-top: 0;
  border-bottom: 8px solid rgba(255,255,255,.12);
}
.st-node-popup.arrow-bottom .st-popup-arrow {
  top: auto; bottom: -8px; border-bottom: 0;
  border-top: 8px solid rgba(255,255,255,.12);
}
/* Título */
.st-popup-title {
  color: var(--accent); font-weight: 700; font-size: .8rem;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px; padding: 5px 10px;
  letter-spacing: .5px; text-transform: uppercase;
}
/* Descripción ─€” sección flotante */
.st-popup-desc {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 7px 10px;
  color: rgba(255,255,255,.65); font-size: .7rem; line-height: 1.5;
  text-align: center; font-style: italic;
}
/* Niveles ─€” sección flotante */
.st-popup-levels {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 7px 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
}
.st-popup-levels::before {
  content: 'NIVELES';
  display: block;
  grid-column: 1 / -1;
  font-size: .6rem; font-weight: 700; letter-spacing: 1px;
  color: rgba(255,255,255,.35); margin-bottom: 4px;
}
.st-level-item { font-size: .67rem; display: flex; flex-direction: column; gap: 1px; }
.st-lv-label { color: rgba(255,255,255,.42); font-size: .62rem; line-height: 1.2; }
.st-lv-value { color: var(--accent); font-weight: 600; font-size: .68rem; line-height: 1.2; }
.st-lv-empty { color: rgba(255,255,255,.3); font-style: italic; grid-column: 1 / -1; text-align: center; }
/* Requisitos ─€” sección flotante */
.st-popup-req-header {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,.35); margin-bottom: 4px;
}
.st-popup-req-wrap {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 7px 10px;
}
.st-popup-req {
  display: flex; flex-direction: column; gap: 3px;
  font-size: .68rem; color: var(--text-dim); line-height: 1.4;
}

@media (max-width: 768px) {
  .st-branches-wrap { grid-template-columns: 1fr; }
  .st-node-popup { max-width: 90vw; }
}

/* ─”€─”€ Enhancement Tooltip ─€” ver bloque ─Tooltip rich─ más abajo ─”€─”€ */

/* ─”€─”€ Ability cards ─”€─”€ */
.cards-season-block { margin-bottom: 1.2rem; }
.cards-season-title {
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--gold); font-size: .9rem; margin-bottom: .6rem;
}
.cards-type-tabs { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: .8rem; }
.cards-filters { display: flex; gap: 10px; margin-bottom: 1rem; }
.cards-filter-sel {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 4px; font-size: 0.8rem; outline: none;
}
.cards-filter-sel:focus { border-color: var(--gold); }

/* ─”€─”€ Ability cards grid ─”€─”€ */
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.cards-grid.col-4 { grid-template-columns: repeat(4, 1fr); }

/* ─”€─”€ Base card ─”€─”€ */
.acard-item {
  background: #0b0d12;
  border: 1px solid color-mix(in srgb, var(--border) 84%, #000 16%);
  border-radius: var(--radius, 8px); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.acard-hoverable { cursor: pointer; }
.acard-hoverable:hover {
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ─”€─”€ Full card header (extra / skill) ─”€─”€ */
.acard-header-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.acard-badge {
  font-size: .55rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent);
  padding: 2px 6px; border-radius: 2px; flex-shrink: 0;
}
.acard-badge.blue   { border-color: #4499dd; color: #4499dd; }
.acard-badge.green  { border-color: #44c877; color: #44c877; }
.acard-badge.purple { border-color: #aa66dd; color: #aa66dd; }
.acard-badge.gold   { border-color: var(--gold); color: var(--gold); }

.acard-title {
  font-size: .82rem; font-weight: 700; color: #fff;
  text-transform: uppercase; line-height: 1.25; margin: 0; flex: 1;
}

/* ─”€─”€ Card body (image + stats) ─”€─”€ */
.acard-body { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.acard-img-box {
  width: 80px; height: 80px; flex-shrink: 0; border-radius: 4px;
  background: #080a0f; border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.acard-img-box img { width: 80%; height: 80%; object-fit: contain; }

.acard-stats-list {
  flex: 1; font-size: .7rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: .3px;
  line-height: 1.85; text-align: center;
}
.acard-side-desc {
  flex: 1;
  font-size: .74rem;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: .1px;
  text-align: left;
}

/* ─”€─”€ Full card description ─”€─”€ */
.acard-main-desc {
  font-size: .73rem; color: rgba(255,255,255,.75);
  line-height: 1.55; padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ─”€─”€ MORE INFO button ─”€─”€ */
.acard-more-btn {
  background: transparent; border: none;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--accent); font-size: .68rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 10px; width: 100%; cursor: pointer;
  transition: background .2s; margin-top: auto;
  font-family: inherit;
}
.acard-more-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ─”€─”€ Compact card (option / elite) ─”€─”€ */
.acard-compact .acard-title {
  padding: 0; text-align: center; font-size: .78rem;
}
.acard-header-compact {
  justify-content: center;
  padding: 10px 12px 8px;
  gap: 8px;
}
.acard-compact .acard-body { padding: 8px 12px 12px; justify-content: center; }
.acard-compact .acard-img-box { width: 64px; height: 64px; }
.acard-compact .acard-stats-list { font-size: .68rem; text-align: left; }

/* legacy ─€” kept for modal inner usage */
.acard-tag { font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; font-weight: bold; display: inline-block; }
.acard-tag.purple { background: #8e44ad; color: #fff; }
.acard-tag.blue   { background: #2980b9; color: #fff; }
.acard-tag.green  { background: #27ae60; color: #fff; }
.acard-tag.red    { background: var(--danger); color: #fff; }
.acard-tag.default { background: var(--accent); color: #fff; }
.extra-info-text { color: var(--gold); font-size: 0.75rem; display: block; margin-top: 4px; }

/* ─”€─”€ Ability Card Full Modal ─”€─”€ */
.acard-modal-backdrop {
  position: fixed; inset: 0; z-index: 1198;
  background: rgba(0,0,0,.55); display: none;
}
.acard-modal-backdrop.open { display: block; animation: tooltipBackdropIn .18s ease-out; }
.acard-modal {
  position: fixed; z-index: 1199;
  width: min(680px, 94vw); max-height: 88vh;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 48px rgba(0,0,0,.92);
  overflow: hidden; display: none; flex-direction: column;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.acard-modal.open { display: flex; animation: tooltipPanelIn .22s ease-out; }
.acard-modal-scrollarea { overflow-y: auto; flex: 1; }

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

@keyframes tooltipPanelIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Header */
.acard-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.acard-modal-badge {
  font-size: .58rem; font-weight: 700; letter-spacing: 1.2px;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 2px 7px; border-radius: 2px; flex-shrink: 0;
  text-transform: uppercase;
}
.acard-modal-badge.blue   { color: #4499dd; border-color: #4499dd; }
.acard-modal-badge.green  { color: #44c877; border-color: #44c877; }
.acard-modal-badge.purple { color: #aa66dd; border-color: #aa66dd; }
.acard-modal-badge.gold   { color: var(--gold); border-color: var(--gold); }
.acard-modal-title-text {
  flex: 1; font-size: 1.05rem; font-weight: 700;
  color: #fff; letter-spacing: .4px; text-transform: uppercase; line-height: 1.2;
}
.acard-modal-close {
  background: none; border: none; color: rgba(255,255,255,.55);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px;
  line-height: 1; border-radius: 2px; flex-shrink: 0;
  transition: color .2s;
}
.acard-modal-close:hover { color: #fff; }

/* Info section: image + description */
.acard-modal-info {
  display: flex; gap: 18px; padding: 20px;
  background: var(--bg-surface); align-items: flex-start;
}
.acard-modal-img-wrap {
  width: 120px; height: 120px; flex-shrink: 0;
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.acard-modal-img-wrap img { width: 80%; height: 80%; object-fit: contain; }
.acard-modal-desc-text {
  flex: 1; font-size: .78rem; color: var(--text); line-height: 1.65;
  text-transform: uppercase; letter-spacing: .25px; text-align: justify;
}

/* Note section (gold) */
.acard-modal-note {
  padding: 13px 22px; background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--gold); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .3px; text-align: center; line-height: 1.55;
}

/* OPTIONS & STATS divider */
.acard-modal-stats-header {
  text-align: center; padding: 13px 20px 10px;
  font-size: .82rem; font-weight: 700; color: var(--text);
  letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  background: var(--bg-surface);
}

/* Table */
.acard-modal-table-wrap { overflow-x: auto; background: var(--bg-card); }
.acard-modal-table {
  width: 100%; border-collapse: collapse; font-size: .74rem;
}
.acard-modal-table thead tr { background: var(--bg-surface); }
.acard-modal-table th {
  padding: 12px 16px; font-weight: 700; color: #fff;
  text-align: center; letter-spacing: .5px; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: .67rem;
}
.acard-modal-table td {
  padding: 10px 16px; text-align: center;
  color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.04);
}
.acard-modal-table tbody tr:last-child td { border-bottom: none; }
.acard-modal-table td:first-child { color: rgba(255,255,255,.45); font-size: .7rem; }
.acard-modal-no-stats {
  padding: 18px; text-align: center; color: rgba(255,255,255,.3);
  font-size: .78rem; font-style: italic;
}

.class-empty { color: var(--text-dim); font-size: .85rem; font-style: italic; }

/* ─”€─”€ Admin chars ─”€─”€ */
.chars-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;
}
.char-admin-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); padding: 1rem; text-align: center;
  cursor: pointer; transition: var(--transition);
}
.char-admin-card:hover { border-color: var(--accent); }
.char-admin-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: .5rem; }
.char-editor-tabs {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border); padding-bottom: .5rem;
}

/* ─”€─”€ Responsive ─”€─”€ */
@media (max-width: 768px) {
  .class-detail-header { padding: 1rem; }
  .class-detail-tabs { justify-content: center; }
  .class-info-main .class-info-row { flex-direction: column; align-items: center; text-align: center; }
  .class-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .eq-sets-grid { grid-template-columns: 1fr; }
  .eq-sets-grid-special { grid-template-columns: 1fr; }
  .eq-set-special-body { grid-template-columns: 1fr; gap: 1rem; }
  .skills-grid { grid-template-columns: 1fr; }
  .enhancement-layout { flex-direction: column; }
  .enhancement-passives { flex: none; }
}

@media (max-width: 960px) and (min-width: 769px) {
  .eq-sets-grid { grid-template-columns: repeat(2, 1fr); }
}

.gm-usr-btn[data-act="delete"]:hover,
.gm-usr-btn.ban-history-btn:hover {
  border-color: var(--danger) !important;
  color: #fff !important;
  background: var(--danger) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 40%, transparent);
}
.gm-tab-content { display: none; }
.gm-tab-content.active { display: block; }
.gm-opt-group { margin-bottom: .75rem; }
.gm-opt-group label { display: block; margin-bottom: .3rem; color: var(--text-muted, #aaa); font-size: .8rem; }
.gm-slider-row { display: flex; align-items: center; gap: .5rem; }
.gm-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
}
.gm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #4fc3f7);
  cursor: pointer;
  border: 2px solid #fff;
}
.gm-val { min-width: 35px; text-align: right; color: var(--gold, #ffd700); font-weight: bold; font-size: .85rem; }
.gm-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gm-check-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem;
  background: rgba(0,0,0,0.15);
  border-radius: 5px;
  cursor: pointer;
  font-size: .8rem;
}
.gm-check-item:hover { background: rgba(79,195,247,0.08); }
.gm-hint { font-size: .7rem; color: var(--text-muted, #888); margin-top: .3rem; }

/* Excellent options */
.gm-exc-grid { display: grid; gap: 4px; }
.gm-exc-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  background: rgba(0,0,0,0.15);
  border-radius: 5px;
  font-size: .75rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.gm-exc-opt:hover { background: rgba(255,215,0,0.08); }
.gm-exc-opt.active { background: rgba(255,215,0,0.15); border-color: var(--gold, #ffd700); }
.gm-exc-bit { color: var(--gold, #ffd700); font-weight: bold; width: 20px; }
.gm-exc-total {
  margin-top: .5rem; padding: .5rem;
  background: rgba(0,0,0,0.2);
  border-radius: 5px;
  font-size: .8rem;
  color: var(--text-muted, #888);
}

/* Socket grid */
.gm-socket-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: .3rem; }
.gm-socket-slot { text-align: center; }
.gm-socket-slot label { font-size: .65rem; color: var(--text-muted, #888); margin-bottom: 2px; }
.gm-socket-input { width: 100% !important; padding: .4rem !important; font-size: .75rem !important; text-align: center; }

/* Preview panel */
.gm-preview-box {
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: .75rem;
  text-align: center;
}
.gm-preview-img { margin-bottom: .5rem; }
.gm-preview-img img { max-width: 64px; max-height: 64px; object-fit: contain; image-rendering: pixelated; }
.gm-preview-name { color: var(--gold, #ffd700); font-size: 1rem; margin-bottom: .25rem; }
.gm-preview-details { color: var(--text-muted, #888); font-size: .75rem; }
.gm-cmd-box {
  background: #12161B;
  border: 2px solid var(--accent, #4fc3f7);
  border-radius: 8px;
  padding: .75rem;
  margin-bottom: .75rem;
}
.gm-cmd-label { color: var(--accent, #4fc3f7); font-size: .7rem; margin-bottom: .4rem; }
.gm-cmd-text {
  color: #00ff00;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .8rem;
  word-break: break-all;
  line-height: 1.4;
}
.gm-copy-btn {
  width: 100%;
  padding: .75rem;
  background: linear-gradient(135deg, var(--accent, #4fc3f7), #0288d1);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: .9rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.gm-copy-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(79,195,247,0.3); }
.gm-copy-btn.copied { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.gm-param-ref {
  margin-top: .75rem;
  padding: .5rem;
  background: rgba(0,0,0,0.15);
  border-radius: 5px;
  font-size: .65rem;
  color: var(--text-muted, #888);
}
.gm-param-ref code { color: var(--accent, #4fc3f7); }

@media (max-width: 1100px) {
  .gm-grid { grid-template-columns: 1fr; }
  .gm-item-list { height: 250px; }
}
@media (max-width: 600px) {
  .gm-socket-grid { grid-template-columns: repeat(3, 1fr); }
  .gm-checks { grid-template-columns: 1fr; }
}

/* ─
   SKILL ENHANCEMENT TREE ─€” Rediseño total
   ─ */
.enhancement-layout {
  display: flex; gap: 24px; margin-top: 1rem; align-items: flex-start;
}
.enhancement-main {
  flex: 1; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0;
  overflow: visible;
}

/* Sub-tabs (NORMAL SKILL UPGRADE / DEBUFF EXPLOSION) */
.enh-tabs-row {
  display: flex; gap: 8px; padding: 14px 16px 0; border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
}
.enh-tab {
  padding: 8px 18px; background: transparent; border: 1px solid #2a2a2a;
  border-bottom: none; color: rgba(255,255,255,.45); font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; cursor: pointer;
  border-radius: 4px 4px 0 0; transition: all .2s;
}
.enh-tab:hover { color: #fff; border-color: #3a3a3a; }
.enh-tab.active {
  background: #00d4aa; color: #000 !important; border-color: #00d4aa;
  box-shadow: 0 -2px 10px rgba(0,212,170,.25);
}

/* Page number buttons */
.enh-pages-row {
  display: flex; justify-content: center; gap: 8px;
  padding: 14px 16px; background: var(--bg-dark);
}
.enh-page-btn {
  width: 34px; height: 34px; background: var(--bg-surface); border: 2px solid var(--border);
  color: #666; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s;
}
.enh-page-btn:hover { border-color: #00d4aa; color: #fff; }
.enh-page-btn.active {
  background: #00d4aa; border-color: #00d4aa; color: #000;
  box-shadow: 0 0 10px rgba(0,212,170,.4);
}

/* Grid area */
.enh-grid-wrapper {
  padding: 20px 32px 32px; background: var(--bg-dark);
  display: flex; justify-content: center; overflow: visible;
}
.enh-icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 110px);
  gap: 18px 15px; justify-items: center;
  overflow: visible;
}
.enh-icon-item {
  width: auto; height: auto; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: visible;
}
.enh-icon-item.active {
  cursor: pointer;
}
.enh-icon-item.active img {
  transition: box-shadow .15s;
}
.enh-icon-item.active:hover img {
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent-glow, rgba(0,212,170,.5));
  border-radius: 5px;
}
.enh-icon-item.empty { opacity: 0; pointer-events: none; }
.enh-icon-item img {
  width: auto; height: auto; max-width: 40px; max-height: 52px; object-fit: contain; image-rendering: pixelated;
  background: var(--bg-dark); border-radius: 3px; padding: 2px; border: 1px solid rgba(255,255,255,.12);
}
.enh-placeholder { color: rgba(255,255,255,.12); font-size: 1.4rem; }

/* Right passives panel */
.enhancement-passives {
  width: 310px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px;
}
.passive-panel-box {
  background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.passive-panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.passive-panel-diamond {
  font-size: .85rem; line-height: 1;
}
.passive-panel-diamond.gold  { color: #ffc107; }
.passive-panel-diamond.purple { color: #b388ff; }
.passive-panel-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.passive-panel-title.gold   { color: #ffc107; }
.passive-panel-title.purple { color: #b388ff; }
.passive-grid {
  display: flex; flex-direction: column;
}
.passive-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.passive-item:last-child { border-bottom: none; }
.passive-item:hover { background: rgba(255,255,255,.04); }
.passive-icon {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  border-radius: 4px; background: var(--bg-dark); padding: 2px;
}
.passive-name {
  font-size: .82rem; color: #ddd; font-weight: 500; line-height: 1.3;
}

/* ─”€─”€ Tooltip rich ─€” floating inner sections ─”€─”€ */
.enh-rich-tooltip {
  position: fixed; z-index: 9999;
  background: rgba(8, 10, 16, .97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  max-width: 290px;
  pointer-events: none;
  box-shadow: 0 8px 40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Título ─€” barra de color accent */
.enh-tt-title {
  color: var(--accent);
  font-weight: 700;
  font-size: .8rem;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
  padding: 5px 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* Secciones internas flotantes */
.enh-tt-section {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 7px 10px;
}
.enh-tt-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.35);
  margin-bottom: 5px;
}
/* Sección imagen */
.enh-tt-section--img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}
.enh-tt-main-img {
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
}
/* Descripción */
.enh-tt-section--desc {
  color: var(--text-dim);
  font-size: .7rem;
  line-height: 1.5;
  text-align: center;
}
/* Niveles */
.enh-tt-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
}
.enh-tt-lv {
  display: flex;
  justify-content: space-between;
  font-size: .67rem;
  gap: 4px;
}
.enh-tt-lv span  { color: rgba(255,255,255,.4); }
.enh-tt-lv strong { color: var(--accent); }
/* Requisitos */
.enh-tt-req { display: flex; flex-direction: column; gap: 3px; }
.enh-tt-req-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  line-height: 1.4;
}
.enh-tt-req-k  { color: rgba(255,255,255,.45); }
.enh-tt-req-v  { color: var(--accent); }
.enh-tt-req-info { color: var(--text-dim); }
/* Opciones/efectos ─€” cada uno es su propio mini-card */
.enh-tt-options { display: flex; flex-direction: column; gap: 4px; }
.enh-tt-opt-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: .68rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.enh-tt-opt-img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }

/* Ability cards use the primary definitions above */
/* enh-rich-tooltip consolidado arriba */

/* Guide More Info popovers */
.guide-more-info-trigger {
  cursor: pointer;
}

.guide-info-tooltip {
  position: fixed;
  z-index: 10020;
  width: min(760px, calc(100vw - 24px));
  max-height: min(74vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(10, 12, 20, .98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.82), 0 0 0 1px rgba(0,0,0,.55);
  animation: guideInfoIn .16s ease-out;
}

@keyframes guideInfoIn {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.guide-info-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.guide-info-tooltip-head strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.guide-info-tooltip-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}

.guide-info-tooltip-close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.guide-info-tooltip-body {
  overflow: auto;
  padding: 12px;
  color: var(--text);
}

.guide-info-tooltip-body .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.guide-info-tooltip-body [class*="col-"] {
  padding: 0 8px;
}

.guide-info-tooltip-body .col-12 { width: 100%; }
.guide-info-tooltip-body .col-md-6 { width: 50%; }
.guide-info-tooltip-body .col-lg-4 { width: 33.333%; }
.guide-info-tooltip-body .col-lg-8 { width: 66.666%; }
.guide-info-tooltip-body .col-xl-3,
.guide-info-tooltip-body .col-xxl-3 { width: 25%; }
.guide-info-tooltip-body .col-xl-9,
.guide-info-tooltip-body .col-xxl-9 { width: 75%; }

.guide-info-tooltip-body img {
  max-width: 100%;
  height: auto;
}

.guide-info-tooltip-body .table-responsive-sm {
  overflow-x: auto;
}

/* Character link chips inside tooltip */
.guide-tooltip-char-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.guide-tooltip-char-link .btn,
.guide-tooltip-char-link button,
.guide-info-tooltip-body .badge-character {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 90%, white);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 4px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.guide-tooltip-char-link:hover .btn,
.guide-tooltip-char-link:hover button,
.guide-info-tooltip-body .badge-character:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  color: var(--accent-light);
}
.guide-info-tooltip-body .badge-character-link {
  text-decoration: none;
}

.guide-info-tooltip-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  margin: 8px 0;
  background: rgba(255,255,255,.03);
}

.guide-info-tooltip-body th,
.guide-info-tooltip-body td {
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 8px;
  text-align: center;
}

.guide-info-tooltip-body th {
  color: var(--gold);
  background: rgba(255,255,255,.06);
}

.guide-info-tooltip-body .nav-tabs,
.guide-info-tooltip-body .tabs-page {
  display: none;
}

.guide-info-tooltip-body .card,
.guide-info-tooltip-body .card-bg-sinhover {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 10px;
}

.content-body .guide-tabs-enhanced,
.content-body .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 18px 0 16px;
  border: 0;
  list-style: none;
}

.content-body .guide-tabs-enhanced .nav-item {
  list-style: none;
  margin: 0;
}

.content-body .guide-tabs-enhanced .nav-link {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  color: var(--text-dim);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 7px 12px;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.content-body .guide-tabs-enhanced .nav-link:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold);
}

.content-body .guide-tabs-enhanced .nav-link.active {
  background: color-mix(in srgb, var(--gold) 16%, rgba(255,255,255,.04));
  border-color: color-mix(in srgb, var(--gold) 68%, transparent);
  color: var(--gold);
}

.content-body .tab-pane[hidden] {
  display: none !important;
}

.content-body .boton-go-to,
.content-body .guide-direct-btn {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 8px 12px;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.content-body .boton-go-to:hover,
.content-body .guide-direct-btn:hover {
  background: color-mix(in srgb, var(--gold) 14%, rgba(255,255,255,.06));
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

.content-body .btn-more-info,
.content-body .guide-more-info-trigger {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--text-dim);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 10px;
  text-transform: uppercase;
}

.content-body .btn-more-info:hover,
.content-body .guide-more-info-trigger:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.guide-item-cat-card {
  text-align: left;
}

@media (max-width: 640px) {
  .guide-info-tooltip {
    left: 12px !important;
    right: 12px;
    top: 72px !important;
    width: auto;
    max-height: calc(100vh - 96px);
  }

  .guide-info-tooltip-body [class*="col-"] {
    width: 100%;
  }
}


/* ─
   GUIDES SYSTEM ─€” GuidesMuOnline.com Styling
   ─ */

/* Guide Modal */
#guideModal .news-modal-box {
  max-width: 1200px; max-height: 90vh; overflow-y: auto;
}

/* Guide Content Container */
.content-body {
  font-family: var(--font-body);
  color: var(--text);
}

.content-body .container {
  max-width: 100%;
  padding: 0;
}

/* Title with Gradient */
.content-body h1.titulo-page-gradient {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: #00d9ff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
  margin-bottom: 24px !important;
  padding: 0 0 16px 0;
  border-bottom: 2px solid rgba(0, 217, 255, 0.3);
}

/* Guide Section Titles */
.content-body h2.titulo-guide {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #00d9ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px !important;
  margin-top: 16px !important;
}

/* Guide Description Paragraphs */
.content-body p.descripcion-guide {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 12px !important;
}

/* Guide Cards */
.content-body .card-guide {
  background: linear-gradient(145deg, #12121a, #1a1a28);
  border: 1px solid rgba(26, 127, 224, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  margin-bottom: 16px !important;
  transition: all .3s ease;
}

.content-body .card-guide:hover {
  border-color: rgba(26, 127, 224, 0.5);
  box-shadow: 0 8px 32px rgba(26, 127, 224, 0.15);
  transform: translateY(-2px);
}

.content-body .card-guide .card-body {
  padding: 24px !important;
}

/* Text Accent Colors */
.content-body .text-accent {
  color: #00d9ff;
  font-weight: 500;
}

.content-body .text-accent-upper {
  color: #00d9ff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Row/Column Grid */
.content-body .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

.content-body .col-12 { width: 100%; padding: 0 12px; }
.content-body .col-4 { width: 33.333%; padding: 0 12px; }
.content-body .col-5 { width: 41.666%; padding: 0 12px; }
.content-body .col-7 { width: 58.333%; padding: 0 12px; }
.content-body .col-lg-3 { width: 25%; padding: 0 12px; }
.content-body .col-lg-4 { width: 33.333%; padding: 0 12px; }
.content-body .col-lg-5 { width: 41.666%; padding: 0 12px; }
.content-body .col-lg-7 { width: 58.333%; padding: 0 12px; }
.content-body .col-lg-8 { width: 66.666%; padding: 0 12px; }
.content-body .col-lg-9 { width: 75%; padding: 0 12px; }
.content-body .col-md-5 { width: 41.666%; padding: 0 12px; }
.content-body .col-md-7 { width: 58.333%; padding: 0 12px; }
.content-body .col-xl-3 { width: 25%; padding: 0 12px; }
.content-body .col-xl-4 { width: 33.333%; padding: 0 12px; }
.content-body .col-xl-5 { width: 41.666%; padding: 0 12px; }
.content-body .col-xl-7 { width: 58.333%; padding: 0 12px; }
.content-body .col-xl-8 { width: 66.666%; padding: 0 12px; }
.content-body .col-xl-9 { width: 75%; padding: 0 12px; }
.content-body .col-xxl-3 { width: 25%; padding: 0 12px; }
.content-body .col-xxl-4 { width: 33.333%; padding: 0 12px; }
.content-body .col-xxl-5 { width: 41.666%; padding: 0 12px; }
.content-body .col-xxl-7 { width: 58.333%; padding: 0 12px; }
.content-body .col-xxl-8 { width: 66.666%; padding: 0 12px; }
.content-body .col-xxl-9 { width: 75%; padding: 0 12px; }

.content-body .row-cols-1 > * { width: 100%; }
.content-body .row-cols-2 > * { width: 50%; }
.content-body .row-cols-3 > * { width: 33.333%; }
.content-body .row-cols-4 > * { width: 25%; }

.content-body .row-cols-md-2 > * { width: 50%; }
.content-body .row-cols-lg-2 > * { width: 50%; }
.content-body .row-cols-lg-3 > * { width: 33.333%; }
.content-body .row-cols-xl-3 > * { width: 33.333%; }
.content-body .row-cols-xl-4 > * { width: 25%; }
.content-body .row-cols-xxl-3 > * { width: 33.333%; }
.content-body .row-cols-xxl-4 > * { width: 25%; }
.content-body .row-cols-xxl-5 > * { width: 20%; }

/* Utility Classes */
.content-body .mb-1 { margin-bottom: 8px !important; }
.content-body .mb-2 { margin-bottom: 12px !important; }
.content-body .mb-3 { margin-bottom: 16px !important; }
.content-body .mb-4 { margin-bottom: 24px !important; }
.content-body .mt-1 { margin-top: 8px !important; }
.content-body .mt-2 { margin-top: 12px !important; }
.content-body .mt-3 { margin-top: 16px !important; }
.content-body .mt-4 { margin-top: 24px !important; }
.content-body .me-2 { margin-right: 12px !important; }
.content-body .p-0 { padding: 0 !important; }
.content-body .p-1 { padding: 8px !important; }
.content-body .px-2 { padding-left: 12px !important; padding-right: 12px !important; }
.content-body .py-2 { padding-top: 12px !important; padding-bottom: 12px !important; }
.content-body .fw-bold { font-weight: 700 !important; }
.content-body .text-center { text-align: center !important; }
.content-body .text-info { color: var(--accent) !important; }
.content-body .text-danger { color: var(--danger) !important; }
.content-body .text-warning { color: var(--gold) !important; }
.content-body .h-100 { height: 100% !important; }
.content-body .d-flex { display: flex !important; }
.content-body .align-items-center { align-items: center !important; }
.content-body .justify-content-center { justify-content: center !important; }
.content-body .justify-content-space-between { justify-content: space-between !important; }
.content-body .flex-wrap { flex-wrap: wrap !important; }
.content-body .gap-2 { gap: 12px !important; }
.content-body .gap-3 { gap: 16px !important; }

/* Images */
.content-body img.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

.content-body img {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Tables */
.content-body .table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.content-body .table-dark {
  background: rgba(10, 10, 15, 0.8);
}

.content-body .table.table-bordered {
  border: 1px solid rgba(26, 127, 224, 0.2);
}

.content-body .table.table-bordered thead,
.content-body .table.table-bordered tbody {
  border-color: rgba(26, 127, 224, 0.2);
}

.content-body .table thead th {
  background: rgba(26, 127, 224, 0.15);
  color: #00d9ff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 12px 8px !important;
  border-color: rgba(26, 127, 224, 0.3) !important;
}

.content-body .table tbody td {
  padding: 10px 8px !important;
  border-color: rgba(26, 127, 224, 0.1) !important;
}

.content-body .table tbody tr:hover {
  background: rgba(26, 127, 224, 0.08);
}

/* Accordion */
.content-body .accordion-flush {
  border: none;
}

.content-body .accordionGuide {
  border: 1px solid rgba(26, 127, 224, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.content-body .accordion-button {
  background: rgba(26, 127, 224, 0.1);
  color: #00d9ff;
  border: 1px solid rgba(26, 127, 224, 0.2);
  padding: 14px 16px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all .3s ease;
}

.content-body .accordion-button:not(.collapsed) {
  background: rgba(26, 127, 224, 0.2);
  box-shadow: none;
  border-color: rgba(26, 127, 224, 0.4);
}

.content-body .accordion-button:focus {
  border-color: rgba(26, 127, 224, 0.4);
  box-shadow: none;
}

.content-body .accordion-collapse {
  background: rgba(10, 10, 15, 0.5);
}

.content-body .accordion-body {
  padding: 16px !important;
  border-top: 1px solid rgba(26, 127, 224, 0.2);
  color: var(--text-dim);
}

/* Links within guides */
.content-body a {
  color: #00d9ff;
  text-decoration: none;
  transition: color .2s ease;
}

.content-body a:hover {
  color: #00ffff;
  text-decoration: underline;
}

/* Lists */
.content-body ul, .content-body ol {
  margin-left: 20px;
  margin-bottom: 12px !important;
}

.content-body li {
  margin-bottom: 8px;
}

/* Go-to cards (links to related guides) */
.content-body .card-go-to-from-guide {
  background: rgba(26, 127, 224, 0.1);
  border: 1px solid rgba(26, 127, 224, 0.2);
  border-radius: 8px;
  padding: 12px !important;
  text-align: center;
  cursor: pointer;
  transition: all .3s ease;
}

.content-body .card-go-to-from-guide:hover {
  border-color: rgba(26, 127, 224, 0.5);
  background: rgba(26, 127, 224, 0.15);
  transform: translateY(-2px);
}

.content-body .nombre-go-to-from-guide {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #00d9ff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Responsive */
@media (max-width: 768px) {
  .content-body h1.titulo-page-gradient { font-size: 1.4rem; }
  .content-body h2.titulo-guide { font-size: 1.1rem; }
  .content-body .col-4 { width: 100%; }
  .content-body .col-5 { width: 100%; }
  .content-body .col-7 { width: 100%; }
  .content-body .row-cols-md-2 > * { width: 100%; }
  .content-body .row-cols-lg-2 > * { width: 100%; }
  .content-body .row-cols-lg-3 > * { width: 100%; }
}

/* ─
   ITEMS CATALOGUE ─€” integrado en Guías
   ─ */

/* Filtro de clase */
.items-inline-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: .82rem;
  color: var(--text-muted);
}
.items-cls-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--text-main);
  font-size: .82rem;
  outline: none;
  cursor: pointer;
}
.items-cls-select:focus { border-color: var(--accent); }

/* Grid de tarjetas */
.items-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 15px;
}
.items-catalogue-grid--weapon  { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.items-catalogue-grid--wing    { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.items-catalogue-grid--earring { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ─”€─”€ Base card (icc) ─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€ */
.icc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  will-change: transform;
}
.icc:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.icc .icc-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
}
.icc .icc-img img {
  object-fit: contain;
  image-rendering: pixelated;
}
.icc-placeholder { font-size: 1.8rem; opacity: .3; }
.icc-name {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4ddec8;
  text-align: center;
  padding: 8px 8px 0;
  line-height: 1.2;
}
.icc-req {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px 8px;
}
.icc-req span { color: var(--text); }

/* ─”€─”€ Shared: armor / weapon / earring / wing card layout ─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€ */
/* All cards use icc-wing-img-wrap + icc-wing-badge + icc-wing-footer  */
.icc--armor  { padding: 0; flex-direction: column; align-items: stretch; }
.icc--weapon { padding: 0; flex-direction: column; align-items: stretch; }
.icc--earring { padding: 0; flex-direction: column; align-items: stretch; }

/* Image size per type */
.icc--armor  .icc-wing-img-wrap img { max-width: 110px; max-height: 70px; }
.icc--weapon .icc-wing-img-wrap img { max-width: 200px; max-height: 200px; }
.icc--earring .icc-wing-img-wrap img { max-width: 70px; max-height: 70px; }

/* NORMAL / EXCELLENT stat row inside footer */
.icc-item-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.icc-item-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.icc-item-stat-k {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.icc-item-stat-v {
  font-size: .74rem;
  font-weight: 700;
  color: var(--text);
}
.icc-item-stat--exc .icc-item-stat-k { color: var(--gold); }
.icc-item-stat--exc .icc-item-stat-v { color: var(--gold); }

/* Earring sub-badge (MASTERY EARRING label inside footer) */
.icc-ear-badge {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #4ddec8;
  border: 1px solid rgba(77,222,200,.35);
  background: rgba(77,222,200,.06);
  padding: 2px 8px;
  border-radius: 4px;
}



/* ─”€─”€ Wing card ─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€─”€ */
.icc--wing { padding: 0; flex-direction: column; align-items: stretch; }
.icc-wing-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 18px;
  background: linear-gradient(160deg, rgba(77,222,200,.04) 0%, transparent 70%);
  min-height: 120px;
}
.icc-wing-img-wrap img {
  max-width: 130px;
  max-height: 120px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 12px rgba(77,222,200,.18));
  transition: transform .2s, filter .2s;
}
.icc:hover .icc-wing-img-wrap img {
  transform: scale(1.06) translateY(-2px);
  filter: drop-shadow(0 6px 18px rgba(77,222,200,.35));
}
.icc-wing-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: #4ddec8;
  background: #0a121c;
  border: 1px solid rgba(77,222,200,.4);
  border-radius: 4px;
  padding: 2px 7px;
  pointer-events: none;
}
.icc-wing-footer {
  border-top: 1px solid var(--border);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.icc--wing .icc-name {
  padding: 0;
  font-size: .72rem;
}
.icc-wing-classes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.icc-wing-cls {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(77,222,200,.85);
  background: rgba(77,222,200,.07);
  border: 1px solid rgba(77,222,200,.22);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Legacy classes ─€” kept for backward compatibility */
.item-cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  display: flex;
  flex-direction: column;
}
.item-cat-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.item-cat-card-img {
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}
.item-cat-card-img img {
  max-height: 64px;
  max-width: 90%;
  object-fit: contain;
  image-rendering: pixelated;
}
.item-cat-card-img span { font-size: 1.8rem; opacity: .3; }
.item-cat-card-info { padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.item-cat-card-name { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.item-cat-card-lvl  { font-size: .7rem; color: var(--gold); }
.item-cat-card-cls  { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 1px; }
.item-cat-card-cls span { background: var(--bg-dark); border-radius: 3px; padding: 1px 4px; font-size: .62rem; color: var(--text-muted); }

/* Panel de detalle de ítem */
.item-detail-panel { }

.item-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 20px;
  background: var(--bg-dark);
  border-radius: 8px;
  margin-bottom: 20px;
}
.item-detail-main-img {
  max-height: 88px;
  max-width: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.item-detail-meta { display: flex; flex-direction: column; gap: 6px; }
.item-detail-meta h2 { margin: 0; font-size: 1.2rem; }
.item-detail-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.item-detail-badge {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 9px;
  font-size: .76rem;
  color: var(--text-muted);
}
.item-detail-badge--season { border-color: var(--gold); color: var(--gold); }
.item-detail-cls { display: flex; flex-wrap: wrap; gap: 4px; }
.item-detail-cls span {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: .73rem;
}

.item-detail-body { }
.item-detail-section { margin-bottom: 20px; }
.item-detail-section h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.item-detail-attrs { display: flex; flex-wrap: wrap; gap: 6px; }
.item-detail-attr-row {
  background: var(--bg-dark);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: .82rem;
  display: flex;
  gap: 8px;
}
.item-detail-attr-row span:first-child { color: var(--text-muted); }

.item-detail-opts {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.item-detail-opts li { font-size: .84rem; }

/* Piezas del set en detalle */
.item-detail-pieces-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.item-detail-piece {
  background: var(--bg-dark);
  border-radius: 7px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  text-align: center;
  min-width: 100px;
}
.item-detail-piece img {
  height: 36px;
  max-width: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Tabla de estadísticas */
.item-stats-wrap { overflow-x: auto; }
.item-stats-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .81rem;
  min-width: 320px;
}
.item-stats-tbl th {
  background: var(--bg-dark);
  color: var(--text-muted);
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.item-stats-tbl td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}
.item-stats-tbl tr:last-child td { border-bottom: none; }
.item-stats-tbl tr:hover td { background: rgba(255,255,255,.04); }

@media (max-width: 640px) {
  .items-catalogue-grid,
  .items-catalogue-grid--weapon,
  .items-catalogue-grid--wing    { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .items-catalogue-grid--earring { grid-template-columns: 1fr; }
  .item-detail-header { flex-direction: column; }
  .items-sets-grid { grid-template-columns: 1fr; }
  .set-card-body { flex-direction: column; }
  .set-card-options { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 12px; }
}

/* ─
   SET CARDS (ancient / lucky / mastery sets)
   ─ */

.items-sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 18px;
}

.set-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.set-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
  transform: translateY(-1px);
}

.set-card-title {
  text-align: center;
  padding: 11px 14px 10px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(77,222,200,.1), rgba(77,222,200,.02));
  color: #4ddec8;
}

.set-card-body {
  display: flex;
  flex: 1;
  gap: 0;
  min-height: 238px;
}

/* Columna izquierda ─€” piezas */
.set-card-pieces {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  gap: 8px;
  flex: 0 0 52%;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,.16);
}

.set-card-no-pieces { color: var(--text-muted); font-size: .8rem; text-align: center; }

.set-card-piece {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.set-card-piece:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
}
.set-card-piece:last-child { margin-bottom: 0; }

.set-card-piece-img {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
.set-card-piece-img img {
  max-width: 68px;
  max-height: 68px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(77,222,200,.26));
}

.set-card-piece-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.set-card-piece-name {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-main);
  text-transform: uppercase;
  line-height: 1.25;
}
.set-card-piece-def {
  font-size: .65rem;
  color: var(--accent-light);
}
.set-card-piece-extra {
  font-size: .6rem;
  color: var(--text-muted);
  word-break: break-word;
  line-height: 1.3;
}

/* Columna derecha ─€” options info */
.set-card-options {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  background: rgba(0,0,0,.1);
}

.set-card-options-header {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.set-card-effect {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 5px;
}
.set-card-effect:first-of-type {
  border-top: none;
  padding-top: 0;
}

.set-card-effect-title {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  text-transform: uppercase;
}

.set-card-bonus {
  font-size: .64rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Footer */
.set-card-footer {
  border-top: 1px solid var(--border);
  padding: 9px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.28);
}

.set-card-req {
  font-size: .66rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.set-card-classes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.set-card-cls {
  background: rgba(77,222,200,.08);
  border: 1px solid rgba(77,222,200,.24);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .61rem;
  color: rgba(77,222,200,.9);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.set-card-season {
  font-size: .61rem;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ─
   ITEM DETAIL MODAL (imd-*)
   ─ */

.imd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* No backdrop-filter: causa micro-congelaciones al componer en GPU */
  will-change: opacity;
  animation: imdFadeIn .12s cubic-bezier(0,0,.2,1) both;
}
@keyframes imdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.imd-card {
  background: rgba(8, 10, 16, .97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  width: 100%;
  max-width: 820px;
  max-height: 94vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6);
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: imdSlideUp .2s cubic-bezier(.16,1,.3,1) both;
  padding: 8px;
  gap: 5px;
}
@keyframes imdSlideUp {
  from { transform: translateY(16px) translateZ(0); opacity: 0; }
  to   { transform: translateY(0)    translateZ(0); opacity: 1; }
}

/* Header ─€” now a floating card */
.imd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 9px;
  gap: 12px;
  position: sticky;
  z-index: 2;
}
.imd-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.imd-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.imd-close:hover { border-color: var(--danger); color: var(--danger); }

/* Top row: image + equipped info ─€” floating card */
.imd-top {
  display: flex;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  min-height: 110px;
  overflow: hidden;
}
.imd-img-col {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-right: 1px solid rgba(255,255,255,.08);
}
/* Lucky card column (only present for lucky sets) */
.imd-lucky-col {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(0, 80, 0, .08);
}
.imd-lucky-img {
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px #22c55e88);
}
.imd-lucky-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: #22c55e;
  text-transform: uppercase;
  text-align: center;
}
/* Wing Core section ─€” floating card */
.imd-wingcore {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 10px;
}
.imd-wingcore-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.imd-wc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.imd-wc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  padding: 8px 10px;
  min-width: 100px;
  max-width: 140px;
}
.imd-wc-img {
  max-width: 80px;
  max-height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.imd-wc-name {
  font-size: .6rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}
.imd-img {
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px var(--accent-glow));
}
.imd-img-placeholder {
  font-size: 2.5rem;
  color: var(--text-muted);
}
.imd-info-col {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.imd-equipped-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
}
.imd-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.imd-class-badge {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-light);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.imd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  justify-content: center;
}
.imd-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .68rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.imd-badge--season { border-color: var(--gold); color: var(--gold); }
.imd-badge--lvl    { border-color: var(--accent); color: var(--accent-light); }

/* OPTIONS INFO collapsible ─€” floating card */
.imd-options {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  overflow: hidden;
}
.imd-options-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,.03);
  transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.imd-options-hdr:hover { background: rgba(0,0,0,.3); }
.imd-options-hdr-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--gold);
  text-transform: uppercase;
}
.imd-options-chevron {
  color: var(--gold);
  transition: transform .2s;
  flex-shrink: 0;
}
.imd-options--collapsed .imd-options-chevron { transform: rotate(180deg); }
.imd-options-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.imd-options--collapsed .imd-options-body { display: none; }
.imd-effect {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.imd-effect:first-child { margin-top: 0; }
.imd-effect-title {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-light);
  text-align: center;
  padding: 3px 0;
  border-bottom: 1px solid rgba(26,127,224,.2);
  margin-bottom: 2px;
}
.imd-effect-bonus {
  font-size: .73rem;
  color: var(--gold);
  text-align: center;
  line-height: 1.45;
}

/* Stats / table section ─€” floating card */
.imd-stats {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  overflow: hidden;
}
.imd-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
}
.imd-tab {
  padding: 8px 18px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.imd-tab.active, .imd-tab:hover { color: var(--accent-light); border-bottom-color: var(--accent); }
.imd-table-panel { display: none; }
.imd-table-panel.active { display: block; }
.imd-table-wrap {
  overflow-x: auto;
  padding: 10px 12px 12px;
}
.imd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .74rem;
}
.imd-table th {
  padding: 6px 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .67rem;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.imd-table th.imd-th-group {
  color: var(--text);
  font-size: .7rem;
  letter-spacing: .08em;
  background: rgba(26,127,224,.1);
  border-bottom: 2px solid var(--accent);
}
.imd-table th.imd-th-group--req {
  background: rgba(62,143,240,.08);
  border-bottom-color: var(--gold);
  color: var(--gold);
}
.imd-table td {
  padding: 5px 10px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.04);
  color: var(--text-dim);
}
.imd-table td:first-child { color: var(--accent-light); font-weight: 600; }
.imd-table tbody tr:hover td { background: rgba(255,255,255,.03); }

/* Simple attrs (when no stats table) */
.imd-attrs {
  padding: 14px 18px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.imd-attr-row {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .78rem;
}
.imd-attr-key { color: var(--text-muted); }
.imd-attr-val { color: var(--accent-light); font-weight: 600; }

@media (max-width: 540px) {
  .imd-card { max-height: 95vh; border-radius: 10px 10px 0 0; }
  .imd-backdrop { align-items: flex-end; padding: 0; }
  .imd-top { flex-direction: column; }
  .imd-img-col { width: 100%; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; gap: 14px; justify-content: flex-start; padding: 12px 16px; }
  .imd-lucky-col { width: 100%; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; gap: 12px; justify-content: flex-start; padding: 10px 16px; }
}


/* ─
   HOME GRID (Noticias + Patch Notes)
   ─ */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 10px;
  width: 100%;
}
.home-col { min-width: 0; }

.section-eyebrow {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: 4px;
}
.section-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--gold);
  color: #1a0f00;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.section-link-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ─”€─”€ Lista de noticias (blog) ─”€─”€ */
.home-news-list { display: flex; flex-direction: column; gap: 16px; }
.home-news-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.home-news-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.home-news-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: .74rem;
  color: var(--text-muted);
}
.home-news-tag {
  color: var(--gold);
  font-weight: 600;
  text-transform: capitalize;
}
.home-news-body { display: flex; gap: 18px; padding: 18px; }
.home-news-thumb {
  width: 150px;
  height: 110px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}
.home-news-text { min-width: 0; }
.home-news-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.home-news-excerpt {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Columna lateral: Patch Notes ── */
.home-side-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.home-side-block .section-header { margin-bottom: 16px; }
.home-side-block .section-title { font-size: 1.15rem; }
.home-side-block .section-title::before {
  width: 3px; height: 18px; margin-right: 9px;
}

.home-patches-list { display: flex; flex-direction: column; gap: 8px; }
.home-patch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid transparent;
  text-decoration: none;
  transition: var(--transition);
}
.home-patch-item:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.home-patch-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-patch-date {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 20px;
}

/* ── Imagen promocional lateral ── */
.home-promo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.home-promo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 1000px) {
  .home-grid { grid-template-columns: 1fr; padding: 28px 20px 10px; }
  .home-news-thumb { width: 110px; height: 90px; }
}
@media (max-width: 600px) {
  .hero-content { padding: 40px 22px; }
  .hero-logo { width: 62%; }
  .home-news-body { flex-direction: column; }
  .home-news-thumb { width: 100%; height: 160px; }
}

/* ══════════════════════════════════════
   WIKI
   ══════════════════════════════════════ */
.wiki-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 60px;
}
.wiki-hero {
  text-align: center;
  padding: 40px 20px 32px;
}
.wiki-hero-kicker {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 10px;
}
.wiki-hero-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
}
.wiki-hero-sub {
  color: var(--text-dim);
  font-size: 1rem;
  max-width: 620px;
  margin: 0 auto 24px;
}
.wiki-search { max-width: 560px; margin: 0 auto; }
.wiki-search input {
  width: 100%;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  transition: var(--transition);
}
.wiki-search input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(62,143,240,.15);
}

.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.wiki-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.wiki-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.wiki-card-icon { font-size: 2rem; margin-bottom: 12px; }
.wiki-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.wiki-card-desc {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-dim);
  flex: 1;
}
.wiki-card-more {
  margin-top: 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold);
}

.wiki-content { margin-top: 32px; }
.wiki-article {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.wiki-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  padding: 7px 16px;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 20px;
  transition: var(--transition);
}
.wiki-back:hover { border-color: var(--gold); color: var(--gold); }
.wiki-article-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 10px;
}
.wiki-article-desc { color: var(--text-dim); margin-bottom: 20px; }
.wiki-article-body { color: var(--text-dim); line-height: 1.7; }

@media (max-width: 1000px) {
  .wiki-page { padding: 28px 20px 40px; }
  .wiki-hero-title { font-size: 1.8rem; }
}

/* ══════════════════════════════════════
   MARCO DE PANELES (estilo cards del launcher)
   Borde fino arriba/abajo, grueso a los lados.
   Hover: los bordes existentes se intensifican (mismo radio) + glow.
   ══════════════════════════════════════ */
.panel-frame,
.info-card,
.news-card,
.class-slide,
.wiki-card,
.wiki-article,
.home-rank-card,
.rank-table-wrap,
.home-news-item,
.home-side-block,
.home-patch-item,
.pn-item,
.stat-card,
.donation-card,
.guide-card,
.up-info-card,
.up-tabs,
.auth-box,
.exch-preview {
  position: relative;
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.45);
  border-right: 3px solid rgba(62,143,240,.45);
  border-radius: 10px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Barra superior sutil (como el ::before de las cards del launcher) */
.panel-frame::before,
.info-card::before,
.news-card::before,
.class-slide::before,
.wiki-card::before,
.wiki-article::before,
.home-rank-card::before,
.rank-table-wrap::before,
.home-news-item::before,
.home-side-block::before,
.home-patch-item::before,
.pn-item::before,
.stat-card::before,
.donation-card::before,
.guide-card::before,
.up-info-card::before,
.up-tabs::before,
.auth-box::before,
.exch-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .4;
  pointer-events: none;
}

/* Hover: se intensifican los bordes existentes manteniendo el radio.
   Solo en paneles/tarjetas con función de click. */
.news-card:hover,
.class-slide:hover,
.wiki-card:hover,
.home-rank-card:hover,
.home-news-item:hover,
.home-patch-item:hover,
.pn-item:hover,
.donation-card:hover,
.guide-card:hover {
  border-color: rgba(62,143,240,.35);
  border-left-color: rgba(62,143,240,.95);
  border-right-color: rgba(62,143,240,.95);
  box-shadow: 0 0 18px rgba(62,143,240,.28);
}

.news-card:hover::before,
.class-slide:hover::before,
.wiki-card:hover::before,
.home-rank-card:hover::before,
.home-news-item:hover::before,
.home-patch-item:hover::before,
.pn-item:hover::before,
.donation-card:hover::before,
.guide-card:hover::before {
  opacity: .85;
}

/* El hover global de enlaces (a:hover) no debe alterar el color del texto
   de los botones; se preserva su color propio. */
.section-link-btn:hover { color: #1a0f00; }
.hero-cta-btn--primary:hover { color: #fff; }
.hero-cta-btn--secondary:hover { color: var(--text); }
.btn-admin-panel:hover { color: #000; }
.btn-register:hover { color: #fff; }

/* Botones de la barra (Login e idioma) */
.header-actions .btn-auth,
.header-actions .btn-register {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(62,143,240,.45);
  border-right: 3px solid rgba(62,143,240,.45);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.header-actions .btn-auth::after,
.header-actions .btn-register::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  mix-blend-mode: overlay;
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .6s ease;
}
.header-actions .btn-auth:hover,
.header-actions .btn-register:hover {
  color: var(--gold);
  border-left-color: rgba(62,143,240,.95);
  border-right-color: rgba(62,143,240,.95);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(62,143,240,.25);
}
.header-actions .btn-auth:hover::after,
.header-actions .btn-register:hover::after { left: 130%; }
.header-lang-btn:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
  color: #fff;
}
.header-lang-btn:hover .lang-caret,
.header-lang-btn:hover .lang-flag {
  filter: drop-shadow(0 0 6px rgba(62,143,240,.6));
}

/* ══════════════════════════════════════
   BOTONES DE LA BARRA (nav-link) — hover limpio: solo brillo en las letras
   ══════════════════════════════════════ */
.header-nav .nav-link {
  border: none;
  overflow: visible;
  transition: color .25s ease, text-shadow .25s ease;
}
.header-nav .nav-link:hover {
  color: #fff;
  background: transparent;
  border: none;
  transform: none;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(255,255,255,.75), 0 0 20px rgba(62,143,240,.45);
}
.header-nav .nav-link:active { transform: none; }
.header-nav .nav-link.active {
  color: var(--gold);
  border: none;
  background: transparent;
}

/* ══════════════════════════════════════
   BOTONES — efecto 3D + reflejo deslizante
   El reflejo usa mix-blend-mode para iluminar sin ocultar el texto.
   ══════════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-preregister,
.btn-admin-panel,
.hero-cta-btn,
.section-link,
.section-link-btn,
.rank-tab,
.rank-page-btn,
.donation-btn,
.wiki-back {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -2px 0 rgba(0,0,0,.35) inset,
    0 3px 6px rgba(0,0,0,.4);
}

/* Reflejo que recorre el botón (ilumina sin tapar el texto) */
.btn-primary::after,
.btn-secondary::after,
.btn-preregister::after,
.btn-admin-panel::after,
.hero-cta-btn::after,
.section-link::after,
.section-link-btn::after,
.rank-tab::after,
.rank-page-btn::after,
.donation-btn::after,
.wiki-back::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  mix-blend-mode: overlay;
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .6s ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-preregister:hover,
.btn-admin-panel:hover,
.hero-cta-btn:hover,
.section-link:hover,
.section-link-btn:hover,
.rank-tab:hover,
.rank-page-btn:hover,
.donation-btn:hover,
.wiki-back:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -2px 0 rgba(0,0,0,.35) inset,
    0 6px 14px rgba(0,0,0,.5),
    0 0 14px rgba(62,143,240,.25);
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-preregister:hover::after,
.btn-admin-panel:hover::after,
.hero-cta-btn:hover::after,
.section-link:hover::after,
.section-link-btn:hover::after,
.rank-tab:hover::after,
.rank-page-btn:hover::after,
.donation-btn:hover::after,
.wiki-back:hover::after {
  left: 130%;
}

.btn-primary:active,
.btn-secondary:active,
.btn-preregister:active,
.btn-admin-panel:active,
.hero-cta-btn:active,
.section-link:active,
.section-link-btn:active,
.rank-tab:active,
.rank-page-btn:active,
.donation-btn:active,
.wiki-back:active {
  transform: translateY(0) scale(.98);
  box-shadow:
    0 2px 6px rgba(0,0,0,.5) inset,
    0 1px 0 rgba(255,255,255,.05) inset;
}